From 38e2063f1f6f5c6b10768cd8d0e379987781bc66 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Thu, 22 Aug 2024 13:35:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E4=BD=9C=E6=B5=81=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E9=A1=B5=E9=9D=A2=E4=B8=8B=E6=96=B9=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=A3=8E=E6=A0=BC=E8=B0=83=E6=95=B4=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8A=E6=95=B4=E4=BD=93=E6=95=B0=E6=8D=AE=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E5=8F=98=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/auditing.svg                  |   1 +
 src/assets/svgs/send.svg                      |   2 +-
 .../bpm/processInstance/detail/index_new.vue  | 246 +++++++++---------
 3 files changed, 127 insertions(+), 122 deletions(-)
 create mode 100644 src/assets/svgs/auditing.svg

diff --git a/src/assets/svgs/auditing.svg b/src/assets/svgs/auditing.svg
new file mode 100644
index 00000000..5908c13b
--- /dev/null
+++ b/src/assets/svgs/auditing.svg
@@ -0,0 +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="1724304256588" class="icon" viewBox="0 0 1300 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1272" xmlns:xlink="http://www.w3.org/1999/xlink" width="253.90625" height="200"><path d="M784.058182 99.258182l10.938182 18.385454-21.294546-2.56-14.196363 16.058182-4.072728-21.061818-19.781818-8.494545 18.734546-10.472728 2.094545-21.294545 15.709091 14.545454 20.945454-4.654545-9.076363 19.549091zM1067.287273 642.443636l-18.501818 10.821819 2.56-21.294546-16.058182-14.196364 21.061818-4.072727 8.494545-19.665454 10.472728 18.734545 21.294545 1.978182-14.661818 15.709091 4.770909 20.945454-19.432727-8.96z" fill="#2196F3" p-id="1273"></path><path d="M1067.287273 642.443636l-18.501818 10.821819 2.56-21.294546-16.058182-14.196364 21.061818-4.072727 8.494545-19.665454 10.472728 18.734545 21.294545 1.978182-14.661818 15.709091 4.770909 20.945454-19.432727-8.96zM571.927273 100.072727l-17.454546-12.567272 20.596364-6.167273 6.516364-20.48 12.218181 17.570909 21.410909-0.116364-12.916363 17.105455 6.749091 20.363636-20.247273-6.981818-17.338182 12.683636 0.465455-21.410909zM991.418182 784.407273l-21.178182 3.490909 10.123636-18.967273-9.774545-18.967273 21.061818 3.723637 15.127273-15.243637 2.909091 21.294546 19.2 9.658182-19.316364 9.309091-3.258182 21.178181-14.894545-15.476363zM427.985455 156.741818L407.272727 151.505455l16.872728-13.265455-1.396364-21.410909 17.803636 11.985454 20.014546-7.912727-5.934546 20.596364 13.730909 16.523636-21.410909 0.814546-11.52 18.152727-7.447272-20.247273zM854.225455 896.465455l-20.712728-5.352728 16.872728-13.265454-1.396364-21.294546 17.803636 11.869091 20.014546-7.912727-5.934546 20.712727 13.730909 16.523637-21.527272 0.814545-11.403637 18.036364-7.447272-20.130909zM562.501818 923.694545l10.821818 18.385455-21.294545-2.56-14.196364 16.058182-4.072727-21.061818-19.665455-8.494546 18.734546-10.356363 1.978182-21.41091 15.709091 14.661819 20.945454-4.770909-8.96 19.54909zM242.734545 420.770909l-18.385454 10.938182 2.56-21.294546-16.058182-14.196363 21.061818-4.189091 8.494546-19.665455 10.356363 18.734546 21.410909 2.094545-14.545454 15.709091 4.654545 20.945455-19.549091-9.076364z" fill="#2196F3" p-id="1274"></path><path d="M242.734545 420.770909l-18.385454 10.938182 2.56-21.294546-16.058182-14.196363 21.061818-4.189091 8.494546-19.665455 10.356363 18.734546 21.410909 2.094545-14.545454 15.709091 4.654545 20.945455-19.549091-9.076364zM700.858182 943.941818l-17.454546-12.450909 20.48-6.283636 6.516364-20.48 12.334545 17.687272 21.41091-0.116363-12.916364 17.105454 6.632727 20.363637-20.247273-7.098182-17.221818 12.683636 0.465455-21.410909zM303.592727 278.807273l-21.178182 3.490909 10.123637-18.967273-9.890909-18.967273 21.178182 3.723637 15.010909-15.243637 2.909091 21.294546 19.2 9.541818-19.316364 9.425455-3.258182 21.178181-14.778182-15.476363z" fill="#2196F3" p-id="1275"></path><path d="M407.272727 90.647273a486.632727 486.632727 0 0 1 504.552728 11.636363l25.018181-14.429091A512 512 0 0 0 139.636364 546.909091l25.018181-14.429091A486.981818 486.981818 0 0 1 407.272727 90.647273zM893.323636 933.352727a486.749091 486.749091 0 0 1-504.669091-11.636363l-24.901818 14.429091A512 512 0 0 0 1161.192727 477.090909l-24.901818 13.963636a486.981818 486.981818 0 0 1-242.967273 442.298182z" fill="#2196F3" p-id="1276"></path><path d="M814.545455 795.927273a327.447273 327.447273 0 0 1-258.21091 29.556363l-29.78909 17.105455A353.163636 353.163636 0 0 0 998.865455 570.181818l-29.789091 17.105455A326.865455 326.865455 0 0 1 814.545455 795.927273zM486.865455 228.072727A327.447273 327.447273 0 0 1 744.727273 198.516364l29.789091-17.105455A353.163636 353.163636 0 0 0 302.545455 453.818182l29.78909-17.105455A326.865455 326.865455 0 0 1 486.865455 228.072727zM1288.378182 374.690909a53.294545 53.294545 0 0 1-14.429091 11.636364L229.469091 989.090909a53.876364 53.876364 0 0 1-73.425455-19.665454L7.214545 710.632727a53.527273 53.527273 0 0 1 19.781819-73.309091L1071.476364 34.909091a53.876364 53.876364 0 0 1 73.425454 19.665454l148.829091 258.327273a53.061818 53.061818 0 0 1 5.352727 40.727273 55.272727 55.272727 0 0 1-10.705454 21.061818zM32.232727 665.716364A28.043636 28.043636 0 0 0 29.323636 698.181818l148.829091 257.978182a28.392727 28.392727 0 0 0 38.516364 10.356364l1044.48-601.949091a28.16 28.16 0 0 0 10.356364-38.516364L1122.676364 67.84a28.276364 28.276364 0 0 0-38.4-10.356364L39.68 659.432727a27.810909 27.810909 0 0 0-7.447273 6.283637z" fill="#2196F3" p-id="1277"></path><path d="M477.090909 500.945455l22.109091 38.283636-15.36 8.843636-13.963636-24.436363-151.272728 87.621818 14.545455 25.134545-15.243636 8.843637-23.272728-39.330909L377.949091 558.545455c-6.050909-4.887273-11.636364-8.843636-15.825455-11.636364l14.894546-12.450909c3.956364 3.141818 9.658182 8.145455 17.105454 14.894545zM459.869091 698.181818l-48.407273 28.043637 7.447273 12.334545-15.36 8.843636-61.207273-106.007272L406.225455 605.090909l-12.683637-21.876364 15.709091-9.076363 12.683636 21.876363L486.4 558.545455l60.509091 104.727272-15.36 8.843637-7.098182-12.218182-49.105454 28.392727L501.294545 733.090909l-15.70909 9.076364z m-45.381818-78.661818l-48.523637 27.461818 14.545455 25.134546 48.523636-28.043637zM388.538182 686.545455l14.545454 25.134545 48.523637-28.043636-14.545455-25.134546z m105.425454-79.476364L479.418182 581.818182 430.545455 609.861818l14.545454 25.134546z m-26.647272 67.490909l49.221818-28.392727-14.545455-25.134546-49.105454 28.392728zM624.058182 541.090909c-4.654545 6.167273-10.123636 13.149091-16.290909 20.829091l34.909091 61.207273a18.734545 18.734545 0 0 1-6.632728 29.207272l-18.734545 10.938182-11.636364-13.614545a174.545455 174.545455 0 0 0 17.454546-8.610909 8.378182 8.378182 0 0 0 2.327272-12.683637l-30.021818-52.363636-9.774545 10.24-9.890909 10.123636-12.450909-12.916363c9.076364-8.145455 16.872727-15.709091 23.272727-22.574546l-30.836364-53.527272-24.785454 14.196363-8.727273-15.010909L546.909091 492.218182l-23.272727-40.378182 15.36-8.843636 23.272727 40.378181 21.643636-12.450909 8.727273 15.127273-21.643636 12.450909L599.156364 546.909091c5.352727-6.4 10.821818-13.381818 16.290909-20.712727z m8.843636-45.032727L689.221818 593.454545a193.745455 193.745455 0 0 0 22.574546-27.112727l11.636363 13.032727a363.985455 363.985455 0 0 1-41.192727 44.8l-12.334545-12.450909a10.821818 10.821818 0 0 0 1.62909-13.730909l-98.90909-171.403636 15.476363-8.96 36.305455 62.952727 30.836363-17.803636 8.029091 15.476363z m128 81.454545a20.130909 20.130909 0 0 1-30.836363-9.541818L628.363636 392.378182l15.36-8.378182 38.050909 66.094545A206.08 206.08 0 0 0 709.818182 409.018182l16.64 7.563636a297.890909 297.890909 0 0 1-34.909091 48.64l52.712727 91.112727a8.843636 8.843636 0 0 0 13.614546 4.072728l10.821818-6.167273a14.429091 14.429091 0 0 0 7.912727-11.636364 102.981818 102.981818 0 0 0-15.010909-38.516363l17.105455-3.723637c12.334545 24.669091 17.687273 41.076364 16.058181 48.989091a28.16 28.16 0 0 1-15.127272 18.152728zM805.236364 288.116364l16.174545-9.309091 23.272727 39.330909 78.429091-45.265455 59.345455 102.749091-16.64 9.076364-7.912727-13.847273L896 407.272727l42.938182 74.472728-16.174546 9.30909-42.938181-74.472727-62.603637 36.072727 8.029091 13.73091-15.825454 9.192727L749.730909 372.363636l78.196364-45.265454z m2.676363 149.061818l62.603637-36.072727-33.745455-58.181819-62.487273 36.072728z m78.778182-45.381818l62.72-36.189091-33.745454-58.181818-62.72 36.072727z" fill="#2196F3" p-id="1278"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/send.svg b/src/assets/svgs/send.svg
index eb16fc13..6fbc9843 100644
--- 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>
\ No newline at end of file
+<?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>
\ No newline at end of file
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index 70cb6b8d..d21c04ce 100644
--- 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[]>([]) // 用户列表