sl-sfy-safety/src/views/emergency/emergency-drill/PageDrillPlanItem.vue

<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <BreadcrumbBack />
      <span class="breadcrumb-title">{{ headerTitle }}</span>
    </header>
    <main class="safety-platform-container__main">
      <component :is="dynamicComponent" :id="id" ref="dynamicComponentRef" />
    </main>
    <footer class="safety-platform-container__footer">
      <!-- 提交按钮 -->
      <div v-if="operate === 'create'">
        <el-button @click="router.back()">取消</el-button>
        <el-button type="primary" @click="createSubmit">提交</el-button>
      </div>
      <div v-if="operate === 'execute'">
        <el-button @click="executeSave">保存</el-button>
        <el-button type="primary" @click="executeSubmit">提交</el-button>
      </div>
      <div v-if="operate === 'record'">
        <el-button @click="recordSave">保存</el-button>
        <el-button type="primary" @click="recordSubmit">提交审批</el-button>
      </div>
    </footer>
    <UploadLoading :form-loading="formLoading" v-if="formLoading" />
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, computed, defineAsyncComponent } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import UploadLoading from '@/components/UploadLoading.vue';
  import { createEmergencyDrillPlan } from '@/api/emergency-drill/emergency-drill';

  const formLoading = ref(false);
  const router = useRouter();
  const route = useRoute();
  const operate = route.query.operate;
  const id = route.query.id;
  const headerTitle = computed(() => {
    switch (operate) {
      case 'create':
        return `创建演练计划`;
      case 'view':
        return `演练计划详情`;
      case 'execute':
        return `演练执行`;
      case 'record':
        return `演练记录`;
      default:
        return '未知操作';
    }
  });
  const dynamicComponent = computed(() => {
    switch (operate) {
      case 'create':
        return defineAsyncComponent(() => import('./components/DrillPlanCreateItem.vue'));
      case 'execute':
        return defineAsyncComponent(() => import('./components/DrillPlanExecuteItem.vue'));
      case 'record':
        return defineAsyncComponent(() => import('./components/DrillPlanRecordItem.vue'));
      default:
        return '';
    }
  });

  const dynamicComponentRef = ref();
  const createSubmit = async () => {
    if (!dynamicComponentRef.value) return;
    const res = await dynamicComponentRef.value.handleValidate();
    if (!res) return;
    const formData = dynamicComponentRef.value.getFormData();
    let message;
    try {
      formLoading.value = true;

      await createEmergencyDrillPlan(formData);
      message = '创建成功';

      ElMessage.success(message);
      router.back();
    } finally {
      formLoading.value = false;
    }
  };

  const executeSave = async () => {
    formLoading.value = true;
    await dynamicComponentRef.value.executeSaveOrSubmit('save');
    formLoading.value = false;
  };
  const executeSubmit = async () => {
    formLoading.value = true;
    await dynamicComponentRef.value.executeSaveOrSubmit('submit');
    formLoading.value = false;
  };

  const recordSave = async () => {
    formLoading.value = true;
    await dynamicComponentRef.value.saveDrillRecord();
    formLoading.value = false;
  };
  const recordSubmit = async () => {
    await dynamicComponentRef.value.submitDrillRecord();
  };
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;
  .safety-platform-container__header {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
</style>