From 81bf62fb980a75dac5d609cac5318f2ebe8ece61 Mon Sep 17 00:00:00 2001
From: "gaoxiaolin.gao" <gaoxiaolin.gao@qunar.com>
Date: Wed, 15 Aug 2018 16:56:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=E9=A1=B9=E7=9B=AE=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=A4=84=E5=A2=9E=E5=8A=A0=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?tag=E6=A0=87=E7=AD=BE=EF=BC=8C=E5=8C=85=E6=8B=ACtag=20=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0=E5=92=8Ctag=20=E6=8F=8F=E8=BF=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Setting/ProjectMessage/ProjectMessage.js  |  53 +++++++-
 .../Setting/ProjectMessage/ProjectTag.js      | 121 ++++++++++++++++++
 .../Setting/ProjectMessage/ProjectTag.scss    |  18 +++
 client/reducer/modules/project.js             |   5 +-
 server/models/project.js                      |   5 +-
 5 files changed, 195 insertions(+), 7 deletions(-)
 create mode 100644 client/containers/Project/Setting/ProjectMessage/ProjectTag.js
 create mode 100644 client/containers/Project/Setting/ProjectMessage/ProjectTag.scss

diff --git a/client/containers/Project/Setting/ProjectMessage/ProjectMessage.js b/client/containers/Project/Setting/ProjectMessage/ProjectMessage.js
index 5d73fb64..3f660309 100755
--- a/client/containers/Project/Setting/ProjectMessage/ProjectMessage.js
+++ b/client/containers/Project/Setting/ProjectMessage/ProjectMessage.js
@@ -37,6 +37,7 @@ const confirm = Modal.confirm;
 import { nameLengthLimit, entries, trim } from '../../../../common';
 import '../Setting.scss';
 import _ from 'underscore';
+import ProjectTag from './ProjectTag.js';
 // layout
 const formItemLayout = {
   labelCol: {
@@ -106,12 +107,19 @@ class ProjectMessage extends Component {
     const { form, updateProject, projectMsg, groupList } = this.props;
     form.validateFields((err, values) => {
       if (!err) {
-        let assignValue = Object.assign(projectMsg, values);
+        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) {
@@ -138,6 +146,10 @@ class ProjectMessage extends Component {
     });
   };
 
+  tagSubmit = tag => {
+    this.tag = tag;
+  };
+
   showConfirm = () => {
     let that = this;
     confirm({
@@ -221,8 +233,28 @@ class ProjectMessage extends Component {
       (location.port !== '' ? ':' + location.port : '') +
       `/mock/${projectMsg._id}${projectMsg.basepath}+$接口请求路径`;
     let initFormValues = {};
-    const { name, basepath, desc, project_type, group_id, switch_notice, strice, is_json5 } = projectMsg;
-    initFormValues = { name, basepath, desc, project_type, group_id, switch_notice, strice , is_json5};
+    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 = (
@@ -358,6 +390,21 @@ class ProjectMessage extends Component {
                 ]
               })(<TextArea rows={8} />)}
             </FormItem>
+
+            <FormItem
+              {...formItemLayout}
+              label={
+                <span>
+                  tag 信息&nbsp;
+                  <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={
diff --git a/client/containers/Project/Setting/ProjectMessage/ProjectTag.js b/client/containers/Project/Setting/ProjectMessage/ProjectTag.js
new file mode 100644
index 00000000..fc395901
--- /dev/null
+++ b/client/containers/Project/Setting/ProjectMessage/ProjectTag.js
@@ -0,0 +1,121 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Icon, Row, Col, Input } from 'antd';
+// const FormItem = Form.Item;
+import './ProjectTag.scss';
+class ProjectTag extends Component {
+  static propTypes = {
+    tagMsg: PropTypes.array,
+    // form: PropTypes.object,
+    tagSubmit: PropTypes.func
+  };
+  constructor(props) {
+    super(props);
+    // let newValue = this.handleInit(props.tagMsg);
+    this.state = {
+      tag: [{ name: '', desc: '' }]
+    };
+  }
+
+  initState(curdata) {
+    let tag = [
+      {
+        name: '',
+        desc: ''
+      }
+    ];
+    if (curdata && curdata.length !== 0) {
+      curdata.forEach(item => {
+        tag.unshift(item);
+      });
+    }
+
+    return { tag };
+  }
+  componentDidMount() {
+    this.handleInit(this.props.tagMsg);
+  }
+
+  handleInit(data) {
+    // this.props.form.resetFields();
+    let newValue = this.initState(data);
+    // return newValue;
+    this.setState({ ...newValue });
+  }
+
+  addHeader = (val, index, name, label) => {
+    let newValue = {};
+    newValue[name] = [].concat(this.state[name]);
+    newValue[name][index][label] = val;
+    let nextData = this.state[name][index + 1];
+    if (!(nextData && typeof nextData === 'object')) {
+      let data = { name: '', desc: '' };
+      newValue[name] = [].concat(this.state[name], data);
+    }
+    this.setState(newValue);
+  };
+
+  delHeader = (key, name) => {
+    // let curValue = this.props.form.getFieldValue(name);
+    let curValue = this.state[name];
+    let newValue = {};
+    newValue[name] = curValue.filter((val, index) => {
+      return index !== key;
+    });
+    // this.props.form.setFieldsValue(newValue);
+    this.setState(newValue);
+  };
+
+  handleChange = (val, index, name, label) => {
+    let newValue = this.state;
+    newValue[name][index][label] = val;
+    this.setState(newValue);
+  };
+
+  render() {
+    const commonTpl = (item, index, name) => {
+      const length = this.state[name].length - 1;
+      return (
+        <Row key={index} className="tag-item">
+          <Col span={6} className="item-name">
+            <Input
+              placeholder={`请输入 ${name} 名称`}
+              // style={{ width: '200px' }}
+              value={item.name || ''}
+              onChange={e => this.addHeader(e.target.value, index, name, 'name')}
+            />
+          </Col>
+          <Col span={12}>
+            <Input
+              placeholder="请输入tag 描述信息"
+              style={{ width: '90%', marginRight: 8 }}
+              onChange={e => this.handleChange(e.target.value, index, name, 'desc')}
+              value={item.desc || ''}
+            />
+          </Col>
+          <Col span={2} className={index === length ? ' tag-last-row' : null}>
+            {/* 新增的项中，只有最后一项没有有删除按钮 */}
+            <Icon
+              className="dynamic-delete-button delete"
+              type="delete"
+              onClick={e => {
+                e.stopPropagation();
+                this.delHeader(index, name);
+              }}
+            />
+          </Col>
+        </Row>
+      );
+    };
+
+    return (
+      <div className="project-tag">
+        {this.state.tag.map((item, index) => {
+          return commonTpl(item, index, 'tag');
+        })}
+      </div>
+    );
+  }
+}
+
+export default ProjectTag;
diff --git a/client/containers/Project/Setting/ProjectMessage/ProjectTag.scss b/client/containers/Project/Setting/ProjectMessage/ProjectTag.scss
new file mode 100644
index 00000000..99b36819
--- /dev/null
+++ b/client/containers/Project/Setting/ProjectMessage/ProjectTag.scss
@@ -0,0 +1,18 @@
+
+.project-tag {
+  .item-name {
+    margin-right: 16px;
+  }
+
+  .delete {
+    font-size: 16px;
+  }
+
+  .tag-item {
+    margin-bottom: 8px;
+  }
+
+  .tag-last-row {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/client/reducer/modules/project.js b/client/reducer/modules/project.js
index 7e937a89..582232a4 100755
--- a/client/reducer/modules/project.js
+++ b/client/reducer/modules/project.js
@@ -205,7 +205,7 @@ export function addProject(data) {
 
 // 修改项目
 export function updateProject(data) {
-  const { name, project_type, basepath, desc, _id, env, group_id, switch_notice, strice, is_json5 } = data;
+  const { name, project_type, basepath, desc, _id, env, group_id, switch_notice, strice, is_json5, tag } = data;
   const param = {
     name,
     project_type,
@@ -216,7 +216,8 @@ export function updateProject(data) {
     env,
     group_id,
     strice,
-    is_json5
+    is_json5,
+    tag
   };
   return {
     type: PROJECT_UPDATE,
diff --git a/server/models/project.js b/server/models/project.js
index 32bf7963..e7e42276 100755
--- a/server/models/project.js
+++ b/server/models/project.js
@@ -34,7 +34,8 @@ class projectModel extends baseModel {
       project_mock_script: String,
       is_mock_open: { type: Boolean, default: false },
       strice: { type: Boolean, default: false },
-      is_json5: { type: Boolean, default: true }
+      is_json5: { type: Boolean, default: true },
+      tag: [{name: String, desc: String}]
     };
   }
 
@@ -84,7 +85,7 @@ class projectModel extends baseModel {
   getBaseInfo(id, select) {
     select =
       select ||
-      '_id uid name basepath switch_notice desc group_id project_type env icon color add_time up_time pre_script after_script project_mock_script is_mock_open strice is_json5';
+      '_id uid name basepath switch_notice desc group_id project_type env icon color add_time up_time pre_script after_script project_mock_script is_mock_open strice is_json5 tag';
     return this.model
       .findOne({
         _id: id