yyb
16 小时以前 769fb543015f1a90d42882a0a9f0592efa45a10e
src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalInstanceSubmitDialog.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,112 @@
<!-- ä¸Žå®¡æ‰¹åˆ—表提交/修改弹窗(第三步)一致 -->
<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>