feat: 期望列表过滤

2025-01-18 13:04:46 +08:00 · 2017-10-25 21:42:19 +08:00 · 2017-10-25 21:42:19 +08:00 · df9512f58b
commit df9512f58b
parent 7dc5c152e5
6 changed files with 74 additions and 16 deletions
--- a/client/constants/variable.js
+++ b/client/constants/variable.js
@ -165,5 +165,9 @@ export default {
    { name: '打乱数组', mock: '@shuffle' },
    { name: '协议', mock: '@protocol' }
  ],
-  IP_REGEXP: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/
+  IP_REGEXP: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/,
+  docHref: {
+    adv_mock_case: 'https://yapi.ymfe.org/adv_mock.html#Mock_期望',
+    adv_mock_script: 'https://yapi.ymfe.org/adv_mock.html#自定义_Mock_脚本'
+  }
 }
--- a/exts/yapi-plugin-advanced-mock/AdvMock.js
+++ b/exts/yapi-plugin-advanced-mock/AdvMock.js
@ -6,6 +6,7 @@ import { withRouter } from 'react-router-dom';
 import { Form, Switch, Button, message, Icon, Tooltip, Radio } from 'antd';
 import MockCol from './MockCol/MockCol.js'
 import mockEditor from 'client/containers/Project/Interface/InterfaceList/mockEditor';
+import constants from '../../client/constants/variable.js'
 const FormItem = Form.Item;


@ -111,7 +112,7 @@ class AdvMock extends Component {
      <div style={{display: isShowCase ? 'none' : ''}}>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
-            label={<span>是否开启&nbsp;<a target="_blank" rel="noopener noreferrer"   href="https://yapi.ymfe.org/mock.html#高级Mock" ><Tooltip title="点击查看文档"><Icon type="question-circle-o" /></Tooltip></a></span>}
+            label={<span>是否开启&nbsp;<a target="_blank" rel="noopener noreferrer"   href={constants.docHref.adv_mock_script} ><Tooltip title="点击查看文档"><Icon type="question-circle-o" /></Tooltip></a></span>}
            {...formItemLayout}
          >
            <Switch checked={this.state.enable} onChange={this.onChange} checkedChildren="开" unCheckedChildren="关" />
--- a/exts/yapi-plugin-advanced-mock/MockCol/CaseDesModal.js
+++ b/exts/yapi-plugin-advanced-mock/MockCol/CaseDesModal.js
@ -1,10 +1,11 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Button, Form, Input, Switch, Select, Icon, Modal, Col, Row, InputNumber } from 'antd';
+import { Button, Form, Input, Switch, Select, Icon, Modal, Col, Row, InputNumber, AutoComplete } from 'antd';
 import { safeAssign } from '../../../client/common.js';
 import mockEditor from '../../../client/containers/Project/Interface/InterfaceList/mockEditor';
 import constants from '../../../client/constants/variable.js'
-import { httpCodes } from '../index.js';
+import { httpCodes } from '../index.js'
+import { connect } from 'react-redux'

 import './CaseDesModal.scss'

@ -18,6 +19,13 @@ const formItemLayoutWithOutLabel = {
  wrapperCol: { span: 12, offset: 5 }
 };

+@connect(
+  state => {
+    return {
+      currInterface: state.inter.curdata
+    }
+  }
+)
@Form.create()
 export default class CaseDesModal extends Component {
  static propTypes = {
@ -26,7 +34,8 @@ export default class CaseDesModal extends Component {
    onCancel: PropTypes.func,
    onOk: PropTypes.func,
    isAdd: PropTypes.bool,
-    visible: PropTypes.bool
+    visible: PropTypes.bool,
+    currInterface: PropTypes.object
  }

  state = {
@ -152,6 +161,20 @@ export default class CaseDesModal extends Component {
    setFieldsValue({ [key]: values })
  }

+  getParamsKey = () => {
+    const { req_query, req_body_form, req_body_type } = this.props.currInterface;
+    const keys = [];
+    req_query.forEach(item => {
+      keys.push(item.name)
+    })
+    if (req_body_type === 'form') {
+      req_body_form.forEach(item => {
+        keys.push(item.name)
+      })
+    }
+    return keys
+  }
+
  loadBodyEditor = () => {
    const that = this;
    const { setFieldsValue } = this.props.form;
@ -175,6 +198,7 @@ export default class CaseDesModal extends Component {

    const valuesTpl = (name, values, title) => {
      getFieldDecorator(name)
+      const dataSource = name === 'headers' ? constants.HTTP_REQUEST_HEADER : this.getParamsKey();
      return values.map((item, index) => (
        <div key={index} className={name}>
          <FormItem
@ -186,11 +210,10 @@ export default class CaseDesModal extends Component {
              <Col span={10}>
                <FormItem>
                  {getFieldDecorator(`${name}[${index}].name`, { initialValue: item.name })(
-                    name === 'headers' ? <Select showSearch>
-                      {constants.HTTP_REQUEST_HEADER.map(item => (
-                        <Option value={item} key={item}>{item}</Option>
-                      ))}
-                    </Select> : <Input /> 
+                    <AutoComplete
+                      dataSource={dataSource}
+                      filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
+                    />
                  )}
                </FormItem>
              </Col>
@ -291,7 +314,7 @@ export default class CaseDesModal extends Component {
              initialValue: 0,
              rules: [{ required: true, message: '请输入延时时间！', type: 'integer' }]
            })(
-              <InputNumber placeholder="请输入延时时间"/>
+              <InputNumber placeholder="请输入延时时间" min={0}/>
            )}
            <span>ms</span>
          </FormItem>
--- a/exts/yapi-plugin-advanced-mock/MockCol/CaseDesModal.scss
+++ b/exts/yapi-plugin-advanced-mock/MockCol/CaseDesModal.scss
@ -15,6 +15,6 @@
    margin-top: .48rem;
    margin-bottom: .16rem;
    // border-left: 3px solid #2395f1;
-    padding-left: 8px;
+    padding-left: 32px;
  }
 }
--- a/exts/yapi-plugin-advanced-mock/MockCol/MockCol.js
+++ b/exts/yapi-plugin-advanced-mock/MockCol/MockCol.js
@ -3,9 +3,10 @@ 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 } from 'antd';
+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';

@connect(
@ -98,6 +99,22 @@ export default class MockCol extends Component {
      res_body: ''
    }

+    let ipFilters = [];
+    let ipObj = {};
+    let userFilters = [];
+    let userObj = {};
+    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 } })
+    console.log(ipFilters)
    const columns = [{
      title: '期望名称',
      dataIndex: 'name',
@ -105,11 +122,21 @@ export default class MockCol extends Component {
    }, {
      title: 'ip',
      dataIndex: 'ip',
-      key: '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'
+      key: 'username',
+      onFilter: (value, record) => record.name === value,
+      filters: userFilters
    }, {
      title: '编辑时间',
      dataIndex: 'up_time',
@ -152,6 +179,9 @@ export default class MockCol extends Component {
            caseDesModalVisible: true,
            caseData: initCaseData
          })}>添加期望</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' />
        <CaseDesModal
--- a/server/controllers/interface.js
+++ b/server/controllers/interface.js
@ -36,7 +36,7 @@ class interfaceController extends baseController {
     * @param {Boolean}  [req_headers[].required] 是否是必须，默认为否
     * @param {String}  [req_headers[].desc] header描述
     * @param {String}  [req_body_type] 请求参数方式，有["form", "json", "text", "xml"]四种
-     * @param {Array} [req_params] name, desc两个参数
+     * @param {Array} [req_params] 路径参数 name, desc两个参数
     * @param {Mixed}  [req_body_form] 请求参数,如果请求方式是form，参数是Array数组，其他格式请求参数是字符串
     * @param {String} [req_body_form[].name] 请求参数名
     * @param {String} [req_body_form[].value] 请求参数值，可填写生成规则（mock）。如@email，随机生成一条email