fork from bc4552c5a8
This commit is contained in:
@@ -0,0 +1,520 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Switch,
|
||||
Select,
|
||||
Icon,
|
||||
Tooltip,
|
||||
Button,
|
||||
Row,
|
||||
Col,
|
||||
message,
|
||||
Card,
|
||||
Radio,
|
||||
Alert,
|
||||
Modal,
|
||||
Popover
|
||||
} from 'antd';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
updateProject,
|
||||
delProject,
|
||||
getProject,
|
||||
upsetProject
|
||||
} from '../../../../reducer/modules/project';
|
||||
import { fetchGroupMsg } from '../../../../reducer/modules/group';
|
||||
import { fetchGroupList } from '../../../../reducer/modules/group.js';
|
||||
import { setBreadcrumb } from '../../../../reducer/modules/user';
|
||||
import { connect } from 'react-redux';
|
||||
const { TextArea } = Input;
|
||||
import { withRouter } from 'react-router';
|
||||
const FormItem = Form.Item;
|
||||
const RadioGroup = Radio.Group;
|
||||
const RadioButton = Radio.Button;
|
||||
import constants from '../../../../constants/variable.js';
|
||||
const confirm = Modal.confirm;
|
||||
import { nameLengthLimit, entries, trim, htmlFilter } from '../../../../common';
|
||||
import '../Setting.scss';
|
||||
import _ from 'underscore';
|
||||
import ProjectTag from './ProjectTag.js';
|
||||
// layout
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
lg: { offset: 1, span: 3 },
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
lg: { span: 19 },
|
||||
xs: { span: 24 },
|
||||
sm: { span: 14 }
|
||||
},
|
||||
className: 'form-item'
|
||||
};
|
||||
|
||||
const Option = Select.Option;
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
projectList: state.project.projectList,
|
||||
groupList: state.group.groupList,
|
||||
projectMsg: state.project.currProject,
|
||||
currGroup: state.group.currGroup
|
||||
};
|
||||
},
|
||||
{
|
||||
updateProject,
|
||||
delProject,
|
||||
getProject,
|
||||
fetchGroupMsg,
|
||||
upsetProject,
|
||||
fetchGroupList,
|
||||
setBreadcrumb
|
||||
}
|
||||
)
|
||||
@withRouter
|
||||
class ProjectMessage extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
protocol: 'http://',
|
||||
projectMsg: {},
|
||||
showDangerOptions: false
|
||||
};
|
||||
}
|
||||
static propTypes = {
|
||||
projectId: PropTypes.number,
|
||||
form: PropTypes.object,
|
||||
updateProject: PropTypes.func,
|
||||
delProject: PropTypes.func,
|
||||
getProject: PropTypes.func,
|
||||
history: PropTypes.object,
|
||||
fetchGroupMsg: PropTypes.func,
|
||||
upsetProject: PropTypes.func,
|
||||
groupList: PropTypes.array,
|
||||
projectList: PropTypes.array,
|
||||
projectMsg: PropTypes.object,
|
||||
fetchGroupList: PropTypes.func,
|
||||
currGroup: PropTypes.object,
|
||||
setBreadcrumb: PropTypes.func
|
||||
};
|
||||
|
||||
// 确认修改
|
||||
handleOk = e => {
|
||||
e.preventDefault();
|
||||
const { form, updateProject, projectMsg, groupList } = this.props;
|
||||
form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
let { tag } = this.tag.state;
|
||||
// let tag = this.refs.tag;
|
||||
tag = tag.filter(val => {
|
||||
return val.name !== '';
|
||||
});
|
||||
let assignValue = Object.assign(projectMsg, values, { tag });
|
||||
|
||||
values.protocol = this.state.protocol.split(':')[0];
|
||||
const group_id = assignValue.group_id;
|
||||
const selectGroup = _.find(groupList, item => {
|
||||
return item._id == group_id;
|
||||
});
|
||||
|
||||
updateProject(assignValue)
|
||||
.then(res => {
|
||||
if (res.payload.data.errcode == 0) {
|
||||
this.props.getProject(this.props.projectId);
|
||||
message.success('修改成功! ');
|
||||
|
||||
// 如果如果项目所在的分组位置发生改变
|
||||
this.props.fetchGroupMsg(group_id);
|
||||
// this.props.history.push('/group');
|
||||
let projectName = htmlFilter(assignValue.name);
|
||||
this.props.setBreadcrumb([
|
||||
{
|
||||
name: selectGroup.group_name,
|
||||
href: '/group/' + group_id
|
||||
},
|
||||
{
|
||||
name: projectName
|
||||
}
|
||||
]);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
form.resetFields();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
tagSubmit = tag => {
|
||||
this.tag = tag;
|
||||
};
|
||||
|
||||
showConfirm = () => {
|
||||
let that = this;
|
||||
confirm({
|
||||
title: '确认删除 ' + that.props.projectMsg.name + ' 项目吗？',
|
||||
content: (
|
||||
<div style={{ marginTop: '10px', fontSize: '13px', lineHeight: '25px' }}>
|
||||
<Alert
|
||||
message="警告：此操作非常危险,会删除该项目下面所有接口，并且无法恢复!"
|
||||
type="warning"
|
||||
banner
|
||||
/>
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<p style={{ marginBottom: '8px' }}>
|
||||
<b>请输入项目名称确认此操作:</b>
|
||||
</p>
|
||||
<Input id="project_name" size="large" />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
onOk() {
|
||||
let groupName = trim(document.getElementById('project_name').value);
|
||||
if (that.props.projectMsg.name !== groupName) {
|
||||
message.error('项目名称有误');
|
||||
return new Promise((resolve, reject) => {
|
||||
reject('error');
|
||||
});
|
||||
} else {
|
||||
that.props.delProject(that.props.projectId).then(res => {
|
||||
if (res.payload.data.errcode == 0) {
|
||||
message.success('删除成功!');
|
||||
that.props.history.push('/group/' + that.props.projectMsg.group_id);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
iconType: 'delete',
|
||||
onCancel() {}
|
||||
});
|
||||
};
|
||||
|
||||
// 修改项目头像的背景颜色
|
||||
changeProjectColor = e => {
|
||||
const { _id, color, icon } = this.props.projectMsg;
|
||||
this.props.upsetProject({ id: _id, color: e.target.value || color, icon }).then(res => {
|
||||
if (res.payload.data.errcode === 0) {
|
||||
this.props.getProject(this.props.projectId);
|
||||
}
|
||||
});
|
||||
};
|
||||
// 修改项目头像的图标
|
||||
changeProjectIcon = e => {
|
||||
const { _id, color, icon } = this.props.projectMsg;
|
||||
this.props.upsetProject({ id: _id, color, icon: e.target.value || icon }).then(res => {
|
||||
if (res.payload.data.errcode === 0) {
|
||||
this.props.getProject(this.props.projectId);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 点击“查看危险操作”按钮
|
||||
toggleDangerOptions = () => {
|
||||
// console.log(this.state.showDangerOptions);
|
||||
this.setState({
|
||||
showDangerOptions: !this.state.showDangerOptions
|
||||
});
|
||||
};
|
||||
|
||||
async UNSAFE_componentWillMount() {
|
||||
await this.props.fetchGroupList();
|
||||
await this.props.fetchGroupMsg(this.props.projectMsg.group_id);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
const { projectMsg, currGroup } = this.props;
|
||||
const mockUrl =
|
||||
location.protocol +
|
||||
'//' +
|
||||
location.hostname +
|
||||
(location.port !== '' ? ':' + location.port : '') +
|
||||
`/mock/${projectMsg._id}${projectMsg.basepath}+$接口请求路径`;
|
||||
let initFormValues = {};
|
||||
const {
|
||||
name,
|
||||
basepath,
|
||||
desc,
|
||||
project_type,
|
||||
group_id,
|
||||
switch_notice,
|
||||
strice,
|
||||
is_json5,
|
||||
tag
|
||||
} = projectMsg;
|
||||
initFormValues = {
|
||||
name,
|
||||
basepath,
|
||||
desc,
|
||||
project_type,
|
||||
group_id,
|
||||
switch_notice,
|
||||
strice,
|
||||
is_json5,
|
||||
tag
|
||||
};
|
||||
|
||||
const colorArr = entries(constants.PROJECT_COLOR);
|
||||
const colorSelector = (
|
||||
<RadioGroup onChange={this.changeProjectColor} value={projectMsg.color} className="color">
|
||||
{colorArr.map((item, index) => {
|
||||
return (
|
||||
<RadioButton
|
||||
key={index}
|
||||
value={item[0]}
|
||||
style={{ backgroundColor: item[1], color: '#fff', fontWeight: 'bold' }}
|
||||
>
|
||||
{item[0] === projectMsg.color ? <Icon type="check" /> : null}
|
||||
</RadioButton>
|
||||
);
|
||||
})}
|
||||
</RadioGroup>
|
||||
);
|
||||
const iconSelector = (
|
||||
<RadioGroup onChange={this.changeProjectIcon} value={projectMsg.icon} className="icon">
|
||||
{constants.PROJECT_ICON.map(item => {
|
||||
return (
|
||||
<RadioButton key={item} value={item} style={{ fontWeight: 'bold' }}>
|
||||
<Icon type={item} />
|
||||
</RadioButton>
|
||||
);
|
||||
})}
|
||||
</RadioGroup>
|
||||
);
|
||||
const selectDisbaled = projectMsg.role === 'owner' || projectMsg.role === 'admin';
|
||||
return (
|
||||
<div>
|
||||
<div className="m-panel">
|
||||
<Row className="project-setting">
|
||||
<Col xs={6} lg={{ offset: 1, span: 3 }} className="setting-logo">
|
||||
<Popover
|
||||
placement="bottom"
|
||||
title={colorSelector}
|
||||
content={iconSelector}
|
||||
trigger="click"
|
||||
overlayClassName="change-project-container"
|
||||
>
|
||||
<Icon
|
||||
type={projectMsg.icon || 'star-o'}
|
||||
className="ui-logo"
|
||||
style={{
|
||||
backgroundColor:
|
||||
constants.PROJECT_COLOR[projectMsg.color] || constants.PROJECT_COLOR.blue
|
||||
}}
|
||||
/>
|
||||
</Popover>
|
||||
</Col>
|
||||
<Col xs={18} sm={15} lg={19} className="setting-intro">
|
||||
<h2 className="ui-title">
|
||||
{(currGroup.group_name || '') + ' / ' + (projectMsg.name || '')}
|
||||
</h2>
|
||||
{/* <p className="ui-desc">{projectMsg.desc}</p> */}
|
||||
</Col>
|
||||
</Row>
|
||||
<hr className="breakline" />
|
||||
<Form>
|
||||
<FormItem {...formItemLayout} label="项目ID">
|
||||
<span>{this.props.projectMsg._id}</span>
|
||||
</FormItem>
|
||||
<FormItem {...formItemLayout} label="项目名称">
|
||||
{getFieldDecorator('name', {
|
||||
initialValue: initFormValues.name,
|
||||
rules: nameLengthLimit('项目')
|
||||
})(<Input />)}
|
||||
</FormItem>
|
||||
<FormItem {...formItemLayout} label="所属分组">
|
||||
{getFieldDecorator('group_id', {
|
||||
initialValue: initFormValues.group_id + '',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择项目所属的分组!'
|
||||
}
|
||||
]
|
||||
})(
|
||||
<Select disabled={!selectDisbaled}>
|
||||
{this.props.groupList.map((item, index) => (
|
||||
<Option value={item._id.toString()} key={index}>
|
||||
{item.group_name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label={
|
||||
<span>
|
||||
接口基本路径
|
||||
<Tooltip title="基本路径为空表示根路径">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
{getFieldDecorator('basepath', {
|
||||
initialValue: initFormValues.basepath,
|
||||
rules: [
|
||||
{
|
||||
required: false,
|
||||
message: '请输入基本路径! '
|
||||
}
|
||||
]
|
||||
})(<Input />)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label={
|
||||
<span>
|
||||
MOCK地址
|
||||
<Tooltip title="具体使用方法请查看文档">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Input disabled value={mockUrl} onChange={() => {}} />
|
||||
</FormItem>
|
||||
|
||||
<FormItem {...formItemLayout} label="描述">
|
||||
{getFieldDecorator('desc', {
|
||||
initialValue: initFormValues.desc,
|
||||
rules: [
|
||||
{
|
||||
required: false
|
||||
}
|
||||
]
|
||||
})(<TextArea rows={8} />)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label={
|
||||
<span>
|
||||
tag 信息
|
||||
<Tooltip title="定义 tag 信息，过滤接口">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<ProjectTag tagMsg={tag} ref={this.tagSubmit} />
|
||||
{/* <Tag tagMsg={tag} ref={this.tagSubmit} /> */}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label={
|
||||
<span>
|
||||
mock严格模式
|
||||
<Tooltip title="开启后 mock 请求会对 query，body form 的必须字段和 json schema 进行校验">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
{getFieldDecorator('strice', {
|
||||
valuePropName: 'checked',
|
||||
initialValue: initFormValues.strice
|
||||
})(<Switch checkedChildren="开" unCheckedChildren="关" />)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label={
|
||||
<span>
|
||||
开启json5
|
||||
<Tooltip title="开启后可在接口 body 和返回值中写 json 字段">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
{getFieldDecorator('is_json5', {
|
||||
valuePropName: 'checked',
|
||||
initialValue: initFormValues.is_json5
|
||||
})(<Switch checkedChildren="开" unCheckedChildren="关" />)}
|
||||
</FormItem>
|
||||
<FormItem {...formItemLayout} label="默认开启消息通知">
|
||||
{getFieldDecorator('switch_notice', {
|
||||
valuePropName: 'checked',
|
||||
initialValue: initFormValues.switch_notice
|
||||
})(<Switch checkedChildren="开" unCheckedChildren="关" />)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem {...formItemLayout} label="权限">
|
||||
{getFieldDecorator('project_type', {
|
||||
rules: [
|
||||
{
|
||||
required: true
|
||||
}
|
||||
],
|
||||
initialValue: initFormValues.project_type
|
||||
})(
|
||||
<RadioGroup>
|
||||
<Radio value="private" className="radio">
|
||||
<Icon type="lock" />私有<br />
|
||||
<span className="radio-desc">只有组长和项目开发者可以索引并查看项目信息</span>
|
||||
</Radio>
|
||||
<br />
|
||||
{projectMsg.role === 'admin' && <Radio value="public" className="radio">
|
||||
<Icon type="unlock" />公开<br />
|
||||
<span className="radio-desc">任何人都可以索引并查看项目信息</span>
|
||||
</Radio>}
|
||||
|
||||
</RadioGroup>
|
||||
)}
|
||||
</FormItem>
|
||||
</Form>
|
||||
|
||||
<div className="btnwrap-changeproject">
|
||||
<Button
|
||||
className="m-btn btn-save"
|
||||
icon="save"
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={this.handleOk}
|
||||
>
|
||||
保 存
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 只有组长和管理员有权限删除项目 */}
|
||||
{projectMsg.role === 'owner' || projectMsg.role === 'admin' ? (
|
||||
<div className="danger-container">
|
||||
<div className="title">
|
||||
<h2 className="content">
|
||||
<Icon type="exclamation-circle-o" /> 危险操作
|
||||
</h2>
|
||||
<Button onClick={this.toggleDangerOptions}>
|
||||
查 看<Icon type={this.state.showDangerOptions ? 'up' : 'down'} />
|
||||
</Button>
|
||||
</div>
|
||||
{this.state.showDangerOptions ? (
|
||||
<Card hoverable={true} className="card-danger">
|
||||
<div className="card-danger-content">
|
||||
<h3>删除项目</h3>
|
||||
<p>项目一旦删除，将无法恢复数据，请慎重操作！</p>
|
||||
<p>只有组长和管理员有权限删除项目。</p>
|
||||
</div>
|
||||
<Button
|
||||
type="danger"
|
||||
ghost
|
||||
className="card-danger-btn"
|
||||
onClick={this.showConfirm}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Card>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Form.create()(ProjectMessage);
|
||||
Reference in New Issue
Block a user