From e67d711db324c605efcdfb3093fd51d4f6f21880 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 6 Apr 2022 11:59:14 +0800
Subject: [PATCH] bug

---
 .../mattersConfig/AppMattersConfig.vue        |    6 +-
 .../mattersConfig/components/addConfig.vue    |   61 +-
 .../mattersConfig/components/applyForm.vue    | 1049 +++--------------
 .../components/attachmentMaterial.vue         |  100 +-
 .../mattersConfig/components/baseInfo.vue     |  251 ++--
 .../components/processApproval.vue            |   29 +-
 6 files changed, 397 insertions(+), 1099 deletions(-)

diff --git a/project/xiushan/apps/processManagement/mattersConfig/AppMattersConfig.vue b/project/xiushan/apps/processManagement/mattersConfig/AppMattersConfig.vue
index 37a8cbb4..fe81bdc6 100644
--- a/project/xiushan/apps/processManagement/mattersConfig/AppMattersConfig.vue
+++ b/project/xiushan/apps/processManagement/mattersConfig/AppMattersConfig.vue
@@ -14,7 +14,7 @@
       </template>
     </ai-list>
     <component v-else :is="currentComp" :instance="instance" :dict="dict"
-               :processType="currentTab.value" :row="row"></component>
+               :processType="currentTab.value" :row="row" @back="back" ></component>
 
   </section>
 </template>
@@ -59,6 +59,10 @@ export default {
       this.row = params.row
       this.currentComp = params.comp
       this.$router.push({query: {processType: this.currentTab.value}})
+    },
+
+    back () {
+      this.$router.push({query: {}})
     }
   },
   created() {
diff --git a/project/xiushan/apps/processManagement/mattersConfig/components/addConfig.vue b/project/xiushan/apps/processManagement/mattersConfig/components/addConfig.vue
index 0a565652..26d300b0 100644
--- a/project/xiushan/apps/processManagement/mattersConfig/components/addConfig.vue
+++ b/project/xiushan/apps/processManagement/mattersConfig/components/addConfig.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="add-config" :class="[activeStep == 1 ? 'formLayout' : '']">
+  <div class="add-config">
     <ai-detail>
       <ai-title slot="title" :title="detailTitle" isShowBack isShowBottomBorder @onBackClick="handleBack"/>
       <template slot="step">
@@ -11,7 +11,7 @@
       </template>
       <template #content v-if="refresh">
         <baseInfo ref="baseInfo" :instance="instance" :dict="dict" v-show="activeStep==0"/>
-        <applyForm ref="applyForm" :value="filedList" :instance="instance" :dict="dict" v-show="activeStep==1"/>
+        <applyForm ref="applyForm" :instance="instance" :dict="dict" v-show="activeStep==1"/>
         <attachmentMaterial ref="attachmentMaterial" :instance="instance" v-show="activeStep==2"/>
         <processApproval ref="processApproval" :approvalSteps="applyForm.approvalSteps" :instance="instance"
                          :dict="dict" v-show="activeStep==3"/>
@@ -39,8 +39,7 @@ export default {
   props: {
     instance: Function,
     dict: Object,
-    row: Object,
-    processType: String
+    row: Object
   },
   components: {baseInfo, applyForm, attachmentMaterial, processApproval},
   data() {
@@ -52,12 +51,8 @@ export default {
         approvalSteps: "",
       },
       processAnnexDefs: [],
-      detailObj: {
-        tableInfo: {}
-      },
-      refresh: true,
-      filedList: [],
-      tableFieldInfos: []
+      detailObj: {},
+      refresh: true
     }
   },
   computed: {
@@ -89,12 +84,12 @@ export default {
           this.handleBaseInfo()
           break
         case 1:
-          this.$refs['applyForm'].onConfirm().then(res => {
-            if (!res.length) {
-              return this.$message.error('表单配置不能为空')
-            }
-            this.tableFieldInfos = res
+          this.$refs['applyForm'].handleApplyForm().then(ret => {
+            this.applyForm.tableId = ret.id
+            this.applyForm.approvalSteps = ret.approvalSteps.toString()
             this.activeStep++
+          }).catch(err => {
+            console.error(err);
           })
           break
         case 2:
@@ -110,7 +105,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,22 +116,19 @@ export default {
      */
     save() {
       this.$refs['processApproval'].handleProcessApproval().then(res => {
-        this.instance.post(`/app/approval-process-def/add-update`, {
+        this.instance.post(`/approval-process-def/add-update`, {
           ...this.detailObj,
           ...this.baseInfo,
           processDefStatus: Number(this.baseInfo.processDefStatus),
-          tableInfo: {
-            ...this.detailObj.tableInfo,
-            tableFieldInfos: this.tableFieldInfos
-          },
-          tableType: 0,
+          tableId: this.applyForm.tableId,
+          processType: 0,
+          tableType: 2,
           processAnnexDefs: this.annexs.map(e => ({...e, mustFill: Number(e.mustFill)})),
-          processNodeList: res.processNodeList,
-          processType: this.processType
+          processNodeList: res.processNodeList
         }).then(res => {
           if (res.code == 0) {
             this.$message.success("保存成功")
-            this.$router.push({query:{}})
+            this.$emit("back")
           }
         })
       }).catch(err => {
@@ -144,10 +136,9 @@ export default {
       })
     },
     getDetail(id) {
-      this.instance.post(`/app/approval-process-def/info-id`, null, {params: {id}}).then(res => {
+      this.instance.post(`/approval-process-def/info-id`, null, {params: {id}}).then(res => {
         if (res?.data) {
           this.detailObj = res.data
-          this.filedList = res.data.tableInfo.tableFieldInfos
           this.refreshDetail()
         }
       })
@@ -162,12 +153,13 @@ export default {
       this.$nextTick(() => this.refresh = true)
     },
     handleBack() {
-      this.$router.push({query: {}})
+      this.detailObj?.id && this.$router.push({query: {}})
+      this.$emit('back')
     }
   },
   created() {
-    if (this.row?.id) {
-      this.getDetail(this.row?.id)
+    if (this.$route.query?.id) {
+      this.getDetail(this.$route.query?.id)
     }
   }
 }
@@ -177,13 +169,8 @@ 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;
-    }
+  ::v-deep .step .el-steps {
+    height: 72px;
   }
 
   .step {
diff --git a/project/xiushan/apps/processManagement/mattersConfig/components/applyForm.vue b/project/xiushan/apps/processManagement/mattersConfig/components/applyForm.vue
index 2ecf7166..d9c89df8 100644
--- a/project/xiushan/apps/processManagement/mattersConfig/components/applyForm.vue
+++ b/project/xiushan/apps/processManagement/mattersConfig/components/applyForm.vue
@@ -1,895 +1,200 @@
 <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>
+  <section class="apply-form">
+    <ai-title title="表单信息"></ai-title>
+    <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>
-    </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.fieldDataType === '1'">
-                          <el-input :disabled="item.disable === '1'" size="small" placeholder="请输入" v-model="item.defaultValue"></el-input>
-                        </template>
-                        <template v-if="item.fieldDataType === '4'">
-                          <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.fieldDataType === '0'">
-                          <el-input-number style="width: 100%;" v-model="item.defaultValue" :placeholder="item.fieldTips"></el-input-number>
-                        </template>
-                        <template v-if="item.fieldDataType === '3'">
-                          <el-date-picker
-                            v-model="item.defaultValue"
-                            size="small"
-                            :placeholder="item.fieldTips">
-                          </el-date-picker>
-                        </template>
-                        <template v-if="item.fieldDataType === '8'">
-                          <el-date-picker
-                            v-model="item.defaultValue"
-                            size="small"
-                            :placeholder="item.fieldTips">
-                          </el-date-picker>
-                        </template>
-                        <template v-if="item.fieldDataType === '9'">
-                          <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.fieldDataType === '5'" >
-                          <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>
-                      </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>
-          <div class="right-item__content">
-            <el-input placeholder="字符个数" v-model="currTarget.fieldLength">
-              <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>
+    </el-form>
+  </section>
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
-  import { components } from './config'
+export default {
+  name: "applyForm",
+  inject: ["config"],
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+  data() {
+    return {
+      form: {
+        approvalSteps: "",
+        id: "",
+      },
+      formList: [],
+      tablelist: [],
+    }
+  },
 
-  export default {
-    name: 'applyForm',
-
-    props: {
-      instance: Function,
-      dict: Object,
-      params: Object,
-      type: String,
-      value: Array
-    },
-
-    components: {
-      draggable
-    },
-
-    data () {
+  computed: {
+    rules() {
       return {
-        isGroup: false,
-        components: components,
-        targetList: [{
-          type: 'group',
-          fieldName: '卡片',
-          fixedLabel: '卡片',
-          icon: 'iconpic',
-          groupName: '基础信息',
-          column: []
-        }],
-        groupIndex: -1,
-        activeIndex: -1,
-        currTarget: {}
-      }
-    },
-
-    watch: {
-      activeIndex () {
-        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].column[this.activeIndex]
-
-          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 = {}
-      }
-    },
-
-    mounted () {
-      this.init()
-    },
-
-    methods: {
-      removeItem (j, i) {
-        this.groupIndex = -1
-        this.activeIndex = -1
-        this.targetList[j].column.splice(i, 1)
-      },
-
-      init () {
-        if (this.value.length) {
-          let arr = this.value
-          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: ''
-                  }
-                })
-              }
-
-              if (item.fieldDataType === '5') {
-                  item.defaultValue = []
-              }
-
-              return {
-                ...item,
-                grid: 1
-              }
-            })
-
-            return {
-              type: 'group',
-              fieldName: '卡片',
-              fixedLabel: '卡片',
-              icon: 'iconpic',
-              groupName,
-              column: column
-            }
-          })
-        }
-      },
-
-      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 => {
-            result.push({
-              ...item,
-              groupIndex: i,
-              groupName: group.groupName,
-              selectValues: item.options ? item.options.map(v => v.label).join('`') : ''
-            })
-          })
-        })
-
-        return new Promise(resolve => {
-          resolve(result)
-        })
-      },
-
-      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))
+        id: [{required: true, message: '请选择表单类型', trigger: 'change'}]
       }
     }
+  },
+
+  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(`/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: []
+                  }
+                }
+                arr[groupIndex].value.push({...item})
+              }
+            })
+            if(dictionaryCodeArr.length){
+              this.$dict.load(dictionaryCodeArr).then(()=>{
+                this.tablelist = arr.filter(e => e)
+              })
+            }else {
+              this.tablelist = arr.filter(e => e)
+            }
+          }
+        })
+      } else {
+        this.tablelist = []
+        this.form.approvalSteps = ""
+      }
+    },
+    /**
+     * 获取表单类型列表
+     * */
+    getFormList() {
+      this.instance.post(`/zwsptablelist/list`, null, {
+        current: 1,
+        size: 9999,
+      }).then(res => {
+        if (res && res.data) {
+          this.formList = res.data.records
+        }
+      })
+    },
+  },
+  created() {
+    this.getFormList()
+    if (this.config.detailObj?.id) {
+      this.form = JSON.parse(JSON.stringify(this.config.detailObj?.tableInfo))
+      this.onChange(this.form.id)
+    }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .layout-right__del {
-    position: absolute;
-    bottom: 100px;
-    left: 0;
-    z-index: 11;
+.apply-form {
+  .border-wrap {
+    box-sizing: border-box;
+    padding: 20px;
     width: 100%;
-    padding: 0 16px;
+    border: 1px solid #6FAFFF;
 
-    span {
-      display: block;
-      width: 100%;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      border-radius: 6px;
-      color: #F46;
-      cursor: pointer;
-      border: 1px solid #F46;
-
-      &:hover {
-        opacity: 0.7;
-      }
-    }
-  }
-  .form-config {
-    display: flex;
-    height: 100%;
-    padding: 10px 20px 0;
-
-    .ai-form .el-form-item {
-      margin-bottom: 0;
+    .no-data {
+      background-size: 120px 120px;
+      height: 160px;
+      margin: 48px auto 10px;
     }
 
-    .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;
+    .rightBtn {
       font-size: 14px;
-      color: #8899BB;
+      color: #999999;
+      user-select: none;
+      cursor: pointer;
     }
 
-    &:last-child {
-      margin-bottom: 0px;
+    .small-input {
+      width: 48px;
+      margin: 0 8px;
+    }
+
+    ::v-deep .family-info {
+      margin-left: 24px;
+
+      ::v-deep .el-form-item__content {
+        margin-left: 24px !important;
+      }
+    }
+    ::v-deep .el-radio{
+      margin-bottom: 6px;
     }
   }
+}
 </style>
diff --git a/project/xiushan/apps/processManagement/mattersConfig/components/attachmentMaterial.vue b/project/xiushan/apps/processManagement/mattersConfig/components/attachmentMaterial.vue
index d527bed4..24ed601b 100644
--- a/project/xiushan/apps/processManagement/mattersConfig/components/attachmentMaterial.vue
+++ b/project/xiushan/apps/processManagement/mattersConfig/components/attachmentMaterial.vue
@@ -1,59 +1,57 @@
 <template>
   <div class="attachment-material">
-    <ai-card title="附件材料">
-      <template #right>
+    <ai-title title="附件材料">
+      <template slot="rightBtn">
         <span class="iconfont iconAdd rightBtn"></span>
         <span class="rightBtn" style="margin-left: 8px;" @click="dialog=true">新增行数</span>
       </template>
-      <template #content>
-        <el-table
-          :data="materialList"
-          stripe
-          style="width: 100%"
-          header-cell-class-name="table-header"
-          align="center"
-          empty-text="材料列表信息为空，点击标题右侧添加按钮进行添加"
-        >
-          <el-table-column align="left" prop="annexName" label="材料名称" width="280">
-            <template slot-scope="scope">
-              <div class="table-border">{{ scope.row.annexName }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" prop="exampleFileId" label="样例">
-            <template slot-scope="{row}">
-              <el-upload action :on-exceed="list=>handleUpload({file:list[0]}).then(v=>row.exampleFileId=v)"
-                         :http-request="args=>handleUpload(args).then(v=>row.exampleFileId=v)" :limit="1" accept=".jpg,.png">
-                <el-button style="width: 102px">{{ row.exampleFileId ? '重新选择图片' : '选择图片文件' }}</el-button>
-              </el-upload>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" prop="emptyFileId" label="空表">
-            <template slot-scope="{row}">
-              <el-upload action :on-exceed="list=>handleUpload({file:list[0]}).then(v=>row.emptyFileId=v)"
-                         :http-request="args=>handleUpload(args).then(v=>row.emptyFileId=v)" :limit="1" accept=".doc,.docx">
-                <el-button style="width: 102px">{{ row.emptyFileId ? '重新选择word' : '选择word文件' }}</el-button>
-              </el-upload>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" prop="name" label="是否必填">
-            <template slot-scope="scope">
-              <el-switch
-                v-model="scope.row.mustFill"
-                active-value="1" inactive-value="0"
-                active-color="#5088FF"
-                inactive-color="#D0D4DC">
-              </el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="操作">
-            <template slot-scope="scope">
-              <span class="iconfont iconEdit icon-color89B" title="编辑" @click="editInfo(scope.$index)" style="margin-right: 10px;"/>
-              <span class="iconfont iconDelete icon-color89B" title="删除" @click="deleteInfo(scope.$index)"/>
-            </template>
-          </el-table-column>
-        </el-table>
-      </template>
-    </ai-card>
+    </ai-title>
+    <el-table
+        :data="materialList"
+        stripe
+        style="width: 100%"
+        header-cell-class-name="table-header"
+        align="center"
+        empty-text="材料列表信息为空，点击标题右侧添加按钮进行添加"
+    >
+      <el-table-column align="left" prop="annexName" label="材料名称" width="280">
+        <template slot-scope="scope">
+          <div class="table-border">{{ scope.row.annexName }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="exampleFileId" label="样例">
+        <template slot-scope="{row}">
+          <el-upload action :on-exceed="list=>handleUpload({file:list[0]}).then(v=>row.exampleFileId=v)"
+                     :http-request="args=>handleUpload(args).then(v=>row.exampleFileId=v)" :limit="1" accept=".jpg,.png">
+            <el-button style="width: 102px">{{ row.exampleFileId ? '重新选择图片' : '选择图片文件' }}</el-button>
+          </el-upload>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="emptyFileId" label="空表">
+        <template slot-scope="{row}">
+          <el-upload action :on-exceed="list=>handleUpload({file:list[0]}).then(v=>row.emptyFileId=v)"
+                     :http-request="args=>handleUpload(args).then(v=>row.emptyFileId=v)" :limit="1" accept=".doc,.docx">
+            <el-button style="width: 102px">{{ row.emptyFileId ? '重新选择word' : '选择word文件' }}</el-button>
+          </el-upload>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="name" label="是否必填">
+        <template slot-scope="scope">
+          <el-switch
+              v-model="scope.row.mustFill"
+              active-value="0" inactive-value="1"
+              active-color="#D0D4DC"
+              inactive-color="#5088FF">
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="操作">
+        <template slot-scope="scope">
+          <span class="iconfont iconEdit icon-color89B" title="编辑" @click="editInfo(scope.$index)" style="margin-right: 10px;"/>
+          <span class="iconfont iconDelete icon-color89B" title="删除" @click="deleteInfo(scope.$index)"/>
+        </template>
+      </el-table-column>
+    </el-table>
     <ai-dialog
         title="添加附件材料"
         :visible.sync="dialog"
diff --git a/project/xiushan/apps/processManagement/mattersConfig/components/baseInfo.vue b/project/xiushan/apps/processManagement/mattersConfig/components/baseInfo.vue
index 13223f40..2a184342 100644
--- a/project/xiushan/apps/processManagement/mattersConfig/components/baseInfo.vue
+++ b/project/xiushan/apps/processManagement/mattersConfig/components/baseInfo.vue
@@ -1,154 +1,133 @@
 <template>
   <section class="base-info">
-    <ai-card title="基本信息">
-      <template #content>
-        <el-form :model="form" :rules="rules" ref="baseInfoForm" label-suffix="：" label-width="100px">
-          <el-form-item label="事项名称" prop="processName">
-            <el-input v-model.trim="form.processName" size="small" clearable placeholder="请输入事项名称" :maxlength="30"
-                      show-word-limit/>
+    <ai-title title="基本信息"/>
+    <el-form :model="form" :rules="rules" ref="baseInfoForm" label-suffix="：" label-width="100px">
+      <el-form-item label="事项名称" prop="processName">
+        <el-input v-model.trim="form.processName" size="small" clearable placeholder="请输入事项名称" :maxlength="30"
+                  show-word-limit/>
+      </el-form-item>
+      <el-row type="type" justify="space-between" :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="所属部门" prop="department">
+            <el-select placeholder="请选择" size="small" v-model="form.department" clearable style="width: 100%;">
+              <el-option
+                  v-for="(item,i) in dict.getDict('hbDepartment')" :key="i"
+                  :label="item.dictName"
+                  :value="item.dictValue">
+              </el-option>
+            </el-select>
           </el-form-item>
-          <el-row type="type" justify="space-between" :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="所属部门" prop="department">
-                <el-select placeholder="请选择" size="small" v-model="form.department" clearable style="width: 100%;">
-                  <el-option
-                    v-for="(item,i) in dict.getDict('hbDepartment')" :key="i"
-                    :label="item.dictName"
-                    :value="item.dictValue">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="所属分类" prop="classificationId">
-                <el-select placeholder="请选择" size="small" v-model="form.classificationId" clearable
-                           style="width: 100%;">
-                  <el-option
-                    v-for="(item,i) in classList" :key="i"
-                    :label="item.name"
-                    :value="item.id">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-form-item label="办结时限" prop="timeLimit">
-            <el-input v-model.trim="form.timeLimit" oninput="value=value.replace(/[^\d]/g,'')" size="small" clearable
-                      placeholder="请输入天数" style="width: 270px;"/>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所属分类" prop="classificationId">
+            <el-select placeholder="请选择" size="small" v-model="form.classificationId" clearable style="width: 100%;">
+              <el-option
+                  v-for="(item,i) in classList" :key="i"
+                  :label="item.name"
+                  :value="item.id">
+              </el-option>
+            </el-select>
           </el-form-item>
-          <el-form-item label="办理须知" prop="needToKnow">
-            <ai-editor v-model="form.needToKnow" :instance="instance" @validate="v=>valid=!v"/>
-          </el-form-item>
-          <el-form-item label="是否启用" prop="processDefStatus">
-            <el-switch
-              v-model="form.processDefStatus"
-              active-color="#5088FF"
-              inactive-color="#D0D4DC" active-value="1" inactive-value="0">
-            </el-switch>
-          </el-form-item>
-        </el-form>
-      </template>
-    </ai-card>
+        </el-col>
+      </el-row>
+      <el-form-item label="办结时限" prop="timeLimit">
+        <el-input v-model.trim="form.timeLimit" oninput="value=value.replace(/[^\d]/g,'')" size="small" clearable
+                  placeholder="请输入天数" style="width: 270px;"/>
+      </el-form-item>
+      <el-form-item label="办理须知" prop="needToKnow">
+        <ai-editor v-model.trim="form.needToKnow" :instance="instance"/>
+      </el-form-item>
+      <el-form-item label="是否启用" prop="processDefStatus">
+        <el-switch
+            v-model="form.processDefStatus"
+            active-color="#D0D4DC"
+            inactive-color="#5088FF" active-value="0" inactive-value="1">
+        </el-switch>
+      </el-form-item>
+    </el-form>
   </section>
 </template>
 
 <script>
 
-  export default {
-    name: "baseInfo",
-    inject: ['config'],
-    props: {
-      instance: Function,
-      dict: Object,
-    },
-    data() {
-      const validTimeLimit = (rule, value, callback) => {
-        if (!value) {
-          return callback(new Error('请输入办结时限'));
-        } else {
-          if (+value <= 0) {
-            return callback(new Error('最小值为1'));
-          }
-          callback();
+export default {
+  name: "baseInfo",
+  inject: ['config'],
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+  data() {
+    const validTimeLimit = (rule, value, callback) =>{
+      if(!value){
+        return callback(new Error('请输入办结时限'));
+      }else {
+        if(+value<=0){
+          return callback(new Error('最小值为1'));
         }
-      }
-      return {
-        form: {
-          processName: "",
-          department: "",
-          classificationId: "",
-          timeLimit: "",
-          needToKnow: "",
-          processDefStatus: "1",
-        },
-        valid:true,
-        classList: [],
-        rules: {
-          processName: [{required: true, message: '请输入事项名称', trigger: 'blur'}],
-          department: [{required: true, message: '请选择所属部门', trigger: 'change'}],
-          classificationId: [{required: true, message: '请选择所属分类', trigger: 'change'}],
-          timeLimit: [{required: true, validator: validTimeLimit, trigger: 'blur'}],
-          needToKnow: [
-            {required: true, message: '请输入办理须知', trigger: 'blur'},
-            {
-              validator: (r, v, cb) => {
-                if (this.valid) {
-                  cb()
-                } else {
-                  cb('字数超过限制')
-                }
-              }
-            }
-          ],
-          processDefStatus: [{required: true, message: '请选择是否启用', trigger: 'change'}],
-        }
-      }
-    },
-    methods: {
-      banseInfoForm() {
-        return new Promise((resolve, reject) => {
-          this.$refs['baseInfoForm'].validate(valid => {
-            if (valid) {
-              resolve(this.form)
-            } else {
-              reject(false)
-            }
-          })
-        })
-      },
-      /**
-       * 获取分类
-       */
-      getClassification() {
-        this.instance.post(`/app/zwspapprovalclassification/list`, null, {
-         params: {
-           current: 1,
-           status: 1,
-           size: 9999
-         }
-        }).then(res => {
-          if (res?.data) {
-            this.classList = res.data.records
-          }
-        })
-      }
-    },
-    created() {
-      this.getClassification()
-      if (this.config.detailObj?.id) {
-        this.$nextTick(_=>{
-          Object.keys(this.form).map(e => this.form[e] = this.config.detailObj[e])
-        })
+        callback();
       }
     }
+    return {
+      form: {
+        processName: "",
+        department: "",
+        classificationId: "",
+        timeLimit: "",
+        needToKnow: "",
+        processDefStatus: false,
+      },
+      classList: [],
+      rules:{
+        processName: [{required: true, message: '请输入事项名称', trigger: 'blur'}],
+        department: [{required: true, message: '请选择所属部门', trigger: 'change'}],
+        classificationId: [{required: true, message: '请选择所属分类', trigger: 'change'}],
+        timeLimit: [{required: true,validator:validTimeLimit ,trigger: 'blur'}],
+        needToKnow: [{required: true, message: '请输入办理须知', trigger: 'blur'}],
+        processDefStatus: [{required: true, message: '请选择是否启用', trigger: 'change'}],
+      }
+    }
+  },
+  methods: {
+    banseInfoForm() {
+      return new Promise((resolve, reject) => {
+        this.$refs['baseInfoForm'].validate(valid => {
+          if (valid) {
+            resolve(this.form)
+          } else {
+            reject(false)
+          }
+        })
+      })
+    },
+    /**
+     * 获取分类
+     */
+    getClassification() {
+      this.instance.post(`/zwspapprovalclassification/list`, null, {
+        current: 1,
+        size: 9999
+      }).then(res => {
+        if (res?.data) {
+          this.classList = res.data.records
+        }
+      })
+    }
+  },
+  created() {
+    this.getClassification()
+    if (this.config.detailObj?.id) {
+      Object.keys(this.form).map(e => this.form[e] = this.config.detailObj[e])
+    }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .base-info {
-    .iconAudit {
-      font-size: 36px;
-      color: #3D94FB;
-    }
+.base-info {
+  .iconAudit {
+    font-size: 36px;
+    color: #3D94FB;
   }
+}
 </style>
diff --git a/project/xiushan/apps/processManagement/mattersConfig/components/processApproval.vue b/project/xiushan/apps/processManagement/mattersConfig/components/processApproval.vue
index 52f8a374..e822d337 100644
--- a/project/xiushan/apps/processManagement/mattersConfig/components/processApproval.vue
+++ b/project/xiushan/apps/processManagement/mattersConfig/components/processApproval.vue
@@ -44,10 +44,30 @@
                   </el-button>
                 </div>
               </div>
-              <ai-wechat-selecter slot="append" :instance="instance" :props="{id:'wxUserId',label:'name'}"
+              <!-- <ai-wechat-selecter slot="append" :instance="instance" :props="{id:'wxUserId',label:'name'}"
                                     v-model="item.candidateList" v-if="item.candidateApproverType==1">
                 <el-button size="mini" type="primary">选择指定人员</el-button>
-              </ai-wechat-selecter>
+              </ai-wechat-selecter> -->
+              <!-- <ai-user-picker :instance="instance" v-model="item.candidateList"  v-if="item.candidateApproverType==1"/> -->
+              <!-- <ai-people :showAiArea="false" customCliker :instance="instance"
+                        unitUrl="/admin/sysunit/getAll2"
+                        :meta="[]" v-model="item.candidateList"
+                        v-if="item.candidateApproverType==1">
+                <el-button size="mini" type="primary">选择指定人员</el-button>
+              </ai-people> -->
+              
+              <!-- <ai-user-picker :instance="instance" v-model="form.portalUserId"/> -->
+              <ai-person-select
+                :chooseUserList="item.candidateList"
+                v-if="item.candidateApproverType==1"
+                :instance="instance" customRightText url="/user/page"
+                headerTitle="人员列表" dialogTitle="选择" :isMultiple="true"
+                @selectPerson="e => changeCharge(e, index)">
+                <template v-slot:option="{ item }">
+                  <span class="iconfont iconProlife">{{ item.name }}</span>
+                  <span>{{ item.phone }}</span>
+                </template>
+              </ai-person-select>
             </div>
           </el-step>
         </el-steps>
@@ -130,6 +150,7 @@ export default {
       bomIndex: '',
     }
   },
+
   computed: {
     addRules() {
       return {
@@ -161,6 +182,10 @@ export default {
         this.form.processNodeList.splice(index, 1)
       })
     },
+
+    changeCharge (e, i) {
+      this.$set(this.form.processNodeList[i], 'candidateList', e)
+    },
     /**
      * 添加流程
      * @param index