<!-- 与审批列表提交/修改弹窗（第三步）一致 -->
|
<template>
|
<el-dialog
|
v-model="visible"
|
:title="title"
|
width="720px"
|
append-to-body
|
destroy-on-close
|
class="approve-submit-dialog"
|
@closed="emit('closed')"
|
>
|
<el-form ref="innerFormRef" :model="form" :rules="rules" label-width="120px">
|
<el-form-item v-if="isEdit" label="审批类型">
|
<span class="approve-type-cell" :style="approvalTypeStyle(activeTemplate?.approvalType)">
|
{{ activeTemplate?.label || form.templateName || "—" }}
|
</span>
|
</el-form-item>
|
<slot name="before" :form="form" :fields="fields" />
|
<ApprovalTemplateFormSection
|
:active-template="activeTemplate"
|
:fields="fields"
|
:form-payload="form.formPayload"
|
v-model:flow-nodes="form.flowNodes"
|
v-model:attachments="form.storageBlobDTOs"
|
:template-attachments="form.templateAttachments"
|
:user-options="userOptions"
|
:show-template-name="!isEdit"
|
:allow-change-template="false"
|
:flow-attachments-only="flowAttachmentsOnly"
|
:flow-only="flowOnly"
|
/>
|
<slot name="after" :form="form" :fields="fields" />
|
</el-form>
|
<template #footer>
|
<el-button type="primary" :loading="saving" @click="handleSubmitClick">
|
{{ isEdit ? "保 存" : "提 交" }}
|
</el-button>
|
<el-button @click="visible = false">取 消</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed, ref, watch } from "vue";
|
import { ElMessage } from "element-plus";
|
import { approvalTypeStyle } from "../../approve-list/approveListConstants.js";
|
import ApprovalTemplateFormSection from "./ApprovalTemplateFormSection.vue";
|
|
const innerFormRef = ref(null);
|
|
const props = defineProps({
|
modelValue: { type: Boolean, default: false },
|
title: { type: String, default: "" },
|
form: { type: Object, required: true },
|
rules: { type: Object, default: () => ({}) },
|
fields: { type: Array, default: () => [] },
|
activeTemplate: { type: Object, default: null },
|
userOptions: { type: Array, default: () => [] },
|
isEdit: { type: Boolean, default: false },
|
saving: { type: Boolean, default: false },
|
formRef: { type: Object, default: null },
|
/** 填报项由 before 插槽单独渲染时设为 true */
|
flowAttachmentsOnly: { type: Boolean, default: false },
|
flowOnly: { type: Boolean, default: false },
|
});
|
|
const emit = defineEmits(["update:modelValue", "submit", "closed"]);
|
|
const visible = computed({
|
get: () => props.modelValue,
|
set: (v) => emit("update:modelValue", v),
|
});
|
|
watch(
|
innerFormRef,
|
(el) => {
|
if (props.formRef) props.formRef.value = el;
|
},
|
{ flush: "post" }
|
);
|
|
watch(visible, (v) => {
|
if (!v && props.formRef) props.formRef.value = null;
|
});
|
|
async function handleSubmitClick() {
|
if (!innerFormRef.value) {
|
ElMessage.warning("表单未就绪，请稍后再试");
|
return;
|
}
|
try {
|
await innerFormRef.value.validate();
|
} catch {
|
ElMessage.warning("请完善表单必填项后再保存");
|
return;
|
}
|
emit("submit");
|
}
|
</script>
|
|
<style scoped>
|
.approve-type-cell {
|
display: inline-block;
|
padding: 2px 10px;
|
border-radius: 4px;
|
font-size: 13px;
|
line-height: 1.5;
|
}
|
.approve-submit-dialog :deep(.el-dialog__body) {
|
padding-top: 12px;
|
}
|
</style>
|
