fork from bc4552c5a8
This commit is contained in:
141
client/containers/Project/Interface/Interface.js
Normal file
141
client/containers/Project/Interface/Interface.js
Normal file
@@ -0,0 +1,141 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Tabs, Layout } from 'antd';
|
||||
import { Route, Switch, matchPath } from 'react-router-dom';
|
||||
import { connect } from 'react-redux';
|
||||
const { Content, Sider } = Layout;
|
||||
|
||||
import './interface.scss';
|
||||
|
||||
import InterfaceMenu from './InterfaceList/InterfaceMenu.js';
|
||||
import InterfaceList from './InterfaceList/InterfaceList.js';
|
||||
import InterfaceContent from './InterfaceList/InterfaceContent.js';
|
||||
|
||||
import InterfaceColMenu from './InterfaceCol/InterfaceColMenu.js';
|
||||
import InterfaceColContent from './InterfaceCol/InterfaceColContent.js';
|
||||
import InterfaceCaseContent from './InterfaceCol/InterfaceCaseContent.js';
|
||||
import { getProject } from '../../../reducer/modules/project';
|
||||
import { setColData } from '../../../reducer/modules/interfaceCol.js';
|
||||
const contentRouter = {
|
||||
path: '/project/:id/interface/:action/:actionId',
|
||||
exact: true
|
||||
};
|
||||
|
||||
const InterfaceRoute = props => {
|
||||
let C;
|
||||
if (props.match.params.action === 'api') {
|
||||
if (!props.match.params.actionId) {
|
||||
C = InterfaceList;
|
||||
} else if (!isNaN(props.match.params.actionId)) {
|
||||
C = InterfaceContent;
|
||||
} else if (props.match.params.actionId.indexOf('cat_') === 0) {
|
||||
C = InterfaceList;
|
||||
}
|
||||
} else if (props.match.params.action === 'col') {
|
||||
C = InterfaceColContent;
|
||||
} else if (props.match.params.action === 'case') {
|
||||
C = InterfaceCaseContent;
|
||||
} else {
|
||||
const params = props.match.params;
|
||||
props.history.replace('/project/' + params.id + '/interface/api');
|
||||
return null;
|
||||
}
|
||||
return <C {...props} />;
|
||||
};
|
||||
|
||||
InterfaceRoute.propTypes = {
|
||||
match: PropTypes.object,
|
||||
history: PropTypes.object
|
||||
};
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
isShowCol: state.interfaceCol.isShowCol
|
||||
};
|
||||
},
|
||||
{
|
||||
setColData,
|
||||
getProject
|
||||
}
|
||||
)
|
||||
class Interface extends Component {
|
||||
static propTypes = {
|
||||
match: PropTypes.object,
|
||||
history: PropTypes.object,
|
||||
location: PropTypes.object,
|
||||
isShowCol: PropTypes.bool,
|
||||
getProject: PropTypes.func,
|
||||
setColData: PropTypes.func
|
||||
// fetchInterfaceColList: PropTypes.func
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
// this.state = {
|
||||
// curkey: this.props.match.params.action === 'api' ? 'api' : 'colOrCase'
|
||||
// }
|
||||
}
|
||||
|
||||
onChange = action => {
|
||||
let params = this.props.match.params;
|
||||
if (action === 'colOrCase') {
|
||||
action = this.props.isShowCol ? 'col' : 'case';
|
||||
}
|
||||
this.props.history.push('/project/' + params.id + '/interface/' + action);
|
||||
};
|
||||
async UNSAFE_componentWillMount() {
|
||||
this.props.setColData({
|
||||
isShowCol: true
|
||||
});
|
||||
// await this.props.fetchInterfaceColList(this.props.match.params.id)
|
||||
}
|
||||
render() {
|
||||
const { action } = this.props.match.params;
|
||||
// const activeKey = this.state.curkey;
|
||||
const activeKey = action === 'api' ? 'api' : 'colOrCase';
|
||||
|
||||
return (
|
||||
<Layout style={{ minHeight: 'calc(100vh - 156px)', marginLeft: '24px', marginTop: '24px' }}>
|
||||
<Sider style={{ height: '100%' }} width={450}>
|
||||
<div className="left-menu">
|
||||
<Tabs type="card" className="tabs-large" activeKey={activeKey} onChange={this.onChange}>
|
||||
<Tabs.TabPane tab="接口列表" key="api" />
|
||||
<Tabs.TabPane tab="测试集合" key="colOrCase" />
|
||||
</Tabs>
|
||||
{activeKey === 'api' ? (
|
||||
<InterfaceMenu
|
||||
router={matchPath(this.props.location.pathname, contentRouter)}
|
||||
projectId={this.props.match.params.id}
|
||||
/>
|
||||
) : (
|
||||
<InterfaceColMenu
|
||||
router={matchPath(this.props.location.pathname, contentRouter)}
|
||||
projectId={this.props.match.params.id}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Sider>
|
||||
<Layout>
|
||||
<Content
|
||||
style={{
|
||||
height: '100%',
|
||||
margin: '0 24px 0 16px',
|
||||
overflow: 'initial',
|
||||
backgroundColor: '#fff'
|
||||
}}
|
||||
>
|
||||
<div className="right-content">
|
||||
<Switch>
|
||||
<Route exact path="/project/:id/interface/:action" component={InterfaceRoute} />
|
||||
<Route {...contentRouter} component={InterfaceRoute} />
|
||||
</Switch>
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Interface;
|
||||
125
client/containers/Project/Interface/InterfaceCol/CaseReport.js
Normal file
125
client/containers/Project/Interface/InterfaceCol/CaseReport.js
Normal file
@@ -0,0 +1,125 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Row, Col, Tabs } from 'antd';
|
||||
const TabPane = Tabs.TabPane;
|
||||
function jsonFormat(json) {
|
||||
// console.log('json',json)
|
||||
if (json && typeof json === 'object') {
|
||||
return JSON.stringify(json, null, ' ');
|
||||
}
|
||||
return json;
|
||||
}
|
||||
|
||||
const CaseReport = function(props) {
|
||||
let params = jsonFormat(props.data);
|
||||
let headers = jsonFormat(props.headers, null, ' ');
|
||||
let res_header = jsonFormat(props.res_header, null, ' ');
|
||||
let res_body = jsonFormat(props.res_body);
|
||||
let httpCode = props.status;
|
||||
let validRes;
|
||||
if (props.validRes && Array.isArray(props.validRes)) {
|
||||
validRes = props.validRes.map((item, index) => {
|
||||
return <div key={index}>{item.message}</div>;
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="report">
|
||||
<Tabs defaultActiveKey="request">
|
||||
<TabPane className="case-report-pane" tab="Request" key="request">
|
||||
<Row className="case-report">
|
||||
<Col className="case-report-title" span="6">
|
||||
Url
|
||||
</Col>
|
||||
<Col span="18">{props.url}</Col>
|
||||
</Row>
|
||||
{props.query ? (
|
||||
<Row className="case-report">
|
||||
<Col className="case-report-title" span="6">
|
||||
Query
|
||||
</Col>
|
||||
<Col span="18">{props.query}</Col>
|
||||
</Row>
|
||||
) : null}
|
||||
|
||||
{props.headers ? (
|
||||
<Row className="case-report">
|
||||
<Col className="case-report-title" span="6">
|
||||
Headers
|
||||
</Col>
|
||||
<Col span="18">
|
||||
<pre>{headers}</pre>
|
||||
</Col>
|
||||
</Row>
|
||||
) : null}
|
||||
|
||||
{params ? (
|
||||
<Row className="case-report">
|
||||
<Col className="case-report-title" span="6">
|
||||
Body
|
||||
</Col>
|
||||
<Col span="18">
|
||||
<pre style={{ whiteSpace: 'pre-wrap' }}>{params}</pre>
|
||||
</Col>
|
||||
</Row>
|
||||
) : null}
|
||||
</TabPane>
|
||||
<TabPane className="case-report-pane" tab="Response" key="response">
|
||||
<Row className="case-report">
|
||||
<Col className="case-report-title" span="6">
|
||||
HttpCode
|
||||
</Col>
|
||||
<Col span="18">
|
||||
<pre>{httpCode}</pre>
|
||||
</Col>
|
||||
</Row>
|
||||
{props.res_header ? (
|
||||
<Row className="case-report">
|
||||
<Col className="case-report-title" span="6">
|
||||
Headers
|
||||
</Col>
|
||||
<Col span="18">
|
||||
<pre>{res_header}</pre>
|
||||
</Col>
|
||||
</Row>
|
||||
) : null}
|
||||
{props.res_body ? (
|
||||
<Row className="case-report">
|
||||
<Col className="case-report-title" span="6">
|
||||
Body
|
||||
</Col>
|
||||
<Col span="18">
|
||||
<pre>{res_body}</pre>
|
||||
</Col>
|
||||
</Row>
|
||||
) : null}
|
||||
</TabPane>
|
||||
<TabPane className="case-report-pane" tab="验证结果" key="valid">
|
||||
{props.validRes ? (
|
||||
<Row className="case-report">
|
||||
<Col className="case-report-title" span="6">
|
||||
验证结果
|
||||
</Col>
|
||||
<Col span="18"><pre>
|
||||
{validRes}
|
||||
</pre></Col>
|
||||
</Row>
|
||||
) : null}
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
CaseReport.propTypes = {
|
||||
url: PropTypes.string,
|
||||
data: PropTypes.any,
|
||||
headers: PropTypes.object,
|
||||
res_header: PropTypes.object,
|
||||
res_body: PropTypes.any,
|
||||
query: PropTypes.string,
|
||||
validRes: PropTypes.array,
|
||||
status: PropTypes.number
|
||||
};
|
||||
|
||||
export default CaseReport;
|
||||
@@ -0,0 +1,241 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Table, Select, Tooltip, Icon } from 'antd';
|
||||
import variable from '../../../../constants/variable';
|
||||
import { connect } from 'react-redux';
|
||||
const Option = Select.Option;
|
||||
import { fetchInterfaceListMenu } from '../../../../reducer/modules/interface.js';
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
projectList: state.project.projectList,
|
||||
list: state.inter.list
|
||||
};
|
||||
},
|
||||
{
|
||||
fetchInterfaceListMenu
|
||||
}
|
||||
)
|
||||
export default class ImportInterface extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
state = {
|
||||
selectedRowKeys: [],
|
||||
categoryCount: {},
|
||||
project: this.props.currProjectId
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
list: PropTypes.array,
|
||||
selectInterface: PropTypes.func,
|
||||
projectList: PropTypes.array,
|
||||
currProjectId: PropTypes.string,
|
||||
fetchInterfaceListMenu: PropTypes.func
|
||||
};
|
||||
|
||||
async componentDidMount() {
|
||||
// console.log(this.props.currProjectId)
|
||||
await this.props.fetchInterfaceListMenu(this.props.currProjectId);
|
||||
}
|
||||
|
||||
// 切换项目
|
||||
onChange = async val => {
|
||||
this.setState({
|
||||
project: val,
|
||||
selectedRowKeys: [],
|
||||
categoryCount: {}
|
||||
});
|
||||
await this.props.fetchInterfaceListMenu(val);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { list, projectList } = this.props;
|
||||
|
||||
// const { selectedRowKeys } = this.state;
|
||||
const data = list.map(item => {
|
||||
return {
|
||||
key: 'category_' + item._id,
|
||||
title: item.name,
|
||||
isCategory: true,
|
||||
children: item.list
|
||||
? item.list.map(e => {
|
||||
e.key = e._id;
|
||||
e.categoryKey = 'category_' + item._id;
|
||||
e.categoryLength = item.list.length;
|
||||
return e;
|
||||
})
|
||||
: []
|
||||
};
|
||||
});
|
||||
const self = this;
|
||||
const rowSelection = {
|
||||
// onChange: (selectedRowKeys) => {
|
||||
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
// if (selectedRows.isCategory) {
|
||||
// const selectedRowKeys = selectedRows.children.map(item => item._id)
|
||||
// this.setState({ selectedRowKeys })
|
||||
// }
|
||||
// this.props.onChange(selectedRowKeys.filter(id => ('' + id).indexOf('category') === -1));
|
||||
// },
|
||||
onSelect: (record, selected) => {
|
||||
// console.log(record, selected, selectedRows);
|
||||
const oldSelecteds = self.state.selectedRowKeys;
|
||||
const categoryCount = self.state.categoryCount;
|
||||
const categoryKey = record.categoryKey;
|
||||
const categoryLength = record.categoryLength;
|
||||
let selectedRowKeys = [];
|
||||
if (record.isCategory) {
|
||||
selectedRowKeys = record.children.map(item => item._id).concat(record.key);
|
||||
if (selected) {
|
||||
selectedRowKeys = selectedRowKeys
|
||||
.filter(id => oldSelecteds.indexOf(id) === -1)
|
||||
.concat(oldSelecteds);
|
||||
categoryCount[categoryKey] = categoryLength;
|
||||
} else {
|
||||
selectedRowKeys = oldSelecteds.filter(id => selectedRowKeys.indexOf(id) === -1);
|
||||
categoryCount[categoryKey] = 0;
|
||||
}
|
||||
} else {
|
||||
if (selected) {
|
||||
selectedRowKeys = oldSelecteds.concat(record._id);
|
||||
if (categoryCount[categoryKey]) {
|
||||
categoryCount[categoryKey] += 1;
|
||||
} else {
|
||||
categoryCount[categoryKey] = 1;
|
||||
}
|
||||
if (categoryCount[categoryKey] === record.categoryLength) {
|
||||
selectedRowKeys.push(categoryKey);
|
||||
}
|
||||
} else {
|
||||
selectedRowKeys = oldSelecteds.filter(id => id !== record._id);
|
||||
if (categoryCount[categoryKey]) {
|
||||
categoryCount[categoryKey] -= 1;
|
||||
}
|
||||
selectedRowKeys = selectedRowKeys.filter(id => id !== categoryKey);
|
||||
}
|
||||
}
|
||||
self.setState({ selectedRowKeys, categoryCount });
|
||||
self.props.selectInterface(
|
||||
selectedRowKeys.filter(id => ('' + id).indexOf('category') === -1),
|
||||
self.state.project
|
||||
);
|
||||
},
|
||||
onSelectAll: selected => {
|
||||
// console.log(selected, selectedRows, changeRows);
|
||||
let selectedRowKeys = [];
|
||||
let categoryCount = self.state.categoryCount;
|
||||
if (selected) {
|
||||
data.forEach(item => {
|
||||
if (item.children) {
|
||||
categoryCount['category_' + item._id] = item.children.length;
|
||||
selectedRowKeys = selectedRowKeys.concat(item.children.map(item => item._id));
|
||||
}
|
||||
});
|
||||
selectedRowKeys = selectedRowKeys.concat(data.map(item => item.key));
|
||||
} else {
|
||||
categoryCount = {};
|
||||
selectedRowKeys = [];
|
||||
}
|
||||
self.setState({ selectedRowKeys, categoryCount });
|
||||
self.props.selectInterface(
|
||||
selectedRowKeys.filter(id => ('' + id).indexOf('category') === -1),
|
||||
self.state.project
|
||||
);
|
||||
},
|
||||
selectedRowKeys: self.state.selectedRowKeys
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '接口名称',
|
||||
dataIndex: 'title',
|
||||
width: '30%'
|
||||
},
|
||||
{
|
||||
title: '接口路径',
|
||||
dataIndex: 'path',
|
||||
width: '40%'
|
||||
},
|
||||
{
|
||||
title: '请求方法',
|
||||
dataIndex: 'method',
|
||||
render: item => {
|
||||
let methodColor = variable.METHOD_COLOR[item ? item.toLowerCase() : 'get'];
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
color: methodColor.color,
|
||||
backgroundColor: methodColor.bac,
|
||||
borderRadius: 4
|
||||
}}
|
||||
className="colValue"
|
||||
>
|
||||
{item}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<span>
|
||||
状态{' '}
|
||||
<Tooltip title="筛选满足条件的接口集合">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
),
|
||||
dataIndex: 'status',
|
||||
render: text => {
|
||||
return (
|
||||
text &&
|
||||
(text === 'done' ? (
|
||||
<span className="tag-status done">已完成</span>
|
||||
) : (
|
||||
<span className="tag-status undone">未完成</span>
|
||||
))
|
||||
);
|
||||
},
|
||||
filters: [
|
||||
{
|
||||
text: '已完成',
|
||||
value: 'done'
|
||||
},
|
||||
{
|
||||
text: '未完成',
|
||||
value: 'undone'
|
||||
}
|
||||
],
|
||||
onFilter: (value, record) => {
|
||||
let arr = record.children.filter(item => {
|
||||
return item.status.indexOf(value) === 0;
|
||||
});
|
||||
return arr.length > 0;
|
||||
// record.status.indexOf(value) === 0
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="select-project">
|
||||
<span>选择要导入的项目： </span>
|
||||
<Select value={this.state.project} style={{ width: 200 }} onChange={this.onChange}>
|
||||
{projectList.map(item => {
|
||||
return item.projectname ? (
|
||||
''
|
||||
) : (
|
||||
<Option value={`${item._id}`} key={item._id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
</div>
|
||||
<Table columns={columns} rowSelection={rowSelection} dataSource={data} pagination={false} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,235 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withRouter } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import { message, Tooltip, Input } from 'antd';
|
||||
import { getEnv } from '../../../../reducer/modules/project';
|
||||
import {
|
||||
fetchInterfaceColList,
|
||||
setColData,
|
||||
fetchCaseData,
|
||||
fetchCaseList
|
||||
} from '../../../../reducer/modules/interfaceCol';
|
||||
import { Postman } from '../../../../components';
|
||||
|
||||
import './InterfaceCaseContent.scss';
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
interfaceColList: state.interfaceCol.interfaceColList,
|
||||
currColId: state.interfaceCol.currColId,
|
||||
currCaseId: state.interfaceCol.currCaseId,
|
||||
currCase: state.interfaceCol.currCase,
|
||||
isShowCol: state.interfaceCol.isShowCol,
|
||||
currProject: state.project.currProject,
|
||||
projectEnv: state.project.projectEnv,
|
||||
curUid: state.user.uid
|
||||
};
|
||||
},
|
||||
{
|
||||
fetchInterfaceColList,
|
||||
fetchCaseData,
|
||||
setColData,
|
||||
fetchCaseList,
|
||||
getEnv
|
||||
}
|
||||
)
|
||||
@withRouter
|
||||
export default class InterfaceCaseContent extends Component {
|
||||
static propTypes = {
|
||||
match: PropTypes.object,
|
||||
interfaceColList: PropTypes.array,
|
||||
fetchInterfaceColList: PropTypes.func,
|
||||
fetchCaseData: PropTypes.func,
|
||||
setColData: PropTypes.func,
|
||||
fetchCaseList: PropTypes.func,
|
||||
history: PropTypes.object,
|
||||
currColId: PropTypes.number,
|
||||
currCaseId: PropTypes.number,
|
||||
currCase: PropTypes.object,
|
||||
isShowCol: PropTypes.bool,
|
||||
currProject: PropTypes.object,
|
||||
getEnv: PropTypes.func,
|
||||
projectEnv: PropTypes.object,
|
||||
curUid: PropTypes.number
|
||||
};
|
||||
|
||||
state = {
|
||||
isEditingCasename: true,
|
||||
editCasename: ''
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
getColId(colList, currCaseId) {
|
||||
let currColId = 0;
|
||||
colList.forEach(col => {
|
||||
col.caseList.forEach(caseItem => {
|
||||
if (+caseItem._id === +currCaseId) {
|
||||
currColId = col._id;
|
||||
}
|
||||
});
|
||||
});
|
||||
return currColId;
|
||||
}
|
||||
|
||||
async UNSAFE_componentWillMount() {
|
||||
const result = await this.props.fetchInterfaceColList(this.props.match.params.id);
|
||||
let { currCaseId } = this.props;
|
||||
const params = this.props.match.params;
|
||||
const { actionId } = params;
|
||||
currCaseId = +actionId || +currCaseId || result.payload.data.data[0].caseList[0]._id;
|
||||
let currColId = this.getColId(result.payload.data.data, currCaseId);
|
||||
// this.props.history.push('/project/' + params.id + '/interface/case/' + currCaseId);
|
||||
await this.props.fetchCaseData(currCaseId);
|
||||
this.props.setColData({ currCaseId: +currCaseId, currColId, isShowCol: false });
|
||||
// 获取当前case 下的环境变量
|
||||
await this.props.getEnv(this.props.currCase.project_id);
|
||||
// await this.getCurrEnv()
|
||||
|
||||
this.setState({ editCasename: this.props.currCase.casename });
|
||||
}
|
||||
|
||||
async UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
const oldCaseId = this.props.match.params.actionId;
|
||||
const newCaseId = nextProps.match.params.actionId;
|
||||
const { interfaceColList } = nextProps;
|
||||
let currColId = this.getColId(interfaceColList, newCaseId);
|
||||
if (oldCaseId !== newCaseId) {
|
||||
await this.props.fetchCaseData(newCaseId);
|
||||
this.props.setColData({ currCaseId: +newCaseId, currColId, isShowCol: false });
|
||||
await this.props.getEnv(this.props.currCase.project_id);
|
||||
// await this.getCurrEnv()
|
||||
this.setState({ editCasename: this.props.currCase.casename });
|
||||
}
|
||||
}
|
||||
|
||||
savePostmanRef = postman => {
|
||||
this.postman = postman;
|
||||
};
|
||||
|
||||
updateCase = async () => {
|
||||
const {
|
||||
case_env,
|
||||
req_params,
|
||||
req_query,
|
||||
req_headers,
|
||||
req_body_type,
|
||||
req_body_form,
|
||||
req_body_other,
|
||||
test_script,
|
||||
enable_script,
|
||||
test_res_body,
|
||||
test_res_header
|
||||
} = this.postman.state;
|
||||
|
||||
const { editCasename: casename } = this.state;
|
||||
const { _id: id } = this.props.currCase;
|
||||
let params = {
|
||||
id,
|
||||
casename,
|
||||
case_env,
|
||||
req_params,
|
||||
req_query,
|
||||
req_headers,
|
||||
req_body_type,
|
||||
req_body_form,
|
||||
req_body_other,
|
||||
test_script,
|
||||
enable_script,
|
||||
test_res_body,
|
||||
test_res_header
|
||||
};
|
||||
|
||||
const res = await axios.post('/api/col/up_case', params);
|
||||
if (this.props.currCase.casename !== casename) {
|
||||
this.props.fetchInterfaceColList(this.props.match.params.id);
|
||||
}
|
||||
if (res.data.errcode) {
|
||||
message.error(res.data.errmsg);
|
||||
} else {
|
||||
message.success('更新成功');
|
||||
this.props.fetchCaseData(id);
|
||||
}
|
||||
};
|
||||
|
||||
triggerEditCasename = () => {
|
||||
this.setState({
|
||||
isEditingCasename: true,
|
||||
editCasename: this.props.currCase.casename
|
||||
});
|
||||
};
|
||||
cancelEditCasename = () => {
|
||||
this.setState({
|
||||
isEditingCasename: false,
|
||||
editCasename: this.props.currCase.casename
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { currCase, currProject, projectEnv } = this.props;
|
||||
const { isEditingCasename, editCasename } = this.state;
|
||||
|
||||
const data = Object.assign(
|
||||
{},
|
||||
currCase,
|
||||
{
|
||||
env: projectEnv.env,
|
||||
pre_script: currProject.pre_script,
|
||||
after_script: currProject.after_script
|
||||
},
|
||||
{ _id: currCase._id }
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ padding: '6px 0' }} className="case-content">
|
||||
<div className="case-title">
|
||||
{!isEditingCasename && (
|
||||
<Tooltip title="点击编辑" placement="bottom">
|
||||
<div className="case-name" onClick={this.triggerEditCasename}>
|
||||
{currCase.casename}
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{isEditingCasename && (
|
||||
<div className="edit-case-name">
|
||||
<Input
|
||||
value={editCasename}
|
||||
onChange={e => this.setState({ editCasename: e.target.value })}
|
||||
style={{ fontSize: 18 }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<span className="inter-link" style={{ margin: '0px 8px 0px 6px', fontSize: 12 }}>
|
||||
<Link
|
||||
className="text"
|
||||
to={`/project/${currCase.project_id}/interface/api/${currCase.interface_id}`}
|
||||
>
|
||||
对应接口
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
{Object.keys(currCase).length > 0 && (
|
||||
<Postman
|
||||
data={data}
|
||||
type="case"
|
||||
saveTip="更新保存修改"
|
||||
save={this.updateCase}
|
||||
ref={this.savePostmanRef}
|
||||
interfaceId={currCase.interface_id}
|
||||
projectId={currCase.project_id}
|
||||
curUid={this.props.curUid}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
.case-content {
|
||||
padding: 6px 0;
|
||||
.case-title {
|
||||
display: flex;
|
||||
.case-name {
|
||||
margin-left: 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0 5px;
|
||||
background-color: #eee;
|
||||
font-size: 20px;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.case-name:hover {
|
||||
color: rgba(0,0,0,.65);
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
.edit-case-name {
|
||||
margin-left: 8px;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.inter-link {
|
||||
flex-basis: 50px;
|
||||
position: relative;
|
||||
}
|
||||
.inter-link .text {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,630 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { withRouter } from 'react-router';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
fetchInterfaceColList,
|
||||
fetchInterfaceCaseList,
|
||||
setColData,
|
||||
fetchCaseList,
|
||||
fetchCaseData
|
||||
} from '../../../../reducer/modules/interfaceCol';
|
||||
import { fetchProjectList } from '../../../../reducer/modules/project';
|
||||
import axios from 'axios';
|
||||
import ImportInterface from './ImportInterface';
|
||||
import { Input, Icon, Button, Modal, message, Tooltip, Tree, Form } from 'antd';
|
||||
import { arrayChangeIndex } from '../../../../common.js';
|
||||
import _ from 'underscore'
|
||||
|
||||
const TreeNode = Tree.TreeNode;
|
||||
const FormItem = Form.Item;
|
||||
const confirm = Modal.confirm;
|
||||
const headHeight = 240; // menu顶部到网页顶部部分的高度
|
||||
|
||||
import './InterfaceColMenu.scss';
|
||||
|
||||
const ColModalForm = Form.create()(props => {
|
||||
const { visible, onCancel, onCreate, form, title } = props;
|
||||
const { getFieldDecorator } = form;
|
||||
return (
|
||||
<Modal visible={visible} title={title} onCancel={onCancel} onOk={onCreate}>
|
||||
<Form layout="vertical">
|
||||
<FormItem label="集合名">
|
||||
{getFieldDecorator('colName', {
|
||||
rules: [{ required: true, message: '请输入集合命名！' }]
|
||||
})(<Input />)}
|
||||
</FormItem>
|
||||
<FormItem label="简介">{getFieldDecorator('colDesc')(<Input type="textarea" />)}</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
interfaceColList: state.interfaceCol.interfaceColList,
|
||||
currCase: state.interfaceCol.currCase,
|
||||
isRander: state.interfaceCol.isRander,
|
||||
currCaseId: state.interfaceCol.currCaseId,
|
||||
// list: state.inter.list,
|
||||
// 当前项目的信息
|
||||
curProject: state.project.currProject
|
||||
// projectList: state.project.projectList
|
||||
};
|
||||
},
|
||||
{
|
||||
fetchInterfaceColList,
|
||||
fetchInterfaceCaseList,
|
||||
fetchCaseData,
|
||||
// fetchInterfaceListMenu,
|
||||
fetchCaseList,
|
||||
setColData,
|
||||
fetchProjectList
|
||||
}
|
||||
)
|
||||
@withRouter
|
||||
export default class InterfaceColMenu extends Component {
|
||||
static propTypes = {
|
||||
match: PropTypes.object,
|
||||
interfaceColList: PropTypes.array,
|
||||
fetchInterfaceColList: PropTypes.func,
|
||||
fetchInterfaceCaseList: PropTypes.func,
|
||||
// fetchInterfaceListMenu: PropTypes.func,
|
||||
fetchCaseList: PropTypes.func,
|
||||
fetchCaseData: PropTypes.func,
|
||||
setColData: PropTypes.func,
|
||||
currCaseId: PropTypes.number,
|
||||
history: PropTypes.object,
|
||||
isRander: PropTypes.bool,
|
||||
// list: PropTypes.array,
|
||||
router: PropTypes.object,
|
||||
currCase: PropTypes.object,
|
||||
curProject: PropTypes.object,
|
||||
fetchProjectList: PropTypes.func
|
||||
// projectList: PropTypes.array
|
||||
};
|
||||
|
||||
state = {
|
||||
colModalType: '',
|
||||
colModalVisible: false,
|
||||
editColId: 0,
|
||||
filterValue: '',
|
||||
importInterVisible: false,
|
||||
importInterIds: [],
|
||||
importColId: 0,
|
||||
expands: null,
|
||||
list: [],
|
||||
delIcon: null,
|
||||
selectedProject: null
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
this.getList();
|
||||
}
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
if (this.props.interfaceColList !== nextProps.interfaceColList) {
|
||||
this.setState({
|
||||
list: nextProps.interfaceColList
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async getList() {
|
||||
let r = await this.props.fetchInterfaceColList(this.props.match.params.id);
|
||||
this.setState({
|
||||
list: r.payload.data.data
|
||||
});
|
||||
return r;
|
||||
}
|
||||
|
||||
addorEditCol = async () => {
|
||||
const { colName: name, colDesc: desc } = this.form.getFieldsValue();
|
||||
const { colModalType, editColId: col_id } = this.state;
|
||||
const project_id = this.props.match.params.id;
|
||||
let res = {};
|
||||
if (colModalType === 'add') {
|
||||
res = await axios.post('/api/col/add_col', { name, desc, project_id });
|
||||
} else if (colModalType === 'edit') {
|
||||
res = await axios.post('/api/col/up_col', { name, desc, col_id });
|
||||
}
|
||||
if (!res.data.errcode) {
|
||||
this.setState({
|
||||
colModalVisible: false
|
||||
});
|
||||
message.success(colModalType === 'edit' ? '修改集合成功' : '添加集合成功');
|
||||
// await this.props.fetchInterfaceColList(project_id);
|
||||
this.getList();
|
||||
} else {
|
||||
message.error(res.data.errmsg);
|
||||
}
|
||||
};
|
||||
|
||||
onExpand = keys => {
|
||||
this.setState({ expands: keys });
|
||||
};
|
||||
|
||||
onSelect = _.debounce(keys => {
|
||||
if (keys.length) {
|
||||
const type = keys[0].split('_')[0];
|
||||
const id = keys[0].split('_')[1];
|
||||
const project_id = this.props.match.params.id;
|
||||
if (type === 'col') {
|
||||
this.props.setColData({
|
||||
isRander: false
|
||||
});
|
||||
this.props.history.push('/project/' + project_id + '/interface/col/' + id);
|
||||
} else {
|
||||
this.props.setColData({
|
||||
isRander: false
|
||||
});
|
||||
this.props.history.push('/project/' + project_id + '/interface/case/' + id);
|
||||
}
|
||||
}
|
||||
this.setState({
|
||||
expands: null
|
||||
});
|
||||
}, 500);
|
||||
|
||||
showDelColConfirm = colId => {
|
||||
let that = this;
|
||||
const params = this.props.match.params;
|
||||
confirm({
|
||||
title: '您确认删除此测试集合',
|
||||
content: '温馨提示：该操作会删除该集合下所有测试用例，用例删除后无法恢复',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
const res = await axios.get('/api/col/del_col?col_id=' + colId);
|
||||
if (!res.data.errcode) {
|
||||
message.success('删除集合成功');
|
||||
const result = await that.getList();
|
||||
const nextColId = result.payload.data.data[0]._id;
|
||||
|
||||
that.props.history.push('/project/' + params.id + '/interface/col/' + nextColId);
|
||||
} else {
|
||||
message.error(res.data.errmsg);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 复制测试集合
|
||||
copyInterface = async item => {
|
||||
if (this._copyInterfaceSign === true) {
|
||||
return;
|
||||
}
|
||||
this._copyInterfaceSign = true;
|
||||
const { desc, project_id, _id: col_id } = item;
|
||||
let { name } = item;
|
||||
name = `${name} copy`;
|
||||
|
||||
// 添加集合
|
||||
const add_col_res = await axios.post('/api/col/add_col', { name, desc, project_id });
|
||||
|
||||
if (add_col_res.data.errcode) {
|
||||
message.error(add_col_res.data.errmsg);
|
||||
return;
|
||||
}
|
||||
|
||||
const new_col_id = add_col_res.data.data._id;
|
||||
|
||||
// 克隆集合
|
||||
const add_case_list_res = await axios.post('/api/col/clone_case_list', {
|
||||
new_col_id,
|
||||
col_id,
|
||||
project_id
|
||||
});
|
||||
this._copyInterfaceSign = false;
|
||||
|
||||
if (add_case_list_res.data.errcode) {
|
||||
message.error(add_case_list_res.data.errmsg);
|
||||
return;
|
||||
}
|
||||
|
||||
// 刷新接口列表
|
||||
// await this.props.fetchInterfaceColList(project_id);
|
||||
this.getList();
|
||||
this.props.setColData({ isRander: true });
|
||||
message.success('克隆测试集成功');
|
||||
};
|
||||
|
||||
showNoDelColConfirm = () => {
|
||||
confirm({
|
||||
title: '此测试集合为最后一个集合',
|
||||
content: '温馨提示：建议不要删除'
|
||||
});
|
||||
};
|
||||
caseCopy = async caseId=> {
|
||||
let that = this;
|
||||
let caseData = await that.props.fetchCaseData(caseId);
|
||||
let data = caseData.payload.data.data;
|
||||
data = JSON.parse(JSON.stringify(data));
|
||||
data.casename=`${data.casename}_copy`
|
||||
delete data._id
|
||||
const res = await axios.post('/api/col/add_case',data);
|
||||
if (!res.data.errcode) {
|
||||
message.success('克隆用例成功');
|
||||
let colId = res.data.data.col_id;
|
||||
let projectId=res.data.data.project_id;
|
||||
await this.getList();
|
||||
this.props.history.push('/project/' + projectId + '/interface/col/' + colId);
|
||||
this.setState({
|
||||
visible: false
|
||||
});
|
||||
} else {
|
||||
message.error(res.data.errmsg);
|
||||
}
|
||||
};
|
||||
showDelCaseConfirm = caseId => {
|
||||
let that = this;
|
||||
const params = this.props.match.params;
|
||||
confirm({
|
||||
title: '您确认删除此测试用例',
|
||||
content: '温馨提示：用例删除后无法恢复',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
const res = await axios.get('/api/col/del_case?caseid=' + caseId);
|
||||
if (!res.data.errcode) {
|
||||
message.success('删除用例成功');
|
||||
that.getList();
|
||||
// 如果删除当前选中 case，切换路由到集合
|
||||
if (+caseId === +that.props.currCaseId) {
|
||||
that.props.history.push('/project/' + params.id + '/interface/col/');
|
||||
} else {
|
||||
// that.props.fetchInterfaceColList(that.props.match.params.id);
|
||||
that.props.setColData({ isRander: true });
|
||||
}
|
||||
} else {
|
||||
message.error(res.data.errmsg);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
showColModal = (type, col) => {
|
||||
const editCol =
|
||||
type === 'edit' ? { colName: col.name, colDesc: col.desc } : { colName: '', colDesc: '' };
|
||||
this.setState({
|
||||
colModalVisible: true,
|
||||
colModalType: type || 'add',
|
||||
editColId: col && col._id
|
||||
});
|
||||
this.form.setFieldsValue(editCol);
|
||||
};
|
||||
saveFormRef = form => {
|
||||
this.form = form;
|
||||
};
|
||||
|
||||
selectInterface = (importInterIds, selectedProject) => {
|
||||
this.setState({ importInterIds, selectedProject });
|
||||
};
|
||||
|
||||
showImportInterfaceModal = async colId => {
|
||||
// const projectId = this.props.match.params.id;
|
||||
// console.log('project', this.props.curProject)
|
||||
const groupId = this.props.curProject.group_id;
|
||||
await this.props.fetchProjectList(groupId);
|
||||
// await this.props.fetchInterfaceListMenu(projectId)
|
||||
this.setState({ importInterVisible: true, importColId: colId });
|
||||
};
|
||||
|
||||
handleImportOk = async () => {
|
||||
const project_id = this.state.selectedProject || this.props.match.params.id;
|
||||
const { importColId, importInterIds } = this.state;
|
||||
const res = await axios.post('/api/col/add_case_list', {
|
||||
interface_list: importInterIds,
|
||||
col_id: importColId,
|
||||
project_id
|
||||
});
|
||||
if (!res.data.errcode) {
|
||||
this.setState({ importInterVisible: false });
|
||||
message.success('导入集合成功');
|
||||
// await this.props.fetchInterfaceColList(project_id);
|
||||
this.getList();
|
||||
|
||||
this.props.setColData({ isRander: true });
|
||||
} else {
|
||||
message.error(res.data.errmsg);
|
||||
}
|
||||
};
|
||||
handleImportCancel = () => {
|
||||
this.setState({ importInterVisible: false });
|
||||
};
|
||||
|
||||
filterCol = e => {
|
||||
const value = e.target.value;
|
||||
// console.log('list', this.props.interfaceColList);
|
||||
// const newList = produce(this.props.interfaceColList, draftList => {})
|
||||
// console.log('newList',newList);
|
||||
this.setState({
|
||||
filterValue: value,
|
||||
list: JSON.parse(JSON.stringify(this.props.interfaceColList))
|
||||
// list: newList
|
||||
});
|
||||
};
|
||||
|
||||
onDrop = async e => {
|
||||
// const projectId = this.props.match.params.id;
|
||||
const { interfaceColList } = this.props;
|
||||
const dropColIndex = e.node.props.pos.split('-')[1];
|
||||
const dropColId = interfaceColList[dropColIndex]._id;
|
||||
const id = e.dragNode.props.eventKey;
|
||||
const dragColIndex = e.dragNode.props.pos.split('-')[1];
|
||||
const dragColId = interfaceColList[dragColIndex]._id;
|
||||
|
||||
const dropPos = e.node.props.pos.split('-');
|
||||
const dropIndex = Number(dropPos[dropPos.length - 1]);
|
||||
const dragPos = e.dragNode.props.pos.split('-');
|
||||
const dragIndex = Number(dragPos[dragPos.length - 1]);
|
||||
|
||||
if (id.indexOf('col') === -1) {
|
||||
if (dropColId === dragColId) {
|
||||
// 同一个测试集合下的接口交换顺序
|
||||
let caseList = interfaceColList[dropColIndex].caseList;
|
||||
let changes = arrayChangeIndex(caseList, dragIndex, dropIndex);
|
||||
axios.post('/api/col/up_case_index', changes).then();
|
||||
}
|
||||
await axios.post('/api/col/up_case', { id: id.split('_')[1], col_id: dropColId });
|
||||
// this.props.fetchInterfaceColList(projectId);
|
||||
this.getList();
|
||||
this.props.setColData({ isRander: true });
|
||||
} else {
|
||||
let changes = arrayChangeIndex(interfaceColList, dragIndex, dropIndex);
|
||||
axios.post('/api/col/up_col_index', changes).then();
|
||||
this.getList();
|
||||
}
|
||||
};
|
||||
|
||||
enterItem = id => {
|
||||
this.setState({ delIcon: id });
|
||||
};
|
||||
|
||||
leaveItem = () => {
|
||||
this.setState({ delIcon: null });
|
||||
};
|
||||
|
||||
render() {
|
||||
// const { currColId, currCaseId, isShowCol } = this.props;
|
||||
const { colModalType, colModalVisible, importInterVisible } = this.state;
|
||||
const currProjectId = this.props.match.params.id;
|
||||
// const menu = (col) => {
|
||||
// return (
|
||||
// <Menu>
|
||||
// <Menu.Item>
|
||||
// <span onClick={() => this.showColModal('edit', col)}>修改集合</span>
|
||||
// </Menu.Item>
|
||||
// <Menu.Item>
|
||||
// <span onClick={() => {
|
||||
// this.showDelColConfirm(col._id)
|
||||
// }}>删除集合</span>
|
||||
// </Menu.Item>
|
||||
// <Menu.Item>
|
||||
// <span onClick={() => this.showImportInterface(col._id)}>导入接口</span>
|
||||
// </Menu.Item>
|
||||
// </Menu>
|
||||
// )
|
||||
// };
|
||||
|
||||
const defaultExpandedKeys = () => {
|
||||
const { router, currCase, interfaceColList } = this.props,
|
||||
rNull = { expands: [], selects: [] };
|
||||
if (interfaceColList.length === 0) {
|
||||
return rNull;
|
||||
}
|
||||
if (router) {
|
||||
if (router.params.action === 'case') {
|
||||
if (!currCase || !currCase._id) {
|
||||
return rNull;
|
||||
}
|
||||
return {
|
||||
expands: this.state.expands ? this.state.expands : ['col_' + currCase.col_id],
|
||||
selects: ['case_' + currCase._id + '']
|
||||
};
|
||||
} else {
|
||||
let col_id = router.params.actionId;
|
||||
return {
|
||||
expands: this.state.expands ? this.state.expands : ['col_' + col_id],
|
||||
selects: ['col_' + col_id]
|
||||
};
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
expands: this.state.expands ? this.state.expands : ['col_' + interfaceColList[0]._id],
|
||||
selects: ['col_' + interfaceColList[0]._id]
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const itemInterfaceColCreate = interfaceCase => {
|
||||
return (
|
||||
<TreeNode
|
||||
style={{ width: '100%' }}
|
||||
key={'case_' + interfaceCase._id}
|
||||
title={
|
||||
<div
|
||||
className="menu-title"
|
||||
onMouseEnter={() => this.enterItem(interfaceCase._id)}
|
||||
onMouseLeave={this.leaveItem}
|
||||
title={interfaceCase.casename}
|
||||
>
|
||||
<span className="casename">{interfaceCase.casename}</span>
|
||||
<div className="btns">
|
||||
<Tooltip title="删除用例">
|
||||
<Icon
|
||||
type="delete"
|
||||
className="interface-delete-icon"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
this.showDelCaseConfirm(interfaceCase._id);
|
||||
}}
|
||||
style={{ display: this.state.delIcon == interfaceCase._id ? 'block' : 'none' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="克隆用例">
|
||||
<Icon
|
||||
type="copy"
|
||||
className="interface-delete-icon"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
this.caseCopy(interfaceCase._id);
|
||||
}}
|
||||
style={{ display: this.state.delIcon == interfaceCase._id ? 'block' : 'none' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
let currentKes = defaultExpandedKeys();
|
||||
// console.log('currentKey', currentKes)
|
||||
|
||||
let list = this.state.list;
|
||||
|
||||
if (this.state.filterValue) {
|
||||
let arr = [];
|
||||
list = list.filter(item => {
|
||||
|
||||
item.caseList = item.caseList.filter(inter => {
|
||||
if (inter.casename.indexOf(this.state.filterValue) === -1
|
||||
&& inter.path.indexOf(this.state.filterValue) === -1
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
arr.push('col_' + item._id);
|
||||
return true;
|
||||
});
|
||||
// console.log('arr', arr);
|
||||
if (arr.length > 0) {
|
||||
currentKes.expands = arr;
|
||||
}
|
||||
}
|
||||
|
||||
// console.log('list', list);
|
||||
// console.log('currentKey', currentKes)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="interface-filter">
|
||||
<Input placeholder="搜索测试集合" onChange={this.filterCol} />
|
||||
<Tooltip placement="bottom" title="添加集合">
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: '16px' }}
|
||||
onClick={() => this.showColModal('add')}
|
||||
className="btn-filter"
|
||||
>
|
||||
添加集合
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className="tree-wrapper" style={{ maxHeight: parseInt(document.body.clientHeight) - headHeight + 'px'}}>
|
||||
<Tree
|
||||
className="col-list-tree"
|
||||
defaultExpandedKeys={currentKes.expands}
|
||||
defaultSelectedKeys={currentKes.selects}
|
||||
expandedKeys={currentKes.expands}
|
||||
selectedKeys={currentKes.selects}
|
||||
onSelect={this.onSelect}
|
||||
autoExpandParent
|
||||
draggable
|
||||
onExpand={this.onExpand}
|
||||
onDrop={this.onDrop}
|
||||
>
|
||||
{list.map(col => (
|
||||
<TreeNode
|
||||
key={'col_' + col._id}
|
||||
title={
|
||||
<div className="menu-title">
|
||||
<span>
|
||||
<Icon type="folder-open" style={{ marginRight: 5 }} />
|
||||
<span>{col.name}</span>
|
||||
</span>
|
||||
<div className="btns">
|
||||
<Tooltip title="删除集合">
|
||||
<Icon
|
||||
type="delete"
|
||||
style={{ display: list.length > 1 ? '' : 'none' }}
|
||||
className="interface-delete-icon"
|
||||
onClick={() => {
|
||||
this.showDelColConfirm(col._id);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="编辑集合">
|
||||
<Icon
|
||||
type="edit"
|
||||
className="interface-delete-icon"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
this.showColModal('edit', col);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="导入接口">
|
||||
<Icon
|
||||
type="plus"
|
||||
className="interface-delete-icon"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
this.showImportInterfaceModal(col._id);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="克隆集合">
|
||||
<Icon
|
||||
type="copy"
|
||||
className="interface-delete-icon"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
this.copyInterface(col);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/*<Dropdown overlay={menu(col)} trigger={['click']} onClick={e => e.stopPropagation()}>
|
||||
<Icon className="opts-icon" type='ellipsis'/>
|
||||
</Dropdown>*/}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{col.caseList.map(itemInterfaceColCreate)}
|
||||
</TreeNode>
|
||||
))}
|
||||
</Tree>
|
||||
</div>
|
||||
<ColModalForm
|
||||
ref={this.saveFormRef}
|
||||
type={colModalType}
|
||||
visible={colModalVisible}
|
||||
onCancel={() => {
|
||||
this.setState({ colModalVisible: false });
|
||||
}}
|
||||
onCreate={this.addorEditCol}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title="导入接口到集合"
|
||||
visible={importInterVisible}
|
||||
onOk={this.handleImportOk}
|
||||
onCancel={this.handleImportCancel}
|
||||
className="import-case-modal"
|
||||
width={800}
|
||||
>
|
||||
<ImportInterface currProjectId={currProjectId} selectInterface={this.selectInterface} />
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
.col-list-tree {
|
||||
line-height: 25px;
|
||||
.ant-tree-node-content-wrapper {
|
||||
width: calc(100% - 28px);
|
||||
}
|
||||
.opts-icon,
|
||||
.case-delete-icon {
|
||||
line-height: 25px;
|
||||
width: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.opts-icon:hover,
|
||||
.case-delete-icon:hover {
|
||||
color: #2395f1;
|
||||
}
|
||||
.menu-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
.casename {
|
||||
overflow: hidden;
|
||||
}
|
||||
.case-delete-icon {
|
||||
margin-left: 5px;
|
||||
display: none;
|
||||
}
|
||||
.btns {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.menu-title:hover {
|
||||
.case-delete-icon {
|
||||
display: block;
|
||||
}
|
||||
.btns {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
/*
|
||||
* note that styling gu-mirror directly is a bad practice because it's too generic.
|
||||
* you're better off giving the draggable elements a unique class and styling that directly!
|
||||
*/
|
||||
.gu-mirror {
|
||||
padding: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
.container div {
|
||||
cursor: move;
|
||||
cursor: grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: -webkit-grab;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container div:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.gu-mirror {
|
||||
cursor: grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
.container .ex-moved {
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
.container.ex-over {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.handle {
|
||||
padding: 0 5px;
|
||||
margin-right: 5px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
cursor: move;
|
||||
}
|
||||
.report {
|
||||
min-height: 500px;
|
||||
.case-report-pane {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.url {
|
||||
overflow: auto;
|
||||
}
|
||||
.case-report {
|
||||
margin: 10px;
|
||||
|
||||
.case-report-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.interface-col {
|
||||
padding: 24px;
|
||||
.interface-col-table-header {
|
||||
background-color: rgb(238, 238, 238);
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.interface-col-table-body {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.interface-col-table-header th {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.interface-col-table-body td {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.interface-col-table-action button {
|
||||
margin-right: 5px;
|
||||
padding: 5px 10px;
|
||||
max-width: 90px;
|
||||
}
|
||||
.component-label-wrapper {
|
||||
margin-top: -10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.import-case-modal {
|
||||
.ant-modal-body {
|
||||
max-height: 800px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.select-project {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.autoTestsModal {
|
||||
.autoTestUrl {
|
||||
overflow: auto;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #f1f1f1ce;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.autoTestMsg {
|
||||
padding: 8px 0 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
margin-left: 16px;
|
||||
height: 50px;
|
||||
font-size: 14px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-bottom: 0.24rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-wrapper {
|
||||
min-height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Form, Input, Button } from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
function hasErrors(fieldsError) {
|
||||
return Object.keys(fieldsError).some(field => fieldsError[field]);
|
||||
}
|
||||
class AddInterfaceForm extends Component {
|
||||
static propTypes = {
|
||||
form: PropTypes.object,
|
||||
onSubmit: PropTypes.func,
|
||||
onCancel: PropTypes.func,
|
||||
catdata: PropTypes.object
|
||||
};
|
||||
handleSubmit = e => {
|
||||
e.preventDefault();
|
||||
this.props.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.props.onSubmit(values);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { getFieldDecorator, getFieldsError } = this.props.form;
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 14 }
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
<FormItem {...formItemLayout} label="分类名">
|
||||
{getFieldDecorator('name', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分类名称!'
|
||||
}
|
||||
],
|
||||
initialValue: this.props.catdata ? this.props.catdata.name || null : null
|
||||
})(<Input placeholder="分类名称" />)}
|
||||
</FormItem>
|
||||
<FormItem {...formItemLayout} label="备注">
|
||||
{getFieldDecorator('desc', {
|
||||
initialValue: this.props.catdata ? this.props.catdata.desc || null : null
|
||||
})(<Input placeholder="备注" />)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem className="catModalfoot" wrapperCol={{ span: 24, offset: 8 }}>
|
||||
<Button onClick={this.props.onCancel} style={{ marginRight: '10px' }}>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="primary" htmlType="submit" disabled={hasErrors(getFieldsError())}>
|
||||
提交
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Form.create()(AddInterfaceForm);
|
||||
@@ -0,0 +1,129 @@
|
||||
import React, { PureComponent as Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Form, Input, Select, Button } from 'antd';
|
||||
|
||||
import constants from '../../../../constants/variable.js'
|
||||
import { handleApiPath, nameLengthLimit } from '../../../../common.js'
|
||||
const HTTP_METHOD = constants.HTTP_METHOD;
|
||||
const HTTP_METHOD_KEYS = Object.keys(HTTP_METHOD);
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const Option = Select.Option;
|
||||
function hasErrors(fieldsError) {
|
||||
return Object.keys(fieldsError).some(field => fieldsError[field]);
|
||||
}
|
||||
|
||||
|
||||
class AddInterfaceForm extends Component {
|
||||
static propTypes = {
|
||||
form: PropTypes.object,
|
||||
onSubmit: PropTypes.func,
|
||||
onCancel: PropTypes.func,
|
||||
catid: PropTypes.number,
|
||||
catdata: PropTypes.array
|
||||
}
|
||||
handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
this.props.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.props.onSubmit(values, () => {
|
||||
this.props.form.resetFields();
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handlePath = (e) => {
|
||||
let val = e.target.value
|
||||
this.props.form.setFieldsValue({
|
||||
path: handleApiPath(val)
|
||||
})
|
||||
}
|
||||
render() {
|
||||
const { getFieldDecorator, getFieldsError } = this.props.form;
|
||||
const prefixSelector = getFieldDecorator('method', {
|
||||
initialValue: 'GET'
|
||||
})(
|
||||
<Select style={{ width: 75 }}>
|
||||
{HTTP_METHOD_KEYS.map(item => {
|
||||
return <Option key={item} value={item}>{item}</Option>
|
||||
})}
|
||||
</Select>
|
||||
);
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 14 }
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="接口分类"
|
||||
>
|
||||
{getFieldDecorator('catid', {
|
||||
initialValue: this.props.catid ? this.props.catid + '' : this.props.catdata[0]._id + ''
|
||||
})(
|
||||
<Select>
|
||||
{this.props.catdata.map(item => {
|
||||
return <Option key={item._id} value={item._id + ""}>{item.name}</Option>
|
||||
})}
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="接口名称"
|
||||
>
|
||||
{getFieldDecorator('title', {
|
||||
rules: nameLengthLimit('接口')
|
||||
})(
|
||||
<Input placeholder="接口名称" />
|
||||
)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="接口路径"
|
||||
>
|
||||
{getFieldDecorator('path', {
|
||||
rules: [{
|
||||
required: true, message: '请输入接口路径!'
|
||||
}]
|
||||
})(
|
||||
<Input onBlur={this.handlePath} addonBefore={prefixSelector} placeholder="/path" />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="注"
|
||||
>
|
||||
<span style={{ color: "#929292" }}>详细的接口数据可以在编辑页面中添加</span>
|
||||
</FormItem>
|
||||
<FormItem className="catModalfoot" wrapperCol={{ span: 24, offset: 8 }} >
|
||||
<Button onClick={this.props.onCancel} style={{ marginRight: "10px" }} >取消</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
disabled={hasErrors(getFieldsError())}
|
||||
>
|
||||
提交
|
||||
</Button>
|
||||
</FormItem>
|
||||
|
||||
</Form>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Form.create()(AddInterfaceForm);
|
||||
229
client/containers/Project/Interface/InterfaceList/Edit.js
Normal file
229
client/containers/Project/Interface/InterfaceList/Edit.js
Normal file
@@ -0,0 +1,229 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import InterfaceEditForm from './InterfaceEditForm.js';
|
||||
import {
|
||||
updateInterfaceData,
|
||||
fetchInterfaceListMenu,
|
||||
fetchInterfaceData
|
||||
} from '../../../../reducer/modules/interface.js';
|
||||
import { getProject } from '../../../../reducer/modules/project.js';
|
||||
import axios from 'axios';
|
||||
import { message, Modal } from 'antd';
|
||||
import './Edit.scss';
|
||||
import { withRouter, Link } from 'react-router-dom';
|
||||
import ProjectTag from '../../Setting/ProjectMessage/ProjectTag.js';
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
curdata: state.inter.curdata,
|
||||
currProject: state.project.currProject
|
||||
};
|
||||
},
|
||||
{
|
||||
updateInterfaceData,
|
||||
fetchInterfaceListMenu,
|
||||
fetchInterfaceData,
|
||||
getProject
|
||||
}
|
||||
)
|
||||
class InterfaceEdit extends Component {
|
||||
static propTypes = {
|
||||
curdata: PropTypes.object,
|
||||
currProject: PropTypes.object,
|
||||
updateInterfaceData: PropTypes.func,
|
||||
fetchInterfaceListMenu: PropTypes.func,
|
||||
fetchInterfaceData: PropTypes.func,
|
||||
match: PropTypes.object,
|
||||
switchToView: PropTypes.func,
|
||||
getProject: PropTypes.func
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { curdata, currProject } = this.props;
|
||||
this.state = {
|
||||
mockUrl:
|
||||
location.protocol +
|
||||
'//' +
|
||||
location.hostname +
|
||||
(location.port !== '' ? ':' + location.port : '') +
|
||||
`/mock/${currProject._id}${currProject.basepath}${curdata.path}`,
|
||||
curdata: {},
|
||||
status: 0,
|
||||
visible: false
|
||||
// tag: []
|
||||
};
|
||||
}
|
||||
|
||||
onSubmit = async params => {
|
||||
params.id = this.props.match.params.actionId;
|
||||
let result = await axios.post('/api/interface/up', params);
|
||||
this.props.fetchInterfaceListMenu(this.props.currProject._id).then();
|
||||
this.props.fetchInterfaceData(params.id).then();
|
||||
if (result.data.errcode === 0) {
|
||||
this.props.updateInterfaceData(params);
|
||||
message.success('保存成功');
|
||||
} else {
|
||||
message.error(result.data.errmsg);
|
||||
}
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
try {
|
||||
if (this.state.status === 1) {
|
||||
this.WebSocket.close();
|
||||
}
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let domain = location.hostname + (location.port !== '' ? ':' + location.port : '');
|
||||
let s,
|
||||
initData = false;
|
||||
//因后端 node 仅支持 ws， 暂不支持 wss
|
||||
let wsProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
|
||||
setTimeout(() => {
|
||||
if (initData === false) {
|
||||
this.setState({
|
||||
curdata: this.props.curdata,
|
||||
status: 1
|
||||
});
|
||||
initData = true;
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
try {
|
||||
s = new WebSocket(
|
||||
wsProtocol +
|
||||
'://' +
|
||||
domain +
|
||||
'/api/interface/solve_conflict?id=' +
|
||||
this.props.match.params.actionId
|
||||
);
|
||||
s.onopen = () => {
|
||||
this.WebSocket = s;
|
||||
};
|
||||
|
||||
s.onmessage = e => {
|
||||
initData = true;
|
||||
let result = JSON.parse(e.data);
|
||||
if (result.errno === 0) {
|
||||
this.setState({
|
||||
curdata: result.data,
|
||||
status: 1
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
curdata: result.data,
|
||||
status: 2
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
s.onerror = () => {
|
||||
this.setState({
|
||||
curdata: this.props.curdata,
|
||||
status: 1
|
||||
});
|
||||
console.warn('websocket 连接失败，将导致多人编辑同一个接口冲突。');
|
||||
};
|
||||
} catch (e) {
|
||||
this.setState({
|
||||
curdata: this.props.curdata,
|
||||
status: 1
|
||||
});
|
||||
console.error('websocket 连接失败，将导致多人编辑同一个接口冲突。');
|
||||
}
|
||||
}
|
||||
|
||||
onTagClick = () => {
|
||||
this.setState({
|
||||
visible: true
|
||||
});
|
||||
};
|
||||
|
||||
handleOk = async () => {
|
||||
let { tag } = this.tag.state;
|
||||
tag = tag.filter(val => {
|
||||
return val.name !== '';
|
||||
});
|
||||
|
||||
let id = this.props.currProject._id;
|
||||
let params = {
|
||||
id,
|
||||
tag
|
||||
};
|
||||
let result = await axios.post('/api/project/up_tag', params);
|
||||
|
||||
if (result.data.errcode === 0) {
|
||||
await this.props.getProject(id);
|
||||
message.success('保存成功');
|
||||
} else {
|
||||
message.error(result.data.errmsg);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
visible: false
|
||||
});
|
||||
};
|
||||
|
||||
handleCancel = () => {
|
||||
this.setState({
|
||||
visible: false
|
||||
});
|
||||
};
|
||||
|
||||
tagSubmit = tagRef => {
|
||||
this.tag = tagRef;
|
||||
|
||||
// this.setState({tag})
|
||||
};
|
||||
|
||||
render() {
|
||||
const { cat, basepath, switch_notice, tag } = this.props.currProject;
|
||||
return (
|
||||
<div className="interface-edit">
|
||||
{this.state.status === 1 ? (
|
||||
<InterfaceEditForm
|
||||
cat={cat}
|
||||
mockUrl={this.state.mockUrl}
|
||||
basepath={basepath}
|
||||
noticed={switch_notice}
|
||||
onSubmit={this.onSubmit}
|
||||
curdata={this.state.curdata}
|
||||
onTagClick={this.onTagClick}
|
||||
/>
|
||||
) : null}
|
||||
{this.state.status === 2 ? (
|
||||
<div style={{ textAlign: 'center', fontSize: '14px', paddingTop: '10px' }}>
|
||||
<Link to={'/user/profile/' + this.state.curdata.uid}>
|
||||
<b>{this.state.curdata.username}</b>
|
||||
</Link>
|
||||
<span>正在编辑该接口，请稍后再试...</span>
|
||||
</div>
|
||||
) : null}
|
||||
{this.state.status === 0 && '正在加载，请耐心等待...'}
|
||||
|
||||
<Modal
|
||||
title="Tag 设置"
|
||||
width={680}
|
||||
visible={this.state.visible}
|
||||
onOk={this.handleOk}
|
||||
onCancel={this.handleCancel}
|
||||
okText="保存"
|
||||
>
|
||||
<div className="tag-modal-center">
|
||||
<ProjectTag tagMsg={tag} ref={this.tagSubmit} />
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(InterfaceEdit);
|
||||
116
client/containers/Project/Interface/InterfaceList/Edit.scss
Normal file
116
client/containers/Project/Interface/InterfaceList/Edit.scss
Normal file
@@ -0,0 +1,116 @@
|
||||
@import '../../../../styles/mixin.scss';
|
||||
|
||||
.interface-edit{
|
||||
padding: 24px;
|
||||
// overflow: hidden;
|
||||
.interface-edit-item{
|
||||
margin-bottom: 16px;
|
||||
.ant-form-item-label label:after{
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.interface-editor {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.interface-edit-json-info{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.interface-edit-item.hide {
|
||||
display: none;
|
||||
}
|
||||
.interface-edit-item-content{
|
||||
margin-bottom: 16px;
|
||||
.interface-edit-item-content-col{
|
||||
padding:0 1px;
|
||||
}
|
||||
.interface-edit-item-content-col-drag{
|
||||
width:24px;
|
||||
padding: 7px;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
}
|
||||
.interface-edit-del-icon{
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
cursor: pointer
|
||||
}
|
||||
.interface-edit-direc-icon{
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
cursor: pointer
|
||||
}
|
||||
.ant-select-selection__rendered{
|
||||
line-height: 34px;
|
||||
}
|
||||
.interace-edit-desc{
|
||||
height: 250px;
|
||||
}
|
||||
.ant-affix{
|
||||
background-color: #f3f4f6;
|
||||
padding: 16px 0;
|
||||
z-index: 999;
|
||||
}
|
||||
.interface-edit-submit-button{
|
||||
background-color: #1d1d3d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.interface-edit-submit-button:hover{
|
||||
border-color: #434370;
|
||||
background-color: #434370;
|
||||
}
|
||||
}
|
||||
|
||||
.table-interfacelist {
|
||||
margin-top: .2rem;
|
||||
white-space: nowrap;
|
||||
table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
.path {
|
||||
width: 95%;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-right: 24px;
|
||||
// line-height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.opened {
|
||||
color: #00a854;
|
||||
padding-right: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.colValue{
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
color: #00a854;
|
||||
background: #cfefdf;
|
||||
border-color: #cfefdf;
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
margin-right: 7px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.ant-select-selection {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toolTip .ant-tooltip-inner{
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.tag-modal-center {
|
||||
padding-left: 48px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Tabs, Modal, Button } from 'antd';
|
||||
import Edit from './Edit.js';
|
||||
import View from './View.js';
|
||||
import { Prompt } from 'react-router';
|
||||
import { fetchInterfaceData } from '../../../../reducer/modules/interface.js';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import Run from './Run/Run.js';
|
||||
const plugin = require('client/plugin.js');
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
curdata: state.inter.curdata,
|
||||
list: state.inter.list,
|
||||
editStatus: state.inter.editStatus
|
||||
};
|
||||
},
|
||||
{
|
||||
fetchInterfaceData
|
||||
}
|
||||
)
|
||||
class Content extends Component {
|
||||
static propTypes = {
|
||||
match: PropTypes.object,
|
||||
list: PropTypes.array,
|
||||
curdata: PropTypes.object,
|
||||
fetchInterfaceData: PropTypes.func,
|
||||
history: PropTypes.object,
|
||||
editStatus: PropTypes.bool
|
||||
};
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.title = 'YApi-高效、易用、功能强大的可视化接口管理平台';
|
||||
this.state = {
|
||||
curtab: 'view',
|
||||
visible: false,
|
||||
nextTab: ''
|
||||
};
|
||||
}
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
const params = this.props.match.params;
|
||||
this.actionId = params.actionId;
|
||||
this.handleRequest(this.props);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.getElementsByTagName('title')[0].innerText = this.title;
|
||||
}
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
const params = nextProps.match.params;
|
||||
if (params.actionId !== this.actionId) {
|
||||
this.actionId = params.actionId;
|
||||
this.handleRequest(nextProps);
|
||||
}
|
||||
}
|
||||
|
||||
handleRequest(nextProps) {
|
||||
const params = nextProps.match.params;
|
||||
this.props.fetchInterfaceData(params.actionId);
|
||||
this.setState({
|
||||
curtab: 'view'
|
||||
});
|
||||
}
|
||||
|
||||
switchToView = () => {
|
||||
this.setState({
|
||||
curtab: 'view'
|
||||
});
|
||||
};
|
||||
|
||||
onChange = key => {
|
||||
if (this.state.curtab === 'edit' && this.props.editStatus) {
|
||||
this.showModal();
|
||||
} else {
|
||||
this.setState({
|
||||
curtab: key
|
||||
});
|
||||
}
|
||||
this.setState({
|
||||
nextTab: key
|
||||
});
|
||||
};
|
||||
// 确定离开页面
|
||||
handleOk = () => {
|
||||
this.setState({
|
||||
visible: false,
|
||||
curtab: this.state.nextTab
|
||||
});
|
||||
};
|
||||
// 离开编辑页面的提示
|
||||
showModal = () => {
|
||||
this.setState({
|
||||
visible: true
|
||||
});
|
||||
};
|
||||
// 取消离开编辑页面
|
||||
handleCancel = () => {
|
||||
this.setState({
|
||||
visible: false
|
||||
});
|
||||
};
|
||||
render() {
|
||||
if (this.props.curdata.title) {
|
||||
document.getElementsByTagName('title')[0].innerText =
|
||||
this.props.curdata.title + '-' + this.title;
|
||||
}
|
||||
|
||||
let InterfaceTabs = {
|
||||
view: {
|
||||
component: View,
|
||||
name: '预览'
|
||||
},
|
||||
edit: {
|
||||
component: Edit,
|
||||
name: '编辑'
|
||||
},
|
||||
run: {
|
||||
component: Run,
|
||||
name: '运行'
|
||||
}
|
||||
};
|
||||
|
||||
plugin.emitHook('interface_tab', InterfaceTabs);
|
||||
|
||||
const tabs = (
|
||||
<Tabs
|
||||
className="tabs-large"
|
||||
onChange={this.onChange}
|
||||
activeKey={this.state.curtab}
|
||||
defaultActiveKey="view"
|
||||
>
|
||||
{Object.keys(InterfaceTabs).map(key => {
|
||||
let item = InterfaceTabs[key];
|
||||
return <TabPane tab={item.name} key={key} />;
|
||||
})}
|
||||
</Tabs>
|
||||
);
|
||||
let tabContent = null;
|
||||
if (this.state.curtab) {
|
||||
let C = InterfaceTabs[this.state.curtab].component;
|
||||
tabContent = <C switchToView={this.switchToView} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="interface-content">
|
||||
<Prompt
|
||||
when={this.state.curtab === 'edit' && this.props.editStatus ? true : false}
|
||||
message={() => {
|
||||
// this.showModal();
|
||||
return '离开页面会丢失当前编辑的内容，确定要离开吗？';
|
||||
}}
|
||||
/>
|
||||
{tabs}
|
||||
{tabContent}
|
||||
{this.state.visible && (
|
||||
<Modal
|
||||
title="你即将离开编辑页面"
|
||||
visible={this.state.visible}
|
||||
onCancel={this.handleCancel}
|
||||
footer={[
|
||||
<Button key="back" onClick={this.handleCancel}>
|
||||
取 消
|
||||
</Button>,
|
||||
<Button key="submit" onClick={this.handleOk}>
|
||||
确 定
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<p>离开页面会丢失当前编辑的内容，确定要离开吗？</p>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(Content);
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,409 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import axios from 'axios';
|
||||
import { Table, Button, Modal, message, Tooltip, Select, Icon } from 'antd';
|
||||
import AddInterfaceForm from './AddInterfaceForm';
|
||||
import {
|
||||
fetchInterfaceListMenu,
|
||||
fetchInterfaceList,
|
||||
fetchInterfaceCatList
|
||||
} from '../../../../reducer/modules/interface.js';
|
||||
import { getProject } from '../../../../reducer/modules/project.js';
|
||||
import { Link } from 'react-router-dom';
|
||||
import variable from '../../../../constants/variable';
|
||||
import './Edit.scss';
|
||||
import Label from '../../../../components/Label/Label.js';
|
||||
|
||||
const Option = Select.Option;
|
||||
const limit = 20;
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
curData: state.inter.curdata,
|
||||
curProject: state.project.currProject,
|
||||
catList: state.inter.list,
|
||||
totalTableList: state.inter.totalTableList,
|
||||
catTableList: state.inter.catTableList,
|
||||
totalCount: state.inter.totalCount,
|
||||
count: state.inter.count
|
||||
};
|
||||
},
|
||||
{
|
||||
fetchInterfaceListMenu,
|
||||
fetchInterfaceList,
|
||||
fetchInterfaceCatList,
|
||||
getProject
|
||||
}
|
||||
)
|
||||
class InterfaceList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
visible: false,
|
||||
data: [],
|
||||
filteredInfo: {},
|
||||
catid: null,
|
||||
total: null,
|
||||
current: 1
|
||||
};
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
curData: PropTypes.object,
|
||||
catList: PropTypes.array,
|
||||
match: PropTypes.object,
|
||||
curProject: PropTypes.object,
|
||||
history: PropTypes.object,
|
||||
fetchInterfaceListMenu: PropTypes.func,
|
||||
fetchInterfaceList: PropTypes.func,
|
||||
fetchInterfaceCatList: PropTypes.func,
|
||||
totalTableList: PropTypes.array,
|
||||
catTableList: PropTypes.array,
|
||||
totalCount: PropTypes.number,
|
||||
count: PropTypes.number,
|
||||
getProject: PropTypes.func
|
||||
};
|
||||
|
||||
handleRequest = async props => {
|
||||
const { params } = props.match;
|
||||
if (!params.actionId) {
|
||||
let projectId = params.id;
|
||||
this.setState({
|
||||
catid: null
|
||||
});
|
||||
let option = {
|
||||
page: this.state.current,
|
||||
limit,
|
||||
project_id: projectId,
|
||||
status: this.state.filteredInfo.status,
|
||||
tag: this.state.filteredInfo.tag
|
||||
};
|
||||
await this.props.fetchInterfaceList(option);
|
||||
} else if (isNaN(params.actionId)) {
|
||||
let catid = params.actionId.substr(4);
|
||||
this.setState({catid: +catid});
|
||||
let option = {
|
||||
page: this.state.current,
|
||||
limit,
|
||||
catid,
|
||||
status: this.state.filteredInfo.status,
|
||||
tag: this.state.filteredInfo.tag
|
||||
};
|
||||
await this.props.fetchInterfaceCatList(option);
|
||||
}
|
||||
};
|
||||
|
||||
// 更新分类简介
|
||||
handleChangeInterfaceCat = (desc, name) => {
|
||||
let params = {
|
||||
catid: this.state.catid,
|
||||
name: name,
|
||||
desc: desc
|
||||
};
|
||||
|
||||
axios.post('/api/interface/up_cat', params).then(async res => {
|
||||
if (res.data.errcode !== 0) {
|
||||
return message.error(res.data.errmsg);
|
||||
}
|
||||
let project_id = this.props.match.params.id;
|
||||
await this.props.getProject(project_id);
|
||||
await this.props.fetchInterfaceListMenu(project_id);
|
||||
message.success('接口集合简介更新成功');
|
||||
});
|
||||
};
|
||||
|
||||
handleChange = (pagination, filters, sorter) => {
|
||||
this.setState({
|
||||
current: pagination.current || 1,
|
||||
sortedInfo: sorter,
|
||||
filteredInfo: filters
|
||||
}, () => this.handleRequest(this.props));
|
||||
};
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
this.actionId = this.props.match.params.actionId;
|
||||
this.handleRequest(this.props);
|
||||
}
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
let _actionId = nextProps.match.params.actionId;
|
||||
|
||||
if (this.actionId !== _actionId) {
|
||||
this.actionId = _actionId;
|
||||
this.setState(
|
||||
{
|
||||
current: 1
|
||||
},
|
||||
() => this.handleRequest(nextProps)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
handleAddInterface = data => {
|
||||
data.project_id = this.props.curProject._id;
|
||||
axios.post('/api/interface/add', data).then(res => {
|
||||
if (res.data.errcode !== 0) {
|
||||
return message.error(`${res.data.errmsg}, 你可以在左侧的接口列表中对接口进行删改`);
|
||||
}
|
||||
message.success('接口添加成功');
|
||||
let interfaceId = res.data.data._id;
|
||||
this.props.history.push('/project/' + data.project_id + '/interface/api/' + interfaceId);
|
||||
this.props.fetchInterfaceListMenu(data.project_id);
|
||||
});
|
||||
};
|
||||
|
||||
changeInterfaceCat = async (id, catid) => {
|
||||
const params = {
|
||||
id: id,
|
||||
catid
|
||||
};
|
||||
let result = await axios.post('/api/interface/up', params);
|
||||
if (result.data.errcode === 0) {
|
||||
message.success('修改成功');
|
||||
this.handleRequest(this.props);
|
||||
this.props.fetchInterfaceListMenu(this.props.curProject._id);
|
||||
} else {
|
||||
message.error(result.data.errmsg);
|
||||
}
|
||||
};
|
||||
|
||||
changeInterfaceStatus = async value => {
|
||||
const params = {
|
||||
id: value.split('-')[0],
|
||||
status: value.split('-')[1]
|
||||
};
|
||||
let result = await axios.post('/api/interface/up', params);
|
||||
if (result.data.errcode === 0) {
|
||||
message.success('修改成功');
|
||||
this.handleRequest(this.props);
|
||||
} else {
|
||||
message.error(result.data.errmsg);
|
||||
}
|
||||
};
|
||||
|
||||
//page change will be processed in handleChange by pagination
|
||||
// changePage = current => {
|
||||
// if (this.state.current !== current) {
|
||||
// this.setState(
|
||||
// {
|
||||
// current: current
|
||||
// },
|
||||
// () => this.handleRequest(this.props)
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
|
||||
render() {
|
||||
let tag = this.props.curProject.tag;
|
||||
let tagFilter = tag.map(item => {
|
||||
return {text: item.name, value: item.name};
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '接口名称',
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
width: 30,
|
||||
render: (text, item) => {
|
||||
return (
|
||||
<Tooltip title= {text}>
|
||||
<Link to={'/project/' + item.project_id + '/interface/api/' + item._id}>
|
||||
<span className="path">{text}</span>
|
||||
</Link>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '接口路径',
|
||||
dataIndex: 'path',
|
||||
key: 'path',
|
||||
width: 50,
|
||||
render: (item, record) => {
|
||||
const path = this.props.curProject.basepath + item;
|
||||
let methodColor =
|
||||
variable.METHOD_COLOR[record.method ? record.method.toLowerCase() : 'get'] ||
|
||||
variable.METHOD_COLOR['get'];
|
||||
return (
|
||||
<div>
|
||||
<span
|
||||
style={{ color: methodColor.color, backgroundColor: methodColor.bac }}
|
||||
className="colValue"
|
||||
>
|
||||
{record.method}
|
||||
</span>
|
||||
<Tooltip title="开放接口" placement="topLeft">
|
||||
<span>{record.api_opened && <Icon className="opened" type="eye-o" />}</span>
|
||||
</Tooltip>
|
||||
<Tooltip title={path} placement="topLeft" overlayClassName="toolTip">
|
||||
<span className="path">{path}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '接口分类',
|
||||
dataIndex: 'catid',
|
||||
key: 'catid',
|
||||
width: 28,
|
||||
render: (item, record) => {
|
||||
return (
|
||||
<Select
|
||||
value={item + ''}
|
||||
className="select path"
|
||||
onChange={catid => this.changeInterfaceCat(record._id, catid)}
|
||||
>
|
||||
{this.props.catList.map(cat => {
|
||||
return (
|
||||
<Option key={cat.id + ''} value={cat._id + ''}>
|
||||
<span>{cat.name}</span>
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 24,
|
||||
render: (text, record) => {
|
||||
const key = record.key;
|
||||
return (
|
||||
<Select
|
||||
value={key + '-' + text}
|
||||
className="select"
|
||||
onChange={this.changeInterfaceStatus}
|
||||
>
|
||||
<Option value={key + '-done'}>
|
||||
<span className="tag-status done">已完成</span>
|
||||
</Option>
|
||||
<Option value={key + '-undone'}>
|
||||
<span className="tag-status undone">未完成</span>
|
||||
</Option>
|
||||
</Select>
|
||||
);
|
||||
},
|
||||
filters: [
|
||||
{
|
||||
text: '已完成',
|
||||
value: 'done'
|
||||
},
|
||||
{
|
||||
text: '未完成',
|
||||
value: 'undone'
|
||||
}
|
||||
],
|
||||
onFilter: (value, record) => record.status.indexOf(value) === 0
|
||||
},
|
||||
{
|
||||
title: 'tag',
|
||||
dataIndex: 'tag',
|
||||
key: 'tag',
|
||||
width: 14,
|
||||
render: text => {
|
||||
let textMsg = text.length > 0 ? text.join('\n') : '未设置';
|
||||
return <div className="table-desc">{textMsg}</div>;
|
||||
},
|
||||
filters: tagFilter,
|
||||
onFilter: (value, record) => {
|
||||
return record.tag.indexOf(value) >= 0;
|
||||
}
|
||||
}
|
||||
];
|
||||
let intername = '',
|
||||
desc = '';
|
||||
let cat = this.props.curProject ? this.props.curProject.cat : [];
|
||||
|
||||
if (cat) {
|
||||
for (let i = 0; i < cat.length; i++) {
|
||||
if (cat[i]._id === this.state.catid) {
|
||||
intername = cat[i].name;
|
||||
desc = cat[i].desc;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
// const data = this.state.data ? this.state.data.map(item => {
|
||||
// item.key = item._id;
|
||||
// return item;
|
||||
// }) : [];
|
||||
let data = [];
|
||||
let total = 0;
|
||||
const { params } = this.props.match;
|
||||
if (!params.actionId) {
|
||||
data = this.props.totalTableList;
|
||||
total = this.props.totalCount;
|
||||
} else if (isNaN(params.actionId)) {
|
||||
data = this.props.catTableList;
|
||||
total = this.props.count;
|
||||
}
|
||||
|
||||
data = data.map(item => {
|
||||
item.key = item._id;
|
||||
return item;
|
||||
});
|
||||
|
||||
const pageConfig = {
|
||||
total: total,
|
||||
pageSize: limit,
|
||||
current: this.state.current
|
||||
// onChange: this.changePage
|
||||
};
|
||||
|
||||
const isDisabled = this.props.catList.length === 0;
|
||||
|
||||
// console.log(this.props.curProject.tag)
|
||||
|
||||
return (
|
||||
<div style={{ padding: '24px' }}>
|
||||
<h2 className="interface-title" style={{ display: 'inline-block', margin: 0 }}>
|
||||
{intername ? intername : '全部接口'}共 ({total}) 个
|
||||
</h2>
|
||||
|
||||
<Button
|
||||
style={{ float: 'right' }}
|
||||
disabled={isDisabled}
|
||||
type="primary"
|
||||
onClick={() => this.setState({ visible: true })}
|
||||
>
|
||||
添加接口
|
||||
</Button>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<Label onChange={value => this.handleChangeInterfaceCat(value, intername)} desc={desc} />
|
||||
</div>
|
||||
<Table
|
||||
className="table-interfacelist"
|
||||
pagination={pageConfig}
|
||||
columns={columns}
|
||||
onChange={this.handleChange}
|
||||
dataSource={data}
|
||||
/>
|
||||
{this.state.visible && (
|
||||
<Modal
|
||||
title="添加接口"
|
||||
visible={this.state.visible}
|
||||
onCancel={() => this.setState({ visible: false })}
|
||||
footer={null}
|
||||
className="addcatmodal"
|
||||
>
|
||||
<AddInterfaceForm
|
||||
catid={this.state.catid}
|
||||
catdata={cat}
|
||||
onCancel={() => this.setState({ visible: false })}
|
||||
onSubmit={this.handleAddInterface}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default InterfaceList;
|
||||
@@ -0,0 +1,641 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
fetchInterfaceListMenu,
|
||||
fetchInterfaceList,
|
||||
fetchInterfaceCatList,
|
||||
fetchInterfaceData,
|
||||
deleteInterfaceData,
|
||||
deleteInterfaceCatData,
|
||||
initInterface
|
||||
} from '../../../../reducer/modules/interface.js';
|
||||
import { getProject } from '../../../../reducer/modules/project.js';
|
||||
import { Input, Icon, Button, Modal, message, Tree, Tooltip } from 'antd';
|
||||
import AddInterfaceForm from './AddInterfaceForm';
|
||||
import AddInterfaceCatForm from './AddInterfaceCatForm';
|
||||
import axios from 'axios';
|
||||
import { Link, withRouter } from 'react-router-dom';
|
||||
import produce from 'immer';
|
||||
import { arrayChangeIndex } from '../../../../common.js';
|
||||
|
||||
import './interfaceMenu.scss';
|
||||
|
||||
const confirm = Modal.confirm;
|
||||
const TreeNode = Tree.TreeNode;
|
||||
const headHeight = 240; // menu顶部到网页顶部部分的高度
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
list: state.inter.list,
|
||||
inter: state.inter.curdata,
|
||||
curProject: state.project.currProject,
|
||||
expands: []
|
||||
};
|
||||
},
|
||||
{
|
||||
fetchInterfaceListMenu,
|
||||
fetchInterfaceData,
|
||||
deleteInterfaceCatData,
|
||||
deleteInterfaceData,
|
||||
initInterface,
|
||||
getProject,
|
||||
fetchInterfaceCatList,
|
||||
fetchInterfaceList
|
||||
}
|
||||
)
|
||||
class InterfaceMenu extends Component {
|
||||
static propTypes = {
|
||||
match: PropTypes.object,
|
||||
inter: PropTypes.object,
|
||||
projectId: PropTypes.string,
|
||||
list: PropTypes.array,
|
||||
fetchInterfaceListMenu: PropTypes.func,
|
||||
curProject: PropTypes.object,
|
||||
fetchInterfaceData: PropTypes.func,
|
||||
addInterfaceData: PropTypes.func,
|
||||
deleteInterfaceData: PropTypes.func,
|
||||
initInterface: PropTypes.func,
|
||||
history: PropTypes.object,
|
||||
router: PropTypes.object,
|
||||
getProject: PropTypes.func,
|
||||
fetchInterfaceCatList: PropTypes.func,
|
||||
fetchInterfaceList: PropTypes.func
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {String} key
|
||||
*/
|
||||
changeModal = (key, status) => {
|
||||
//visible add_cat_modal_visible change_cat_modal_visible del_cat_modal_visible
|
||||
let newState = {};
|
||||
newState[key] = status;
|
||||
this.setState(newState);
|
||||
};
|
||||
|
||||
handleCancel = () => {
|
||||
this.setState({
|
||||
visible: false
|
||||
});
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
curKey: null,
|
||||
visible: false,
|
||||
delIcon: null,
|
||||
curCatid: null,
|
||||
add_cat_modal_visible: false,
|
||||
change_cat_modal_visible: false,
|
||||
del_cat_modal_visible: false,
|
||||
curCatdata: {},
|
||||
expands: null,
|
||||
list: []
|
||||
};
|
||||
}
|
||||
|
||||
handleRequest() {
|
||||
this.props.initInterface();
|
||||
this.getList();
|
||||
}
|
||||
|
||||
async getList() {
|
||||
let r = await this.props.fetchInterfaceListMenu(this.props.projectId);
|
||||
this.setState({
|
||||
list: r.payload.data.data
|
||||
});
|
||||
}
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
this.handleRequest();
|
||||
}
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
if (this.props.list !== nextProps.list) {
|
||||
// console.log('next', nextProps.list)
|
||||
this.setState({
|
||||
list: nextProps.list
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onSelect = selectedKeys => {
|
||||
const { history, match } = this.props;
|
||||
let curkey = selectedKeys[0];
|
||||
|
||||
if (!curkey || !selectedKeys) {
|
||||
return false;
|
||||
}
|
||||
let basepath = '/project/' + match.params.id + '/interface/api';
|
||||
if (curkey === 'root') {
|
||||
history.push(basepath);
|
||||
} else {
|
||||
history.push(basepath + '/' + curkey);
|
||||
}
|
||||
this.setState({
|
||||
expands: null
|
||||
});
|
||||
};
|
||||
|
||||
changeExpands = () => {
|
||||
this.setState({
|
||||
expands: null
|
||||
});
|
||||
};
|
||||
|
||||
handleAddInterface = (data, cb) => {
|
||||
data.project_id = this.props.projectId;
|
||||
axios.post('/api/interface/add', data).then(res => {
|
||||
if (res.data.errcode !== 0) {
|
||||
return message.error(res.data.errmsg);
|
||||
}
|
||||
message.success('接口添加成功');
|
||||
let interfaceId = res.data.data._id;
|
||||
this.props.history.push('/project/' + this.props.projectId + '/interface/api/' + interfaceId);
|
||||
this.getList();
|
||||
this.setState({
|
||||
visible: false
|
||||
});
|
||||
if (cb) {
|
||||
cb();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
handleAddInterfaceCat = data => {
|
||||
data.project_id = this.props.projectId;
|
||||
axios.post('/api/interface/add_cat', data).then(res => {
|
||||
if (res.data.errcode !== 0) {
|
||||
return message.error(res.data.errmsg);
|
||||
}
|
||||
message.success('接口分类添加成功');
|
||||
this.getList();
|
||||
this.props.getProject(data.project_id);
|
||||
this.setState({
|
||||
add_cat_modal_visible: false
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
handleChangeInterfaceCat = data => {
|
||||
data.project_id = this.props.projectId;
|
||||
|
||||
let params = {
|
||||
catid: this.state.curCatdata._id,
|
||||
name: data.name,
|
||||
desc: data.desc
|
||||
};
|
||||
|
||||
axios.post('/api/interface/up_cat', params).then(res => {
|
||||
if (res.data.errcode !== 0) {
|
||||
return message.error(res.data.errmsg);
|
||||
}
|
||||
message.success('接口分类更新成功');
|
||||
this.getList();
|
||||
this.props.getProject(data.project_id);
|
||||
this.setState({
|
||||
change_cat_modal_visible: false
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
showConfirm = data => {
|
||||
let that = this;
|
||||
let id = data._id;
|
||||
let catid = data.catid;
|
||||
const ref = confirm({
|
||||
title: '您确认删除此接口????',
|
||||
content: '温馨提示：接口删除后，无法恢复',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
await that.props.deleteInterfaceData(id, that.props.projectId);
|
||||
await that.getList();
|
||||
await that.props.fetchInterfaceCatList({ catid });
|
||||
ref.destroy();
|
||||
that.props.history.push(
|
||||
'/project/' + that.props.match.params.id + '/interface/api/cat_' + catid
|
||||
);
|
||||
},
|
||||
onCancel() {
|
||||
ref.destroy();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
showDelCatConfirm = catid => {
|
||||
let that = this;
|
||||
const ref = confirm({
|
||||
title: '确定删除此接口分类吗？',
|
||||
content: '温馨提示：该操作会删除该分类下所有接口，接口删除后无法恢复',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
await that.props.deleteInterfaceCatData(catid, that.props.projectId);
|
||||
await that.getList();
|
||||
// await that.props.getProject(that.props.projectId)
|
||||
await that.props.fetchInterfaceList({ project_id: that.props.projectId });
|
||||
that.props.history.push('/project/' + that.props.match.params.id + '/interface/api');
|
||||
ref.destroy();
|
||||
},
|
||||
onCancel() {}
|
||||
});
|
||||
};
|
||||
|
||||
copyInterface = async id => {
|
||||
let interfaceData = await this.props.fetchInterfaceData(id);
|
||||
// let data = JSON.parse(JSON.stringify(interfaceData.payload.data.data));
|
||||
// data.title = data.title + '_copy';
|
||||
// data.path = data.path + '_' + Date.now();
|
||||
let data = interfaceData.payload.data.data;
|
||||
let newData = produce(data, draftData => {
|
||||
draftData.title = draftData.title + '_copy';
|
||||
draftData.path = draftData.path + '_' + Date.now();
|
||||
});
|
||||
|
||||
axios.post('/api/interface/add', newData).then(async res => {
|
||||
if (res.data.errcode !== 0) {
|
||||
return message.error(res.data.errmsg);
|
||||
}
|
||||
message.success('接口添加成功');
|
||||
let interfaceId = res.data.data._id;
|
||||
await this.getList();
|
||||
this.props.history.push('/project/' + this.props.projectId + '/interface/api/' + interfaceId);
|
||||
this.setState({
|
||||
visible: false
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
enterItem = id => {
|
||||
this.setState({ delIcon: id });
|
||||
};
|
||||
|
||||
leaveItem = () => {
|
||||
this.setState({ delIcon: null });
|
||||
};
|
||||
|
||||
onFilter = e => {
|
||||
this.setState({
|
||||
filter: e.target.value,
|
||||
list: JSON.parse(JSON.stringify(this.props.list))
|
||||
});
|
||||
};
|
||||
|
||||
onExpand = e => {
|
||||
this.setState({
|
||||
expands: e
|
||||
});
|
||||
};
|
||||
|
||||
onDrop = async e => {
|
||||
const dropCatIndex = e.node.props.pos.split('-')[1] - 1;
|
||||
const dragCatIndex = e.dragNode.props.pos.split('-')[1] - 1;
|
||||
if (dropCatIndex < 0 || dragCatIndex < 0) {
|
||||
return;
|
||||
}
|
||||
const { list } = this.props;
|
||||
const dropCatId = this.props.list[dropCatIndex]._id;
|
||||
const id = e.dragNode.props.eventKey;
|
||||
const dragCatId = this.props.list[dragCatIndex]._id;
|
||||
|
||||
const dropPos = e.node.props.pos.split('-');
|
||||
const dropIndex = Number(dropPos[dropPos.length - 1]);
|
||||
const dragPos = e.dragNode.props.pos.split('-');
|
||||
const dragIndex = Number(dragPos[dragPos.length - 1]);
|
||||
|
||||
if (id.indexOf('cat') === -1) {
|
||||
if (dropCatId === dragCatId) {
|
||||
// 同一个分类下的接口交换顺序
|
||||
let colList = list[dropCatIndex].list;
|
||||
let changes = arrayChangeIndex(colList, dragIndex, dropIndex);
|
||||
axios.post('/api/interface/up_index', changes).then();
|
||||
} else {
|
||||
await axios.post('/api/interface/up', { id, catid: dropCatId });
|
||||
}
|
||||
const { projectId, router } = this.props;
|
||||
this.props.fetchInterfaceListMenu(projectId);
|
||||
this.props.fetchInterfaceList({ project_id: projectId });
|
||||
if (router && isNaN(router.params.actionId)) {
|
||||
// 更新分类list下的数据
|
||||
let catid = router.params.actionId.substr(4);
|
||||
this.props.fetchInterfaceCatList({ catid });
|
||||
}
|
||||
} else {
|
||||
// 分类之间拖动
|
||||
let changes = arrayChangeIndex(list, dragIndex - 1, dropIndex - 1);
|
||||
axios.post('/api/interface/up_cat_index', changes).then();
|
||||
this.props.fetchInterfaceListMenu(this.props.projectId);
|
||||
}
|
||||
};
|
||||
// 数据过滤
|
||||
filterList = list => {
|
||||
let that = this;
|
||||
let arr = [];
|
||||
let menuList = produce(list, draftList => {
|
||||
draftList.filter(item => {
|
||||
let interfaceFilter = false;
|
||||
// arr = [];
|
||||
if (item.name.indexOf(that.state.filter) === -1) {
|
||||
item.list = item.list.filter(inter => {
|
||||
if (
|
||||
inter.title.indexOf(that.state.filter) === -1 &&
|
||||
inter.path.indexOf(that.state.filter) === -1
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
//arr.push('cat_' + inter.catid)
|
||||
interfaceFilter = true;
|
||||
return true;
|
||||
});
|
||||
arr.push('cat_' + item._id);
|
||||
return interfaceFilter === true;
|
||||
}
|
||||
arr.push('cat_' + item._id);
|
||||
return true;
|
||||
});
|
||||
});
|
||||
|
||||
return { menuList, arr };
|
||||
};
|
||||
|
||||
render() {
|
||||
const matchParams = this.props.match.params;
|
||||
// let menuList = this.state.list;
|
||||
const searchBox = (
|
||||
<div className="interface-filter">
|
||||
<Input onChange={this.onFilter} value={this.state.filter} placeholder="搜索接口" />
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => this.changeModal('add_cat_modal_visible', true)}
|
||||
className="btn-filter"
|
||||
>
|
||||
添加分类
|
||||
</Button>
|
||||
{this.state.visible ? (
|
||||
<Modal
|
||||
title="添加接口"
|
||||
visible={this.state.visible}
|
||||
onCancel={() => this.changeModal('visible', false)}
|
||||
footer={null}
|
||||
className="addcatmodal"
|
||||
>
|
||||
<AddInterfaceForm
|
||||
catdata={this.props.curProject.cat}
|
||||
catid={this.state.curCatid}
|
||||
onCancel={() => this.changeModal('visible', false)}
|
||||
onSubmit={this.handleAddInterface}
|
||||
/>
|
||||
</Modal>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
|
||||
{this.state.add_cat_modal_visible ? (
|
||||
<Modal
|
||||
title="添加分类"
|
||||
visible={this.state.add_cat_modal_visible}
|
||||
onCancel={() => this.changeModal('add_cat_modal_visible', false)}
|
||||
footer={null}
|
||||
className="addcatmodal"
|
||||
>
|
||||
<AddInterfaceCatForm
|
||||
onCancel={() => this.changeModal('add_cat_modal_visible', false)}
|
||||
onSubmit={this.handleAddInterfaceCat}
|
||||
/>
|
||||
</Modal>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
|
||||
{this.state.change_cat_modal_visible ? (
|
||||
<Modal
|
||||
title="修改分类"
|
||||
visible={this.state.change_cat_modal_visible}
|
||||
onCancel={() => this.changeModal('change_cat_modal_visible', false)}
|
||||
footer={null}
|
||||
className="addcatmodal"
|
||||
>
|
||||
<AddInterfaceCatForm
|
||||
catdata={this.state.curCatdata}
|
||||
onCancel={() => this.changeModal('change_cat_modal_visible', false)}
|
||||
onSubmit={this.handleChangeInterfaceCat}
|
||||
/>
|
||||
</Modal>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
const defaultExpandedKeys = () => {
|
||||
const { router, inter, list } = this.props,
|
||||
rNull = { expands: [], selects: [] };
|
||||
if (list.length === 0) {
|
||||
return rNull;
|
||||
}
|
||||
if (router) {
|
||||
if (!isNaN(router.params.actionId)) {
|
||||
if (!inter || !inter._id) {
|
||||
return rNull;
|
||||
}
|
||||
return {
|
||||
expands: this.state.expands ? this.state.expands : ['cat_' + inter.catid],
|
||||
selects: [inter._id + '']
|
||||
};
|
||||
} else {
|
||||
let catid = router.params.actionId.substr(4);
|
||||
return {
|
||||
expands: this.state.expands ? this.state.expands : ['cat_' + catid],
|
||||
selects: ['cat_' + catid]
|
||||
};
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
expands: this.state.expands ? this.state.expands : ['cat_' + list[0]._id],
|
||||
selects: ['root']
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const itemInterfaceCreate = item => {
|
||||
return (
|
||||
<TreeNode
|
||||
title={
|
||||
<div
|
||||
className="container-title"
|
||||
onMouseEnter={() => this.enterItem(item._id)}
|
||||
onMouseLeave={this.leaveItem}
|
||||
>
|
||||
<Tooltip title= {item.title}>
|
||||
<Link
|
||||
className="interface-item"
|
||||
onClick={e => e.stopPropagation()}
|
||||
to={'/project/' + matchParams.id + '/interface/api/' + item._id}
|
||||
>
|
||||
{item.title}
|
||||
</Link>
|
||||
</Tooltip>
|
||||
<div className="btns">
|
||||
<Tooltip title="删除接口">
|
||||
<Icon
|
||||
type="delete"
|
||||
className="interface-delete-icon"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
this.showConfirm(item);
|
||||
}}
|
||||
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="复制接口">
|
||||
<Icon
|
||||
type="copy"
|
||||
className="interface-delete-icon"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
this.copyInterface(item._id);
|
||||
}}
|
||||
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/*<Dropdown overlay={menu(item)} trigger={['click']} onClick={e => e.stopPropagation()}>
|
||||
<Icon type='ellipsis' className="interface-delete-icon" style={{ opacity: this.state.delIcon == item._id ? 1 : 0 }}/>
|
||||
</Dropdown>*/}
|
||||
</div>
|
||||
}
|
||||
key={'' + item._id}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
let currentKes = defaultExpandedKeys();
|
||||
let menuList;
|
||||
if (this.state.filter) {
|
||||
let res = this.filterList(this.state.list);
|
||||
menuList = res.menuList;
|
||||
currentKes.expands = res.arr;
|
||||
} else {
|
||||
menuList = this.state.list;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{searchBox}
|
||||
{menuList.length > 0 ? (
|
||||
<div
|
||||
className="tree-wrappper"
|
||||
style={{ maxHeight: parseInt(document.body.clientHeight) - headHeight + 'px' }}
|
||||
>
|
||||
<Tree
|
||||
className="interface-list"
|
||||
defaultExpandedKeys={currentKes.expands}
|
||||
defaultSelectedKeys={currentKes.selects}
|
||||
expandedKeys={currentKes.expands}
|
||||
selectedKeys={currentKes.selects}
|
||||
onSelect={this.onSelect}
|
||||
onExpand={this.onExpand}
|
||||
draggable
|
||||
onDrop={this.onDrop}
|
||||
>
|
||||
<TreeNode
|
||||
className="item-all-interface"
|
||||
title={
|
||||
<Link
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
this.changeExpands();
|
||||
}}
|
||||
to={'/project/' + matchParams.id + '/interface/api'}
|
||||
>
|
||||
<Icon type="folder" style={{ marginRight: 5 }} />
|
||||
全部接口
|
||||
</Link>
|
||||
}
|
||||
key="root"
|
||||
/>
|
||||
{menuList.map(item => {
|
||||
return (
|
||||
<TreeNode
|
||||
title={
|
||||
<div
|
||||
className="container-title"
|
||||
onMouseEnter={() => this.enterItem(item._id)}
|
||||
onMouseLeave={this.leaveItem}
|
||||
>
|
||||
<Link
|
||||
className="interface-item"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
this.changeExpands();
|
||||
}}
|
||||
to={'/project/' + matchParams.id + '/interface/api/cat_' + item._id}
|
||||
>
|
||||
<Icon type="folder-open" style={{ marginRight: 5 }} />
|
||||
{item.name}
|
||||
</Link>
|
||||
<div className="btns">
|
||||
<Tooltip title="删除分类">
|
||||
<Icon
|
||||
type="delete"
|
||||
className="interface-delete-icon"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
this.showDelCatConfirm(item._id);
|
||||
}}
|
||||
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="修改分类">
|
||||
<Icon
|
||||
type="edit"
|
||||
className="interface-delete-icon"
|
||||
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
this.changeModal('change_cat_modal_visible', true);
|
||||
this.setState({
|
||||
curCatdata: item
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="添加接口">
|
||||
<Icon
|
||||
type="plus"
|
||||
className="interface-delete-icon"
|
||||
style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
this.changeModal('visible', true);
|
||||
this.setState({
|
||||
curCatid: item._id
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
{/*<Dropdown overlay={menu(item)} trigger={['click']} onClick={e => e.stopPropagation()}>
|
||||
<Icon type='ellipsis' className="interface-delete-icon" />
|
||||
</Dropdown>*/}
|
||||
</div>
|
||||
}
|
||||
key={'cat_' + item._id}
|
||||
className={`interface-item-nav ${item.list.length ? '' : 'cat_switch_hidden'}`}
|
||||
>
|
||||
{item.list.map(itemInterfaceCreate)}
|
||||
</TreeNode>
|
||||
);
|
||||
})}
|
||||
</Tree>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(InterfaceMenu);
|
||||
@@ -0,0 +1,149 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Modal, Collapse, Row, Col, Input, message, Button, Icon } from 'antd';
|
||||
import PropTypes from 'prop-types';
|
||||
import axios from 'axios';
|
||||
import { withRouter } from 'react-router';
|
||||
import { fetchInterfaceColList } from '../../../../../reducer/modules/interfaceCol';
|
||||
|
||||
const { TextArea } = Input;
|
||||
const Panel = Collapse.Panel;
|
||||
|
||||
@connect(
|
||||
state => ({
|
||||
interfaceColList: state.interfaceCol.interfaceColList
|
||||
}),
|
||||
{
|
||||
fetchInterfaceColList
|
||||
}
|
||||
)
|
||||
@withRouter
|
||||
export default class AddColModal extends Component {
|
||||
static propTypes = {
|
||||
visible: PropTypes.bool,
|
||||
interfaceColList: PropTypes.array,
|
||||
fetchInterfaceColList: PropTypes.func,
|
||||
match: PropTypes.object,
|
||||
onOk: PropTypes.func,
|
||||
onCancel: PropTypes.func,
|
||||
caseName: PropTypes.string
|
||||
};
|
||||
|
||||
state = {
|
||||
visible: false,
|
||||
addColName: '',
|
||||
addColDesc: '',
|
||||
id: 0,
|
||||
caseName: ''
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
this.props.fetchInterfaceColList(this.props.match.params.id);
|
||||
this.setState({ caseName: this.props.caseName });
|
||||
}
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
this.setState({ id: nextProps.interfaceColList[0]._id });
|
||||
this.setState({ caseName: nextProps.caseName });
|
||||
}
|
||||
|
||||
addCol = async () => {
|
||||
const { addColName: name, addColDesc: desc } = this.state;
|
||||
const project_id = this.props.match.params.id;
|
||||
const res = await axios.post('/api/col/add_col', { name, desc, project_id });
|
||||
if (!res.data.errcode) {
|
||||
message.success('添加集合成功');
|
||||
await this.props.fetchInterfaceColList(project_id);
|
||||
|
||||
this.setState({ id: res.data.data._id });
|
||||
} else {
|
||||
message.error(res.data.errmsg);
|
||||
}
|
||||
};
|
||||
|
||||
select = id => {
|
||||
this.setState({ id });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { interfaceColList = [] } = this.props;
|
||||
const { id } = this.state;
|
||||
return (
|
||||
<Modal
|
||||
className="add-col-modal"
|
||||
title="添加到集合"
|
||||
visible={this.props.visible}
|
||||
onOk={() => this.props.onOk(id, this.state.caseName)}
|
||||
onCancel={this.props.onCancel}
|
||||
>
|
||||
<Row gutter={6} className="modal-input">
|
||||
<Col span="5">
|
||||
<div className="label">接口用例名：</div>
|
||||
</Col>
|
||||
<Col span="15">
|
||||
<Input
|
||||
placeholder="请输入接口用例名称"
|
||||
value={this.state.caseName}
|
||||
onChange={e => this.setState({ caseName: e.target.value })}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<p>请选择添加到的集合：</p>
|
||||
<ul className="col-list">
|
||||
{interfaceColList.length ? (
|
||||
interfaceColList.map(col => (
|
||||
<li
|
||||
key={col._id}
|
||||
className={`col-item ${col._id === id ? 'selected' : ''}`}
|
||||
onClick={() => this.select(col._id)}
|
||||
>
|
||||
<Icon type="folder-open" style={{ marginRight: 6 }} />
|
||||
{col.name}
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<span>暂无集合，请添加！</span>
|
||||
)}
|
||||
</ul>
|
||||
<Collapse>
|
||||
<Panel header="添加新集合">
|
||||
<Row gutter={6} className="modal-input">
|
||||
<Col span="5">
|
||||
<div className="label">集合名：</div>
|
||||
</Col>
|
||||
<Col span="15">
|
||||
<Input
|
||||
placeholder="请输入集合名称"
|
||||
value={this.state.addColName}
|
||||
onChange={e => this.setState({ addColName: e.target.value })}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={6} className="modal-input">
|
||||
<Col span="5">
|
||||
<div className="label">简介：</div>
|
||||
</Col>
|
||||
<Col span="15">
|
||||
<TextArea
|
||||
rows={3}
|
||||
placeholder="请输入集合描述"
|
||||
value={this.state.addColDesc}
|
||||
onChange={e => this.setState({ addColDesc: e.target.value })}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row type="flex" justify="end">
|
||||
<Button style={{ float: 'right' }} type="primary" onClick={this.addCol}>
|
||||
添 加
|
||||
</Button>
|
||||
</Row>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
113
client/containers/Project/Interface/InterfaceList/Run/Run.js
Normal file
113
client/containers/Project/Interface/InterfaceList/Run/Run.js
Normal file
@@ -0,0 +1,113 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { withRouter } from 'react-router';
|
||||
import axios from 'axios';
|
||||
import { message } from 'antd';
|
||||
import { Postman } from '../../../../../components';
|
||||
import AddColModal from './AddColModal';
|
||||
|
||||
// import {
|
||||
// } from '../../../reducer/modules/group.js'
|
||||
|
||||
import './Run.scss';
|
||||
|
||||
@connect(state => ({
|
||||
currInterface: state.inter.curdata,
|
||||
currProject: state.project.currProject,
|
||||
curUid: state.user.uid
|
||||
}))
|
||||
@withRouter
|
||||
export default class Run extends Component {
|
||||
static propTypes = {
|
||||
currProject: PropTypes.object,
|
||||
currInterface: PropTypes.object,
|
||||
match: PropTypes.object,
|
||||
curUid: PropTypes.number
|
||||
};
|
||||
|
||||
state = {};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
UNSAFE_componentWillMount() {}
|
||||
|
||||
UNSAFE_componentWillReceiveProps() {}
|
||||
|
||||
savePostmanRef = postman => {
|
||||
this.postman = postman;
|
||||
};
|
||||
|
||||
saveCase = async (colId, caseName) => {
|
||||
const project_id = this.props.match.params.id;
|
||||
const interface_id = this.props.currInterface._id;
|
||||
const {
|
||||
case_env,
|
||||
req_params,
|
||||
req_query,
|
||||
req_headers,
|
||||
req_body_type,
|
||||
req_body_form,
|
||||
req_body_other
|
||||
} = this.postman.state;
|
||||
|
||||
let params = {
|
||||
interface_id,
|
||||
casename: caseName,
|
||||
col_id: colId,
|
||||
project_id,
|
||||
case_env,
|
||||
req_params,
|
||||
req_query,
|
||||
req_headers,
|
||||
req_body_type,
|
||||
req_body_form,
|
||||
req_body_other
|
||||
};
|
||||
|
||||
if (params.test_res_body && typeof params.test_res_body === 'object') {
|
||||
params.test_res_body = JSON.stringify(params.test_res_body, null, ' ');
|
||||
}
|
||||
|
||||
const res = await axios.post('/api/col/add_case', params);
|
||||
if (res.data.errcode) {
|
||||
message.error(res.data.errmsg);
|
||||
} else {
|
||||
message.success('添加成功');
|
||||
this.setState({ saveCaseModalVisible: false });
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { currInterface, currProject } = this.props;
|
||||
const data = Object.assign({}, currInterface, {
|
||||
env: currProject.env,
|
||||
pre_script: currProject.pre_script,
|
||||
after_script: currProject.after_script
|
||||
});
|
||||
data.path = currProject.basepath + currInterface.path;
|
||||
return (
|
||||
<div>
|
||||
<Postman
|
||||
data={data}
|
||||
id={currProject._id}
|
||||
type="inter"
|
||||
saveTip="保存到集合"
|
||||
save={() => this.setState({ saveCaseModalVisible: true })}
|
||||
ref={this.savePostmanRef}
|
||||
interfaceId={currInterface._id}
|
||||
projectId={currInterface.project_id}
|
||||
curUid={this.props.curUid}
|
||||
/>
|
||||
<AddColModal
|
||||
visible={this.state.saveCaseModalVisible}
|
||||
caseName={currInterface.title}
|
||||
onCancel={() => this.setState({ saveCaseModalVisible: false })}
|
||||
onOk={this.saveCase}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
|
||||
.add-col-modal {
|
||||
.col-list {
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
margin: 7px 0 16px 0;
|
||||
background: #eaeaea;
|
||||
.col-item {
|
||||
padding: 7px 10px 7px 10px;
|
||||
}
|
||||
.col-item:hover {
|
||||
background: #fa0;
|
||||
}
|
||||
.col-item.selected {
|
||||
background: #2395f1;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
630
client/containers/Project/Interface/InterfaceList/View.js
Normal file
630
client/containers/Project/Interface/InterfaceList/View.js
Normal file
@@ -0,0 +1,630 @@
|
||||
import './View.scss'
|
||||
import React, { PureComponent as Component } from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Table, Icon, Row, Col, Tooltip, message } from 'antd'
|
||||
import { Link } from 'react-router-dom'
|
||||
import AceEditor from 'client/components/AceEditor/AceEditor'
|
||||
import { formatTime, safeArray } from '../../../../common.js'
|
||||
import ErrMsg from '../../../../components/ErrMsg/ErrMsg.js'
|
||||
import variable from '../../../../constants/variable'
|
||||
import constants from '../../../../constants/variable.js'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import SchemaTable from '../../../../components/SchemaTable/SchemaTable.js'
|
||||
|
||||
const HTTP_METHOD = constants.HTTP_METHOD
|
||||
|
||||
@connect(state => {
|
||||
return {
|
||||
curData: state.inter.curdata,
|
||||
custom_field: state.group.field,
|
||||
currProject: state.project.currProject
|
||||
}
|
||||
})
|
||||
class View extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
init: true,
|
||||
enter: false
|
||||
}
|
||||
}
|
||||
static propTypes = {
|
||||
curData: PropTypes.object,
|
||||
currProject: PropTypes.object,
|
||||
custom_field: PropTypes.object
|
||||
}
|
||||
|
||||
req_body_form(req_body_type, req_body_form) {
|
||||
if (req_body_type === 'form') {
|
||||
const columns = [
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
title: '参数类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 100,
|
||||
render: text => {
|
||||
text = text || ''
|
||||
return text.toLowerCase() === 'text' ? (
|
||||
<span>
|
||||
<i className='query-icon text'>T</i>文本
|
||||
</span>
|
||||
) : (
|
||||
<span>
|
||||
<Icon type='file' className='query-icon' />
|
||||
文件
|
||||
</span>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '是否必须',
|
||||
dataIndex: 'required',
|
||||
key: 'required',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '示例',
|
||||
dataIndex: 'example',
|
||||
key: 'example',
|
||||
width: 80,
|
||||
render(_, item) {
|
||||
return <p style={{ whiteSpace: 'pre-wrap' }}>{item.example}</p>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'value',
|
||||
key: 'value',
|
||||
render(_, item) {
|
||||
return <p style={{ whiteSpace: 'pre-wrap' }}>{item.value}</p>
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource = []
|
||||
if (req_body_form && req_body_form.length) {
|
||||
req_body_form.map((item, i) => {
|
||||
dataSource.push({
|
||||
key: i,
|
||||
name: item.name,
|
||||
value: item.desc,
|
||||
example: item.example,
|
||||
required: item.required == 0 ? '否' : '是',
|
||||
type: item.type
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ display: dataSource.length ? '' : 'none' }}
|
||||
className='colBody'>
|
||||
<Table
|
||||
bordered
|
||||
size='small'
|
||||
pagination={false}
|
||||
columns={columns}
|
||||
dataSource={dataSource}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
res_body(res_body_type, res_body, res_body_is_json_schema) {
|
||||
if (res_body_type === 'json') {
|
||||
if (res_body_is_json_schema) {
|
||||
return <SchemaTable dataSource={res_body} />
|
||||
} else {
|
||||
return (
|
||||
<div className='colBody'>
|
||||
{/* <div id="vres_body_json" style={{ minHeight: h * 16 + 100 }}></div> */}
|
||||
<AceEditor
|
||||
data={res_body}
|
||||
readOnly={true}
|
||||
style={{ minHeight: 600 }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
} else if (res_body_type === 'raw') {
|
||||
return (
|
||||
<div className='colBody'>
|
||||
<AceEditor
|
||||
data={res_body}
|
||||
readOnly={true}
|
||||
mode='text'
|
||||
style={{ minHeight: 300 }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
req_body(req_body_type, req_body_other, req_body_is_json_schema) {
|
||||
if (req_body_other) {
|
||||
if (req_body_is_json_schema && req_body_type === 'json') {
|
||||
return <SchemaTable dataSource={req_body_other} />
|
||||
} else {
|
||||
return (
|
||||
<div className='colBody'>
|
||||
<AceEditor
|
||||
data={req_body_other}
|
||||
readOnly={true}
|
||||
style={{ minHeight: 300 }}
|
||||
mode={req_body_type === 'json' ? 'javascript' : 'text'}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
req_query(query) {
|
||||
const columns = [
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name',
|
||||
width: 140,
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
width: 140,
|
||||
key: 'type'
|
||||
},
|
||||
{
|
||||
title: '是否必须',
|
||||
width: 100,
|
||||
dataIndex: 'required',
|
||||
key: 'required'
|
||||
},
|
||||
{
|
||||
title: '示例',
|
||||
dataIndex: 'example',
|
||||
key: 'example',
|
||||
width: 80,
|
||||
render(_, item) {
|
||||
return <p style={{ whiteSpace: 'pre-wrap' }}>{item.example}</p>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'value',
|
||||
key: 'value',
|
||||
render(_, item) {
|
||||
return <p style={{ whiteSpace: 'pre-wrap' }}>{item.value}</p>
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource = []
|
||||
if (query && query.length) {
|
||||
query.map((item, i) => {
|
||||
dataSource.push({
|
||||
key: i,
|
||||
name: item.name,
|
||||
value: item.desc,
|
||||
example: item.example,
|
||||
required: item.required == 0 ? '否' : '是',
|
||||
type: item.type
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Table
|
||||
bordered
|
||||
size='small'
|
||||
pagination={false}
|
||||
columns={columns}
|
||||
dataSource={dataSource}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
countEnter(str) {
|
||||
let i = 0
|
||||
let c = 0
|
||||
if (!str || !str.indexOf) {
|
||||
return 0
|
||||
}
|
||||
while (str.indexOf('\n', i) > -1) {
|
||||
i = str.indexOf('\n', i) + 2
|
||||
c++
|
||||
}
|
||||
return c
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (!this.props.curData.title && this.state.init) {
|
||||
this.setState({ init: false })
|
||||
}
|
||||
}
|
||||
|
||||
enterItem = () => {
|
||||
this.setState({
|
||||
enter: true
|
||||
})
|
||||
}
|
||||
|
||||
leaveItem = () => {
|
||||
this.setState({
|
||||
enter: false
|
||||
})
|
||||
}
|
||||
|
||||
copyUrl = url => {
|
||||
copy(url)
|
||||
message.success('已经成功复制到剪切板')
|
||||
}
|
||||
|
||||
flagMsg = (mock, strice) => {
|
||||
if (mock && strice) {
|
||||
return <span>( 全局mock & 严格模式 )</span>
|
||||
} else if (!mock && strice) {
|
||||
return <span>( 严格模式 )</span>
|
||||
} else if (mock && !strice) {
|
||||
return <span>( 全局mock )</span>
|
||||
} else {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const dataSource = []
|
||||
if (
|
||||
this.props.curData.req_headers &&
|
||||
this.props.curData.req_headers.length
|
||||
) {
|
||||
this.props.curData.req_headers.map((item, i) => {
|
||||
dataSource.push({
|
||||
key: i,
|
||||
name: item.name,
|
||||
required: item.required == 0 ? '否' : '是',
|
||||
value: item.value,
|
||||
example: item.example,
|
||||
desc: item.desc
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const req_dataSource = []
|
||||
if (this.props.curData.req_params && this.props.curData.req_params.length) {
|
||||
this.props.curData.req_params.map((item, i) => {
|
||||
req_dataSource.push({
|
||||
key: i,
|
||||
name: item.name,
|
||||
desc: item.desc,
|
||||
example: item.example,
|
||||
type: item.type
|
||||
})
|
||||
})
|
||||
}
|
||||
const req_params_columns = [
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
title: '示例',
|
||||
dataIndex: 'example',
|
||||
key: 'example',
|
||||
width: 80,
|
||||
render(_, item) {
|
||||
return <p style={{ whiteSpace: 'pre-wrap' }}>{item.example}</p>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'desc',
|
||||
key: 'desc',
|
||||
render(_, item) {
|
||||
return <p style={{ whiteSpace: 'pre-wrap' }}>{item.desc}</p>
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: '200px'
|
||||
},
|
||||
{
|
||||
title: '参数值',
|
||||
dataIndex: 'value',
|
||||
key: 'value',
|
||||
width: '300px'
|
||||
},
|
||||
{
|
||||
title: '是否必须',
|
||||
dataIndex: 'required',
|
||||
key: 'required',
|
||||
width: '100px'
|
||||
},
|
||||
{
|
||||
title: '示例',
|
||||
dataIndex: 'example',
|
||||
key: 'example',
|
||||
width: '80px',
|
||||
render(_, item) {
|
||||
return <p style={{ whiteSpace: 'pre-wrap' }}>{item.example}</p>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'desc',
|
||||
key: 'desc',
|
||||
render(_, item) {
|
||||
return <p style={{ whiteSpace: 'pre-wrap' }}>{item.desc}</p>
|
||||
}
|
||||
}
|
||||
]
|
||||
let status = {
|
||||
undone: '未完成',
|
||||
done: '已完成'
|
||||
}
|
||||
|
||||
let bodyShow =
|
||||
this.props.curData.req_body_other ||
|
||||
(this.props.curData.req_body_type === 'form' &&
|
||||
this.props.curData.req_body_form &&
|
||||
this.props.curData.req_body_form.length)
|
||||
|
||||
let requestShow =
|
||||
(dataSource && dataSource.length) ||
|
||||
(req_dataSource && req_dataSource.length) ||
|
||||
(this.props.curData.req_query && this.props.curData.req_query.length) ||
|
||||
bodyShow
|
||||
|
||||
let methodColor =
|
||||
variable.METHOD_COLOR[
|
||||
this.props.curData.method
|
||||
? this.props.curData.method.toLowerCase()
|
||||
: 'get'
|
||||
]
|
||||
|
||||
// statusColor = statusColor[this.props.curData.status?this.props.curData.status.toLowerCase():"undone"];
|
||||
// const aceEditor = <div style={{ display: this.props.curData.req_body_other && (this.props.curData.req_body_type !== "form") ? "block" : "none" }} className="colBody">
|
||||
// <AceEditor data={this.props.curData.req_body_other} readOnly={true} style={{ minHeight: 300 }} mode={this.props.curData.req_body_type === 'json' ? 'javascript' : 'text'} />
|
||||
// </div>
|
||||
if (!methodColor) {
|
||||
methodColor = 'get'
|
||||
}
|
||||
|
||||
const { tag, up_time, title, uid, username } = this.props.curData
|
||||
|
||||
let res = (
|
||||
<div className='caseContainer'>
|
||||
<h2 className='interface-title' style={{ marginTop: 0 }}>
|
||||
基本信息
|
||||
</h2>
|
||||
<div className='panel-view'>
|
||||
<Row className='row'>
|
||||
<Col span={4} className='colKey'>
|
||||
接口名称：
|
||||
</Col>
|
||||
<Col span={8} className='colName'>
|
||||
{title}
|
||||
</Col>
|
||||
<Col span={4} className="colKey">
|
||||
创 建 人：
|
||||
</Col>
|
||||
<Col span={8} className='colValue'>
|
||||
<Link className='user-name' to={'/user/profile/' + uid}>
|
||||
<img src={'/api/user/avatar?uid=' + uid} className='user-img' />
|
||||
{username}
|
||||
</Link>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="row">
|
||||
<Col span={4} className="colKey">
|
||||
状  态：
|
||||
</Col>
|
||||
<Col span={8} className={'tag-status ' + this.props.curData.status}>
|
||||
{status[this.props.curData.status]}
|
||||
</Col>
|
||||
<Col span={4} className='colKey'>
|
||||
更新时间：
|
||||
</Col>
|
||||
<Col span={8}>{formatTime(up_time)}</Col>
|
||||
</Row>
|
||||
{safeArray(tag) && safeArray(tag).length > 0 && (
|
||||
<Row className='row remark'>
|
||||
<Col span={4} className='colKey'>
|
||||
Tag ：
|
||||
</Col>
|
||||
<Col span={18} className='colValue'>
|
||||
{tag.join(' , ')}
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
<Row className='row'>
|
||||
<Col span={4} className='colKey'>
|
||||
接口路径：
|
||||
</Col>
|
||||
<Col
|
||||
span={18}
|
||||
className='colValue'
|
||||
onMouseEnter={this.enterItem}
|
||||
onMouseLeave={this.leaveItem}>
|
||||
<span
|
||||
style={{
|
||||
color: methodColor.color,
|
||||
backgroundColor: methodColor.bac
|
||||
}}
|
||||
className='colValue tag-method'>
|
||||
{this.props.curData.method}
|
||||
</span>
|
||||
<span className='colValue'>
|
||||
{this.props.currProject.basepath}
|
||||
{this.props.curData.path}
|
||||
</span>
|
||||
<Tooltip title='复制路径'>
|
||||
<Icon
|
||||
type='copy'
|
||||
className='interface-url-icon'
|
||||
onClick={() =>
|
||||
this.copyUrl(
|
||||
this.props.currProject.basepath + this.props.curData.path,
|
||||
)
|
||||
}
|
||||
style={{
|
||||
display: this.state.enter ? 'inline-block' : 'none'
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className='row'>
|
||||
<Col span={4} className='colKey'>
|
||||
Mock地址：
|
||||
</Col>
|
||||
<Col span={18} className='colValue'>
|
||||
{this.flagMsg(
|
||||
this.props.currProject.is_mock_open,
|
||||
this.props.currProject.strice,
|
||||
)}
|
||||
<span
|
||||
className='href'
|
||||
onClick={() =>
|
||||
window.open(
|
||||
location.protocol +
|
||||
'//' +
|
||||
location.hostname +
|
||||
(location.port !== '' ? ':' + location.port : '') +
|
||||
`/mock/${this.props.currProject._id}${this.props.currProject.basepath}${this.props.curData.path}`,
|
||||
'_blank',
|
||||
)
|
||||
}>
|
||||
{location.protocol +
|
||||
'//' +
|
||||
location.hostname +
|
||||
(location.port !== '' ? ':' + location.port : '') +
|
||||
`/mock/${this.props.currProject._id}${this.props.currProject.basepath}${this.props.curData.path}`}
|
||||
</span>
|
||||
</Col>
|
||||
</Row>
|
||||
{this.props.curData.custom_field_value &&
|
||||
this.props.custom_field.enable && (
|
||||
<Row className='row remark'>
|
||||
<Col span={4} className='colKey'>
|
||||
{this.props.custom_field.name}：
|
||||
</Col>
|
||||
<Col span={18} className='colValue'>
|
||||
{this.props.curData.custom_field_value}
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
</div>
|
||||
{this.props.curData.desc && <h2 className='interface-title'>备注</h2>}
|
||||
{this.props.curData.desc && (
|
||||
<div
|
||||
className='tui-editor-contents'
|
||||
style={{ margin: '0px', padding: '0px 20px', float: 'none' }}
|
||||
dangerouslySetInnerHTML={{ __html: this.props.curData.desc }}
|
||||
/>
|
||||
)}
|
||||
<h2
|
||||
className='interface-title'
|
||||
style={{ display: requestShow ? '' : 'none' }}>
|
||||
请求参数
|
||||
</h2>
|
||||
{req_dataSource.length ? (
|
||||
<div className='colHeader'>
|
||||
<h3 className='col-title'>路径参数：</h3>
|
||||
<Table
|
||||
bordered
|
||||
size='small'
|
||||
pagination={false}
|
||||
columns={req_params_columns}
|
||||
dataSource={req_dataSource}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
{dataSource.length ? (
|
||||
<div className='colHeader'>
|
||||
<h3 className='col-title'>Headers：</h3>
|
||||
<Table
|
||||
bordered
|
||||
size='small'
|
||||
pagination={false}
|
||||
columns={columns}
|
||||
dataSource={dataSource}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
{this.props.curData.req_query && this.props.curData.req_query.length ? (
|
||||
<div className='colQuery'>
|
||||
<h3 className='col-title'>Query：</h3>
|
||||
{this.req_query(this.props.curData.req_query)}
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
|
||||
<div
|
||||
style={{
|
||||
display:
|
||||
this.props.curData.method &&
|
||||
HTTP_METHOD[this.props.curData.method.toUpperCase()].request_body
|
||||
? ''
|
||||
: 'none'
|
||||
}}>
|
||||
<h3 style={{ display: bodyShow ? '' : 'none' }} className='col-title'>
|
||||
Body:
|
||||
</h3>
|
||||
{this.props.curData.req_body_type === 'form'
|
||||
? this.req_body_form(
|
||||
this.props.curData.req_body_type,
|
||||
this.props.curData.req_body_form,
|
||||
)
|
||||
: this.req_body(
|
||||
this.props.curData.req_body_type,
|
||||
this.props.curData.req_body_other,
|
||||
this.props.curData.req_body_is_json_schema,
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h2 className='interface-title'>返回数据</h2>
|
||||
{this.res_body(
|
||||
this.props.curData.res_body_type,
|
||||
this.props.curData.res_body,
|
||||
this.props.curData.res_body_is_json_schema,
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
if (!this.props.curData.title) {
|
||||
if (this.state.init) {
|
||||
res = <div />
|
||||
} else {
|
||||
res = <ErrMsg type='noData' />
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
}
|
||||
|
||||
export default View
|
||||
135
client/containers/Project/Interface/InterfaceList/View.scss
Normal file
135
client/containers/Project/Interface/InterfaceList/View.scss
Normal file
@@ -0,0 +1,135 @@
|
||||
.caseContainer{
|
||||
padding: 24px;
|
||||
font-size: 13px;
|
||||
// display: flex;
|
||||
overflow: hidden;
|
||||
>div{
|
||||
margin: 8px 0px;
|
||||
// background-color: #ececec;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
.colKey{
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
width: 100px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.colName{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.col-title{margin-bottom: 5px}
|
||||
.colValue.href {
|
||||
color: #2395f1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ace_print-margin{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.interface-url-icon{
|
||||
padding-left: 8px;
|
||||
}
|
||||
.colBody{
|
||||
.query-icon {
|
||||
display: inline-block;
|
||||
width: .13rem;
|
||||
margin-right: 4px;
|
||||
position: relative;
|
||||
&.text:after {
|
||||
content: 'T';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
bottom: -2px;
|
||||
transform: scale(.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
.colDesc{
|
||||
margin-bottom: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.ant-table-thead {
|
||||
th{
|
||||
color: #6d6c6c;
|
||||
font-weight: normal;
|
||||
}
|
||||
tr{
|
||||
// background-color: black;
|
||||
}
|
||||
}
|
||||
.ant-table-thead>tr>th{
|
||||
background: #f7f7f7;
|
||||
}
|
||||
.colMethod{
|
||||
.colValue{
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
color: #00a854;
|
||||
background: #cfefdf;
|
||||
border-color: #cfefdf;
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
margin-right: 7px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
.colstatus{
|
||||
.colValue{
|
||||
height: 23px;
|
||||
padding: 0 5px;
|
||||
line-height: 23px;
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.user-img {
|
||||
width: .3rem;
|
||||
height: .3rem;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #eee;
|
||||
vertical-align: middle;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.tag-method {
|
||||
padding: 4px 6px;
|
||||
margin-right: 8px;
|
||||
border-radius: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.colHalf {
|
||||
width: 50%;
|
||||
float: left;
|
||||
margin-bottom: .16rem;
|
||||
.colKey{
|
||||
padding-bottom: 0px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-view {
|
||||
.row {
|
||||
margin-bottom: .16rem;
|
||||
line-height: 36px;
|
||||
}
|
||||
.user-img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
.user-name {
|
||||
padding-left: .38rem;
|
||||
}
|
||||
}
|
||||
617
client/containers/Project/Interface/InterfaceList/editor.css
Normal file
617
client/containers/Project/Interface/InterfaceList/editor.css
Normal file
@@ -0,0 +1,617 @@
|
||||
.tui-editor-contents h1 {
|
||||
font-size: 45px;
|
||||
line-height: 1.5;
|
||||
border-bottom: 3px double #999;
|
||||
margin: 52px 0 15px 0;
|
||||
padding-bottom: 7px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tui-editor-contents h2 {
|
||||
font-size: 34px;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
margin: 30px 0 13px 0;
|
||||
padding-bottom: 7px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tui-editor-contents h3,
|
||||
.tui-editor-contents h4 {
|
||||
font-size: 24px;
|
||||
line-height: 1.5;
|
||||
margin: 20px 0 2px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tui-editor-contents h5,
|
||||
.tui-editor-contents h6 {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin: 10px 0 -4px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #998;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-subst {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-literal,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-tag .hljs-attr {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-doctag {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-selector-id {
|
||||
color: #900;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-type,
|
||||
.hljs-class .hljs-title {
|
||||
color: #458;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-attribute {
|
||||
color: #000080;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-link {
|
||||
color: #009926;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-bullet {
|
||||
color: #990073;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-meta {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background: #fdd;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background: #dfd;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* BASICS */
|
||||
|
||||
.CodeMirror {
|
||||
/* Set height, width, borders, and global font properties here */
|
||||
font-family: monospace;
|
||||
height: 300px;
|
||||
color: black;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
/* PADDING */
|
||||
|
||||
.CodeMirror-lines {
|
||||
padding: 4px 0; /* Vertical padding around content */
|
||||
}
|
||||
.CodeMirror pre {
|
||||
padding: 0 4px; /* Horizontal padding of content */
|
||||
}
|
||||
|
||||
.CodeMirror-scrollbar-filler,
|
||||
.CodeMirror-gutter-filler {
|
||||
background-color: white; /* The little square between H and V scrollbars */
|
||||
}
|
||||
|
||||
/* GUTTER */
|
||||
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid #ddd;
|
||||
background-color: #f7f7f7;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
padding: 0 3px 0 5px;
|
||||
min-width: 20px;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.CodeMirror-guttermarker {
|
||||
color: black;
|
||||
}
|
||||
.CodeMirror-guttermarker-subtle {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* CURSOR */
|
||||
|
||||
.CodeMirror-cursor {
|
||||
border-left: 1px solid black;
|
||||
border-right: none;
|
||||
width: 0;
|
||||
}
|
||||
/* Shown when moving in bi-directional text */
|
||||
.CodeMirror div.CodeMirror-secondarycursor {
|
||||
border-left: 1px solid silver;
|
||||
}
|
||||
.cm-fat-cursor .CodeMirror-cursor {
|
||||
width: auto;
|
||||
border: 0 !important;
|
||||
background: #7e7;
|
||||
}
|
||||
.cm-fat-cursor div.CodeMirror-cursors {
|
||||
z-index: 1;
|
||||
}
|
||||
.cm-fat-cursor-mark {
|
||||
background-color: rgba(20, 255, 20, 0.5);
|
||||
-webkit-animation: blink 1.06s steps(1) infinite;
|
||||
-moz-animation: blink 1.06s steps(1) infinite;
|
||||
animation: blink 1.06s steps(1) infinite;
|
||||
}
|
||||
.cm-animate-fat-cursor {
|
||||
width: auto;
|
||||
border: 0;
|
||||
-webkit-animation: blink 1.06s steps(1) infinite;
|
||||
-moz-animation: blink 1.06s steps(1) infinite;
|
||||
animation: blink 1.06s steps(1) infinite;
|
||||
background-color: #7e7;
|
||||
}
|
||||
@-moz-keyframes blink {
|
||||
0% {
|
||||
}
|
||||
50% {
|
||||
background-color: transparent;
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes blink {
|
||||
0% {
|
||||
}
|
||||
50% {
|
||||
background-color: transparent;
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
@keyframes blink {
|
||||
0% {
|
||||
}
|
||||
50% {
|
||||
background-color: transparent;
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
|
||||
/* Can style cursor different in overwrite (non-insert) mode */
|
||||
/* .CodeMirror-overwrite .CodeMirror-cursor {
|
||||
} */
|
||||
|
||||
.cm-tab {
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
.CodeMirror-rulers {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -50px;
|
||||
bottom: -20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.CodeMirror-ruler {
|
||||
border-left: 1px solid #ccc;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* DEFAULT THEME */
|
||||
|
||||
.cm-s-default .cm-header {
|
||||
color: blue;
|
||||
}
|
||||
.cm-s-default .cm-quote {
|
||||
color: #090;
|
||||
}
|
||||
.cm-negative {
|
||||
color: #d44;
|
||||
}
|
||||
.cm-positive {
|
||||
color: #292;
|
||||
}
|
||||
.cm-header,
|
||||
.cm-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.cm-em {
|
||||
font-style: italic;
|
||||
}
|
||||
.cm-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.cm-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.cm-s-default .cm-keyword {
|
||||
color: #708;
|
||||
}
|
||||
.cm-s-default .cm-atom {
|
||||
color: #219;
|
||||
}
|
||||
.cm-s-default .cm-number {
|
||||
color: #164;
|
||||
}
|
||||
.cm-s-default .cm-def {
|
||||
color: #00f;
|
||||
}
|
||||
/* .cm-s-default .cm-variable,
|
||||
.cm-s-default .cm-punctuation,
|
||||
.cm-s-default .cm-property,
|
||||
.cm-s-default .cm-operator {
|
||||
} */
|
||||
.cm-s-default .cm-variable-2 {
|
||||
color: #05a;
|
||||
}
|
||||
.cm-s-default .cm-variable-3,
|
||||
.cm-s-default .cm-type {
|
||||
color: #085;
|
||||
}
|
||||
.cm-s-default .cm-comment {
|
||||
color: #a50;
|
||||
}
|
||||
.cm-s-default .cm-string {
|
||||
color: #a11;
|
||||
}
|
||||
.cm-s-default .cm-string-2 {
|
||||
color: #f50;
|
||||
}
|
||||
.cm-s-default .cm-meta {
|
||||
color: #555;
|
||||
}
|
||||
.cm-s-default .cm-qualifier {
|
||||
color: #555;
|
||||
}
|
||||
.cm-s-default .cm-builtin {
|
||||
color: #30a;
|
||||
}
|
||||
.cm-s-default .cm-bracket {
|
||||
color: #997;
|
||||
}
|
||||
.cm-s-default .cm-tag {
|
||||
color: #170;
|
||||
}
|
||||
.cm-s-default .cm-attribute {
|
||||
color: #00c;
|
||||
}
|
||||
.cm-s-default .cm-hr {
|
||||
color: #999;
|
||||
}
|
||||
.cm-s-default .cm-link {
|
||||
color: #00c;
|
||||
}
|
||||
|
||||
.cm-s-default .cm-error {
|
||||
color: #f00;
|
||||
}
|
||||
.cm-invalidchar {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.CodeMirror-composing {
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
/* Default styles for common addons */
|
||||
|
||||
div.CodeMirror span.CodeMirror-matchingbracket {
|
||||
color: #0b0;
|
||||
}
|
||||
div.CodeMirror span.CodeMirror-nonmatchingbracket {
|
||||
color: #a22;
|
||||
}
|
||||
.CodeMirror-matchingtag {
|
||||
background: rgba(255, 150, 0, 0.3);
|
||||
}
|
||||
.CodeMirror-activeline-background {
|
||||
background: #e8f2ff;
|
||||
}
|
||||
|
||||
/* STOP */
|
||||
|
||||
/* The rest of this file contains styles related to the mechanics of
|
||||
the editor. You probably shouldn't touch them. */
|
||||
|
||||
.CodeMirror {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
overflow: scroll !important; /* Things will break if this is overridden */
|
||||
/* 30px is the magic margin used to hide the element's real scrollbars */
|
||||
/* See overflow: hidden in .CodeMirror */
|
||||
margin-bottom: -30px;
|
||||
margin-right: -30px;
|
||||
padding-bottom: 30px;
|
||||
height: 100%;
|
||||
outline: none; /* Prevent dragging from highlighting the element */
|
||||
position: relative;
|
||||
}
|
||||
.CodeMirror-sizer {
|
||||
position: relative;
|
||||
border-right: 30px solid transparent;
|
||||
}
|
||||
|
||||
/* The fake, visible scrollbars. Used to force redraw during scrolling
|
||||
before actual scrolling happens, thus preventing shaking and
|
||||
flickering artifacts. */
|
||||
.CodeMirror-vscrollbar,
|
||||
.CodeMirror-hscrollbar,
|
||||
.CodeMirror-scrollbar-filler,
|
||||
.CodeMirror-gutter-filler {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
display: none;
|
||||
}
|
||||
.CodeMirror-vscrollbar {
|
||||
right: 0;
|
||||
top: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.CodeMirror-hscrollbar {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.CodeMirror-scrollbar-filler {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.CodeMirror-gutter-filler {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
.CodeMirror-gutter {
|
||||
white-space: normal;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
.CodeMirror-gutter-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
.CodeMirror-gutter-elt {
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
z-index: 4;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper ::selection {
|
||||
background-color: transparent;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper ::-moz-selection {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
cursor: text;
|
||||
min-height: 1px; /* prevents collapsing before first draw */
|
||||
}
|
||||
.CodeMirror pre {
|
||||
/* Reset some styles that the rest of the page might have set */
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0;
|
||||
border-width: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-variant-ligatures: contextual;
|
||||
font-variant-ligatures: contextual;
|
||||
}
|
||||
.CodeMirror-wrap pre {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.CodeMirror-linebackground {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-linewidget {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 0.1px; /* Force widget margins to stay inside of the container */
|
||||
}
|
||||
|
||||
/* .CodeMirror-widget {
|
||||
} */
|
||||
|
||||
.CodeMirror-rtl pre {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.CodeMirror-code {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Force content-box sizing for the elements where we expect it */
|
||||
.CodeMirror-scroll,
|
||||
.CodeMirror-sizer,
|
||||
.CodeMirror-gutter,
|
||||
.CodeMirror-gutters,
|
||||
.CodeMirror-linenumber {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.CodeMirror-measure {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.CodeMirror-measure pre {
|
||||
position: static;
|
||||
}
|
||||
|
||||
div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
div.CodeMirror-dragcursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-focused div.CodeMirror-cursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-selected {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
.CodeMirror-focused .CodeMirror-selected {
|
||||
background: #d7d4f0;
|
||||
}
|
||||
.CodeMirror-crosshair {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.CodeMirror-line::selection,
|
||||
.CodeMirror-line > span::selection,
|
||||
.CodeMirror-line > span > span::selection {
|
||||
background: #d7d4f0;
|
||||
}
|
||||
.CodeMirror-line::-moz-selection,
|
||||
.CodeMirror-line > span::-moz-selection,
|
||||
.CodeMirror-line > span > span::-moz-selection {
|
||||
background: #d7d4f0;
|
||||
}
|
||||
|
||||
.cm-searching {
|
||||
background-color: #ffa;
|
||||
background-color: rgba(255, 255, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Used to force a border model for a node */
|
||||
.cm-force-border {
|
||||
padding-right: 0.1px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
/* Hide the cursor when printing */
|
||||
.CodeMirror div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* See issue #2901 */
|
||||
.cm-tab-wrap-hack:after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
/* Help users use markselection to safely style text background */
|
||||
span.CodeMirror-selectedtext {
|
||||
background: none;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
.tree-wrappper{
|
||||
min-height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
298
client/containers/Project/Interface/interface.scss
Normal file
298
client/containers/Project/Interface/interface.scss
Normal file
@@ -0,0 +1,298 @@
|
||||
@import '../../../styles/mixin.scss';
|
||||
|
||||
.left-menu {
|
||||
min-height: 5rem;
|
||||
// background: #FFF;
|
||||
// .item-all-interface {
|
||||
// background-color: red;
|
||||
// }
|
||||
// .ant-tabs-bar{
|
||||
// border-bottom: none;
|
||||
// margin-bottom: 0
|
||||
// }
|
||||
.ant-tag {
|
||||
margin-right: 0.16rem;
|
||||
}
|
||||
.ant-tabs-nav {
|
||||
width: 100%;
|
||||
background-color: $color-bg-gray;
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
min-width: 49.4%;
|
||||
}
|
||||
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
|
||||
height: 39px;
|
||||
background: #fff;
|
||||
border-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab:nth-of-type(2) {
|
||||
border-left: 0;
|
||||
}
|
||||
// .ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab:last-of-type {
|
||||
// border-right: 0;
|
||||
// }
|
||||
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
|
||||
height: 40px;
|
||||
background-color: #ddd;
|
||||
// color: $color-white;
|
||||
}
|
||||
|
||||
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-container {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.ant-tabs.ant-tabs-card > .ant-tabs-bar {
|
||||
text-align: center;
|
||||
// background: #ececec;
|
||||
}
|
||||
|
||||
.ant-tabs-nav-wrap {
|
||||
height: 40px;
|
||||
line-height: 31px;
|
||||
// border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
.ant-input {
|
||||
width: 100%;
|
||||
}
|
||||
.interface-filter {
|
||||
padding: 12px 16px;
|
||||
padding-right: 110px;
|
||||
line-height: 32px;
|
||||
background-color: #ddd;
|
||||
position: relative;
|
||||
}
|
||||
.btn-filter {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.ant-tree li .ant-tree-node-content-wrapper {
|
||||
width: calc(100% - 28px);
|
||||
position: relative;
|
||||
.container-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btns {
|
||||
background-color: #eef7fe;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-60%);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
.ant-tree li .ant-tree-node-selected {
|
||||
.btns {
|
||||
background-color: #d5ebfc;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.interface-delete-icon {
|
||||
position: relative;
|
||||
right: 0;
|
||||
float: right;
|
||||
line-height: 25px;
|
||||
width: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.anticon-ellipsis {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.interface-delete-icon:hover {
|
||||
color: #2395f1;
|
||||
}
|
||||
|
||||
.interface-list {
|
||||
//max-height: 600px;
|
||||
//overflow-y: scroll;
|
||||
.cat_switch_hidden {
|
||||
.ant-tree-switcher {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(13, 27, 62, 0.65);
|
||||
}
|
||||
|
||||
.btn-http {
|
||||
height: 23px;
|
||||
font-size: 10px;
|
||||
margin-right: 7px;
|
||||
padding: 0 5px;
|
||||
width: auto !important;
|
||||
}
|
||||
.interface-item {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
top: 0px;
|
||||
}
|
||||
.interface-item-nav {
|
||||
line-height: 25px;
|
||||
}
|
||||
.interface-list {
|
||||
.cat_switch_hidden {
|
||||
.ant-tree-switcher {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-http {
|
||||
height: 23px;
|
||||
font-size: 10px;
|
||||
margin-right: 7px;
|
||||
padding: 0 5px;
|
||||
width: auto !important;
|
||||
}
|
||||
.interface-item {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
top: 0px;
|
||||
line-height: 100%;
|
||||
text-decoration: none;
|
||||
}
|
||||
.interface-item-nav {
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-content {
|
||||
min-height: 5rem;
|
||||
background: #fff;
|
||||
.caseContainer {
|
||||
table {
|
||||
border-radius: 4px;
|
||||
// border-collapse: collapse;
|
||||
}
|
||||
.ant-table-small .ant-table-thead > tr > th {
|
||||
text-align: left;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
}
|
||||
.interface-content {
|
||||
.ant-tabs-nav {
|
||||
width: 100%;
|
||||
// background-color: #ddd;
|
||||
// color: $color-white;
|
||||
}
|
||||
.ant-tabs-nav-wrap {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.interface-title {
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
margin-top: 0.48rem;
|
||||
margin-bottom: 0.16rem;
|
||||
border-left: 3px solid #2395f1;
|
||||
padding-left: 8px;
|
||||
.tooltip {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.container-radiogroup {
|
||||
text-align: center;
|
||||
margin-bottom: 0.16rem;
|
||||
}
|
||||
.panel-sub {
|
||||
background: rgba(236, 238, 241, 0.67);
|
||||
padding: 0.1rem;
|
||||
.bulk-import {
|
||||
color: #2395f1;
|
||||
text-align: right;
|
||||
margin-right: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.ant-radio-button-wrapper-checked {
|
||||
color: #fff;
|
||||
background-color: #2395f1;
|
||||
&:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
.href {
|
||||
color: #2395f1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.remark-editor {
|
||||
background-color: #fff;
|
||||
}
|
||||
.remark {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
background-color: #f8f8f8;
|
||||
text-indent: 0.4em;
|
||||
}
|
||||
tr {
|
||||
text-indent: 0.4em;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #e9e9e9;
|
||||
}
|
||||
tr:nth-child(odd) {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.addcatmodal {
|
||||
.ant-modal-body {
|
||||
padding: 10px 0px;
|
||||
.ant-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.catModalfoot {
|
||||
border-top: 1px solid #e9e9e9;
|
||||
margin-bottom: 0px;
|
||||
padding-top: 10px;
|
||||
margin-top: 0px;
|
||||
.ant-form-item-control-wrapper {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.ant-form-item-control {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.common-setting-modal{
|
||||
|
||||
.setting-item{
|
||||
margin: 10px;
|
||||
line-height: 35px;
|
||||
.col-item{
|
||||
padding:5px;
|
||||
}
|
||||
}
|
||||
|
||||
.case-script{
|
||||
min-height: 200px;
|
||||
margin: 10px;
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
.insert-code{
|
||||
padding-top: 45px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user