From 1df841804a88b45a292115212e31d081c2cc9a65 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 17 Feb 2022 15:40:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mattersConfig/components/addConfig.vue    |   28 +-
 .../mattersConfig/components/applyForm.vue    | 1074 ++++++++++++++---
 .../mattersConfig/components/config.js        |  203 ++++
 3 files changed, 1123 insertions(+), 182 deletions(-)
 create mode 100644 packages/processManagement/mattersConfig/components/config.js

diff --git a/packages/processManagement/mattersConfig/components/addConfig.vue b/packages/processManagement/mattersConfig/components/addConfig.vue
index 007b0888..d30288be 100644
--- a/packages/processManagement/mattersConfig/components/addConfig.vue
+++ b/packages/processManagement/mattersConfig/components/addConfig.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="add-config">
+  <div class="add-config" :class="[activeStep == 1 ? 'formLayout' : '']">
     <ai-detail>
       <ai-title slot="title" :title="detailTitle" isShowBack isShowBottomBorder @onBackClick="handleBack"/>
       <template slot="step">
@@ -53,7 +53,8 @@ export default {
       },
       processAnnexDefs: [],
       detailObj: {},
-      refresh: true
+      refresh: true,
+      tableFieldInfos: []
     }
   },
   computed: {
@@ -85,12 +86,9 @@ export default {
           this.handleBaseInfo()
           break
         case 1:
-          this.$refs['applyForm'].handleApplyForm().then(ret => {
-            this.applyForm.tableId = ret.id
-            this.applyForm.approvalSteps = ret.approvalSteps.toString()
+          this.$refs['applyForm'].onConfirm().then(res => {
+            this.tableFieldInfos = res
             this.activeStep++
-          }).catch(err => {
-            console.error(err);
           })
           break
         case 2:
@@ -106,7 +104,7 @@ export default {
     handleBaseInfo() {
       this.$refs['baseInfo'].banseInfoForm().then(res => {
         if (res) {
-          this.$refs['applyForm'].getFormList()
+          // this.$refs['applyForm'].getFormList()
           this.baseInfo = res
           this.activeStep++
         }
@@ -121,7 +119,10 @@ export default {
           ...this.detailObj,
           ...this.baseInfo,
           processDefStatus: Number(this.baseInfo.processDefStatus),
-          tableId: this.applyForm.tableId,
+          tableInfo: {
+            tableFieldInfos: this.tableFieldInfos
+          },
+          tableType: 0,
           processAnnexDefs: this.annexs.map(e => ({...e, mustFill: Number(e.mustFill)})),
           processNodeList: res.processNodeList,
           processType: this.processType
@@ -168,6 +169,15 @@ export default {
 .add-config {
   height: 100%;
 
+  &.formLayout {
+    ::v-deep .ai-detail__content--wrapper {
+      max-width: 100%;
+      height: calc(100%)!important;
+      padding: 0!important;
+      overflow: hidden!important;
+    }
+  }
+
   .step {
     width: 100%;
     height: 72px;
diff --git a/packages/processManagement/mattersConfig/components/applyForm.vue b/packages/processManagement/mattersConfig/components/applyForm.vue
index 1dd63b6f..d03ae9c8 100644
--- a/packages/processManagement/mattersConfig/components/applyForm.vue
+++ b/packages/processManagement/mattersConfig/components/applyForm.vue
@@ -1,203 +1,931 @@
 <template>
-  <section class="apply-form">
-    <ai-card title="表单信息">
-      <template #content>
-        <el-form label-suffix="：" label-width="180px" ref="applyForm" :rules="rules" :model="form">
-          <el-form-item label="表单类型" prop="id">
-            <el-select placeholder="请选择" size="small" v-model="form.id" @change="onChange" clearable style="width: 100%;">
-              <el-option
-                v-for="(item,i) in formList" :key="i"
-                :label="item.tableName"
-                :value="item.id">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <div class="border-wrap">
-            <template v-for="(item,index) in tablelist" :ke="index">
-              <ai-title :title="item.groupName"></ai-title>
-              <el-form-item :label="[e.fieldName,e.fieldNameSuffix].join('')" v-for="(e,j) in item.value"
-                            :key="Math.random()">
-                <el-input size="small" v-model="form.checkbox" :disabled="true" clearable placeholder="请输入"
-                          style="width: 100%;" v-if="['0','1','6'].includes(e.fieldDataType)"/>
-
-                <el-radio-group style="width: 100%;" v-if="e.fieldDataType==4" disabled>
-                  <el-radio :label="k.dictValue" v-for="(k,m) in dict.getDict(e.dictionaryCode)" :key="Math.random()">
-                    {{ k.dictName }}
-                  </el-radio>
-                </el-radio-group>
-
-                <el-checkbox-group style="width: 100%;" v-if="e.fieldDataType==5" disabled>
-                  <el-checkbox :label="p.dictName" v-for="(p,i) in dict.getDict(e.dictionaryCode)"
-                               :key="Math.random()"></el-checkbox>
-                </el-checkbox-group>
-
-                <el-select placeholder="请选择" disabled size="small" clearable style="width: 100%;"
-                           v-if="e.fieldDataType==9" v-model="e.fieldDataValue">
-                  <el-option
-                    v-for="(item,i) in dict.getDict(e.fieldDbName)" :key="i"
-                    :label="item.dictName"
-                    :value="item.dictValue">
-                  </el-option>
-                </el-select>
-
-                <el-date-picker
-                  v-model="form.picker"
-                  v-if="['2','3','7','8'].includes(e.fieldDataType)"
-                  :disabled="true"
-                  type="date"
-                  size="small"
-                  placeholder="选择日期">
-                </el-date-picker>
-              </el-form-item>
-            </template>
-            <template v-if="tablelist.length==0">
-              <div class="no-data"></div>
-            </template>
+  <div class="form-config">
+    <el-scrollbar class="left">
+      <div class="left-item" v-for="(component, index) in components" :key="index">
+        <div class="left-item__title">
+          <h2>{{ component.label }}</h2>
+          <span>{{ component.tips }}</span>
+        </div>
+        <div class="left-item__list">
+          <draggable
+            class="components-draggable"
+            :list="component.children"
+            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+            :sort="false"
+            :move="onMove"
+            :clone="cloneComponent"
+            @end="onEnd">
+            <div class="left-item__item" v-for="(item, i) in component.children" :key="i" @click="clone(item)">
+              <i class="iconfont" :class="item.icon"></i>
+              <span>{{ item.fixedLabel }}</span>
+            </div>
+          </draggable>
+        </div>
+      </div>
+    </el-scrollbar>
+    <el-scrollbar class="middle">
+      <div class="middle-content">
+        <div class="middle-content__wrapper">
+          <el-form label-width="100px" label-position="right">
+            <draggable
+              class="middle-draggable"
+              style="height: 100%;"
+              :animation="340"
+              scroll
+              v-model="targetList"
+              element="div"
+              @end="onElEnd"
+              :sort="true">
+              <ai-card
+                :class="[groupIndex === j && isGroup ? 'active' : '']"
+                :data-index="j"
+                @click.native.stop="groupIndex = j, activeIndex = -1, isGroup = true"
+                :title="group.groupName" v-for="(group, j) in targetList"
+                :key="j">
+                <template #content>
+                  <draggable
+                    class="ai-form"
+                    style="height: 100%;"
+                    v-model="group.column"
+                    :animation="340"
+                    scroll
+                    @end="onElEnd"
+                    element="div"
+                    draggable=".components-item"
+                    group="componentsGroup"
+                    :sort="true">
+                    <div
+                      class="components-item"
+                      v-for="(item, i) in group.column"
+                      :style="{width: item.grid * 100 + '%'}"
+                      :class="[groupIndex === j && activeIndex === i ? 'active' : '']"
+                      @click.stop="groupIndex = j, activeIndex = i, isGroup = false"
+                      :key="i">
+                      <div class="left-item__item--remove" title="删除字段" v-show="groupIndex === j && activeIndex === i" @click.stop="removeItem(j, i)">
+                        <i class="iconfont iconDelete"></i>
+                        <span>删除字段</span>
+                      </div>
+                      <el-form-item style="width: 100%;" :label="item.fieldName" :rules="[{ required: item.mustFill === '1' ? true : false }]">
+                        <template v-if="(item.type === 'textarea')">
+                          <el-input :disabled="item.disable === '1'" :rows="item.lineNumber" size="small" type="textarea" :placeholder="item.fieldTips" v-model="item.defaultValue"></el-input>
+                        </template>
+                        <template v-if="item.type === 'radio'">
+                          <el-radio-group v-model="item.defaultValue" :disabled="item.disable === '1'">
+                            <el-radio :label="field.label" v-for="(field, index) in item.options" :key="index">{{ field.label }}</el-radio>
+                          </el-radio-group>
+                        </template>
+                        <template v-if="item.type === 'number'">
+                          <el-input-number style="width: 100%;" v-model="item.defaultValue" :placeholder="item.fieldTips"></el-input-number>
+                        </template>
+                        <template v-if="item.type === 'rtf'">
+                          <ai-editor v-model="item.defaultValue" :placeholder="item.fieldTips" :instance="instance"/>
+                        </template>
+                        <template v-if="item.type === 'time'">
+                          <el-date-picker
+                            v-model="item.defaultValue"
+                            size="small"
+                            :placeholder="item.fieldTips">
+                          </el-date-picker>
+                        </template>
+                        <template v-if="item.type === 'date'">
+                          <el-date-picker
+                            v-model="item.defaultValue"
+                            size="small"
+                            :placeholder="item.fieldTips">
+                          </el-date-picker>
+                        </template>
+                        <template v-if="item.type === 'datetime'">
+                          <el-date-picker
+                            v-model="item.defaultValue"
+                            size="small"
+                            :placeholder="item.fieldTips">
+                          </el-date-picker>
+                        </template>
+                        <template v-if="item.type === 'onOff'">
+                          <el-switch active-value="1" inactive-value="0" v-model="item.defaultValue"></el-switch>
+                        </template>
+                        <template v-if="['input', 'phone', 'name', 'idNumber'].includes(item.type)">
+                          <el-input :disabled="item.disable === '1'" :maxlength="Number(item.maxLength)" size="small" :placeholder="item.fieldTips" v-model="item.defaultValue"></el-input>
+                        </template>
+                        <template v-if="item.type === 'area'">
+                          <ai-area-get
+                            :instance="instance"
+                            always-show
+                          />
+                        </template>
+                        <template v-if="item.type === 'select'">
+                          <el-select :disabled="item.disable === '1'" style="width: 100%;" size="small" :placeholder="item.fieldTips" v-model="item.defaultValue">
+                            <el-option
+                              v-for="(filed, index) in item.options"
+                              :key="index"
+                              :label="filed.label"
+                              :value="filed.label">
+                            </el-option>
+                          </el-select>
+                        </template>
+                        <template v-if="item.type === 'checkbox'" >
+                          <el-checkbox-group v-model="item.defaultValue" :disabled="item.disable === '1'">
+                            <el-checkbox :label="field.label" v-for="(field, index) in item.options" :key="index">{{ field.label }}</el-checkbox>
+                          </el-checkbox-group>
+                        </template>
+                        <template v-if="item.type === 'upload'">
+                          <div class="left-item__item--upload">
+                            <i class="iconfont iconAdd"></i>
+                            <span>添加附件</span>
+                          </div>
+                        </template>
+                      </el-form-item>
+                    </div>
+                  </draggable>
+                </template>
+              </ai-card>
+            </draggable>
+          </el-form>
+        </div>
+      </div>
+    </el-scrollbar>
+    <el-scrollbar class="right">
+      <div class="right-item" v-if="isGroup">
+        <div class="right-item__title no-solid">
+          <h2>分组名称</h2>
+        </div>
+        <div class="right-item__content">
+          <el-input placeholder="请输入分组名称" :maxlength="32" show-word-limit v-model="currTarget.groupName"></el-input>
+        </div>
+      </div>
+      <div class="layout-right__del" @click="removeGroup" v-if="isGroup && targetList.length > 1">
+        <span>删除分组</span>
+      </div>
+      <div class="right-item" v-if="activeIndex > -1">
+        <div class="right-item__title no-solid">
+          <h2>标题名称</h2>
+        </div>
+        <div class="right-item__content">
+          <el-input placeholder="标题名称" :maxlength="32" show-word-limit v-model="currTarget.fieldName"></el-input>
+        </div>
+      </div>
+      <div class="right-item right-item__select" v-if="['9', '4', '5'].includes(currTarget.fieldDataType)">
+        <div class="right-item__title no-solid">
+          <h2>选项设置</h2>
+        </div>
+        <div class="right-item__select--wrapper">
+          <draggable
+            v-model="currTarget.options"
+            :animation="340"
+            group="select"
+            handle=".mover"
+            :sort="true">
+            <div class="select-item" v-for="(item, index) in currTarget.options" :key="index">
+              <i class="iconfont iconjdq_led_show mover"></i>
+              <el-input placeholder="请输入选项名" :maxlength="30" show-word-limit v-model="item.label"></el-input>
+              <i class="iconfont iconDelete" @click="removeOptions(index)"></i>
+            </div>
+          </draggable>
+        </div>
+        <el-button type="text" class="add-select" @click="addOptions">添加选项</el-button>
+      </div>
+      <div class="right-item__group" v-if="activeIndex > -1" key="radio">
+        <div class="right-item" v-if="currTarget.fieldDataType == 1 || currTarget.fieldDataType == 0">
+          <div class="right-item__title">
+            <h2>最多输入字符</h2>
           </div>
-        </el-form>
-      </template>
-    </ai-card>
-  </section>
+          <div class="right-item__content">
+            <el-input placeholder="字符个数" v-model="currTarget.maxLength">
+              <span slot="append">个</span>
+            </el-input>
+          </div>
+        </div>
+        <div class="right-item">
+          <div class="right-item__title no-solid">
+            <div class="right-item__title--left">
+              <h2>是否必填</h2>
+            </div>
+            <el-switch v-model="currTarget.mustFill" active-value="1" inactive-value="0"></el-switch>
+          </div>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
 </template>
 
 <script>
-export default {
-  name: "applyForm",
-  inject: ["config"],
-  props: {
-    instance: Function,
-    dict: Object,
-  },
-  data() {
-    return {
-      form: {
-        approvalSteps: "",
-        id: "",
-      },
-      formList: [],
-      tablelist: [],
-    }
-  },
+  import draggable from 'vuedraggable'
+  import { components } from './config'
 
-  computed: {
-    rules() {
+  export default {
+    name: 'applyForm',
+
+    model: {
+      prop: 'value',
+      event: 'change',
+    },
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object,
+      type: String,
+      areaId: String,
+      value: Array
+    },
+
+    components: {
+      draggable
+    },
+
+    data () {
       return {
-        id: [{required: true, message: '请选择表单类型', trigger: 'change'}]
+        isGroup: false,
+        components: components,
+        targetList: [{
+          type: 'group',
+          fieldName: '卡片',
+          fixedLabel: '卡片',
+          icon: 'iconpic',
+          groupName: '基础信息',
+          column: []
+        }],
+        groupIndex: -1,
+        activeIndex: -1,
+        currTarget: {}
       }
-    }
-  },
+    },
 
-  methods: {
-    handleApplyForm() {
-      return new Promise((resolve, reject) => {
-        this.$refs['applyForm'].validate(valid => {
-          if (valid) {
-            resolve(this.form)
-          } else {
-            reject(false)
-          }
-        })
-      })
-    },
-    /**
-     * 根据表单类型查询列表
-     * */
-    onChange(id) {
-      if (id) {
-        let dictionaryCodeArr = []
-        this.instance.post(`/app/zwsptablelist/queryDetailById?id=${id}`).then(res => {
-          if (res && res.data) {
-            let arr = []
-            this.form.approvalSteps = res.data.approvalSteps
-            res.data.tableFieldInfos.map((item, index) => {
-              if (item.fieldType == 0) {
-                if(item.dictionaryCode && dictionaryCodeArr.indexOf(item.dictionaryCode)==-1){
-                  dictionaryCodeArr.push(item.dictionaryCode)
-                }
-                let {groupIndex, groupName} = item
-                if (!arr[groupIndex]) {
-                  arr[groupIndex] = {
-                    groupName,
-                    value: []
+    watch: {
+      value (v) {
+        if (v) {
+          let arr = JSON.parse(JSON.stringify(v))
+          let groups = this.unique(arr.map(v => v.groupName))
+          this.targetList = groups.map(groupName => {
+            const column = arr.filter(v => v.groupName === groupName).map(item => {
+              if (['9', '4', '5'].includes(item.fieldDataType)) {
+                item.options = item.selectValues.split('`').map(v => {
+                  return {
+                    label: v,
+                    value: ''
                   }
-                }
-                arr[groupIndex].value.push({...item})
+                })
               }
+
+              if (item.grid) {
+                item.grid = Number(item.grid)
+              }
+
+              return item
             })
-            if(dictionaryCodeArr.length){
-              this.$dict.load(dictionaryCodeArr).then(()=>{
-                this.tablelist = arr.filter(e => e)
-              })
-            }else {
-              this.tablelist = arr.filter(e => e)
+
+            return {
+              type: 'group',
+              fieldName: '卡片',
+              fixedLabel: '卡片',
+              icon: 'iconpic',
+              groupName,
+              column: column
             }
-          }
-        })
-      } else {
-        this.tablelist = []
-        this.form.approvalSteps = ""
+          })
+        }
+      },
+
+      activeIndex () {
+        if (this.groupIndex > -1 && this.isGroup) {
+          this.currTarget = this.targetList[this.groupIndex]
+          return 
+        }
+
+        this.currTarget = {}
+      },
+
+      groupIndex () {
+        if (this.activeIndex > -1 && this.groupIndex > -1 && !this.isGroup) {
+          const filed = this.targetList[this.groupIndex].column[this.activeIndex]
+          this.currTarget = filed
+
+          return
+        }
+
+        if (this.groupIndex > -1 && this.isGroup) {
+          this.currTarget = this.targetList[this.groupIndex]
+          return 
+        }
+
+        this.currTarget = {}
       }
     },
-    /**
-     * 获取表单类型列表
-     * */
-    getFormList() {
-      this.instance.post(`/app/zwsptablelist/list`, null, {
-        current: 1,
-        size: 9999,
-      }).then(res => {
-        if (res && res.data) {
-          this.formList = res.data.records
-        }
-      })
+
+    computed: {
+      currComponentTitle () {
+        return '表单设置'
+      }
     },
-  },
-  created() {
-    this.getFormList()
-    if (this.config.detailObj?.id) {
-      this.form = JSON.parse(JSON.stringify(this.config.detailObj?.tableInfo))
-      this.onChange(this.form.id)
+
+    mounted () {
+    },
+
+    methods: {
+      removeItem (j, i) {
+        this.groupIndex = -1
+        this.activeIndex = -1
+        this.targetList[j].column.splice(i, 1)
+      },
+
+      removeGroup () {
+        if (this.targetList.length === 1) {
+          return this.$message.error('分组不能小于1')
+        }
+
+        this.targetList.splice(this.groupIndex, 1)
+        this.groupIndex = 0
+        this.isGroup = true
+        this.activeIndex = -1
+      },
+
+      unique (arr) {
+        return arr.filter((item, index) => {
+          return arr.indexOf(item, 0) === index
+        })
+      },
+
+      onConfirm () {
+        let result = []
+        this.targetList.forEach((group, i) => {
+          group.column.forEach((item, index) => {
+            result.push({
+              ...item,
+              groupIndex: i,
+              fieldLength: item.maxLength,
+              groupName: group.groupName,
+              fieldDbName: this.isUnique(item.type) ? item.type : `${item.type}${i}${index}`,
+              selectValues: item.options ? item.options.map(v => v.label).join('`') : ''
+            })
+          })
+        })
+
+        return new Promise(resolve => {
+          resolve(result)
+        })
+      },
+
+      isUnique (type) {
+        const list = this.components[0].children.map(v => v.type)
+
+        return list.indexOf(type) > -1
+      },
+
+      addOptions () {
+        const len = this.targetList[this.groupIndex].column[this.activeIndex].options.length
+        let label = `选项${len + 1}`
+
+        const index= this.targetList[this.groupIndex].column[this.activeIndex].options.findIndex(v => label === v.label)
+        if (index > -1) {
+          label = `新选项${len + 1}`
+        }
+
+        this.targetList[this.groupIndex].column[this.activeIndex].options.push({
+          label: label,
+          value: ''
+        })
+      },
+
+      removeOptions (index) {
+        const len = this.targetList[this.groupIndex].column[this.activeIndex].options.length
+
+        if (len === 2) {
+          return this.$message.error('选项不能少于2个')
+        }
+        this.targetList[this.groupIndex].column[this.activeIndex].options.splice(index, 1)
+      },
+
+      onEnd (e) {
+        const el = e.to.parentElement.parentElement
+        this.isGroup = false
+        this.activeIndex = e.newIndex
+        this.groupIndex = Number(el.getAttribute('data-index'))
+      },
+
+      onElEnd (e) {
+        if (this.isGroup) {
+          this.groupIndex = e.newIndex
+        } else {
+          this.activeIndex = e.newIndex
+        }
+      },
+
+      clone (e) {
+        if (e.type === 'group') {
+          this.targetList.push(JSON.parse(JSON.stringify(e)))
+
+          this.$nextTick(() => {
+            this.isGroup = true
+            this.groupIndex = this.targetList.length - 1
+            this.activeIndex = -1
+          })
+
+          return
+        }
+
+        if (this.isGroup) {
+          this.targetList[this.groupIndex].column.push(JSON.parse(JSON.stringify(e)))
+        } else {
+          this.targetList[0].column.push(JSON.parse(JSON.stringify(e)))
+        }
+
+        this.$nextTick(() => {
+          this.groupIndex = this.isGroup ? this.groupIndex : 0
+          this.activeIndex = this.targetList[0].column.length - 1
+        })
+      },
+
+      onMove (e) {
+        const el = e.draggedContext.element
+        if (el.type === 'group') {
+          return false
+        }
+
+        return true
+      },
+
+      cloneComponent (e) {
+        if (e.type === 'group') {
+          this.targetList.push(JSON.parse(JSON.stringify(e)))
+
+          return
+        }
+
+        return JSON.parse(JSON.stringify(e))
+      }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
-.apply-form {
-  .border-wrap {
-    box-sizing: border-box;
-    padding: 20px;
+  .layout-right__del {
+    position: absolute;
+    bottom: 100px;
+    left: 0;
+    z-index: 11;
     width: 100%;
-    border: 1px solid #6FAFFF;
+    padding: 0 16px;
 
-    .no-data {
-      background-size: 120px 120px;
-      height: 160px;
-      margin: 48px auto 10px;
-    }
-
-    .rightBtn {
-      font-size: 14px;
-      color: #999999;
-      user-select: none;
+    span {
+      display: block;
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 6px;
+      color: #F46;
       cursor: pointer;
-    }
+      border: 1px solid #F46;
 
-    .small-input {
-      width: 48px;
-      margin: 0 8px;
-    }
-
-    ::v-deep .family-info {
-      margin-left: 24px;
-
-      ::v-deep .el-form-item__content {
-        margin-left: 24px !important;
+      &:hover {
+        opacity: 0.7;
       }
     }
-    ::v-deep .el-radio{
-      margin-bottom: 6px;
+  }
+  .form-config {
+    display: flex;
+    height: 100%;
+    padding: 10px 20px 0;
+
+    .ai-form .el-form-item {
+      margin-bottom: 0;
+    }
+
+    .right-item__maintitle {
+      height: 62px;
+      line-height: 62px;
+      margin-bottom: 20px;
+      border-bottom: 1px solid #EEEEEE;
+      color: #222222;
+
+      h2 {
+        font-size: 14px;
+      }
+    }
+
+    ::v-deep .ai-card {
+      cursor: move;
+
+      &.active {
+        background: #f6f7ff;
+      }
+    }
+
+    ::v-deep .ai-detail__content {
+      height: calc(100% - 52px)!important;
+      padding: 0!important;
+      overflow: hidden!important;
+    }
+
+    .ai-dialog__success {
+      ::v-deep .ai-dialog__content {
+        max-height: initial!important;
+      }
+    }
+
+    .middle-draggable {
+      // display: flex;
+      // justify-content: space-between;
+      // flex-wrap: wrap;
+      .left-item__item {
+        width: 50%;
+        min-height: 73px;
+      }
+
+      .el-date-editor.el-input {
+        width: 100%;
+      }
+
+      & > span {
+        display: block;
+        width: 100%;
+        height: 100%;
+        min-height: 600px;
+        padding-bottom: 20px;
+      }
+
+      .components-item {
+        position: relative;
+        margin-bottom: 16px;
+        padding: 16px 16px;
+        cursor: move;
+
+        &::after {
+          position: absolute;
+          left: 0;
+          top: 0;
+          z-index: 1111;
+          width: 100%;
+          height: 100%;
+          content: ' ';
+        }
+
+        .left-item__item--remove {
+          display: flex;
+          position: absolute;
+          align-items: center;
+          justify-content: center;
+          right: 4px;
+          top: 4px;
+          z-index: 1113;
+          width: 84px;
+          height: 28px;
+          background: #FF4466;
+          border-radius: 2px;
+          cursor: pointer;
+          color: #fff;
+          font-size: 12px;
+
+          i {
+            margin-right: 6px;
+            font-size: 12px;
+
+            &:hover {
+              color: #fff;
+            }
+          }
+
+          &:hover {
+            opacity: 0.8;
+          }
+        }
+
+        &:hover {
+          background: #f6f7ff;
+        }
+
+        &.active {
+          background: #f6f7ff;
+        }
+
+        .left-item__item--upload {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          width: 120px;
+          height: 120px;
+          line-height: 1;
+          border-radius: 6px;
+          border: 1px dashed #bbb;
+
+          i {
+            font-size: 24px;
+            color: #8899bb;
+          }
+
+          span {
+            margin-top: 10px;
+            font-size: 12px;
+            color: #555;
+          }
+        }
+
+        .text-item {
+          input {
+            display: block;
+            width: 100%;
+            height: 40px;
+            border: none;
+            border-bottom: 1px solid #ddd;
+
+            &:focus {
+              outline: none;
+            }
+
+            &:disabled {
+              background: #fff;
+            }
+          }
+        }
+
+        .textarea-item {
+          textarea {
+            width: 100%;
+            height: 120px;
+            resize: none;
+            border: 1px solid #ddd;
+            padding: 10px;
+
+            &:focus {
+              outline: none;
+            }
+
+            &:disabled {
+              background: #fff;
+            }
+          }
+        }
+
+        .radio-item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          label {
+            margin-left: 10px;
+          }
+
+          img {
+            margin-left: 10px;
+          }
+        }
+      }
+
+      .left-item__item--title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+
+        i {
+          margin-right: 5px;
+          color: #E22120;
+        }
+
+        h2 {
+          color: #333333;
+          font-size: 15px;
+        }
+      }
+    }
+
+    .middle-content {
+      width: 96%;
+      margin: 0 auto;
+      padding: 0px 0 1px;
+
+      .middle-content__wrapper {
+        // min-height: 800px;
+        // background: #fff;
+
+        & > div {
+          &.active {
+            background: #f6f7ff;
+          }
+        }
+
+        .radio-item {
+          img {
+            width: 40px;
+            height: 40px;
+          }
+        }
+      }
+    }
+
+    div {
+      box-sizing: border-box;
+    }
+
+    .right-item__select--wrapper {
+      .select-item {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    ::v-deep .ai-detail__title {
+      margin: 0!important;
+      margin-bottom: 4px!important;
+      padding: 0 20px;
+      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
+    }
+
+    ::v-deep .ai-detail__content--wrapper {
+      display: flex;
+      max-width: 100%!important;
+      height: 100%!important;
+      padding: 0!important;
+      background: #F5F6F9;
+    }
+
+    .middle {
+      flex: 1;
+      height: 100%;
+
+      ::v-deep .el-scrollbar__view {
+        height: 100%;
+      }
+    }
+
+    .add-select {
+      height: auto;
+      line-height: 1;
+      margin: 10px 0 0 26px;
+      padding: 0;
+    }
+
+    .right-item__select--wrapper {
+      .select-item {
+        margin-bottom: 10px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        i {
+          margin-right: 8px;
+          color: #8c9dbd;
+        }
+
+        .mover {
+          cursor: move;
+        }
+
+        .iconDelete {
+          cursor: pointer;
+          margin-left: 10px;
+        }
+      }
+
+      ::v-deep .el-upload-list__item {
+        width: 40px!important;
+        height: 40px!important;
+        object-fit: cover;
+      }
+
+      .config-item__select {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border: 1px solid #D0D4DC;
+
+        &:hover {
+          opacity: 0.7;
+        }
+
+        i {
+          font-size: 18px;
+        }
+      }
+    }
+
+    .right {
+      width: 320px;
+      height: 100%;
+      overflow-y: auto;
+      overflow: hidden;
+      background: #FFFFFF;
+
+      .el-checkbox {
+        display: block;
+        margin-bottom: 10px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .right-item {
+        margin-top: 20px;
+        padding: 0 20px;
+
+        .right-item__tips {
+          margin-top: 10px;
+          color: #888888;
+          font-size: 12px;
+        }
+      }
+
+      .right-item__title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .right-item__title--left {
+          display: flex;
+          align-items: center;
+
+          i {
+            color: #888888;
+            font-size: 12px;
+            font-style: normal;
+          }
+        }
+
+        h2 {
+          color: #222222;
+          font-size: 14px;
+        }
+      }
+    }
+
+    .left {
+      width: 280px;
+      height: 100%;
+      overflow-y: auto;
+      overflow: hidden;
+      background: #FFFFFF;
+
+      .left-item {
+        padding: 0 20px;
+
+        &:last-child {
+          padding-bottom: 20px;
+        }
+
+        .left-item__title {
+          display: flex;
+          align-items: baseline;
+          margin-bottom: 20px;
+
+          h2 {
+            color: #222222;
+            font-size: 14px;
+            font-weight: 700;
+          }
+
+          span {
+            color: #888888;
+            font-size: 12px;
+          }
+        }
+      }
+
+      .left-item {
+        margin-top: 20px;
+      }
+    }
+  }
+
+  .left-item__item {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    margin-bottom: 10px;
+    width: 100%;
+    padding: 0 13px;
+    background: #FFFFFF;
+    border-radius: 2px;
+    color: #222222;
+    font-size: 12px;
+    border: 1px solid #E4E8EF;
+    cursor: move;
+
+    &:hover {
+      border: 1px dashed #2367ff;
+      color: #2367ff;
+
+      i {
+        color: #2367ff;
+      }
+    }
+
+    i {
+      margin-right: 13px;
+      font-size: 14px;
+      color: #8899BB;
+    }
+
+    &:last-child {
+      margin-bottom: 0px;
     }
   }
-}
 </style>
diff --git a/packages/processManagement/mattersConfig/components/config.js b/packages/processManagement/mattersConfig/components/config.js
new file mode 100644
index 00000000..0ce567e7
--- /dev/null
+++ b/packages/processManagement/mattersConfig/components/config.js
@@ -0,0 +1,203 @@
+export const components = [
+	{
+		type: 'info',
+		tips: '（可重复添加）',
+		label: '信息',
+		children: [
+			{
+				type: 'name',
+				fieldName: '姓名',
+				fieldTips: '请输入姓名',
+				fixedLabel: '姓名',
+				disable: '0',
+				grid: 1,
+				fieldDataType: '1',
+				defaultValue: '',
+				icon: 'icontext_box',
+				mustFill: '1',
+				maxLength: 20
+			},
+			{
+				type: 'idNumber',
+				fieldName: '身份证号',
+				fixedLabel: '身份证号',
+				fieldTips: '请输入身份证号',
+				defaultValue: '',
+				icon: 'icontext_area',
+				mustFill: '1',
+				maxLength: 20,
+				disable: '0',
+				grid: 1,
+				fieldDataType: '1',
+				verifyType: 0
+			},
+			{
+				type: 'phone',
+				fieldName: '联系方式',
+				fixedLabel: '联系方式',
+				fieldTips: '请输入联系方式',
+				defaultValue: '',
+				icon: 'icontext_area',
+				mustFill: '1',
+				maxLength: 11,
+				disable: '0',
+				grid: 1,
+				fieldDataType: '1',
+				verifyType: 1
+			}
+		]
+	},
+	{
+		type: 'options',
+		tips: '（可重复添加）',
+		label: '选项',
+		children: [
+			{
+				type: 'radio',
+				fieldName: '单选',
+				fixedLabel: '单选',
+				fieldTips: '请选择',
+				grid: 1,
+				icon: 'iconradio',
+				mustFill: '1',
+				disable: '0',
+				fieldDataType: '4',
+				defaultValue: '',
+				options: [
+					{
+						label: '选项1',
+						value: ''
+					},
+					{
+						label: '选项2',
+						value: ''
+					}
+				],
+				title: ''
+			},
+			{
+				type: 'checkbox',
+				fieldName: '多选',
+				fixedLabel: '多选',
+				fieldTips: '请选择',
+				icon: 'iconcheck_box',
+				fieldDataType: '5',
+				mustFill: '1',
+				grid: 1,
+				disable: '0',
+				defaultValue: [],
+				options: [
+					{
+						label: '选项1',
+						value: ''
+					},
+					{
+						label: '选项2',
+						value: ''
+					}
+				],
+				title: ''
+			},
+			{
+				type: 'select',
+				fieldName: '单下拉框',
+				fixedLabel: '单下拉框',
+				grid: 1,
+				fieldTips: '请选择',
+				icon: 'iconSelect',
+				mustFill: '1',
+				defaultValue: '',
+				fieldDataType: '9',
+				disable: '0',
+				options: [
+					{
+						label: '选项1',
+						value: ''
+					},
+					{
+						label: '选项2',
+						value: ''
+					}
+				],
+				title: ''
+			},
+			{
+				type: 'date',
+				fieldName: '日期',
+				fixedLabel: '日期',
+				grid: 1,
+				fieldDataType: '3',
+				datetimePattern: 'yyyy-MM-dd',
+				fieldTips: '请选择日期',
+				icon: 'iconSelect',
+				mustFill: '1',
+				disable: '0',
+				title: ''
+			},
+			{
+				type: 'datetime',
+				fieldName: '日期时间',
+				fixedLabel: '日期时间',
+				grid: 1,
+				fieldDataType: '8',
+				datetimePattern: 'yyyy-MM-dd HH:mm:ss',
+				fieldTips: '请选择日期时间',
+				icon: 'iconSelect',
+				mustFill: '1',
+				disable: '0',
+				title: ''
+			}
+		]
+	},
+	{
+		type: 'input',
+		tips: '（可重复添加）',
+		label: '填空',
+		children: [
+			{
+				type: 'input',
+				fieldName: '单行填空',
+				fieldTips: '请输入',
+				fixedLabel: '单行填空',
+				disable: '0',
+				grid: 1,
+				fieldDataType: '1',
+				defaultValue: '',
+				icon: 'icontext_box',
+				mustFill: '1',
+				maxLength: 50
+			},
+			{
+				type: 'number',
+				fieldName: '数字输入',
+				fixedLabel: '数字输入',
+				fieldTips: '请输入数字',
+				defaultValue: '',
+				icon: 'icontext_area',
+				mustFill: '1',
+				maxValue: 10000,
+				decimalPlaces: 0,
+				fieldDataType: '0',
+				minValue: 0,
+				maxLength: 500,
+				disable: '0',
+				grid: 1,
+			}
+		]
+	},
+	{
+		type: 'layout',
+		tips: '（可重复添加）',
+		label: '分组',
+		children: [
+			{
+				type: 'group',
+				fieldName: '卡片',
+				fixedLabel: '卡片',
+				icon: 'iconpic',
+				groupName: '分组标题',
+				column: []
+			}
+		]
+	}
+];