油站信息

apps/web-ele/src/adapter/component/index.ts

@@ -180,18 +180,8 @@ async function initComponentAdapter() {
             options.map((option, index) => {
               // 确保每个选项都有正确的value和label属性
               const optionProps = {
-                label:
-                  option.value === undefined
-                    ? option.label === undefined
-                      ? option
-                      : option.label)
-                    : option.value,
-                value:
-                  option.value === undefined
-                    ? option.label === undefined
-                      ? option
-                      : option.label)
-                    : option.value,
+                label: option.value === undefined ? option.label === undefined ? option : option.label : option.value,
+                value: option.value === undefined ? option.label === undefined ? option : option.label : option.value,
                 ...option,
               };
               return h(isButton ? ElRadioButton : ElRadio, optionProps);

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

@@ -0,0 +1,78 @@
+import type { DistrictInfoModel } from './model';
+
+import type { BaseResult } from '#/api/base-result';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+// API路径常量枚举
+enum Api {
+  // 导出
+  export = '/sysStationArea/area/export',
+  // 列表查询
+  list = '/sysStationArea/area/list',
+  // 基础路径
+  root = '/sysStationArea/area',
+}
+
+/**
+ * 查询片区信息列表
+ * @param params 查询参数
+ * @returns 分页结果
+ */
+export function districtInfoList(params: any) {
+  return requestClient.get<BaseResult<DistrictInfoModel[]>>(Api.list, {
+    params,
+  });
+}
+
+/**
+ * 获取片区信息详细信息
+ * @param id 片区信息ID
+ * @returns 片区信息详情
+ */
+export function getDistrictInfoDetail(id: number) {
+  return requestClient.get<DistrictInfoModel>(`${Api.root}/${id}`);
+}
+
+/**
+ * 新增片区信息
+ * @param data 片区信息数据
+ * @returns 操作结果
+ */
+export function addDistrictInfo(data: DistrictInfoModel) {
+  return requestClient.post(Api.root, data, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 修改片区信息
+ * @param data 片区信息数据
+ * @returns 操作结果
+ */
+export function updateDistrictInfo(data: DistrictInfoModel) {
+  return requestClient.put(Api.root, data, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 删除片区信息
+ * @param ids 片区信息ID数组
+ * @returns 操作结果
+ */
+export function deleteDistrictInfo(ids: number[]) {
+  return requestClient.delete(`${Api.root}/${ids.join(',')}`, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 导出片区信息列表
+ * @param data 导出参数
+ * @returns 导出结果
+ */
+export function exportDistrictInfo(data: Partial<DistrictInfoModel>) {
+  return commonExport(Api.export, data);
+}

apps/web-ele/src/api/system/infoEntry/districtInfo/model.ts

@@ -0,0 +1,18 @@
+export interface DistrictInfoModel {
+  // 主键ID
+  id?: number;
+  // 片区编码
+  areaCode?: string;
+  // 片区名称
+  areaName?: string;
+  // 详细地址
+  address?: string;
+  // 联系电话
+  contactPhone?: string;
+  // 片区负责人
+  manager?: string;
+  // 状态：0-禁用，1-启用
+  status?: number;
+  // 修改时间
+  updatedAt?: string;
+}

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

@@ -0,0 +1,18 @@
+export interface StationInfoModel {
+  // 主键ID
+  id?: number;
+  // 所属片区ID
+  areaId?: number;
+  // 创建人
+  createdBy?: string;
+  // 油站名称
+  stationName?: string;
+  // 状态：0-禁用，1-启用
+  status?: number;
+  // 场站类型编号
+  typeCode?: string;
+  // 修改时间
+  updateTime?: string;
+  // 创建时间
+  createTime?: string;
+}

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

@@ -0,0 +1,89 @@
+import type { StationInfoModel } from './model';
+
+import type { BaseResult } from '#/api/base-result';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+// API路径常量枚举
+enum Api {
+  // 导出
+  export = '/sysStation/station/export',
+  // 列表查询
+  list = '/sysStation/station/list',
+  // 基础路径
+  root = '/sysStation/station',
+  // 查询所有片区信息
+  selectAllSysStationList = '/sysStationArea/area/selectAllSysStationAreaList',
+}
+
+
+
+/**
+ * 查询所有油站信息
+ * @returns 油站列表
+ */
+export function selectAllSysStationAreaList() {
+  return requestClient.get<BaseResult<StationInfoModel[]>>(Api.selectAllSysStationList);
+}
+/**
+ * 查询油站信息列表
+ * @param params 查询参数
+ * @returns 分页结果
+ */
+export function stationInfoList(params: any) {
+  return requestClient.get<BaseResult<StationInfoModel[]>>(Api.list, {
+    params,
+  });
+}
+
+/**
+ * 获取油站详细信息
+ * @param id 油站ID
+ * @returns 油站详情
+ */
+export function getStationInfoDetail(id: number) {
+  return requestClient.get<StationInfoModel>(`${Api.root}/${id}`);
+}
+
+/**
+ * 新增油站
+ * @param data 油站数据
+ * @returns 操作结果
+ */
+export function addStationInfo(data: StationInfoModel) {
+  return requestClient.post(Api.root, data, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 修改油站
+ * @param data 油站数据
+ * @returns 操作结果
+ */
+export function updateStationInfo(data: StationInfoModel) {
+  return requestClient.put(Api.root, data, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 删除油站信息
+ * @param ids 油站ID数组
+ * @returns 操作结果
+ */
+export function deleteStationInfo(ids: number[]) {
+  return requestClient.delete(`${Api.root}/${ids.join(',')}`, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 导出油站信息列表
+ * @param data 导出参数
+ * @returns 导出结果
+ */
+export function exportStationInfo(data: Partial<StationInfoModel>) {
+  return commonExport(Api.export, data);
+}

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

@@ -0,0 +1,136 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+// 状态选项
+type StatusOption = { label: string; value: number };
+
+const getStatusOptions = (): StatusOption[] => [
+  { label: '启用', value: 1 },
+  { label: '禁用', value: 0 },
+];
+
+export const queryFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'areaName',
+    label: '片区',
+    componentProps: {
+      placeholder: '请输入片区名称',
+    },
+  },
+];
+
+export const tableColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 80,
+  },
+  {
+    field: 'areaName',
+    title: '片区名称',
+    minWidth: 150,
+  },
+  {
+    field: 'address',
+    title: '详细地址',
+    minWidth: 200,
+  },
+  {
+    field: 'contactPhone',
+    title: '联系电话',
+    minWidth: 120,
+  },
+  {
+    field: 'manager',
+    title: '片区负责人',
+    minWidth: 120,
+  },
+  {
+    field: 'status',
+    title: '状态',
+    minWidth: 100,
+    formatter: (params: { cellValue: number; column: any; row: any }) => {
+      if (params.cellValue === undefined || params.cellValue === null) {
+        return '-';
+      }
+      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: 'updatedAt',
+    title: '修改时间',
+    minWidth: 150,
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 150,
+  },
+];
+
+export const drawerFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+  },
+  {
+    component: 'Input',
+    fieldName: 'areaName',
+    label: '片区名称',
+    componentProps: {
+      placeholder: '请输入片区名称',
+      maxlength: 100,
+    },
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'address',
+    label: '详细地址',
+    componentProps: {
+      placeholder: '请输入详细地址',
+      maxlength: 200,
+    },
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'contactPhone',
+    label: '联系电话',
+    componentProps: {
+      placeholder: '请输入联系电话',
+      maxlength: 20,
+    },
+    rules: 'required'
+  },
+  {
+    component: 'Input',
+    fieldName: 'manager',
+    label: '片区负责人',
+    componentProps: {
+      placeholder: '请输入片区负责人',
+      maxlength: 20,
+    },
+    rules: 'required',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      options: getStatusOptions(),
+      isButton: true,
+    },
+    fieldName: 'status',
+    defaultValue: 1,
+    label: '状态',
+    required: false,
+  },
+];

apps/web-ele/src/views/system/infoEntry/districtInfo/districtInfo-drawer.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useVbenDrawer, useVbenForm } from '@vben/common-ui';
+
+import {
+  addDistrictInfo,
+  getDistrictInfoDetail,
+  updateDistrictInfo,
+} from '#/api/system/infoEntry/districtInfo/districtInfo';
+
+import { drawerFormSchema } from './districtInfo-data';
+
+const emit = defineEmits<{
+  reload: [];
+}>();
+
+const [Form, formApi] = useVbenForm({
+  showDefaultActions: false,
+  schema: drawerFormSchema(),
+});
+
+const isUpdateRef = ref<boolean>(false);
+const confirmLoading = 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 getDistrictInfoDetail(id);
+        console.log('获取片区详情数据:', res);
+        // 确保从正确的响应结构中获取数据
+        const detailData = res?.data || res;
+        await formApi.setValues(detailData);
+      }
+    } catch (error) {
+      console.error('获取片区详情失败:', error);
+    } finally {
+      drawerApi.drawerLoading(false);
+    }
+  },
+
+  async onConfirm() {
+    try {
+      confirmLoading.value = true;
+      const { valid } = await formApi.validate();
+      if (!valid) {
+        return;
+      }
+      const data = await formApi.getValues();
+      console.log('提交数据:', data);
+      await (isUpdateRef.value
+        ? updateDistrictInfo(data)
+        : addDistrictInfo(data));
+      emit('reload');
+      drawerApi.close();
+    } catch (error) {
+      console.error('保存片区信息失败:', error);
+    } finally {
+      confirmLoading.value = false;
+    }
+  },
+
+  onClosed() {
+    formApi.resetForm();
+  },
+});
+</script>
+
+<template>
+  <Drawer :title="isUpdateRef ? '编辑片区' : '新增片区'">
+    <Form />
+  </Drawer>
+</template>

apps/web-ele/src/views/system/infoEntry/districtInfo/index.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { ElMessageBox } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDistrictInfo,
+  districtInfoList,
+  exportDistrictInfo,
+} from '#/api/system/infoEntry/districtInfo/districtInfo';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { queryFormSchema, tableColumns } from './districtInfo-data';
+import DistrictInfoDrawerComp from './districtInfo-drawer.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: queryFormSchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    highlight: true,
+    reserve: true,
+    trigger: 'default',
+  },
+  columns: tableColumns,
+  size: 'medium',
+  height: 'auto',
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        const resp = await districtInfoList({
+          ...formValues,
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+        });
+        return { items: resp.data?.rows || resp.rows || [], total: resp.data?.total || resp.total || 0 };
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  toolbarConfig: {
+    custom: true,
+    refresh: true,
+    zoom: true,
+  },
+  id: 'system-districtInfo-index',
+};
+
+const [BasicTable, basicTableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [DistrictInfoDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: DistrictInfoDrawerComp,
+});
+
+// 状态选项
+const statusOptions = ref([
+  { label: '启用', value: 1 },
+  { label: '禁用', value: 0 },
+]);
+
+// 新增片区
+function openDrawer() {
+  drawerApi.setData({ isUpdate: false }).open();
+}
+
+// 编辑片区
+function handleEdit(row: any) {
+  drawerApi.setData({ ...row, isUpdate: true }).open();
+}
+
+// 单个删除片区
+async function confirmEvent(row: any) {
+  await deleteDistrictInfo([row.id]);
+  await basicTableApi.reload();
+}
+
+// 批量删除片区
+function deleteHandle() {
+  const checkRecords = basicTableApi.grid.getCheckboxRecords();
+  const ids = checkRecords.map((item: any) => item.id);
+  if (ids.length <= 0) {
+    return;
+  }
+
+  ElMessageBox.confirm(`确认删除选中的${ids.length}条数据吗?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    await deleteDistrictInfo(ids);
+    await basicTableApi.reload();
+  });
+}
+
+// 导出片区数据
+async function exportHandle() {
+  await commonDownloadExcel(
+    exportDistrictInfo,
+    '片区信息数据',
+    basicTableApi.formApi.form.values
+  );
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="片区信息列表">
+      <template #toolbar-tools>
+        <el-space>
+          <el-button
+            @click="exportHandle"
+            v-access:code="['system:districtInfo:export']"
+          >
+            导出
+          </el-button>
+          <el-button
+            type="danger"
+            :disabled="
+              !(basicTableApi?.grid?.getCheckboxRecords?.()?.length > 0)
+            "
+            @click="deleteHandle"
+            v-access:code="['system:districtInfo:remove']"
+          >
+            批量删除
+          </el-button>
+          <el-button
+            type="primary"
+            @click="openDrawer"
+            v-access:code="['system:districtInfo:add']"
+          >
+            新增片区
+          </el-button>
+        </el-space>
+      </template>
+      <template #action="{ row }">
+        <el-space>
+          <el-button
+            size="small"
+            type="primary"
+            plain
+            @click="handleEdit(row)"
+            v-access:code="['system:districtInfo:edit']"
+          >
+            编辑
+          </el-button>
+          <el-popconfirm title="确认删除" @confirm="confirmEvent(row)">
+            <template #reference>
+              <el-button
+                size="small"
+                type="danger"
+                plain
+                v-access:code="['system:districtInfo:remove']"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-popconfirm>
+        </el-space>
+      </template>
+    </BasicTable>
+    <DistrictInfoDrawer @reload="basicTableApi.reload()" />
+  </Page>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-tooltip__trigger:focus) {
+  outline: none;
+}
+</style>

apps/web-ele/src/views/system/infoEntry/stationInfo/index.vue

@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { onMounted, ref, computed } from 'vue';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { ElMessageBox } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteStationInfo, exportStationInfo, stationInfoList, selectAllSysStationAreaList } from '#/api/system/infoEntry/stationInfo/stationInfo';
+import { getDictOptions } from '#/utils/dict';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { queryFormSchema, tableColumns } from './stationInfo-data';
+import StationInfoDrawerComp from './stationInfo-drawer.vue';
+
+// 字典标识常量
+const DICT_KEYS = {
+  // 状态字典标识
+  STATUS: 'status',
+  // 场站类型字典标识
+  STATION_TYPE: 'station_type',
+};
+
+// 片区列表选项
+const areaOptions = ref<any[]>([]);
+// 场站类型选项
+const stationTypeOptions = ref<any[]>([]);
+// 状态选项
+const statusOptions = ref<any[]>([]);
+
+// 创建响应式的表单选项，方便后续更新
+const formOptions = ref<VbenFormProps>({
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: queryFormSchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+});
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    highlight: true,
+    reserve: true,
+    trigger: 'default',
+  },
+  columns: tableColumns,
+  size: 'medium',
+  height: 'auto',
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        const resp = await stationInfoList({
+          ...formValues,
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+        });
+        return { 
+          items: resp?.rows || [], 
+          total: resp?.total || 0 
+        };
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  toolbarConfig: {
+    custom: true,
+    refresh: true,
+    zoom: true,
+  },
+  id: 'system-infoEntry-stationInfo-index',
+};
+
+const [BasicTable, basicTableApi] = useVbenVxeGrid({
+  formOptions: formOptions.value,
+  gridOptions,
+});
+
+const [StationInfoDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: StationInfoDrawerComp,
+  props: {
+    areaOptions: computed(() => areaOptions.value),
+  },
+});
+
+// 根据areaId获取片区名称
+const getAreaName = (areaId: number) => {
+  const area = areaOptions.value.find((item) => item.value === areaId);
+  return area ? area.label : areaId || '';
+};
+
+// 根据typeCode获取场站类型名称
+const getStationTypeName = (typeCode: string) => {
+  const type = stationTypeOptions.value.find((item) => item.value === typeCode);
+  return type ? type.label : typeCode;
+};
+
+// 根据status获取状态名称
+const getStatusName = (status: number) => {
+  const statusItem = statusOptions.value.find((item) => String(item.value) === String(status));
+  return statusItem ? statusItem.label : status;
+};
+
+// 加载字典和片区数据
+const loadData = async () => {
+  try {
+    // 获取片区列表
+    const areaListResp = await selectAllSysStationAreaList();
+    areaOptions.value = (areaListResp?.data || []).map((item: any) => ({
+      label: item.areaName,
+      value: item.id,
+    }));
+    
+    // 更新表单中的片区选项
+    // 使用响应式方式更新schema
+    const updatedSchema = [...formOptions.value.schema];
+    const areaFieldIndex = updatedSchema.findIndex((item) => item.fieldName === 'areaId');
+    if (areaFieldIndex !== -1) {
+      updatedSchema[areaFieldIndex] = {
+        ...updatedSchema[areaFieldIndex],
+        componentProps: {
+          ...updatedSchema[areaFieldIndex].componentProps,
+          options: areaOptions.value,
+        },
+      };
+      formOptions.value = {
+        ...formOptions.value,
+        schema: updatedSchema,
+      };
+    }
+    
+    // 获取字典数据
+    stationTypeOptions.value = getDictOptions(DICT_KEYS.STATION_TYPE) || [];
+    statusOptions.value = getDictOptions(DICT_KEYS.STATUS) || [
+      { label: '启用', value: '1' },
+      { label: '禁用', value: '0' },
+    ];
+  } catch (error) {
+    console.error('加载数据失败:', error);
+  }
+};
+
+onMounted(() => {
+  loadData();
+});
+
+// 新增场站
+function openDrawer() {
+  drawerApi.setData({ isUpdate: false }).open();
+}
+
+// 编辑场站
+function handleEdit(row: any) {
+  drawerApi.setData({ ...row, isUpdate: true }).open();
+}
+
+// 单个删除场站
+async function confirmEvent(row: any) {
+  await deleteStationInfo([row.id]);
+  await basicTableApi.reload();
+}
+
+// 批量删除场站
+function deleteHandle() {
+  const checkRecords = basicTableApi.grid.getCheckboxRecords();
+  const ids = checkRecords.map((item: any) => item.id);
+  if (ids.length <= 0) {
+    return;
+  }
+
+  ElMessageBox.confirm(`确认删除选中的${ids.length}条数据吗?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    await deleteStationInfo(ids);
+    await basicTableApi.reload();
+  });
+}
+
+// 导出场站数据
+async function exportHandle() {
+  await commonDownloadExcel(
+    exportStationInfo,
+    '场站信息数据',
+    basicTableApi.formApi.form.values,
+    {}
+  );
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="场站信息列表">
+      <template #toolbar-tools>
+        <ElSpace>
+          <ElButton
+            @click="exportHandle"
+            v-access:code="['system:infoEntry:stationInfo:export']"
+          >
+            导出
+          </ElButton>
+          <ElButton
+            type="danger"
+            :disabled="
+              !(basicTableApi?.grid?.getCheckboxRecords?.()?.length > 0)
+            "
+            @click="deleteHandle"
+            v-access:code="['system:infoEntry:stationInfo:remove']"
+          >
+            批量删除
+          </ElButton>
+          <ElButton
+            type="primary"
+            @click="openDrawer"
+            v-access:code="['system:infoEntry:stationInfo:add']"
+          >
+            新增场站
+          </ElButton>
+        </ElSpace>
+      </template>
+      <template #areaId="{ row }">
+        <span>{{ getAreaName(row.areaId) }}</span>
+      </template>
+      <template #typeCode="{ row }">
+        <ElTag>{{ getStationTypeName(row.typeCode) }}</ElTag>
+      </template>
+      <template #status="{ row }">
+        <ElTag
+          :type="row.status === 1 ? 'success' : 'danger'"
+        >
+          {{ getStatusName(row.status) }}
+        </ElTag>
+      </template>
+      <template #action="{ row }">
+        <ElSpace>
+          <ElButton
+            size="small"
+            type="primary"
+            plain
+            @click="handleEdit(row)"
+            v-access:code="['system:infoEntry:stationInfo:edit']"
+          >
+            编辑
+          </ElButton>
+          <ElPopconfirm title="确认删除" @confirm="confirmEvent(row)">
+            <template #reference>
+              <ElButton
+                size="small"
+                type="danger"
+                plain
+                v-access:code="['system:infoEntry:stationInfo:remove']"
+              >
+                删除
+              </ElButton>
+            </template>
+          </ElPopconfirm>
+        </ElSpace>
+      </template>
+    </BasicTable>
+    <StationInfoDrawer
+      :area-options="areaOptions"
+      @reload="basicTableApi.reload()"
+    />
+  </Page>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-tooltip__trigger:focus) {
+  outline: none;
+}
+</style>

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

@@ -0,0 +1,193 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getDictOptions } from '#/utils/dict';
+import { selectAllSysStationAreaList } from '#/api/system/infoEntry/stationInfo/stationInfo';
+
+// 字典标识常量
+const DICT_KEYS = {
+  // 状态字典标识
+  STATUS: 'status',
+  // 场站类型字典标识
+  STATION_TYPE: 'station_type',
+};
+
+// 获取状态字典选项
+const getStatusOptions = () =>
+  getDictOptions(DICT_KEYS.STATUS) || [
+    { label: '启用', value: '1' },
+    { label: '禁用', value: '0' },
+  ];
+
+// 获取场站类型字典选项
+const getStationTypeOptions = () =>
+  getDictOptions(DICT_KEYS.STATION_TYPE) || [];
+
+// 获取片区列表选项
+const getAreaOptions = async () => {
+  try {
+    const resp = await selectAllSysStationAreaList();
+    console.log('获取片区列表响应:', resp);
+    // 确保正确处理响应数据结构
+    const data = resp || resp || [];
+    return Array.isArray(data) ? data.map((item: any) => ({
+      label: item.areaName,
+      value: item.id,
+    })) : [];
+  } catch (error) {
+    console.error('获取片区列表失败:', error);
+    return [];
+  }
+};
+
+// 查询表单schema
+export const queryFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'stationName',
+    label: '场站名称',
+    componentProps: {
+      placeholder: '请输入场站名称',
+    },
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择所属片区',
+      options: [], // 将在组件中动态加载
+    },
+    fieldName: 'areaId',
+    label: '所属片区',
+  },
+];
+
+// 表格列配置
+export const tableColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 80,
+  },
+  {
+    field: 'stationName',
+    title: '场站名称',
+    minWidth: 150,
+  },
+  {
+    field: 'areaId',
+    title: '所属片区',
+    minWidth: 120,
+    // 修改后
+    slots: 'areaId', // 使用插槽进行格式化，避免在formatter中进行异步操作
+    // formatter函数不应该包含异步操作，保留基本功能
+    formatter: (params: { cellValue: number; column: any; row: any }) => {
+      // 这里将在index.vue中通过插槽进行实际格式化
+      const options = getAreaOptions();
+      console.log('areaId 格式化选项:', options);
+      const option = options.find((item) => item.value === params.cellValue);
+      return option ? option.label : params.cellValue;
+    },
+  },
+  {
+    field: 'typeCode',
+    title: '场站类型',
+    minWidth: 120,
+    formatter: (params: { cellValue: string; column: any; row: any }) => {
+      const options = getStationTypeOptions();
+      const option = options.find((item) => item.value === params.cellValue);
+      return option ? option.label : params.cellValue;
+    },
+  },
+  {
+    field: 'status',
+    title: '状态',
+    minWidth: 100,
+    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: 'createTime',
+    title: '创建时间',
+    minWidth: 150,
+  },
+  {
+    field: 'updateTime',
+    title: '修改时间',
+    minWidth: 150,
+  },
+  {
+    field: 'createdBy',
+    title: '创建人',
+    minWidth: 100,
+  },
+  {
+    field: 'updatedBy',
+    title: '更新人',
+    minWidth: 100,
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 150,
+  },
+];
+
+// 抽屉表单schema
+export const drawerFormSchema: FormSchemaGetter = () => [
+   {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+  },
+  {
+    component: 'Input',
+    fieldName: 'stationName',
+    label: '场站名称',
+    componentProps: {
+      placeholder: '请输入场站名称',
+      maxlength: 100,
+    },
+    rules: 'required',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择所属片区',
+      options: [], // 将在组件中动态加载，不要在schema定义中使用异步操作
+    },
+    fieldName: 'areaId',
+    label: '所属片区',
+    rules: 'required',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择场站类型',
+      options: getStationTypeOptions(),
+    },
+    fieldName: 'typeCode',
+    label: '场站类型',
+    rules: 'required',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
+      ],
+      isButton: true,
+    },
+    fieldName: 'status',
+    defaultValue: 1,
+    label: '状态',
+  },
+];

apps/web-ele/src/views/system/infoEntry/stationInfo/stationInfo-drawer.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { onMounted, ref, nextTick } from 'vue';
+import { useVbenDrawer, useVbenForm } from '@vben/common-ui';
+
+import { addStationInfo, getStationInfoDetail, updateStationInfo, selectAllSysStationAreaList } from '#/api/system/infoEntry/stationInfo/stationInfo';
+import { drawerFormSchema } from './stationInfo-data';
+
+const emit = defineEmits<{
+  reload: [];
+}>();
+
+const confirmLoading = ref(false);
+const isUpdateRef = ref<boolean>(false);
+
+// 获取片区列表的函数，将在index.vue中传入
+const props = defineProps<{
+  areaOptions?: any[];
+}>();
+
+// 本地片区选项缓存
+const localAreaOptions = ref<any[]>([]);
+
+// 创建响应式schema引用
+const formSchema = ref(drawerFormSchema());
+
+const [Form, formApi] = useVbenForm({
+  showDefaultActions: false,
+  schema: formSchema.value,
+  autoSubmitOnEnter: false,
+});
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return;
+    }
+    try {
+      drawerApi.drawerLoading(true);
+      const { id, isUpdate } = drawerApi.getData();
+      isUpdateRef.value = isUpdate;
+      
+      // 加载片区选项
+      await loadAreaOptions();
+      
+      if (isUpdate && id) {
+        const res = await getStationInfoDetail(id);
+        const detailData = res;
+        await formApi.setValues(detailData);
+      } else {
+        await formApi.resetForm();
+        await nextTick();
+        await formApi.setValueByField('status', 1); // 默认启用状态
+      }
+    } catch (error) {
+      console.error('获取场站详情失败:', error);
+    } finally {
+      drawerApi.drawerLoading(false);
+    }
+  },
+
+  async onConfirm() {
+    try {
+      confirmLoading.value = true;
+      const { valid } = await formApi.validate();
+      if (!valid) {
+        return;
+      }
+      const data = await formApi.getValues();
+      
+      console.log('提交数据:', data);
+      await (isUpdateRef.value
+        ? updateStationInfo(data)
+        : addStationInfo(data));
+      emit('reload');
+      drawerApi.close();
+    } catch (error) {
+      console.error('保存场站信息失败:', error);
+    } finally {
+      confirmLoading.value = false;
+    }
+  },
+
+  onClosed() {
+    formApi.resetForm();
+  },
+});
+
+// 加载片区选项
+const loadAreaOptions = async () => {
+  try {
+    // 优先使用props传入的选项，如果没有则从API获取
+    if (props.areaOptions && props.areaOptions.length > 0) {
+      localAreaOptions.value = props.areaOptions;
+    } else {
+      const resp = await selectAllSysStationAreaList();
+      console.log('获取片区列表响应:', resp);
+      
+      // 确保正确处理响应数据结构
+      const data = resp || resp || [];
+      localAreaOptions.value = Array.isArray(data) ? data.map((item: any) => ({
+        label: item.areaName,
+        value: item.id,
+      })) : [];
+      console.log('转换后的片区选项:', localAreaOptions.value);
+    }
+    
+    // 更新表单中的片区选项
+    const schema = formApi.getSchema();
+    const areaField = schema.find((item) => item.fieldName === 'areaId');
+    if (areaField) {
+      areaField.componentProps.options = localAreaOptions.value;
+    }
+  } catch (error) {
+    console.error('加载片区选项失败:', error);
+  }
+};
+
+// 监听props变化，更新表单选项
+const updateOptions = async () => {
+  await loadAreaOptions();
+};
+
+onMounted(async () => {
+  await updateOptions();
+});
+</script>
+
+<template>
+  <Drawer :title="isUpdateRef ? '编辑场站' : '新增场站'" :confirm-loading="confirmLoading">
+    <Form />
+  </Drawer>
+</template>