Merge branch 'cc-dev' into 'dev'

应急预案完成

See merge request product-group-fe/sfy-safety-group/sfy-safety!158

src/api/emergency-plan/index.ts

@@ -1,5 +1,14 @@
 import { http } from '@/utils/http/axios';
-import type { PlanEmergencyListQuery, PlanEmergencyListResponse } from '@/types/emergency-plan';
+import type {
+  PlanEmergencyListQuery,
+  PlanEmergencyListResponse,
+  AddEmergencyPlanParam,
+  ApprovalProcessParam,
+  PlanApprovalListQuery,
+  PlanApprovalListResponse,
+  ApprovalParam,
+  ApprovalProcessResponse,
+} from '@/types/emergency-plan';
 import type { QueryPageRequest, QueryPageResponse } from '@/types/basic-query';
 
 /**
@@ -13,12 +22,92 @@ export const getEmergencyPlanList = (data: QueryPageRequest<PlanEmergencyListQue
   });
 };
 
+/**
+ * 创建应急预案
+ */
+export const createEmergencyPlan = (data: AddEmergencyPlanParam) => {
+  return http.request({
+    url: '/emergencyPlan/saveEmergencyPlan',
+    method: 'post',
+    data,
+  });
+};
+
 /**
  * 删除应急预案
  */
 export const deleteEmergencyPlan = (emergencyPlanId: number) => {
-  return http.request({
+  return http.request<ApprovalProcessResponse[]>({
     url: `/emergencyPlan/deleteEmergencyPlan?emergencyPlanId=${emergencyPlanId}`,
     method: 'delete',
   });
 };
+
+/**
+ * 查询应急预案详情
+ */
+export const queryEmergencyPlan = (emergencyPlanId: number) => {
+  return http.request({
+    url: '/emergencyPlan/queryEmergencyPlanDetail',
+    method: 'get',
+    params: { emergencyPlanId },
+  });
+};
+
+/**
+ * 更新应急预案详情
+ */
+export const editEmergencyPlan = (data: AddEmergencyPlanParam & { id: number }) => {
+  return http.request({
+    url: '/emergencyPlan/updateEmergencyPlan',
+    method: 'post',
+    data,
+  });
+};
+
+/**
+ * 提交审批流程
+ */
+export const submitApprovalProcess = (data: ApprovalProcessParam) => {
+  return http.request({
+    url: '/emergencyPlan/saveApprovalProcess',
+    method: 'post',
+    data,
+  });
+};
+
+/**
+ * 查询预案审批列表
+ */
+export const getEmergencyApprovalList = (data: QueryPageRequest<PlanApprovalListQuery>) => {
+  return http.request<QueryPageResponse<PlanApprovalListResponse>>({
+    url: '/emergencyPlan/queryEmergencyPlanApprovalPage',
+    method: 'post',
+    data,
+  });
+};
+
+/**
+ * 提交审批
+ */
+export const submitApproval = (data: ApprovalParam) => {
+  return http.request({
+    url: '/emergencyPlan/saveApproval',
+    method: 'post',
+    data,
+  });
+};
+
+/**
+ * 查询审批流程
+ */
+export const queryApprovalProcess = (approvalTemplateId: number, sourceId: number) => {
+  return http.request({
+    url: '/approvalManagement/queryApprovalProcess',
+    method: 'post',
+    data: {
+      approvalTemplateId,
+      sourceId,
+    },
+  });
+};

src/types/emergency-plan/index.ts

@@ -6,22 +6,77 @@ export interface PlanEmergencyListQuery {
   status?: number;
 }
 
-export interface PlanEmergencyListResponse {
-  id: number;
-  planName: string;
-  planType: string;
-  enentType: string;
-  deptId: number;
-  status: number;
+export interface PlanApprovalListQuery {
+  approvalStatus?: number;
 }
 
-export interface AddEmergencyPlanForm {
+interface BasicListResponse {
+  id: number;
   planName: string;
   planType: string;
   eventType: string;
-  deptId: string;
+  deptId: number | null;
   deptName: string;
-  approvalTemplateId: string;
+}
+
+export interface PlanEmergencyListResponse extends BasicListResponse {
+  status: number;
+  approvalTemplateId: number;
+}
+
+export interface PlanApprovalListResponse extends BasicListResponse {
+  approvalStatus: number;
+  appendix: string;
+  approvalDescription: string;
+  createdByName: string;
+  createdAt: string;
+  approvalOrder: number;
+}
+
+export interface AddEmergencyPlanForm extends Omit<PlanEmergencyListResponse, 'id' | 'status' | 'approvalTemplateId'> {
   uploadFile: FileItem[];
   appendix: string;
+  approvalTemplateId: number | null;
 }
+
+export interface EditEmergencyPlaneForm extends AddEmergencyPlanForm {
+  planTypeName: string;
+  eventTypeName: string;
+  approvalTemplateName: string;
+}
+
+export interface AddEmergencyPlanParam extends Omit<AddEmergencyPlanForm, 'uploadFile' | 'approvalTemplateName'> {}
+
+export interface ApprovalProcessParam {
+  planId: number;
+  approvalDescription: string;
+  approvalInfoList: {
+    approvalOrder: number;
+    approverIdList: number[];
+  }[];
+}
+
+export interface ApprovalParam {
+  planId: number;
+  approvalOrder: number;
+  approvalStatus: number;
+  returnReason: string;
+}
+
+interface BasicProcessType {
+  approvalOrder: number;
+  nodeDescription: string;
+}
+export interface ProcessInfoListType {
+  approverName: string;
+  approvalType: number;
+  approvalStatus: number;
+  approvalTime: string;
+  approvalContent: string;
+}
+
+export interface ApprovalProcessResponse extends BasicProcessType {
+  processInfoList: ProcessInfoListType[];
+}
+
+export interface ApprovalProcessList extends BasicProcessType, ProcessInfoListType {}

src/views/emergency/emergency-plan/PageApproval.vue

@@ -1,7 +1,191 @@
 <template>
-  <div> this is page approval page </div>
+  <div class="safety-platform-container">
+    <div class="safety-platform-container__header">
+      <div class="breadcrumb-title">预案审批</div>
+    </div>
+    <div class="safety-platform-container__main">
+      <div class="search-table-container">
+        <header class="disaster-precaution__header">
+          <BasicSearch
+            :searchConfig="EMERGENCY_PLAN_APPROVAL_SEARCH_CONFIG"
+            :searchData="searchData"
+            @update:searchData="handleSearch"
+          />
+        </header>
+        <BasicTable
+          :tableData="tableData"
+          :tableConfig="tableConfig"
+          @update:pageSize="handleSizeChange"
+          @update:pageNumber="handleCurrentChange"
+        >
+          <template #planType="scope">
+            <span>{{ getPlanType(scope.row.planType) }}</span>
+          </template>
+          <template #eventType="scope">
+            <span>{{ getEmergencyEvent(scope.row.eventType) }}</span>
+          </template>
+          <template #approvalStatus="scope">
+            <span>{{ getEmergencyPlanApproStatusLabel(scope.row.status) }}</span>
+          </template>
+          <template #appendix="scope">
+            <span class="appendix" v-if="scope.row.appendix" @click="handlePreviewScript(scope.row.appendix)">
+              预览
+            </span>
+            <span v-else>--</span>
+          </template>
+          <template #action="scope">
+            <div class="action-container--div">
+              <ActionButton
+                v-if="scope.row.status === APPROVAL_STATUS.PENDING"
+                text="审批"
+                @click="handleApproval(scope.row.id, scope.row.approvalOrder)"
+              />
+              <span v-else>--</span>
+            </div>
+          </template>
+        </BasicTable>
+      </div>
+    </div>
+    <PreviewOnline ref="previewOnlineRef" />
+  </div>
+  <BasicDialog ref="basicDialogRef" title="审批" @refresh="closeDialog">
+    <template #form>
+      <el-form ref="formRef" :model="formData" style="width: 100%">
+        <el-form-item label="审批：" prop="approvalStatus" :rules="[{ required: true, message: '请选择审批状态' }]">
+          <el-radio-group v-model="formData.approvalStatus">
+            <el-radio :value="APPROVAL_STATUS.APPROVED">通过</el-radio>
+            <el-radio :value="APPROVAL_STATUS.REJECTED">退回</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-if="formData.approvalStatus === APPROVAL_STATUS.REJECTED"
+          label="退回原因："
+          prop="rejectReason"
+          :rules="[{ required: true, message: '请输入退回原因' }]"
+        >
+          <el-input v-model="formData.rejectReason" placeholder="请输入退回原因" />
+        </el-form-item>
+      </el-form>
+    </template>
+    <template #footer>
+      <el-button type="primary" @click="handleApprovalSubmit">提交</el-button>
+      <el-button @click="basicDialogRef?.closeDialog">返回</el-button>
+    </template>
+  </BasicDialog>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { ref, reactive, onMounted } from 'vue';
+  import { ElMessage, type ElForm } from 'element-plus';
+  import BasicSearch from '@/components/BasicSearch.vue';
+  import BasicTable from '@/components/BasicTable.vue';
+  import BasicDialog from '@/components/BasicDialog.vue';
+  import ActionButton from '@/components/ActionButton.vue';
+  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
+  import useTableConfig from '@/hooks/useTableConfigHook';
+  import { useEmergencyHook } from '../src/hoos';
+  import { useEmergencyPlanHook } from './src/hook';
+  import type { QueryPageRequest } from '@/types/basic-query';
+  import type { PlanApprovalListQuery, PlanApprovalListResponse } from '@/types/emergency-plan';
+  import { getEmergencyApprovalList, submitApproval } from '@/api/emergency-plan';
+  import {
+    EMERGENCY_PLAN_APPROVAL_SEARCH_CONFIG,
+    EMERGENCY_PLAN_APPROVAL_TABLE_OPTIONS,
+    EMERGENCY_PLAN_APPROVAL_TABLE_COLUMNS,
+  } from './src/config';
+  import { APPROVAL_STATUS } from './src/constant';
+  import { FILE_TYPE_ICON } from '@/views/disaster/constant';
 
-<style lang="scss" scoped></style>
+  const { tableConfig, pagination } = useTableConfig(
+    EMERGENCY_PLAN_APPROVAL_TABLE_COLUMNS,
+    EMERGENCY_PLAN_APPROVAL_TABLE_OPTIONS,
+  );
+  const { getEmergencyEventDict, getEmergencyEvent } = useEmergencyHook();
+  const { getPlanTypeDict, getPlanType, getEmergencyPlanApproStatusLabel } = useEmergencyPlanHook();
+  let planApprovalListQuery: QueryPageRequest<PlanApprovalListQuery> = {
+    pageNumber: pagination.pageNumber,
+    pageSize: pagination.pageSize,
+    queryParam: {},
+  };
+  const tableData = ref<PlanApprovalListResponse[]>([]);
+  const searchData = reactive({
+    approvalStatus: null,
+  });
+  const formData = reactive({
+    approvalStatus: APPROVAL_STATUS.APPROVED,
+    rejectReason: '',
+  });
+  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
+  const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
+  const formRef = ref<InstanceType<typeof ElForm>>();
+  const handleSearch = () => {
+    planApprovalListQuery.queryParam = {};
+    if (searchData.approvalStatus) {
+      planApprovalListQuery.queryParam.approvalStatus = searchData.approvalStatus;
+    }
+    getTableData();
+  };
+  const getTableData = async () => {
+    tableConfig.loading = true;
+    const res = await getEmergencyApprovalList(planApprovalListQuery);
+    tableData.value = res.records;
+    pagination.total = res.totalRow;
+    tableConfig.loading = false;
+  };
+  const handleSizeChange = (value: number) => {
+    pagination.pageSize = value;
+    planApprovalListQuery.pageSize = value;
+    getTableData();
+  };
+  const handleCurrentChange = (value: number) => {
+    pagination.pageNumber = value;
+    planApprovalListQuery.pageNumber = value;
+    getTableData();
+  };
+  const handlePreviewScript = (appendix: string) => {
+    const file = JSON.parse(appendix)[0];
+    previewOnlineRef.value?.open(file.fileUrl, file.fileType as keyof typeof FILE_TYPE_ICON);
+  };
+  const currentId = ref<number>();
+  const currentOrder = ref<number>();
+  const handleApproval = (id: number, approvalOrder: number) => {
+    currentId.value = id;
+    currentOrder.value = approvalOrder;
+    basicDialogRef.value?.openDialog();
+  };
+  const closeDialog = () => {
+    formRef.value?.resetFields();
+    basicDialogRef.value?.closeDialog();
+  };
+  const handleApprovalSubmit = () => {
+    formRef.value?.validate(async (valid) => {
+      if (valid) {
+        if (!currentId.value || !currentOrder.value) return;
+        await submitApproval({
+          planId: currentId.value,
+          approvalOrder: currentOrder.value,
+          approvalStatus: formData.approvalStatus,
+          returnReason: formData.rejectReason,
+        });
+        ElMessage.success('审批成功');
+        basicDialogRef.value?.closeDialog();
+        getTableData();
+      }
+    });
+  };
+  onMounted(() => {
+    getPlanTypeDict();
+    getEmergencyEventDict();
+    getTableData();
+  });
+</script>
+
+<style scoped lang="scss">
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
+  .appendix {
+    cursor: pointer;
+    color: $primary-color;
+  }
+</style>

src/views/emergency/emergency-plan/PageManagement.vue

@@ -54,14 +54,27 @@
             <span>{{ getEmergencyEvent(scope.row.eventType) }}</span>
           </template>
           <template #status="scope">
-            <span>{{ getEmergencyPlanStatusLabel(scope.row.status) }}</span>
+            <span
+              :class="
+                scope.row.status === EMERGENCY_PLAN_STATUS.APPROVAL_IN_PROGRESS ||
+                scope.row.status === EMERGENCY_PLAN_STATUS.RETURNED
+                  ? 'highlight-text'
+                  : ''
+              "
+              @click="handleViewApprovalProcess(scope.row)"
+              >{{ getEmergencyPlanStatusLabel(scope.row.status) }}</span
+            >
           </template>
           <template #action="scope">
             <div class="action-container--div">
               <ActionButton text="查看" @click="handleView(scope.row.id)" />
-              <ActionButton v-if="planManagementPremissions" text="编辑" @click="handleEdit(scope.row.id)" />
               <ActionButton
-                v-if="planManagementPremissions"
+                v-if="planManagementPremissions && scope.row.status !== EMERGENCY_PLAN_STATUS.APPROVAL_IN_PROGRESS"
+                text="编辑"
+                @click="handleEdit(scope.row.id)"
+              />
+              <ActionButton
+                v-if="planManagementPremissions && scope.row.status !== EMERGENCY_PLAN_STATUS.APPROVAL_IN_PROGRESS"
                 text="删除"
                 :popconfirm="{ title: '确认删除' }"
                 @confirm="handleDelete(scope.row.id)"
@@ -72,6 +85,18 @@
       </div>
     </div>
   </div>
+  <BasicDialog ref="basicDialogRef" title="审批流程" width="1000">
+    <template #form>
+      <BasicTable :tableData="approvalProcessData" :tableConfig="approvalProcessConfig">
+        <template #approvalType="scope">
+          <span>{{ APPROVAL_TYPE_MAP[scope.row.approvalType] }}</span>
+        </template>
+        <template #approvalStatus="scope">
+          <span>{{ APPROVAL_STATUS_MAP[scope.row.approvalStatus] }}</span>
+        </template>
+      </BasicTable>
+    </template>
+  </BasicDialog>
 </template>
 
 <script setup lang="ts">
@@ -81,22 +106,31 @@
   import { ElMessage } from 'element-plus';
   import BasicSearch from '@/components/BasicSearch.vue';
   import BasicTable from '@/components/BasicTable.vue';
+  import BasicDialog from '@/components/BasicDialog.vue';
   import ActionButton from '@/components/ActionButton.vue';
   import useTableConfig from '@/hooks/useTableConfigHook';
   import { useEmergencyHook } from '../src/hoos';
   import { useEmergencyPlanHook } from './src/hook';
   import { useUserInfoHook } from '@/hooks/useUserInfoHook';
   import type { QueryPageRequest } from '@/types/basic-query';
-  import type { PlanEmergencyListQuery, PlanEmergencyListResponse } from '@/types/emergency-plan';
-  import { getEmergencyPlanList, deleteEmergencyPlan } from '@/api/emergency-plan';
+  import type {
+    PlanEmergencyListQuery,
+    PlanEmergencyListResponse,
+    ApprovalProcessList,
+    ApprovalProcessResponse,
+    ProcessInfoListType,
+  } from '@/types/emergency-plan';
+  import { getEmergencyPlanList, deleteEmergencyPlan, queryApprovalProcess } from '@/api/emergency-plan';
   import {
     EMERGENCY_PLAN_MANAGEMENT_SEARCH_CONFIG,
     EMERGENCY_PLAN_MANAGEMENT_TABLE_OPTIONS,
     EMERGENCY_PLAN_MANAGEMENT_TABLE_COLUMNS,
     TABLE_MAX_HEIGHT_DEFAULT,
     TABLE_MAX_HEIGHT_PERMISSION,
+    APPROVAL_PROCESS_TABLE_COLUMNS,
   } from './src/config';
   import { EMERGENCY_PERMISSIONS } from '@/views/emergency/src/constant';
+  import { EMERGENCY_PLAN_STATUS, APPROVAL_TYPE_MAP,APPROVAL_STATUS_MAP } from './src/constant';
 
   const router = useRouter();
   const planManagementPremissions = ref<boolean>(false);
@@ -104,6 +138,7 @@
     EMERGENCY_PLAN_MANAGEMENT_TABLE_COLUMNS,
     EMERGENCY_PLAN_MANAGEMENT_TABLE_OPTIONS,
   );
+  const { tableConfig: approvalProcessConfig } = useTableConfig(APPROVAL_PROCESS_TABLE_COLUMNS, {}, false);
   const { emergencyEventDice, getEmergencyEventDict, getEmergencyEvent } = useEmergencyHook();
   const { planTypeDice, getPlanTypeDict, getPlanType, getEmergencyPlanStatusLabel } = useEmergencyPlanHook();
   const { permissions } = useUserInfoHook();
@@ -130,7 +165,7 @@
     if (searchData.eventType) {
       planManagementListQuery.queryParam.eventType = searchData.eventType;
     }
-    if (searchData.status) {
+    if (searchData.status !== null) {
       planManagementListQuery.queryParam.status = searchData.status;
     }
     getTableData();
@@ -175,6 +210,7 @@
       name: defaultName,
       query: {
         id,
+        type: 'view',
       },
     });
   };
@@ -183,6 +219,33 @@
     ElMessage.success('删除成功');
     await getTableData();
   };
+  const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
+  const approvalProcessData = ref<ApprovalProcessList[]>([]);
+  const handleViewApprovalProcess = async (row: PlanEmergencyListResponse) => {
+    if (row.status !== EMERGENCY_PLAN_STATUS.APPROVAL_IN_PROGRESS && row.status !== EMERGENCY_PLAN_STATUS.RETURNED)
+      return;
+
+    const res = await queryApprovalProcess(row.approvalTemplateId, row.id);
+
+    // 处理审批流程数据
+    approvalProcessData.value = [];
+    res.forEach((item: ApprovalProcessResponse) => {
+      if (item.processInfoList && item.processInfoList.length > 0) {
+        item.processInfoList.forEach((process: ProcessInfoListType) => {
+          approvalProcessData.value.push({
+            approvalOrder: item.approvalOrder,
+            nodeDescription: item.nodeDescription,
+            approvalType: process.approvalType,
+            approverName: process.approverName,
+            approvalContent: process.approvalContent,
+            approvalStatus: process.approvalStatus,
+            approvalTime: process.approvalTime,
+          });
+        });
+      }
+    });
+    basicDialogRef.value?.openDialog();
+  };
 
   onMounted(() => {
     getPlanTypeDict();
@@ -199,4 +262,8 @@
   @use '@/styles/page-details-layout.scss' as *;
   @use '@/styles/page-main-layout.scss' as *;
   @use '@/styles/basic-table-action.scss' as *;
+  .highlight-text {
+    cursor: pointer;
+    color: $primary-color;
+  }
 </style>

src/views/emergency/emergency-plan/PageManagementDetail.vue

@@ -7,26 +7,94 @@
     <main class="safety-platform-container__main">
       <component ref="dynamicComponentRef" :is="dynamicComponent" :id="id" />
     </main>
-    <footer class="safety-platform-container__footer">
+    <footer class="safety-platform-container__footer" v-if="type !== 'view'">
       <el-button @click="router.back()">取消</el-button>
       <el-button type="primary" @click="handleSubmit">提交</el-button>
     </footer>
   </div>
+  <BasicDialog ref="basicDialogRef" title="提交审批" @refresh="closeDialog">
+    <template #form>
+      <div class="form">
+        <el-form ref="approvalFormRef" :model="approvalForm">
+          <el-form-item label="审批描述：" label-position="top">
+            <el-input v-model="approvalForm.description" placeholder="请输入审批描述" type="textarea" />
+          </el-form-item>
+          <div class="form-item">
+            <span>审批流程：</span>
+            <template v-for="item in approvalNodeList" :key="item.id">
+              <el-form-item
+                :label="`第${item.approvalOrder}步：${item.nodeDescription}（${APPROVAL_TYPE_MAP[item.approvalType]}）`"
+                label-position="top"
+                :prop="item.approverType !== APPROVER_TYPE.FIX ? `approvers.${item.id}` : ''"
+                :rules="{ required: true, message: '请选择审批人员', trigger: 'change' }"
+              >
+                <el-input
+                  v-if="item.approverType === APPROVER_TYPE.FIX"
+                  :model-value="item.approverInfoList.map((info) => info.approverName).join(',')"
+                  disabled
+                ></el-input>
+                <el-select
+                  v-else
+                  v-model="approvalForm.approvers[item.id]"
+                  placeholder="请选择审批人员"
+                  value-key="id"
+                  filterable
+                  remote
+                  collapse-tags
+                  collapse-tags-tooltip
+                  :max-collapse-tags="2"
+                  :remote-method="remoteMethod"
+                  :loading="loading"
+                  multiple
+                >
+                  <el-option
+                    v-for="option in userOptions"
+                    :key="option.id"
+                    :label="`${option.realname}（${option.username}）${option.deptName}`"
+                    :value="option.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </template>
+          </div>
+        </el-form>
+      </div>
+    </template>
+    <template #footer>
+      <el-button type="primary" @click="handleSubmitApproval">提交</el-button>
+      <el-button @click="basicDialogRef.closeDialog">取消</el-button>
+    </template>
+  </BasicDialog>
 </template>
 
 <script setup lang="ts">
   import { useRoute, useRouter } from 'vue-router';
-  import { ref, computed, defineAsyncComponent } from 'vue';
+  import { ref, computed, defineAsyncComponent, reactive } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import BasicDialog from '@/components/BasicDialog.vue';
+  import { useEmergencySuppliesHook } from '@/views/emergency/emergency-supplies/src/hook';
   import type { FileItem } from '@/views/disaster/types';
   import type { AddEmergencyPlanForm } from '@/types/emergency-plan';
+  import type { ApprovalNodeInstanceType } from '@/views/system/approval/types';
   import { uploadFileApi, UPLOAD_BIZ_TYPE } from '@/api/minio';
-  import { ElMessage } from 'element-plus';
+  import { createEmergencyPlan, editEmergencyPlan,submitApprovalProcess } from '@/api/emergency-plan';
+  import { getApprovalNodeInstanceList } from '@/api/approval/approval';
+  import { APPROVAL_TYPE_MAP, APPROVER_TYPE } from './src/constant';
 
   const route = useRoute();
   const router = useRouter();
   const type = String(route.query.type);
   const id = Number(route.query.id);
+  const planId = ref<number>();
+  const approvalFormRef = ref();
+  const approvalForm = reactive({
+    description: '',
+    approvers: {} as Record<number, any[]>,
+  });
+
+  const approvalNodeList = ref<ApprovalNodeInstanceType[]>([]);
   const dynamicComponentRef = ref();
+  const basicDialogRef = ref();
   const headerTitle = computed(() => {
     const title = '应急预案';
     if (type === 'add') {
@@ -44,6 +112,7 @@
     }
     return defineAsyncComponent(() => import('./src/components/ViewManagementDetail.vue'));
   });
+  const { userOptions, loading, remoteMethod } = useEmergencySuppliesHook();
   const formatAttachmentList = async (file: FileItem) => {
     if (!file.file) return file;
     const fileName = file.fileName;
@@ -71,9 +140,29 @@
       deptId: formData.deptId,
       deptName: formData.deptName,
       approvalTemplateId: formData.approvalTemplateId,
-      appendix: attachmentListRes,
+      appendix: JSON.stringify(attachmentListRes),
+    };
+    return await createEmergencyPlan(createParam);
+  };
+  const editPlanManagementItemFunc = async (formData: AddEmergencyPlanForm) => {
+    const attachmentListRes: FileItem[] = await Promise.all(
+      formData.uploadFile.map((item) => formatAttachmentList(item)),
+    );
+    const editParam = {
+      id,
+      planName: formData.planName,
+      planType: formData.planType,
+      eventType: formData.eventType,
+      deptId: formData.deptId,
+      deptName: formData.deptName,
+      approvalTemplateId: formData.approvalTemplateId,
+      appendix: JSON.stringify(attachmentListRes),
     };
-    console.log(createParam);
+    await editEmergencyPlan(editParam);
+  };
+  const getApprovalNode = async (id: number) => {
+    const res = await getApprovalNodeInstanceList(id);
+    approvalNodeList.value = res.approvalNodeInfoList || [];
   };
   const handleSubmit = async () => {
     if (!dynamicComponentRef.value) return;
@@ -82,14 +171,67 @@
     if (!res) return;
     const data = dynamicComponentRef.value.getFormData();
     if (type === 'add') {
-      await createPlanManagementItemFunc(data);
+      const res = await createPlanManagementItemFunc(data);
+      planId.value = res;
+    } else {
+      await editPlanManagementItemFunc(data);
+      planId.value = id;
     }
     ElMessage.success(`${message}成功`);
-    // router.back();
+    getApprovalNode(data.approvalTemplateId);
+    basicDialogRef.value.openDialog();
+  };
+
+  const refreshForm = () => {
+    approvalFormRef.value?.resetFields();
+    approvalForm.description = '';
+  };
+
+  const closeDialog = () => {
+    refreshForm();
+    basicDialogRef.value.closeDialog();
+  };
+
+  const handleSubmitApproval = () => {
+    approvalFormRef.value.validate(async(valid: boolean) => {
+      if (valid) {
+        // 构造后端需要的数据格式
+        const approvalData = {
+          planId: planId.value!,
+          approvalDescription: approvalForm.description,
+          approvalInfoList: approvalNodeList.value.map((node) => {
+            let approverIdList: number[] = [];
+            if (node.approverType === APPROVER_TYPE.FIX) {
+              approverIdList = node.approverInfoList.map((info) => info.approverId);
+            } else if (approvalForm.approvers[node.id]) {
+              approverIdList = approvalForm.approvers[node.id];
+            }
+            return {
+              approvalOrder: node.approvalOrder,
+              approverIdList,
+            };
+          }),
+        };
+        await submitApprovalProcess(approvalData);
+        ElMessage.success('提交成功');
+        basicDialogRef.value.closeDialog();
+        router.back();
+      }
+    });
   };
 </script>
 
 <style scoped lang="scss">
   @use '@/styles/page-details-layout.scss' as *;
   @use './src/styles/info-common.scss' as *;
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+  }
+  .form-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
 </style>

src/views/emergency/emergency-plan/src/components/EditManagementDetail.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="emergency-plan-container">
-    <BasicForm ref="formRef" :formData="ruleFormData" :formConfig="ruleFormConfig">
+    <BasicForm ref="formRef" :formData="ruleFormData" :formConfig="ruleFormConfig" :formRules="formRules">
       <template #appendix>
-        <UploadFiles label="上传附件" :maxCount="1" @uploadSuccess="handleUploadSuccess" />
+        <UploadFiles
+          label="上传附件"
+          :maxCount="1"
+          @uploadSuccess="handleUploadSuccess"
+          :fileList="ruleFormData.uploadFile"
+        />
       </template>
     </BasicForm>
   </div>
@@ -15,23 +20,33 @@
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
   import { useEmergencyHook } from '@/views/emergency/src/hoos';
   import { useEmergencyPlanHook } from '../hook';
-  import type { AddEmergencyPlanForm } from '@/types/emergency-plan';
+  import type { EditEmergencyPlaneForm } from '@/types/emergency-plan';
   import type { FileItem } from '@/views/disaster/types';
-  import { PLAN_MANAGEMENT_FORM_CONFIG_EDIT, PLAN_MANAGEMENT_FORM_DATA } from '../config';
+  import { queryEmergencyPlan } from '@/api/emergency-plan';
+  import { PLAN_MANAGEMENT_FORM_CONFIG_EDIT, PLAN_MANAGEMENT_FORM_DATA_EDIT,PLAN_MANAGEMENT_FORM_RULES_EDIT } from '../config';
 
   const formRef = ref();
-  const { ruleFormConfig, ruleFormData, cloneRuleFormData, beforeRouteLeave } = useFormConfigHook<AddEmergencyPlanForm>(
+  const props = defineProps<{
+    id: number;
+  }>();
+  const { ruleFormConfig, ruleFormData, formRules } = useFormConfigHook<EditEmergencyPlaneForm>(
     PLAN_MANAGEMENT_FORM_CONFIG_EDIT,
-    PLAN_MANAGEMENT_FORM_DATA,
+    PLAN_MANAGEMENT_FORM_DATA_EDIT,
+    PLAN_MANAGEMENT_FORM_RULES_EDIT
   );
 
-  const { getEmergencyEventDict, getEmergencyEvent, getDeptTreeData, getApprovalList } = useEmergencyHook();
+  const { getEmergencyEventDict, getEmergencyEvent, getApprovalList, approvalList } = useEmergencyHook();
   const { getPlanTypeDict, getPlanType } = useEmergencyPlanHook();
-  const getPlanDetail = () => {
-    ruleFormData.planName = '测试';
-    ruleFormData.planType = getPlanType('comprehensive_contingency') || '';
-    ruleFormData.eventType = getEmergencyEvent('flood_typhoon_prevention') || '';
-    cloneRuleFormData();
+  const getPlanDetail = async () => {
+    const res = await queryEmergencyPlan(props.id);
+    for (const key in res) {
+      ruleFormData[key] = res[key as keyof typeof res];
+      ruleFormData.planTypeName = getPlanType(res.planType) || '';
+      ruleFormData.eventTypeName = getEmergencyEvent(res.eventType) || '';
+      ruleFormData.approvalTemplateName =
+        approvalList.value?.find((item) => item.id === res.approvalTemplateId)?.templateName || '';
+      ruleFormData.uploadFile = JSON.parse(res.appendix);
+    }
   };
   const handleUploadSuccess = (fileList: FileItem[]) => {
     ruleFormData.uploadFile = fileList;
@@ -42,16 +57,13 @@
     return validateResult;
   };
   const getFormData = () => {
-    cloneRuleFormData();
     return ruleFormData;
   };
   onMounted(async () => {
     await getPlanTypeDict();
     await getEmergencyEventDict();
-    await getDeptTreeData();
     await getApprovalList();
     getPlanDetail();
-    beforeRouteLeave();
   });
   defineExpose({
     handleValidate,

src/views/emergency/emergency-plan/src/components/ViewManagementDetail.vue

@@ -1,13 +1,72 @@
 <template>
-    <div>
-
-    </div>
+  <div class="emergency-plan-container">
+    <BasicForm ref="formRef" :formData="ruleFormData" :formConfig="ruleFormConfig">
+      <template #appendix>
+        <div class="appendix-container" v-if="ruleFormData.uploadFile.length">
+          <div class="appendix-item" v-for="item in ruleFormData.uploadFile" :key="item.fileId">
+            <div class="appendix-item-name" @click="handlePreviewScript(item.fileUrl, item.fileType)">
+              {{ item.fileName }}
+            </div>
+          </div>
+        </div>
+        <div v-else style="color: rgba(0, 0, 0, 0.65)">暂无预案文件</div>
+      </template>
+    </BasicForm>
+    <PreviewOnline ref="previewOnlineRef" />
+  </div>
 </template>
 
 <script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import BasicForm from '@/components/BasicForm.vue';
+  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
+  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
+  import { useEmergencyHook } from '@/views/emergency/src/hoos';
+  import { useEmergencyPlanHook } from '../hook';
+  import type { EditEmergencyPlaneForm } from '@/types/emergency-plan';
+  import { queryEmergencyPlan } from '@/api/emergency-plan';
+  import { PLAN_MANAGEMENT_FORM_CONFIG_EDIT, PLAN_MANAGEMENT_FORM_DATA_EDIT } from '../config';
+  import { FILE_TYPE_ICON } from '@/views/disaster/constant';
 
-</script>
+  const formRef = ref();
+  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
+  const props = defineProps<{
+    id: number;
+  }>();
+  const { ruleFormConfig, ruleFormData } = useFormConfigHook<EditEmergencyPlaneForm>(
+    PLAN_MANAGEMENT_FORM_CONFIG_EDIT,
+    PLAN_MANAGEMENT_FORM_DATA_EDIT,
+  );
 
-<style scoped lang="scss">
+  const { getEmergencyEventDict, getEmergencyEvent, getApprovalList, approvalList } = useEmergencyHook();
+  const { getPlanTypeDict, getPlanType } = useEmergencyPlanHook();
+  const getPlanDetail = async () => {
+    const res = await queryEmergencyPlan(props.id);
+    for (const key in res) {
+      ruleFormData[key] = res[key as keyof typeof res];
+      ruleFormData.planTypeName = getPlanType(res.planType) || '';
+      ruleFormData.eventTypeName = getEmergencyEvent(res.eventType) || '';
+      ruleFormData.approvalTemplateName =
+        approvalList.value?.find((item) => item.id === res.approvalTemplateId)?.templateName || '';
+      ruleFormData.uploadFile = JSON.parse(res.appendix);
+    }
+  };
+  const handlePreviewScript = (url: string | undefined, type: string) => {
+    if (!url) return;
+    previewOnlineRef.value?.open(url, type as keyof typeof FILE_TYPE_ICON);
+  };
+  onMounted(async () => {
+    await getPlanTypeDict();
+    await getEmergencyEventDict();
+    await getApprovalList();
+    getPlanDetail();
+  });
+</script>
 
-</style>
+<style lang="scss" scoped>
+  @use '../styles/info.scss' as *;
+  .appendix-item-name {
+    cursor: pointer;
+    color: $primary-color;
+  }
+</style>

src/views/emergency/emergency-plan/src/config/form.ts

@@ -54,7 +54,7 @@ export const PLAN_MANAGEMENT_FORM_CONFIG_EDIT: FormConfig[] = [
   },
   {
     label: '预案类型：',
-    prop: 'planType',
+    prop: 'planTypeName',
     component: 'ElInput',
     componentProps: {
       placeholder: '请输入预案类型',
@@ -63,7 +63,7 @@ export const PLAN_MANAGEMENT_FORM_CONFIG_EDIT: FormConfig[] = [
   },
   {
     label: '事件类型：',
-    prop: 'eventType',
+    prop: 'eventTypeName',
     component: 'ElInput',
     componentProps: {
       placeholder: '请输入事件类型',
@@ -72,7 +72,7 @@ export const PLAN_MANAGEMENT_FORM_CONFIG_EDIT: FormConfig[] = [
   },
   {
     label: '制定部门：',
-    prop: 'deptId',
+    prop: 'deptName',
     component: 'ElInput',
     componentProps: {
       placeholder: '请输入制定部门',
@@ -81,7 +81,7 @@ export const PLAN_MANAGEMENT_FORM_CONFIG_EDIT: FormConfig[] = [
   },
   {
     label: '审批流程：',
-    prop: 'approvalTemplateId',
+    prop: 'approvalTemplateName',
     component: 'ElInput',
     componentProps: {
       placeholder: '请输入审批流程',
@@ -92,17 +92,30 @@ export const PLAN_MANAGEMENT_FORM_CONFIG_EDIT: FormConfig[] = [
 ];
 
 // 盘点任务表单数据
-export const PLAN_MANAGEMENT_FORM_DATA = {
+const BASE_FORM_DATA = {
   planName: '',
   planType: '',
   eventType: '',
-  deptId: '',
+  deptId: null,
   deptName: '',
-  approvalTemplateId: '',
+  approvalTemplateId: null,
   appendix: '',
   uploadFile: [],
 };
 
+export const PLAN_MANAGEMENT_FORM_DATA = { ...BASE_FORM_DATA };
+
+export const PLAN_MANAGEMENT_FORM_DATA_EDIT = {
+  ...BASE_FORM_DATA,
+  planTypeName: '',
+  eventTypeName: '',
+  approvalTemplateName: '',
+};
+
+const BASIC_FORM_RULES = {
+  appendix: [{ required: true, message: '请上传预案文件',trigger: 'blur' }],
+};
+
 // 盘点任务表单规则
 export const PLAN_MANAGEMENT_FORM_RULES = {
   planName: [{ required: true, message: '请输入预案名称', trigger: 'blur' }],
@@ -110,4 +123,9 @@ export const PLAN_MANAGEMENT_FORM_RULES = {
   eventType: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
   deptId: [{ required: true, message: '请选择制定部门', trigger: 'blur' }],
   approvalTemplateId: [{ required: true, message: '请选择审批流程', trigger: 'change' }],
+  ...BASIC_FORM_RULES,
+};
+
+export const PLAN_MANAGEMENT_FORM_RULES_EDIT = {
+  ...BASIC_FORM_RULES,
 };

src/views/emergency/emergency-plan/src/config/index.ts

@@ -1,15 +1,20 @@
-import { EMERGENCY_PLAN_MANAGEMENT_SEARCH_CONFIG } from './search';
+import { EMERGENCY_PLAN_MANAGEMENT_SEARCH_CONFIG, EMERGENCY_PLAN_APPROVAL_SEARCH_CONFIG } from './search';
 import {
   EMERGENCY_PLAN_MANAGEMENT_TABLE_OPTIONS,
   EMERGENCY_PLAN_MANAGEMENT_TABLE_COLUMNS,
   TABLE_MAX_HEIGHT_DEFAULT,
   TABLE_MAX_HEIGHT_PERMISSION,
+  EMERGENCY_PLAN_APPROVAL_TABLE_OPTIONS,
+  EMERGENCY_PLAN_APPROVAL_TABLE_COLUMNS,
+  APPROVAL_PROCESS_TABLE_COLUMNS
 } from './table';
 import {
   PLAN_MANAGEMENT_FORM_CONFIG,
   PLAN_MANAGEMENT_FORM_DATA,
   PLAN_MANAGEMENT_FORM_RULES,
   PLAN_MANAGEMENT_FORM_CONFIG_EDIT,
+  PLAN_MANAGEMENT_FORM_DATA_EDIT,
+  PLAN_MANAGEMENT_FORM_RULES_EDIT,
 } from './form';
 export {
   EMERGENCY_PLAN_MANAGEMENT_SEARCH_CONFIG,
@@ -21,4 +26,10 @@ export {
   PLAN_MANAGEMENT_FORM_CONFIG_EDIT,
   PLAN_MANAGEMENT_FORM_DATA,
   PLAN_MANAGEMENT_FORM_RULES,
+  PLAN_MANAGEMENT_FORM_DATA_EDIT,
+  EMERGENCY_PLAN_APPROVAL_SEARCH_CONFIG,
+  EMERGENCY_PLAN_APPROVAL_TABLE_OPTIONS,
+  EMERGENCY_PLAN_APPROVAL_TABLE_COLUMNS,
+  PLAN_MANAGEMENT_FORM_RULES_EDIT,
+  APPROVAL_PROCESS_TABLE_COLUMNS,
 };

src/views/emergency/emergency-plan/src/config/search.ts

@@ -1,5 +1,5 @@
 import type { SearchConfig } from '@/types/basic-search';
-import { EMERGENCY_PLAN_STATUS_OPTIONS } from '../constant';
+import { EMERGENCY_PLAN_STATUS_OPTIONS, APPROVAL_STATUS_OPTIONS } from '../constant';
 
 export const EMERGENCY_PLAN_MANAGEMENT_SEARCH_CONFIG: SearchConfig[] = [
   {
@@ -31,3 +31,15 @@ export const EMERGENCY_PLAN_MANAGEMENT_SEARCH_CONFIG: SearchConfig[] = [
     },
   },
 ];
+
+export const EMERGENCY_PLAN_APPROVAL_SEARCH_CONFIG: SearchConfig[] = [
+  {
+    label: '状态：',
+    prop: 'approvalStatus',
+    component: 'ElSelect',
+    selectOptions: APPROVAL_STATUS_OPTIONS,
+    componentProps: {
+      placeholder: '请输入预案名称',
+    },
+  },
+];

src/views/emergency/emergency-plan/src/config/table.ts

@@ -12,7 +12,7 @@ const BASIC_TABLE_COLUMNS = {
     label: '序号',
     type: 'index',
     width: '80px',
-    align: 'center'
+    align: 'center',
   },
   PLAN_NAME: {
     label: '预案名称',
@@ -31,7 +31,7 @@ const BASIC_TABLE_COLUMNS = {
   },
   DEPT_NAME: {
     label: '制定部门',
-    prop: 'deptId',
+    prop: 'deptName',
     minWidth: '120px',
   },
   ACTION: {
@@ -49,6 +49,11 @@ export const EMERGENCY_PLAN_MANAGEMENT_TABLE_OPTIONS = {
   ...TABLE_OPTIONS,
 };
 
+export const EMERGENCY_PLAN_APPROVAL_TABLE_OPTIONS = {
+  ...TABLE_OPTIONS,
+  maxHeight: 'calc(70vh - 50px)',
+};
+
 export const EMERGENCY_PLAN_MANAGEMENT_TABLE_COLUMNS: TableColumnProps[] = [
   BASIC_TABLE_COLUMNS.INDEX,
   BASIC_TABLE_COLUMNS.PLAN_NAME,
@@ -62,3 +67,70 @@ export const EMERGENCY_PLAN_MANAGEMENT_TABLE_COLUMNS: TableColumnProps[] = [
   },
   BASIC_TABLE_COLUMNS.ACTION,
 ];
+
+export const EMERGENCY_PLAN_APPROVAL_TABLE_COLUMNS: TableColumnProps[] = [
+  BASIC_TABLE_COLUMNS.INDEX,
+  BASIC_TABLE_COLUMNS.PLAN_NAME,
+  BASIC_TABLE_COLUMNS.PLAN_TYPE,
+  BASIC_TABLE_COLUMNS.ENENT_TYPE,
+  BASIC_TABLE_COLUMNS.DEPT_NAME,
+  {
+    label: '审批状态',
+    slot: 'approvalStatus',
+    minWidth: '120px',
+  },
+  {
+    label: '公示文件',
+    slot: 'appendix',
+    width: '120px',
+    align: 'center'
+  },
+  {
+    label: '预案审批描述',
+    prop: 'approvalDescription',
+    minWidth: '120px',
+  },
+  {
+    label: '提交人',
+    prop: 'createdByName',
+    minWidth: '120px',
+  },
+  {
+    label: '提交时间',
+    prop: 'createdAt',
+    minWidth: '200px'
+  },
+  BASIC_TABLE_COLUMNS.ACTION,
+];
+
+export const APPROVAL_PROCESS_TABLE_COLUMNS: TableColumnProps[] = [
+  {
+    label: '流程步骤',
+    prop: 'approvalOrder',
+  },
+  {
+    label: '节点描述',
+    prop: 'nodeDescription',
+  },
+  {
+    label: '审批人',
+    prop: 'approverName',
+  },
+  {
+    label: '审批方式',
+    slot: 'approvalType',
+  },
+  {
+    label: '状态',
+    slot: 'approvalStatus',
+  },
+  {
+    label: '审批时间',
+    prop: 'approvalTime',
+    width: '200px',
+  },
+  {
+    label: '审批内容',
+    prop: 'approvalContent',
+  },
+];

src/views/emergency/emergency-plan/src/constant.ts

@@ -1,14 +1,79 @@
+export enum EMERGENCY_PLAN_STATUS {
+  UNAPPROVED = 0,
+  APPROVAL_IN_PROGRESS,
+  RETURNED,
+  PUBLISHED,
+}
+
+export const EMERGENCY_PLAN_STATUS_MAP = {
+  [EMERGENCY_PLAN_STATUS.UNAPPROVED]: '未审批',
+  [EMERGENCY_PLAN_STATUS.APPROVAL_IN_PROGRESS]: '预案审批中',
+  [EMERGENCY_PLAN_STATUS.RETURNED]: '预案已退回',
+  [EMERGENCY_PLAN_STATUS.PUBLISHED]: '已公示',
+};
+
 export const EMERGENCY_PLAN_STATUS_OPTIONS = [
   {
-    label: '预案审批中',
-    value: 1,
+    label: EMERGENCY_PLAN_STATUS_MAP[EMERGENCY_PLAN_STATUS.UNAPPROVED],
+    value: EMERGENCY_PLAN_STATUS.UNAPPROVED,
   },
   {
-    label: '预案已退回',
-    value: 2,
+    label: EMERGENCY_PLAN_STATUS_MAP[EMERGENCY_PLAN_STATUS.APPROVAL_IN_PROGRESS],
+    value: EMERGENCY_PLAN_STATUS.APPROVAL_IN_PROGRESS,
   },
   {
-    label: '已公式',
-    value: 3,
+    label: EMERGENCY_PLAN_STATUS_MAP[EMERGENCY_PLAN_STATUS.RETURNED],
+    value: EMERGENCY_PLAN_STATUS.RETURNED,
+  },
+  {
+    label: EMERGENCY_PLAN_STATUS_MAP[EMERGENCY_PLAN_STATUS.PUBLISHED],
+    value: EMERGENCY_PLAN_STATUS.PUBLISHED,
   },
 ];
+
+export enum APPROVAL_TYPE {
+  COUNTER_SIGN = 0,
+  ORDINARY_SIGN,
+}
+
+export const APPROVAL_TYPE_MAP = {
+  [APPROVAL_TYPE.COUNTER_SIGN]: '会签',
+  [APPROVAL_TYPE.ORDINARY_SIGN]: '或签',
+};
+
+export enum APPROVER_TYPE{
+  FIX = 0,
+  CUSTOM,
+}
+
+export const APPROVER_TYPE_MAP = {
+  [APPROVER_TYPE.FIX]: '固定',
+  [APPROVER_TYPE.CUSTOM]: '自选',
+};
+
+export enum APPROVAL_STATUS {
+  PENDING = 1,
+  APPROVED,
+  REJECTED,
+}
+
+export const APPROVAL_STATUS_MAP = {
+  [APPROVAL_STATUS.PENDING]: '待审批',
+  [APPROVAL_STATUS.APPROVED]: '已审批',
+  [APPROVAL_STATUS.REJECTED]: '退回',
+};
+
+export const APPROVAL_STATUS_OPTIONS = [
+  {
+    label: APPROVAL_STATUS_MAP[APPROVAL_STATUS.PENDING],
+    value: APPROVAL_STATUS.PENDING,
+  },
+  {
+    label: APPROVAL_STATUS_MAP[APPROVAL_STATUS.APPROVED],
+    value: APPROVAL_STATUS.APPROVED,
+  },
+  {
+    label: APPROVAL_STATUS_MAP[APPROVAL_STATUS.REJECTED],
+    value: APPROVAL_STATUS.REJECTED,
+  },
+];

src/views/emergency/emergency-plan/src/hook.ts

@@ -5,7 +5,7 @@ import { ref } from 'vue';
 import type { SysDictDataDetail } from '@/api/dict';
 import { queryDictTypeDetail } from '@/api/dict';
 import { DICT_CODE } from '@/constant/dict';
-import { EMERGENCY_PLAN_STATUS_OPTIONS } from './constant';
+import { EMERGENCY_PLAN_STATUS_OPTIONS, APPROVAL_STATUS_OPTIONS } from './constant';
 export const useEmergencyPlanHook = () => {
   // 预案类型
   const planTypeDice = ref<SysDictDataDetail[]>([]);
@@ -18,11 +18,15 @@ export const useEmergencyPlanHook = () => {
   };
   const getEmergencyPlanStatusLabel = (status: number) => {
     return EMERGENCY_PLAN_STATUS_OPTIONS.find((item) => item.value === status)?.label;
-  }
+  };
+  const getEmergencyPlanApproStatusLabel = (status: number) => {
+    return APPROVAL_STATUS_OPTIONS.find((item) => item.value === status)?.label;
+  };
   return {
     planTypeDice,
     getPlanTypeDict,
     getPlanType,
     getEmergencyPlanStatusLabel,
+    getEmergencyPlanApproStatusLabel,
   };
 };