feat（审批模板）: 增强审批流程编辑器功能，新增只读模式——为 TemplateFlowEditor 添加了只读属性，以在流程不可编辑时防止进行修...

yyb

3 小时以前 b186f5b20c4f83773f51786da0cd3e85130540c2

feat（审批模板）: 增强审批流程编辑器功能，新增只读模式——为 TemplateFlowEditor 添加了只读属性，以在流程不可编辑时防止进行修改。——更新审批模板表单部分，使其能够根据 flowEditable 状态条件性地显示可编辑选项。——优化了用户反馈机制，通过动态消息显示审批流程是否可进行修改。

 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"]);

 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;