From b186f5b20c4f83773f51786da0cd3e85130540c2 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期五, 22 五月 2026 16:32:01 +0800
Subject: [PATCH] feat（审批模板）: 增强审批流程编辑器功能，新增只读模式——为 TemplateFlowEditor 添加了只读属性，以在流程不可编辑时防止进行修改。——更新审批模板表单部分，使其能够根据 flowEditable 状态条件性地显示可编辑选项。——优化了用户反馈机制，通过动态消息显示审批流程是否可进行修改。
---
src/views/officeProcessAutomation/ApproveManage/approve-template/components/TemplateFlowEditor.vue | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 51 insertions(+), 8 deletions(-)
diff --git a/src/views/officeProcessAutomation/ApproveManage/approve-template/components/TemplateFlowEditor.vue b/src/views/officeProcessAutomation/ApproveManage/approve-template/components/TemplateFlowEditor.vue
index 45b32c0..78304ea 100644
--- a/src/views/officeProcessAutomation/ApproveManage/approve-template/components/TemplateFlowEditor.vue
+++ b/src/views/officeProcessAutomation/ApproveManage/approve-template/components/TemplateFlowEditor.vue
@@ -7,13 +7,21 @@
<div class="tfe-badge">{{ index + 1 }}</div>
<div class="tfe-head">
<span class="tfe-level">{{ levelText(index) }}</span>
- <el-radio-group v-model="item.signMode" size="small" @change="emitOut">
+ <el-radio-group
+ v-if="!readonly"
+ v-model="item.signMode"
+ size="small"
+ @change="emitOut"
+ >
<el-radio-button value="countersign">浼氱</el-radio-button>
<el-radio-button value="or_sign">鎴栫</el-radio-button>
</el-radio-group>
+ <el-tag v-else size="small" type="info" effect="plain">
+ {{ signModeLabel(item.signMode) }}
+ </el-tag>
</div>
<p class="tfe-mode-tip">{{ signModeTip(item.signMode) }}</p>
- <div class="tfe-select">
+ <div v-if="!readonly" class="tfe-select">
<el-select
v-model="item.approverIds"
multiple
@@ -33,7 +41,7 @@
/>
</el-select>
</div>
- <div v-if="item.approvers?.length" class="tfe-chips">
+ <div v-if="item.approvers?.length" class="tfe-chips" :class="{ 'tfe-chips--readonly': readonly }">
<el-tag
v-for="a in item.approvers"
:key="String(a.approverId)"
@@ -44,7 +52,7 @@
{{ a.approverName || "鈥�" }}
</el-tag>
</div>
- <div class="tfe-actions">
+ <div v-if="!readonly" class="tfe-actions">
<el-button type="primary" circle size="small" :disabled="index === 0" title="鍓嶇Щ" @click="moveLeft(index)">
<el-icon><ArrowLeft /></el-icon>
</el-button>
@@ -62,6 +70,7 @@
<el-icon><Delete /></el-icon>
</el-button>
</div>
+ <p v-else-if="!item.approvers?.length" class="tfe-empty-approver">鏆傛棤瀹℃壒浜�</p>
</div>
<div v-if="index < innerList.length - 1" class="tfe-conn">
<div class="tfe-conn-line"></div>
@@ -69,7 +78,7 @@
</div>
</div>
- <div class="tfe-add-wrap">
+ <div v-if="!readonly" class="tfe-add-wrap">
<div v-if="innerList.length" class="tfe-conn">
<div class="tfe-conn-line"></div>
<el-icon class="tfe-conn-icon"><ArrowRight /></el-icon>
@@ -84,7 +93,7 @@
<div v-else class="tfe-empty">
<el-icon :size="44" color="#c0c4cc"><User /></el-icon>
<p>鏆傛棤瀹℃壒鑺傜偣</p>
- <el-button type="primary" @click="addNode">娣诲姞绗竴涓妭鐐�</el-button>
+ <el-button v-if="!readonly" type="primary" @click="addNode">娣诲姞绗竴涓妭鐐�</el-button>
</div>
</div>
</template>
@@ -97,6 +106,8 @@
const props = defineProps({
modelValue: { type: Array, default: () => [] },
userOptions: { type: Array, default: () => [] },
+ /** 閫夋嫨妯℃澘鍚庣敵璇峰満鏅細浠呭睍绀猴紝涓嶅彲鏀瑰鎵逛汉/鑺傜偣 */
+ readonly: { type: Boolean, default: false },
});
const emit = defineEmits(["update:modelValue"]);
@@ -105,6 +116,13 @@
function signModeTip(mode) {
return NODE_SIGN_MODE_OPTIONS.find((x) => x.value === mode)?.desc || "";
+}
+
+function signModeLabel(mode) {
+ return (
+ NODE_SIGN_MODE_OPTIONS.find((x) => x.value === mode)?.label ||
+ (mode === "or_sign" ? "鎴栫" : "浼氱")
+ );
}
function levelText(i) {
@@ -127,6 +145,8 @@
const normalized = normalizeFlowNodes(rows);
return normalized.map((n) => ({
_uid: newUid(),
+ id: n.id,
+ templateId: n.templateId,
nodeOrder: n.nodeOrder,
signMode: n.signMode,
approverIds: n.approvers.map((a) => a.approverId),
@@ -137,6 +157,8 @@
function publicShape(rows) {
return normalizeFlowNodes(
(rows || []).map((r) => ({
+ id: r.id,
+ templateId: r.templateId,
nodeOrder: r.nodeOrder,
signMode: r.signMode,
approvers: r.approvers || [],
@@ -165,18 +187,27 @@
function onApproversChange(ids, row) {
const idList = Array.isArray(ids) ? ids : [];
+ const prevById = new Map((row.approvers || []).map((a) => [String(a.approverId), a]));
row.approverIds = idList;
row.approvers = idList.map((id) => {
+ const prev = prevById.get(String(id));
const u = findUser(id);
- return {
+ const item = {
approverId: id,
- approverName: u ? u.nickName || u.userName || "" : "",
+ approverName: u ? u.nickName || u.userName || "" : prev?.approverName || "",
};
+ if (prev?.id != null) item.id = prev.id;
+ if (prev?.nodeId != null) item.nodeId = prev.nodeId;
+ else if (row.id != null) item.nodeId = row.id;
+ if (prev?.templateId != null) item.templateId = prev.templateId;
+ else if (row.templateId != null) item.templateId = row.templateId;
+ return item;
});
emitOut();
}
function addNode() {
+ if (props.readonly) return;
innerList.value.push({
_uid: newUid(),
nodeOrder: innerList.value.length + 1,
@@ -188,11 +219,13 @@
}
function remove(index) {
+ if (props.readonly) return;
innerList.value.splice(index, 1);
emitOut();
}
function moveLeft(index) {
+ if (props.readonly) return;
if (index < 1) return;
const t = innerList.value[index];
innerList.value[index] = innerList.value[index - 1];
@@ -201,6 +234,7 @@
}
function moveRight(index) {
+ if (props.readonly) return;
if (index >= innerList.value.length - 1) return;
const t = innerList.value[index];
innerList.value[index] = innerList.value[index + 1];
@@ -281,6 +315,15 @@
margin-bottom: 8px;
min-height: 24px;
}
+.tfe-chips--readonly {
+ margin-top: 4px;
+ margin-bottom: 0;
+}
+.tfe-empty-approver {
+ font-size: 12px;
+ color: var(--el-text-color-placeholder);
+ margin: 4px 0 0;
+}
.tfe-actions {
display: flex;
justify-content: center;
--
Gitblit v1.9.3