fork from bc4552c5a8
This commit is contained in:
269
exts/yapi-plugin-advanced-mock/MockCol/MockCol.js
Normal file
269
exts/yapi-plugin-advanced-mock/MockCol/MockCol.js
Normal file
@@ -0,0 +1,269 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user