7 changed files with 739 additions and 1025 deletions
--- a/src/api/admin/AlarmApi.ts
+++ b/src/api/admin/AlarmApi.ts
@ -1,126 +0,0 @@
 /* eslint-disable */
 /* tslint:disable */
 /*
 * ---------------------------------------------------------------
 * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
 * ##                                                           ##
 * ## AUTHOR: adademo / https://github.com/adademo/swagger-typescript-api ##
 * ## SOURCE: https://github.com/adademo/swagger-typescript-api ##
 * ---------------------------------------------------------------
 */
 import {
  AlarmAddInput,
  AlarmUpdateInput,
  PageInputAlarmGetPageInput,
  ResultOutputAlarmGetOutput,
  ResultOutputPageOutputAlarmGetPageOutput,
  ResultOutputInt64,
 } from './data-contracts';
 import { ContentType, HttpClient, RequestParams } from './http-client';
 import { AxiosResponse } from 'axios';
 export class AlarmApi<SecurityDataType = unknown> extends HttpClient<SecurityDataType> {
  /**
   * @description No description
   * @tags Alarm - 报警器管理
   * @name Get
   * @summary 查询报警器
   * @request GET:/api/admin/usp-alarm/get
   * @secure
   */
  get = (
    query?: {
      /** @format int64 */
      id?: number;
    },
    params: RequestParams = {}
  ) =>
    this.request<ResultOutputAlarmGetOutput, any>({
      path: `/api/admin/usp-alarm/get`,
      method: 'GET',
      query: query,
      secure: true,
      format: 'json',
      ...params,
    });
  /**
   * @description No description
   * @tags Alarm - 报警器管理
   * @name GetPage
   * @summary 查询报警器分页
   * @request POST:/api/admin/usp-alarm/get-page
   * @secure
   */
  getPage = (data: PageInputAlarmGetPageInput, params: RequestParams = {}) =>
    this.request<ResultOutputPageOutputAlarmGetPageOutput, any>({
      path: `/api/admin/usp-alarm/get-page`,
      method: 'POST',
      body: data,
      secure: true,
      type: ContentType.Json,
      format: 'json',
      ...params,
    });
  /**
   * @description No description
   * @tags Alarm - 报警器管理
   * @name Add
   * @summary 新增报警器
   * @request POST:/api/admin/usp-alarm/add
   * @secure
   */
  add = (data: AlarmAddInput, params: RequestParams = {}) =>
    this.request<ResultOutputInt64, any>({
      path: `/api/admin/usp-alarm/add`,
      method: 'POST',
      body: data,
      secure: true,
      type: ContentType.Json,
      format: 'json',
      ...params,
    });
  /**
   * @description No description
   * @tags Alarm - 报警器管理
   * @name Update
   * @summary 修改报警器
   * @request PUT:/api/admin/usp-alarm/update
   * @secure
   */
  update = (data: AlarmUpdateInput, params: RequestParams = {}) =>
    this.request<AxiosResponse, any>({
      path: `/api/admin/usp-alarm/update`,
      method: 'PUT',
      body: data,
      secure: true,
      type: ContentType.Json,
      ...params,
    });
  /**
   * @description No description
   * @tags Alarm - 报警器管理
   * @name SoftDelete
   * @summary 删除报警器
   * @request DELETE:/api/admin/usp-alarm/soft-delete
   * @secure
   */
  softDelete = (
    query?: {
      /** @format int64 */
      id?: number;
    },
    params: RequestParams = {}
  ) =>
    this.request<AxiosResponse, any>({
      path: `/api/admin/usp-alarm/soft-delete`,
      method: 'DELETE',
      query: query,
      secure: true,
      ...params,
    });
 }
--- a/src/api/admin/data-contracts.ts
+++ b/src/api/admin/data-contracts.ts
@ -7295,180 +7295,3 @@ export interface FeedingConfigGetListOutput {
  /** 启用状态 */
  enabled?: boolean
 }
 /** 报警器分页 */
 export interface PageOutputAlarmGetPageOutput {
  /**
   * 数据总数
   * @format int64
   */
  total?: number;
  /** 数据 */
  list?: AlarmGetPageOutput[] | null;
 }
 // ===================================================
 // 报警器管理
 // ===================================================
 /** 添加报警器 */
 export interface AlarmAddInput {
  /** 设备编号 */
  deviceNo?: string | null;
  /** 资产编号 */
  assetNo?: string | null;
  /** 房间ID */
  roomId?: number;
  /** IP地址 */
  ip?: string | null;
  /** 端口 */
  port?: string | null;
  /** 服务名称 */
  serviceName?: string | null;
  /** 启用状态 */
  status?: boolean;
  /** 运行状态 */
  isRuning?: number;
 }
 /** 修改报警器 */
 export interface AlarmUpdateInput {
  /**
   * 主键Id
   * @format int64
   */
  id: number;
  /** 设备编号 */
  deviceNo?: string | null;
  /** 资产编号 */
  assetNo?: string | null;
  /** 房间ID */
  roomId?: number;
  /** IP地址 */
  ip?: string | null;
  /** 端口 */
  port?: string | null;
  /** 服务名称 */
  serviceName?: string | null;
  /** 启用状态 */
  status?: boolean;
  /** 运行状态 */
  isRuning?: number;
 }
 /** 报警器分页查询条件 */
 export interface AlarmGetPageInput {
  /** 关键词 */
  keyWord?: string | null;
 }
 /** 报警器信息 */
 export interface AlarmGetOutput {
  /**
   * 主键Id
   * @format int64
   */
  id: number;
  /** 设备编号 */
  deviceNo?: string | null;
  /** 资产编号 */
  assetNo?: string | null;
  /** 房间ID */
  roomId?: number;
  /** IP地址 */
  ip?: string | null;
  /** 端口 */
  port?: string | null;
  /** 服务名称 */
  serviceName?: string | null;
  /** 启用状态 */
  status?: boolean;
  /** 运行状态 */
  isRunning?: number;
 }
 /** 报警器分页信息 */
 export interface AlarmGetPageOutput {
   /**
   * 编号
   * @format int64
   */
  id?: number;
  /** 设备编号 */
  deviceNo?: string | null;
  /** 资产编号 */
  assetNo?: string | null;
  /** 房间ID */
  roomId?: number;
  /** IP地址 */
  ip?: string | null;
  /** 端口 */
  port?: string | null;
  /** 服务名称 */
  serviceName?: string | null;
  /** 启用状态 */
  status?: boolean;
  /** 运行状态 */
  isRunning?: number;
  /** 创建者 */
  createdUserName?: string | null;
  /**
   * 创建时间
   * @format date-time
   */
  createdTime?: string | null;
 }
 /** 报警器分页查询 */
 export interface PageInputAlarmGetPageInput {
  dynamicFilter?: DynamicFilterInfo;
  /** 排序列表 */
  sortList?: SortInput[] | null;
  /**
   * 当前页标
   * @format int32
   */
  currentPage?: number;
  /**
   * 每页大小
   * @format int32
   */
  pageSize?: number;
  /** 分页请求 */
  filter?: AlarmGetPageInput;
 }
 /** 单条报警器查询结果 */
 export interface ResultOutputAlarmGetOutput {
  /** 是否成功标记 */
  success?: boolean;
  /** 编码 */
  code?: string | null;
  /** 消息 */
  msg?: string | null;
  /** 报警器信息 */
  data?: AlarmGetOutput;
 }
 /** 报警器分页查询结果 */
 export interface ResultOutputPageOutputAlarmGetPageOutput {
  /** 是否成功标记 */
  success?: boolean;
  /** 编码 */
  code?: string | null;
  /** 消息 */
  msg?: string | null;
  /** 分页信息输出 */
  data?: PageOutputAlarmGetPageOutput;
 }
 /** 报警器分页 */
 export interface PageOutputAlarmGetPageOutput {
  /**
   * 数据总数
   * @format int64
   */
  total?: number;
  /** 数据 */
  list?: AlarmGetPageOutput[] | null;
 }
--- a/src/views/admin/airpump/components/airpump-form.vue
+++ b/src/views/admin/airpump/components/airpump-form.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="pump-form">
+  <div class="airpump-form">
    <el-dialog
      v-model="state.isShowDialog"
      destroy-on-close
@ -9,7 +9,7 @@
      :close-on-press-escape="false"
      width="900px"
    >
-      <el-form ref="pumpFormRef" :model="state.ruleForm" :rules="state.ruleRules" label-width="120px">
+      <el-form ref="airpumpFormRef" :model="state.ruleForm" :rules="state.ruleRules" label-width="120px">
        <!-- 基本信息 -->
        <div class="form-section">
@ -73,6 +73,24 @@
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="泵速策略" prop="configId">
                <el-select
                  v-model="state.ruleForm.configId"
                  placeholder="请选择泵速策略"
                  clearable
                  style="width: 100%"
                  :loading="state.configLoading"
                >
                  <el-option
                    v-for="config in state.configOptions"
                    :key="config.id"
                    :label="`${config.name} (${config.pumpSpeed}g/min)`"
                    :value="config.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
@ -82,20 +100,20 @@
          <el-row :gutter="25">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-              <el-form-item label="工作泵速(g/min)" prop="workingSpeed" required>
+              <el-form-item label="泵速(g/min)" prop="pumpSpeed" required>
                <el-input-number
-                  v-model="state.ruleForm.workingSpeed"
+                  v-model="state.ruleForm.pumpSpeed"
                  :min="0"
                  :precision="2"
                  style="width: 100%"
-                  placeholder="请输入工作泵速"
+                  placeholder="请输入泵速"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-              <el-form-item label="时长:(s)" prop="workingTime" required>
+              <el-form-item label="超时(s)" prop="pumpTimeout" required>
                <el-input-number
-                  v-model="state.ruleForm.workingTime"
+                  v-model="state.ruleForm.pumpTimeout"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入超时时间"
@ -172,9 +190,9 @@
  </div>
 </template>
-<script setup lang="ts" name="PumpForm">
+<script setup lang="ts" name="AirPumpForm">
 import { reactive, ref, getCurrentInstance, onMounted } from 'vue'
-import { PumpApi } from '/@/api/admin/PumpApi'
+import { AirPumpApi } from '/@/api/admin/AirPumpApi'
 import { UserApi } from '/@/api/admin/User'
 import { FeedingConfigApi } from '/@/api/admin/FeedingConfigApi'
 import { DictApi } from '/@/api/admin/Dict'
@ -190,11 +208,11 @@ const props = defineProps({
 const emit = defineEmits(['refresh'])
 // 定义变量内容
-const pumpFormRef = ref()
+const airpumpFormRef = ref()
 const { proxy } = getCurrentInstance() as any
 // 临时类型定义
-type PumpFormData = {
+type AirPumpFormData = {
  id?: number
  deviceNo: string
  assetNo: string
@ -209,9 +227,7 @@ type PumpFormData = {
  speedCoefficient: number
  serviceName: string
  isAirPump: boolean
-  configId: number | undefined,
+  configId: number | undefined
  workingSpeed: number,
  workingTime: number,
 }
 const state = reactive({
@ -225,8 +241,6 @@ const state = reactive({
    model: '',
    specification: '',
    pumpSpeed: 0,
    workingSpeed: 0,
    workingTime: 0,
    principalId: undefined,
    pumpTimeout: 0,
    maintenanceFlag: 1,
@ -234,141 +248,32 @@ const state = reactive({
    port: '',
    speedCoefficient: 0,
    serviceName: '',
-    isAirPump: false,
+    isAirPump: true, // 默认为气泵
    configId: undefined,
-  } as PumpFormData,
+  } as AirPumpFormData,
  ruleRules: {
    deviceNo: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
    assetNo: [{ required: true, message: '请输入资产编号', trigger: 'blur' }],
    model: [{ required: true, message: '请选择设备型号', trigger: 'change' }],
    specification: [{ required: true, message: '请输入设备规格', trigger: 'blur' }],
    pumpSpeed: [{ required: true, message: '请输入泵速', trigger: 'blur' }],
    principalId: [{ required: true, message: '请选择设备负责人', trigger: 'change' }],
    pumpTimeout: [{ required: true, message: '请输入超时时间', trigger: 'blur' }],
    ip: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
    port: [{ required: true, message: '请输入端口号', trigger: 'blur' }],
    speedCoefficient: [{ required: true, message: '请输入泵速系数', trigger: 'blur' }],
  },
  userOptions: [] as Array<UserGetPageOutput>,
  configOptions: [] as Array<FeedingConfigGetListOutput>,
  modelOptions: [] as Array<DictGetListOutput>,
  maintenanceStatusOptions: [
-    { label: 'Offline', value: 0 },
+    { value: 0, label: 'Offline' },
-    { label: 'Idle', value: 1 },
+    { value: 1, label: 'Idle' },
-    { label: 'Busy', value: 2 },
+    { value: 2, label: 'Busy' },
-    { label: 'Error', value: 3 },
+    { value: 3, label: 'Error' },
  ],
  ruleRules: {
    deviceNo: [
      { required: true, message: '设备编号不能为空', trigger: 'blur' },
      { min: 1, max: 50, message: '设备编号长度应在1-50个字符', trigger: 'blur' }
    ],
    assetNo: [
      { required: true, message: '资产编号不能为空', trigger: 'blur' },
      { min: 1, max: 50, message: '资产编号长度应在1-50个字符', trigger: 'blur' }
    ],
    model: [{ required: true, message: '设备型号不能为空', trigger: 'change' }],
    specification: [
      { required: true, message: '规格不能为空', trigger: 'blur' },
      { min: 1, max: 100, message: '规格长度应在1-100个字符', trigger: 'blur' }
    ],
    principalId: [{ required: true, message: '设备负责人不能为空', trigger: 'change' }],
    pumpSpeed: [{ required: true, message: '泵速不能为空', trigger: 'blur' }],
    pumpTimeout: [{ required: true, message: '超时时间不能为空', trigger: 'blur' }],
    workingSpeed: [{ required: true, message: '工作泵速不能为空', trigger: 'blur' }],
    workingTime: [{ required: true, message: '时长不能为空', trigger: 'blur' }],
    speedCoefficient: [{ required: true, message: '泵速系数不能为空', trigger: 'blur' }],
    ip: [
      { required: true, message: 'IP地址不能为空', trigger: 'blur' },
      { pattern: /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/, message: '请输入正确的IP地址格式', trigger: 'blur' }
    ],
    port: [
      { required: true, message: '端口号不能为空', trigger: 'blur' },
      { pattern: /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/, message: '请输入正确的端口号(1-65535)', trigger: 'blur' }
    ],
  },
 })
 onMounted(() => {
  getUserOptions()
  getConfigOptions()
  getModelOptions()
 })
 // 打开弹窗
 const openDialog = async (row?: any) => {
  resetForm()
  // 确保用户数据已加载
  if (state.userOptions.length === 0) {
    await getUserOptions()
  }
  // 确保配置数据已加载
  if (state.configOptions.length === 0) {
    await getConfigOptions()
  }
  // 确保设备型号数据已加载
  if (state.modelOptions.length === 0) {
    await getModelOptions()
  }
  if (row && row.id) {
    // 编辑模式，获取详情
    try {
      const res = await new PumpApi().get({ id: row.id })
      if (res?.success && res.data) {
        state.ruleForm = {
          id: res.data.id,
          deviceNo: res.data.deviceNo || '',
          assetNo: res.data.assetNo || '',
          model: res.data.model || '',
          specification: res.data.specification || '',
          pumpSpeed: res.data.pumpSpeed || 0,
          principalId: res.data.principalId,
          pumpTimeout: res.data.pumpTimeout || 0,
          maintenanceFlag: res.data.maintenanceFlag ?? 1,
          ip: res.data.ip || '',
          port: res.data.port || '',
          speedCoefficient: res.data.speedCoefficient || 0,
          serviceName: res.data.serviceName || '',
          isAirPump: true, // 固定为false
          configId: res.data.configId,
          workingSpeed: res.data.workingSpeed || 0,
          workingTime: res.data.workingTime || 0,
        }
      }
    } catch (error: any) {
      if (error.response?.status === 500) {
        proxy.$modal.msgError('服务器内部错误，请检查后台服务')
      } else {
        proxy.$modal.msgError(`获取详情失败: ${error.response?.data?.msg || error.message}`)
      }
      return
    }
  }
  state.isShowDialog = true
 }
 // 关闭弹窗
 const closeDialog = () => {
  state.isShowDialog = false
  resetForm()
 }
 // 重置表单
 const resetForm = () => {
  state.ruleForm = {
    id: undefined,
    deviceNo: '',
    assetNo: '',
    model: '',
    specification: '',
    pumpSpeed: 0,
    principalId: undefined,
    pumpTimeout: 0,
    maintenanceFlag: 1,
    ip: '',
    port: '',
    speedCoefficient: 0,
    serviceName: '',
    isAirPump: false,
    configId: undefined,
    workingSpeed: 0,
    workingTime: 0,
  }
 }
 // 获取用户选项
 const getUserOptions = async () => {
  try {
@ -394,8 +299,8 @@ const getConfigOptions = async () => {
  state.configLoading = true
  try {
    const res = await new FeedingConfigApi().getList()
-    if (res?.success && res.data) {
+    if (res?.success) {
-      state.configOptions = res.data
+      state.configOptions = res.data ?? []
    }
  } catch (error) {
    // 静默处理错误
@ -407,92 +312,103 @@ const getConfigOptions = async () => {
 // 获取设备型号选项
 const getModelOptions = async () => {
  try {
-    const res = await new DictApi().getList(['PUMPTYPE'])
+    const res = await new DictApi().getList(['model'])
-    if (res?.success && res.data) {
+    if (res?.success) {
-      // 注意：API返回的key是小写的 pumptype
+      state.modelOptions = res.data?.model ?? []
      state.modelOptions = res.data['pumptype'] || []
    }
  } catch (error) {
    // 静默处理错误
  }
 }
 // 打开弹窗
 const openDialog = (row?: AirPumpFormData) => {
  state.isShowDialog = true
  if (row) {
    state.ruleForm = { ...row }
  } else {
    state.ruleForm = {
      id: undefined,
      deviceNo: '',
      assetNo: '',
      model: '',
      specification: '',
      pumpSpeed: 0,
      principalId: undefined,
      pumpTimeout: 0,
      maintenanceFlag: 1,
      ip: '',
      port: '',
      speedCoefficient: 0,
      serviceName: '',
      isAirPump: true, // 默认为气泵
      configId: undefined,
    }
  }
 }
 // 取消
 const onCancel = () => {
-  closeDialog()
+  state.isShowDialog = false
 }
 // 提交
-const onSubmit = () => {
+const onSubmit = async () => {
-  pumpFormRef.value.validate(async (valid: boolean) => {
+  await airpumpFormRef.value?.validate(async (valid: boolean) => {
-    if (!valid) return false
+    if (valid) {
      state.loading = true
      try {
        const api = new AirPumpApi()
        const formData = {
          ...state.ruleForm,
          maintenanceFlag: Number(state.ruleForm.maintenanceFlag)
        }
        const res = state.ruleForm.id
          ? await api.update(formData as unknown as PumpUpdateInput)
          : await api.add(formData as unknown as PumpAddInput)
-    state.loading = true
+        if (res?.success) {
-    try {
+          proxy.$modal.msgSuccess(state.ruleForm.id ? '修改成功' : '新增成功')
-      let res = {} as any
+          state.isShowDialog = false
-      // 确保 isAirPump 为 false
+          emit('refresh')
-      const formData = { ...state.ruleForm, isAirPump: true }
+          eventBus.emit('refreshAirPump' as keyof MittType<any>)
-
+        }
-      if (formData.id) {
+      } catch (error: any) {
-        res = await new PumpApi().update(formData as any, { showSuccessMessage: true })
+        proxy.$modal.msgError(`操作失败: ${error.response?.data?.msg || error.message}`)
-      } else {
+      } finally {
-        res = await new PumpApi().add(formData as any, { showSuccessMessage: true })
+        state.loading = false
      }
      if (res?.success) {
        closeDialog()
        emit('refresh')
        eventBus.emit('refreshAirPump' as keyof MittType<any>)
      }
    } catch (error: any) {
      proxy.$modal.msgError('操作失败')
    } finally {
      state.loading = false
    }
  })
 }
-// 暴露变量
+// 页面加载时
 onMounted(() => {
  getUserOptions()
  getConfigOptions()
  getModelOptions()
 })
 // 对外暴露方法
 defineExpose({
  openDialog,
  closeDialog,
 })
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
-.form-section {
+.airpump-form {
-  margin-bottom: 24px;
+  .form-section {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
-  &:last-child {
+    .section-title {
-    margin-bottom: 0;
+      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #303133;
    }
  }
 }
 .section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
  position: relative;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 40px;
    height: 2px;
    background: #409eff;
  }
 }
 :deep(.el-form-item) {
  margin-bottom: 18px;
 }
 :deep(.el-switch__label) {
  font-size: 13px;
 }
 </style>
--- a/src/views/admin/airpump/index.vue
+++ b/src/views/admin/airpump/index.vue
@ -26,10 +26,10 @@
          />
        </el-form-item>
        <el-form-item>
-          <el-button v-if="auth('api:admin:equ-airpump:get-page')" @click="Query" type="primary">
+          <el-button v-if="auth('api:admin:equ-pump:get-page')" @click="Query" type="primary">
            <SvgIcon name="ele-Search" />查询
          </el-button>
-          <el-button v-auth="'api:admin:equ-airpump:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增 </el-button>
+          <el-button v-auth="'api:admin:equ-pump:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增 </el-button>
        </el-form-item>
      </el-form>
    </el-card>
@ -46,7 +46,7 @@
        <el-table-column prop="assetNo" label="资产编号" min-width="120" show-overflow-tooltip />
        <el-table-column prop="model" label="设备型号" min-width="120" show-overflow-tooltip />
        <el-table-column prop="specification" label="规格" min-width="120" show-overflow-tooltip />
-        <el-table-column prop="workingSpeed" label="工作泵速(g/min)" width="110" align="center" />
+        <el-table-column prop="pumpSpeed" label="泵速(g/min)" width="110" align="center" />
        <el-table-column prop="principalId" label="负责人" width="120" align="center">
          <template #default="{ row }">
            <span>{{ getPrincipalName(row.principalId) }}</span>
@ -66,7 +66,7 @@
              size="small"
              type="primary"
              @click="onEdit(row)"
-              v-auth="'api:admin:equ-airpump:update'"
+              v-auth="'api:admin:equ-pump:update'"
            >
              编辑
            </el-button>
@ -74,7 +74,7 @@
              size="small"
              type="danger"
              @click="onDelete(row)"
-              v-auth="'api:admin:equ-airpump:soft-delete'"
+              v-auth="'api:admin:equ-pump:soft-delete'"
            >
              删除
            </el-button>
@ -97,24 +97,24 @@
      </div>
    </el-card>
-    <pump-form ref="pumpFormRef" :title="state.title" @refresh="Query"></pump-form>
+    <airpump-form ref="airpumpFormRef" :title="state.title" @refresh="Query"></airpump-form>
  </MyLayout>
 </template>
 <script lang="ts" setup name="admin/airpump">
-import { ref, reactive, onMounted, getCurrentInstance, onBeforeMount, defineAsyncComponent } from 'vue'
+import { ref, reactive, onMounted, getCurrentInstance, onBeforeMount, defineAsyncComponent, nextTick } from 'vue'
 import { ElMessageBox } from 'element-plus'
-import { PumpApi } from '/@/api/admin/PumpApi'
+import { AirPumpApi } from '/@/api/admin/AirPumpApi'
 import { UserApi } from '/@/api/admin/User'
 import { PumpGetPageOutput, PageInputPumpGetPageInput, UserGetPageOutput, PageInputUserGetPageInput } from '/@/api/admin/data-contracts'
 import eventBus from '/@/utils/mitt'
 import { auth } from '/@/utils/authFunction'
 // 引入组件
-const PumpForm = defineAsyncComponent(() => import('./components/pump-form.vue'))
+const AirPumpForm = defineAsyncComponent(() => import('./components/airpump-form.vue'))
 // 定义变量内容
-const pumpFormRef = ref()
+const airpumpFormRef = ref<InstanceType<typeof AirPumpForm> | null>(null)
 const { proxy } = getCurrentInstance() as any
 const state = reactive({
@ -140,7 +140,7 @@ const state = reactive({
  tableData: [] as Array<PumpGetPageOutput>,
  userOptions: [] as Array<UserGetPageOutput>,
  showQuery: true,
-  showPumpList: true,
+  showAirPumpList: true,
 })
 onMounted(() => {
@ -225,11 +225,11 @@ const Query = async () => {
        keyWord: state.queryForm.keyWord || null,
        stDate: state.queryForm.stDate || null,
        edDate: state.queryForm.edDate || null,
-        isAirPump: true, // 固定为false，只查询空气泵
+        isAirPump: true, // 固定为true，只查询气泵
      }
    } as PageInputPumpGetPageInput
-    const res = await new PumpApi().getPage(queryParams)
+    const res = await new AirPumpApi().getPage(queryParams)
    if (res?.success) {
      state.tableData = res.data?.list ?? []
      state.total = res.data?.total ?? 0
@ -253,43 +253,58 @@ const onReset = () => {
  Query()
 }
 // 分页大小变化
 const onSizeChange = (size: number) => {
  state.queryForm.pageSize = size
  Query()
 }
 // 当前页变化
 const onCurrentChange = (page: number) => {
  state.queryForm.currentPage = page
  Query()
 }
 // 新增
 const onAdd = () => {
-  state.title = '新增空气泵'
+  state.title = '新增气泵'
-  pumpFormRef.value.openDialog()
+  nextTick(() => {
    if (airpumpFormRef.value) {
      airpumpFormRef.value.openDialog()
    }
  })
 }
 // 编辑
 const onEdit = (row: PumpGetPageOutput) => {
-  state.title = '编辑空气泵'
+  state.title = '编辑气泵'
-  pumpFormRef.value.openDialog(row)
+  nextTick(() => {
    if (airpumpFormRef.value) {
      const formData = {
        id: row.id,
        deviceNo: row.deviceNo || '',
        assetNo: row.assetNo || '',
        model: row.model || '',
        specification: row.specification || '',
        pumpSpeed: row.pumpSpeed || 0,
        principalId: row.principalId,
        pumpTimeout: row.pumpTimeout || 0,
        maintenanceFlag: Number(row.maintenanceFlag) || 1,
        ip: row.ip || '',
        port: row.port || '',
        speedCoefficient: row.speedCoefficient || 0,
        serviceName: row.serviceName || '',
        isAirPump: true,
        configId: row.configId,
      }
      airpumpFormRef.value.openDialog(formData)
    }
  })
 }
 // 删除
 const onDelete = (row: PumpGetPageOutput) => {
-  ElMessageBox.confirm(`确定要删除空气泵【${row.deviceNo}】吗?`, '提示', {
+  ElMessageBox.confirm(`确定要删除设备编号为"${row.deviceNo}"的气泵吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
-        const res = await new PumpApi().softDelete({ id: row.id! })
+        if (row.id) {
-        if (res?.success) {
+          const res = await new AirPumpApi().softDelete({ id: row.id })
-          proxy.$modal.msgSuccess('删除成功')
+          if (res?.success) {
-          Query()
+            proxy.$modal.msgSuccess('删除成功')
            Query()
          }
        }
      } catch (error: any) {
        proxy.$modal.msgError(`删除失败: ${error.response?.data?.msg || error.message}`)
@ -297,6 +312,18 @@ const onDelete = (row: PumpGetPageOutput) => {
    })
    .catch(() => {})
 }
 // 分页大小改变
 const onSizeChange = (val: number) => {
  state.queryForm.pageSize = val
  Query()
 }
 // 分页页码改变
 const onCurrentChange = (val: number) => {
  state.queryForm.currentPage = val
  Query()
 }
 </script>
--- a/src/views/admin/alarm/components/alarm-form.vue
+++ b/src/views/admin/alarm/components/alarm-form.vue
@ -1,151 +0,0 @@
 <template>
  <div>
    <el-dialog v-model="state.showDialog" destroy-on-close :title="title" draggable :close-on-click-modal="false"
      :close-on-press-escape="false" width="700px">
      <el-form :model="form" ref="formRef" size="default" label-width="100px">
        <div class="form-section">
          <div class="section-title">基本信息</div>
          <el-row :gutter="25">
            <el-col :span="12">
              <el-form-item label="设备编号" prop="deviceNo"
                :rules="[{ required: true, message: '请输入设备编号', trigger: ['blur', 'change'] }]">
                <el-input v-model="form.deviceNo" clearable placeholder="请输入设备编号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资产编号" prop="assetNo">
                <el-input v-model="form.assetNo" clearable placeholder="请输入资产编号" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="form-section">
          <div class="section-title">网络配置</div>
          <el-row :gutter="25">
            <el-col :span="12">
              <el-form-item label="IP地址" prop="ip" :rules="[{ required: true, message: '请输入IP地址', trigger: 'blur' }]">
                <el-input v-model="form.ip" clearable placeholder="请输入IP地址" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="端口" prop="port" :rules="[{ required: true, message: '请输入端口', trigger: 'blur' }]">
                <el-input v-model="form.port" clearable placeholder="请输入端口" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务名称" prop="serviceName">
                <el-input v-model="form.serviceName" clearable placeholder="请输入服务名称" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSure" size="default" :loading="state.sureLoading">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
 </template>
 <script lang="ts" setup name="platform/nppusp/device/alarm-form">
 import { reactive, toRefs, ref, onMounted } from 'vue';
 import { AlarmUpdateInput, RoomGetPageOutput, PageInputRoomGetPageInput, AlarmAddInput } from '/@/api/admin/data-contracts';
 import { AlarmApi } from '/@/api/admin/AlarmApi';
 import { ElMessage } from 'element-plus';
 const props = defineProps({
  title: {
    type: String,
    default: '',
  },
 });
 const emits = defineEmits(['refresh']);
 const formRef = ref();
 const state = reactive({
  showDialog: false,
  sureLoading: false,
  form: {
    status: true,
    isRuning: 0,
  } as AlarmUpdateInput,
  roomOptions: [] as Array<RoomGetPageOutput>,
 });
 const { form } = toRefs(state);
 onMounted(() => {
 });
 const open = async (row: any = { id: 0 }) => {
  if (row.id > 0) {
    const res = await new AlarmApi().get({ id: row.id });
    if (res?.success) {
      state.form = res.data as AlarmUpdateInput;
    }
  } else {
    state.form = {
      id: 0,
      deviceNo: '',
      assetNo: '',
      roomId: undefined,
      ip: '',
      port: '',
      serviceName: '',
      status: true,
      isRuning: 0,
    };
  }
  state.showDialog = true;
 };
 const onCancel = () => {
  state.showDialog = false;
 };
 const onSure = () => {
  formRef.value.validate(async (valid: boolean) => {
    if (!valid) return;
    state.sureLoading = true;
    let res;
    state.form.isRuning = state.form.isRuning ?? 0;
    if (state.form.id > 0) {
      res = await new AlarmApi().update(state.form as AlarmUpdateInput);
    } else {
      res = await new AlarmApi().add(state.form as AlarmAddInput);
    }
    state.sureLoading = false;
    if (res?.success) {
      ElMessage.success('操作成功');
      emits('refresh');
      onCancel();
    } else {
      ElMessage.error(res?.msg as string);
    }
  });
 };
 defineExpose({
  open,
 });
 </script>
 <style lang="scss" scoped>
 .form-section {
  margin-bottom: 20px;
  .section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 4px solid var(--el-color-primary);
  }
 }
 </style>
--- a/src/views/admin/alarm/index.vue
+++ b/src/views/admin/alarm/index.vue
@ -1,138 +0,0 @@
 <template>
  <my-layout>
    <el-card class="my-query-box mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
      <el-form :inline="true" label-width="auto" @submit.stop.prevent>
        <el-form-item label="关键词">
          <el-input v-model="state.filter.keyWord" placeholder="设备编号、资产编号" @keyup.enter="onQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
          <el-button v-auth="'api:admin:usp-alarm:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增报警器 </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="my-fill mt8" shadow="never">
      <el-table :data="state.alarmListData" style="width: 100%" v-loading="state.loading" row-key="id" border>
        <el-table-column prop="deviceNo" label="设备编号" min-width="150" show-overflow-tooltip />
        <el-table-column prop="assetNo" label="资产编号" min-width="150" show-overflow-tooltip />
        <el-table-column prop="ip" label="IP地址" min-width="130" show-overflow-tooltip />
        <el-table-column prop="port" label="端口" min-width="80" align="center" />
        <el-table-column prop="serviceName" label="服务名称" min-width="150" show-overflow-tooltip />
        <el-table-column prop="isRunning" label="运行状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag type="primary" v-if="row.isRuning">运行中</el-tag>
            <el-tag type="info" v-else>停止</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right" header-align="center" align="center">
          <template #default="{ row }">
            <el-button v-auth="'api:admin:usp-alarm:update'" icon="ele-EditPen" size="small" text type="primary" @click="onEdit(row)">编辑</el-button>
            <el-button v-auth="'api:admin:usp-alarm:soft-delete'" icon="ele-Delete" size="small" text type="danger" @click="onDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="my-flex my-flex-end" style="margin-top: 10px">
        <el-pagination
          v-model:currentPage="state.pageInput.currentPage"
          v-model:page-size="state.pageInput.pageSize"
          :total="state.total"
          :page-sizes="[10, 20, 50, 100]"
          size="small"
          background
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </el-card>
    <alarm-form ref="alarmFormRef" :title="state.alarmFormTitle" @refresh="onQuery" />
  </my-layout>
 </template>
 <script lang="ts" setup name="/admin/alarm">
 import { ref, reactive, onMounted, getCurrentInstance, defineAsyncComponent } from 'vue';
 import { PageInputAlarmGetPageInput, AlarmGetPageOutput } from '/@/api/admin/data-contracts';
 import { AlarmApi } from '/@/api/admin/AlarmApi';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { auth } from '/@/utils/authFunction'
 const AlarmForm = defineAsyncComponent(() => import('./components/alarm-form.vue'));
 const { proxy } = getCurrentInstance() as any;
 const alarmFormRef = ref();
 const state = reactive({
  loading: false,
  alarmFormTitle: '',
  filter: {
    keyWord: '',
  },
  total: 0,
  pageInput: {
    currentPage: 1,
    pageSize: 20,
    filter: {},
  } as PageInputAlarmGetPageInput,
  alarmListData: [] as Array<AlarmGetPageOutput>,
 });
 onMounted(() => {
  onQuery();
 });
 const onQuery = async () => {
  state.loading = true;
  state.pageInput.filter = state.filter;
  const res = await new AlarmApi().getPage(state.pageInput).catch(() => {
    state.loading = false;
  });
  if (res?.success) {
    state.alarmListData = res.data?.list ?? [];
    state.total = res.data?.total ?? 0;
  }
  state.loading = false;
 };
 const onAdd = () => {
  state.alarmFormTitle = '新增报警器';
  alarmFormRef.value.open();
 };
 const onEdit = (row: AlarmGetPageOutput) => {
  state.alarmFormTitle = '编辑报警器';
  alarmFormRef.value.open(row);
 };
 const onDelete = (row: AlarmGetPageOutput) => {
  ElMessageBox.confirm(`确定要删除报警器【${row.deviceNo}】吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const res = await new AlarmApi().softDelete({ id: row.id });
      if (res?.success) {
        ElMessage.success('删除成功');
        onQuery();
      } else {
        ElMessage.error(res?.msg as string);
      }
    })
    .catch(() => {});
 };
 const onSizeChange = (val: number) => {
  state.pageInput.pageSize = val;
  onQuery();
 };
 const onCurrentChange = (val: number) => {
  state.pageInput.currentPage = val;
  onQuery();
 };
 </script>
--- a/页面开发数据模板.md
+++ b/页面开发数据模板.md
@ -1,207 +1,570 @@
-# 页面开发指南
+# 页面开发数据模板
-## 路由配置
+> 基于 uspscale (秤台设备管理) 页面开发经验总结的完整开发模板
 1. 路由参数
   ```typescript
   // 路由定义
   {
     path: '/admin/device',
     name: 'admin/device',
     component: () => import('/@/views/admin/device/index.vue'),
     meta: {
       title: '设备管理',
       icon: 'ele-Setting',
       roles: ['admin']
     }
   }
   ```
-2. 权限控制
+## 1. 基本信息配置
   ```typescript
   // 按钮权限
   v-auth="'api:admin:device:add'"  // 新增权限
   v-auth="'api:admin:device:update'"  // 修改权限
   v-auth="'api:admin:device:soft-delete'"  // 删除权限
   ```
-## 数据结构
+```typescript
-1. 列表查询参数
+{
-   ```typescript
+  // 页面基本信息
-   interface PageInput {
+  pageInfo: {
-     currentPage: number
+    moduleName: "uspscale",           // 模块名称（小写，用于路径）
-     pageSize: number
+    displayName: "秤台设备管理",      // 显示名称
-     filter: {
+    baseRoute: "admin/uspscale",      // 路由路径
-       keyWord?: string
+    referenceModule: "admin/room"     // 参考的现有模块（用于复制结构）
-       startTime?: string
+  }
-       endTime?: string
+}
-     }
+```
   }
   ```
-2. 表单数据结构
+## 2. API接口定义
   ```typescript
   interface FormData {
     id?: number
     deviceNo: string
     assetNo?: string
     ip: string
     port: string
     serviceName?: string
     status: boolean
   }
   ```
-3. API 接口
+```typescript
-   ```typescript
+{
-   // 列表接口
+  // API配置
-   GET /api/admin/device/get-page
+  apiConfig: {
    baseEndpoint: "/api/admin/usp-scale",  // API基础路径
    endpoints: {
      getPage: "get-page",      // 分页查询
      get: "get",               // 单条查询  
      add: "add",               // 新增
      update: "update",         // 更新
      softDelete: "soft-delete" // 软删除（推荐）
      // delete: "delete"       // 硬删除（可选）
    }
  }
 }
 ```
-   // 详情接口
+## 3. 数据字段定义
   GET /api/admin/device/get
-   // 新增接口
+```typescript
-   POST /api/admin/device/add
+{
  // 字段定义
  fields: {
    // 主键字段
    primaryKey: {
      name: "id",
      type: "number",
      required: true
    },
-   // 修改接口
+    // 基本字段
-   PUT /api/admin/device/update
+    basicFields: [
      {
        name: "deviceNo",
        type: "string", 
        label: "设备编号",
        required: true,
        component: "input",
        placeholder: "请输入设备编号"
      },
      {
        name: "assetNo", 
        type: "string",
        label: "资产编号", 
        required: false,
        component: "input",
        placeholder: "请输入资产编号"
      }
    ],
-   // 删除接口
+    // 下拉选择字段
-   DELETE /api/admin/device/soft-delete
+    selectFields: [
-   ```
+      {
        name: "roomID",
        type: "number",
        label: "房间",
        required: true,
        component: "select",
        dataSource: "room", // 数据来源API
        displayField: "roomName",
        valueField: "id",
        placeholder: "请选择设备所在房间"
      },
      {
        name: "model", 
        type: "string",
        label: "型号",
        required: false,
        component: "select",
        dataSource: "static", // 静态数据
        options: [
          { label: "CAIS2-U 1500kg", value: "001" },
          { label: "METTLER", value: "3" },
          { label: "OHAUS", value: "5" }
        ]
      },
      {
        name: "principalId",
        type: "number", 
        label: "设备负责人",
        required: false,
        component: "select",
        dataSource: "user", // 用户数据源
        displayField: "name (userName)", // 显示格式：姓名(用户名)
        valueField: "id",
        filterable: true, // 支持搜索
        placeholder: "请输入姓名搜索设备负责人"
      }
    ],
-## 页面结构
+    // 数字字段
-1. 列表页面
+    numberFields: [
-   - 搜索区域：关键词搜索
+      {
-   - 操作按钮：新增、查询
+        name: "scalePrecision",
-   - 表格区域：基础字段展示
+        type: "number", 
-   - 分页区域：标准分页组件
+        label: "精度(g)",
        required: false,
        component: "input-number",
        min: 0,
        precision: 1,
        placeholder: "请输入设备精度"
      },
      {
        name: "warningLowerLimit",
        type: "number",
        label: "报警下限值(g)", 
        required: false,
        component: "input-number",
        min: 0,
        precision: 2,
        placeholder: "请输入报警下限值"
      }
    ],
-2. 编辑页面
+    // 开关字段
-   - 基本信息模块
+    switchFields: [
-   - 网络配置模块
+      {
-   - 设备配置模块
+        name: "enabled",
        type: "boolean",
        label: "启用状态", 
        required: false,
        component: "switch",
        activeText: "启用",
        inactiveText: "禁用"
      },
      {
        name: "maintenanceFlag",
        type: "boolean",
        label: "维护标记",
        required: false, 
        component: "switch",
        activeText: "维护中",
        inactiveText: "正常"
      },
      {
        name: "isFeedingScale",
        type: "boolean",
        label: "是否补料地秤",
        required: false,
        component: "switch", 
        activeText: "是",
        inactiveText: "否"
      }
    ],
-## 样式规范
+    // 搜索筛选字段
-1. 对话框配置
+    filterFields: [
-   ```html
+      {
-   <el-dialog
+        name: "keyWord",
-     v-model="state.showDialog"
+        type: "string",
-     destroy-on-close
+        label: "关键词",
-     :title="title"
+        component: "input",
-     draggable
+        placeholder: "设备编号、资产编号"
-     :close-on-click-modal="false"
+      },
-     :close-on-press-escape="false"
+      {
-     width="900px"
+        name: "model",
-   >
+        type: "string", 
-   ```
+        label: "设备型号",
        component: "select",
        dataSource: "static",
        placeholder: "请选择设备型号"
      },
      {
        name: "roomID", 
        type: "number",
        label: "房间",
        component: "select",
        dataSource: "room",
        placeholder: "请选择房间"
      },
      {
        name: "stDate",
        type: "string", 
        label: "开始时间",
        component: "datetime-picker",
        format: "YYYY-MM-DD HH:mm:ss",
        placeholder: "选择开始时间"
      },
      {
        name: "edDate",
        type: "string",
        label: "结束时间", 
        component: "datetime-picker",
        format: "YYYY-MM-DD HH:mm:ss",
        placeholder: "选择结束时间"
      }
    ]
  }
 }
 ```
-2. 表单布局
+## 4. 权限定义
   ```html
   <el-form :model="form" ref="formRef" size="default" label-width="120px">
     <div class="form-section">
       <div class="section-title">模块标题</div>
       <el-row :gutter="25">
         <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
           <el-form-item label="字段名称" prop="fieldName">
             <el-input v-model="form.fieldName" clearable placeholder="请输入" />
           </el-form-item>
         </el-col>
       </el-row>
     </div>
   </el-form>
   ```
-3. 样式定义
+```typescript
-   ```scss
+{
-   .form-section {
+  // 权限配置
-     margin-bottom: 24px;
+  permissions: [
-     &:last-child { margin-bottom: 0; }
+    "api:admin:usp-scale:get",        // 查询单条
-   }
+    "api:admin:usp-scale:get-list",   // 查询列表
    "api:admin:usp-scale:get-page",   // 分页查询
    "api:admin:usp-scale:add",        // 新增
    "api:admin:usp-scale:update",     // 更新
    "api:admin:usp-scale:soft-delete" // 软删除
  ]
 }
 ```
-   .section-title {
+## 5. 表格列配置
     font-size: 16px;
     font-weight: 600;
     color: #303133;
     margin-bottom: 16px;
     padding-bottom: 8px;
     border-bottom: 2px solid #f0f0f0;
     position: relative;
     &:before {
       content: '';
       position: absolute;
       left: 0;
       bottom: -2px;
       width: 40px;
       height: 2px;
       background: #409eff;
     }
   }
   ```
-## 开发规范
+```typescript
-1. 组件命名
+{
-   - 目录：小写字母，用横线分隔
+  // 表格列定义
-   - 组件：PascalCase
+  tableColumns: [
-   - 组合函数：camelCase
+    {
      prop: "deviceNo",
      label: "设备编号", 
      minWidth: 120,
      showOverflowTooltip: true
    },
    {
      prop: "assetNo",
      label: "资产编号",
      minWidth: 120, 
      showOverflowTooltip: true
    },
    {
      prop: "model",
      label: "型号",
      minWidth: 120,
      showOverflowTooltip: true,
      formatter: "getModelName" // 需要转换显示的字段
    },
    {
      prop: "specification", 
      label: "规格",
      minWidth: 120,
      showOverflowTooltip: true
    },
    {
      prop: "roomID",
      label: "房间",
      width: 120,
      align: "center", 
      formatter: "getRoomName" // 需要转换显示的字段
    },
    {
      prop: "maintenanceFlag",
      label: "维护标记",
      width: 80,
      align: "center",
      component: "tag", // 使用标签显示
      tagConfig: {
        trueText: "维护中",
        falseText: "正常",
        trueType: "warning", 
        falseType: "success"
      }
    },
    {
      prop: "isFeedingScale",
      label: "补料地秤",
      width: 100,
      align: "center",
      component: "tag",
      tagConfig: {
        trueText: "是",
        falseText: "否", 
        trueType: "primary",
        falseType: "info"
      }
    },
    {
      prop: "enabled",
      label: "状态",
      width: 80,
      align: "center",
      component: "tag",
      tagConfig: {
        trueText: "启用",
        falseText: "禁用",
        trueType: "success", 
        falseType: "danger"
      }
    },
    {
      prop: "actions",
      label: "操作",
      width: 200,
      fixed: "right",
      headerAlign: "center",
      align: "center",
      actions: [
        {
          text: "编辑", 
          type: "primary",
          permission: "api:admin:usp-scale:update",
          handler: "onEdit"
        },
        {
          text: "删除",
          type: "danger", 
          permission: "api:admin:usp-scale:soft-delete",
          handler: "onDelete"
        }
      ]
    }
  ]
 }
 ```
-2. 代码组织
+## 6. 表单布局配置
   ```typescript
   // 1. 导入声明
   import { reactive, ref } from 'vue'
-   // 2. 类型定义
+```typescript
-   interface State {
+{
-     showDialog: boolean
+  // 表单配置
-     form: FormData
+  formConfig: {
-   }
+    dialogWidth: "900px",
    labelWidth: "120px",
-   // 3. 组件定义
+    // 表单分组
-   const props = defineProps({
+    sections: [
-     title: String
+      {
-   })
+        title: "基本信息",
        fields: [
          "deviceNo", 
          "assetNo", 
          "model", 
          "specification", 
          "roomID", 
          "principalId"
        ]
      },
      {
        title: "技术参数", 
        fields: [
          "scalePrecision", 
          "warningLowerLimit"
        ]
      },
      {
        title: "设备配置",
        fields: [
          "maintenanceFlag", 
          "isFeedingScale", 
          "enabled", 
          "communicationSettings"
        ]
      }
    ],
-   // 4. 状态定义
+    // 特殊组件（如独立表单）
-   const state = reactive<State>({
+    specialComponents: [
-     showDialog: false,
+      {
-     form: {}
+        name: "communicationSettings",
-   })
+        type: "button",
        label: "通讯设置",
        buttonText: "配置通讯参数",
        icon: "ele-Setting",
        action: "openSubForm",
        subFormConfig: {
          title: "通讯设置",
          width: "600px",
          fields: [
            "subSystemIP", 
            "subSystemIPPort", 
            "deviceIP", 
            "deviceIPPort", 
            "serviceName"
          ]
        }
      }
    ]
  }
 }
 ```
-   // 5. 方法定义
+## 7. 完整示例配置
   const handleSubmit = async () => {
     // 处理逻辑
   }
   ```
-3. 表单验证
+### 设备管理页面示例
   ```typescript
   const rules = {
     fieldName: [
       { required: true, message: '请输入', trigger: ['blur', 'change'] }
     ]
   }
   ```
-4. API 调用
+```json
-   ```typescript
+{
-   const handleSave = async () => {
+  "pageInfo": {
-     try {
+    "moduleName": "device",
-       const res = await api.save(state.form)
+    "displayName": "设备管理", 
-       if (res.success) {
+    "baseRoute": "admin/device",
-         ElMessage.success('保存成功')
+    "referenceModule": "admin/room"
-         emit('refresh')
+  },
-         state.showDialog = false
+  "apiConfig": {
-       }
+    "baseEndpoint": "/api/admin/device",
-     } catch (error) {
+    "endpoints": {
-       console.error(error)
+      "getPage": "get-page",
-     }
+      "get": "get", 
-   }
+      "add": "add",
-   ```
+      "update": "update",
      "softDelete": "soft-delete"
    }
  },
  "permissions": [
    "api:admin:device:get",
    "api:admin:device:get-page", 
    "api:admin:device:add",
    "api:admin:device:update",
    "api:admin:device:soft-delete"
  ],
  "fields": {
    "basicFields": [
      {
        "name": "deviceName",
        "type": "string",
        "label": "设备名称",
        "required": true,
        "component": "input",
        "placeholder": "请输入设备名称"
      },
      {
        "name": "deviceCode", 
        "type": "string",
        "label": "设备编码",
        "required": true,
        "component": "input",
        "placeholder": "请输入设备编码"
      }
    ],
    "selectFields": [
      {
        "name": "categoryId",
        "type": "number",
        "label": "设备分类",
        "required": true,
        "component": "select",
        "dataSource": "category"
      }
    ]
  }
 }
 ```
-## 注意事项
+## 8. 开发步骤清单
-1. 保持与 uspscale 页面风格一致
+
-2. 使用响应式布局适配不同屏幕
+### 8.1 准备阶段
-3. 统一表单验证规则和错误提示
+- [ ] 确定页面基本信息（模块名、显示名等）
-4. 优化用户交互体验
+- [ ] 设计数据结构和字段定义  
-5. 保持代码风格统一
+- [ ] 确定API接口规范
-6. 注意性能优化
+- [ ] 确定权限控制规则
-7. 遵循 TypeScript 类型规范 
+- [ ] 分析数据关联关系（如外键引用）
 ### 8.2 后端准备
 - [ ] 创建数据库表结构
 - [ ] 实现API接口（CRUD操作）
 - [ ] 配置权限控制
 - [ ] 数据验证和业务逻辑
 - [ ] API文档编写
 ### 8.3 前端开发
 #### 8.3.1 基础文件创建
 - [ ] 创建主页面文件 `src/views/admin/{module}/index.vue`
 - [ ] 创建表单组件 `src/views/admin/{module}/components/{module}-form.vue`
 - [ ] 创建API文件 `src/api/admin/{Module}Api.ts`
 - [ ] 更新类型定义 `src/api/admin/data-contracts.ts`
 #### 8.3.2 功能实现
 - [ ] 实现分页查询功能
 - [ ] 实现新增功能
 - [ ] 实现编辑功能
 - [ ] 实现删除功能
 - [ ] 添加权限控制
 #### 8.3.3 用户体验优化
 - [ ] 添加搜索筛选功能
 - [ ] 优化表单布局（分组、占位符）
 - [ ] 添加数据验证
 - [ ] 优化选择框（搜索、分页）
 - [ ] 添加操作确认提示
 ### 8.4 测试阶段
 - [ ] 功能测试（CRUD操作）
 - [ ] 权限测试
 - [ ] 数据验证测试
 - [ ] 用户体验测试
 - [ ] 性能测试
 ### 8.5 优化阶段
 - [ ] 代码优化和重构
 - [ ] 性能优化（懒加载、虚拟滚动等）
 - [ ] 错误处理优化
 - [ ] 用户反馈收集和改进
 ## 9. 开发最佳实践
 ### 9.1 命名规范
 - **文件命名**：使用小写字母和连字符，如 `device-form.vue`
 - **变量命名**：使用驼峰命名法，如 `deviceList`
 - **常量命名**：使用大写字母和下划线，如 `MAX_PAGE_SIZE`
 ### 9.2 代码组织
 - **组件拆分**：将复杂表单拆分为多个子组件
 - **逻辑复用**：将通用逻辑提取为组合函数
 - **类型安全**：全面使用 TypeScript 类型定义
 ### 9.3 用户体验
 - **响应式设计**：适配不同屏幕尺寸
 - **加载状态**：添加适当的加载提示
 - **错误处理**：友好的错误提示信息
 - **操作反馈**：成功/失败的操作提示
 ### 9.4 性能优化
 - **懒加载**：大型组件使用异步加载
 - **虚拟滚动**：大数据量列表使用虚拟滚动
 - **防抖节流**：搜索等操作使用防抖
 - **缓存策略**：合理使用数据缓存
 ## 10. 常见问题和解决方案
 ### 10.1 下拉选择优化
 **问题**：数据量大时选择困难
 **解决方案**：
 - 添加搜索功能（filterable）
 - 显示更多信息（姓名+用户名）
 - 支持远程搜索
 - 添加分页加载
 ### 10.2 表单字段分组
 **问题**：字段太多导致表单复杂
 **解决方案**：
 - 按逻辑分组（基本信息、技术参数、配置）
 - 使用独立表单处理复杂模块
 - 添加分步表单
 - 使用折叠面板
 ### 10.3 权限控制
 **问题**：不同用户需要不同权限
 **解决方案**：
 - 细化权限粒度
 - 使用 v-auth 指令控制按钮显示
 - 在API层面进行权限验证
 - 提供权限管理界面
 ### 10.4 数据关联
 **问题**：外键数据显示和选择
 **解决方案**：
 - 提供格式化函数转换显示
 - 在表单中使用下拉选择
 - 支持级联选择
 - 缓存关联数据
 ---
 **注意**：此模板基于 Vue 3 + TypeScript + Element Plus + Pinia 技术栈，使用时请根据实际项目技术栈进行调整。