From 7c413fa9b20725d974aa779e372d065b8486876d Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 6 Apr 2022 10:19:49 +0800
Subject: [PATCH] 2

---
 .../approvalManage/AppApprovalManage.vue      |   94 ++
 .../components/approvalDetail.vue             | 1162 +++++++++++++++++
 .../components/forMyApproval.vue              |  218 ++++
 .../approvalManage/components/svgIcon.vue     |   25 +
 .../corporateSeal/AppCorporateSeal.vue        |  186 +++
 .../corporateSeal/sealDetail.vue              |  233 ++++
 .../AppExaminationApproval.vue                |  204 +++
 .../components/addClassification.vue          |  197 +++
 .../massesMessage/AppMassesMessage.vue        |  101 ++
 .../massesMessage/components/alreadyList.vue  |  273 ++++
 .../components/messageDetail.vue              |  461 +++++++
 .../mattersConfig/AppMattersConfig.vue        |   82 ++
 .../mattersConfig/components/addConfig.vue    |  252 ++++
 .../mattersConfig/components/applyForm.vue    |  895 +++++++++++++
 .../components/attachmentMaterial.vue         |  196 +++
 .../mattersConfig/components/baseInfo.vue     |  154 +++
 .../mattersConfig/components/config.js        |  203 +++
 .../mattersConfig/components/configList.vue   |  214 +++
 .../mattersConfig/components/guidance.vue     |  219 ++++
 .../mattersConfig/components/index.js         |    4 +
 .../components/processApproval.vue            |  482 +++++++
 .../AppPersonalSignature.vue                  |  365 ++++++
 .../personalSignature/drawInPhone.vue         |  110 ++
 23 files changed, 6330 insertions(+)
 create mode 100644 project/xiushan/apps/processManagement/approvalManage/AppApprovalManage.vue
 create mode 100644 project/xiushan/apps/processManagement/approvalManage/components/approvalDetail.vue
 create mode 100644 project/xiushan/apps/processManagement/approvalManage/components/forMyApproval.vue
 create mode 100644 project/xiushan/apps/processManagement/approvalManage/components/svgIcon.vue
 create mode 100644 project/xiushan/apps/processManagement/corporateSeal/AppCorporateSeal.vue
 create mode 100644 project/xiushan/apps/processManagement/corporateSeal/sealDetail.vue
 create mode 100644 project/xiushan/apps/processManagement/examinationApproval/AppExaminationApproval.vue
 create mode 100644 project/xiushan/apps/processManagement/examinationApproval/components/addClassification.vue
 create mode 100644 project/xiushan/apps/processManagement/massesMessage/AppMassesMessage.vue
 create mode 100644 project/xiushan/apps/processManagement/massesMessage/components/alreadyList.vue
 create mode 100644 project/xiushan/apps/processManagement/massesMessage/components/messageDetail.vue
 create mode 100644 project/xiushan/apps/processManagement/mattersConfig/AppMattersConfig.vue
 create mode 100644 project/xiushan/apps/processManagement/mattersConfig/components/addConfig.vue
 create mode 100644 project/xiushan/apps/processManagement/mattersConfig/components/applyForm.vue
 create mode 100644 project/xiushan/apps/processManagement/mattersConfig/components/attachmentMaterial.vue
 create mode 100644 project/xiushan/apps/processManagement/mattersConfig/components/baseInfo.vue
 create mode 100644 project/xiushan/apps/processManagement/mattersConfig/components/config.js
 create mode 100644 project/xiushan/apps/processManagement/mattersConfig/components/configList.vue
 create mode 100644 project/xiushan/apps/processManagement/mattersConfig/components/guidance.vue
 create mode 100644 project/xiushan/apps/processManagement/mattersConfig/components/index.js
 create mode 100644 project/xiushan/apps/processManagement/mattersConfig/components/processApproval.vue
 create mode 100644 project/xiushan/apps/processManagement/personalSignature/AppPersonalSignature.vue
 create mode 100644 project/xiushan/apps/processManagement/personalSignature/drawInPhone.vue

diff --git a/project/xiushan/apps/processManagement/approvalManage/AppApprovalManage.vue b/project/xiushan/apps/processManagement/approvalManage/AppApprovalManage.vue
new file mode 100644
index 00000000..b887a8f8
--- /dev/null
+++ b/project/xiushan/apps/processManagement/approvalManage/AppApprovalManage.vue
@@ -0,0 +1,94 @@
+<template>
+  <section class="approval-manage">
+    <ai-list v-if="showList">
+      <template slot="title">
+        <ai-title title="审批管理" :isShowBottomBorder="false"></ai-title>
+      </template>
+      <template slot="tabs">
+        <el-tabs class="tabs-page" v-model="currIndex">
+          <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label" :name="String(i)">
+            <component :is="tab.comp" v-if="currIndex==i" :ref="currIndex" :instance="instance" :dict="dict"
+                       :permissions="permissions" :listType="tab.value" @goPage="goPage"/>
+          </el-tab-pane>
+        </el-tabs>
+      </template>
+    </ai-list>
+    <component v-if="!showList" :is="currentPage" :instance="instance" :listType="currentTab.value" :dict="dict"
+               :permissions="permissions" :detail="detail" @goBack="goBack"></component>
+  </section>
+</template>
+
+<script>
+  import forMyApproval from "./components/forMyApproval";
+  import approvalDetail from "./components/approvalDetail";
+
+  export default {
+    name: "AppApprovalManage",
+    label: "审批管理",
+    components: {approvalDetail},
+    provide() {
+      return {
+        approval: this
+      }
+    },
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function
+    },
+    data() {
+      return {
+        currIndex: '0',
+        showList: true,
+        currentPage: "",
+        detail: {},
+      }
+    },
+    computed: {
+      tabs() {
+        return [
+          {
+            label: "待我审批", name: "forMyApproval", value: "0", comp: forMyApproval, detail: approvalDetail,
+            permission: ""
+          },
+          {
+            label: "我已审批", name: "forMyApproval", value: "1", comp: forMyApproval, detail: approvalDetail,
+            permission: ""
+          },
+          {
+            label: "抄送我的", name: "forMyApproval", value: "3", comp: forMyApproval, detail: approvalDetail,
+            permission: ""
+          },
+          {
+            label: "超时督办", name: "forMyApproval", value: "4", comp: forMyApproval, detail: approvalDetail,
+            permission: ""
+          },
+        ]
+      },
+      currentTab() {
+        return this.tabs[this.currIndex] || {}
+      }
+    },
+    methods: {
+      goPage(obj) {
+        this.currentPage = this.tabs[Number(this.currIndex)][obj.key];
+        obj.row && (this.detail = obj.row)
+        this.showList = false;
+      },
+      goBack() {
+        this.showList = true;
+        this.$nextTick(() => {
+          this.$refs[this.currIndex][0].getList();
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .approval-manage {
+    width: 100%;
+    height: 100%;
+    background-color: #F3F6F9;
+  }
+</style>
diff --git a/project/xiushan/apps/processManagement/approvalManage/components/approvalDetail.vue b/project/xiushan/apps/processManagement/approvalManage/components/approvalDetail.vue
new file mode 100644
index 00000000..342859a3
--- /dev/null
+++ b/project/xiushan/apps/processManagement/approvalManage/components/approvalDetail.vue
@@ -0,0 +1,1162 @@
+<template>
+  <div class="app_detail detail-content details-page">
+    <ai-detail>
+      <ai-title slot="title" title="审批详情" isShowBack isShowBottomBorder @onBackClick="approval.goBack()">
+        <template #rightBtn>
+          <template v-if="listType==0&&$permissions('zwsp_oaapprovalapplyinfo_approve')">
+            <el-button size="small" class="iconfont iconClean del-btn-list" @click="agreeRefulse(0)">拒绝</el-button>
+            <el-button size="small" type="primary" class="iconfont iconCorrect" @click="agreeRefulse(1)">同意</el-button>
+          </template>
+          <el-button v-if="listType==2&&detail.approvalStatus==0&&$permissions('app_oaapprovalapplyinfo_del')"
+                     size="small" class="iconfont iconRevoke del-btn-list" style="width: 76px;" @click="recall">撤回
+          </el-button>
+        </template>
+      </ai-title>
+
+      <template #content>
+        <ai-sidebar :tabTitle="menuList" @change="change"></ai-sidebar>
+        <el-scrollbar>
+          <template v-if="currentMenu==0">
+            <ai-card title="基本信息">
+              <template #content>
+                <ul class="detail_ul">
+                  <li style="width: 60%">
+                    <span>审批编号：</span>
+                    <p>{{ detail.serialNumber }}</p>
+                  </li>
+                  <li style="width: 60%">
+                    <span>发起人：</span>
+                    <p>{{ detail.createUserName }}</p>
+                  </li>
+                  <li>
+                    <span>所属部门：</span>
+                    <p> {{ dict.getLabel('hbDepartment', detail.department) || '-' }}</p>
+                  </li>
+                  <li>
+                    <span>所属分类：</span>
+                    <p>{{ detail.classificationName }}</p>
+                  </li>
+                  <li>
+                    <span>申请时间：</span>
+                    <p>{{ detail.createTime |format }}</p>
+                  </li>
+                </ul>
+              </template>
+            </ai-card>
+          </template>
+
+          <template v-if="currentMenu==1">
+            <ai-card title="申请表单">
+              <template #content>
+                <el-form label-suffix="：" label-width="180px" size="small">
+                  <div class="border-wrap">
+                    <div v-for="(item, index) in applyForm" :key="index">
+                      <ai-title :title="index"></ai-title>
+                      <el-form-item v-for="e in item" :key="e.id" :label="[e.fieldName,e.fieldNameSuffix].join('')">
+                        <el-input :value="getFieldValue(e)" readonly style="width: 100%;" v-if="e.fieldDataType!=5"/>
+                        <el-checkbox-group v-model="!e.fieldValue ? '' : String(e.fieldValue).split(',')">
+                          <el-checkbox :label="val.dictValue" disabled
+                                       v-for="(val,idx) in dict.getDict(e.dictionaryCode)" :key="idx">{{val.dictName}}</el-checkbox>
+                        </el-checkbox-group>
+                      </el-form-item>
+                    </div>
+                    <template v-if="applyForm=={}">
+                      <div class="no-data"></div>
+                    </template>
+                  </div>
+                </el-form>
+              </template>
+            </ai-card>
+          </template>
+
+
+          <template v-if="currentMenu==2">
+            <ai-card title="附件材料">
+              <template #content>
+                <ai-table :tableData="detailObj.annexs" :colConfigs="colConfigs" :isShowPagination="false"
+                          :header-cell-style="{fontWeight:'bold',color:'#333'}">
+                  <el-table-column slot="annex" label="材料附件">
+                    <template v-slot="{row}">
+                      <img class="tableImage" :src="row.annexFile.url" alt="" v-viewer>
+                    </template>
+                  </el-table-column>
+                  <el-table-column slot="options" label="操作" align="center">
+                    <template v-slot="{row}">
+                      <el-button v-if="row.exampleFile" @click="downFile(row.exampleFile.accessUrl)" type="text">查看样例
+                      </el-button>
+                      <el-button v-if="row.emptyFile" @click="downFile(row.emptyFile.accessUrl)" type="text">下载空表
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </ai-table>
+              </template>
+            </ai-card>
+          </template>
+
+          <template v-if="currentMenu==3">
+            <ai-card title="审批记录">
+              <template #content>
+                <div class="add_record">
+                  <el-steps direction="vertical">
+                    <el-step v-for="(item,index) in processList" :key="index"
+                             :class="item.isCancelItem ? 'bg-999' : ''">
+                      <div slot="icon" class="record_icon">
+                        <span class="icon_img iconfont iconAll_Profile"
+                              v-if="!item.stepAvatar && !item.userName"></span>
+                        <img v-if="item.stepAvatar" :src="item.stepAvatar" alt="" width="40px" height="40px"
+                             style="border-radius: 50%;margin-top: 3px;" :style="{right:item.stepAvatar?'-12px':''}">
+                        <span class="icon_img"
+                              v-if="!item.stepAvatar && item.userName">{{ item.userName.slice(-2) }}</span>
+
+                        <svg class="svgProgress" aria-hidden="true" v-if="['0','1','6'].includes(item.stepType)">
+                          <use xlink:href="#iconsptg"></use>
+                        </svg>
+
+                        <svg class="svgProgress" aria-hidden="true" v-if="['3','4'].includes(item.stepType)"
+                             :style="{right:!item.stepAvatar?'-8px':''}">
+                          <use xlink:href="#icondsp"></use>
+                        </svg>
+
+                        <svg class="svgProgress" aria-hidden="true" v-if="item.stepType==8">
+                          <use xlink:href="#iconRecalled"></use>
+                        </svg>
+
+                        <svg class="svgProgress" aria-hidden="true" v-if="item.stepType==2">
+                          <use xlink:href="#iconNo_Effect"></use>
+                        </svg>
+
+                      </div>
+                      <div slot="title" class="record_title">
+                        <p>{{ item.title }}</p>
+                        <span>{{ item.approvalTime && moment(item.approvalTime).format("YYYY-MM-DD HH:mm") }}</span>
+                      </div>
+                      <div slot="description" class="record_desc">
+                        <p class="desc_name">
+                          {{ item.title2 }}
+                          <span :style="{color:color(item.stepType)}">{{ item.title2Desc }}</span>
+                        </p>
+                        <!--                    <p class="desc_name">{{item.userName}}</p>-->
+
+                        <span class="desc_name" v-if="item.opinion"
+                              style="line-height: 26px;">审批意见：{{ item.opinion }}</span>
+                        <ul class="desc_ul">
+                          <li class="desc_li" v-if="item.candidateFieldInfos && item.candidateFieldInfos.length"
+                              style="display: flex;flex-direction: column;">
+                            <div v-for="(m,i) in item.candidateFieldInfos" :key="i" style="margin-left: 10px;">
+                              <div class="desc_div">{{ m.fieldName }}<span
+                                  v-if="m.fieldNameSuffix">{{ m.fieldNameSuffix }}</span>:{{
+                                  m.dictionaryCode
+                                      ? dict.getLabel(m.dictionaryCode, m.fieldValue) : m.fieldValue
+                                }}
+                              </div>
+                            </div>
+                          </li>
+                          <li class="desc_li">
+                            <span class="li_opinion" v-if="item.annexFiles && item.annexFiles.length>0">审批附件：</span>
+                            <div style="flex: 1;">
+                              <div class="desc_div">
+                                <img @click="openImg(value.accessUrl)" v-for="(value,_v) in item.pictureFiles" :key="_v"
+                                     :src="value.accessUrl" alt="图片" width="80px" height="80px"
+                                     style="border: 1px solid #ddd;cursor: pointer;">
+                              </div>
+                              <ul class="file_ul">
+                                <li v-for="(v,_i) in item.annexFiles" :key="_i" @click="downFile(v.accessUrl)">
+                                  <p>{{ v.name }}</p>
+                                  <span>{{ Math.round(v.size / 1024) }}KB</span>
+                                </li>
+                              </ul>
+                            </div>
+                          </li>
+                        </ul>
+                        <ul class="desc_ul dia_ul">
+                          <li v-for="(value,index) in item.candidates" :key="index">
+                            <p class="right_name" v-if="value.name">
+                              <span v-if="!value.avatar">{{ value.name.slice(-2) }}</span>
+                              <img v-else :src="value.avatar" alt="" width="40px" height="40px"
+                                   style="border-radius: 50%;">
+                            </p>
+                            <p style="text-align: center;margin-top: 4px;">{{ value.name }}</p>
+                          </li>
+                        </ul>
+                      </div>
+                    </el-step>
+                  </el-steps>
+                </div>
+              </template>
+            </ai-card>
+          </template>
+
+          <template v-if="currentMenu==4 && detailObj.tableType && detailObj.tableType === '2'">
+            <ai-card title="签署文件">
+              <template #right>
+                <el-button type="primary" @click="handleDownload">下载文件</el-button>
+              </template>
+              <template #content>
+                <div class="sealFile">
+                  <el-image :src="sealFileURL" :preview-src-list="[sealFileURL]">
+                    <ai-empty slot="error"/>
+                  </el-image>
+                </div>
+              </template>
+            </ai-card>
+          </template>
+        </el-scrollbar>
+      </template>
+    </ai-detail>
+
+    <el-dialog :visible.sync="isOpen" width="600px">
+      <img :src="imgUrl" alt="" width="100%" height="500px">
+    </el-dialog>
+
+    <!--审批同意、拒绝-->
+    <el-dialog :title="titleType" center :visible.sync="isAgree" width="720px" v-loading="loading"
+               :close-on-click-modal="false" @close="form.fieldInfos = []">
+      <div style="height: 400px;overflow-y: auto;">
+        <el-form size="small" :model="form" label-width="90px" ref="ruleForm" label-position="right"
+                 class="dialog-form">
+          <el-form-item v-for="(op,i) in form.fieldInfos" :key="i"
+                        :label="op.fieldName + (op.fieldNameSuffix ? op.fieldNameSuffix : '')" class="dynamicFormItem"
+                        :prop="`fieldInfos.${i}.fieldValue`"
+                        :rules="{required:op.mustFill==1,message:`请输入${op.fieldName}`}">
+            <el-input placeholder="请输入..." v-model.trim="op.fieldValue"
+                      clearable v-if="op.fieldDataType=='0'" oninput="value=value.replace(/[^\d]/g,'')" show-word-limit
+                      :maxlength="op.fieldLength"/>
+
+            <el-input type="textarea" :rows="3" placeholder="请输入..." v-model.trim="op.fieldValue"
+                       clearable v-if="op.fieldDataType=='1'" show-word-limit
+                      :maxlength="op.fieldLength"/>
+
+            <el-radio-group style="width: 100%;" v-if="op.fieldDataType==4" v-model="op.fieldValue">
+              <el-radio :label="k.dictValue" v-for="(k,m) in dict.getDict(op.dictionaryCode)" :key="m">
+                {{ k.dictName }}
+              </el-radio>
+            </el-radio-group>
+
+            <el-date-picker
+                v-if="op.fieldDataType=='8'"
+                v-model.trim="op.fieldValue"
+                format="yyyy年MM月dd日"
+                value-format="yyyy年MM月dd日"
+                type="date"
+                placeholder="请选择">
+            </el-date-picker>
+
+            <el-select
+                v-if="op.fieldDataType=='9'"
+                size="small"
+                v-model="op.fieldValue"
+                placeholder="请选择"
+                clearable>
+              <el-option
+                  v-for="(k,m) in dict.getDict(op.dictionaryCode)"
+                  :key="m"
+                  :label="k.dictName"
+                  :value="k.dictValue"
+              />
+            </el-select>
+
+          </el-form-item>
+          <el-form-item label="审批意见" prop="opinion" :rules="[{ required: true, message: '请输入审批意见', trigger: 'blur' }]"
+                        v-if="titleType=='审批拒绝'">
+            <el-input type="textarea" :rows="4" v-model.trim="form.opinion" placeholder="请输入" show-word-limit
+                      :maxlength="150"></el-input>
+          </el-form-item>
+          <el-form-item label="图片" prop="imgList" style="position: relative;">
+            <span style="position: absolute;left: -78px;top: 18px;font-size: 12px;color: #999;">（最多9张）</span>
+            <el-upload
+                action
+                class="upload-demo"
+                multiple
+                list-type="picture-card"
+                :http-request="uploadImg"
+                :on-remove="handleRemoveImg"
+                :on-change="handleChangeImg"
+                :file-list="imgList"
+                :limit="9"
+                accept=".jpg,.png,.jpeg"
+                :on-exceed="()=>$message.error('最多只能上传9张图片!')">
+              <div style="position: relative;">
+                <span class="iconfont iconPhoto" style="font-size: 35px;"></span>
+                <p style="position: absolute;top: 30px;left: 46px;">上传图片</p>
+              </div>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="附件" prop="fileList">
+            <el-upload
+                class="upload-demo"
+                action
+                multiple
+                accept=".zip,.rar,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt,.jpg,.png"
+                :http-request="uploadFile"
+                :on-exceed="()=>$message.error('最多只能上传9个附件!')"
+                :on-remove="handleRemove"
+                :on-change="handleChange"
+                :limit="9"
+                :file-list="fileList">
+              <el-button size="mini"> 添加附件</el-button>
+              <div slot="tip" class="el-upload__tip">
+                <p style="line-height: 0;">最多上传9个附件,单个文件最大10MB </p>
+                <p style="line-height: 40px;">
+                  支持.zip、.rar、.doc、.docx、.xls、.xlsx、.ppt、.pptx、.pdf、.txt、.jpg、.png格式</p>
+              </div>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer" style="text-align: center;">
+        <el-button style="width: 92px;" size="small" @click="cancel()">取消</el-button>
+        <el-button style="width: 92px;" size="small" type="primary" @click="saveAgree">确认
+        </el-button>
+      </div>
+    </el-dialog>
+    <svg class="svgStatus" aria-hidden="true" v-if="currentMenu==0">
+      <use xlink:href="#iconsp_ing" v-if="detail.approvalStatus==0"></use>
+      <use xlink:href="#iconsp-pass" v-if="detail.approvalStatus==1"></use>
+      <use xlink:href="#iconsp_refused" v-if="detail.approvalStatus==2"></use>
+      <use xlink:href="#iconcancel" v-if="detail.approvalStatus==3"></use>
+    </svg>
+  </div>
+</template>
+
+<script>
+import moment from 'dayjs'
+import {mapState} from "vuex";
+import Viewer from 'v-viewer'
+import Vue from 'vue'
+
+Vue.use(Viewer)
+
+export default {
+  name: "approvalDetail",
+  inject: ['approval'],
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    detail: Object,
+    listType: String
+  },
+  data() {
+    return {
+      moment,
+      currentMenu: 0,
+      detailObj: {},
+      dataList: [],
+      processList: [],
+      titleType: '',
+      isAgree: false,
+      form: {
+        id: '',
+        pass: true,
+        annex: '',
+        picture: '',
+        option: "",
+        transfers: [],
+        fieldInfos: []
+      },
+      form1: {
+        transfers: [],
+        type: 1
+      },
+      allPerson: [],
+      imgList: [],
+      fileList: [],
+      alreadyList: [],//已审批的
+      imgUrl: '',
+      isOpen: false,
+      url: "/admin/sysunit/getAll2",
+      applyForm: {},
+      menuList: ["基本信息", '申请表单', '附件材料', "审批记录"],
+      loading: false,
+      areaId: "",
+    }
+  },
+  computed: {
+    rules() {
+      return {
+        transfers: [
+          {required: true, message: '请选择转办人', trigger: 'change'}
+        ]
+      }
+    },
+    ...mapState(['user']),
+    sealFileURL() {
+      return this.detailObj?.pdfPicFile?.accessUrl || ""
+    },
+    colConfigs() {
+      return [
+        {label: "材料名称", prop: "annexName"},
+        {slot: "annex"},
+        {slot: "options"}
+      ]
+    }
+  },
+  methods: {
+    handleDownload() {
+      const aLink = document.createElement('a')
+      aLink.download = this.detailObj.pdfFile.fileName || "签署文件"
+      aLink.href = this.detailObj.pdfFile.url
+      aLink.dispatchEvent(new MouseEvent('click', {}))
+    },
+    change(index) {
+      this.currentMenu = index
+      this.searchLog(index)
+    },
+    getValue(e, val) {
+      return e.dictionaryCode && this.dict.getLabel(e.dictionaryCode, val)
+    },
+    getFieldValue(e) {
+      return e.dictionaryCode ? this.dict.getLabel(e.dictionaryCode, e.fieldValue) : e.fieldValue
+    },
+    color(status) {
+      return ['#2EA222', '#2EA222', '#FF4466', '#2EA222', '#FF8822', '#2EA222', '#2EA222', '#FF4466', '#FF8822', '#FF8822'][+status]
+    },
+    /**
+     * 转办
+     */
+    onConfirm() {
+      this.$refs["ruleForm1"].validate(valid => {
+        if (valid) {
+          this.form1.id = this.detail.id;
+          this.instance.post('/oa/approv-alapply-info/approval', this.form1).then(res => {
+            if (res && res.code == 0) {
+              this.$message.success("转办成功");
+              this.approval.goBack()
+            }
+          })
+        }
+      })
+    },
+    cancel() {
+      this.form = {id: '', pass: true, annex: '', picture: '', fieldInfos: []}
+      this.imgList = []
+      this.fileList = []
+      this.isAgree = false
+    },
+    openImg(url) {
+      this.isOpen = true;
+      this.imgUrl = url;
+    },
+    // 下载
+    downFile(url) {
+      window.open(url);
+    },
+    searchLog(index) {
+      if (index == 3) {
+        this.instance.post('/app/approv-alapply-info/processinfo-id2', null, {
+          params: {id: this.detail.id}
+        }).then(res => {
+          if (res && res.data) {
+            let cancelIndex = ''
+            let isCancel = false
+            let dictionaryArr = []
+            res.data.map((item, index) => {
+              item.isCancelItem = false
+              if (item.stepType == 8) {
+                cancelIndex = index
+                isCancel = true
+              }
+
+              if (item.candidateFieldInfos) {
+                item.candidateFieldInfos.map(e => {
+                  if (e.dictionaryCode && dictionaryArr.indexOf(e.dictionaryCode) == -1) {
+                    dictionaryArr.push(e.dictionaryCode)
+                  }
+                })
+              }
+            })
+            if (isCancel) {
+              res.data.map((item, index) => {
+                if (index > cancelIndex) {
+                  item.isCancelItem = true
+                }
+              })
+            }
+            if (dictionaryArr.length) {
+              this.dict.load(dictionaryArr)
+            }
+            this.processList = res.data;
+          }
+        })
+      }
+    },
+    // 节点记录
+    searchDetail(id) {
+      this.instance.post('/app/approv-alapply-info/info-id-table', null, {
+        params: {id}
+      }).then(res => {
+        if (res && res.data) {
+          this.detailObj = res.data
+          let dicts = []
+          res.data.tableInfo.tableFieldInfos.map(item => {
+            item.dictionaryCode && dicts.push(item.dictionaryCode)
+            if (item.fieldType == 0) {
+              let {groupName} = item
+              this.applyForm[groupName]?.push(item) || (this.applyForm[groupName] = [item])
+            }
+          })
+
+          this.dict.load(dicts)
+          if (res.data.approvalStatus == 1) {
+            this.menuList.push('签署文件')
+          }
+        }
+      })
+    },
+    // 上传图片
+    uploadImg(file) {
+      const isLt10M = file.file.size / 1024 / 1024 < 10;
+      if (!isLt10M) {
+        this.$message.error("附件大小不超过10mb!");
+        for (let i = 0; i < this.imgList.length; i++) {
+          if (this.imgList[i].uid == file.file.uid) {
+            this.imgList.splice(i, 1);
+          }
+        }
+        return;
+      }
+      let formData = new FormData();
+      formData.append("file", file.file);
+      this.instance.post(`/admin/file/add`, formData).then(res => {
+        if (res && res.code == 0) {
+          let img = res.data[0].split(';');
+          this.imgList.forEach((item, index) => {
+            if (item.uid == file.file.uid) {
+              this.imgList[index].id = img[1];
+            }
+          })
+        }
+      });
+    },
+    handleRemoveImg(file, fileList) {
+      this.imgList = fileList;
+    },
+    handleChangeImg(file, fileList) {
+      this.imgList = fileList;
+    },
+    // 上传附件
+    uploadFile: function (file) {
+      const isLt10M = file.file.size / 1024 / 1024 < 10;
+      if (!isLt10M) {
+        this.$message.error("附件大小不超过10mb!");
+        for (let i = 0; i < this.fileList.length; i++) {
+          if (this.fileList[i].uid == file.file.uid) {
+            this.fileList.splice(i, 1);
+          }
+        }
+        return;
+      }
+      let formData = new FormData();
+      formData.append("file", file.file);
+      this.instance.post(`/admin/file/add`, formData, {withCredentials: false}).then(res => {
+        if (res && res.code == 0) {
+          let img = res.data[0].split(';');
+          this.fileList.forEach((item, index) => {
+            if (item.uid == file.file.uid) {
+              this.fileList[index].id = img[1];
+            }
+          })
+        }
+      });
+    },
+    handleRemove(file, fileList) {
+      this.fileList = fileList;
+    },
+    handleChange(file, fileList) {
+      this.fileList = fileList;
+    },
+
+    /**
+     * 同意和拒绝
+     * @param index
+     */
+    agreeRefulse(index) {
+      let dictionaryArr = []
+      this.instance.post(`/app/approv-alapply-info/approval-popup?id=${this.detail.id}&type=${index}`).then(res => {
+        if (res && res.data) {
+          if (index == 1) {
+            res.data.fieldInfos.map(e => {
+              if (e.fieldType == 3 && e.dictionaryCode && dictionaryArr.indexOf(e.dictionaryCode) == -1) {
+                dictionaryArr.push(e.dictionaryCode)
+              }
+            })
+            if (dictionaryArr.length) {
+              this.dict.load(dictionaryArr).then(() => {
+                this.form.fieldInfos = res.data.fieldInfos.filter(e => e.fieldType == 3)
+              })
+            } else {
+              this.form.fieldInfos = res.data.fieldInfos.filter(e => e.fieldType == 3)
+            }
+          }
+
+          this.isAgree = true;
+          if (index == 0) {
+            this.form.pass = false;
+            this.titleType = '审批拒绝';
+          } else {
+            this.form.pass = true;
+            this.titleType = '审批同意';
+          }
+        }
+      }).catch(err => {
+        console.log(err);
+      })
+    },
+    saveAgree() {
+      this.form.id = this.detail.id;
+      let arr = [];
+      let brr = [];
+      this.imgList.map(v => {
+        arr.push(v.id)
+      });
+      this.form.picture = arr.join(',');
+      this.fileList.map(_v => {
+        brr.push(_v.id)
+      });
+      this.form.transfers = this.allPerson.candidateList;
+      this.form.annex = brr.join(',');
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          this.instance.post('/app/approv-alapply-info/approval', this.form).then((res) => {
+            if (res?.code == 0) {
+              this.$message.success('审批已提交!');
+              this.isAgree = false
+              this.loading = false
+              this.approval.goBack()
+            }
+          }).catch((err) => {
+            this.$message.error(err.response.data.msg || "服务器异常")
+            this.loading = false
+          })
+        }
+      });
+    },
+    // 撤回
+    recall() {
+      this.$confirm("确定撤回该审批吗？").then(() => {
+        this.instance.post('/app/approv-alapply-info/cancel', null, {
+          params: {id: this.detail.id}
+        }).then((res) => {
+          if (res && res.code == 0) {
+            this.approval.goBack()
+          }
+        }).catch(() => {
+        })
+      })
+    },
+  },
+  created() {
+    this.dict.load(['nodeType', 'approvalStatus', 'hbDepartment', 'sex', 'nation', 'marital', 'education', 'yesOrNo'])
+    this.areaId = this.user.info.areaId.substring(0, 6) + '000000'
+    this.searchDetail(this.detail.id);
+    this.searchLog(this.currentMenu)
+  },
+  filters: {
+    format(time) {
+      return time ? moment(time).format("YYYY-MM-DD HH:mm") : '-'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.app_detail {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  ::v-deep .el-scrollbar {
+    min-height: 0;
+    flex: 1;
+    margin-bottom: 16px;
+
+    .is-horizontal {
+      display: none;
+    }
+
+    .el-scrollbar__wrap {
+      overflow-x: hidden;
+    }
+
+    .right-content {
+      position: relative;
+      height: 100%;
+      padding: 0 !important;
+      width: 760px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      overflow: visible !important;
+
+      .applyForm {
+        min-height: 0;
+        flex: 1;
+      }
+
+      .sealFile {
+        min-height: 0;
+        flex: 1;
+        background: #F7F7F7;
+        border: 1px solid #DDDDDD;
+        padding: 20px;
+
+        .el-image {
+          width: 100%;
+          height: 100%;
+          background: #fff;
+          border: 1px solid #EEEEEE;
+        }
+      }
+    }
+  }
+
+  ::v-deep .dynamicFormItem {
+    .el-form-item__label {
+      line-height: normal;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .tableImage {
+    width: 64px;
+    height: 64px;
+  }
+
+  .com_nav {
+    height: 48px;
+    line-height: 48px;
+    background-color: #fff;
+    padding: 0 16px;
+    font-weight: bold;
+    border-bottom: 1px solid #D8DCE3;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .add_title {
+    height: 56px;
+    line-height: 56px;
+    border-bottom: 1px solid #eee;
+    color: #333;
+    font-weight: bold;
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .border-wrap {
+    box-sizing: border-box;
+    padding: 20px;
+    width: 100%;
+    min-height: 100px;
+    border: 1px solid #6FAFFF;
+
+    .no-data {
+      background-size: 120px 120px;
+      height: 160px;
+      margin: 48px auto 10px;
+    }
+
+    .small-input {
+      width: 48px;
+      margin: 0 8px;
+    }
+
+    ::v-deep .family-info {
+      margin-left: 24px;
+
+      ::v-deep .el-form-item__content {
+        margin-left: 24px !important;
+      }
+    }
+  }
+
+  .svgStatus {
+    position: absolute;
+    top: 80px;
+    right: 380px;
+    width: 90px;
+  }
+
+  .detail_ul {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    font-size: 14px;
+    margin-bottom: 20px;
+
+    li {
+      width: 33%;
+      display: flex;
+      margin-bottom: 8px;
+
+      span {
+        width: 70px;
+        color: #999;
+      }
+
+      p {
+        flex: 1;
+        color: #333;
+      }
+    }
+
+    img {
+      margin-right: 16px;
+      margin-bottom: 16px;
+    }
+  }
+
+  .file_ul {
+    li {
+      height: 40px;
+      line-height: 40px;
+      border: 1px solid #D0D4DC;
+      border-radius: 4px;
+      margin-bottom: 16px;
+      padding: 0 8px;
+      font-size: 14px;
+      color: #333;
+      display: flex;
+      justify-content: space-between;
+      cursor: pointer;
+
+      span {
+        color: #999;
+      }
+    }
+
+    li:hover {
+      color: #2266FF;
+    }
+  }
+
+  .add_record {
+    .record_icon {
+      position: relative;
+
+      .icon_img {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        // background-color: #2266FF;
+        color: #fff;
+        line-height: 44px;
+        font-size: 14px;
+      }
+
+      .svgProgress {
+        height: 14px;
+        width: 14px;
+        position: absolute;
+        bottom: -2px;
+        right: -2px;
+      }
+
+      .pro {
+        height: 14px;
+        width: 14px;
+        position: absolute;
+        bottom: 2px;
+        right: -6px;
+      }
+    }
+
+    .record_title {
+      display: flex;
+      justify-content: space-between;
+
+      p {
+        font-size: 16px;
+        color: #333;
+      }
+
+      span {
+        font-size: 14px;
+        color: #999;
+      }
+    }
+
+    .record_desc {
+      .desc_name {
+        font-size: 14px;
+        color: #666;
+      }
+
+      .desc_ul {
+        font-size: 14px;
+        color: #666;
+
+        .desc_li {
+          display: flex;
+          margin-top: 8px;
+
+          .li_opinion {
+            width: 80px;
+          }
+
+          .desc_div {
+            flex: 1;
+            display: flex;
+            flex-wrap: wrap;
+
+            img {
+              margin-right: 8px;
+              margin-bottom: 8px;
+            }
+          }
+        }
+      }
+
+      .dia_ul {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 10px;
+
+        li {
+          margin-right: 16px;
+        }
+      }
+
+      .desc_status {
+        color: #2EA222;
+      }
+
+      .desc_status2 {
+        color: #FF4466;
+      }
+
+      .desc_status1 {
+        color: #FF8822;
+      }
+    }
+  }
+
+  .right_name {
+    border: 1px solid #fff;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    line-height: 40px;
+    text-align: center;
+    font-size: 14px;
+    background-color: #2266FF;
+    color: #fff;
+    position: relative;
+  }
+
+  ::v-deep .ailist-title__right {
+    font-size: 14px;
+    color: #5088FF;
+    user-select: none;
+    cursor: pointer;
+  }
+}
+</style>
+<style lang="scss">
+.app_detail {
+  height: 100%;
+  overflow: auto;
+
+  .el-step.is-vertical .el-step__line {
+    width: 1px;
+    left: 20px;
+  }
+
+  .el-step__icon {
+    width: 40px;
+    height: 40px;
+    background-color: #2266FF;
+    border: 1px solid #fff;
+  }
+
+  .bg-999 {
+    color: #999;
+
+    .el-step__icon {
+      background-color: #D0D4DC !important;
+    }
+
+    .el-step__line {
+      background-color: #fff;
+    }
+
+    .record_title {
+      p {
+        color: #999 !important;
+      }
+    }
+
+    .desc_name, .desc_ul {
+      color: #999 !important;
+    }
+  }
+
+  .step-hide {
+    .el-step__line {
+      background-color: #fff;
+    }
+  }
+
+
+  .el-step__main {
+    padding-left: 36px !important;
+    margin-bottom: 30px;
+  }
+
+  .line-left {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .dia_ul {
+    justify-content: left;
+    flex-wrap: wrap;
+
+    li {
+      margin-bottom: 10px;
+    }
+  }
+
+  .line-right {
+    width: 90px;
+  }
+
+  .right_p {
+    border: 1px dashed #2266FF;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    line-height: 40px;
+    text-align: center;
+    color: #2266FF;
+    margin: 0 22px;
+    cursor: pointer;
+    box-sizing: border-box;
+
+    .el-icon-plus {
+      font-size: 20px;
+    }
+  }
+
+  .right_name {
+    border: 1px solid #fff;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    line-height: 40px;
+    text-align: center;
+    font-size: 14px;
+    background-color: #2266FF;
+    color: #fff;
+    margin: 0 20px;
+    position: relative;
+
+    .el-icon-arrow-right, .el-icon-circle-plus {
+      position: absolute;
+      top: 15px;
+      right: -30px;
+      color: #999;
+    }
+
+    .el-icon-error {
+      position: absolute;
+      top: 0;
+      color: #333;
+      right: -6px;
+      cursor: pointer;
+    }
+  }
+
+  .material {
+    box-sizing: border-box;
+    padding: 30px 40px;
+
+    .mat-title {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      & > p:nth-child(1) {
+        width: 120px;
+        text-align: center;
+      }
+
+      & > p:nth-child(2) {
+        width: 350px;
+        text-align: center;
+      }
+
+      & > p:nth-child(3) {
+        width: 145px;
+        text-align: center;
+      }
+
+      & > p {
+        color: #333333;
+      }
+    }
+
+    .mat-item {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 13px;
+
+      & > p:nth-child(1) {
+        width: 120px;
+        text-align: center;
+      }
+
+      & > p:nth-child(2) {
+        width: 350px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+
+        & > img {
+          margin-right: 8px;
+          margin-bottom: 8px;
+          width: 64px;
+          height: 64px;
+        }
+      }
+
+      & > p:nth-child(3) {
+        width: 145px;
+        color: #5088FF;
+        user-select: none;
+        cursor: pointer;
+        text-align: center;
+
+        & > span:nth-child(2) {
+          margin-left: 16px;
+        }
+      }
+    }
+  }
+
+  .upload-demo {
+    ::v-deep .el-icon-close {
+      transform: translateX(-50px);
+    }
+  }
+
+  ::v-deep .el-radio {
+    margin-bottom: 10px;
+  }
+
+  .dialog-form {
+    ::v-deep .el-form-item__label {
+      justify-content: flex-end;
+    }
+  }
+
+}
+</style>
diff --git a/project/xiushan/apps/processManagement/approvalManage/components/forMyApproval.vue b/project/xiushan/apps/processManagement/approvalManage/components/forMyApproval.vue
new file mode 100644
index 00000000..e41af2a5
--- /dev/null
+++ b/project/xiushan/apps/processManagement/approvalManage/components/forMyApproval.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="for-my-approval">
+    <ai-list isTabs>
+      <template #content>
+        <ai-search-bar>
+          <template #right>
+            <el-input
+              v-model="search.param"
+              size="small"
+              placeholder="标题/发起人"
+              @keyup.enter.native="search.current = 1, getList()"
+              @clear="reset"
+              clearable
+              suffix-icon="iconfont iconSearch"/>
+          </template>
+        </ai-search-bar>
+        <ul class="list-wrap">
+          <li v-for="(item,index) in tableData" :key="index" @click="goTo('detail',item)">
+            <div class="list-title">{{item.processDefName}}</div>
+            <div class="info">
+              <div class="item">
+                <label>发起人:</label>
+                <span>{{item.createUserName}}</span>
+              </div>
+              <div class="item">
+                <label>所属部门:</label>
+                <span>{{dict.getLabel('hbDepartment',item.department)}}</span>
+              </div>
+              <div class="item">
+                <label>所属分类:</label>
+                <span>{{item.classificationName}}</span>
+              </div>
+              <div class="item">
+                <label>发起时间:</label>
+                <span>{{item.createTime|format}}</span>
+              </div>
+            </div>
+            <svgIcon :class-name="icon(item.approvalStatus)" class="svg"></svgIcon>
+          </li>
+        </ul>
+        <div class="no-data" v-if="tableData.length==0"></div>
+        <el-pagination class="pagination" background :current-page="search.current" @current-change="handleCurrent"
+                       layout="total,prev, pager, next,sizes, jumper"
+                       :total="total"
+                       @size-change="handleSizeChange"
+                       :page-size="search.size"
+                       :page-sizes="[10, 20, 50, 100,200]">
+        </el-pagination>
+      </template>
+    </ai-list>
+  </div>
+</template>
+
+<script>
+  import svgIcon from "./svgIcon";
+  import day from 'dayjs'
+
+  export default {
+    name: "forMyApproval",
+    components: {svgIcon},
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function,
+      listType: String,
+    },
+    data() {
+      return {
+        search: {
+          param:"",
+          current: 1,
+          size: 10,
+        },
+        tableData: [],
+        total: 0
+      }
+    },
+    methods: {
+      icon(icon) {
+        if(icon==0){
+          return "iconsp_ing"
+        }else if(icon==1){
+          return "iconsp-pass"
+        }else if(icon==2){
+          return "iconsp_refused"
+        }
+        return "iconcancel"
+      },
+
+      goTo(key = '', row) {
+        this.$emit('goPage', {key, row});
+      },
+
+      reset() {
+        this.search.param = ""
+        this.search.current = 1
+        this.search.size = 10
+        this.getList()
+      },
+
+      handleCurrent(val) {
+        this.search.current = val;
+        this.getList();
+      },
+
+      handleSizeChange(val) {
+        this.search.size = val;
+        this.getList();
+      },
+
+      getList() {
+        this.instance.post(`/app/approv-alapply-info/list`,null,{
+          params:{
+            listType: this.listType,
+            ...this.search
+          }
+        }).then(res => {
+          if (res && res.data) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      }
+    },
+
+    filters:{
+      format(time){
+        return time ? day(time).format('YYYY-MM-DD HH:mm') : '-'
+      }
+    },
+
+    created(){
+      this.dict.load(['hbDepartment']).then(()=>{
+        this.getList()
+      })
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .for-my-approval {
+    height: 100%;
+    background: #f3f6f9;
+    overflow: auto;
+
+    .list-wrap {
+      width: 100%;
+      min-height: 100%;
+
+      li {
+        width: 100%;
+        height: 80px;
+        border-radius: 4px;
+        border: 1px solid #D8E0E8;
+        margin-bottom: 8px;
+        box-sizing: border-box;
+        padding: 16px 32px;
+        user-select: none;
+        cursor: pointer;
+        position: relative;
+
+        .list-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #333333;
+          padding-bottom: 6px;
+        }
+
+        .info {
+          width: 90%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .item {
+            width: 30%;
+            & > label {
+              color: #666666;
+            }
+
+            & > span {
+              color: #333333;
+            }
+          }
+
+        }
+
+        .svg {
+          width: 66px;
+          height: 61px;
+          position: absolute;
+          right: 0;
+          bottom: 0;
+        }
+      }
+    }
+
+    .no-data {
+      background-size: 120px 120px;
+      height: 160px;
+      margin: 48px auto 10px;
+    }
+
+    .pagination {
+      box-sizing: border-box;
+      padding: 24px 0 32px 0;
+    }
+
+    .iconfont {
+      user-select: none;
+      cursor: pointer;
+    }
+
+    ::v-deep .AiSearchBar {
+      margin-bottom: 16px;
+    }
+  }
+</style>
diff --git a/project/xiushan/apps/processManagement/approvalManage/components/svgIcon.vue b/project/xiushan/apps/processManagement/approvalManage/components/svgIcon.vue
new file mode 100644
index 00000000..f043e552
--- /dev/null
+++ b/project/xiushan/apps/processManagement/approvalManage/components/svgIcon.vue
@@ -0,0 +1,25 @@
+<template>
+  <svg class="icon" aria-hidden="true" v-bind="$attrs">
+    <use :xlink:href="iconName"></use>
+  </svg>
+</template>
+
+<script>
+  export default {
+    name: "svgIcon",
+    props: {
+      className: {
+        type: String,
+      }
+    },
+    computed: {
+      iconName() {
+        return `#${this.className}`
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/project/xiushan/apps/processManagement/corporateSeal/AppCorporateSeal.vue b/project/xiushan/apps/processManagement/corporateSeal/AppCorporateSeal.vue
new file mode 100644
index 00000000..a4e82bf6
--- /dev/null
+++ b/project/xiushan/apps/processManagement/corporateSeal/AppCorporateSeal.vue
@@ -0,0 +1,186 @@
+<template>
+  <section class="AppCorporateSeal">
+      <ai-list v-if="showList">
+        <template slot="title">
+          <ai-title title="企业印章" :isShowBottomBorder="true"></ai-title>
+        </template>
+        <template slot="content">
+          <div class="signaturePane">
+            <div class="signatureCard" v-for="(op,i) in signatures" :key="i">
+              <div class="default" v-if="op.isDefault==1">默认</div>
+              <div class="body">
+                <el-image :src="`data:image/png;base64,${op.signSealData}`"/>
+              </div>
+              <div class="footer">
+                <el-button type="text" :disabled="op.isDefault==1" @click.stop="handleSetDefault(op.id)">设为默认</el-button>
+                <hr/>
+                <el-button type="text" :disabled="op.isDefault==1||op.signType==1" @click.stop="handleDelete(op.id)">删除
+                </el-button>
+              </div>
+            </div>
+            <div class="signatureCard add" @click="showList=false">
+              <ai-icon icon="iconAdd" size="32px"/>
+              <span>点击添加印章</span>
+            </div>
+          </div>
+        </template>
+      </ai-list>
+    <seal-detail v-else/>
+  </section>
+</template>
+
+<script>
+  import SealDetail from "./sealDetail";
+
+  export default {
+    name: "AppCorporateSeal",
+    label: "企业印章",
+    components: {SealDetail},
+    provide() {
+      return {
+        seal: this
+      }
+    },
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function
+    },
+    data() {
+      return {
+        signatures: [],
+        showList: true
+      }
+    },
+    created() {
+      this.getSignatures()
+    },
+    methods: {
+      getSignatures() {
+        this.instance.post("/app/syssignaccount/list", null, {
+          params: {
+            signType: 2,
+            size: 999
+          }
+        }).then(res => {
+          if (res?.data) {
+            this.signatures = res.data.records
+          }
+        })
+      },
+      handleSetDefault(id) {
+        this.$confirm("是否设置该印章为默认印章?").then(() => {
+          this.instance.post("/app/syssignaccount/default", null, {params: {id, listType: 1}}).then(res => {
+            if (res?.code == 0) {
+              this.$message.success("设置成功!")
+              this.getSignatures()
+            }
+          }).catch(() => 0)
+        })
+      },
+      handleDelete(ids) {
+        this.$confirm("是否删除该印章?").then(() => {
+          this.instance.post("/app/syssignaccount/delete", null, {params: {ids}}).then(res => {
+            if (res?.code == 0) {
+              this.$message.success("删除成功!")
+              this.getSignatures()
+            }
+          }).catch(() => 0)
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppCorporateSeal {
+    height: 100%;
+    background: #f3f6f9;
+
+    ::v-deep .signaturePane {
+      display: flex;
+      gap: 16px;
+      flex-wrap: wrap;
+      padding: 16px;
+
+      .signatureCard {
+        width: 290px;
+        height: 258px;
+        background: #FFFFFF;
+        border-radius: 4px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+
+        &.add {
+          justify-content: center;
+          align-items: center;
+          color: #666666;
+          cursor: pointer;
+
+          .AiIcon {
+            width: 32px;
+            height: 32px;
+            font-size: 32px;
+          }
+
+          & > span {
+            font-size: 12px;
+            line-height: 16px;
+          }
+        }
+
+        .default {
+          position: absolute;
+          width: 56px;
+          height: 24px;
+          background: #3573FF;
+          border-radius: 0 0 4px 0;
+          top: 0;
+          left: 0;
+          text-align: center;
+          line-height: 24px;
+          font-size: 12px;
+          color: #FFF;
+        }
+
+        .body {
+          min-height: 0;
+          flex: 1;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 50px;
+          cursor: pointer;
+
+        }
+
+        .footer {
+          flex-shrink: 0;
+          height: 40px;
+          background: rgba(#30426F, .5);
+          display: flex;
+          align-items: center;
+          padding: 8px 0;
+          box-sizing: border-box;
+
+          hr {
+            height: 100%;
+            border-color: rgba(#fff, .5);
+          }
+
+          & > .el-button {
+            flex: 1;
+            color: #fff;
+
+            &[disabled] {
+              color: rgba(#fff, .5);
+            }
+          }
+        }
+      }
+    }
+  }
+
+</style>
diff --git a/project/xiushan/apps/processManagement/corporateSeal/sealDetail.vue b/project/xiushan/apps/processManagement/corporateSeal/sealDetail.vue
new file mode 100644
index 00000000..36d36da6
--- /dev/null
+++ b/project/xiushan/apps/processManagement/corporateSeal/sealDetail.vue
@@ -0,0 +1,233 @@
+<template>
+  <section class="sealDetail">
+    <ai-detail>
+      <template #title>
+        <ai-title title="添加企业印章" isShowBack isShowBottomBorder @onBackClick="back"/>
+      </template>
+      <template #content>
+        <el-form size="small" ref="SealForm" :model="form" :rules="rules" label-suffix="：" label-width="160px">
+          <ai-title title="单位信息" isShowBottomBorder/>
+          <el-form-item label="单位名称" prop="organizeName">
+            <el-input clearable v-model="form.organizeName" placeholder="请输入..." maxlength="25" show-word-limit/>
+          </el-form-item>
+          <el-form-item label="单位类型" prop="organizeType">
+            <el-select clearable v-model="form.organizeType" placeholder="请输入...">
+              <el-option v-for="(op,i) in $dict.getDict('organizeType')" :key="i" :value="op.dictValue"
+                         :label="op.dictName"/>
+            </el-select>
+          </el-form-item>
+          <div class="flexFillRow">
+            <el-form-item label="企业注册类型" prop="organRegType">
+              <el-select clearable v-model="form.organRegType" placeholder="请输入...">
+                <el-option v-for="(op,i) in $dict.getDict('organRegType')" :key="i" :value="op.dictValue"
+                           :label="op.dictName"/>
+              </el-select>
+            </el-form-item>
+            <el-form-item v-if="!!form.organRegType" :label="$dict.getLabel('organRegType',form.organRegType)"
+                          prop="organCode">
+              <el-input clearable v-model="form.organCode" placeholder="请输入..."/>
+            </el-form-item>
+            <div v-else/>
+          </div>
+          <div class="flexFillRow">
+            <el-form-item label="注册类型" prop="registerType">
+              <el-select clearable v-model="form.registerType" placeholder="请输入...">
+                <el-option v-for="(op,i) in $dict.getDict('registerType')" :key="i" :value="op.dictValue"
+                           :label="op.dictName"/>
+              </el-select>
+            </el-form-item>
+            <div/>
+          </div>
+          <template v-if="form.registerType==1">
+            <div class="flexFillRow">
+              <el-form-item label="代理人姓名" prop="agentName">
+                <el-input clearable v-model="form.agentName" placeholder="请输入..."/>
+              </el-form-item>
+              <el-form-item label="代理人身份证号" prop="agentIdNumber">
+                <el-input clearable v-model="form.agentIdNumber" placeholder="请输入..."/>
+              </el-form-item>
+            </div>
+            <div class="flexFillRow">
+              <el-form-item label="代理人手机号" prop="signPhone">
+                <el-input clearable v-model="form.signPhone" placeholder="请输入..."/>
+              </el-form-item>
+              <div/>
+            </div>
+          </template>
+          <template v-if="form.registerType==2">
+            <div class="flexFillRow">
+              <el-form-item label="法人姓名" prop="legalName">
+                <el-input clearable v-model="form.legalName" placeholder="请输入..."/>
+              </el-form-item>
+              <el-form-item label="法人身份证号" prop="legalIdNumber">
+                <el-input clearable v-model="form.legalIdNumber" placeholder="请输入..."/>
+              </el-form-item>
+            </div>
+            <div class="flexFillRow">
+              <el-form-item label="法人手机号" prop="signPhone">
+                <el-input clearable v-model="form.signPhone" placeholder="请输入..."/>
+              </el-form-item>
+              <div/>
+            </div>
+          </template>
+          <ai-title title="印章信息" isShowBottomBorder/>
+          <el-form-item class="sealImageTypes" label="生成印章类型" prop="organizeTemplateType">
+            <div v-for="(op,i) in sealImageTypes" :key="i" class="item" @click="form.organizeTemplateType=op.value">
+              <el-image :src="op.image" fit="contain"/>
+              <el-radio :label="op.value" v-model="form.organizeTemplateType">{{ op.name }}</el-radio>
+            </div>
+          </el-form-item>
+          <el-form-item label="横向文内容" prop="htext">
+            <el-input clearable v-model="form.htext" placeholder="0-8个字，如合同专用章，财务专用章等" maxlength="8" show-word-limit/>
+          </el-form-item>
+          <el-form-item label="下弦文内容" prop="qtext">
+            <el-input clearable v-model="form.qtext" placeholder="0-20个字，下弦文是指的贵司公章底部一串防伪数字" maxlength="20"
+                      show-word-limit/>
+          </el-form-item>
+        </el-form>
+      </template>
+      <template #footer>
+        <el-button @click="back">取消</el-button>
+        <el-button type="primary" @click="handleSubmit" v-loading="loading">提交</el-button>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "sealDetail",
+  inject: ['seal'],
+  data() {
+    return {
+      form: {
+        organizeTemplateType: "STAR",
+        organizeType: "4",
+        organRegType: "NORMAL",
+        registerType: "1"
+      },
+      loading: false
+    }
+  },
+  computed: {
+    sealImageTypes() {
+      return this.$dict.getDict("organizeTemplateType")?.map(e => ({
+        image: e.dictColor,
+        value: e.dictValue,
+        name: e.dictName
+      })) || []
+    },
+    rules() {
+      return {
+        organizeName: [{required: true, message: "请填写单位名称"}],
+        organCode: [{required: true, message: `请填写${this.$dict.getLabel('organRegType', this.form.organRegType)}`}],
+        legalName: [{required: true, message: "请填写法人姓名"}],
+        agentName: [{required: true, message: "请填写代理人姓名"}],
+        organizeTemplateType: [{required: true}],
+        htext: [{required: true, message: "请填写横向文内容"}],
+        qtext: [{required: true, message: "请填写下弦文内容"}],
+        organizeType: [{required: true, message: "请选择单位类型"}],
+        organRegType: [{required: true, message: "请选择企业注册类型"}],
+        registerType: [{required: true, message: "请选择注册类型"}],
+        signPhone: [
+          {required: true, message: "请填写手机号码"},
+          {pattern: /^1[3456789]\d{9}$/, message: "手机号码格式有误"}
+        ],
+        legalIdNumber: [
+          {required: true, message: "请填写法人身份证号码"},
+          {validator: (r, v, cb) => cb(this.idCardNoUtil.checkIdCardNo(v) ? undefined : "身份证号码格式有误")}
+        ],
+        agentIdNumber: [
+          {required: true, message: "请填写代理人身份证号码"},
+          {validator: (r, v, cb) => cb(this.idCardNoUtil.checkIdCardNo(v) ? undefined : "身份证号码格式有误")}
+        ],
+      }
+    }
+  },
+  created() {
+    this.$dict.load("registerType", "organRegType", "organizeType", "organizeTemplateType")
+  },
+  methods: {
+    back() {
+      this.seal.showList = true
+      this.seal.getSignatures()
+    },
+    handleSubmit() {
+      this.$refs.SealForm.validate(v => {
+        if (v) {
+          this.loading = true
+          this.seal.instance.post("/app/syssignaccount/register", {
+            userType: 0,
+            signType: 2,
+            signPhone: this.form.signPhone,
+            registerInfo: {...this.form, legalArea: 0},
+            style: {...this.form, sealColor: "RED"}
+          }).then(res => {
+            this.loading = false
+            if (res?.code == 0) {
+              this.$message.success("添加成功!")
+              this.back()
+            }
+          }).catch(() => this.loading = false)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sealDetail {
+  height: inherit;
+
+  ::v-deep .ai-detail__content--wrapper {
+    .el-form {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+
+    .el-form-item {
+      margin-bottom: 0;
+
+      .el-select {
+        width: 100%;
+      }
+
+      &.sealImageTypes > .el-form-item__content {
+        display: flex;
+        gap: 40px;
+
+        .item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          cursor: pointer;
+
+          .el-image {
+            width: 80px;
+            height: 80px;
+          }
+        }
+      }
+    }
+
+    .flexFillRow {
+      display: flex;
+      align-items: center;
+
+      & > * {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+  }
+
+  ::v-deep .ai-detail__footer > .el-button {
+    width: 92px;
+    height: 32px;
+  }
+}
+</style>
diff --git a/project/xiushan/apps/processManagement/examinationApproval/AppExaminationApproval.vue b/project/xiushan/apps/processManagement/examinationApproval/AppExaminationApproval.vue
new file mode 100644
index 00000000..8693882b
--- /dev/null
+++ b/project/xiushan/apps/processManagement/examinationApproval/AppExaminationApproval.vue
@@ -0,0 +1,204 @@
+<template>
+  <section class="examination-approval">
+    <ai-list v-if="!showList">
+      <template #title>
+        <ai-title title="审批分类" :isShowBottomBorder="true" :instance="instance"></ai-title>
+      </template>
+      <template #content>
+        <ai-search-bar>
+          <template #left>
+            <el-button type="primary" icon="iconfont iconAdd" @click="showList = true">添加分类</el-button>
+          </template>
+          <template #right>
+            <el-input
+              v-model="search.name"
+              size="small"
+              placeholder="分类名称/创建人"
+              @keyup.enter.native="search.current = 1, getList()"
+              @clear="reset"
+              clearable
+              suffix-icon="iconfont iconSearch"/>
+          </template>
+        </ai-search-bar>
+        <ai-table
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="total"
+          :header-cell-style="{fontWeight:'bold',color:'#333'}"
+          :current.sync="search.current"
+          :size.sync="search.size"
+          @getList="getList">
+
+          <el-table-column label="是否启用" slot="status" align="center" width="150">
+            <template v-slot="{row}">
+              <el-switch
+                v-model="row.status"
+                @change="onChange(row)" active-value="1" inactive-value="0"
+                active-color="#5088FF"
+                inactive-color="#D0D4DC">
+              </el-switch>
+            </template>
+          </el-table-column>
+          
+          <el-table-column label="操作" slot="options" align="center" width="150">
+            <template v-slot="{row}">
+              <el-button type="text" title="修改" @click="editInfo(row)">修改</el-button>
+              <el-button type="text" title="删除" @click="deleteInfo(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+    <addClassification v-else @back="showList=false;row={},getList()" :instance="instance"
+                       :row="row"></addClassification>
+  </section>
+</template>
+
+<script>
+
+  import addClassification from "./components/addClassification";
+  import day from 'dayjs'
+
+  export default {
+    name: "AppExaminationApproval",
+    label: "审批分类",
+    components: {addClassification},
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function
+    },
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: "",
+        },
+        total: 0,
+        tableData: [],
+        row: {},
+        showList: false
+      }
+    },
+    computed: {
+      colConfigs() {
+        return [
+          {
+            prop: 'name',
+            align: 'left',
+            label: '分类名称',
+          },
+          {
+            prop: 'desc',
+            align: 'left',
+            label: '分类描述',
+          },
+          {
+            prop: 'createUserName',
+            align: 'center',
+            label: '创建人',
+          },
+          {
+            prop: 'createTime',
+            align: 'center',
+            label: '创建日期',
+          },
+          {
+            prop: 'showIndex',
+            align: 'center',
+            label: '排序',
+          },
+          {
+            slot: 'status',
+            align: 'center',
+            label: '是否启用',
+          },
+          {
+            slot: 'options',
+            align: 'center',
+            label: '操作',
+          },
+        ]
+      },
+    },
+    methods: {
+      /**
+       * 编辑
+       * */
+      editInfo(row) {
+        this.row = row
+        this.showList = true
+      },
+
+      /**
+       * 启用、停用
+       */
+      onChange(row) {
+        this.instance.post(`/app/zwspapprovalclassification/enable?id=${row.id}`).then(res => {
+          if (res?.code == 0) {
+            this.$message.success(+row.status ? "已启用" : '不启用')
+            this.getList()
+          }
+        })
+      },
+
+      reset() {
+        this.search.name = ""
+        this.getList()
+      },
+
+      getList() {
+        this.instance.post(`/app/zwspapprovalclassification/list`, null, {
+          params: {
+            ...this.search,
+          },
+        }).then(res => {
+          if (res && res.data) {
+            this.tableData = res.data.records.map(e => ({
+              ...e,
+              createTime: day(e.createTime).format("YYYY-MM-DD"),
+            }));
+            this.total = res.data.total;
+          }
+        })
+      },
+
+      /**
+       * 删除
+       */
+      deleteInfo({id}) {
+        this.$confirm("是否删除？").then(() => {
+          this.instance.post(`/app/zwspapprovalclassification/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success("删除成功")
+              this.getList()
+            }
+          })
+        })
+      },
+    },
+
+    mounted() {
+      this.getList()
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .examination-approval {
+    height: 100%;
+    background: #f3f6f9;
+    overflow: auto;
+
+    .iconfont {
+      user-select: none;
+      cursor: pointer;
+    }
+
+    ::v-deep .ai-table {
+      margin-top: 16px;
+    }
+
+  }
+</style>
diff --git a/project/xiushan/apps/processManagement/examinationApproval/components/addClassification.vue b/project/xiushan/apps/processManagement/examinationApproval/components/addClassification.vue
new file mode 100644
index 00000000..e55b863e
--- /dev/null
+++ b/project/xiushan/apps/processManagement/examinationApproval/components/addClassification.vue
@@ -0,0 +1,197 @@
+<template>
+  <section class="add-classification">
+    <ai-detail>
+      <ai-title slot="title" :title="pageTitle" isShowBack isShowBottomBorder @onBackClick="$emit('back')"/>
+      <template #content>
+        <ai-card title="基本信息">
+          <template #content>
+            <el-form :model="form" :rules="rules" ref="addClassification" label-suffix="：" label-width="100px"
+                     size="small">
+              <el-form-item label="分类名称" prop="name">
+                <el-input v-model.trim="form.name" size="small" clearable placeholder="如“社会保障”（限10个字）" :maxlength="10"
+                          show-word-limit/>
+              </el-form-item>
+              <el-form-item label="排序" prop="showIndex">
+                <el-input v-model.number="form.showIndex" size="small" clearable placeholder="请输入数字，数字越小排序越前"/>
+              </el-form-item>
+              <el-form-item label="分类描述" prop="desc">
+                <el-input v-model.trim="form.desc" type="textarea" size="small" clearable placeholder="限500个字"
+                          :maxlength="500" show-word-limit :rows="4"/>
+              </el-form-item>
+              <el-form-item label="分类图标" prop="icon" class="icon-form">
+                <el-upload ref="iconUploader" action="#" :auto-upload="false" :on-change="handleUploadIcon" :limit="1"
+                           :show-file-list="false">
+                  <el-image v-if="!!form.icon" class="el-upload-list__item" :src="form.icon">
+                    <i class="el-icon-picture-outline"/>
+                  </el-image>
+                  <div v-else class="el-upload--picture-card"><i class="el-icon-plus"/></div>
+                </el-upload>
+              </el-form-item>
+              <el-form-item label="是否启用" prop="status">
+                <el-radio v-model="form.status" label="1">是</el-radio>
+                <el-radio v-model="form.status" label="0">否</el-radio>
+              </el-form-item>
+            </el-form>
+          </template>
+        </ai-card>
+      </template>
+      <template #footer>
+        <el-button class="btn" @click="$emit('back')">取消</el-button>
+        <el-button class="btn" type="primary" @click="submit">提交</el-button>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+
+  export default {
+    name: "addClassification",
+    props: {
+      instance: Function,
+      row: Object,
+    },
+    data() {
+      return {
+        form: {
+          id: "",
+          name: "",
+          showIndex: "",
+          desc: "",
+          icon: "",
+          status: "1"
+        }
+      }
+    },
+    computed: {
+      pageTitle() {
+        return this.row?.id ? "编辑分类" : "添加分类"
+      },
+      rules() {
+        return {
+          name: [{required: true, message: '请输入分类名称', trigger: 'blur'}],
+          showIndex: [
+            {required: true, message: '请输入排序数字'},
+            {min: 1, max: 999, type: "number", message: '排序只能输入1~999之间的整数'},
+          ],
+          desc: [{required: true, message: '请填写描述', trigger: 'blur'}],
+          icon: [{required: true, message: '请选择分类图标', trigger: 'blur'}],
+          status: [{required: true, message: '请选择是否启用', trigger: 'change'}],
+        }
+      }
+    },
+    methods: {
+
+      /**
+       * 提交
+       */
+      submit() {
+        this.$refs['addClassification'].validate(valid => {
+          if (valid) {
+            this.instance.post(`/app/zwspapprovalclassification/addOrUpdate`, {
+              ...this.form,
+              status: Number(this.form.status)
+            }).then(res => {
+              if (res.code == 0) {
+                this.$message.success(this.row.id ? "编辑成功" : "添加成功")
+                this.$emit('back')
+              }
+            })
+          }
+        })
+      },
+      /**
+       * 获取详情
+       */
+      getDetail() {
+        this.instance.post(`/app/zwspapprovalclassification/queryDetailById?id=${this.row.id}`).then(res => {
+          if (res?.data) {
+            this.form = res.data
+          }
+        })
+      },
+      /**
+       * 上传图标
+       */
+      handleUploadIcon(file) {
+        let data = new FormData()
+        data.append("file", file.raw)
+        this.instance.post(`/admin/file/add`, data).then(res => {
+          if (res?.data) {
+            this.form.icon = res.data?.[0].replace(/;.*/, '')
+          }
+          this.$refs.iconUploader?.clearFiles()
+        }).catch(() => this.$refs.iconUploader?.clearFiles());
+      }
+    },
+    created() {
+      if (this.row.id) {
+        this.getDetail()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .add-classification {
+    height: 100%;
+
+    .iconAudit {
+      font-size: 36px;
+      color: #3D94FB;
+    }
+
+    .el-upload-list__item {
+      width: 80px;
+      height: 80px;
+    }
+
+    .icon-form {
+      ::v-deep .el-form-item__content {
+        display: flex;
+      }
+    }
+
+    .select-icon {
+      width: 96px;
+      height: 28px;
+      line-height: 0;
+    }
+
+    .iconfont {
+      margin-right: 8px;
+    }
+
+    .icon-style {
+      display: flex;
+      flex-wrap: wrap;
+
+      .icon:hover {
+        border-color: #5088FF;
+      }
+
+      .icon_color {
+        border-color: #5088FF;
+      }
+    }
+
+    .icon {
+      width: 48px;
+      height: 48px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-right: 16px;
+      margin-bottom: 16px;
+      cursor: pointer;
+    }
+
+    .btn {
+      width: 92px;
+      height: 32px;
+
+      &:nth-child(2) {
+        margin-left: 24px;
+      }
+    }
+  }
+</style>
diff --git a/project/xiushan/apps/processManagement/massesMessage/AppMassesMessage.vue b/project/xiushan/apps/processManagement/massesMessage/AppMassesMessage.vue
new file mode 100644
index 00000000..197ba338
--- /dev/null
+++ b/project/xiushan/apps/processManagement/massesMessage/AppMassesMessage.vue
@@ -0,0 +1,101 @@
+<template>
+  <section class="AppLeavingMessage">
+    <ai-list v-if="!showDetail">
+      <template slot="title">
+        <ai-title title="群众留言" :isShowBottomBorder="false" :instance="instance" :isShowArea="true" v-model="areaId" @change="changeArea"></ai-title>
+      </template>
+      <template slot="tabs">
+        <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs-page">
+          <el-tab-pane v-for="(item, index) in paneList" :key="index" :label="item.label" :name="item.name">
+            <component :is="comp" ref="list" :instance="instance" :dict="dict" :activeName="activeName" @toDetail="toDetail"
+                       :areaId="areaId"></component>
+          </el-tab-pane>
+        </el-tabs>
+      </template>
+    </ai-list>
+    <template v-if="showDetail">
+      <message-detail :instance="instance" :dict="dict" :detailId="detailId" @back="showDetail=false"></message-detail>
+    </template>
+  </section>
+</template>
+
+<script>
+  import {mapState} from "vuex";
+  import AlreadyList from "./components/alreadyList";
+  import MessageDetail from "./components/messageDetail";
+
+  export default {
+    name: 'AppMassesMessage',
+    label: "群众留言",
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function,
+      openim: Function
+    },
+    components: {AlreadyList, MessageDetail},
+    data() {
+      return {
+        activeName: '0',
+        comp:"AlreadyList",
+        paneList: [
+          {
+            label: '待我回复',
+            name: '0'
+          },
+          {
+            label: '我已回复',
+            name: '1'
+          },
+          {
+            label: '处理完成',
+            name: '2'
+          }
+        ],
+        showDetail: false,
+        detailId: '',
+        oldActiveName: '',
+        areaId: '',
+        hideLevel: ''
+      }
+    },
+    computed: {
+      ...mapState(['user'])
+    },
+    created() {
+      this.areaId = this.user.info.areaId
+      this.hideLevel = this.user.info.areaList.length
+    },
+    methods: {
+      changeArea() {
+        this.$nextTick(() => {
+          this.$refs.list.getAppLeaveMessage()
+        })
+      },
+      openIM() {
+        if (this.openim) this.openim()
+      },
+      handleClick(tab) {
+        if (this.oldActiveName == this.activeName) {
+          return
+        }
+        this.activeName = tab.name
+        this.$nextTick(() => {
+          this.$refs.list[0].getAppLeaveMessage()
+          this.$refs.list.search = {}
+          this.oldActiveName = tab.name
+        })
+      },
+      toDetail(id) {
+        this.detailId = id
+        this.showDetail = true
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .AppLeavingMessage {
+    height: 100%;
+    background-color: #f3f6f9;
+  }
+</style>
diff --git a/project/xiushan/apps/processManagement/massesMessage/components/alreadyList.vue b/project/xiushan/apps/processManagement/massesMessage/components/alreadyList.vue
new file mode 100644
index 00000000..cc50cb7a
--- /dev/null
+++ b/project/xiushan/apps/processManagement/massesMessage/components/alreadyList.vue
@@ -0,0 +1,273 @@
+<template>
+  <section class="already-list">
+    <ai-list isTabs>
+      <template #content>
+        <ai-search-bar bottomBorder>
+          <template #right>
+            <el-input size="small" v-model="search.title" placeholder="标题/编号"
+                      @keyup.enter.native="page.current=1,getAppLeaveMessage()"
+                      prefix-icon="iconfont iconSearch" clearable></el-input>
+            <el-button size="mini" type="primary" icon="iconfont iconSearch" style="margin-left:5px;"
+                       @click="page.current=1,getAppLeaveMessage()">查询
+            </el-button>
+            <el-button size="mini" icon="el-icon-refresh-right" style="margin-left:5px;" @click="resetSearch">
+              重置
+            </el-button>
+          </template>
+        </ai-search-bar>
+        <ai-table  :tableData="tableData"
+                   :col-configs="colConfigs"
+                   :total="total"
+                   ref="aitableex"
+                   :current.sync="search.current"
+                   :size.sync="search.size"
+                   @getList="getAppLeaveMessage">
+          <el-table-column label="是否公示" slot="isPublic" align="center" width="150">
+            <template v-slot="{row}">
+              <el-switch v-model="row.isPublic" @change="onChange(row)" active-value="0" inactive-value="1"
+                         active-color="#D0D4DC" inactive-color="#5088FF"/>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" slot="options" align="center" width="150">
+            <template v-slot="{row}">
+              <el-button type="text" title="详情" @click="toDetail(row.id)" v-if="$permissions('app_appleavemessagereply_detail')">详情</el-button>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+import day from 'dayjs'
+
+export default {
+  name: "alreadyList",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    activeName: String,
+    areaId: String
+  },
+  data() {
+    return {
+      tableData: [],
+      columns: [
+        {
+          label: '留言编号',
+          prop: 'msgCode',
+          type: '',
+          dict: ''
+        },
+        {
+          label: '留言类型',
+          prop: 'type',
+          type: 'select',
+          dict: 'leaveMessageType'
+        },
+        {
+          label: '标题',
+          prop: 'title',
+          type: '',
+          dict: ''
+        },
+        {
+          label: '留言人',
+          prop: 'leaveName',
+          type: '',
+          dict: ''
+        },
+        {
+          label: '创建时间',
+          prop: 'createTime',
+          type: 'time',
+          dict: ''
+        },
+        {
+          label: '最后回复时间',
+          prop: 'lastReplyTime',
+          type: 'time',
+          dict: ''
+        },
+        {
+          label: '处理状态0、待回复1、已回复',
+          prop: 'status',
+          type: '',
+          dict: ''
+        },
+        {
+          label: '操作',
+          prop: 'operate',
+          type: '',
+          dict: ''
+        },
+      ],
+      search: {
+        style: {},
+        title: ""
+      },
+      page: {
+        current: 1,
+        size: 10,
+      },
+      total: 0,
+      detailId: '',
+    }
+  },
+  methods: {
+    onChange({id, isPublic}) {
+      this.instance.post(`/app/appleavemessage/public?id=${id}`).then(res => {
+        if (res.code == 0) {
+          console.log(isPublic)
+          this.$message.success(isPublic == 1 ? "已公示" : "不公示")
+          this.getAppLeaveMessage()
+        }
+      })
+    },
+    navClick(item) {
+      this.navStatus = item.status
+    },
+    isPermit(params) {
+      return this.permissions ? this.permissions(params) : false
+    },
+    resetSearch() {
+      this.page.current = 1
+      this.page.size = 10
+      this.columns.map(c => {
+        if (c.type) this.search[c.prop] = null
+      })
+      Object.keys(this.search).forEach((e) => {
+        this.search[e] = null;
+      })
+      this.getAppLeaveMessage()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.getAppLeaveMessage()
+    },
+    handleSizeChange(val) {
+      this.page.size = val;
+      this.getAppLeaveMessage();
+    },
+    getAppLeaveMessage() {
+      this.search.status = this.activeName
+      this.search.areaId = this.user.info.areaId
+      this.instance.post("/app/appleavemessage/list", null, {
+        params: {
+          ...this.search,
+          ...this.page,
+          areaId: this.areaId
+        }
+      }).then(res => {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+      )
+    },
+
+    addOrUpdateAppLeaveMessage() {
+      this.instance.post("/app/appleavemessage/addOrUpdate", this.dialog.add).then(() => {
+            this.getAppLeaveMessage()
+            this.$message.success("添加或修改成功!")
+          }
+      )
+    },
+    deleteAppLeaveMessage(ids) {
+      this.$confirm("是否要删除这些账号?", {
+        type: 'warning'
+      }).then(() => {
+        this.instance.post("/app/appleavemessage/delete", null, {
+          params: {
+            ids: ids
+          }
+        }).then(() => {
+              this.getAppLeaveMessage()
+              this.$message.success("删除成功!")
+            }
+        )
+      }).catch(() => {
+          }
+      )
+    },
+    toDetail(id) {
+      this.$emit('toDetail', id)
+    }
+  },
+
+  filters: {
+    format(time) {
+      return time ? day(time).format("YYYY-MM-DD HH:mm") : '-'
+    }
+  },
+
+  mounted() {
+    if (this.dict) this.dict.load(this.columns.map(e => e.type == 'select' ? e.dict : ''))
+    this.resetSearch()
+  },
+  computed: {
+    ...mapState(['user']),
+    colConfigs() {
+      return [
+        { prop: 'msgCode',  label: '编号', align: 'center' },
+        { prop: 'title',  label: '标题', align: 'center' },
+        { prop: 'type',  label: '类型', align: 'center',
+          render:(h,{row})=>[<span>{this.dict.getLabel('leaveMessageType', row.type)}</span>] },
+        { prop: 'leaveName',  label: '留言人', align: 'center' },
+        { prop: 'createTime',  label: '留言提交时间', align: 'center' },
+        { prop: 'lastReplyTime',  label: '最后回复时间', align: 'center' },
+        { slot: 'isPublic'},
+        { slot: 'options'},
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.already-list {
+  background-color: #f3f6f9;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .el-table::before {
+    background-color: #fff !important;
+  }
+
+  .header {
+    padding: 0 16px;
+    width: 100%;
+    background-color: #ffffff;
+    height: 48px;
+    line-height: 48px;
+    box-shadow: inset 0px -1px 0px 0px #d8dce3;
+
+  }
+
+  .main-content {
+    box-sizing: border-box;
+    margin: 16px;
+    height: calc(100% - 80px);
+    background-color: white;
+    border: 1px solid #eee;
+    padding: 12px 16px;
+
+    .searchBar {
+
+      .el-col {
+        margin-bottom: 12px;
+      }
+
+    }
+  }
+}
+</style>
+
+
+
+
diff --git a/project/xiushan/apps/processManagement/massesMessage/components/messageDetail.vue b/project/xiushan/apps/processManagement/massesMessage/components/messageDetail.vue
new file mode 100644
index 00000000..91947fc6
--- /dev/null
+++ b/project/xiushan/apps/processManagement/massesMessage/components/messageDetail.vue
@@ -0,0 +1,461 @@
+<template>
+  <div class="message-detail iconPhoto-content">
+    <ai-detail>
+      <ai-title slot="title" :title="titleText" isShowBack isShowBottomBorder @onBackClick="$emit('back')"></ai-title>
+      <template #rightBtn>
+        <p class="resident_top_area" style="text-align: right;" v-if="data.status != '2' && $permissions('app_appleavemessagereply_edit')">
+          <el-button type="primary" class="el-icon-edit" v-if="data.status == '0'" @click="maskShow = true" style="width:104px">回复留言</el-button>
+          <el-button class="el-icon-switch-button del-btn-list" @click="close()" style="width:104px">关闭留言</el-button>
+        </p>
+      </template>
+
+      <template #content>
+        <ai-card :title="data.title">
+          <template #content>
+            <div class="content-main">
+              <div class="main-header mar-b16">
+                <h6 style="font-weight:600;">{{ data.title }}</h6>
+                <div class="time">
+                  <span class="time-label" style="width: 243px;"
+                    >留言编号：<span style="color:#333">{{ data.msgCode }}</span></span
+                  >
+                  <span class="time-label"
+                    >留言时间：<span style="color:#333">{{ data.createTime }}</span></span
+                  >
+                  <span class="time-label" style="width: 258px;text-align: right"
+                    >留言人：<span style="color:#333">{{ data.leaveName }}&nbsp;&nbsp;{{ data.leavePhone }}</span></span
+                  >
+                  <svg class="status-icon" aria-hidden="true">
+                    <use xlink:href="#iconno_response" v-if="data.status == '0'"></use>
+                    <use xlink:href="#iconreplied" v-if="data.status == '1'"></use>
+                    <use xlink:href="#iconfinished" v-if="data.status == '2'"></use>
+                  </svg>
+                </div>
+                <p class="message-text border-t" style="padding: 16px">{{ data.content }}</p>
+                <div v-if="data.images.length">
+                  <div class="content-img" v-viewer>
+                    <img v-for="(item, index) in data.images" :src="item.accessUrl" alt="" :key="index" />
+                  </div>
+                </div>
+              </div>
+              <div class="main-list">
+                <div class="main-header mar-b16">
+                  <h6 style="font-weight:600;">沟通记录</h6>
+                </div>
+                <div v-for="(item, index) in data.appLeaveMessageReplyList" :key="index" :class="item.headPortrait == null ? 'message-for reply' : 'message-for'" v-if="data.appLeaveMessageReplyList.length > 0">
+                  <div class="message-title">
+                    <img :src="item.headPortrait" alt="" class="user-img" v-if="item.headPortrait" />
+                    <span class="iconfont iconProfile_Picture" v-else></span>
+                    <span class="user-name" v-if="!item.headPortrait">
+                      <span style="color:#5088FF">{{ item.createUnitName }} &nbsp;<span style="color:#333">&nbsp;回复</span></span
+                      ><br />
+                      <span style="color:#999;font-size:12px">操作员：{{ item.createUserName }}{{ item.createUserPhone }}</span>
+                    </span>
+                    <span class="user-name" v-else>{{ item.createUserName }}</span>
+
+                    <span style="color:#999;vertical-align: text-bottom">{{ item.createTime }}</span>
+                  </div>
+                  <p class="message-text">{{ item.content }}</p>
+                  <div v-if="item.images.length">
+                    <div class="message-img-list" v-viewer>
+                      <img class="message-img" v-for="(items, index) in item.images" :src="items.accessUrl" :key="index" v-if="items.accessUrl" />
+                    </div>
+                  </div>
+                </div>
+                <div v-if="data.appLeaveMessageReplyList.length == 0" style="width:100%;text-align:center;color:#999;font-size:14px">暂无沟通记录</div>
+              </div>
+            </div>
+          </template>
+        </ai-card>
+      </template>
+    </ai-detail>
+    <ai-dialog :title="maskText" :visible.sync="maskShow" @onConfirm="confirm('ruleForm')" @onCancel="hideMask" :before-close="hideMask" width="720px">
+      <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="auto">
+        <el-form-item label="回复内容：" prop="content">
+          <el-input type="textarea" v-model.trim="ruleForm.content" :row="4" show-word-limit :maxlength="1000" placeholder="请输入回复内容"></el-input>
+        </el-form-item>
+        <el-form-item label="图片附件：" class="user">
+          <span class="upload-more left-84">(最多9张)</span>
+          <el-upload class="upload-demo upload-list-small" ref="upload" multiple action list-type="picture-card" :file-list="images" :http-request="uploadFile" :on-remove="handleRemove" :on-change="handleChange" accept="jpeg/jpg/png">
+            <div class="upload-img-small">
+              <span class="iconfont iconPhoto iconPhoto2"></span>
+              <div class="upload-text">上传照片</div>
+            </div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+// import 'viewerjs/dist/viewer.css'
+import Viewer from 'v-viewer'
+import Vue from 'vue'
+Vue.use(Viewer)
+
+export default {
+  name: 'messageDetail',
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    detailId: String,
+  },
+  data() {
+    return {
+      titleText: '留言详情',
+      maskShow: false,
+      maskText: '回复留言',
+      images: [],
+      data: {
+        appLeaveMessageReplyList: [],
+      },
+      rules: {
+        content: [{ required: true, message: '请输入回复内容', trigger: 'blur' }],
+      },
+      ruleForm: {
+        content: '',
+      },
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  created() {},
+  mounted() {
+    console.log(this.user)
+    this.getDetailInfo()
+  },
+  methods: {
+    getDetailInfo() {
+      this.data.appLeaveMessageReplyList = []
+      this.instance.post(`app/appleavemessage/queryDetailById?id=` + this.detailId).then((res) => {
+        this.data = res.data
+        this.data.images = JSON.parse(res.data.images)
+        if (this.data.appLeaveMessageReplyList.length) {
+          this.data.appLeaveMessageReplyList.map((item) => {
+            if (item.images) {
+              item.images = JSON.parse(item.images || '[]')
+            }
+            return item
+          })
+        }
+        this.data.appLeaveMessageReplyList.reverse()
+      })
+    },
+    confirm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.confirmFn()
+        } else {
+          return false
+        }
+      })
+    },
+    confirmFn() {
+      let images = []
+      this.images.map((item) => {
+        images.push({ fileId: item.fileId, accessUrl: item.accessUrl })
+      })
+      let params = {
+        content: this.ruleForm.content,
+        images: JSON.stringify(images),
+        msgCode: this.data.msgCode,
+        userType: '1',
+        createUnitId: this.user.info.unitId,
+        createUnitName: this.user.info.unitName,
+      }
+      this.instance.post(`app/appleavemessagereply/addOrUpdate`, params).then((res) => {
+        console.log(res)
+        this.maskShow = false
+        this.getDetailInfo()
+      })
+    },
+    hideMask() {
+      this.maskShow = false
+      this.images = []
+      this.$nextTick(() => {
+        this.$refs.ruleForm.resetFields()
+      })
+    },
+    close() {
+      this.$confirm('关闭留言之后，双方都将无法再进行回复，是否确定关闭本次留言？', {
+        type: 'warning',
+      })
+        .then(() => {
+          let params = this.data
+          params.status = '2'
+          params.images = JSON.stringify(params.images)
+          if (params.appLeaveMessageReplyList.length) {
+            params.appLeaveMessageReplyList.map((item) => {
+              item.images = JSON.stringify(item.images)
+              return item
+            })
+          }
+          this.instance.post(`app/appleavemessage/addOrUpdate`, params).then((res) => {
+            this.getDetailInfo()
+          })
+        })
+        .catch(() => {})
+    },
+    // 上传照片
+    uploadFile(file) {
+      console.log(this.images.length > 9)
+      if (this.images.length > 9) {
+        this.$message.warning('上传图片不能超过9张')
+        this.images.map((item, index) => {
+          if (item.uid == file.file.uid) {
+            this.images.splice(index, 1)
+          }
+          return this.images
+        })
+      }
+      const isLt2M = file.file.size / 1024 / 1024 < 2
+      if (!isLt2M) {
+        this.$message.warning('图片大小不能超过 2MB!')
+        return
+      }
+      let formData = new FormData()
+      formData.append('file', file.file)
+      let file2 = formData
+      this.instance.post(`/admin/file/add`, file2, { withCredentials: false }).then((res) => {
+        if (res.code == 0) {
+          let imgInfo = res.data[0].split(';')
+          let img = {
+            fileId: imgInfo[1],
+            accessUrl: imgInfo[0],
+          }
+          this.images.map((item, index) => {
+            if (item.uid == file.file.uid) {
+              this.images[index].fileId = img.fileId
+              this.images[index].accessUrl = img.accessUrl
+              this.images[index].url = img.accessUrl
+            }
+            return this.images
+          })
+        }
+      })
+    },
+    handleChange(file, fileList) {
+      this.images = fileList
+    },
+    handleRemove(file, fileList) {
+      this.images = fileList
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.message-detail {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+  background-color: #f3f6f9;
+  .left-84 {
+    left: -84px;
+  }
+  .iconProfile_Picture {
+    font-size: 40px;
+  }
+
+  .iconBack_Large {
+    width: 16px;
+    height: 16px;
+    color: #2266ff;
+    cursor: pointer;
+  }
+  .content {
+    padding-top: 24px;
+    width: 100%;
+    height: calc(100% - 80px);
+    overflow-y: scroll;
+    .content-main {
+      width: 760px;
+      margin: 0 auto;
+      .main-header {
+        width: 100%;
+        box-sizing: border-box;
+        background-color: #fff;
+        border: 1px solid #eee;
+        h6 {
+          font-size: 16px;
+          color: #333;
+          padding: 0 16px;
+          min-height: 54px;
+          line-height: 54px;
+          box-sizing: border-box;
+        }
+        .time {
+          height: 54px;
+          line-height: 54px;
+          font-size: 12px;
+          padding: 0 16px;
+          box-sizing: border-box;
+          position: relative;
+          overflow: hidden;
+          .time-label {
+            color: #999;
+            display: inline-block;
+          }
+        }
+        .status-icon {
+          position: absolute;
+          width: 66px;
+          height: 66px;
+          top: -5px;
+          right: 0;
+        }
+      }
+      .main-list {
+        background-color: #fff;
+        padding-bottom: 80px;
+        .message-for {
+          width: 728px;
+          margin: 0 auto 24px auto;
+          padding: 16px 16px 8px;
+          box-sizing: border-box;
+          font-size: 14px;
+          .message-title {
+            height: 40px;
+            line-height: 40px;
+            margin-bottom: 6px;
+            .user-img {
+              display: inline-block;
+              width: 40px;
+              height: 40px;
+              border-radius: 50%;
+              background-color: red;
+            }
+            .user-name {
+              display: inline-block;
+              width: 510px;
+              color: #333;
+              vertical-align: text-bottom;
+              padding-left: 8px;
+              box-sizing: border-box;
+            }
+          }
+          .message-text {
+            padding-left: 48px;
+            color: #666;
+            margin-bottom: 16px;
+          }
+          .message-img-list {
+            padding-left: 48px;
+            .message-img {
+              display: inline-block;
+              width: 113px;
+              height: 113px;
+              margin: 0 16px 16px 0;
+            }
+          }
+        }
+        .reply {
+          background-color: #f5f6f7;
+          .message-title {
+            .user-name {
+              line-height: 20px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .content-img {
+    padding: 0 16px;
+    img {
+      width: 84px;
+      height: 84px;
+      margin: 0 16px 16px 0;
+    }
+  }
+
+  .operation-foot {
+    overflow: hidden;
+    //   position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 64px;
+    line-height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f3f6f9;
+    box-shadow: inset 0px 1px 0px 0px #eeeeee;
+    button {
+      width: 92px;
+      height: 32px;
+      padding: 0 !important;
+    }
+    .delete-btn {
+      background-color: #fff;
+    }
+  }
+  .mask {
+    overflow: hidden;
+    .el-form-item__content {
+      float: left;
+      width: calc(100% - 100px) p {
+        font-size: 14px;
+        color: #222222;
+      }
+    }
+    .el-form-item__label {
+      display: inline-block;
+      width: 130px;
+      text-align: right;
+      font-size: 14px;
+      float: left;
+    }
+    .operation {
+      overflow: hidden;
+      //   position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 64px;
+      line-height: 64px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #f3f6f9;
+      box-shadow: inset 0px 1px 0px 0px #eeeeee;
+    }
+  }
+  .status {
+    span {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+    }
+  }
+  .status0 {
+    background-color: #eff6ff;
+    color: #2266ff;
+  }
+  .status1 {
+    background-color: #e8ecff;
+    color: #2244ff;
+  }
+  .status2 {
+    background-color: #fff3e8;
+    color: #ff8822;
+  }
+  .status3 {
+    background-color: #eaf5e8;
+    color: #2ea222;
+  }
+  .icon {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    margin-top: 16px;
+  }
+}
+</style>
diff --git a/project/xiushan/apps/processManagement/mattersConfig/AppMattersConfig.vue b/project/xiushan/apps/processManagement/mattersConfig/AppMattersConfig.vue
new file mode 100644
index 00000000..37a8cbb4
--- /dev/null
+++ b/project/xiushan/apps/processManagement/mattersConfig/AppMattersConfig.vue
@@ -0,0 +1,82 @@
+<template>
+  <section class="matters-config">
+    <ai-list v-if="!showDetail">
+      <template #title>
+        <ai-title title="事项配置" :isShowBottomBorder="false"></ai-title>
+      </template>
+      <template slot="tabs">
+        <el-tabs class="tabs-page" v-model="currIndex">
+          <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label" :name="String(i)">
+            <component :is="tab.comp" v-if="currIndex==i" :ref="currIndex" :instance="instance" :dict="dict"
+                       :permissions="permissions" @goPage="goPage" :tab="currentTab"/>
+          </el-tab-pane>
+        </el-tabs>
+      </template>
+    </ai-list>
+    <component v-else :is="currentComp" :instance="instance" :dict="dict"
+               :processType="currentTab.value" :row="row"></component>
+
+  </section>
+</template>
+
+<script>
+import addConfig from './components/addConfig'
+import configList from "./components/configList";
+import guidance from "./components/guidance";
+
+export default {
+  name: "AppMattersConfig",
+  label: '事项配置',
+  components: {addConfig,guidance},
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  data() {
+    return {
+      currIndex: "0",
+      row: {},
+      currentComp: "",
+    }
+  },
+  computed: {
+    tabs() {
+      return [
+        {label: "网上办事", name: "configList", value: "0", comp: configList, detail: addConfig, permission: ""},
+        {label: "办事指南", name: "configList", value: "2", comp: configList, detail: guidance, permission: ""},
+      ]
+    },
+    currentTab() {
+      return this.tabs?.[this.currIndex] || {}
+    },
+    showDetail() {
+      return !!this.$route.query?.id || !!this.$route.query?.processType
+    }
+  },
+  methods: {
+    goPage(params) {
+      this.row = params.row
+      this.currentComp = params.comp
+      this.$router.push({query: {processType: this.currentTab.value}})
+    }
+  },
+  created() {
+    this.$router.push({query: {}});
+    this.$dict.load("hbDepartment", 'sex', 'nation', 'marital', 'native_place', 'education', 'candidateApproverType', 'scopeCandidates', 'nodeType')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.matters-config {
+  height: 100%;
+  background: #f3f6f9;
+  overflow: auto;
+
+  .iconfont {
+    user-select: none;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/project/xiushan/apps/processManagement/mattersConfig/components/addConfig.vue b/project/xiushan/apps/processManagement/mattersConfig/components/addConfig.vue
new file mode 100644
index 00000000..0a565652
--- /dev/null
+++ b/project/xiushan/apps/processManagement/mattersConfig/components/addConfig.vue
@@ -0,0 +1,252 @@
+<template>
+  <div class="add-config" :class="[activeStep == 1 ? 'formLayout' : '']">
+    <ai-detail>
+      <ai-title slot="title" :title="detailTitle" isShowBack isShowBottomBorder @onBackClick="handleBack"/>
+      <template slot="step">
+        <div class="step">
+          <el-steps :active="activeStep" simple>
+            <el-step v-for="(step,i) in processList" :key="i" v-bind="step" :icon="getStepIcon(i)"/>
+          </el-steps>
+        </div>
+      </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"/>
+        <attachmentMaterial ref="attachmentMaterial" :instance="instance" v-show="activeStep==2"/>
+        <processApproval ref="processApproval" :approvalSteps="applyForm.approvalSteps" :instance="instance"
+                         :dict="dict" v-show="activeStep==3"/>
+      </template>
+      <template #footer>
+        <el-button class="btn" v-if="activeStep==0" @click="handleBack">取消</el-button>
+        <el-button class="btn" v-else @click="preStep">上一步</el-button>
+        <el-button class="btn" type="primary" v-if="[0,1,2].includes(activeStep)" @click="nextStep">下一步</el-button>
+        <el-button class="btn" type="primary" v-if="activeStep==3" @click="save">保存</el-button>
+      </template>
+    </ai-detail>
+  </div>
+</template>
+
+<script>
+import {applyForm, attachmentMaterial, baseInfo, processApproval} from './index'
+
+export default {
+  name: "addConfig",
+  provide() {
+    return {
+      config: this
+    }
+  },
+  props: {
+    instance: Function,
+    dict: Object,
+    row: Object,
+    processType: String
+  },
+  components: {baseInfo, applyForm, attachmentMaterial, processApproval},
+  data() {
+    return {
+      activeStep: 0,
+      baseInfo: {},
+      applyForm: {
+        tableId: "",
+        approvalSteps: "",
+      },
+      processAnnexDefs: [],
+      detailObj: {
+        tableInfo: {}
+      },
+      refresh: true,
+      filedList: [],
+      tableFieldInfos: []
+    }
+  },
+  computed: {
+    processList() {
+      return [
+        {title: '基本信息', activeIndex: 0},
+        {title: '申请表单', activeIndex: 1},
+        {title: '附件材料', activeIndex: 2},
+        {title: '审批流程', activeIndex: 3}
+      ]
+    },
+    detailTitle() {
+      return this.detailObj?.id ? "编辑事项" : "添加事项"
+    }
+  },
+  methods: {
+    /**
+     * 上一步
+     * */
+    preStep() {
+      this.activeStep--
+    },
+    /**
+     * 下一步
+     */
+    nextStep() {
+      switch (this.activeStep) {
+        case 0:
+          this.handleBaseInfo()
+          break
+        case 1:
+          this.$refs['applyForm'].onConfirm().then(res => {
+            if (!res.length) {
+              return this.$message.error('表单配置不能为空')
+            }
+            this.tableFieldInfos = res
+            this.activeStep++
+          })
+          break
+        case 2:
+          this.$refs['attachmentMaterial'].handleAttachmentMaterial().then(res => {
+            this.annexs = res
+            this.activeStep++
+          }).catch(err => {
+            console.error(err);
+          })
+          break
+      }
+    },
+    handleBaseInfo() {
+      this.$refs['baseInfo'].banseInfoForm().then(res => {
+        if (res) {
+          // this.$refs['applyForm'].getFormList()
+          this.baseInfo = res
+          this.activeStep++
+        }
+      })
+    },
+    /**
+     * 保存
+     */
+    save() {
+      this.$refs['processApproval'].handleProcessApproval().then(res => {
+        this.instance.post(`/app/approval-process-def/add-update`, {
+          ...this.detailObj,
+          ...this.baseInfo,
+          processDefStatus: Number(this.baseInfo.processDefStatus),
+          tableInfo: {
+            ...this.detailObj.tableInfo,
+            tableFieldInfos: this.tableFieldInfos
+          },
+          tableType: 0,
+          processAnnexDefs: this.annexs.map(e => ({...e, mustFill: Number(e.mustFill)})),
+          processNodeList: res.processNodeList,
+          processType: this.processType
+        }).then(res => {
+          if (res.code == 0) {
+            this.$message.success("保存成功")
+            this.$router.push({query:{}})
+          }
+        })
+      }).catch(err => {
+        console.error(err);
+      })
+    },
+    getDetail(id) {
+      this.instance.post(`/app/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()
+        }
+      })
+    },
+    getStepIcon(rowIndex) {
+      if (rowIndex < this.activeStep) return "iconfont iconSteps_Finished"
+      else if (this.activeStep == rowIndex) return "iconfont iconSteps_In_Progress"
+      return ""
+    },
+    refreshDetail() {
+      this.refresh = false
+      this.$nextTick(() => this.refresh = true)
+    },
+    handleBack() {
+      this.$router.push({query: {}})
+    }
+  },
+  created() {
+    if (this.row?.id) {
+      this.getDetail(this.row?.id)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.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;
+    font-size: 14px;
+
+    .el-steps {
+      display: flex;
+      align-items: center;
+      height: 72px;
+      padding: 0 calc(50% - 380px);
+
+
+      ::v-deep .el-step {
+        font-weight: bold;
+
+        ::v-deep .el-step__icon {
+          width: 24px;
+          height: 24px;
+          background: #fff;
+
+          .iconfont {
+            font-size: 24px;
+          }
+        }
+
+        ::v-deep .el-step__main {
+          display: flex;
+          align-items: center;
+
+          .el-step__arrow {
+            background: #D0D4DC;
+            margin: 0 8px;
+            height: 2px;
+
+            &:before, &:after {
+              display: none;
+            }
+          }
+        }
+
+        .is-process {
+          color: #2266FF;
+        }
+
+        .is-wait {
+          color: #666;
+          border-color: #D0D4DC;
+        }
+      }
+
+    }
+
+  }
+
+  .btn {
+    width: 92px;
+    height: 32px;
+
+    &:nth-child(2) {
+      margin-left: 24px;
+    }
+  }
+}
+</style>
diff --git a/project/xiushan/apps/processManagement/mattersConfig/components/applyForm.vue b/project/xiushan/apps/processManagement/mattersConfig/components/applyForm.vue
new file mode 100644
index 00000000..2ecf7166
--- /dev/null
+++ b/project/xiushan/apps/processManagement/mattersConfig/components/applyForm.vue
@@ -0,0 +1,895 @@
+<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.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>
+</template>
+
+<script>
+  import draggable from 'vuedraggable'
+  import { components } from './config'
+
+  export default {
+    name: 'applyForm',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object,
+      type: String,
+      value: Array
+    },
+
+    components: {
+      draggable
+    },
+
+    data () {
+      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))
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .layout-right__del {
+    position: absolute;
+    bottom: 100px;
+    left: 0;
+    z-index: 11;
+    width: 100%;
+    padding: 0 16px;
+
+    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;
+    }
+
+    .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/project/xiushan/apps/processManagement/mattersConfig/components/attachmentMaterial.vue b/project/xiushan/apps/processManagement/mattersConfig/components/attachmentMaterial.vue
new file mode 100644
index 00000000..d527bed4
--- /dev/null
+++ b/project/xiushan/apps/processManagement/mattersConfig/components/attachmentMaterial.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="attachment-material">
+    <ai-card title="附件材料">
+      <template #right>
+        <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-dialog
+        title="添加附件材料"
+        :visible.sync="dialog"
+        @closed="form.annexName='',idAdd=true,index=null"
+        @onConfirm="onConfirm"
+        @onCancel="dialog=false"
+        width="720px">
+      <el-form :rules="rules" ref="materialForm" label-width="100px" :model="form">
+        <el-form-item label="材料名称：" prop="annexName">
+          <el-input v-model.trim="form.annexName" size="small" placeholder="请输入材料名称" show-word-limit :maxlength="32"/>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "attachmentMaterial",
+  inject: ['config'],
+  props: {
+    instance: Function,
+  },
+  data() {
+    return {
+      materialList: [],
+      dialog: false,
+      idAdd: true,
+      index: null,
+      form: {
+        annexName: ""
+      },
+    }
+  },
+  computed: {
+    rules() {
+      return {
+        annexName: [{required: true, message: '请输入材料名称', trigger: 'blur'}]
+      }
+    }
+  },
+  methods: {
+    handleAttachmentMaterial() {
+      return Promise.resolve(this.materialList)
+    },
+    handleUpload(file) {
+      let formData = new FormData()
+      formData.append('file', file.file)
+      return this.instance.post(`/admin/file/add`, formData).then(res => {
+        if (res?.code == 0) {
+          this.$message.success('上传成功')
+          let data = res.data[0].split(';')
+          return data[1]
+        }
+      })
+    },
+
+    /**
+     * 添加附件材料
+     * */
+    onConfirm() {
+      this.$refs['materialForm'].validate(valid => {
+        if (valid) {
+          if(this.idAdd){
+            this.materialList.push({
+              annexName: this.form.annexName,
+              mustFill: "1",
+              exampleFileId: "",
+              emptyFileId: "",
+            })
+          }else {
+            this.materialList[this.index].annexName = this.form.annexName
+          }
+          this.dialog = false
+        }
+      })
+    },
+
+    /**
+     * 删除
+     */
+    deleteInfo(index) {
+      this.$confirm("是否删除？").then(res => {
+        this.materialList.splice(index, 1)
+      })
+    },
+
+    /**
+     * 编辑标题
+     */
+    editInfo(index) {
+      this.dialog = true
+      this.idAdd = false
+      this.index = index
+      this.form.annexName = JSON.parse(JSON.stringify(this.materialList[index].annexName))
+    }
+  },
+
+  created() {
+    if (this.config.detailObj?.id) {
+      this.materialList = JSON.parse(JSON.stringify(this.config.detailObj?.processAnnexDefs))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.attachment-material {
+  .rightBtn {
+    font-size: 14px;
+    color: #5088FF;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .table-border {
+    width: 260px;
+    height: 32px;
+    box-sizing: border-box;
+    padding: 0 14px;
+    display: flex;
+    align-items: center;
+    border-radius: 2px;
+    border: 1px solid #D0D4DC;
+    color: #333333;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  ::v-deep .el-upload-list {
+    display: none;
+  }
+
+  .iconDelete {
+    user-select: none;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/project/xiushan/apps/processManagement/mattersConfig/components/baseInfo.vue b/project/xiushan/apps/processManagement/mattersConfig/components/baseInfo.vue
new file mode 100644
index 00000000..13223f40
--- /dev/null
+++ b/project/xiushan/apps/processManagement/mattersConfig/components/baseInfo.vue
@@ -0,0 +1,154 @@
+<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/>
+          </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-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>
+  </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();
+        }
+      }
+      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])
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .base-info {
+    .iconAudit {
+      font-size: 36px;
+      color: #3D94FB;
+    }
+  }
+</style>
diff --git a/project/xiushan/apps/processManagement/mattersConfig/components/config.js b/project/xiushan/apps/processManagement/mattersConfig/components/config.js
new file mode 100644
index 00000000..5dd8ae96
--- /dev/null
+++ b/project/xiushan/apps/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',
+				fieldLength: 20
+			},
+			{
+				type: 'idNumber',
+				fieldName: '身份证号',
+				fixedLabel: '身份证号',
+				fieldTips: '请输入身份证号',
+				defaultValue: '',
+				icon: 'icontext_area',
+				mustFill: '1',
+				fieldLength: 20,
+				disable: '0',
+				grid: 1,
+				fieldDataType: '1',
+				verifyType: 0
+			},
+			{
+				type: 'phone',
+				fieldName: '联系方式',
+				fixedLabel: '联系方式',
+				fieldTips: '请输入联系方式',
+				defaultValue: '',
+				icon: 'icontext_area',
+				mustFill: '1',
+				fieldLength: 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',
+				fieldLength: 50
+			},
+			{
+				type: 'number',
+				fieldName: '数字输入',
+				fixedLabel: '数字输入',
+				fieldTips: '请输入数字',
+				defaultValue: '',
+				icon: 'icontext_area',
+				mustFill: '1',
+				maxValue: 10000,
+				decimalPlaces: 0,
+				fieldDataType: '0',
+				minValue: 0,
+				fieldLength: 50,
+				disable: '0',
+				grid: 1,
+			}
+		]
+	},
+	{
+		type: 'layout',
+		tips: '（可重复添加）',
+		label: '分组',
+		children: [
+			{
+				type: 'group',
+				fieldName: '卡片',
+				fixedLabel: '卡片',
+				icon: 'iconpic',
+				groupName: '分组标题',
+				column: []
+			}
+		]
+	}
+];
diff --git a/project/xiushan/apps/processManagement/mattersConfig/components/configList.vue b/project/xiushan/apps/processManagement/mattersConfig/components/configList.vue
new file mode 100644
index 00000000..e0a0ce63
--- /dev/null
+++ b/project/xiushan/apps/processManagement/mattersConfig/components/configList.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="config-list">
+    <ai-list isTabs>
+      <template #content>
+        <ai-search-bar>
+          <template #left>
+            <el-select v-model="search.department" placeholder="请选择所属部门" @change="page.current=1,getList()"
+                       size="small" clearable>
+              <el-option
+                v-for="(item,i) in dict.getDict('hbDepartment')" :key="i"
+                :label="item.dictName"
+                :value="item.dictValue">
+              </el-option>
+            </el-select>
+            <el-select v-model="search.classificationId" placeholder="请选择所属分类" @change="page.current=1,getList()"
+                       size="small" clearable>
+              <el-option
+                v-for="(item,i) in classList" :key="i"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </template>
+          <template #right>
+            <el-input
+              v-model="search.processName"
+              size="small"
+              placeholder="事项名称/创建人"
+              @clear="search={},page.current=1,getList()"
+              @keyup.enter.native="page.current=1,getList()"
+              clearable
+              suffix-icon="iconfont iconSearch"/>
+          </template>
+        </ai-search-bar>
+        <ai-search-bar>
+          <template #left>
+            <el-button type="primary" icon="iconfont iconAdd" @click="goPage(tab.value==0 ? 'addConfig':'guidance')">添加{{tab.value==0?'事项':'办事指南'}}</el-button>
+          </template>
+        </ai-search-bar>
+        <ai-table
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :header-cell-style="{fontWeight:'bold',color:'#333'}"
+          :total="page.total"
+          :current.sync="page.current"
+          :size.sync="page.size"
+          @getList="getList">
+          <el-table-column label="是否启用" slot="processDefStatus" align="center" width="150">
+            <template v-slot="{row}">
+              <el-switch
+                v-model="row.processDefStatus"
+                @change="onChange(row)" active-value="1" inactive-value="0"
+                active-color="#5088FF"
+                inactive-color="#D0D4DC">
+              </el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" slot="options" align="center" width="150">
+            <template v-slot="{row}">
+              <div class="table-options">
+                <el-button type="text" title="编辑" @click="goPage(tab.value==0 ? 'addConfig':'guidance',row)">编辑</el-button>
+                <el-button type="text" title="删除" @click="delInfo(row)">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+  </div>
+</template>
+
+<script>
+  import day from 'dayjs'
+
+  export default {
+    name: "configList",
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function,
+      tab: Object,
+    },
+    data() {
+      return {
+        search: {
+          department: "",
+          classificationId: "",
+          processName: "",
+        },
+        page: {current: 1, size: 10},
+        total: 0,
+        row: {},
+        tableData: [],
+        classList: [],
+      }
+    },
+    computed: {
+      colConfigs() {
+        return [
+          {
+            prop: 'processName',
+            align: 'left',
+            label: '事项名称',
+          },
+          {
+            prop: 'department',
+            align: 'left',
+            label: '所属部门',
+            render: (h, {row}) => [ < span > {this.dict.getLabel('hbDepartment', row.department)} < /span>]
+          },
+          {
+            prop: 'classificationName',
+            align: 'center',
+            label: '所属分类',
+          },
+          {
+            prop: 'timeLimit',
+            align: 'center',
+            label: '办结时限（日）',
+          },
+          {
+            prop: 'createUserName',
+            align: 'center',
+            label: '创建人',
+          },
+          {
+            prop: 'createTime',
+            align: 'center',
+            label: '最后修改时间',
+            render: (h, {row}) => [ < span > {day(row.createTime
+      ).
+        format("YYYY-MM-DD HH:mm")
+      }<
+        /span>]
+      },
+        {slot: 'processDefStatus', align:'center', label:'是否启用',},
+        { slot: 'options',align:'center',label:'操作',},
+      ].filter(e=>this.tab.value==0 ? true : (e.prop!="timeLimit"))
+      },
+    },
+    methods: {
+      goPage(comp, row = {}) {
+        this.$emit("goPage", {comp, row})
+      },
+      /**
+       * 获取分类
+       */
+      getClassification() {
+        this.instance.post(`/app/zwspapprovalclassification/list`, null, {
+          params:{
+            current: 1,
+            status: 1,
+            size: 9999
+          }
+        }).then(res => {
+          if (res && res.data) {
+            this.classList = res.data.records
+          }
+        })
+      },
+      /**
+       * 删除
+       * */
+      delInfo({id}) {
+        this.$confirm("是否删除").then(() => {
+          this.instance.post(`/app/approval-process-def/delete?id=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success("删除成功")
+              this.getList()
+            }
+          })
+        })
+      },
+      /**
+       * 启用，停用
+       */
+      onChange({id, processDefStatus}) {
+        this.instance.post(`/app/approval-process-def/enable-disable`, null, {
+          params: {id}
+        }).then(res => {
+          if (res.code == 0) {
+            this.$message.success(processDefStatus == 0 ? "不启用" : "已启用")
+            this.getList()
+          }
+        })
+      },
+
+      getList() {
+        this.instance.post(`/app/approval-process-def/list`, null, {
+          params: {
+            ...this.page,
+            ...this.search,
+            processType: this.tab.value
+          },
+        }).then(res => {
+          if (res?.data) {
+            this.tableData = res.data.records
+            this.page.total = res.data.total;
+          }
+        })
+      },
+    },
+    mounted() {
+      this.getList()
+      this.getClassification()
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .config-list {
+    height: 100%;
+  }
+</style>
diff --git a/project/xiushan/apps/processManagement/mattersConfig/components/guidance.vue b/project/xiushan/apps/processManagement/mattersConfig/components/guidance.vue
new file mode 100644
index 00000000..8f38b8a1
--- /dev/null
+++ b/project/xiushan/apps/processManagement/mattersConfig/components/guidance.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="guidance">
+    <ai-detail>
+      <ai-title slot="title" :title="detailTitle" isShowBack isShowBottomBorder @onBackClick="handleBack"/>
+      <template #content>
+        <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/>
+              </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="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="#5088FF"
+                  inactive-color="#D0D4DC" active-value="1" inactive-value="0">
+                </el-switch>
+              </el-form-item>
+            </el-form>
+          </template>
+        </ai-card>
+      </template>
+      <template #footer>
+        <el-button class="btn" @click="handleBack">取消</el-button>
+        <el-button class="btn" type="primary" @click="save">保存</el-button>
+      </template>
+    </ai-detail>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "addConfig",
+    props: {
+      instance: Function,
+      dict: Object,
+      row: Object,
+      processType: String
+    },
+    data() {
+      return {
+        form: {
+          processName: "",
+          department: "",
+          classificationId: "",
+          needToKnow: "",
+          processDefStatus: "1",
+        },
+        classList: [],
+      }
+    },
+    computed: {
+      rules() {
+        return {
+          processName: [{required: true, message: '请输入事项名称', trigger: 'blur'}],
+          department: [{required: true, message: '请选择所属部门', trigger: 'change'}],
+          classificationId: [{required: true, message: '请选择所属分类', trigger: 'change'}],
+          needToKnow: [{required: true, message: '请输入办理须知', trigger: 'blur'}],
+          processDefStatus: [{required: true, message: '请选择是否启用', trigger: 'change'}],
+        }
+      },
+      detailTitle() {
+        return this.row?.id ? "编辑办事指南" : "添加办事指南"
+      }
+    },
+    methods: {
+      /**
+       * 获取分类
+       */
+      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
+          }
+        })
+      },
+      /**
+       * 保存
+       */
+      save() {
+        this.$refs["baseInfoForm"].validate(valid => {
+          if (valid) {
+            this.instance.post(`/app/approval-process-def/add-update`, {
+              ...this.form,
+              id: this.row.id,
+              processType: this.processType
+            }).then(res => {
+              if (res.code == 0) {
+                this.$message.success("保存成功")
+                this.$router.push({query: {}})
+              }
+            })
+          }
+        })
+      },
+      getDetail(id) {
+        this.instance.post(`/app/approval-process-def/info-id`, null, {params: {id}}).then(res => {
+          if (res?.data) {
+            Object.keys(this.form).map(e => this.form[e] = res.data[e])
+          }
+        })
+      },
+      handleBack() {
+        this.$router.push({query: {}})
+      }
+    },
+    created() {
+      this.getClassification()
+      if (this.row?.id) {
+        this.getDetail(this.row?.id)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .add-config {
+    height: 100%;
+
+    .step {
+      width: 100%;
+      height: 72px;
+      font-size: 14px;
+
+      .el-steps {
+        display: flex;
+        align-items: center;
+        height: 72px;
+        padding: 0 calc(50% - 380px);
+
+
+        ::v-deep .el-step {
+          font-weight: bold;
+
+          ::v-deep .el-step__icon {
+            width: 24px;
+            height: 24px;
+            background: #fff;
+
+            .iconfont {
+              font-size: 24px;
+            }
+          }
+
+          ::v-deep .el-step__main {
+            display: flex;
+            align-items: center;
+
+            .el-step__arrow {
+              background: #D0D4DC;
+              margin: 0 8px;
+              height: 2px;
+
+              &:before, &:after {
+                display: none;
+              }
+            }
+          }
+
+          .is-process {
+            color: #2266FF;
+          }
+
+          .is-wait {
+            color: #666;
+            border-color: #D0D4DC;
+          }
+        }
+
+      }
+
+    }
+
+    .btn {
+      width: 92px;
+      height: 32px;
+
+      &:nth-child(2) {
+        margin-left: 24px;
+      }
+    }
+  }
+</style>
diff --git a/project/xiushan/apps/processManagement/mattersConfig/components/index.js b/project/xiushan/apps/processManagement/mattersConfig/components/index.js
new file mode 100644
index 00000000..e3d251c4
--- /dev/null
+++ b/project/xiushan/apps/processManagement/mattersConfig/components/index.js
@@ -0,0 +1,4 @@
+export {default as baseInfo} from './baseInfo'
+export {default as applyForm} from './applyForm'
+export {default as attachmentMaterial} from './attachmentMaterial'
+export {default as processApproval} from './processApproval'
\ No newline at end of file
diff --git a/project/xiushan/apps/processManagement/mattersConfig/components/processApproval.vue b/project/xiushan/apps/processManagement/mattersConfig/components/processApproval.vue
new file mode 100644
index 00000000..52f8a374
--- /dev/null
+++ b/project/xiushan/apps/processManagement/mattersConfig/components/processApproval.vue
@@ -0,0 +1,482 @@
+<template>
+  <div class="process-approval">
+    <ai-card title="流程设置">
+      <template #right>
+        <span class="iconfont iconAdd rightBtn"></span>
+        <span class="rightBtn" style="margin-left: 8px;" @click="addAppStep(1)">添加审批步骤</span>
+      </template>
+      <template #content>
+        <el-steps direction="vertical">
+          <el-step v-for="(item,index) in form.processNodeList" :key="index">
+            <div slot="title" class="step_title">
+              <p>{{ item.nodeName }}（{{ dict.getLabel('nodeType', item.nodeType) }}）</p>
+              <div class="peraoBtn">
+                <el-button type="text" :disabled="index==0" class="iconfont iconMoveUp"
+                           @click="form.processNodeList[index] = form.processNodeList.splice(index-1, 1,form.processNodeList[index])[0]">
+                  上移
+                </el-button>
+                <el-button type="text" :disabled="index==(form.processNodeList.length-1)" class="iconfont iconMoveDown"
+                           @click="form.processNodeList[index] = form.processNodeList.splice(index+1, 1,form.processNodeList[index])[0]">
+                  下移
+                </el-button>
+                <el-button type="text" class="iconfont iconEdit" @click="addAppStep(2,item,index)">
+                  编辑
+                </el-button>
+                <el-button type="text" class="iconfont iconDelete" @click="deleteInfo(index)">
+                  删除
+                </el-button>
+              </div>
+            </div>
+            <div slot="description" class="step_desc">
+              <div class="desc_style">
+                <p>
+                  选人方式：<span>{{ dict.getLabel('candidateApproverType', item.candidateApproverType) }}</span>
+                </p>
+              </div>
+              <div class="desc_person" v-if="item.scopeCandidates==1||item.candidateApproverType==1">
+                <p class="desc_p">指定人员：</p>
+                <div class="desc_div">
+                  <el-tag type="info" closable v-for="(value,i) in item.candidateList" :key="i"
+                          @close="item.candidateList.splice(i,1)">
+                    {{ value.name }}
+                  </el-tag>
+                  <el-button v-if="item.candidateList.length>0" type="text" @click="item.candidateList=[]">清空
+                  </el-button>
+                </div>
+              </div>
+              <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>
+            </div>
+          </el-step>
+        </el-steps>
+      </template>
+    </ai-card>
+    <el-dialog :title="titleType" class="editStyle" :visible.sync="isAddStep" width="575px" height="380px"
+               :close-on-click-modal="false">
+      <el-form :model="nodeObj" label-width="120px" ref="addForm" :rules="addRules">
+        <el-form-item label="审批步骤名称：" prop="nodeName">
+          <el-input size="small" v-model="nodeObj.nodeName" placeholder="如：部门主管审批（限10个字）" :maxLength="10"
+                    clearable></el-input>
+        </el-form-item>
+        <el-form-item label="审批方式：" prop="nodeType">
+          <el-radio-group v-model="nodeObj.nodeType">
+            <section style="position: relative;top: 10px;margin-bottom: 30px;">
+              <el-radio :label="2">或签
+                <el-popover
+                    placement="top-start"
+                    width="200"
+                    trigger="click"
+                    content="或签是指该节点指定多名负责人审批时，其中任何一人完成审批即可。适合一个事项只需要某个岗位任何一人审批即可的业务场景。">
+                  <el-button class="el-icon-warning" slot="reference"
+                             style="padding:0;height:14px;border:0;"></el-button>
+                </el-popover>
+              </el-radio>
+              <el-radio :label="3">抄送
+                <el-popover
+                    placement="top-start"
+                    width="200"
+                    trigger="click"
+                    content="抄送是指一个事项审批完成后，抄送给需要知晓的单位或个人，被抄送的对象可以查阅该事项内容，无需审批。适合一个事项无需对方审批，但审批完成后需要通知对方知晓的业务场景。">
+                  <el-button class="el-icon-warning" slot="reference"
+                             style="padding:0;height:14px;border:0;"></el-button>
+                </el-popover>
+              </el-radio>
+            </section>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" style="text-align: center;">
+        <el-button style="width: 92px;" size="small" @click="isAddStep = false">取消</el-button>
+        <el-button style="width: 92px;" size="small" type="primary" @click="saveAddProgress('addForm')">确认
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "processApproval",
+  inject: ['config'],
+  props: {
+    instance: Function,
+    dict: Object,
+    approvalSteps: String
+  },
+  data() {
+    return {
+      form: {
+        processNodeList: [],
+      },
+      areaId: "",
+      isAddStep: false,
+      isSelectImg: false,
+      isSelectUnit: false,
+      isSelectPerson: false,
+      nodeObj: {
+        candidateApproverType: '1',
+        candidateList: [],
+        nodeIndex: '',
+        nodeName: '',
+        nodeType: '',
+        scopeCandidates: ''
+      },
+      indexType: '',
+      titleType: '',
+      bomIndex: '',
+    }
+  },
+  computed: {
+    addRules() {
+      return {
+        nodeName: [
+          {required: true, message: '请输入审批节点名称', trigger: 'change'}
+        ],
+        nodeType: [
+          {required: true, message: '请选择审批方式', trigger: 'change'}
+        ],
+        candidateApproverType: [
+          {required: true, message: '请选择选人方式', trigger: 'change'}
+        ],
+        scopeCandidates: [
+          {required: true, message: '请选择选人范围', trigger: 'change'}
+        ]
+      }
+    },
+    ...mapState(['user'])
+  },
+  methods: {
+    handleProcessApproval() {
+      return Promise.resolve(this.form)
+    },
+    /**
+     *删除
+     * */
+    deleteInfo(index) {
+      this.$confirm("是否删除").then(() => {
+        this.form.processNodeList.splice(index, 1)
+      })
+    },
+    /**
+     * 添加流程
+     * @param index
+     * @param item
+     * @param i
+     */
+    addAppStep(index, item, i) {
+      this.isAddStep = true;
+      this.bomIndex = i;
+      this.indexType = index;
+      if (index == 2) {
+        this.titleType = '编辑审批步骤';
+        item.nodeType = item.nodeType * 1;
+        item.candidateApproverType = item.candidateApproverType * 1;
+        item.scopeCandidates = item.scopeCandidates * 1;
+        this.nodeObj = JSON.parse(JSON.stringify(item));
+      } else {
+        this.titleType = '添加审批步骤';
+        if (this.form.processNodeList.length > 0) {
+          this.init();
+        }
+      }
+    },
+    // 确定添加审批步骤
+    saveAddProgress(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.nodeObj.scopeCandidates == 0) this.nodeObj.candidateList = [];
+          if (this.indexType == 1) {
+            this.form.processNodeList.push(JSON.parse(JSON.stringify(this.nodeObj)));
+          } else {
+            this.form.processNodeList.splice(this.bomIndex, 1, JSON.parse(JSON.stringify(this.nodeObj)));
+          }
+          this.$refs[formName].resetFields();
+          this.isAddStep = false;
+        }
+      })
+    },
+    init() {
+      this.nodeObj = {
+        candidateApproverType: '1',
+        candidateList: [],
+        nodeIndex: '',
+        nodeName: '',
+        nodeType: '',
+        scopeCandidates: ''
+      };
+      this.$refs['addForm'].resetFields();
+    },
+  },
+  created() {
+    this.areaId = this.user.info.areaId.substring(0, 6) + '000000'
+    if (this.config.detailObj?.id) {
+
+      Object.keys(this.form).map(e => this.form[e] = this.config.detailObj[e])
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.process-approval {
+  .rightBtn {
+    font-size: 14px;
+    color: #5088FF;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .step_title {
+    font-weight: 700;
+    height: 32px;
+    line-height: 32px;
+    display: flex;
+    padding: 0 8px;
+    justify-content: space-between;
+    color: #333;
+
+    p {
+      font-size: 14px;
+    }
+
+    div {
+      span {
+        margin-left: 16px;
+        font-size: 12px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .step_desc {
+    font-size: 14px;
+    padding: 8px;
+    color: #999;
+    margin-bottom: 20px;
+
+    .desc_style {
+      display: flex;
+      margin-bottom: 16px;
+
+      p {
+        margin-right: 80px;
+      }
+
+      span {
+        color: #333;
+      }
+    }
+
+    .desc_person {
+      display: flex;
+      margin-bottom: 12px;
+
+      .desc_p {
+        position: relative;
+        top: 4px;
+        width: 70px;
+      }
+
+      .desc_div {
+        flex: 1;
+      }
+
+      .el-tag {
+        margin-right: 8px;
+        margin-bottom: 8px;
+      }
+    }
+  }
+
+  .add_btn {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 64px;
+    line-height: 64px;
+    background: #F3F6F9;
+    width: 100%;
+    text-align: center;
+
+    .el-button {
+      width: 92px;
+    }
+  }
+
+  .select_per {
+    width: 640px;
+    height: 400px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: auto;
+
+    .add_item {
+      width: 310px;
+      height: 400px;
+      background: rgba(252, 252, 252, 1);
+      border-radius: 2px;
+      border: 1px solid rgba(208, 212, 220, 1);
+      position: relative;
+      overflow: auto;
+
+      .add_top {
+        width: 100%;
+        height: 40px;
+        background: rgba(245, 245, 245, 1);
+        border-bottom: 1px solid rgba(208, 212, 220, 1);
+        padding: 0 8px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .tree_list {
+        width: 100%;
+        height: 360px;
+        overflow: auto;
+      }
+
+      .add_buttom {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        font-size: 12px;
+        width: 310px;
+        height: 32px;
+        line-height: 32px;
+        z-index: 10000;
+        background: rgba(245, 246, 247, 1);
+        color: rgba(51, 51, 51, 1);
+        box-shadow: 0px 1px 0px 0px rgba(216, 220, 227, 1);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+      }
+
+      .add_tag {
+        width: 310px;
+        height: 360px;
+        overflow-y: auto;
+
+        .el-tag {
+          margin: 8px;
+        }
+      }
+    }
+  }
+
+  .icon {
+    width: 48px;
+    height: 48px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-right: 16px;
+    margin-bottom: 16px;
+    cursor: pointer;
+  }
+
+  .icon_style {
+    display: flex;
+    flex-wrap: wrap;
+
+    .icon:hover {
+      border-color: #5088FF;
+    }
+
+    .icon_color {
+      border-color: #5088FF;
+    }
+  }
+
+  .dia_per_content {
+    width: 640px;
+    height: 400px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: auto;
+
+    .add_item {
+      width: 310px;
+      height: 400px;
+      background: rgba(252, 252, 252, 1);
+      border-radius: 2px;
+      border: 1px solid rgba(208, 212, 220, 1);
+      position: relative;
+      overflow: auto;
+
+      .add_top {
+        width: 100%;
+        height: 40px;
+        background: rgba(245, 245, 245, 1);
+        border-bottom: 1px solid rgba(208, 212, 220, 1);
+        padding: 0 8px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .tree_list {
+        width: 100%;
+        height: 360px;
+        overflow: auto;
+      }
+
+      .add_buttom {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        font-size: 12px;
+        width: 310px;
+        height: 32px;
+        line-height: 32px;
+        z-index: 10000;
+        background: rgba(245, 246, 247, 1);
+        color: rgba(51, 51, 51, 1);
+        box-shadow: 0px 1px 0px 0px rgba(216, 220, 227, 1);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+      }
+
+      .add_tag {
+        width: 310px;
+        height: 360px;
+        overflow-y: auto;
+
+        .el-tag {
+          margin: 8px;
+        }
+      }
+    }
+  }
+
+  .peraoBtn {
+    .el-button--text {
+      color: #333;
+      font-size: 12px;
+    }
+  }
+
+  ::v-deep .el-step__icon.is-text {
+    border: 2px solid #2266FF;
+    background: #2266FF;
+    color: #FFFFFF;
+  }
+
+  ::v-deep .el-step__line {
+    background-color: #D0D4DC;
+  }
+}
+</style>
diff --git a/project/xiushan/apps/processManagement/personalSignature/AppPersonalSignature.vue b/project/xiushan/apps/processManagement/personalSignature/AppPersonalSignature.vue
new file mode 100644
index 00000000..26532308
--- /dev/null
+++ b/project/xiushan/apps/processManagement/personalSignature/AppPersonalSignature.vue
@@ -0,0 +1,365 @@
+<template>
+  <section class="personal-signature">
+    <ai-list v-if="!showPhonePage">
+      <ai-title slot="title" title="个人签名" :isShowBottomBorder="false"/>
+      <template #custom>
+        <div class="signaturePane">
+          <div class="signatureCard" v-for="(op,i) in signatures" :key="i">
+            <div class="default" v-if="op.isDefault==1">默认</div>
+            <div class="body">
+              <el-image :src="`data:image/png;base64,${op.signSealData}`"/>
+            </div>
+            <div class="footer">
+              <el-button type="text" :disabled="op.isDefault==1" @click.stop="handleSetDefault(op.id)">设为默认</el-button>
+              <hr/>
+              <el-button type="text" :disabled="op.isDefault==1||op.signType>0" @click.stop="handleDelete(op.id)">删除
+              </el-button>
+            </div>
+          </div>
+          <div class="signatureCard add" @click="dialog=true">
+            <ai-icon icon="iconAdd" size="32px"/>
+            <span>点击添加签名</span>
+          </div>
+        </div>
+      </template>
+    </ai-list>
+    <ai-dialog :visible.sync="dialog" v-bind="dialogConf" @onConfirm="handleSubmit"
+               @closed="form={},drawPlaceholder=true,qrCode=null,showQRCode=false,getSignatures()">
+      <ai-drawer v-if="hasAuthed" :seal.sync="sealData" ref="aiDrawer">
+        <template #tools>
+          <el-popover trigger="manual" v-model="showQRCode">
+            <el-image :src="qrCode"/>
+            <div class="writeInPhone" slot="reference" @click.stop="showQR">
+              <ai-icon icon="iconEwm"/>
+              <span>手机签名</span>
+            </div>
+          </el-popover>
+        </template>
+      </ai-drawer>
+      <el-form size="small" :model="form" ref="authForm" :rules="rules" class="authZone" v-else label-suffix="："
+               label-width="100px">
+        <el-alert type="warning" title="第一次添加个人签名，需先进行实名认证" show-icon :closable="false"/>
+        <el-form-item label="姓名" prop="personName">
+          <el-input v-model="form.personName" clearable placeholder="姓名"/>
+        </el-form-item>
+        <el-form-item label="身份证号" prop="idNumber">
+          <el-input v-model="form.idNumber" clearable placeholder="身份证号"/>
+        </el-form-item>
+        <el-form-item label="手机号码" prop="signPhone">
+          <el-input v-model="form.signPhone" clearable placeholder="手机号码"/>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+    <draw-in-phone v-if="showPhonePage"/>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+import DrawInPhone from "./drawInPhone";
+
+export default {
+  name: "AppPersonalSignature",
+  label: "个人签名",
+  components: {DrawInPhone},
+  provide() {
+    return {
+      signature: this
+    }
+  },
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  computed: {
+    ...mapState(['user']),
+    hasAuthed() {
+      return this.signatures.length > 0
+    },
+    dialogConf() {
+      return this.hasAuthed ? {
+        title: "手写签名",
+        width: '720px'
+      } : {
+        title: "实名认证",
+        width: '520px'
+      }
+    },
+    rules() {
+      return {
+        personName: [{required: true, message: "请填写姓名"}],
+        signPhone: [
+          {required: true, message: "请填写手机号码"},
+          {pattern: /^1[3456789]\d{9}$/, message: "手机号码格式有误"}
+        ],
+        idNumber: [
+          {required: true, message: "请填写身份证号码"},
+          {validator: (r, v, cb) => cb(this.idCardNoUtil.checkIdCardNo(v) ? undefined : "身份证号码格式有误")}
+        ],
+      }
+    }
+  },
+  data() {
+    return {
+      signatures: [],
+      dialog: false,
+      form: {},
+      sealData: null,
+      qrCode: null,
+      showQRCode: false,
+      showPhonePage: false,
+      loading: false,
+    }
+  },
+  created() {
+    if (this.$route.query.userId && this.$route.hash == "#phone") {
+      this.showPhonePage = true
+    } else {
+      this.getSignatures()
+    }
+  },
+  methods: {
+    getSignatures() {
+      this.instance.post("/app/syssignaccount/list", null, {
+        params: {
+          size: 999
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.signatures = res.data.records
+        }
+      })
+    },
+    handleSubmit() {
+      if (this.loading) return
+      if (this.hasAuthed && this.$refs['aiDrawer'].drawPlaceholder) return this.$message.error("请签名")
+      this.loading = true
+      if (this.hasAuthed) {
+        let sealData = this.sealData?.replace(/data:image\/png;base64,/, '')
+        sealData && this.instance({
+          url: '/app/syssignaccount/upload-sealdata',
+          headers: {"Content-Type": "application/json"},
+          method: 'post',
+          params: {userId: this.user.info.id},
+          data: sealData
+        }).then(res => {
+          this.loading = false
+          if (res?.code == 0) {
+            this.dialog = false
+            this.$message.success("添加成功!")
+            this.getSignatures()
+          }
+        }).catch(() => {
+          this.loading = false
+        })
+      } else {
+        this.$refs.authForm.validate(v => {
+          if (v) {
+            this.instance.post("/app/syssignaccount/register", {
+              signPhone: this.form.signPhone,
+              signType: 1,
+              userType: 0,
+              registerInfo: {...this.form},
+              style: {personTemplateType: 'RECTANGLE', sealColor: 'RED'}
+            }).then(res => {
+              this.loading = false
+              if (res?.code == 0) {
+                this.dialog = false
+                this.$message.success("认证成功!")
+                this.getSignatures()
+              }
+            }).catch(() => {
+              this.loading = false
+            })
+          }
+        })
+      }
+    },
+    handleSetDefault(id) {
+      this.$confirm("是否设置该签名为默认签名?").then(() => {
+        this.instance.post("/app/syssignaccount/default", null, {params: {id, listType: 0}}).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("设置成功!")
+            this.getSignatures()
+          }
+        }).catch(() => 0)
+      })
+    },
+    handleDelete(ids) {
+      this.$confirm("是否删除该签名?").then(() => {
+        this.instance.post("/app/syssignaccount/delete", null, {params: {ids}}).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("删除成功!")
+            this.getSignatures()
+          }
+        }).catch(() => 0)
+      })
+    },
+    showQR() {
+      if (!this.qrCode) {
+        let url = `${location.href}?userId=${this.user.info.id}#phone`
+        this.instance.post("/app/syssignaccount/draw-qrcode", null, {
+          params: {url}
+        }).then(res => {
+          if (res?.data) {
+            this.showQRCode = true
+            this.qrCode = res.data
+          }
+        })
+      } else {
+        this.showQRCode = !this.showQRCode
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.personal-signature {
+  height: 100%;
+  background: #f3f6f9;
+  overflow: auto;
+
+  ::v-deep .signaturePane {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    padding: 16px;
+
+    .signatureCard {
+      width: 290px;
+      height: 258px;
+      background: #FFFFFF;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+
+      &.add {
+        justify-content: center;
+        align-items: center;
+        color: #666666;
+        cursor: pointer;
+
+        .AiIcon {
+          width: 32px;
+          height: 32px;
+          font-size: 32px;
+        }
+
+        & > span {
+          font-size: 12px;
+          line-height: 16px;
+        }
+      }
+
+      .default {
+        position: absolute;
+        width: 56px;
+        height: 24px;
+        background: #3573FF;
+        border-radius: 0 0 4px 0;
+        top: 0;
+        left: 0;
+        text-align: center;
+        line-height: 24px;
+        font-size: 12px;
+        color: #FFF;
+      }
+
+      .body {
+        min-height: 0;
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 25px;
+        pointer-events: none;
+
+        .el-image {
+          width: 100%;
+          height: 100%
+        }
+      }
+
+      .footer {
+        flex-shrink: 0;
+        height: 40px;
+        background: rgba(#30426F, .5);
+        display: flex;
+        align-items: center;
+        padding: 8px 0;
+        box-sizing: border-box;
+
+        hr {
+          height: 100%;
+          border-color: rgba(#fff, .5);
+        }
+
+        & > .el-button {
+          flex: 1;
+          color: #fff;
+
+          &[disabled] {
+            color: rgba(#fff, .5);
+          }
+        }
+      }
+    }
+  }
+  ::v-deep .writeInPhone {
+    position: absolute;
+    width: 100px;
+    height: 32px;
+    background: rgba(#000, .5);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    color: rgba(#fff, .6);
+    cursor: pointer;
+    left: 16px;
+    top: 16px;
+
+    .AiIcon {
+      width: auto;
+      height: auto;
+    }
+
+    &:hover {
+      color: #fff;
+    }
+  }
+  ::v-deep .ai-dialog__wrapper {
+    .ai-dialog__content--wrapper {
+      padding-right: 0 !important;
+    }
+
+    .el-dialog__body {
+      padding: 24px 0;
+    }
+
+
+
+    .authZone {
+      padding: 0 16px 24px;
+      width: 100%;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+
+      .el-alert {
+        border: 1px solid #FF8822;
+      }
+
+      .el-form-item {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/project/xiushan/apps/processManagement/personalSignature/drawInPhone.vue b/project/xiushan/apps/processManagement/personalSignature/drawInPhone.vue
new file mode 100644
index 00000000..5d2f852a
--- /dev/null
+++ b/project/xiushan/apps/processManagement/personalSignature/drawInPhone.vue
@@ -0,0 +1,110 @@
+<template>
+  <section class="drawInPhone" @touchmove.prevent>
+    <div class="endPage" v-if="finished">操作结束请关闭页面</div>
+    <ai-drawer :seal.sync="sealData" placeholder="请签名" :width="device.width" :height="device.height">
+      <template #tools>
+        <div class="writeInPhone" slot="reference" @click.stop="handleSubmit">
+          <ai-icon icon="iconPublish"/>
+          <span>提交</span>
+        </div>
+      </template>
+    </ai-drawer>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "drawInPhone",
+  inject: ['signature'],
+  data() {
+    return {
+      sealData: null,
+      device: {width: 0, height: 0},
+      finished: false
+    }
+  },
+  created() {
+    this.device.width = document.body.clientWidth
+    this.device.height = document.body.clientHeight
+    window.onresize = () => {
+      this.device.width = document.body.clientWidth
+      this.device.height = document.body.clientHeight
+    }
+  },
+  methods: {
+    handleSubmit() {
+      let sealData = this.sealData?.replace(/data:image\/png;base64,/, ''),
+          {userId} = this.$route.query
+      if (!userId) return alert("缺少必要参数")
+      sealData && this.signature.instance({
+        url: '/app/syssignaccount/upload-sealdata',
+        headers: {"Content-Type": "application/json"},
+        method: 'post',
+        params: {userId},
+        data: sealData,
+        withoutToken: true
+      }).then(res => {
+        if (res?.code == 0) {
+          alert("添加成功!")
+          this.finished = true
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawInPhone {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 20210205932;
+
+  .endPage {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 20210205933;
+    background: rgba(#000, .8);
+    color: #999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 32px;
+  }
+
+  .AiDrawer {
+    margin: 0;
+  }
+
+  .writeInPhone {
+    position: absolute;
+    width: 72px;
+    height: 32px;
+    background: rgba(#000, .5);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    color: rgba(#fff, .6);
+    cursor: pointer;
+    left: 16px;
+    top: 16px;
+
+    .AiIcon {
+      width: auto;
+      height: auto;
+    }
+
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+</style>