deploy.js

/* eslint-disable no-undef,jsx-a11y/img-has-alt */
/**
 * Created by zhouhuan on 2017/11/21.
 */
import React from 'react';
import QRcode from 'qrcode';
import { Button, Table, Popconfirm, Modal, Divider } from 'antd';
import config from '../../../../utils/config';
import { encrypt } from '../../../../utils/helper';
import styles from './list.less';
import { thisPush } from '../../../../services/route';

class Deploy extends React.Component {
  state = {
    urls: '',
    visible: false,
    completeUrl: '',
  };
  componentDidMount() {
    this.props.dispatch({ type: 'appInfo/getTokens' });
    const { value } = this.props.location.state;
    // console.log(value);
    this.props.dispatch({ type: 'appInfo/getAppInfo', payload: { name: value.name } });
  }
  onDelete = (record) => {
    const id = record.id;
    const { value } = this.props.location.state;
    this.props.dispatch({ type: 'appInfo/removeDeployApp', payload: { id, name: value.name } });
  };
  onEdit = (record) => {
    const { value } = this.props.location.state;
    thisPush(this, { pathname: '../editDeploy', state: { record, value } });
  };
  onQrcode = (record) => {
    const { token } = this.props.appInfo;
    const tokens = encrypt(token);
    const uri = record.uri;
    const URL = `${config.apiContextPath}/resource/${tokens}/${encodeURIComponent(uri)}`;
    // console.log(document.location.href);
    const browerUrl = (document.location.href).split(`${config.contextPath}/main`)[0];
    const completeUrl = browerUrl + URL;
    this.setState({ completeUrl });
    // console.log(completeUrl);
    QRcode.toDataURL(completeUrl, (err, url) => {
      this.setState({ urls: url, visible: true });
    });
    // const w = window.open('about:blank');
    // w.location.href = URL;
  };
  onClick = () => {
    const { value } = this.props.location.state;
    thisPush(this, { pathname: '../addDeploy', state: { value } });
  };
  handleOk = () => {
    this.setState({
      visible: false,
    });
  };
  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };
  makeColumns = () => {
    return [{
      title: 'ID',
      dataIndex: 'id',
    }, {
      title: '更新时间',
      dataIndex: 'updateTime',
    }, {
      title: '状态',
      dataIndex: 'status',
    }, {
      title: '版本号',
      dataIndex: 'versionNumber',
    }, {
      title: '描述',
      dataIndex: 'description',
    }, {
      title: 'uri',
      dataIndex: 'uri',
    }, {
      title: '操作',
      dataIndex: 'operation',
      render: (text, record, index) => (
        <span>
          <Divider type="vertical" />
          <a onClick={() => this.onEdit(record, index)}>Edit</a>
          <Divider type="vertical" />
          <Popconfirm title="确定删除？" okText="Yes" cancelText="No" onConfirm={() => this.onDelete(record, index)}>
            <a>Delete</a>
          </Popconfirm>
          <Divider type="vertical" />
          <a onClick={() => this.onQrcode(record, index)}>qrcode</a>
        </span>
      ),
    }];
  };
  render() {
    const { allAppInfo } = this.props.appInfo;
    const { urls, visible, completeUrl } = this.state;
    let data = [];
    if (allAppInfo.length !== 0) {
      allAppInfo.map(({ history }) => {
        data = history.map(({ id, updateTime, status, versionNumber, description, uri }) => {
          const date = (new Date(updateTime)).toLocaleString();
          return {
            key: updateTime,
            id,
            updateTime: date,
            status,
            versionNumber,
            description,
            uri,
          };
        });
        return data;
      });
    }
    return (
      <div className={styles.wrapper}>
        <div className={styles.container}>
          <div className={styles.divBtn}>
            <Button type="primary" icon="plus" onClick={this.onClick}>新增</Button>
          </div>
          <div className={styles.divTable}>
            <Table columns={this.makeColumns()} dataSource={data} />
          </div>
          <div>
            <Modal
              title="二维码"
              visible={visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
              footer={null}
            >
              <div style={{ textAlign: 'center' }}>
                <img src={urls} alt="二维码" />
                <div>
                  <a href={completeUrl} className={styles.a}>{completeUrl}</a>
                </div>
              </div>
            </Modal>
          </div>
        </div>
      </div>
    );
  }
}

export default Deploy;