yapi/exts/yapi-plugin-advanced-mock/MockCol/MockCol.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import axios from 'axios';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { Table, Button, message, Popconfirm, Tooltip, Icon } from 'antd';
import { fetchMockCol } from 'client/reducer/modules/mockCol';
import { formatTime } from 'client/common.js';
import constants from 'client/constants/variable.js';
import CaseDesModal from './CaseDesModal';
import { json5_parse } from '../../../client/common';
import _ from 'underscore';

@connect(
  state => {
    return {
      list: state.mockCol.list,
      currInterface: state.inter.curdata,
      currProject: state.project.currProject
    };
  },
  {
    fetchMockCol
  }
)
@withRouter
export default class MockCol extends Component {
  static propTypes = {
    list: PropTypes.array,
    currInterface: PropTypes.object,
    match: PropTypes.object,
    fetchMockCol: PropTypes.func,
    currProject: PropTypes.object
  };

  state = {
    caseData: {},
    caseDesModalVisible: false,
    isAdd: false
  };

  constructor(props) {
    super(props);
  }

  UNSAFE_componentWillMount() {
    const interfaceId = this.props.match.params.actionId;
    this.props.fetchMockCol(interfaceId);
  }

  openModal = (record, isAdd) => {
    return async () => {
      if (this.props.currInterface.res_body_is_json_schema && isAdd) {
        let result = await axios.post('/api/interface/schema2json', {
          schema: json5_parse(this.props.currInterface.res_body),
          required: true
        });
        record.res_body = JSON.stringify(result.data);
      }
      // 参数过滤schema形式
      if (this.props.currInterface.req_body_is_json_schema) {
        let result = await axios.post('/api/interface/schema2json', {
          schema: json5_parse(this.props.currInterface.req_body_other),
          required: true
        });
        record.req_body_other = JSON.stringify(result.data);
      }

      this.setState({
        isAdd: isAdd,
        caseDesModalVisible: true,
        caseData: record
      });
    };
  };

  handleOk = async caseData => {
    if (!caseData) {
      return null;
    }
    const { caseData: currcase } = this.state;
    const interface_id = this.props.match.params.actionId;
    const project_id = this.props.match.params.id;
    caseData = Object.assign({
      ...caseData,
      interface_id: interface_id,
      project_id: project_id
    });
    if (!this.state.isAdd) {
      caseData.id = currcase._id;
    }
    await axios.post('/api/plugin/advmock/case/save', caseData).then(async res => {
      if (res.data.errcode === 0) {
        message.success(this.state.isAdd ? '添加成功' : '保存成功');
        await this.props.fetchMockCol(interface_id);
        this.setState({ caseDesModalVisible: false });
      } else {
        message.error(res.data.errmsg);
      }
    });
  };

  deleteCase = async id => {
    const interface_id = this.props.match.params.actionId;
    await axios.post('/api/plugin/advmock/case/del', { id }).then(async res => {
      if (res.data.errcode === 0) {
        message.success('删除成功');
        await this.props.fetchMockCol(interface_id);
      } else {
        message.error(res.data.errmsg);
      }
    });
  };

  // mock case 可以设置开启的关闭
  openMockCase = async (id , enable=true)=> {
    const interface_id = this.props.match.params.actionId;

    await axios.post('/api/plugin/advmock/case/hide', {
      id,
      enable: !enable
    }).then(async res => {
      if (res.data.errcode === 0) {
        message.success('修改成功');
        await this.props.fetchMockCol(interface_id);
      } else {
        message.error(res.data.errmsg);
      }
    })
  }

  render() {
    const { list: data, currInterface } = this.props;
    const { isAdd, caseData, caseDesModalVisible } = this.state;

    const role = this.props.currProject.role;
    const isGuest = role === 'guest';
    const initCaseData = {
      ip: '',
      ip_enable: false,
      name: currInterface.title,
      code: '200',
      delay: 0,
      headers: [{ name: '', value: '' }],
      params: {},
      res_body: currInterface.res_body
    };

    let ipFilters = [];
    let ipObj = {};
    let userFilters = [];
    let userObj = {};
    _.isArray(data) &&
      data.forEach(item => {
        ipObj[item.ip_enable ? item.ip : ''] = '';
        userObj[item.username] = '';
      });
    ipFilters = Object.keys(Object.assign(ipObj)).map(value => {
      if (!value) {
        value = '无过滤';
      }
      return { text: value, value };
    });
    userFilters = Object.keys(Object.assign(userObj)).map(value => {
      return { text: value, value };
    });
    const columns = [
      {
        title: '期望名称',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: 'ip',
        dataIndex: 'ip',
        key: 'ip',
        render: (text, recode) => {
          if (!recode.ip_enable) {
            text = '';
          }
          return text;
        },
        onFilter: (value, record) =>
          (record.ip === value && record.ip_enable) || (value === '无过滤' && !record.ip_enable),
        filters: ipFilters
      },
      {
        title: '创建人',
        dataIndex: 'username',
        key: 'username',
        onFilter: (value, record) => record.username === value,
        filters: userFilters
      },
      {
        title: '编辑时间',
        dataIndex: 'up_time',
        key: 'up_time',
        render: text => formatTime(text)
      },
      {
        title: '操作',
        dataIndex: '_id',
        key: '_id',
        render: (_id, recode) => {
          // console.log(recode)
          return (
            !isGuest && (
              <div>
                <span style={{ marginRight: 5 }}>
                  <Button size="small" onClick={this.openModal(recode)}>
                    编辑
                  </Button>
                </span>
                <span style={{ marginRight: 5 }}>
                  <Popconfirm
                    title="你确定要删除这条期望?"
                    onConfirm={() => this.deleteCase(_id)}
                    okText="确定"
                    cancelText="取消"
                  >
                    <Button size="small" onClick={() => {}}>
                      删除
                    </Button>
                  </Popconfirm>
                </span>
                <span>
                  <Button size="small" onClick={() => this.openMockCase(_id, recode.case_enable)}>
                    {recode.case_enable ? <span>已开启</span> : <span>未开启</span>}
                  </Button>
                </span>
              </div>
            )
          );
        }
      }
    ];

    return (
      <div>
        <div style={{ marginBottom: 8 }}>
          <Button type="primary" onClick={this.openModal(initCaseData, true)} disabled={isGuest}>
            添加期望
          </Button>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href={constants.docHref.adv_mock_case}
            style={{ marginLeft: 8 }}
          >
            <Tooltip title="点击查看文档">
              <Icon type="question-circle-o" />
            </Tooltip>
          </a>
        </div>
        <Table columns={columns} dataSource={data} pagination={false} rowKey="_id" />
        {caseDesModalVisible && (
          <CaseDesModal
            visible={caseDesModalVisible}
            isAdd={isAdd}
            caseData={caseData}
            onOk={this.handleOk}
            onCancel={() => this.setState({ caseDesModalVisible: false })}
            ref={this.saveFormRef}
          />
        )}
      </div>
    );
  }
}