From 08a91f7c41679588a0d2d100f67bcdad2c7eba77 Mon Sep 17 00:00:00 2001 From: "wenbo.dong" Date: Fri, 18 Aug 2017 11:39:08 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20setting=E9=A1=B5=E9=9D=A2=E5=B8=83?= =?UTF-8?q?=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Setting/ProjectMember/ProjectMember.js | 17 + .../Setting/ProjectMessage/ProjectMessage.js | 359 ++++++++++++++++++ client/containers/Project/Setting/Setting.js | 358 +---------------- 3 files changed, 388 insertions(+), 346 deletions(-) create mode 100644 client/containers/Project/Setting/ProjectMember/ProjectMember.js create mode 100644 client/containers/Project/Setting/ProjectMessage/ProjectMessage.js diff --git a/client/containers/Project/Setting/ProjectMember/ProjectMember.js b/client/containers/Project/Setting/ProjectMember/ProjectMember.js new file mode 100644 index 00000000..75909359 --- /dev/null +++ b/client/containers/Project/Setting/ProjectMember/ProjectMember.js @@ -0,0 +1,17 @@ +import React, { Component } from 'react' +import '../Setting.scss'; + +class ProjectMember extends Component { + + + render () { + + return ( +
+ Test +
+ ) + } +} + +export default ProjectMember; diff --git a/client/containers/Project/Setting/ProjectMessage/ProjectMessage.js b/client/containers/Project/Setting/ProjectMessage/ProjectMessage.js new file mode 100644 index 00000000..1fa560fc --- /dev/null +++ b/client/containers/Project/Setting/ProjectMessage/ProjectMessage.js @@ -0,0 +1,359 @@ +import React, { Component } from 'react' +import { Form, Input, Icon, Tooltip, Select, Button, Row, Col, message, Card } from 'antd'; +import PropTypes from 'prop-types'; +import { updateProject, delProject, getProjectMsg } from '../../../../reducer/modules/project'; +import { fetchGroupMsg } from '../../../../reducer/modules/group'; +import { connect } from 'react-redux'; +const { TextArea } = Input; +const FormItem = Form.Item; +const Option = Select.Option; +import '../Setting.scss'; + +// layout +const formItemLayout = { + labelCol: { + lg: { span: 3 }, + xs: { span: 24 }, + sm: { span: 6 } + }, + wrapperCol: { + lg: { span: 21 }, + xs: { span: 24 }, + sm: { span: 14 } + }, + className: 'form-item' +}; +let uuid = 0; // 环境配置的计数 + +@connect( + state => { + return { + projectList: state.project.projectList, + projectMsg: state.project.projectMsg + } + }, + { + updateProject, + delProject, + getProjectMsg, + fetchGroupMsg + } +) +class ProjectMessage extends Component { + constructor(props) { + super(props); + this.state = { + protocol: 'http:\/\/', + envProtocolChange: 'http:\/\/', + projectMsg: {} + } + } + static propTypes = { + projectId: PropTypes.number, + form: PropTypes.object, + updateProject: PropTypes.func, + delProject: PropTypes.func, + getProjectMsg: PropTypes.func, + fetchGroupMsg: PropTypes.func, + projectList: PropTypes.array, + projectMsg: PropTypes.object + } + + // 修改线上域名的协议类型 (http/https) + protocolChange = (value) => { + this.setState({ + protocol: value, + currGroup: '' + }) + } + + // 确认修改 + handleOk = (e) => { + e.preventDefault(); + const { form, updateProject, projectMsg } = this.props; + form.validateFields((err, values) => { + if (!err) { + let assignValue = Object.assign(projectMsg, 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); + + updateProject(assignValue).then((res) => { + console.log(res); + if (res.payload.data.errcode == 0) { + message.success('修改成功! '); + } else { + message.error(res.payload.data.errmsg); + } + }).catch(() => { + }); + 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 + }); + } + + handleDelete = () => { + console.log(this.props); // 出问题了 + this.props.delProject(this.props.projectId).then((res) => { + if (res.payload.data.errcode == 0) { + message.success('删除成功!'); + } + }); + } + + async componentWillMount() { + await this.props.getProjectMsg(this.props.projectId); + const groupMsg = await this.props.fetchGroupMsg(this.props.projectMsg.group_id); + this.setState({ + currGroup: groupMsg.payload.data.data.group_name + }) + } + + render () { + const { getFieldDecorator, getFieldValue } = this.props.form; + const { projectMsg } = this.props; + let initFormValues = {}; + let envMessage = []; + const { name, basepath, desc, env } = projectMsg; + initFormValues = { name, basepath, desc, env }; + if (env && env.length !== 0) { + envMessage = env; + } + + getFieldDecorator('envs', { initialValue: envMessage }); + const envs = getFieldValue('envs'); + const envSettingItems = envs.map((k, index) => { + const secondIndex = 'next' + index; // 为保证key的唯一性 + return ( + + + 环境名称) : ''} + 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('请输入环境域名'); + } + } + }] + })( + + )} + + + + 环境域名) : ''} + 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('请输入环境域名'); + } + } + }] + })( + + + + + )} /> + )} + + + + {/* 新增的项中，只有最后一项有删除按钮 */} + {(envs.length > 0 && k._id) || (envs.length == index + 1) ? ( + { + return this.remove(k._id ? k._id : k); + }} + /> + ) : null} + + + ); + }); + return ( +
+
+ + {getFieldDecorator('name', { + initialValue: initFormValues.name, + rules: [{ + required: true, message: '请输入项目名称!' + }] + })( + + )} + + + + + + + + 基本路径  + + + + + )} + > + {getFieldDecorator('basepath', { + initialValue: initFormValues.basepath, + rules: [{ + required: false, message: '请输入项目基本路径! ' + }] + })( + + )} + + + + {getFieldDecorator('desc', { + initialValue: initFormValues.desc, + rules: [{ + required: false, message: '请输入描述!' + }] + })( +