feat: 工作流审批页面下方按钮样式风格调整以及整体数据逻辑变更

2025-11-04 12:18:43 +08:00 · 2024-08-22 13:35:33 +08:00
parent 4bddfbf95d
commit 38e2063f1f
3 changed files with 127 additions and 122 deletions
--- a/src/assets/svgs/auditing.svg
+++ b/src/assets/svgs/auditing.svg
--- a/src/assets/svgs/send.svg
+++ b/src/assets/svgs/send.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724206193401" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1237" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M707.91 103c16.28 0 29.522 13.007 29.897 29.195l0.009 0.706v111.878a29.96 29.96 0 0 1-0.898 7.3l171.177-0.001c16.28 0 29.522 13.007 29.897 29.195l0.008 0.706v637.12c0 16.278-13.01 29.518-29.2 29.893l-0.705 0.008H270.884c-16.28 0-29.522-13.007-29.897-29.195l-0.008-0.706V787.274c0-16.514 13.389-29.9 29.905-29.9 16.28 0 29.522 13.007 29.897 29.194l0.008 0.706v101.924h577.4V311.88h-577.4v88.787c0 16.278-13.009 29.518-29.2 29.893l-0.705 0.008c-16.28 0-29.522-13.008-29.897-29.195l-0.008-0.706V281.979c0-16.278 13.009-29.518 29.2-29.893l0.705-0.008h408.019a29.916 29.916 0 0 1-0.89-6.593l-0.008-0.706v-81.978H132.808v407.113h385.787L408.223 456.982c-11.36-11.624-11.329-30.143-0.066-41.729l0.554-0.555c11.625-11.358 30.147-11.327 41.734-0.066l0.555 0.554 161.028 164.762c11.244 11.504 11.344 29.793 0.362 41.42l-0.55 0.565-161.027 161.849c-11.648 11.707-30.583 11.757-42.292 0.11-11.524-11.461-11.754-29.979-0.657-41.723l0.546-0.563 111.319-111.89H102.905c-16.28 0-29.522-13.007-29.897-29.195l-0.008-0.705V132.9c0-16.278 13.01-29.518 29.2-29.893l0.705-0.008H707.91z" fill="#ffffff" p-id="1238"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724297262365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1396" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M707.91 103c16.28 0 29.522 13.007 29.897 29.195l0.009 0.706v111.878a29.96 29.96 0 0 1-0.898 7.3l171.177-0.001c16.28 0 29.522 13.007 29.897 29.195l0.008 0.706v637.12c0 16.278-13.01 29.518-29.2 29.893l-0.705 0.008H270.884c-16.28 0-29.522-13.007-29.897-29.195l-0.008-0.706V787.274c0-16.514 13.389-29.9 29.905-29.9 16.28 0 29.522 13.007 29.897 29.194l0.008 0.706v101.924h577.4V311.88h-577.4v88.787c0 16.278-13.009 29.518-29.2 29.893l-0.705 0.008c-16.28 0-29.522-13.008-29.897-29.195l-0.008-0.706V281.979c0-16.278 13.009-29.518 29.2-29.893l0.705-0.008h408.019a29.916 29.916 0 0 1-0.89-6.593l-0.008-0.706v-81.978H132.808v407.113h385.787L408.223 456.982c-11.36-11.624-11.329-30.143-0.066-41.729l0.554-0.555c11.625-11.358 30.147-11.327 41.734-0.066l0.555 0.554 161.028 164.762c11.244 11.504 11.344 29.793 0.362 41.42l-0.55 0.565-161.027 161.849c-11.648 11.707-30.583 11.757-42.292 0.11-11.524-11.461-11.754-29.979-0.657-41.723l0.546-0.563 111.319-111.89H102.905c-16.28 0-29.522-13.007-29.897-29.195l-0.008-0.705V132.9c0-16.278 13.01-29.518 29.2-29.893l0.705-0.008H707.91z" p-id="1397"></path></svg>
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -1,5 +1,6 @@
 <template>
-  <ContentWrap :bodyStyle="{ padding: '10px 20px' }">
+  <ContentWrap :bodyStyle="{ padding: '10px 20px' }" class="position-relative">
+    <Icon class="!position-absolute right-20px" :size="130" icon="svg-icon:auditing" />
    <div class="text-#878c93">编号：{{ id }}</div>
    <el-divider class="!my-8px" />
    <div class="flex items-center gap-5 mb-10px">
@@ -21,11 +22,11 @@
      <!-- 表单信息 -->
      <el-tab-pane label="表单信息">
        <el-row :gutter="10">
-          <el-col :span="18">
+          <el-col :span="18" class="!flex !flex-col">
            <!-- 表单信息 -->
            <div
              v-loading="processInstanceLoading"
-              class="form-box border-1 border-solid border-[#ccc] p-20px flex flex-col mb-50px"
+              class="form-box border-1 border-solid border-[#ccc] p-20px flex flex-col mb-30px"
            >
              <!-- 情况一：流程表单 -->
              <el-col
@@ -47,90 +48,98 @@
            </div>

            <!-- 审批信息 -->
-            <el-divider content-position="center" v-if="runningTasks.length > 0">
+            <el-divider content-position="center" v-if="runningTask">
              <div class="text-16px font-1000">审批意见</div>
            </el-divider>
-            <div
-              class="mt-50px"
-              v-for="(item, index) in runningTasks"
-              :key="index"
-              v-loading="processInstanceLoading"
-            >
-              <el-col :offset="4" :span="16">
-                <el-form
-                  :ref="'form' + index"
-                  :model="auditForms[index]"
-                  :rules="auditRule"
-                  label-width="100px"
+            <div class="flex flex-col flex-1" v-loading="processInstanceLoading">
+              <el-form
+                class="mb-auto"
+                ref="formRef"
+                :model="auditForm"
+                :rules="auditRule"
+                label-width="100px"
+              >
+                <el-form-item
+                  v-if="processInstance && processInstance.startUser"
+                  label="流程发起人"
                >
-                  <el-form-item
-                    v-if="processInstance && processInstance.startUser"
-                    label="流程发起人"
-                  >
-                    {{ processInstance?.startUser.nickname }}
-                    <el-tag size="small" type="info" class="ml-8px">
-                      {{ processInstance?.startUser.deptName }}
-                    </el-tag>
-                  </el-form-item>
-                  <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"
+                  {{ processInstance?.startUser.nickname }}
+                  <el-tag size="small" type="info" class="ml-8px">
+                    {{ processInstance?.startUser.deptName }}
+                  </el-tag>
+                </el-form-item>
+                <el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
+                  <template #header>
+                    <span class="el-icon-picture-outline">
+                      填写表单【{{ runningTask?.formName }}】
+                    </span>
+                  </template>
+                  <form-create
+                    v-model="approveForm.value"
+                    v-model:api="approveFormFApi"
+                    :option="approveForm.option"
+                    :rule="approveForm.rule"
+                  />
+                </el-card>
+                <el-form-item label="审批建议" prop="reason">
+                  <el-input
+                    v-model="auditForm.reason"
+                    placeholder="请输入审批建议"
+                    type="textarea"
+                  />
+                </el-form-item>
+                <el-form-item label="抄送人" prop="copyUserIds">
+                  <el-select v-model="auditForm.copyUserIds" multiple placeholder="请选择抄送人">
+                    <el-option
+                      v-for="itemx in userOptions"
+                      :key="itemx.id"
+                      :label="itemx.nickname"
+                      :value="itemx.id"
                    />
-                  </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="itemx in userOptions"
-                        :key="itemx.id"
-                        :label="itemx.nickname"
-                        :value="itemx.id"
-                      />
-                    </el-select>
-                  </el-form-item>
-                </el-form>
-                <div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
-                  <el-button type="success" @click="handleAudit(item, true)">
+                  </el-select>
+                </el-form-item>
+              </el-form>
+              <div class="h-60px">
+                <el-divider class="!my-8px" />
+                <div class="text-14px flex items-center color-#32373c font-bold">
+                  <el-button plain type="success" @click="handleAudit(true)">
                    <Icon icon="ep:select" />&nbsp; 通过
                  </el-button>
-                  <el-button type="danger" @click="handleAudit(item, false)">
+                  <el-button class="mr-20px" plain type="danger" @click="handleAudit(false)">
                    <Icon icon="ep:close" />&nbsp; 拒绝
                  </el-button>
-                  <el-button type="primary" @click="handleSend(item)">
-                    <Icon icon="svg-icon:send" />&nbsp; 抄送
-                  </el-button>
-                  <el-button @click="openTaskUpdateAssigneeForm(item.id)">
-                    <Icon icon="fa:share-square-o" />&nbsp; 转交
-                  </el-button>
-                  <el-button type="info" @click="handleDelegate(item)">
-                    <Icon icon="ep:position" />&nbsp; 委派
-                  </el-button>
-                  <el-button type="primary" @click="handleSign(item)">
-                    <Icon icon="ep:plus" />&nbsp; 加签
-                  </el-button>
-                  <el-button type="warning" @click="handleBack(item)">
-                    <Icon icon="fa:mail-reply" />&nbsp; 退回
-                  </el-button>
+                  <div
+                    class="mx-15px cursor-pointer !hover:color-#6db5ff flex items-center"
+                    @click="handleSend"
+                  >
+                    <Icon :size="14" icon="svg-icon:send" />&nbsp;抄送
+                  </div>
+                  <div
+                    class="mx-15px cursor-pointer !hover:color-#6db5ff flex items-center"
+                    @click="openTaskUpdateAssigneeForm"
+                  >
+                    <Icon :size="14" icon="fa:share-square-o" />&nbsp;转交
+                  </div>
+                  <div
+                    class="mx-15px cursor-pointer !hover:color-#6db5ff flex items-center"
+                    @click="handleDelegate"
+                  >
+                    <Icon :size="14" icon="ep:position" />&nbsp;委派
+                  </div>
+                  <div
+                    class="mx-15px cursor-pointer !hover:color-#6db5ff flex items-center"
+                    @click="handleSign"
+                  >
+                    <Icon :size="14" icon="ep:plus" />&nbsp;加签
+                  </div>
+                  <div
+                    class="mx-15px cursor-pointer !hover:color-#6db5ff flex items-center"
+                    @click="handleBack"
+                  >
+                    <Icon :size="14" icon="fa:mail-reply" />&nbsp;退回
+                  </div>
                </div>
-              </el-col>
+              </div>
            </div>
          </el-col>
          <el-col :span="6">
@@ -241,13 +250,13 @@ const bpmnXml = ref('') // BPMN XML
 const tasksLoad = ref(true) // 任务的加载中
 const tasks = ref<any[]>([]) // 任务列表
 // ========== 审批信息 ==========
-const runningTasks = ref<any[]>([]) // 运行中的任务
-const auditForms = ref<any[]>([]) // 审批任务的表单
+const runningTask = ref<any>({}) // 运行中的任务
+const auditForm = ref<any>({}) // 审批任务的表单
 const auditRule = reactive({
  reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
 })
-const approveForms = ref<any[]>([]) // 审批通过时，额外的补充信息
-const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
+const approveForm = ref<any>({}) // 审批通过时，额外的补充信息
+const approveFormFApi = ref<any>({}) // approveForms 的 fAPi

 // ========== 申请信息 ==========
 const fApi = ref<ApiAttrs>() //
@@ -259,12 +268,10 @@ const detailForm = ref({

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

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

  // 2.1 提交审批
  const data = {
-    id: task.id,
-    reason: auditForms.value[index].reason,
-    copyUserIds: auditForms.value[index].copyUserIds
+    id: runningTask.value.id,
+    reason: auditForm.value.reason,
+    copyUserIds: auditForm.value.copyUserIds
  }
  if (pass) {
    // 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
-    const formCreateApi = approveFormFApis.value[index]
+    const formCreateApi = approveFormFApi.value
    if (formCreateApi) {
      await formCreateApi.validate()
-      data.variables = approveForms.value[index].value
+      // @ts-ignore
+      data.variables = approveForm.value.value
    }
    await TaskApi.approveTask(data)
    message.success('审批通过成功')
@@ -307,26 +313,26 @@ const handleAudit = async (task, pass) => {

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

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

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

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

 /** 获得详情 */
@@ -338,7 +344,7 @@ const getDetail = () => {
 }

 /** 加载流程实例 */
-const BusinessFormComponent = ref(null) // 异步组件
+const BusinessFormComponent = ref<any>(null) // 异步组件
 const getProcessInstance = async () => {
  try {
    processInstanceLoading.value = true
@@ -369,9 +375,7 @@ const getProcessInstance = async () => {
    }

    // 加载流程图
-    bpmnXml.value = (
-      await DefinitionApi.getProcessDefinition(processDefinition.id as number)
-    )?.bpmnXml
+    bpmnXml.value = (await DefinitionApi.getProcessDefinition(processDefinition.id))?.bpmnXml
  } finally {
    processInstanceLoading.value = false
  }
@@ -379,10 +383,10 @@ const getProcessInstance = async () => {

 /** 加载任务列表 */
 const getTaskList = async () => {
-  runningTasks.value = []
-  auditForms.value = []
-  approveForms.value = []
-  approveFormFApis.value = []
+  runningTask.value = {}
+  auditForm.value = {}
+  approveForm.value = {}
+  approveFormFApi.value = {}
  try {
    // 获得未取消的任务
    tasksLoad.value = true
@@ -433,25 +437,25 @@ const loadRunningTask = (tasks) => {
      return
    }
    // 2.3 添加到处理任务
-    runningTasks.value.push({ ...task })
-    auditForms.value.push({
+    runningTask.value = { ...task }
+    auditForm.value = {
      reason: '',
      copyUserIds: []
-    })
+    }

    // 2.4 处理 approve 表单
    if (task.formId && task.formConf) {
-      const approveForm = {}
-      setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariables)
-      approveForms.value.push(approveForm)
+      const tempApproveForm = {}
+      setConfAndFields2(tempApproveForm, task.formConf, task.formFields, task.formVariables)
+      approveForm.value = tempApproveForm
    } else {
-      approveForms.value.push({}) // 占位，避免为空
+      approveForm.value = {} // 占位，避免为空
    }
  })
 }

 /* 抄送 TODO */
-const handleSend = (item) => {}
+const handleSend = () => {}

 /** 初始化 */
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表