| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <!-- ä¸å®¡æ¹å表æäº¤/ä¿®æ¹å¼¹çªï¼ç¬¬ä¸æ¥ï¼ä¸è´ --> |
| | | <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> |