基本信息

apps/web-ele/src/api/oilstation/emergency/emergency.ts

@@ -0,0 +1,78 @@
+import type { EmergencyMaterialModel, EmergencyMaterialListModel } from './model';
+
+import type { BaseResult } from '#/api/base-result';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+// API路径常量枚举
+enum Api {
+  // 导出
+  export = '/gasEmergencyMaterial/material/export',
+  // 列表查询
+  list = '/gasEmergencyMaterial/material/list',
+  // 基础路径
+  root = '/gasEmergencyMaterial/material',
+}
+
+/**
+ * 查询场站应急防护列表
+ * @param params 查询参数
+ * @returns 分页结果
+ */
+export function emergencyMaterialList(params: any) {
+  return requestClient.get<BaseResult<EmergencyMaterialModel[]>>(Api.list, {
+    params,
+  });
+}
+
+/**
+ * 获取场站应急防护详细信息
+ * @param id 应急防护ID
+ * @returns 应急防护详情
+ */
+export function getEmergencyMaterialDetail(id: string) {
+  return requestClient.get<EmergencyMaterialModel>(`${Api.root}/${id}`);
+}
+
+/**
+ * 新增场站应急防护
+ * @param data 应急防护数据
+ * @returns 操作结果
+ */
+export function addEmergencyMaterial(data: EmergencyMaterialModel) {
+  return requestClient.post(Api.root, data, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 修改场站应急防护
+ * @param data 应急防护数据
+ * @returns 操作结果
+ */
+export function updateEmergencyMaterial(data: EmergencyMaterialModel) {
+  return requestClient.put(Api.root, data, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 删除场站应急防护
+ * @param ids 应急防护ID数组
+ * @returns 操作结果
+ */
+export function deleteEmergencyMaterial(ids: string[]) {
+  return requestClient.delete(`${Api.root}/${ids.join(',')}`, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 导出场站应急防护列表
+ * @param data 导出参数
+ * @returns 导出结果
+ */
+export function exportEmergencyMaterial(data: Partial<EmergencyMaterialModel>) {
+  return commonExport(Api.export, data);
+}

apps/web-ele/src/api/oilstation/emergency/model.ts

@@ -0,0 +1,58 @@
+export interface EmergencyMaterialModel {
+  /**
+   * 主键id
+   */
+  id?: number;
+  
+  /**
+   * 用品ID
+   */
+  protectionId?: number;
+  
+  /**
+   * 数量
+   */
+  quantity?: number;
+  
+  /**
+   * 场站ID
+   */
+  stationId?: number;
+  
+  /**
+   * 用品名称
+   */
+  itemName?: string;
+  
+  /**
+   * 用品类型
+   */
+  itemType?: string;
+  
+  /**
+   * 单位
+   */
+  unit?: string;
+  
+  /**
+   * 创建人
+   */
+  createBy?: string;
+  
+  /**
+   * 创建时间
+   */
+  createTime?: string;
+  
+  /**
+   * 更新人
+   */
+  updateBy?: string;
+  
+  /**
+   * 更新时间
+   */
+  updateTime?: string;
+}
+
+export type EmergencyMaterialListModel = EmergencyMaterialModel[];

apps/web-ele/src/api/oilstation/firstaidkit/firstaidkit.ts

@@ -0,0 +1,33 @@
+import type { FirstAidKitModel, FirstAidKitListModel } from './model';
+
+import type { BaseResult } from '#/api/base-result';
+
+import { requestClient } from '#/api/request';
+
+// API路径常量枚举
+enum Api {
+  // 修改场站急救箱用品
+  update = '/gasFirstAidKit/kit',
+  // 查询场站急救箱用品列表
+  list = '/gasFirstAidKit/kit/list',
+}
+
+/**
+ * 查询场站急救箱用品列表
+ * @param stationId 场站ID
+ * @returns 急救箱用品列表
+ */
+export function getFirstAidKitList(stationId: number) {
+  return requestClient.get<BaseResult<FirstAidKitModel[]>>(`${Api.list}/${stationId}`);
+}
+
+/**
+ * 修改场站急救箱用品
+ * @param data 急救箱用品数据
+ * @returns 操作结果
+ */
+export function updateFirstAidKit(data: FirstAidKitModel | FirstAidKitListModel) {
+  return requestClient.put(Api.update, data, {
+    successMessageMode: 'message',
+  });
+}

apps/web-ele/src/api/oilstation/firstaidkit/model.ts

@@ -0,0 +1,53 @@
+export interface FirstAidKitModel {
+  /**
+   * 主键id
+   */
+  id?: number;
+  
+  /**
+   * 检查数量
+   */
+  checkedQuantity?: number;
+  
+  /**
+   * 标准用品ID
+   */
+  itemId?: number;
+  
+  /**
+   * 场站ID
+   */
+  stationId?: number;
+  
+  /**
+   * 操作人
+   */
+  operator?: string;
+  
+  /**
+   * 操作时间
+   */
+  operationTime?: string;
+  
+  /**
+   * 创建人
+   */
+  createBy?: string;
+  
+  /**
+   * 创建时间
+   */
+  createTime?: string;
+  
+  /**
+   * 更新人
+   */
+  updateBy?: string;
+  
+  /**
+   * 更新时间
+   */
+  updateTime?: string;
+}
+
+export type FirstAidKitListModel = FirstAidKitModel[];

apps/web-ele/src/api/system/infoEntry/emergencyInfo/emergencyInfo.ts

@@ -13,6 +13,12 @@ enum Api {
   list = '/sysEmergencyProtection/protection/list',
   // 基础路径
   root = '/sysEmergencyProtection/protection',
+  // 所有用品列表
+  all = '/sysEmergencyProtection/protection/all',
+}
+
+export function emergencyInfoAll() {
+  return requestClient.get<BaseResult<EmergencyInfoModel[]>>(Api.all);
 }
 
 /**

apps/web-ele/src/api/system/infoEntry/stationInfo/stationInfo.ts

@@ -13,13 +13,17 @@ enum Api {
   list = '/sysStation/station/list',
   // 基础路径
   root = '/sysStation/station',
-  // 查询所有片区信息
-  selectAllSysStationList = '/sysStationArea/area/selectAllSysStationAreaList',
+  // 查询所有片区信息  /sysStationArea/area/selectAllSysStationAreaList
+  selectAllSysStationAreaList = '/sysStationArea/area/selectAllSysStationAreaList',
+  selectAllSysStationList = '/sysStation/station/selectAllSysStationList',
   selectAllSysStation = '/sysStation/station/selectAllSysStationList'
 }
 
 
 
+export function selectAllSysAreaList() {
+  return requestClient.get<BaseResult<StationInfoModel[]>>(Api.selectAllSysStationAreaList);
+}
 /**
  * 查询所有油站信息
  * @returns 油站列表

apps/web-ele/src/views/oilstation/base/config-data.tsx

@@ -3,7 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { DictEnum } from '@vben/constants';
 
-import { selectAllSysStationAreaList } from '#/api/system/infoEntry/stationInfo/stationInfo';
+import { selectAllSysAreaList } from '#/api/system/infoEntry/stationInfo/stationInfo';
 import { getDictOptions } from '#/utils/dict';
 import { renderDict } from '#/utils/render';
 
@@ -25,7 +25,7 @@ export const queryFormSchema: FormSchemaGetter = () => [
       placeholder: '请选择所属片区',
       clearable: true,
       api: async () => {
-        const resp = await selectAllSysStationAreaList();
+        const resp = await selectAllSysAreaList();
         const data = resp || [];
         return Array.isArray(data)
           ? data.map((item: any) => ({
@@ -141,7 +141,7 @@ export const drawerFormSchema: FormSchemaGetter = () => [
     componentProps: {
       placeholder: '请选择所属片区',
       api: async () => {
-        const resp = await selectAllSysStationAreaList();
+        const resp = await selectAllSysAreaList();
         const data = resp || [];
         return Array.isArray(data)
           ? data.map((item: any) => ({

apps/web-ele/src/views/oilstation/emergency/emergency-data.tsx

@@ -1,18 +1,26 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { selectAllSysStationAreaList } from '#/api/system/infoEntry/stationInfo/stationInfo';
+import { emergencyInfoAll } from '#/api/system/infoEntry/emergencyInfo/emergencyInfo';
+
+
+
 export const queryFormSchema: FormSchemaGetter = () => [
   {
-    component: 'Select',
-    fieldName: 'stationName',
+    component: 'ApiSelect',
+    fieldName: 'stationId',
     label: '油站',
     componentProps: {
       placeholder: '请选择油站',
-      options: [
-        { label: '第一加油站', value: '第一加油站' },
-        { label: '第二加油站', value: '第二加油站' },
-        { label: '第三加油站', value: '第三加油站' },
-      ],
+      api: async () => {
+        const response = await selectAllSysStationAreaList({});
+        const data = response || [];
+        return Array.isArray(data) ? data.map(item => ({
+          label: item.stationName,
+          value: item.id.toString()
+        })) : [];
+      },
     },
   },
   {
@@ -43,21 +51,14 @@ export const tableColumns: VxeGridProps['columns'] = [
     minWidth: 120,
   },
   {
-    field: 'name',
+    field: 'itemName',
     title: '名称',
     minWidth: 120,
   },
   {
-    field: 'type',
+    field: 'itemTypeName',
     title: '类型',
     minWidth: 120,
-    formatter: ({ cellValue }) => ({
-      fire_extinguisher: '灭火器',
-      gas_mask: '防毒面具',
-      first_aid_kit: '急救箱',
-      protective_clothing: '防护服',
-      fire_hydrant: '消防栓',
-    })[cellValue] || cellValue,
   },
   {
     field: 'unit',
@@ -70,11 +71,6 @@ export const tableColumns: VxeGridProps['columns'] = [
     minWidth: 80,
   },
   {
-    field: 'remark',
-    title: '备注',
-    minWidth: 150,
-  },
-  {
     field: 'createBy',
     title: '操作人',
     minWidth: 120,
@@ -103,52 +99,43 @@ export const drawerFormSchema: FormSchemaGetter = () => [
     fieldName: 'id',
   },
   {
-    component: 'Select',
-    fieldName: 'stationName',
+    component: 'ApiSelect',
+    fieldName: 'stationId',
     label: '油站',
     componentProps: {
       placeholder: '请选择油站',
-      options: [
-        { label: '第一加油站', value: '第一加油站' },
-        { label: '第二加油站', value: '第二加油站' },
-        { label: '第三加油站', value: '第三加油站' },
-      ],
-    },
-    rules: 'required',
-  },
-  {
-    component: 'Input',
-    fieldName: 'name',
-    label: '名称',
-    componentProps: {
-      placeholder: '请输入名称',
-      maxlength: 100,
-    },
-    rules: 'required',
-  },
-  {
-    component: 'Select',
-    fieldName: 'type',
-    label: '类型',
-    componentProps: {
-      placeholder: '请选择类型',
-      options: [
-        { label: '灭火器', value: 'fire_extinguisher' },
-        { label: '防毒面具', value: 'gas_mask' },
-        { label: '急救箱', value: 'first_aid_kit' },
-        { label: '防护服', value: 'protective_clothing' },
-        { label: '消防栓', value: 'fire_hydrant' },
-      ],
+      api: async () => {
+        const response = await selectAllSysStationAreaList({});
+        const data = response || [];
+        return Array.isArray(data) ? data.map(item => ({
+          label: item.stationName,
+          value: item.id.toString()
+        })) : [];
+      },
     },
     rules: 'required',
   },
   {
-    component: 'Input',
-    fieldName: 'unit',
-    label: '单位',
+    component: 'ApiSelect',
+    fieldName: 'protectionId',
+    label: '用品名称',
     componentProps: {
-      placeholder: '请输入单位',
-      maxlength: 20,
+      placeholder: '请选择用品名称',
+      api: async () => {
+        try {
+          // 调用真实的用品名称接口
+          const response = await emergencyInfoAll();
+          const data = response || [];
+          console.log('获取到的用品数据:', data);
+          return Array.isArray(data) ? data.map((item: any) => ({
+            label: item.name || item.itemName || `用品${item.id}`,
+            value: item.id.toString()
+          })) : [];
+        } catch (error) {
+          console.error('获取用品名称列表失败:', error);
+          return [];
+        }
+      },
     },
     rules: 'required',
   },
@@ -163,14 +150,5 @@ export const drawerFormSchema: FormSchemaGetter = () => [
     },
     rules: 'required',
   },
-  {
-    component: 'Input',
-    fieldName: 'remark',
-    label: '备注',
-    componentProps: {
-      maxlength: 500,
-      type: 'textarea',
-      showWordLimit: true,
-    },
-  },
 ];
+

apps/web-ele/src/views/oilstation/emergency/emergency-drawer.vue

@@ -2,8 +2,10 @@
 import { ref } from 'vue';
 
 import { useVbenDrawer, useVbenForm } from '@vben/common-ui';
+import { ElMessage } from 'element-plus';
 
 import { drawerFormSchema } from './emergency-data';
+import { addEmergencyMaterial, getEmergencyMaterialDetail, updateEmergencyMaterial } from '#/api/oilstation/emergency/emergency';
 
 const emit = defineEmits<{
   reload: [];
@@ -26,20 +28,21 @@ const [Drawer, drawerApi] = useVbenDrawer({
       const { id, isUpdate } = drawerApi.getData();
       isUpdateRef.value = isUpdate;
       if (isUpdate && id) {
-        // 模拟获取详情数据
-        const mockDetail = {
-          id,
-          stationName: '第一加油站',
-          name: '干粉灭火器',
-          type: 'fire_extinguisher',
-          unit: '个',
-          quantity: 5,
-          remark: '定期检查压力',
+        const response = await getEmergencyMaterialDetail(id.toString());
+        const detailData = response?.data || response;
+        
+        // 处理数据格式，确保与表单字段匹配
+        const formData = {
+          id: detailData.id,
+          stationId: detailData.stationId?.toString() || '',
+          protectionId: detailData.protectionId?.toString() || '',
+          quantity: detailData.quantity || 0,
         };
-        await formApi.setValues(mockDetail);
+        await formApi.setValues(formData);
       }
     } catch (error) {
       console.error('获取应急防护详情失败:', error);
+      ElMessage.error('获取应急防护详情失败');
     } finally {
       drawerApi.drawerLoading(false);
     }
@@ -53,13 +56,24 @@ const [Drawer, drawerApi] = useVbenDrawer({
         return;
       }
       const data = await formApi.getValues();
-      // 模拟提交数据
-      console.log('提交数据:', data);
-      // 模拟成功
+      
+      // 处理提交数据格式
+      const submitData = {
+        id: data.id,
+        stationId: Number(data.stationId),
+        protectionId: Number(data.protectionId),
+        quantity: data.quantity,
+      };
+      
+      await (isUpdateRef.value
+        ? updateEmergencyMaterial(submitData)
+        : addEmergencyMaterial(submitData));
+      
       emit('reload');
       drawerApi.close();
     } catch (error) {
       console.error('保存应急防护信息失败:', error);
+      ElMessage.error('保存应急防护信息失败');
     } finally {
       this.confirmLoading = false;
     }
@@ -75,4 +89,4 @@ const [Drawer, drawerApi] = useVbenDrawer({
   <Drawer :title="isUpdateRef ? '编辑应急防护' : '新增应急防护'">
     <Form />
   </Drawer>
-</template>
+</template>

apps/web-ele/src/views/oilstation/emergency/index.vue

@@ -7,12 +7,13 @@ import { ref } from 'vue';
 
 import { Page, useVbenDrawer } from '@vben/common-ui';
 
-import { ElMessageBox } from 'element-plus';
+import { ElMessageBox, ElMessage } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
 import { queryFormSchema, tableColumns } from './emergency-data';
 import EmergencyDrawerComp from './emergency-drawer.vue';
+import { emergencyMaterialList, deleteEmergencyMaterial } from '#/api/oilstation/emergency/emergency';
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -25,68 +26,6 @@ const formOptions: VbenFormProps = {
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
 };
 
-// 模拟数据
-const mockData = {
-  rows: [
-    {
-      id: 1,
-      stationName: '第一加油站',
-      name: '干粉灭火器',
-      type: 'fire_extinguisher',
-      unit: '个',
-      quantity: 5,
-      remark: '定期检查压力',
-      createBy: '管理员',
-      createTime: '2024-01-01 10:00:00',
-    },
-    {
-      id: 2,
-      stationName: '第二加油站',
-      name: '防毒面具',
-      type: 'gas_mask',
-      unit: '套',
-      quantity: 10,
-      remark: '有效期至2025-12-31',
-      createBy: '管理员',
-      createTime: '2024-01-02 11:00:00',
-    },
-    {
-      id: 3,
-      stationName: '第一加油站',
-      name: '急救箱',
-      type: 'first_aid_kit',
-      unit: '个',
-      quantity: 2,
-      remark: '包含常用药品',
-      createBy: '管理员',
-      createTime: '2024-01-03 12:00:00',
-    },
-    {
-      id: 4,
-      stationName: '第三加油站',
-      name: '防护服',
-      type: 'protective_clothing',
-      unit: '套',
-      quantity: 8,
-      remark: '防火防化',
-      createBy: '管理员',
-      createTime: '2024-01-04 13:00:00',
-    },
-    {
-      id: 5,
-      stationName: '第二加油站',
-      name: '消防栓',
-      type: 'fire_hydrant',
-      unit: '个',
-      quantity: 3,
-      remark: '每月检查一次',
-      createBy: '管理员',
-      createTime: '2024-01-05 14:00:00',
-    },
-  ],
-  total: 5,
-};
-
 const gridOptions: VxeGridProps = {
   checkboxConfig: {
     highlight: true,
@@ -99,24 +38,27 @@ const gridOptions: VxeGridProps = {
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues = {}) => {
-        // 模拟API请求
-        console.log('查询参数:', formValues, page);
-        // 模拟过滤
-        let filteredRows = [...mockData.rows];
-        if (formValues.stationName) {
-          filteredRows = filteredRows.filter(row => row.stationName === formValues.stationName);
-        }
-        if (formValues.type) {
-          filteredRows = filteredRows.filter(row => row.type === formValues.type);
+        try {
+          // 构建查询参数
+          const params = {
+            ...formValues,
+            pageNum: page.currentPage,
+            pageSize: page.pageSize,
+          };
+          
+          // 调用API获取数据
+          const response = await emergencyMaterialList(params);
+          console.log('查询应急防护列表响应:', response)
+          const data = response || {};
+          return { 
+            items: data.rows|| [], 
+            total: data.total || 0 
+          };
+        } catch (error) {
+          console.error('查询应急防护列表失败:', error);
+          ElMessage.error('查询应急防护列表失败');
+          return { items: [], total: 0 };
         }
-        // 模拟分页
-        const start = (page.currentPage - 1) * page.pageSize;
-        const end = start + page.pageSize;
-        const paginatedRows = filteredRows.slice(start, end);
-        return { 
-          items: paginatedRows, 
-          total: filteredRows.length 
-        };
       },
     },
   },
@@ -152,15 +94,20 @@ function handleEdit(row: any) {
 
 // 单个删除应急防护
 async function confirmEvent(row: any) {
-  // 模拟删除操作
-  console.log('删除应急防护:', row.id);
-  await basicTableApi.reload();
+  try {
+    await deleteEmergencyMaterial([row.id.toString()]);
+    ElMessage.success('删除成功');
+    await basicTableApi.reload();
+  } catch (error) {
+    console.error('删除应急防护失败:', error);
+    ElMessage.error('删除应急防护失败');
+  }
 }
 
 // 批量删除应急防护
 function deleteHandle() {
   const checkRecords = basicTableApi.grid.getCheckboxRecords();
-  const ids = checkRecords.map((item: any) => item.id);
+  const ids = checkRecords.map((item: any) => item.id.toString());
   if (ids.length <= 0) {
     return;
   }
@@ -170,9 +117,14 @@ function deleteHandle() {
     cancelButtonText: '取消',
     type: 'warning',
   }).then(async () => {
-    // 模拟批量删除操作
-    console.log('批量删除应急防护:', ids);
-    await basicTableApi.reload();
+    try {
+      await deleteEmergencyMaterial(ids);
+      ElMessage.success('删除成功');
+      await basicTableApi.reload();
+    } catch (error) {
+      console.error('批量删除应急防护失败:', error);
+      ElMessage.error('批量删除应急防护失败');
+    }
   });
 }
 </script>

apps/web-ele/src/views/oilstation/extinguisher/extinguisher-data.tsx

@@ -1,15 +1,27 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { selectAllSysStationAreaList } from '#/api/system/infoEntry/stationInfo/stationInfo';
+
 export const queryFormSchema: FormSchemaGetter = () => [
-  {
-    component: 'Input',
-    fieldName: 'stationName',
-    label: '油站',
-    componentProps: {
-      placeholder: '请输入油站名称',
+   {
+      component: 'ApiSelect',
+      fieldName: 'stationId',
+      label: '油站',
+      componentProps: {
+        placeholder: '请选择油站',
+        api: async () => {
+          const resp = await selectAllSysStationAreaList();
+          const data = resp || [];
+          return Array.isArray(data)
+            ? data.map((item: any) => ({
+                label: item.stationName,
+                value: item.id.toString(),
+              }))
+            : [];
+        },
+      },
     },
-  },
   {
     component: 'DatePicker',
     componentProps: {
@@ -85,14 +97,7 @@ export const tableColumns: VxeGridProps['columns'] = [
       params.cellValue,
   },
   {
-    field: 'remark',
-    title: '备注',
-    minWidth: 150,
-    formatter: (params: { cellValue: string; column: any; row: any }) =>
-      params.cellValue,
-  },
-  {
-    field: 'operatorName',
+    field: 'updateBy',
     title: '操作人姓名',
     minWidth: 120,
     formatter: (params: { cellValue: string; column: any; row: any }) =>
@@ -117,12 +122,21 @@ export const drawerFormSchema: FormSchemaGetter = () => [
     fieldName: 'id',
   },
   {
-    component: 'Input',
-    fieldName: 'stationName',
+    component: 'ApiSelect',
+    fieldName: 'stationId',
     label: '油站',
     componentProps: {
-      placeholder: '请输入油站名称',
-      maxlength: 100,
+      placeholder: '请选择油站',
+      api: async () => {
+        const resp = await selectAllSysStationAreaList();
+        const data = resp || [];
+        return Array.isArray(data)
+          ? data.map((item: any) => ({
+              label: item.stationName,
+              value: item.id.toString(),
+            }))
+          : [];
+      },
     },
     rules: 'required',
   },
@@ -190,28 +204,5 @@ export const drawerFormSchema: FormSchemaGetter = () => [
     label: '有效日期',
     rules: 'required',
   },
-  {
-    component: 'Input',
-    fieldName: 'remark',
-    label: '备注',
-    componentProps: {
-      placeholder: '请输入备注',
-      maxlength: 200,
-      type: 'textarea',
-      showWordLimit: true,
-    },
-  },
-  {
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-    componentProps: {
-      placeholder: '请输入油站ID',
-      maxlength: 100,
-    },
-    fieldName: 'stationId',
-    label: '油站ID',
-  },
+
 ];

apps/web-ele/src/views/oilstation/extinguisher/extinguisher-drawer.vue

@@ -61,8 +61,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 
       // 确保使用正确的字段名提交数据
       const submitData = {
-        ...data,
-        stationId: 1, // 默认油站ID，实际应从表单或其他地方获取
+        ...data
       };
 
       console.log('提交数据:', submitData);

apps/web-ele/src/views/oilstation/firstaidkit/index.vue

@@ -1,36 +1,109 @@
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 
-// 模拟油站数据
-const stations = [
-  { label: '龙飞加油站', value: '1' },
-  { label: '和平加油站', value: '2' },
-  { label: '安全加油站', value: '3' }
-]
-
-// 模拟急救箱用品数据
-const firstAidItems = reactive([
-  { id: 1, name: '一次性手套', unit: '双', standardQty: 5, checkQty: 5 },
-  { id: 2, name: '云南白药（气雾剂）', unit: '瓶', standardQty: 1, checkQty: 1 },
-  { id: 3, name: '创可贴', unit: '片', standardQty: 30, checkQty: 30 },
-  { id: 4, name: '医用酒精棉球或类似用品', unit: '瓶', standardQty: 2, checkQty: 2 },
-  { id: 5, name: '红花油', unit: '瓶', standardQty: 1, checkQty: 1 },
-  { id: 6, name: '绷带', unit: '卷', standardQty: 2, checkQty: 2 },
-  { id: 7, name: '脱脂棉', unit: '包', standardQty: 2, checkQty: 2 },
-  { id: 8, name: '脱脂棉签', unit: '包', standardQty: 1, checkQty: 1 },
-  { id: 9, name: '风油精', unit: '瓶', standardQty: 2, checkQty: 2 },
-  { id: 10, name: '胶带', unit: '卷', standardQty: 2, checkQty: 2 }
-])
+import { selectAllSysStationAreaList } from '#/api/system/infoEntry/stationInfo/stationInfo'
+import { getFirstAidKitList, updateFirstAidKit } from '#/api/oilstation/firstaidkit/firstaidkit'
 
+// 油站数据
+const stations = ref<any[]>([])
+// 急救箱用品数据
+const firstAidItems = reactive<any[]>([])
+// 加载状态
+const loading = ref(false)
 // 选中的油站
-const selectedStation = ref('1')
+const selectedStation = ref('')
+
+// 获取油站列表
+const fetchStations = async () => {
+  try {
+    const response = await selectAllSysStationAreaList()
+    const data = response || []
+    stations.value = Array.isArray(data) ? data.map(item => ({
+      label: item.stationName,
+      value: item.id.toString()
+    })) : []
+    
+    // 默认选中第一个油站
+    if (stations.value.length > 0) {
+      selectedStation.value = stations.value[0].value
+      fetchFirstAidKitList()
+    }
+  } catch (error) {
+    console.error('获取油站列表失败:', error)
+    ElMessage.error('获取油站列表失败')
+  }
+}
+
+// 获取急救箱用品列表
+const fetchFirstAidKitList = async () => {
+  if (!selectedStation.value) return
+  
+  loading.value = true
+  try {
+    const response = await getFirstAidKitList(Number(selectedStation.value))
+    console.log('获取急救箱用品列表响应:', response)
+    const data = response || []
+    
+    // 处理数据格式，确保与页面显示字段匹配
+    firstAidItems.splice(0, firstAidItems.length)
+    if (Array.isArray(data)) {
+      data.forEach(item => {
+        firstAidItems.push({
+          id: item.id,
+          itemId: item.itemId,
+          name: item.name || `用品${item.itemId}`, // 如果没有名称，使用默认名称
+          unit: item.unit || '', // 如果没有单位，使用空字符串
+          standardQty: item.standardQuantity || 0, // 标准数量
+          checkQty: item.checkedQuantity || 0, // 检查数量
+          stationId: item.stationId
+        })
+      })
+    }
+  } catch (error) {
+    console.error('获取急救箱用品列表失败:', error)
+    ElMessage.error('获取急救箱用品列表失败')
+  } finally {
+    loading.value = false
+  }
+}
 
 // 保存修改
-const saveChanges = () => {
-  // 这里可以添加保存逻辑，如调用接口
-  ElMessage.success('保存成功')
+const saveChanges = async () => {
+  if (!selectedStation.value) {
+    ElMessage.warning('请选择油站')
+    return
+  }
+  
+  loading.value = true
+  try {
+    // 构建保存数据格式
+    const saveData = firstAidItems.map(item => ({
+      id: item.id,
+      itemId: item.itemId,
+      checkedQuantity: item.checkQty,
+      stationId: Number(selectedStation.value)
+    }))
+    
+    await updateFirstAidKit(saveData)
+    ElMessage.success('保存成功')
+  } catch (error) {
+    console.error('保存失败:', error)
+    ElMessage.error('保存失败')
+  } finally {
+    loading.value = false
+  }
 }
+
+// 当油站变更时，重新获取急救箱用品列表
+const handleStationChange = () => {
+  fetchFirstAidKitList()
+}
+
+// 组件挂载时获取油站列表
+onMounted(() => {
+  fetchStations()
+})
 </script>
 
 <template>
@@ -38,7 +111,12 @@ const saveChanges = () => {
     <div class="search-container">
       <el-form :inline="true" label-position="right">
         <el-form-item label="油站" label-width="80px">
-          <el-select v-model="selectedStation" placeholder="请选择油站" style="width: 200px">
+          <el-select 
+            v-model="selectedStation" 
+            placeholder="请选择油站" 
+            style="width: 200px"
+            @change="handleStationChange"
+          >
             <el-option
               v-for="station in stations"
               :key="station.value"
@@ -51,7 +129,12 @@ const saveChanges = () => {
     </div>
 
     <div class="table-container">
-      <el-table :data="firstAidItems" border style="width: 100%">
+      <el-table 
+        v-loading="loading" 
+        :data="firstAidItems" 
+        border 
+        style="width: 100%"
+      >
         <el-table-column prop="name" label="用品名称"/>
         <el-table-column prop="unit" label="单位"/>
         <el-table-column prop="standardQty" label="标准数量"/>
@@ -69,7 +152,13 @@ const saveChanges = () => {
     </div>
 
     <div class="action-container">
-      <el-button type="primary" @click="saveChanges">保存</el-button>
+      <el-button 
+        type="primary" 
+        @click="saveChanges"
+        :loading="loading"
+      >
+        保存
+      </el-button>
     </div>
   </div>
 </template>

apps/web-ele/src/views/oilstation/idphoto/idphoto-data.tsx

@@ -3,8 +3,9 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { DictEnum } from '@vben/constants';
 
-import { stationInfoList } from '#/api/system/infoEntry/stationInfo/stationInfo';
+import { selectAllSysStationAreaList } from '#/api/system/infoEntry/stationInfo/stationInfo';
 import { getSingleImageUploadConfig,getFileUploadConfig } from '#/components/upload';
+import { requestClient } from '#/api/request';
 // import { uploadFile } from '#/api/upload';
 import { getDictOptions } from '#/utils/dict';
 import { renderDict } from '#/utils/render';
@@ -21,8 +22,22 @@ const DICT_KEYS = {
   STATUS: 'status',
 };
 
-// 获取证照类型字典选项
-const getCertificateTypes = () => getDictOptions(DICT_KEYS.ID_PAPERS_NAME);
+// 获取证照类型列表
+const getCertificateTypes = async () => {
+  try {
+    const resp = await requestClient.get('/sysLicenseRule/rule/allList');
+    const data = resp || [];
+    return Array.isArray(data)
+      ? data.map((item: any) => ({
+          label: item.licenseName,
+          value: item.id,
+        }))
+      : [];
+  } catch (error) {
+    console.error('获取证照类型失败:', error);
+    return [];
+  }
+};
 
 // 获取机构类型字典选项
 const getOrganizationTypes = () =>
@@ -34,24 +49,34 @@ const getStorageLocations = () => getDictOptions(DICT_KEYS.ID_PAPERS_STORAGE);
 // 获取状态字典选项
 const getStatusOptions = () =>
   getDictOptions(DICT_KEYS.STATUS) || [
-    { label: '启用', value: '1' },
-    { label: '禁用', value: '0' },
+    { label: '启用', value: 1 },
+    { label: '禁用', value: 0 },
   ];
 
 export const queryFormSchema: FormSchemaGetter = () => [
   {
-    component: 'Input',
-    fieldName: 'stationName',
+    component: 'ApiSelect',
+    fieldName: 'stationId',
     label: '油站',
     componentProps: {
-      placeholder: '请输入油站名称',
+      placeholder: '请选择油站',
+      api: async () => {
+        const resp = await selectAllSysStationAreaList();
+        const data = resp || [];
+        return Array.isArray(data)
+          ? data.map((item: any) => ({
+              label: item.stationName,
+              value: item.id.toString(),
+            }))
+          : [];
+      },
     },
   },
   {
-    component: 'Select',
+    component: 'ApiSelect',
     componentProps: {
       placeholder: '请选择证照名称',
-      options: getCertificateTypes(),
+      api: getCertificateTypes,
     },
     fieldName: 'licenseNameCode',
     label: '证照名称',
@@ -73,8 +98,8 @@ export const queryFormSchema: FormSchemaGetter = () => [
     componentProps: {
       placeholder: '请选择状态',
       options: [
-        { label: '启用', value: '1' },
-        { label: '禁用', value: '0' },
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
       ],
     },
     fieldName: 'statusCode',
@@ -93,14 +118,9 @@ export const tableColumns: VxeGridProps['columns'] = [
     minWidth: 120,
   },
   {
-    field: 'licenseNameCode',
+    field: 'licenseName',
     title: '证照名称',
     minWidth: 150,
-    formatter: (params: { cellValue: string; column: any; row: any }) => {
-      const options = getCertificateTypes();
-      const option = options.find((item) => item.value === params.cellValue);
-      return option ? option.label : params.cellValue;
-    },
   },
   {
     field: 'orgTypeCode',
@@ -171,15 +191,9 @@ export const tableColumns: VxeGridProps['columns'] = [
     minWidth: 100,
     slots: {
       default: ({ row }) => {
-        return renderDict(row.statusCode, DictEnum.SYS_DISABLED_STATUS);
+        return renderDict(row.statusCode.toString(), DictEnum.SYS_DISABLED_STATUS);
       },
     },
-    // formatter: (params: { cellValue: string; column: any; row: any }) => {
-    //   const options = getStatusOptions();
-    //   const option = options.find((item) => item.value === params.cellValue);
-    //   const color = params.cellValue === '1' ? 'success' : 'danger';
-    //   return `<el-tag type="${color}">${option ? option.label : params.cellValue}</el-tag>`;
-    // },
   },
   {
     field: 'action',
@@ -201,18 +215,18 @@ export const drawerFormSchema: FormSchemaGetter = () => [
   },
   {
     component: 'ApiSelect',
-    fieldName: 'stationName',
+    fieldName: 'stationId',
     label: '油站',
     componentProps: {
       placeholder: '请输入油站名称',
       maxlength: 100,
       api: async () => {
-        const resp = await stationInfoList({});
-        const data = resp.rows || [];
+        const resp = await selectAllSysStationAreaList();
+        const data = resp || [];
         return Array.isArray(data)
           ? data.map((item: any) => ({
               label: item.stationName,
-              value: item.id,
+              value: item.id.toString(),
             }))
           : [];
       },
@@ -220,12 +234,50 @@ export const drawerFormSchema: FormSchemaGetter = () => [
     rules: 'required',
   },
   {
-    component: 'Select',
-    componentProps: {
-      placeholder: '请选择证照名称',
-      options: getCertificateTypes(),
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
     },
-    fieldName: 'licenseNameCode',
+    fieldName: 'licenseName',
+  },
+  {
+    component: 'ApiSelect',
+    componentProps: (form: any) => {
+      return {
+        placeholder: '请选择证照名称',
+        api: async () => {
+          const resp = await requestClient.get('/sysLicenseRule/rule/allList');
+          const data = resp || [];
+          return Array.isArray(data)
+            ? data.map((item: any) => ({
+                label: item.licenseName,
+                value: item.id,
+                // 存储任务要求信息
+                renewalRequirements: item.renewRequirements,
+              }))
+            : [];
+        },
+        onChange: async (selectedId: string | number) => {
+          if (selectedId && form) {
+            try {
+              // 获取选中的证照信息
+              const resp = await requestClient.get('/sysLicenseRule/rule/allList');
+              const data = resp || [];
+              const selectedLicense = data.find((item: any) => item.id === selectedId);
+              if (selectedLicense) {
+                // 设置任务要求
+                form.renewalRequirements = selectedLicense.renewRequirements;
+                form.licenseName = selectedLicense.licenseName;
+              }
+            } catch (error) {
+              console.error('获取证照详情失败:', error);
+            }
+          }
+        },
+      };
+    },
+    fieldName: 'licenseRuleId',
     label: '证照名称',
     rules: 'required',
   },
@@ -316,28 +368,6 @@ export const drawerFormSchema: FormSchemaGetter = () => [
     },
   },
   {
-    component: 'DatePicker',
-    componentProps: {
-      type: 'date',
-      format: 'YYYY-MM-DD HH:mm:ss',
-      valueFormat: 'YYYY-MM-DD HH:mm:ss',
-      placeholder: '请选择下次年审时间',
-    },
-    fieldName: 'nextAnnualReviewDate',
-    label: '下次年审时间',
-  },
-  {
-    component: 'DatePicker',
-    componentProps: {
-      type: 'date',
-      format: 'YYYY-MM-DD HH:mm:ss',
-      valueFormat: 'YYYY-MM-DD HH:mm:ss',
-      placeholder: '请选择下次换证日期',
-    },
-    fieldName: 'nextRenewalDate',
-    label: '下次换证日期',
-  },
-  {
     component: 'Input',
     fieldName: 'certificateScanPath',
     label: '证件扫描件',
@@ -354,12 +384,13 @@ export const drawerFormSchema: FormSchemaGetter = () => [
       return {
         ...getFileUploadConfig('.pdf,.docx,.doc,.txt', 'text', 1, '/common/upload'),
         onSuccess: (res: any) => {
-          if (res.code === 200) {
-            row.certificateScanPath = res.data.fileName;
-            // form.setFieldValue('certificateScanPath', res.data.fileName);
-            row.certificateScanPathUrl = [res.data.url].map((url) => ({ url }));
-            return res.data;
-          }
+          // if (res.code === 200) {
+          //   row.certificateScanPath = res.data.fileName;
+          //   console.log('处理后的 certificateScanPath:', res.data);
+          //   // row.setFieldValue('certificateScanPath', res.data.fileName);
+          //   row.certificateScanPathUrl = [res.data.url].map((url) => ({ url }));
+          //   return res.data;
+          // }
           // return Promise.reject(res);
         },
       };
@@ -375,8 +406,8 @@ export const drawerFormSchema: FormSchemaGetter = () => [
     componentProps: {
       // 直接使用具体的选项对象，避免可能的getDictOptions问题
       options: [
-        { label: '启用', value: '1' },
-        { label: '禁用', value: '0' },
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
       ],
       isButton: true,
     },

apps/web-ele/src/views/oilstation/idphoto/idphoto-drawer.vue

@@ -28,171 +28,254 @@ const DICT_KEYS = {
   STATUS: 'status',
 };
 
-const uploadUrlRef = ref<string>('');
+// 响应式变量
+const isUpdateRef = ref<boolean>(false);
+
 // 获取字典选项函数
 const getDictOptionsByKey = (key: string) => getDictOptions(key);
 
+// 初始化表单
 const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
   schema: drawerFormSchema(),
 });
 
-// 获取初始字典数据，确保表单加载时有默认选项
-onMounted(() => {
-  // 字典数据会在表单schema中动态获取，这里只是为了确保组件挂载时有初始数据
-  getDictOptionsByKey(DICT_KEYS.ID_PAPERS_NAME);
-  getDictOptionsByKey(DICT_KEYS.ID_PAPERS_ORGANIZATION);
-  getDictOptionsByKey(DICT_KEYS.ID_PAPERS_STORAGE);
-  getDictOptionsByKey(DICT_KEYS.STATUS);
-});
-
-const isUpdateRef = ref<boolean>(false);
-
+// 初始化抽屉
 const [Drawer, drawerApi] = useVbenDrawer({
   async onOpenChange(isOpen) {
     if (!isOpen) {
       return;
     }
-    try {
-      drawerApi.drawerLoading(true);
-      const { id, isUpdate } = drawerApi.getData();
-      isUpdateRef.value = isUpdate;
-      if (isUpdate && id) {
-        const res = await getIdPhotoDetail(id);
-        console.log('获取证照详情数据:', res);
-        // 确保从正确的响应结构中获取数据
-        const detailData = res?.data || res;
-
-        uploadUrlRef.value = detailData.certificateScanPath || '';
-        // 处理长期有效的布尔值转换并确保字段名映射正确
-        const formData = {
-          ...detailData,
-          isLongTerm:
-            detailData.isLongTerm === '1' ||
-            detailData.isLongTerm === 1 ||
-            detailData.isLongTerm === true,
-          // 文件列表格式转换，确保符合Upload组件要求
-          certificateScanPath: detailData.certificateScanPath
-            ? typeof detailData.certificateScanPath === 'string' &&
-              detailData.certificateScanPath.includes(',')
-              ? // 如果是逗号分隔的多个URL字符串
-                detailData.certificateScanPath
-                  .split(',')
-                  .map((url: string, index: number) => ({
-                    name: url.split('/').pop() || `文件${index + 1}`,
-                    url,
-                    status: 'success',
-                    uid: Date.now() + index,
-                  }))
-              : // 单个URL字符串
-                typeof detailData.certificateScanPath === 'string'
-                ? [
-                    {
-                      name:
-                        detailData.certificateScanPath.split('/').pop() ||
-                        '未知文件',
-                      url: detailData.certificateScanPath,
-                      status: 'success',
-                      uid: Date.now(),
-                    },
-                  ]
-                : // 已经是数组格式
-                  Array.isArray(detailData.certificateScanPath)
-                  ? detailData.certificateScanPath.map(
-                      (item: any, index: number) => ({
-                        name:
-                          (item.url || item).split('/').pop() ||
-                          `文件${index + 1}`,
-                        url: item.url || item,
-                        status: 'success',
-                        uid: Date.now() + index,
-                      }),
-                    )
-                  : []
-            : [],
-        };
-        // Object.assign(drawerFormRef, formData);
-        await formApi.setValues(formData);
-      }
-    } catch (error) {
-      console.error('获取证照详情失败:', error);
-    } finally {
-      drawerApi.drawerLoading(false);
-    }
+    await handleDrawerOpen();
   },
 
   async onConfirm() {
-    try {
-      this.confirmLoading = true;
-      const { valid } = await formApi.validate();
-      if (!valid) {
-        return;
-      }
-      const data = await formApi.getValues();
-      // 处理长期有效的逻辑
-      if (data.isLongTerm) {
-        data.validDate = null;
-      }
-      data.isLongTerm = data.isLongTerm ? '1' : '0';
-      data.stationId = 1;
-      // 确保使用正确的字段名提交数据
-      console.log(data.certificateScanPath);
-      const submitData = {
-        ...data,
-        licenseNameCode: data.licenseNameCode || data.certificateName,
-        orgTypeCode: data.orgTypeCode || data.organizationType,
-        certificateNumber: data.certificateNumber || data.certificateNo,
-        storageLocationCode: data.storageLocationCode || data.storageLocation,
-        renewalRequirements:
-          data.renewalRequirements || data.replacementRequirements,
-        // url 数组转换为逗号分隔的字符串
-        statusCode: data.statusCode || data.status,
-      };
-
-      console.log('提交数据:', submitData);
-      await (isUpdateRef.value
-        ? updateIdPhoto(submitData)
-        : addIdPhoto(submitData));
-      emit('reload');
-      drawerApi.close();
-    } catch (error) {
-      console.error('保存证照信息失败:', error);
-    } finally {
-      this.confirmLoading = false;
-    }
+    await handleFormSubmit();
   },
 
   onClosed() {
     formApi.resetForm();
   },
 });
+
+/**
+ * 处理抽屉打开逻辑
+ */
+async function handleDrawerOpen() {
+  try {
+    drawerApi.drawerLoading(true);
+    const { id, isUpdate } = drawerApi.getData();
+    isUpdateRef.value = isUpdate;
+    
+    // 处理编辑模式的数据回显
+    if (isUpdate && id) {
+      await loadIdPhotoDetail(id);
+    }
+  } catch (error) {
+    console.error('打开抽屉失败:', error);
+  } finally {
+    drawerApi.drawerLoading(false);
+  }
+}
+
+/**
+ * 加载证照详情数据
+ * @param id 证照ID
+ */
+async function loadIdPhotoDetail(id: string | number) {
+  try {
+    const res = await getIdPhotoDetail(id);
+    console.log('获取证照详情数据:', res);
+    
+    // 确保从正确的响应结构中获取数据
+    const detailData = res?.data || res;
+    
+    // 构建表单数据
+    const formData = buildFormData(detailData);
+    
+    // 设置表单值
+    await formApi.setValues(formData);
+  } catch (error) {
+    console.error('获取证照详情失败:', error);
+  }
+}
+
+/**
+ * 构建表单数据
+ * @param detailData 详情数据
+ * @returns 格式化后的表单数据
+ */
+function buildFormData(detailData: any) {
+  // 处理长期有效的布尔值转换
+  const isLongTerm = detailData.isLongTerm === '1' || 
+                     detailData.isLongTerm === 1 || 
+                     detailData.isLongTerm === true;
+  
+  return {
+    ...detailData,
+    isLongTerm,
+    // 保持 certificateScanPath 为字符串格式，逗号隔开
+    certificateScanPath: detailData.certificateScanPath || '',
+    // 处理 certificateScanPathUrl 字段，确保为数组格式
+    certificateScanPathUrl: formatCertificateScanPathUrl(detailData),
+  };
+}
+
+/**
+ * 格式化 certificateScanPathUrl 字段
+ * @param detailData 详情数据
+ * @returns 格式化后的数组
+ */
+function formatCertificateScanPathUrl(detailData: any) {
+  if (!detailData.certificateScanPathUrl) {
+    return [];
+  }
+  
+  // 处理数组格式
+  if (Array.isArray(detailData.certificateScanPathUrl)) {
+    return detailData.certificateScanPathUrl.map((url: string, index: number) => ({
+      name: detailData.certificateScanPath?.split(',')[index] || `文件${index + 1}`,
+      url,
+      status: 'success',
+      uid: Date.now() + index,
+    }));
+  }
+  
+  // 处理字符串格式
+  if (typeof detailData.certificateScanPathUrl === 'string') {
+    return [{
+      name: detailData.certificateScanPathUrl.split('/').pop() || '未知文件',
+      url: detailData.certificateScanPathUrl,
+      status: 'success',
+      uid: Date.now(),
+    }];
+  }
+  
+  return [];
+}
+
+/**
+ * 处理表单提交
+ */
+async function handleFormSubmit() {
+  try {
+    // 验证表单
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    
+    // 获取表单数据
+    const data = await formApi.getValues();
+    console.log('表单数据:', data);
+    
+    // 处理数据
+    const processedData = processFormData(data);
+    
+    // 构建提交数据
+    const submitData = buildSubmitData(processedData);
+    console.log('提交数据:', submitData);
+    
+    // 提交请求
+    await (isUpdateRef.value ? updateIdPhoto(submitData) : addIdPhoto(submitData));
+    
+    // 触发重载事件并关闭抽屉
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error('保存证照信息失败:', error);
+  }
+}
+
+/**
+ * 处理表单数据
+ * @param data 表单数据
+ * @returns 处理后的数据
+ */
+function processFormData(data: any) {
+  // 处理长期有效的逻辑
+  if (data.isLongTerm) {
+    data.validDate = null;
+  }
+  
+  // 转换长期有效字段格式
+  data.isLongTerm = data.isLongTerm ? '1' : '0';
+  
+  // 设置默认站点ID
+  data.stationId = 1;
+  
+  // 处理证书扫描件路径
+  data.certificateScanPath = processCertificateScanPath(data);
+  
+  return data;
+}
+
+/**
+ * 处理证书扫描件路径
+ * @param data 表单数据
+ * @returns 处理后的路径字符串
+ */
+function processCertificateScanPath(data: any) {
+  // 直接使用 certificateScanPath 字段，上传时已设置为逗号分隔的 fileName 格式
+  let certificateScanPath = data.certificateScanPath || '';
+  
+  // 如果有 certificateScanPathUrl，优先使用其中的 name 构建 certificateScanPath
+  if (Array.isArray(data.certificateScanPathUrl) && data.certificateScanPathUrl.length > 0) {
+    // 检查是否有上传响应数据
+    if (data.certificateScanPathUrl[0].response) {
+      certificateScanPath = data.certificateScanPathUrl
+        .map((item: any) => item.response.data.fileName)
+        .join(',');
+    } else if (data.certificateScanPathUrl[0].name) {
+      // 检查是否有 name 属性
+      certificateScanPath = data.certificateScanPathUrl
+        .map((item: any) => item.name)
+        .join(',');
+    }
+  }
+  
+  return certificateScanPath;
+}
+
+/**
+ * 构建提交数据
+ * @param data 处理后的数据
+ * @returns 提交数据对象
+ */
+function buildSubmitData(data: any) {
+  return {
+    // 基础字段
+    id: data.id,
+    licenseNameCode: data.licenseNameCode || data.certificateName,
+    licenseRuleId: data.licenseRuleId || data.licenseRule,
+    licenseName: data.licenseName || data.licenseNameCode,
+    orgTypeCode: data.orgTypeCode || data.organizationType,
+    issuingAuthority: data.issuingAuthority,
+    issueDate: data.issueDate,
+    certificateNumber: data.certificateNumber || data.certificateNo,
+    storageLocationCode: data.storageLocationCode || data.storageLocation,
+    renewalRequirements: data.renewalRequirements || data.replacementRequirements,
+    statusCode: data.statusCode || data.status,
+    validDate: data.validDate,
+    isLongTerm: data.isLongTerm,
+    stationId: data.stationId,
+    // 只传 certificateScanPath，字符串逗号隔开
+    certificateScanPath: data.certificateScanPath || '',
+  };
+}
+
+// 获取初始字典数据，确保表单加载时有默认选项
+onMounted(() => {
+  // 字典数据会在表单schema中动态获取，这里只是为了确保组件挂载时有初始数据
+  getDictOptionsByKey(DICT_KEYS.ID_PAPERS_NAME);
+  getDictOptionsByKey(DICT_KEYS.ID_PAPERS_ORGANIZATION);
+  getDictOptionsByKey(DICT_KEYS.ID_PAPERS_STORAGE);
+  getDictOptionsByKey(DICT_KEYS.STATUS);
+});
 </script>
 
 <template>
   <Drawer :title="isUpdateRef ? '编辑证照' : '新增证照'">
-    <Form>
-      <!-- 自定义Upload组件插槽 -->
-      <!-- <template #certificateScanPath="scope">
-        <ElUpload
-          v-model:file-list="scope.modelValue"
-          action="#"
-          multiple
-          accept=".jpg,.jpeg,.png,.pdf"
-          list-type="picture-card"
-          show-file-list
-          :auto-upload="true"
-          :drag="false"
-          :http-request="handleUpload"
-          :on-remove="handleRemove"
-          :on-preview="handlePreview"
-        >
-          <div>
-            <ElIcon class="el-upload__icon">
-              <Plus size="30" />
-            </ElIcon>
-          </div>
-        </ElUpload>
-      </template> -->
-    </Form>
+    <Form />
   </Drawer>
 </template>

apps/web-ele/src/views/system/infoEntry/emergencyInfo/emergencyInfo-data.tsx

@@ -29,7 +29,7 @@ const getAreaList = async () => {
 // 获取片区名称
 const getAreaName = (areaId: string | number) => {
   const area = areaList.find(item => item.id === areaId);
-  return area ? area.areaName : areaId;
+  return area ? area.stationName : areaId;
 };
 
 // 导出获取片区列表的函数
@@ -49,7 +49,7 @@ export const queryFormSchema: FormSchemaGetter = () => [
         const data = resp || [];
         return Array.isArray(data)
           ? data.map((item: any) => ({
-              label: item.areaName,
+              label: item.stationName,
               value: item.id,
             }))
           : [];
@@ -150,7 +150,7 @@ export const drawerFormSchema: FormSchemaGetter = () => [
         const data = resp || [];
         return Array.isArray(data)
           ? data.map((item: any) => ({
-              label: item.areaName,
+              label: item.stationName,
               value: item.id,
             }))
           : [];

apps/web-ele/src/views/workflow/leave/leave-form.vue

@@ -0,0 +1,197 @@
+<!--
+这个文件用不上  已经更改交互为drawer
+-->
+
+<script setup lang="ts">
+import type { StartWorkFlowReqData } from '#/api/workflow/task/model';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+// import { Card, Spin } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { cloneDeep, omit } from 'lodash-es';
+
+import { useVbenForm } from '#/adapter/form';
+import { startWorkFlow } from '#/api/workflow/task';
+
+import { applyModal } from '../components';
+import {
+  leaveAdd,
+  leaveInfo,
+  leaveUpdate,
+  submitAndStartWorkflow,
+} from './api';
+import { formSchema } from './data';
+
+const route = useRoute();
+const id = route.query?.id as string;
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 100,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: formSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const loading = ref(false);
+onMounted(async () => {
+  // 只读 获取信息赋值
+  if (id) {
+    loading.value = true;
+
+    const resp = await leaveInfo(id);
+    await formApi.setValues(resp);
+    const dateRange = [dayjs(resp.startDate), dayjs(resp.endDate)];
+    await formApi.setFieldValue('dateRange', dateRange);
+
+    loading.value = false;
+  }
+});
+
+const router = useRouter();
+
+/**
+ * 获取已经处理好的表单参数
+ */
+async function getFormData() {
+  let data = cloneDeep(await formApi.getValues()) as any;
+  data = omit(data, 'flowType', 'type');
+  // 处理日期
+  data.startDate = dayjs(data.dateRange[0]).format('YYYY-MM-DD HH:mm:ss');
+  data.endDate = dayjs(data.dateRange[1]).format('YYYY-MM-DD HH:mm:ss');
+  return data;
+}
+
+/**
+ * 暂存/提交 提取通用逻辑
+ */
+async function handleSaveOrUpdate() {
+  const data = await getFormData();
+  if (id) {
+    data.id = id;
+    return await leaveUpdate(data);
+  } else {
+    return await leaveAdd(data);
+  }
+}
+
+const [ApplyModal, applyModalApi] = useVbenModal({
+  connectedComponent: applyModal,
+});
+/**
+ * 暂存 草稿状态
+ */
+async function handleTempSave() {
+  try {
+    await handleSaveOrUpdate();
+    router.push('/demo/leave');
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+/**
+ * 保存业务 & 发起流程
+ */
+async function handleStartWorkFlow() {
+  loading.value = true;
+  try {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 获取发起类型
+    const { type } = await formApi.getValues();
+    /**
+     * 这里只是demo 实际只会用到一种
+     */
+    switch (type) {
+      // 后端发起流程
+      case 'backend': {
+        const data = await getFormData();
+        await submitAndStartWorkflow(data);
+        await handleCompleteOrCancel();
+        break;
+      }
+      // 前端发起流程
+      case 'frontend': {
+        // 保存业务
+        const leaveResp = await handleSaveOrUpdate();
+        // 启动流程
+        const taskVariables = {
+          leaveDays: leaveResp!.leaveDays,
+          userList: ['1', '3', '4'],
+        };
+        const formValues = await formApi.getValues();
+        const flowCode = formValues?.flowType ?? 'leave1';
+        const startWorkFlowData: StartWorkFlowReqData = {
+          businessId: leaveResp!.id,
+          flowCode,
+          variables: taskVariables,
+          flowInstanceBizExtBo: {
+            businessTitle: '请假申请 - 自定义标题',
+            businessCode: leaveResp!.applyCode,
+          },
+        };
+        const { taskId } = await startWorkFlow(startWorkFlowData);
+        // 打开窗口
+        applyModalApi.setData({
+          taskId,
+          taskVariables,
+          variables: {},
+        });
+        applyModalApi.open();
+        break;
+      }
+    }
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+const { closeCurrentTab } = useTabs();
+
+/**
+ * 通用提交/取消回调
+ *
+ * 提交后点击取消 这时候已经变成草稿状态了
+ * 每次点击都会生成新记录 直接跳转回列表
+ */
+async function handleCompleteOrCancel() {
+  formApi.resetForm();
+  await closeCurrentTab();
+  router.push('/demo/leave');
+}
+</script>
+
+<template>
+  <Spin :spinning="loading">
+    <Card>
+      <BasicForm />
+      <div class="flex justify-end gap-2">
+        <a-button @click="handleTempSave">暂存</a-button>
+        <a-button type="primary" @click="handleStartWorkFlow">提交</a-button>
+      </div>
+      <ApplyModal
+        :modal-api="applyModalApi"
+        @complete="handleCompleteOrCancel"
+        @cancel="handleCompleteOrCancel"
+      />
+    </Card>
+  </Spin>
+</template>

apps/web-ele/src/views/workflow/leave/leaveEdit.vue

@@ -0,0 +1,42 @@
+<!--
+后端版本>=5.4.0  这个从本地路由变为从后台返回
+未修改文件名 而是新加了这个文件
+-->
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useTabs } from '@vben/hooks';
+
+// import { Spin } from 'ant-design-vue';
+import { useQueryId } from './hook';
+
+const router = useRouter();
+const route = useRoute();
+const id = route.query.id as string;
+
+/**
+ * 从我的任务 -> 点击重新编辑会跳转到这里
+ * 相当于一个中转 因为我的任务无法获取到列表页的路径(与ele交互不同)
+ *
+ * 为什么不使用路由的query来实现?
+ * 因为刷新后参数不会丢失 且tab存的也是全路径 切换也不会丢失 这不符合预期
+ * 可以通过window.history.replaceState来删除query参数 但是tab切换还是会保留
+ */
+const { closeCurrentTab } = useTabs();
+const { businessId } = useQueryId();
+onMounted(async () => {
+  await closeCurrentTab();
+  if (id) {
+    // 设置业务ID 存储在内存
+    businessId.value = id;
+    router.push({ path: '/demo/leave' });
+  }
+});
+</script>
+
+<template>
+  <div>
+    <Spin :spinning="true" />
+  </div>
+</template>

apps/web-ele/src/views/workflow/task/allTaskWaiting.vue

@@ -18,7 +18,6 @@ import {
   ElPopover,
   ElTooltip,
 } from 'element-plus';
-
 import { cloneDeep, debounce, uniqueId } from 'lodash-es';
 
 import { categoryTree } from '#/api/workflow/category';