添加文件生成功能，支持自定义文件模板

exts/yapi-plugin-gen-java-services/Services/codeTemplate.js

@@ -1,23 +1,27 @@
-import React, {Component} from 'react';
+import React, {Component, Fragment} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import {Form, Button, message} from 'antd';
+import {Form, Button, message, Tabs, Modal, Input} from 'antd';
 import {handleSwaggerUrlData} from 'client/reducer/modules/project';
 
+
+const {TabPane} = Tabs;
 const FormItem = Form.Item;
+const {confirm} = Modal;
+
 import axios from 'axios';
 import AceEditor from "../../../client/components/AceEditor/AceEditor";
-// layout
+
 const formItemLayout = {
   labelCol: {
-    lg: {span: 5},
-    xs: {span: 24},
-    sm: {span: 10}
+    lg: {span: 1},
+    xs: {span: 3},
+    sm: {span: 2}
   },
   wrapperCol: {
-    lg: {span: 16},
-    xs: {span: 24},
-    sm: {span: 12}
+    lg: {span: 22},
+    xs: {span: 18},
+    sm: {span: 20}
   },
   className: 'form-item'
 };
@@ -50,22 +54,35 @@ export default class CodeGenTemplate extends Component {
     handleSwaggerUrlData: PropTypes.func
   };
 
+  getAddTemplate(isDefault = false) {
+    let data = {tag_desc: "新增模板", tag: 'add'}
+    if (isDefault) {
+      data['tag_desc_t'] = '默认'
+      data['tag_t'] = 'default'
+    }
+    return data;
+  }
+
   constructor(props) {
     super(props);
     this.state = {
-      config_data: {template_data: "", _id: null}
+      config_data: {template_data: "", _id: null},
+      templateList: [],
+      activeKey: "default"
     };
   }
 
-  handleSubmit = async () => {
+  handleSubmit = async (data) => {
     const {form, projectId} = this.props;
     let params = {
       project_id: projectId,
-      template_data: this.state.config_data.template_data,
+      tag: data.tag_t || data.tag,
+      tag_desc: data.tag_desc_t || data.tag_desc,
+      template_data: data.template_data,
       uid: this.props.projectMsg.uid
     };
-    if (this.state.config_data._id) {
-      params.id = this.state.config_data._id;
+    if (data._id) {
+      params.id = data._id;
     }
     form.validateFields(async (err, values) => {
       if (!err) {
@@ -73,6 +90,7 @@ export default class CodeGenTemplate extends Component {
         await axios.post('/api/plugin/template/save', assignValue).then(res => {
           if (res.data.errcode === 0) {
             message.success('保存成功');
+            this.getSyncData();
           } else {
             message.error(res.data.errmsg);
           }
@@ -86,7 +104,8 @@ export default class CodeGenTemplate extends Component {
   UNSAFE_componentWillMount() {
     //查询同步任务
     this.setState({
-      config_data: {}
+      config_data: {template_data: "", _id: null},
+      templateList: []
     });
     this.getSyncData();
   }
@@ -95,50 +114,158 @@ export default class CodeGenTemplate extends Component {
     let projectId = this.props.projectMsg._id;
     let result = await axios.get('/api/plugin/template/get?projectId=' + projectId);
     if (result.data.errcode === 0) {
-      if (result.data.data) {
-        let templateData = result.data.data.find(it => it.tag === "default")
-        if (templateData == null) {
-          templateData = result.data.data[0]
+      if (result.data.data && result.data.data.length) {
+        let defaultTemplate = result.data.data.find(it => it.tag === "default")
+        if (defaultTemplate == null) {
+          defaultTemplate = result.data.data[0] || {}
         }
         this.setState({
-          config_data: templateData
+          defaultTemplate,
+          activeKey: defaultTemplate.tag,
+          templateList: result.data.data
+        });
+      } else {
+        this.setState({
+          activeKey: "add",
+          templateList: [this.getAddTemplate(true)]
         });
       }
     }
   }
 
-  handleTemplateInput = e => {
-    let config_data = this.state.config_data;
-    config_data.template_data = e.text;
-    this.setState({
-      config_data: config_data
-    });
+  handleTemplateInput = (e, data) => {
+    data.template_data = e.text;
+    this.setState()
   };
 
+  onTabChange(key) {
+    this.setState({
+      activeKey: key
+    })
+  }
+
+  async onTabEdit(targetKey, action) {
+    // this[action](targetKey);
+    let templateData = this.state.templateList.find(it => it.tag === targetKey)
+    console.log(targetKey, action, templateData)
+    confirm({
+      title: '是否要删除此模板？',
+      content: '删除后将无法找回，是否继续',
+      onOk: async () => {
+        await axios.delete('/api/plugin/template/' + templateData._id);
+        message.success("删除成功")
+        this.getSyncData();
+      },
+      onCancel() {
+      }
+    });
+  }
+
+  addNewTemplate() {
+    if (this.state.templateList.find(it => it.tag === 'add')) {
+      message.info("请先保存新增的模板")
+      this.setState({
+        activeKey: 'add'
+      })
+      return;
+    }
+    let data = [...this.state.templateList, this.getAddTemplate()];
+    console.log(data)
+    this.setState({
+      templateList: data,
+      activeKey: 'add'
+    })
+  }
+
 
   render() {
-    const templateEditor = (
-      <FormItem {...formItemLayout} label="默认模板">
-        <AceEditor
-          data={this.state.config_data.template_data}
-          onChange={this.handleTemplateInput}
-          style={{minHeight: '300px'}}
-        />
+    const {getFieldDecorator} = this.props.form;
 
-      </FormItem>
+    let panes = [];
+    console.log("this.state.templateList", this.state.templateList)
+
+    if (this.state.templateList) {
+      panes = this.state.templateList.map(it => {
+        return {
+          title: it.tag_desc,
+          key: it.tag,
+          content: it.tag,
+          data: it
+        }
+      })
+    }
+
+    let newTemplateData = this.state.templateList.find(it => it.tag === 'add');
+    let onFieldChange = (e, field) => {
+      newTemplateData[field] = e.text
+    }
+
+    const addContent = this.state.activeKey === 'add' && newTemplateData.tag_t !== 'default' && (
+      <Fragment key="add">
+        <FormItem label="文件名" {...formItemLayout}>
+          {getFieldDecorator('tag', {
+            rules: [
+              {
+                required: true,
+                message: '文件名必填哦，用来标识你的每个不同的模板'
+              }
+            ],
+            initialValue: newTemplateData.tag_t
+          })(<Input onChange={(e) => onFieldChange(e, "tag_t")}/>)}
+        </FormItem>
+        <FormItem label="文件描述" {...formItemLayout}>
+          {getFieldDecorator('tag_desc', {
+            rules: [
+              {
+                required: true,
+                message: '文件描述必填哦'
+              }
+            ],
+            initialValue: newTemplateData.tag_desc_t
+          })(<Input onChange={(e) => onFieldChange(e, "tag_desc_t")}/>)}
+        </FormItem>
+      </Fragment>
     )
+
+
     return (
       <div className="m-panel">
-        <Form>
-          <div>
-            {templateEditor}
-          </div>
-          <FormItem {...tailFormItemLayout}>
-            <Button type="primary" htmlType="submit" icon="save" size="large" onClick={this.handleSubmit}>
-              保存
-            </Button>
-          </FormItem>
-        </Form>
+        <Tabs
+          hideAdd
+          onChange={key => this.onTabChange(key)}
+          activeKey={this.state.activeKey}
+          type="card"
+          tabBarExtraContent={<Button type="primary" onClick={() => this.addNewTemplate()}>新增模板</Button>}
+          onEdit={(t, e) => this.onTabEdit(t, e)}
+        >
+          {panes.map(pane => (
+            <TabPane tab={pane.title}
+                     key={pane.key}
+                     closable={pane.key !== 'default'}
+            >
+              <Form>
+                <div style={{padding: "10px 0"}}>
+                  {addContent}
+                  <FormItem {...formItemLayout} label={"模板"}>
+                    <AceEditor
+                      data={pane.data.template_data}
+                      onChange={e => this.handleTemplateInput(e, pane.data)}
+                      style={{minHeight: '500px'}}
+                    />
+                  </FormItem>
+                </div>
+                <FormItem {...tailFormItemLayout}>
+                  <Button type="primary" htmlType="submit" icon="save" size="large"
+                          onClick={() => this.handleSubmit(pane.data)}>
+                    保存
+                  </Button>
+                </FormItem>
+              </Form>
+            </TabPane>
+          ))}
+        </Tabs>
+
+
       </div>
     );
   }