Merge branch 'dev_NEW_pro' into dev_宁夏_英泽防锈

gaoluyang

3 天以前 ab264123941cd3d345687af92aab2a9e04968960

 src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateFormSection.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,122 @@
<!-- æ¨¡æ¿ç»‘定表单区：填报项 + å®¡æ‰¹æµç¨‹ + é™„件（须挂在外层 el-form ä¸‹ï¼‰ -->
<template>
  <template v-if="activeTemplate">
    <el-form-item
      v-if="showTemplateName && !hideTemplateName && !flowAttachmentsOnly && !flowOnly"
      label="审批模板"
    >
      <span class="template-name">{{ activeTemplate.label }}</span>
      <el-button v-if="allowChangeTemplate" type="primary" link class="ml12" @click="emit('change-template')">
        æ›´æ¢æ¨¡æ¿
      </el-button>
    </el-form-item>

    <FormPayloadFields
      v-if="!hideFormFields && !flowAttachmentsOnly && !flowOnly"
      :fields="fields"
      :form-payload="formPayload"
    />

    <el-form-item label="审批流程" required>
      <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="模板参考">
      <el-tag
        v-for="(f, i) in templateAttachments"
        :key="`tpl-${i}`"
        class="attachment-tag"
        type="info"
        effect="plain"
      >
        {{ attachmentDisplayName(f) }}
      </el-tag>
      <p class="section-tip">以上为模板附带文件，仅供参考；提交附件请在下方上传。</p>
    </el-form-item>

    <el-form-item v-if="!flowOnly" label="附件">
      <FileUpload
        v-model:file-list="attachmentsModel"
        :limit="uploadLimit"
        button-text="点击选择文件"
      />
      <p class="section-tip">选填，可上传与申请相关的说明材料。</p>
    </el-form-item>
  </template>
  <el-empty v-else description="请先选择审批模板" :image-size="64" />
</template>

<script setup>
import { computed } from "vue";
import FileUpload from "@/components/AttachmentUpload/file/index.vue";
import TemplateFlowEditor from "../../approve-template/components/TemplateFlowEditor.vue";
import FormPayloadFields from "../../approve-list/components/FormPayloadFields.vue";
import { attachmentDisplayName } from "../approvalTemplateBindingUtils.js";

const props = defineProps({
  activeTemplate: { type: Object, default: null },
  fields: { type: Array, default: () => [] },
  formPayload: { type: Object, required: true },
  flowNodes: { type: Array, default: () => [] },
  /** ç”¨æˆ·è‡ªè¡Œä¸Šä¼ çš„附件 */
  attachments: { type: Array, default: () => [] },
  /** æ¨¡æ¿é¢„置附件（只读展示） */
  templateAttachments: { type: Array, default: () => [] },
  userOptions: { type: Array, default: () => [] },
  showTemplateName: { type: Boolean, default: true },
  allowChangeTemplate: { type: Boolean, default: true },
  /** ä¸º true æ—¶ä¸å±•ç¤ºæ¨¡æ¿è‡ªå®šä¹‰å¡«æŠ¥é¡¹ï¼ˆä»…保留审批流程与附件） */
  hideFormFields: { type: Boolean, default: false },
  /** ä¸º true æ—¶ä¸å±•ç¤ºå®¡æ‰¹æ¨¡æ¿åç§°è¡Œï¼ˆç”±çˆ¶çº§ç½®é¡¶å±•ç¤ºï¼‰ */
  hideTemplateName: { type: Boolean, default: false },
  /** ä¸º true æ—¶ä»…展示审批流程与附件（填报项由父级单独渲染） */
  flowAttachmentsOnly: { type: Boolean, default: false },
  /** ä¸º 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"]);

const flowNodesModel = computed({
  get: () => props.flowNodes,
  set: (v) => emit("update:flowNodes", v),
});

const attachmentsModel = computed({
  get: () => props.attachments,
  set: (v) => emit("update:attachments", v),
});
</script>

<style scoped>
.template-name {
  font-weight: 600;
  color: var(--el-text-color-primary);
}
.ml12 {
  margin-left: 12px;
}
.section-tip {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin: 8px 0 0;
  line-height: 1.5;
}
.attachment-tag {
  margin: 0 8px 8px 0;
}
</style>