<!-- 模板绑定表单区：填报项 + 审批流程 + 附件（须挂在外层 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" />
|
<p class="section-tip">流程与审批人由模板预置，可按需微调节点审批人。</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 },
|
});
|
|
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>
|
