feat: 新增参数配置页面

src/web/res/dist/css/project_field.css

@@ -0,0 +1,119 @@
+#app .group-title--switch .el-switch__core {
+    width: 60px !important;
+}
+#app .group-title--switch.el-switch {
+    position: relative;
+}
+#app .group-title--switch .el-switch__label--right.is-active,
+#app .group-title--switch .el-switch__label--left.is-active {
+    display: inline-block;
+}
+#app .group-title--switch .el-switch__label--right *,
+#app .group-title--switch .el-switch__label--left *{
+    line-height: inherit;
+}
+#app .group-title--switch .el-switch__label--right,
+#app .group-title--switch .el-switch__label--left {
+    position: absolute;
+    z-index: 2;
+    color: #fff;
+    display: none;
+    font-size: 12px;
+    margin: 0;
+    line-height: 20px;
+}
+#app .group-title--switch .el-switch__label--right {
+    left: 8px;
+}
+#app .group-title--switch .el-switch__label--left {
+    right: 8px;
+}
+.group-title--group h4 {
+    font-size: 20px;
+    margin-right: 12px;
+}
+.group-title--group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.switch-items {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.switch-item--group::before {
+    content: attr(data-type);
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: inline-block;
+    background: #f4f4f5;
+    padding: 2px;
+    font-size: 12px;
+    line-height: 16px;
+    color: #909399;
+    border-bottom-left-radius: 4px;
+}
+.switch-item--group.is-extend .switch-item--label {
+    max-width: unset;
+}
+.switch-item--group.is-extend .el-switch {
+    position: absolute;
+    top: 40px;
+    right: 12px;
+}
+.switch-item--group {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 6px;
+    padding: 8px;
+    border: 1px solid #eee;
+    border-radius: 6px;
+}
+.switch-item--label {
+    display: flex;
+    flex-direction: column;
+    min-width: 120px;
+    max-width: 160px;
+}
+.switch-item--descript {
+    font-weight: bold;
+    font-size: 14px;
+}
+.switch-item--descript[contenteditable] {
+    padding: 4px 8px;
+    border: 1px solid #909399;
+    border-radius: 4px;
+}
+.switch-item--key {
+    display: inline-block;
+    width: 40px;
+}
+.switch-item--edit.is-textarea .switch-item--key {
+    flex-shrink: 0;
+    margin-right: 4px;
+}
+.switch-item--edit.is-textarea {
+    display: flex;
+    flex-direction: row;
+}
+.switch-item--edit + .switch-item--edit {
+    margin-top: 8px;
+}
+.button-action {
+    display: flex;
+    justify-content: flex-end;
+    margin: 16px;
+}
+.delete-action--button.el-button.is-circle {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    padding: 6px;
+}
+.button-new-tag {
+    margin: 16px 0;
+}

src/web/templates/project/project_field.html

@@ -3,6 +3,9 @@
 {{include "com/header.html"}}
 <!-- Left side column. 权限菜单 -->
 {{include "com/menu.html"}}
+<!-- import CSS -->
+<link rel="stylesheet" href="https://cdn-common.jianyu360.com/cdn/lib/element-ui/2.15.7/lib/theme-chalk/index.css">
+<link rel="stylesheet" href="/dist/css/project_field.css">
 <div class="content-wrapper">
   <section class="content-header">
     <h1><small></small></h1>
@@ -16,8 +19,72 @@
       <div class="col-xs-12">
         <div class="box">
           <div class="box-body">
-
-
+            <!-- Vue content -->
+            <div id="app" v-cloak>
+              <el-button-group class="button-action">
+                <el-button type="primary" @click="submitData">保存</el-button>
+                <el-button type="info" @click="resetData">重置</el-button>
+              </el-button-group>
+              <el-collapse v-model="activeNames">
+                <el-collapse-item v-for="(group, gIndex) in editForm.data" :key="gIndex" :name="gIndex">
+                  <template slot="title">
+                    <div class="group-title--group" >
+                      <h4>[[group.descript]]</h4>
+                    </div>
+                  </template>
+                  <!--预设字段-->
+                  <div class="switch-items" v-if="group.key !== 'extend'">
+                    <div class="switch-item--group" v-for="(child, cIndex) in group.child" :key="cIndex" :data-type="child.key">
+                      <div class="switch-item--label">
+                        <span class="switch-item--descript">[[child.descript]]</span>
+                        <span>类型：[[child.stype]]</span>
+                      </div>
+                      <el-switch
+                              @change="changeSwitch('child', group)"
+                              v-model="child.enable"
+                              active-color="#13ce66"
+                              inactive-color="#ff4949">
+                      </el-switch>
+                    </div>
+                  </div>
+                  <!--自定义扩展字段-->
+                  <div class="switch-items" v-else>
+                    <div class="switch-item--group is-extend" v-for="(child, cIndex) in group.child" :key="child._id">
+                      <div class="switch-item--label">
+                        <div class="switch-item--edit">
+                          <span class="switch-item--key">描述：</span>
+                          <span v-contenteditable="{ obj: child, key: 'descript', value: child.descript }" class="switch-item--descript"></span>
+                        </div>
+                        <div class="switch-item--edit">
+                          <span class="switch-item--key">key：</span>
+                          <span v-contenteditable="{ obj: child, key: 'key', value: child.key }" class="switch-item--descript"></span>
+                        </div>
+                        <div class="switch-item--edit">
+                          <span class="switch-item--key">类型：</span>
+                          <el-radio-group v-model="child.stype" size="mini">
+                            <el-radio-button label="input"></el-radio-button>
+                            <el-radio-button label="select"></el-radio-button>
+                          </el-radio-group>
+                        </div>
+                        <div class="switch-item--edit is-textarea" v-if="child.stype !== 'input'">
+                          <span class="switch-item--key">选项：</span>
+                          <el-input
+                                  type="textarea"
+                                  :autosize="{ minRows: 2, maxRows: 4}"
+                                  placeholder="请输入选项，用换行分割"
+                                  :value="(child.values || []).join('\n')"
+                                  @input="updateChildValues($event, child)"
+                          >
+                          </el-input>
+                        </div>
+                      </div>
+                      <el-button class="delete-action--button" type="danger" icon="el-icon-delete" circle @click="removeExtendItem(group.child, cIndex)"></el-button>
+                    </div>
+                  </div>
+                  <el-button v-if="group.key === 'extend'" class="button-new-tag" type="primary" @click="addExtendItem(group.child)">+ 新增字段</el-button>
+                </el-collapse-item>
+              </el-collapse>
+            </div>
 
           </div>
           <!-- /.box-body -->
@@ -34,3 +101,227 @@
 
 
 </script>
+<!-- import Vue before Element -->
+<script src="/dist/js/vue.min.js"></script>
+<!-- import JavaScript -->
+<script src="https://cdn-common.jianyu360.com/cdn/lib/element-ui/2.15.7/lib/index.js"></script>
+<script>
+  // 获取配置
+  // 预设配置
+  var baseForm = [
+    {
+      key: "base",
+      enable: false,
+      descript: "基础字段",
+      ftype: "string",
+      stype: "input",
+      values: [],
+      child: [
+        {
+          key: "projectname",
+          enable: false,
+          descript: "项目名称",
+          ftype: "string",
+          stype: "input",
+          values: [],
+        },
+        {
+          key: "area",
+          enable: false,
+          descript: "地区",
+          ftype: "string",
+          stype: "input",
+          values: [],
+        },
+        {
+          key: "projectcode",
+          enable: false,
+          descript: "项目编号",
+          ftype: "string",
+          stype: "input",
+          values: [],
+        },
+        {
+          key: "subtype",
+          enable: false,
+          descript: "公告类别",
+          ftype: "string",
+          stype: "select",
+          values: [],
+        }
+      ]
+    },
+    {
+      key: "base2",
+      enable: false,
+      descript: "测试字段",
+      ftype: "string",
+      stype: "input",
+      values: [],
+      child: [
+        {
+          key: "projectname",
+          enable: false,
+          descript: "项目名称",
+          ftype: "string",
+          stype: "input",
+          values: [],
+        },
+        {
+          key: "area",
+          enable: false,
+          descript: "地区",
+          ftype: "string",
+          stype: "input",
+          values: [],
+        },
+        {
+          key: "projectcode",
+          enable: false,
+          descript: "项目编号",
+          ftype: "string",
+          stype: "input",
+          values: [],
+        },
+        {
+          key: "subtype",
+          enable: false,
+          descript: "公告类别-多选",
+          ftype: "string",
+          stype: "mul-select",
+          values: [],
+        },
+      ]
+    }
+  ]
+  // 新增自定义配置Item
+  var extendBaseItem = {
+    key: "",
+    enable: false,
+    descript: "",
+    ftype: "string",
+    stype: "input",
+    values: []
+  }
+  // 自定义配置
+  var extendForm = {
+    key: "extend",
+    enable: false,
+    descript: "扩展自定义字段",
+    ftype: "string",
+    stype: "input",
+    values: [],
+    child: [
+      {
+        key: "projectname",
+        enable: false,
+        descript: "项目名称",
+        ftype: "string",
+        stype: "input",
+        values: [],
+      },
+      {
+        key: "area",
+        enable: false,
+        descript: "地区",
+        ftype: "string",
+        stype: "input",
+        values: [],
+      },
+      {
+        key: "projectcode",
+        enable: false,
+        descript: "项目编号",
+        ftype: "string",
+        stype: "input",
+        values: [],
+      },
+      {
+        key: "subtype",
+        enable: false,
+        descript: "公告类别",
+        ftype: "string",
+        stype: "select",
+        values: [],
+      },
+      {
+        key: "subtype2",
+        enable: false,
+        descript: "公告类别-多选",
+        ftype: "string",
+        stype: "mul-select",
+        values: [],
+      },
+    ]
+  }
+
+  // 初始化
+  window.editApp = new Vue({
+    el: '#app',
+    delimiters: ["[[", "]]"],
+    directives: {
+      contenteditable: {
+        bind(el, binding) {
+          el.contentEditable = true; // 设置元素为可编辑状态
+          el.innerText = binding.value.obj[binding.value.key]; // 设置初始值
+          el.addEventListener('input', event => {
+            binding.value.obj[binding.value.key] = event.target.innerText; // 更新绑定的值
+          });
+        },
+        update (el, binding) {
+          if (binding.value.obj[binding.value.key] !== el.innerText) {
+            el.innerText = binding.value.obj[binding.value.key]; // 更新元素的值
+          }
+        }
+      }
+    },
+    data: function () {
+      return {
+        activeNames: [0].concat([...Array(20).keys()].map(i => i + 1)),
+        editForm: {
+          data: []
+        }
+      }
+    },
+    created () {
+      this.resetData()
+    },
+    methods: {
+      resetData () {
+        this.editForm.data = this.getFormData()
+      },
+      submitData () {
+        const baseForm = this.editForm.data.slice(0, -1)
+        const extendForm = this.editForm.data.slice(-1)[0]
+        console.log('baseForm', baseForm)
+        extendForm.child.forEach(v => delete v._id)
+        console.log('extendForm', extendForm)
+      },
+      getFormData () {
+        return JSON.parse(JSON.stringify([].concat(baseForm, [extendForm])))
+      },
+      updateChildValues (event, child) {
+        child.values = event.split('\n')
+      },
+      changeSwitch (type, group) {
+        if (type === 'child') {
+          group.enable = group.child.some(v => v.enable)
+        } else {
+          group.child.forEach(v => {
+            v.enable = group.enable
+          })
+        }
+      },
+      addExtendItem (child) {
+        const baseItem = JSON.parse(JSON.stringify(extendBaseItem))
+        child.push(Object.assign({
+          _id: Date.now() + Math.random()
+        }, baseItem))
+      },
+      removeExtendItem (child, index) {
+        child.splice(index, 1)
+      }
+    }
+  })
+
+</script>