feat: 在项目设置处增加自定义tag标签，包括tag 名称和tag 描述

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={

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;

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;
+  }
+}

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,

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