流程标识管理功能新增

2024-05-13 21:11:34 +08:00
parent df20141670
commit 3e254f820b
11 changed files with 646 additions and 330 deletions
--- a/src/api/bpm-boot/sign.ts
+++ b/src/api/bpm-boot/sign.ts
@@ -0,0 +1,63 @@
+import createAxios from '@/utils/request'
+
+import { BPM_BOOT } from '@/utils/constantRequest'
+
+const MAPPING_PATH = BPM_BOOT + '/bpmSign'
+
+/**
+ * 查询流程分类数据
+ */
+export const listSign = (data: any) => {
+    return createAxios({
+        url: MAPPING_PATH + '/list',
+        method: 'POST',
+        data: data
+    })
+}
+
+/**
+ * 新增流程分类
+ */
+export const addSign = (data: any) => {
+    return createAxios({
+        url: MAPPING_PATH + '/add',
+        method: 'POST',
+        data: data
+    })
+}
+
+
+/**
+ * 更新流程分类
+ */
+export const updateSign = (data: any) => {
+    return createAxios({
+        url: MAPPING_PATH + '/update',
+        method: 'POST',
+        data: data
+    })
+}
+
+
+/**
+ * 删除流程分类
+ */
+export const deleteSign = (data: any) => {
+    let ids = [data]
+    return createAxios({
+        url: MAPPING_PATH + '/delete',
+        method: 'POST',
+        data: ids
+    })
+}
+
+/**
+ * 查询所有流程分类
+ */
+export const getSignSimpleList = () => {
+    return createAxios({
+        url: MAPPING_PATH + '/simpleList',
+        method: 'GET'
+    })
+}
+
--- a/src/views/pqs/supervise/harmonicSurvey/detail.vue
+++ b/src/views/pqs/supervise/harmonicSurvey/detail.vue
@@ -0,0 +1,7 @@
+<template>
+  <!--工作流view的路径：/pqs/supervise/harmonicSurvey/detail-->
+  <h1>详细信息回显</h1>
+</template>
+<script setup lang='ts'>
+
+</script>
--- a/src/views/pqs/supervise/interfere/index.vue
+++ b/src/views/pqs/supervise/interfere/index.vue
@@ -5,7 +5,7 @@
                <undocumented v-if="activeName == '1'" />
            </el-tab-pane>
 <!--            <el-tab-pane label="入网评估报告审核" name="2"><network v-if="activeName == '2'" /></el-tab-pane>-->
-            <el-tab-pane label="常态化干扰源用户" name="3"><normal v-if="activeName == '3'" /></el-tab-pane>
+            <el-tab-pane label="常态化干扰源用户管理" name="3"><normal v-if="activeName == '3'" /></el-tab-pane>
 <!--            <el-tab-pane label="实测报告审核" name="4"><report v-if="activeName == '4'" /></el-tab-pane>-->
        </el-tabs>
    </div>
--- a/src/views/system/bpm/category/categoryPopup.vue
+++ b/src/views/system/bpm/category/categoryPopup.vue
@@ -40,7 +40,6 @@ const tableStore = inject('tableStore') as TableStore
 const machineVisible = ref(false)
 const title = ref('')
 const formRef = ref()
-const regex = /^[+]?(\d+(\.\d*)?|\.\d+)([eE][+-]?\d+)?$/

 // 注意不要和表单ref的命名冲突
 const form = reactive({
--- a/src/views/system/bpm/category/index.vue
+++ b/src/views/system/bpm/category/index.vue
@@ -28,7 +28,6 @@ import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { onMounted, provide, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { deleteSgMachine } from '@/api/advance-boot/sgGroven/sgMachine'
 import { ElMessage } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import CategoryPopup from '@/views/system/bpm/category/categoryPopup.vue'
@@ -103,7 +102,7 @@ onMounted(() => {
  // 加载数据
  tableStore.index()
 })
-tableStore.table.params.searchValue = ''
+tableStore.table.params.name = ''
 provide('tableStore', tableStore)

 const add = () => {
--- a/src/views/system/bpm/form/index.vue
+++ b/src/views/system/bpm/form/index.vue
@@ -40,7 +40,7 @@ defineOptions({
 const formJson = reactive({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}})
 const formData = reactive({})
 const optionData = reactive({})
-const vfRenderRef = ref(null)
+const vfRenderRef = ref()
 const render = reactive({
    visible: false,
    title: ''
@@ -91,7 +91,7 @@ const tableStore = new TableStore({
                },
                {
                    name: 'update',
-                    title: '设计',
+                    title: '设计表单',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
--- a/src/views/system/bpm/model/index.vue
+++ b/src/views/system/bpm/model/index.vue
@@ -58,7 +58,7 @@ const tableStore = new TableStore({
        { title: '模型标识', field: 'key', width: 160 },
        { title: '模型名称', field: 'name', width: 160 },
        { title: '流程分类', field: 'categoryName', width: 150 },
-        { title: '表单信息', field: 'formName', width: 170 },
+        { title: '表单信息', field: 'formName', width: 170, },
        {
            title: '创建时间',
            field: 'createTime',
--- a/src/views/system/bpm/model/modelPopup.vue
+++ b/src/views/system/bpm/model/modelPopup.vue
@@ -6,20 +6,11 @@

        <el-form-item label='表单类型' prop='formType'>
          <el-radio-group v-model='formData.formType'>
-            <el-radio border label='10'>流程表单</el-radio>
            <el-radio border label='20'>业务表单</el-radio>
+            <el-radio border label='10'>流程表单</el-radio>
          </el-radio-group>
        </el-form-item>

-        <el-form-item label='流程标识' prop='key'>
-          <el-input
-              v-model='formData.key'
-              :disabled='!!formData.id'
-              clearable
-              placeholder='请输入流程标识'
-          />
-        </el-form-item>
-
        <el-form-item label='流程名称' prop='name'>
          <el-input
              v-model='formData.name'
@@ -49,8 +40,17 @@
        <!--          <UploadImg v-model='formData.icon' :limit='1' height='128px' width='128px' />-->
        <!--        </el-form-item>-->

-        <el-form-item label='流程描述' prop='description'>
-          <el-input v-model='formData.description' clearable type='textarea' />
+        <el-form-item label='流程标识' prop='key'>
+          <el-select v-model='formData.key' clearable style='width: 100%' @change='changeSign'>
+            <el-option
+                v-for='item in flowInfo'
+                :key='item.id'
+                :label='item.name'
+                :value='item.signKey'
+                placeholder='请选择流程标识'
+            />
+          </el-select>
+
        </el-form-item>

        <el-form-item label='流程表单' prop='formId' v-if='formData.formType == "10"'>
@@ -67,7 +67,11 @@
        <!--          <el-input v-model='formData.description' clearable type='textarea' />-->
        <!--        </el-form-item>-->
        <el-form-item v-else label='表单查看路由' prop='formCustomViewPath'>
-          <el-input v-model='formData.formCustomViewPath' />
+          <el-input v-model='formData.formCustomViewPath' disabled />
+        </el-form-item>
+
+        <el-form-item label='流程描述' prop='description'>
+          <el-input v-model='formData.description' clearable type='textarea' />
        </el-form-item>

      </el-form>
@@ -88,10 +92,11 @@ import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删
 import { getFormSimpleList } from '@/api/bpm-boot/form'
 import { getCategorySimpleList } from '@/api/bpm-boot/category'
 import { addModel, updateModel } from '@/api/bpm-boot/model'
-
+import { getSignSimpleList } from '@/api/bpm-boot/sign'

 //传入type的名称
 const categoryList = ref()
+const flowInfo = ref()
 const formList = ref()

 const title = ref('')
@@ -115,7 +120,7 @@ const formData = reactive({

 //form表单校验规则
 const rules = {
-  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  key: [{ required: true, message: '流程标识不能为空', trigger: 'change' }],
  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
  category: [{ required: true, message: '流程分类不能为空', trigger: 'change' }],
  formType: [{ required: true, message: '表单类型不能为空', trigger: 'change' }]
@@ -135,6 +140,10 @@ const open = async (text: string, data?: any) => {
  await getCategorySimpleList().then(res => {
    categoryList.value = res.data
  })
+
+  await getSignSimpleList().then(res => {
+    flowInfo.value = res.data
+  })
  //默认选中第一个tab
  if (data) {
    // 表单赋值
@@ -180,6 +189,14 @@ const submit = () => {
 }

 defineExpose({ open })
+
+const changeSign = (event:any) => {
+  //根据选择的流程标识回显查看路径
+  const path = flowInfo.value.filter(item => item.signKey == event)[0].viewPath
+  formData.formCustomCreatePath = path
+  formData.formCustomViewPath = path
+}
+
 </script>

 <style scoped>
--- a/src/views/system/bpm/processInstance/detail/index.vue
+++ b/src/views/system/bpm/processInstance/detail/index.vue
@@ -1,157 +1,157 @@
 <template>
-    <div class='default-main'>
-        <!--返回按钮-->
-        <back-component style='margin: 8px;position: absolute;z-index: 10;top: -3px;right: 2px' />
-        <el-tabs type='border-card' v-model='tab'>
-            <el-tab-pane label='流程审核' name='流程审核' v-if='runningTasks.length>0'>
-                <el-card
-                    v-for='(item, index) in runningTasks'
-                    :key='index'
-                    v-loading='processInstanceLoading'
-                    class='box-card'
-                >
-                    <template #header>
-                        <span class='el-icon-picture-outline'>当前任务【{{ item.name }}】</span>
-                    </template>
-                    <el-col :offset='6' :span='16'>
-                        <el-form
-                            :ref="'form' + index"
-                            :model='auditForms[index]'
-                            :rules='auditRule'
-                            label-width='100px'
-                        >
-                            <el-form-item v-if='processInstance && processInstance.name' label='流程名'>
-                                {{ processInstance.name }}
-                            </el-form-item>
-                            <el-form-item v-if='processInstance && processInstance.startUser' label='发起人'>
-                                {{ processInstance?.startUser.name }}
-                            </el-form-item>
-                            <el-form-item v-if='processInstance && processInstance.startUser' label='发起部门'>
-                                {{ processInstance?.startUser.deptName }}
-                            </el-form-item>
+  <div class='default-main'>
+    <!--返回按钮-->
+    <back-component style='margin: 8px;position: absolute;z-index: 10;top: -3px;right: 2px' />
+    <el-tabs type='border-card' v-model='tab'>
+      <el-tab-pane label='流程审核' name='流程审核' v-if='runningTasks.length>0'>
+        <el-card
+            v-for='(item, index) in runningTasks'
+            :key='index'
+            v-loading='processInstanceLoading'
+            class='box-card'
+        >
+          <template #header>
+            <span class='el-icon-picture-outline'>当前任务【{{ item.name }}】</span>
+          </template>
+          <el-col :offset='6' :span='16'>
+            <el-form
+                :ref="'form' + index"
+                :model='auditForms[index]'
+                :rules='auditRule'
+                label-width='100px'
+            >
+              <el-form-item v-if='processInstance && processInstance.name' label='流程名'>
+                {{ processInstance.name }}
+              </el-form-item>
+              <el-form-item v-if='processInstance && processInstance.startUser' label='发起人'>
+                {{ processInstance?.startUser.name }}
+              </el-form-item>
+              <el-form-item v-if='processInstance && processInstance.startUser' label='发起部门'>
+                {{ processInstance?.startUser.deptName }}
+              </el-form-item>

-                            <el-card v-if='runningTasks[index].formId > 0' class='mb-15px !-mt-10px'>
-                                <template #header>
+              <el-card v-if='runningTasks[index].formId > 0' class='mb-15px !-mt-10px'>
+                <template #header>
              <span class='el-icon-picture-outline'>
                填写表单【{{ runningTasks[index]?.formName }}】
              </span>
-                                </template>
-                                <form-create
-                                    v-model='approveForms[index].value'
-                                    v-model:api='approveFormFApis[index]'
-                                    :option='approveForms[index].option'
-                                    :rule='approveForms[index].rule'
-                                />
-                            </el-card>
-
-                            <el-form-item label='审批建议' prop='reason'>
-                                <el-input
-                                    v-model='auditForms[index].reason'
-                                    placeholder='请输入审批建议'
-                                    type='textarea'
-                                />
-                            </el-form-item>
-                            <!--                <el-form-item label='抄送人' prop='copyUserIds'>-->
-                            <!--                  <el-select v-model='auditForms[index].copyUserIds' multiple placeholder='请选择抄送人'>-->
-                            <!--                    <el-option-->
-                            <!--                        v-for='item in userOptions'-->
-                            <!--                        :key='item.id'-->
-                            <!--                        :label='item.nickname'-->
-                            <!--                        :value='item.id'-->
-                            <!--                    />-->
-                            <!--                  </el-select>-->
-                            <!--                </el-form-item>-->
-                        </el-form>
-                        <div style='margin-bottom: 20px; margin-left: 10%; font-size: 14px'>
-
-                            <el-button
-                                type='success'
-                                :icon='Select'
-                                @click='handleAudit(item, true)'
-                            >通过
-                            </el-button>
-
-                            <el-button
-                                type='danger'
-                                :icon='Close'
-                                @click='handleAudit(item, false)'
-                            >不通过
-                            </el-button>
-
-                            <!--                <el-button type='primary' @click='openTaskUpdateAssigneeForm(item.id)'>-->
-                            <!--                  <Icon icon='ep:edit' />-->
-                            <!--                  转办-->
-                            <!--                </el-button>-->
-                            <!--                <el-button type='primary' @click='handleDelegate(item)'>-->
-                            <!--                  <Icon icon='ep:position' />-->
-                            <!--                  委派-->
-                            <!--                </el-button>-->
-                            <!--                <el-button type='primary' @click='handleSign(item)'>-->
-                            <!--                  <Icon icon='ep:plus' />-->
-                            <!--                  加签-->
-                            <!--                </el-button>-->
-
-                            <el-button
-                                type='warning'
-                                :icon='Back'
-                                @click='handleBack(item)'
-                            >回退
-                            </el-button>
-                        </div>
-                    </el-col>
-                </el-card>
-            </el-tab-pane>
-            <el-tab-pane label='申请信息' name='申请信息'>
-                <!-- 申请信息 -->
-                <el-card v-loading='processInstanceLoading' class='box-card'>
-                    <template #header>
-                        <span class='el-icon-document'>申请信息【{{ processInstance.name }}】</span>
-                    </template>
-                    <!-- 情况一：流程表单 -->
-                    <el-col v-if='processInstance?.processDefinition?.formType === 10' :offset='6' :span='16'>
-                        <form-create
-                            v-model='detailForm.value'
-                            v-model:api='fApi'
-                            :option='detailForm.option'
-                            :rule='detailForm.rule'
-                        />
-                    </el-col>
-                    <!-- 情况二：业务表单 -->
-                    <div v-if='processInstance?.processDefinition?.formType === 20'>
-                        <BusinessFormComponent :id='processInstance.businessKey' />
-                    </div>
-                </el-card>
-            </el-tab-pane>
-            <el-tab-pane label='审批记录' name='流程审核'>
-                <!-- 审批记录 -->
-                <ProcessInstanceTaskList
-                    :loading='tasksLoad'
-                    :process-instance='processInstance'
-                    :tasks='tasks'
-                    @refresh='getTaskList'
+                </template>
+                <form-create
+                    v-model='approveForms[index].value'
+                    v-model:api='approveFormFApis[index]'
+                    :option='approveForms[index].option'
+                    :rule='approveForms[index].rule'
                />
-            </el-tab-pane>
-<!--            <el-tab-pane label='流程图'>-->
-<!--                &lt;!&ndash; 高亮流程图 &ndash;&gt;-->
-<!--                &lt;!&ndash;    <ProcessInstanceBpmnViewer&ndash;&gt;-->
-<!--                &lt;!&ndash;      :id="`${id}`"&ndash;&gt;-->
-<!--                &lt;!&ndash;      :bpmn-xml="bpmnXml"&ndash;&gt;-->
-<!--                &lt;!&ndash;      :loading="processInstanceLoading"&ndash;&gt;-->
-<!--                &lt;!&ndash;      :process-instance="processInstance"&ndash;&gt;-->
-<!--                &lt;!&ndash;      :tasks="tasks"&ndash;&gt;-->
-<!--                &lt;!&ndash;    />&ndash;&gt;</el-tab-pane>-->
-        </el-tabs>
-        <ContentWrap>
-            <!-- 弹窗：转派审批人 -->
-            <TaskTransferForm ref='taskTransferFormRef' @success='getDetail' />
-            <!-- 弹窗：回退节点 -->
-            <TaskReturnForm ref='taskReturnFormRef' @success='getDetail' />
-            <!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
-            <TaskDelegateForm ref='taskDelegateForm' @success='getDetail' />
-            <!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
-            <TaskSignCreateForm ref='taskSignCreateFormRef' @success='getDetail' />
-        </ContentWrap>
-    </div>
+              </el-card>
+
+              <el-form-item label='审批建议' prop='reason'>
+                <el-input
+                    v-model='auditForms[index].reason'
+                    placeholder='请输入审批建议'
+                    type='textarea'
+                />
+              </el-form-item>
+              <!--                <el-form-item label='抄送人' prop='copyUserIds'>-->
+              <!--                  <el-select v-model='auditForms[index].copyUserIds' multiple placeholder='请选择抄送人'>-->
+              <!--                    <el-option-->
+              <!--                        v-for='item in userOptions'-->
+              <!--                        :key='item.id'-->
+              <!--                        :label='item.nickname'-->
+              <!--                        :value='item.id'-->
+              <!--                    />-->
+              <!--                  </el-select>-->
+              <!--                </el-form-item>-->
+            </el-form>
+            <div style='margin-bottom: 20px; margin-left: 10%; font-size: 14px'>
+
+              <el-button
+                  type='success'
+                  :icon='Select'
+                  @click='handleAudit(item, true)'
+              >通过
+              </el-button>
+
+              <el-button
+                  type='danger'
+                  :icon='Close'
+                  @click='handleAudit(item, false)'
+              >不通过
+              </el-button>
+
+              <!--                <el-button type='primary' @click='openTaskUpdateAssigneeForm(item.id)'>-->
+              <!--                  <Icon icon='ep:edit' />-->
+              <!--                  转办-->
+              <!--                </el-button>-->
+              <!--                <el-button type='primary' @click='handleDelegate(item)'>-->
+              <!--                  <Icon icon='ep:position' />-->
+              <!--                  委派-->
+              <!--                </el-button>-->
+              <!--                <el-button type='primary' @click='handleSign(item)'>-->
+              <!--                  <Icon icon='ep:plus' />-->
+              <!--                  加签-->
+              <!--                </el-button>-->
+
+              <el-button
+                  type='warning'
+                  :icon='Back'
+                  @click='handleBack(item)'
+              >回退
+              </el-button>
+            </div>
+          </el-col>
+        </el-card>
+      </el-tab-pane>
+      <el-tab-pane label='申请信息' name='申请信息'>
+        <!-- 申请信息 -->
+        <el-card v-loading='processInstanceLoading' class='box-card'>
+          <template #header>
+            <span class='el-icon-document'>申请信息【{{ processInstance.name }}】</span>
+          </template>
+          <!-- 情况一：流程表单 -->
+          <el-col v-if='processInstance?.processDefinition?.formType === 10' :offset='6' :span='16'>
+            <form-create
+                v-model='detailForm.value'
+                v-model:api='fApi'
+                :option='detailForm.option'
+                :rule='detailForm.rule'
+            />
+          </el-col>
+          <!-- 情况二：业务表单 -->
+          <div v-if='processInstance?.processDefinition?.formType === 20'>
+            <BusinessFormComponent :id='processInstance.businessKey' />
+          </div>
+        </el-card>
+      </el-tab-pane>
+      <el-tab-pane label='审批记录' name='审批记录'>
+        <!-- 审批记录 -->
+        <ProcessInstanceTaskList
+            :loading='tasksLoad'
+            :process-instance='processInstance'
+            :tasks='tasks'
+            @refresh='getTaskList'
+        />
+      </el-tab-pane>
+      <!--            <el-tab-pane label='流程图'>-->
+      <!--                &lt;!&ndash; 高亮流程图 &ndash;&gt;-->
+      <!--                &lt;!&ndash;    <ProcessInstanceBpmnViewer&ndash;&gt;-->
+      <!--                &lt;!&ndash;      :id="`${id}`"&ndash;&gt;-->
+      <!--                &lt;!&ndash;      :bpmn-xml="bpmnXml"&ndash;&gt;-->
+      <!--                &lt;!&ndash;      :loading="processInstanceLoading"&ndash;&gt;-->
+      <!--                &lt;!&ndash;      :process-instance="processInstance"&ndash;&gt;-->
+      <!--                &lt;!&ndash;      :tasks="tasks"&ndash;&gt;-->
+      <!--                &lt;!&ndash;    />&ndash;&gt;</el-tab-pane>-->
+    </el-tabs>
+    <ContentWrap>
+      <!-- 弹窗：转派审批人 -->
+      <TaskTransferForm ref='taskTransferFormRef' @success='getDetail' />
+      <!-- 弹窗：回退节点 -->
+      <TaskReturnForm ref='taskReturnFormRef' @success='getDetail' />
+      <!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
+      <TaskDelegateForm ref='taskDelegateForm' @success='getDetail' />
+      <!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
+      <TaskSignCreateForm ref='taskSignCreateFormRef' @success='getDetail' />
+    </ContentWrap>
+  </div>
 </template>
 <script lang='ts' setup>
 import { onMounted, provide, ref, getCurrentInstance, reactive, watch, unref, nextTick } from 'vue'
@@ -195,7 +195,7 @@ const tasks = ref<any[]>([]) // 任务列表
 const runningTasks = ref<any[]>([]) // 运行中的任务
 const auditForms = ref<any[]>([]) // 审批任务的表单
 const auditRule = reactive({
-    reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
+  reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
 })
 const approveForms = ref<any[]>([]) // 审批通过时，额外的补充信息
 const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
@@ -203,210 +203,211 @@ const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
 // ========== 申请信息 ==========
 const fApi = ref<ApiAttrs>() //
 const detailForm = ref({
-    rule: [],
-    option: {},
-    value: {}
+  rule: [],
+  option: {},
+  value: {}
 }) // 流程实例的表单详情

 /** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
 watch(
    () => approveFormFApis.value,
    (value) => {
-        value?.forEach((api) => {
-            api.btn.show(false)
-            api.resetBtn.show(false)
-        })
+      value?.forEach((api) => {
+        api.btn.show(false)
+        api.resetBtn.show(false)
+      })
    },
    {
-        deep: true
+      deep: true
    }
 )

 /** 处理审批通过和不通过的操作 */
 const handleAudit = async (task, pass) => {
-    // 1.1 获得对应表单
-    const index = runningTasks.value.indexOf(task)
-    const auditFormRef = proxy.$refs['form' + index][0]
-    // 1.2 校验表单
-    const elForm = unref(auditFormRef)
-    if (!elForm) return
-    const valid = await elForm.validate()
-    if (!valid) return
+  // 1.1 获得对应表单
+  const index = runningTasks.value.indexOf(task)
+  const auditFormRef = proxy.$refs['form' + index][0]
+  // 1.2 校验表单
+  const elForm = unref(auditFormRef)
+  if (!elForm) return
+  const valid = await elForm.validate()
+  if (!valid) return

-    // 2.1 提交审批
-    const data = {
-        id: task.id,
-        reason: auditForms.value[index].reason,
-        copyUserIds: auditForms.value[index].copyUserIds
+  // 2.1 提交审批
+  const data = {
+    id: task.id,
+    reason: auditForms.value[index].reason,
+    copyUserIds: auditForms.value[index].copyUserIds
+  }
+  if (pass) {
+    // 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
+    const formCreateApi = approveFormFApis.value[index]
+    if (formCreateApi) {
+      await formCreateApi.validate()
+      data.variables = approveForms.value[index].value
    }
-    if (pass) {
-        // 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
-        const formCreateApi = approveFormFApis.value[index]
-        if (formCreateApi) {
-            await formCreateApi.validate()
-            data.variables = approveForms.value[index].value
-        }
-        await approveTask(data)
-        tab.value = '审批记录'
-        ElMessage.success('审批通过成功')
-    } else {
-        await rejectTask(data)
-        ElMessage.success('审批不通过成功')
-    }
-    // 2.2 加载最新数据
-    getDetail()
+    await approveTask(data)
+    tab.value = '审批记录'
+    ElMessage.success('审批通过成功')
+  } else {
+    await rejectTask(data)
+    tab.value = '审批记录'
+    ElMessage.success('审批不通过成功')
+  }
+  // 2.2 加载最新数据
+  getDetail()
 }

 /** 转派审批人 */
 const taskTransferFormRef = ref()
 const openTaskUpdateAssigneeForm = (id: string) => {
-    taskTransferFormRef.value.open(id)
+  taskTransferFormRef.value.open(id)
 }

-/** 处理审批退回的操作 */
+/** 处理审批委托的操作 */
 const taskDelegateForm = ref()
 const handleDelegate = async (task) => {
-    taskDelegateForm.value.open(task.id)
+  taskDelegateForm.value.open(task.id)
 }

 /** 处理审批退回的操作 */
 const taskReturnFormRef = ref()
 const handleBack = async (task: any) => {
-    taskReturnFormRef.value.open(task.id)
+  taskReturnFormRef.value.open(task.id)
 }

 /** 处理审批加签的操作 */
 const taskSignCreateFormRef = ref()
 const handleSign = async (task: any) => {
-    taskSignCreateFormRef.value.open(task.id)
+  taskSignCreateFormRef.value.open(task.id)
 }

 /** 获得详情 */
 const getDetail = () => {
-    // 1. 获得流程实例相关
-    getProcessInstance()
-    // 2. 获得流程任务列表（审批记录）
-    getTaskList()
+  // 1. 获得流程实例相关
+  getProcessInstance()
+  // 2. 获得流程任务列表（审批记录）
+  getTaskList()
 }

 /** 加载流程实例 */
 const BusinessFormComponent = ref(null) // 异步组件
 const getProcessInstance = async () => {
-    try {
-        processInstanceLoading.value = true
-        let data
-        await getProcessInstanceById(id).then(res => {
-            data = res.data
-        })
+  try {
+    processInstanceLoading.value = true
+    let data
+    await getProcessInstanceById(id).then(res => {
+      data = res.data
+    })

-        if (!data) {
-            ElMessage.error('查询不到流程信息！')
-            return
-        }
-        processInstance.value = data
-        // 设置表单信息
-        const processDefinition = data.processDefinition
-        if (processDefinition.formType === 10) {
-            setConfAndFields2(
-                detailForm,
-                processDefinition.formConf,
-                processDefinition.formFields,
-                data.formVariables
-            )
-            nextTick().then(() => {
-                fApi.value?.btn.show(false)
-                fApi.value?.resetBtn.show(false)
-                fApi.value?.disabled(true)
-            })
-        } else {
-            // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
-            // BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
-            BusinessFormComponent.value = registerComponent('/pqs/supervise/interfere/components/undocumented/detail')
-        }
-
-        // 加载流程图
-        bpmnXml.value = (
-            await getProcessDefinitionById(processDefinition.id)
-        )?.bpmnXml
-    } finally {
-        processInstanceLoading.value = false
+    if (!data) {
+      ElMessage.error('查询不到流程信息！')
+      return
    }
+    processInstance.value = data
+    // 设置表单信息
+    const processDefinition = data.processDefinition
+    if (processDefinition.formType === 10) {
+      setConfAndFields2(
+          detailForm,
+          processDefinition.formConf,
+          processDefinition.formFields,
+          data.formVariables
+      )
+      nextTick().then(() => {
+        fApi.value?.btn.show(false)
+        fApi.value?.resetBtn.show(false)
+        fApi.value?.disabled(true)
+      })
+    } else {
+      // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
+      // BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
+      BusinessFormComponent.value = registerComponent('/pqs/supervise/interfere/components/undocumented/detail')
+    }
+
+    // 加载流程图
+    bpmnXml.value = (
+        await getProcessDefinitionById(processDefinition.id)
+    )?.bpmnXml
+  } finally {
+    processInstanceLoading.value = false
+  }
 }

 /** 加载任务列表 */
 const getTaskList = async () => {
-    runningTasks.value = []
-    auditForms.value = []
-    approveForms.value = []
-    approveFormFApis.value = []
-    try {
-        // 获得未取消的任务
-        tasksLoad.value = true
-        let data
-        await getTaskListByProcessInstanceId(id).then(res => {
-            data = res.data
-        })
-        tasks.value = []
-        // 1.1 移除已取消的审批
-        data.forEach((task) => {
-            if (task.status !== 4) {
-                tasks.value.push(task)
-            }
-        })
-        // 1.2 排序，将未完成的排在前面，已完成的排在后面；
-        tasks.value.sort((a, b) => {
-            // 有已完成的情况，按照完成时间倒序
-            if (a.endTime && b.endTime) {
-                return b.endTime - a.endTime
-            } else if (a.endTime) {
-                return 1
-            } else if (b.endTime) {
-                return -1
-                // 都是未完成，按照创建时间倒序
-            } else {
-                return b.createTime - a.createTime
-            }
-        })
+  runningTasks.value = []
+  auditForms.value = []
+  approveForms.value = []
+  approveFormFApis.value = []
+  try {
+    // 获得未取消的任务
+    tasksLoad.value = true
+    let data
+    await getTaskListByProcessInstanceId(id).then(res => {
+      data = res.data
+    })
+    tasks.value = []
+    // 1.1 移除已取消的审批
+    data.forEach((task) => {
+      if (task.status !== 4) {
+        tasks.value.push(task)
+      }
+    })
+    // 1.2 排序，将未完成的排在前面，已完成的排在后面；
+    tasks.value.sort((a, b) => {
+      // 有已完成的情况，按照完成时间倒序
+      if (a.endTime && b.endTime) {
+        return b.endTime - a.endTime
+      } else if (a.endTime) {
+        return 1
+      } else if (b.endTime) {
+        return -1
+        // 都是未完成，按照创建时间倒序
+      } else {
+        return b.createTime - a.createTime
+      }
+    })

-        // 获得需要自己审批的任务
-        loadRunningTask(tasks.value)
-    } finally {
-        tasksLoad.value = false
-    }
+    // 获得需要自己审批的任务
+    loadRunningTask(tasks.value)
+  } finally {
+    tasksLoad.value = false
+  }
 }

 /**
 * 设置 runningTasks 中的任务
 */
 const loadRunningTask = (tasks) => {
-    tasks.forEach((task) => {
-        if (!isEmpty(task.children)) {
-            loadRunningTask(task.children)
-        }
-        // 2.1 只有待处理才需要
-        if (task.status !== 1 && task.status !== 6) {
-            return
-        }
-        // 2.2 自己不是处理人
-        if (!task.assigneeUser || task.assigneeUser.id !== userId) {
-            return
-        }
-        // 2.3 添加到处理任务
-        runningTasks.value.push({ ...task })
-        auditForms.value.push({
-            reason: '',
-            copyUserIds: []
-        })
-
-        // 2.4 处理 approve 表单
-        if (task.formId && task.formConf) {
-            const approveForm = {}
-            setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariable)
-            approveForms.value.push(approveForm)
-        } else {
-            approveForms.value.push({}) // 占位，避免为空
-        }
+  tasks.forEach((task) => {
+    if (!isEmpty(task.children)) {
+      loadRunningTask(task.children)
+    }
+    // 2.1 只有待处理才需要
+    if (task.status !== 1 && task.status !== 6) {
+      return
+    }
+    // 2.2 自己不是处理人
+    if (!task.assigneeUser || task.assigneeUser.id !== userId) {
+      return
+    }
+    // 2.3 添加到处理任务
+    runningTasks.value.push({ ...task })
+    auditForms.value.push({
+      reason: '',
+      copyUserIds: []
    })
+
+    // 2.4 处理 approve 表单
+    if (task.formId && task.formConf) {
+      const approveForm = {}
+      setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariable)
+      approveForms.value.push(approveForm)
+    } else {
+      approveForms.value.push({}) // 占位，避免为空
+    }
+  })
 }

 const tab = ref('')
@@ -414,17 +415,15 @@ const tab = ref('')
 /** 初始化 */
 const userOptions = ref([]) // 用户列表
 onMounted(async () => {
-    getDetail()
-
-    // 获得用户列表
-    await getUserSimpleList().then(res => {
-        userOptions.value = res.data
-    })
-    if (todo) {
-        tab.value = '流程审核'
-    } else {
-        tab.value = '申请信息'
-    }
-
+  getDetail()
+  // 获得用户列表
+  await getUserSimpleList().then(res => {
+    userOptions.value = res.data
+  })
+  if (todo) {
+    tab.value = '流程审核'
+  } else {
+    tab.value = '申请信息'
+  }
 })
 </script>
--- a/src/views/system/bpm/sign/index.vue
+++ b/src/views/system/bpm/sign/index.vue
@@ -0,0 +1,120 @@
+<!--流程分类页面-->
+<template>
+  <div class='default-main'>
+    <TableHeader>
+      <template v-slot:select>
+        <el-form-item label='标识名称'>
+          <el-input
+              v-model='tableStore.table.params.name'
+              clearable
+              placeholder='请输入名称'
+          />
+        </el-form-item>
+        <el-form-item label='标识key'>
+          <el-input
+              v-model='tableStore.table.params.signKey'
+              clearable
+              placeholder='请输入key'
+          />
+        </el-form-item>
+      </template>
+      <template v-slot:operation>
+        <el-button type='primary' class='ml10' @click='add' :icon='Plus'>新增</el-button>
+      </template>
+    </TableHeader>
+    <!--表格-->
+    <Table ref='tableRef'></Table>
+    <!--弹出框-->
+    <sign-popup ref='signPopup' />
+  </div>
+</template>
+
+<script setup lang='ts'>
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { onMounted, provide, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import SignPopup from '@/views/system/bpm/sign/signPopup.vue'
+import { deleteSign } from '@/api/bpm-boot/sign'
+
+defineOptions({
+  name: 'bpmSign'
+})
+
+const { push } = useRouter()
+const signPopup = ref()
+
+const tableStore = new TableStore({
+  url: '/bpm-boot/bpmSign/list',
+  method: 'POST',
+  column: [
+    { title: '序号', type: 'seq', width: 80 },
+    { title: '标识名称', field: 'name', minWidth: 130 },
+    { title: '标识key', field: 'signKey', minWidth: 130 },
+    { title: '表单查看地址', field: 'viewPath', minWidth: 200 },
+    { title: '创建时间', field: 'createTime', minWidth: 170 },
+    {
+      title: '操作',
+      align: 'center',
+      minWidth: '150',
+      fixed: 'right',
+      render: 'buttons',
+      buttons: [
+        {
+          name: 'update',
+          title: '编辑',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            signPopup.value.open('修改流程标识', row)
+          }
+        },
+        {
+          name: 'update',
+          title: '删除',
+          type: 'danger',
+          icon: 'el-icon-Delete',
+          render: 'confirmButton',
+          popconfirm: {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            confirmButtonType: 'danger',
+            title: '确定删除吗？'
+          },
+          click: row => {
+            deleteSign(row.id).then(res => {
+              ElMessage.success('删除成功')
+              tableStore.index()
+            })
+          }
+        }
+      ]
+    }
+  ],
+  beforeSearchFun: () => {
+    for (let key in tableStore.table.params) {
+      if (tableStore.table.params[key] === '') {
+        delete tableStore.table.params[key]
+      }
+    }
+
+  }
+})
+
+onMounted(() => {
+  // 加载数据
+  tableStore.index()
+})
+tableStore.table.params.name = ''
+tableStore.table.params.signKey = ''
+provide('tableStore', tableStore)
+
+const add = () => {
+  signPopup.value.open('新增流程标识')
+}
+
+</script>
--- a/src/views/system/bpm/sign/signPopup.vue
+++ b/src/views/system/bpm/sign/signPopup.vue
@@ -0,0 +1,112 @@
+<!--模型分类的新增编辑弹出框-->
+<template>
+  <el-dialog
+      draggable
+      class='cn-operate-dialog'
+      v-model='machineVisible'
+      :title='title'
+      style='width: 415px; height: 350px'
+      top='30vh'
+  >
+    <el-scrollbar>
+      <el-form :inline='false' :model='form' label-width='120px' :rules='rules' ref='formRef'>
+        <el-form-item label='标识名称' prop='name'>
+          <el-input v-model='form.name' placeholder='请输入标识名' clearable />
+        </el-form-item>
+        <el-form-item label='分类key' prop='signKey'>
+          <el-input v-model='form.signKey' placeholder='请输入标识key' clearable />
+        </el-form-item>
+        <el-form-item label='查看表单路径' prop='viewPath'>
+          <el-input v-model='form.viewPath' placeholder='请输入查看表单路径' clearable>
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+    <template #footer>
+            <span class='dialog-footer'>
+                <el-button @click='machineVisible = false'>取消</el-button>
+                <el-button type='primary' @click='submit'>确认</el-button>
+            </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang='ts' setup>
+import { ref, reactive, inject } from 'vue'
+import { ElMessage } from 'element-plus'
+import TableStore from '@/utils/tableStore'
+import { addSign, updateSign } from '@/api/bpm-boot/sign'
+
+const tableStore = inject('tableStore') as TableStore
+const machineVisible = ref(false)
+const title = ref('')
+const formRef = ref()
+
+// 注意不要和表单ref的命名冲突
+const form = reactive({
+  id: '',
+  name: '',
+  signKey: '',
+  viewPath: ''
+})
+
+//form表单校验规则
+const rules = {
+  name: [{ required: true, message: '标识名不能为空', trigger: 'blur' }],
+  signKey: [{ required: true, message: '标识key不能为空', trigger: 'blur' }],
+  viewPath: [{ required: true, message: '查看表单路径不能为空', trigger: 'blur' }],
+}
+
+const open = (text: string, data?: any) => {
+  title.value = text
+  if (data) {
+    // 表单赋值
+    for (let key in form) {
+      form[key] = data[key]
+    }
+  } else {
+    resetForm()
+    // 在此处恢复默认表单
+    for (let key in form) {
+      form[key] = ''
+    }
+  }
+  machineVisible.value = true
+}
+
+//重置表单内容
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+}
+
+/**
+ * 提交用户表单数据
+ */
+const submit = () => {
+  formRef.value.validate(async (valid: any) => {
+    if (valid) {
+      if (form.id) {
+        await updateSign(form)
+      } else {
+        await addSign(form)
+      }
+      ElMessage.success('保存成功')
+      tableStore.index()
+      machineVisible.value = false
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped>
+.el-upload-list__item {
+  transition: none !important;
+}
+
+.el-select {
+  min-width: 180px;
+}
+</style>