<!--
|
业务模块「新增」时导入审批模板（固定 moduleKey，仅展示该类型下模板）
|
|
用法：
|
<ApprovalTemplateBindDialog
|
v-model:visible="visible"
|
module-key="regular"
|
@confirm="onTemplateBound"
|
/>
|
-->
|
<template>
|
<el-dialog
|
v-model="dialogVisible"
|
:title="dialogTitle"
|
:width="step === formStep ? 720 : 640"
|
append-to-body
|
class="approval-template-bind-dialog"
|
@closed="onClosed"
|
>
|
<template v-if="step === 1">
|
<div v-loading="templatesLoading || confirming">
|
<ApprovalTemplatePicker
|
:cards="templateCards"
|
:loading="false"
|
:hint="pickerHint"
|
@pick="onPickTemplate"
|
/>
|
</div>
|
</template>
|
|
<template v-else>
|
<div v-loading="templatesLoading">
|
<el-form
|
ref="formRef"
|
:model="bindingForm"
|
:rules="mergedRules"
|
label-width="120px"
|
>
|
<ApprovalTemplateFormSection
|
:active-template="activeTemplate"
|
:fields="formFields"
|
:form-payload="bindingForm.formPayload"
|
v-model:flow-nodes="bindingForm.flowNodes"
|
v-model:attachments="bindingForm.storageBlobDTOs"
|
:template-attachments="bindingForm.templateAttachments"
|
:user-options="flowUserOptions"
|
allow-change-template
|
@change-template="step = 1"
|
/>
|
</el-form>
|
</div>
|
</template>
|
|
<template #footer>
|
<el-button v-if="step === formStep" type="primary" :loading="confirming" @click="onConfirm">
|
确 定
|
</el-button>
|
<el-button v-if="step === formStep" @click="step = 1">重选模板</el-button>
|
<el-button @click="dialogVisible = false">{{ step === 1 ? "取 消" : "关 闭" }}</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed, ref, watch } from "vue";
|
import { ElMessage } from "element-plus";
|
import ApprovalTemplatePicker from "./ApprovalTemplatePicker.vue";
|
import ApprovalTemplateFormSection from "./ApprovalTemplateFormSection.vue";
|
import { useApprovalTemplateBinding } from "../useApprovalTemplateBinding.js";
|
import { useFlowUserOptions } from "../useFlowUserOptions.js";
|
import { getApprovalModuleConfig } from "../approvalModuleRegistry.js";
|
|
const props = defineProps({
|
visible: { type: Boolean, default: false },
|
/** approvalModuleRegistry 中的 moduleKey */
|
moduleKey: { type: String, required: true },
|
/** 为 true 时选模板后直接确认，跳过「确认审批信息」填报步骤 */
|
skipFormConfirm: { type: Boolean, default: false },
|
});
|
|
const emit = defineEmits(["update:visible", "confirm", "closed"]);
|
|
const dialogVisible = computed({
|
get: () => props.visible,
|
set: (v) => emit("update:visible", v),
|
});
|
|
const {
|
step,
|
bindingForm,
|
templateCards,
|
activeTemplate,
|
formFields,
|
formRules,
|
templatesLoading,
|
loadTemplates,
|
resetBinding,
|
pickTemplate,
|
validateBinding,
|
getBindingPayload,
|
moduleConfig,
|
} = useApprovalTemplateBinding({ moduleKey: props.moduleKey, mode: "module" });
|
|
const formStep = 2;
|
const formRef = ref();
|
const confirming = ref(false);
|
const { flowUserOptions, loadFlowUsers } = useFlowUserOptions();
|
|
const mergedRules = computed(() => ({ ...formRules.value }));
|
|
const dialogTitle = computed(() => {
|
const label = moduleConfig.value?.label || "审批";
|
return step.value === 1 ? `选择${label}模板` : `确认${label}审批信息`;
|
});
|
|
const pickerHint = computed(
|
() => `请选择「${moduleConfig.value?.label || "—"}」类型下已启用的审批模板，审批流程将自动带入。`
|
);
|
|
watch(
|
() => props.visible,
|
async (v) => {
|
if (!v) return;
|
resetBinding();
|
step.value = 1;
|
await Promise.all([loadTemplates(), loadFlowUsers()]);
|
const cfg = getApprovalModuleConfig(props.moduleKey);
|
if (!cfg) {
|
ElMessage.warning(`未配置模块「${props.moduleKey}」，请检查 approvalModuleRegistry`);
|
return;
|
}
|
if (!templateCards.value.length) {
|
ElMessage.warning(
|
`「${cfg.label}」下暂无已启用的审批模板，请先在审批模板管理中创建并启用对应类型的模板`
|
);
|
}
|
}
|
);
|
|
async function onPickTemplate(card) {
|
const ok = await pickTemplate(card);
|
if (!ok) return;
|
if (props.skipFormConfirm) {
|
step.value = 1;
|
await onConfirm();
|
return;
|
}
|
step.value = formStep;
|
}
|
|
async function onConfirm() {
|
confirming.value = true;
|
try {
|
const check = await validateBinding(props.skipFormConfirm ? null : formRef.value);
|
if (!check.ok) {
|
if (check.message) ElMessage.warning(check.message);
|
return;
|
}
|
emit("confirm", { ...getBindingPayload(), flowNodes: check.nodes });
|
dialogVisible.value = false;
|
} finally {
|
confirming.value = false;
|
}
|
}
|
|
function onClosed() {
|
resetBinding();
|
emit("closed");
|
}
|
</script>
|
|
<style scoped>
|
.approval-template-bind-dialog :deep(.el-dialog__body) {
|
padding-top: 12px;
|
}
|
</style>
|
