提交 山西正德新型建材有限公司 提交配置文件

yyb

17 小时以前 e5e79769db31b3f64eb7df5eec9543a5241b31f9

 src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateBindDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,176 @@
<!--
  ä¸šåŠ¡æ¨¡å—「新增」时导入审批模板（固定 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>