2017-08-17 12:09:08 +08:00
|
|
|
import React, { Component } from 'react'
|
2017-08-17 14:35:00 +08:00
|
|
|
import { Form, Input, Icon, Tooltip, Select, Button, Row, Col, message } from 'antd';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { updateProject, fetchProjectList, delProject, changeUpdateModal, changeTableLoading } from '../../../reducer/modules/project';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
const { TextArea } = Input;
|
|
|
|
const FormItem = Form.Item;
|
|
|
|
const Option = Select.Option;
|
2017-08-17 12:09:08 +08:00
|
|
|
|
2017-08-17 14:35:00 +08:00
|
|
|
// layout
|
|
|
|
const formItemLayout = {
|
|
|
|
labelCol: {
|
2017-08-17 15:34:43 +08:00
|
|
|
lg: { span: 3 },
|
2017-08-17 14:35:00 +08:00
|
|
|
xs: { span: 24 },
|
|
|
|
sm: { span: 6 }
|
|
|
|
},
|
|
|
|
wrapperCol: {
|
2017-08-17 15:34:43 +08:00
|
|
|
lg: { span: 21 },
|
2017-08-17 14:35:00 +08:00
|
|
|
xs: { span: 24 },
|
|
|
|
sm: { span: 14 }
|
2017-08-17 15:34:43 +08:00
|
|
|
},
|
|
|
|
className: 'form-item'
|
2017-08-17 14:35:00 +08:00
|
|
|
};
|
|
|
|
const formItemLayoutWithOutLabel = {
|
|
|
|
wrapperCol: {
|
|
|
|
xs: { span: 24, offset: 0 },
|
|
|
|
sm: { span: 20, offset: 6 }
|
|
|
|
}
|
|
|
|
};
|
|
|
|
let uuid = 0;
|
|
|
|
|
|
|
|
@connect(
|
|
|
|
state => {
|
|
|
|
return {
|
|
|
|
projectList: state.project.projectList,
|
|
|
|
handleUpdateIndex: state.project.handleUpdateIndex,
|
|
|
|
tableLoading: state.project.tableLoading,
|
|
|
|
currGroup: state.group.currGroup
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
fetchProjectList,
|
|
|
|
updateProject,
|
|
|
|
delProject,
|
|
|
|
changeUpdateModal,
|
|
|
|
changeTableLoading
|
|
|
|
}
|
|
|
|
)
|
2017-08-17 12:09:08 +08:00
|
|
|
class Setting extends Component {
|
2017-08-17 14:35:00 +08:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
protocol: 'http:\/\/',
|
|
|
|
envProtocolChange: 'http:\/\/'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
static propTypes = {
|
|
|
|
form: PropTypes.object,
|
|
|
|
fetchProjectList: PropTypes.func,
|
|
|
|
updateProject: PropTypes.func,
|
|
|
|
delProject: PropTypes.func,
|
|
|
|
changeUpdateModal: PropTypes.func,
|
|
|
|
changeTableLoading: PropTypes.func,
|
|
|
|
projectList: PropTypes.array,
|
|
|
|
currGroup: PropTypes.object,
|
|
|
|
handleUpdateIndex: PropTypes.number
|
|
|
|
}
|
|
|
|
|
|
|
|
// 修改线上域名的协议类型 (http/https)
|
|
|
|
protocolChange = (value) => {
|
|
|
|
this.setState({
|
|
|
|
protocol: value
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
handleCancel = () => {
|
|
|
|
this.props.form.resetFields();
|
|
|
|
this.props.changeUpdateModal(false, -1);
|
|
|
|
}
|
|
|
|
|
|
|
|
// 确认修改
|
|
|
|
handleOk = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
const { form, updateProject, changeUpdateModal, currGroup, projectList, handleUpdateIndex, fetchProjectList, changeTableLoading } = this.props;
|
|
|
|
form.validateFields((err, values) => {
|
|
|
|
if (!err) {
|
|
|
|
// console.log(projectList[handleUpdateIndex]);
|
|
|
|
let assignValue = Object.assign(projectList[handleUpdateIndex], values);
|
|
|
|
values.protocol = this.state.protocol.split(':')[0];
|
|
|
|
assignValue.env = assignValue.envs.map((item, index) => {
|
|
|
|
return {
|
|
|
|
name: values['envs-name-' + index],
|
|
|
|
domain: values['envs-protocol-' + index] + values['envs-domain-' + index]
|
|
|
|
}
|
|
|
|
});
|
|
|
|
// console.log(assignValue);
|
|
|
|
|
|
|
|
changeTableLoading(true);
|
|
|
|
updateProject(assignValue).then((res) => {
|
|
|
|
if (res.payload.data.errcode == 0) {
|
|
|
|
changeUpdateModal(false, -1);
|
|
|
|
message.success('修改成功! ');
|
|
|
|
fetchProjectList(currGroup._id).then(() => {
|
|
|
|
changeTableLoading(false);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
changeTableLoading(false);
|
|
|
|
message.error(res.payload.data.errmsg);
|
|
|
|
}
|
|
|
|
}).catch(() => {
|
|
|
|
changeTableLoading(false);
|
|
|
|
});
|
|
|
|
form.resetFields();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// 项目的修改操作 - 删除一项环境配置
|
|
|
|
remove = (id) => {
|
|
|
|
const { form } = this.props;
|
|
|
|
// can use data-binding to get
|
|
|
|
const envs = form.getFieldValue('envs');
|
|
|
|
// We need at least one passenger
|
|
|
|
if (envs.length === 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// can use data-binding to set
|
|
|
|
form.setFieldsValue({
|
|
|
|
envs: envs.filter(key => {
|
|
|
|
const realKey = key._id ? key._id : key
|
|
|
|
return realKey !== id;
|
|
|
|
})
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// 项目的修改操作 - 添加一项环境配置
|
|
|
|
add = () => {
|
|
|
|
uuid++;
|
|
|
|
const { form } = this.props;
|
|
|
|
// can use data-binding to get
|
|
|
|
const envs = form.getFieldValue('envs');
|
|
|
|
const nextKeys = envs.concat(uuid);
|
|
|
|
// can use data-binding to set
|
|
|
|
// important! notify form to detect changes
|
|
|
|
form.setFieldsValue({
|
|
|
|
envs: nextKeys
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-08-17 12:09:08 +08:00
|
|
|
render () {
|
2017-08-17 14:35:00 +08:00
|
|
|
const { getFieldDecorator, getFieldValue } = this.props.form;
|
|
|
|
// const that = this;
|
|
|
|
const { projectList, handleUpdateIndex } = this.props;
|
2017-08-17 15:34:43 +08:00
|
|
|
console.log(this.props);
|
2017-08-17 14:35:00 +08:00
|
|
|
let initFormValues = {};
|
|
|
|
let envMessage = [];
|
|
|
|
// 如果列表存在且用户点击修改按钮时,设置表单默认值
|
|
|
|
if (projectList.length !== 0 && handleUpdateIndex !== -1) {
|
|
|
|
// console.log(projectList[handleUpdateIndex]);
|
|
|
|
const { name, basepath, desc, env } = projectList[handleUpdateIndex];
|
|
|
|
initFormValues = { name, basepath, desc, env };
|
|
|
|
if (env.length !== 0) {
|
|
|
|
envMessage = env;
|
|
|
|
}
|
|
|
|
initFormValues.prd_host = projectList[handleUpdateIndex].prd_host;
|
|
|
|
initFormValues.prd_protocol = projectList[handleUpdateIndex].protocol + '\:\/\/';
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
getFieldDecorator('envs', { initialValue: envMessage });
|
|
|
|
const envs = getFieldValue('envs');
|
|
|
|
const formItems = envs.map((k, index) => {
|
|
|
|
const secondIndex = 'next' + index; // 为保证key的唯一性
|
|
|
|
return (
|
|
|
|
<Row key={index} type="flex" justify="space-between" align={index === 0 ? 'middle' : 'top'}>
|
|
|
|
<Col span={10} offset={2}>
|
|
|
|
<FormItem
|
|
|
|
label={index === 0 ? (
|
|
|
|
<span>环境名称</span>) : ''}
|
|
|
|
required={false}
|
|
|
|
key={index}
|
|
|
|
>
|
|
|
|
{getFieldDecorator(`envs-name-${index}`, {
|
|
|
|
validateTrigger: ['onChange', 'onBlur'],
|
|
|
|
initialValue: envMessage.length !== 0 ? k.name : '',
|
|
|
|
rules: [{
|
|
|
|
required: false,
|
|
|
|
whitespace: true,
|
|
|
|
validator(rule, value, callback) {
|
|
|
|
if (value) {
|
|
|
|
if (value.length === 0) {
|
|
|
|
callback('请输入环境域名');
|
|
|
|
} else if (!/\S/.test(value)) {
|
|
|
|
callback('请输入环境域名');
|
|
|
|
} else if (/prd/.test(value)) {
|
|
|
|
callback('环境域名不能是"prd"');
|
|
|
|
} else {
|
|
|
|
return callback();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
callback('请输入环境域名');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}]
|
|
|
|
})(
|
|
|
|
<Input placeholder="请输入环境名称" style={{ width: '90%', marginRight: 8 }} />
|
|
|
|
)}
|
|
|
|
</FormItem>
|
|
|
|
</Col>
|
|
|
|
<Col span={10}>
|
|
|
|
<FormItem
|
|
|
|
label={index === 0 ? (
|
|
|
|
<span>环境域名</span>) : ''}
|
|
|
|
required={false}
|
|
|
|
key={secondIndex}
|
|
|
|
>
|
|
|
|
{getFieldDecorator(`envs-domain-${index}`, {
|
|
|
|
validateTrigger: ['onChange', 'onBlur'],
|
|
|
|
initialValue: envMessage.length !== 0 && k.domain ? k.domain.split('\/\/')[1] : '',
|
|
|
|
rules: [{
|
|
|
|
required: false,
|
|
|
|
whitespace: true,
|
|
|
|
message: "请输入环境域名",
|
|
|
|
validator(rule, value, callback) {
|
|
|
|
if (value) {
|
|
|
|
if (value.length === 0) {
|
|
|
|
callback('请输入环境域名');
|
|
|
|
} else if (!/\S/.test(value)) {
|
|
|
|
callback('请输入环境域名');
|
|
|
|
} else {
|
|
|
|
return callback();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
callback('请输入环境域名');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}]
|
|
|
|
})(
|
|
|
|
<Input placeholder="请输入环境域名" style={{ width: '90%', marginRight: 8 }} addonBefore={
|
|
|
|
getFieldDecorator(`envs-protocol-${index}`, {
|
|
|
|
initialValue: envMessage.length !== 0 && k.domain ? k.domain.split('\/\/')[0] + '\/\/' : 'http\:\/\/',
|
|
|
|
rules: [{
|
|
|
|
required: true
|
|
|
|
}]
|
|
|
|
})(
|
|
|
|
<Select>
|
|
|
|
<Option value="http://">{'http:\/\/'}</Option>
|
|
|
|
<Option value="https://">{'https:\/\/'}</Option>
|
|
|
|
</Select>
|
|
|
|
)} />
|
|
|
|
)}
|
|
|
|
</FormItem>
|
|
|
|
</Col>
|
|
|
|
<Col span={2}>
|
|
|
|
{/* 新增的项中,只有最后一项有删除按钮 */}
|
|
|
|
{(envs.length > 0 && k._id) || (envs.length == index + 1) ? (
|
|
|
|
<Icon
|
|
|
|
className="dynamic-delete-button"
|
|
|
|
type="minus-circle-o"
|
|
|
|
onClick={() => {
|
|
|
|
return this.remove(k._id ? k._id : k);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
);
|
|
|
|
});
|
2017-08-17 12:09:08 +08:00
|
|
|
return (
|
2017-08-17 14:35:00 +08:00
|
|
|
<div className="g-row m-container">
|
|
|
|
<Form>
|
|
|
|
<FormItem
|
|
|
|
{...formItemLayout}
|
|
|
|
label="项目名称"
|
|
|
|
>
|
|
|
|
{getFieldDecorator('name', {
|
|
|
|
initialValue: initFormValues.name,
|
|
|
|
rules: [{
|
|
|
|
required: true, message: '请输入项目名称!'
|
|
|
|
}]
|
|
|
|
})(
|
|
|
|
<Input />
|
|
|
|
)}
|
|
|
|
</FormItem>
|
|
|
|
|
|
|
|
<FormItem
|
|
|
|
{...formItemLayout}
|
|
|
|
label={(
|
|
|
|
<span>
|
|
|
|
线上域名
|
|
|
|
<Tooltip title="将根据配置的线上域名访问mock数据">
|
|
|
|
<Icon type="question-circle-o" />
|
|
|
|
</Tooltip>
|
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
{getFieldDecorator('prd_host', {
|
|
|
|
initialValue: initFormValues.prd_host,
|
|
|
|
rules: [{
|
|
|
|
required: true, message: '请输入项目线上域名!'
|
|
|
|
}]
|
|
|
|
})(
|
|
|
|
<Input addonBefore={(
|
|
|
|
<Select defaultValue={initFormValues.prd_protocol} onChange={this.protocolChange}>
|
|
|
|
<Option value="http://">{'http:\/\/'}</Option>
|
|
|
|
<Option value="https://">{'https:\/\/'}</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="描述"
|
|
|
|
>
|
|
|
|
{getFieldDecorator('desc', {
|
|
|
|
initialValue: initFormValues.desc,
|
|
|
|
rules: [{
|
|
|
|
required: false, message: '请输入描述!'
|
|
|
|
}]
|
|
|
|
})(
|
|
|
|
<TextArea rows={4} />
|
|
|
|
)}
|
|
|
|
</FormItem>
|
|
|
|
|
|
|
|
{formItems}
|
|
|
|
<FormItem {...formItemLayoutWithOutLabel}>
|
|
|
|
<Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
|
|
|
|
<Icon type="plus" /> 添加环境配置
|
|
|
|
</Button>
|
|
|
|
</FormItem>
|
|
|
|
</Form>
|
2017-08-17 12:09:08 +08:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-17 14:35:00 +08:00
|
|
|
export default Form.create()(Setting);
|