From f51c5018dc9088f393f34e3e2508d7caf80002c4 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期三, 19 八月 2026 15:37:16 +0800
Subject: [PATCH] feat(approval): 支持多审批人并行审批功能
---
src/views/safeProduction/safeWorkApproval/components/approvalDia.vue | 119 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 68 insertions(+), 51 deletions(-)
diff --git a/src/views/safeProduction/safeWorkApproval/components/approvalDia.vue b/src/views/safeProduction/safeWorkApproval/components/approvalDia.vue
index 5a3a5de..b7167be 100644
--- a/src/views/safeProduction/safeWorkApproval/components/approvalDia.vue
+++ b/src/views/safeProduction/safeWorkApproval/components/approvalDia.vue
@@ -198,29 +198,28 @@
<el-form :model="{ activities }"
ref="formRef"
label-position="top">
- <el-steps :active="getActiveStep()"
+ <el-steps :active="getActiveStep()"
finish-status="success"
process-status="process"
align-center
direction="vertical">
- <el-step v-for="(activity, index) in activities"
- :key="index"
+ <el-step v-for="(group, gIndex) in stepGroups"
+ :key="gIndex"
finish-status="success"
- :title="getNodeTitle(index, activities.length)"
- :description="activity.approveNodeUser"
- :icon="getNodeIcon(activity, index)">
+ :title="getNodeTitle(gIndex, stepGroups.length)"
+ :icon="getNodeIcon(group)">
<template #icon>
- <el-icon v-if="activity.approveNodeStatus === 2"
+ <el-icon v-if="group.some(a => a.approveNodeStatus === 2)"
color="red"
:size="22">
<WarningFilled />
</el-icon>
- <el-icon v-else-if="activity.isShen"
+ <el-icon v-else-if="group.some(a => a.isShen)"
color="#1890ff"
:size="22">
<Edit />
</el-icon>
- <el-icon v-else-if="activity.approveNodeStatus === 1"
+ <el-icon v-else-if="group.every(a => a.approveNodeStatus === 1)"
color="#67C23A"
:size="26">
<Check />
@@ -232,37 +231,42 @@
</el-icon>
</template>
<template #title>
- <span style="color: #000000">{{ getNodeTitle(index, activities.length) }}</span>
+ <span style="color: #000000">{{ getNodeTitle(gIndex, stepGroups.length) }}</span>
+ <el-tag :type="group[0]?.approveMode === 'and' ? 'warning' : 'info'" size="small" style="margin-left: 6px">{{ group[0]?.approveMode === 'and' ? '浼氱' : '鎴栫' }}</el-tag>
</template>
<template #description>
- <div class="node-user">
- <div class="avatar-wrapper">
- <img :src="userStore.avatar"
- class="user-avatar"
- alt="" />
+ <div v-for="(activity, aIndex) in group"
+ :key="activity.id || aIndex"
+ class="node-user-item">
+ <div class="node-user">
+ <div class="avatar-wrapper">
+ <img :src="userStore.avatar"
+ class="user-avatar"
+ alt="" />
+ </div>
+ <span style="color: #000000">{{ activity.approveNodeUser }}锛坽{ activity.isApproval }}锛�</span>
</div>
- <span style="color: #000000">{{ activity.approveNodeUser }}-{{activity.isApproval}}</span>
- </div>
- <div v-if="!activity.isShen"
- class="node-reason">
- <span>瀹℃壒鎰忚锛�</span>{{ activity.approveNodeReason }}
- </div>
- <div v-if="!activity.isShen"
- class="node-reason">
- <span>绛惧悕锛�</span>
- <img :src="activity.urlTem"
- class="signImg"
- alt=""
- v-if="activity.urlTem" />
- </div>
- <div v-else-if="activity.isShen">
- <el-form-item :prop="'activities.' + index + '.approveNodeReason'"
- :rules="[{ required: true, message: '瀹℃壒鎰忚涓嶈兘涓虹┖', trigger: 'blur' }]">
- <el-input v-model="activity.approveNodeReason"
- clearable
- type="textarea"
- :disabled="operationType === 'view'"></el-input>
- </el-form-item>
+ <div v-if="!activity.isShen"
+ class="node-reason">
+ <span>瀹℃壒鎰忚锛�</span>{{ activity.approveNodeReason }}
+ </div>
+ <div v-if="!activity.isShen"
+ class="node-reason">
+ <span>绛惧悕锛�</span>
+ <img :src="activity.urlTem"
+ class="signImg"
+ alt=""
+ v-if="activity.urlTem" />
+ </div>
+ <div v-else-if="activity.isShen">
+ <el-form-item :prop="'activities.' + getActivityIndex(activity) + '.approveNodeReason'"
+ :rules="[{ required: true, message: '瀹℃壒鎰忚涓嶈兘涓虹┖', trigger: 'blur' }]">
+ <el-input v-model="activity.approveNodeReason"
+ clearable
+ type="textarea"
+ :disabled="operationType === 'view'"></el-input>
+ </el-form-item>
+ </div>
</div>
</template>
</el-step>
@@ -348,19 +352,31 @@
return "瀹℃壒";
};
- // 鑾峰彇褰撳墠婵�娲绘楠�
+ // 鑾峰彇褰撳墠婵�娲绘楠わ紙鍒嗙粍鍚庯細鍚緟瀹′汉鐨勭粍涓嬫爣锛屾棤鍒欒繑鍥炵粍鎬绘暟=鍏ㄩ儴瀹屾垚锛�
const getActiveStep = () => {
- // 濡傛灉鎵�鏈� isShen 閮戒负 false锛岃繑鍥炴渶鍚庝竴涓楠わ紙鍏ㄩ儴瀹屾垚锛�
- const hasActive = activities.value.some(a => a.isShen === true);
- if (!hasActive) return activities.value.length;
- // 褰撳墠鑺傜偣绱㈠紩
- return activities.value.findIndex(a => a.isShen == true);
+ const idx = stepGroups.value.findIndex(group => group.some(a => a.isShen === true));
+ if (idx === -1) return stepGroups.value.length;
+ return idx;
};
- // 姝ラicon
- const getNodeIcon = (activity, index) => {
- if (activity.approveNodeStatus === 2) return "el-icon-warning"; // 涓嶉�氳繃
- if (activity.isShen) return "Edit";
+ // 姝ラicon锛堢粍绾э細浠讳竴浜洪┏鍥�/浠讳竴浜哄緟瀹★級
+ const getNodeIcon = group => {
+ if (group.some(a => a.approveNodeStatus === 2)) return "el-icon-warning"; // 涓嶉�氳繃
+ if (group.some(a => a.isShen)) return "Edit";
return "";
+ };
+ // 瀹℃壒鑺傜偣鍒嗙粍锛堝悓涓� approveNodeOrder = 鍚屼竴鑺傜偣鐨勫鍚嶅鎵逛汉锛屾垨绛�/浼氱锛�
+ const stepGroups = computed(() => {
+ const map = new Map();
+ (activities.value || []).forEach(a => {
+ const order = a.approveNodeOrder;
+ if (!map.has(order)) map.set(order, []);
+ map.get(order).push(a);
+ });
+ return Array.from(map.values());
+ });
+ // 鑾峰彇鑺傜偣鎴愬憳鍦� activities 涓殑绱㈠紩锛堢敤浜庤〃鍗曟牎楠� prop锛�
+ const getActivityIndex = activity => {
+ return activities.value.findIndex(a => a.id === activity.id);
};
// 鎵撳紑寮规
@@ -474,10 +490,8 @@
return;
}
currentActivity.approveNodeStatus = status;
- // 鍒ゆ柇鏄惁涓烘渶鍚庝竴姝�
- const isLast =
- activities.value.findIndex(a => a.isShen) === activities.value.length - 1;
- updateApproveNode({ ...currentActivity, isLast }).then(() => {
+ // 娴佽浆鍒ゆ柇鐢卞悗绔畬鎴愶紝鍓嶇涓嶅啀浼� isLast
+ updateApproveNode({ ...currentActivity }).then(() => {
proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
closeDia();
});
@@ -506,6 +520,9 @@
align-items: center;
gap: 8px;
}
+ .node-user-item {
+ margin: 8px 0;
+ }
.node-status {
color: #1890ff;
margin-left: 8px;
--
Gitblit v1.9.3