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-shared/components/ApprovalTemplateFormSection.vue | 16 ++++++++++++++--
src/views/officeProcessAutomation/ApproveManage/approve-template/components/TemplateFlowEditor.vue | 43 +++++++++++++++++++++++++++++++++++++------
2 files changed, 51 insertions(+), 8 deletions(-)
diff --git a/src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateFormSection.vue b/src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateFormSection.vue
index eaa0104..d6e7073 100644
--- a/src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateFormSection.vue
+++ b/src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateFormSection.vue
@@ -18,8 +18,18 @@
/>
<el-form-item label="瀹℃壒娴佺▼" required>
- <TemplateFlowEditor v-model="flowNodesModel" :user-options="userOptions" />
- <p class="section-tip">娴佺▼涓庡鎵逛汉鐢辨ā鏉块缃紝鍙寜闇�寰皟鑺傜偣瀹℃壒浜恒��</p>
+ <TemplateFlowEditor
+ v-model="flowNodesModel"
+ :user-options="userOptions"
+ :readonly="!flowEditable"
+ />
+ <p class="section-tip">
+ {{
+ flowEditable
+ ? "娴佺▼涓庡鎵逛汉鐢辨ā鏉块缃紝鍙寜闇�寰皟鑺傜偣瀹℃壒浜恒��"
+ : "娴佺▼涓庡鎵逛汉鐢辨墍閫夋ā鏉垮浐瀹氾紝涓嶅彲淇敼銆�"
+ }}
+ </p>
</el-form-item>
<el-form-item v-if="!flowOnly && templateAttachments.length" label="妯℃澘鍙傝��">
@@ -75,6 +85,8 @@
/** 涓� true 鏃朵粎灞曠ず瀹℃壒娴佺▼锛堜笉灞曠ず妯℃澘濉姤椤广�侀檮浠剁瓑锛� */
flowOnly: { type: Boolean, default: false },
uploadLimit: { type: Number, default: 10 },
+ /** 涓� true 鏃跺彲缂栬緫妯℃澘棰勭疆鐨勫鎵逛汉锛堜粎瀹℃壒妯℃澘绠＄悊椤典娇鐢級 */
+ flowEditable: { type: Boolean, default: false },
});
const emit = defineEmits(["update:flowNodes", "update:attachments", "change-template"]);
diff --git a/src/views/officeProcessAutomation/ApproveManage/approve-template/components/TemplateFlowEditor.vue b/src/views/officeProcessAutomation/ApproveManage/approve-template/components/TemplateFlowEditor.vue
index f3f9540..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) {
@@ -189,6 +207,7 @@
}
function addNode() {
+ if (props.readonly) return;
innerList.value.push({
_uid: newUid(),
nodeOrder: innerList.value.length + 1,
@@ -200,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];
@@ -213,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];
@@ -293,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