sl-sfy-safety/src/views/traffic/accident/AccidentItem.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" v-if="operate">
      <el-button @click="router.back()">取消</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </footer>
    <UploadLoading :form-loading="formLoading" v-if="formLoading" />
  </div>
</template>

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

  const router = useRouter();
  const route = useRoute();
  const operate = route.query.operate;
  const id = route.query.id;

  const formLoading = ref(false);

  const headerTitle = computed(() => {
    const title = '交通事故记录';
    if (operate === 'create') {
      return `创建${title}`;
    } else if (operate === 'edit') {
      return `编辑${title}`;
    }
    return '事故详情';
  });

  const dynamicComponent = computed(() => {
    if (operate === 'create' || operate === 'edit')
      return defineAsyncComponent(() => import('./components/ManageAccidentItem.vue'));
    return defineAsyncComponent(() => import('./components/ViewAccidentItem.vue'));
  });

  const dynamicComponentRef = ref();

  const createTaskManagementItemFunc = async (formData: AddAccidentInfoStruct) => {
    await addVehicleInfo(formData);
  };

  const editTaskManagementItemFunc = async (formData: AddAccidentInfoStruct) => {
    await updateVehicleInfo(formData);
  };

  const submit = async () => {
    if (!dynamicComponentRef.value) return;
    const res = await dynamicComponentRef.value.handleValidate();
    if (res) {
      const formData = dynamicComponentRef.value.getFormData();
      let message;
      try {
        formLoading.value = true;
        if (operate === 'create') {
          await createTaskManagementItemFunc(formData);
          message = '创建成功';
        } else if (operate === 'edit') {
          await editTaskManagementItemFunc(formData);
          message = '编辑成功';
        }
        ElMessage.success(message);
        // 重置表单状态，避免触发二次确认
        if (dynamicComponentRef.value && dynamicComponentRef.value.resetFormState) {
          dynamicComponentRef.value.resetFormState();
        }
        router.back();
      } finally {
        formLoading.value = false;
      }
    } else {
      console.log('不提交');
    }
  };
</script>

<style lang="scss" scoped>
  @use '@/styles/page-details-layout.scss' as *;

  .safety-platform-container__header {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
</style>