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,
-    });
-}

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;
-}

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>

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>
 
 

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>

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>

页面开发数据模板.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: {
-   GET /api/admin/device/get
+      getPage: "get-page",      // 分页查询
-   
+      get: "get",               // 单条查询  
-   // 新增接口
+      add: "add",               // 新增
-   POST /api/admin/device/add
+      update: "update",         // 更新
-   
+      softDelete: "soft-delete" // 软删除（推荐）
-   // 修改接口
+      // delete: "delete"       // 硬删除（可选）
-   PUT /api/admin/device/update
+    }
-   
+  }
-   // 删除接口
+}
-   DELETE /api/admin/device/soft-delete
+```
-   ```
 
-## 页面结构
+## 3. 数据字段定义
-1. 列表页面
-   - 搜索区域：关键词搜索
-   - 操作按钮：新增、查询
-   - 表格区域：基础字段展示
-   - 分页区域：标准分页组件
 
-2. 编辑页面
+```typescript
-   - 基本信息模块
+{
-   - 网络配置模块
+  // 字段定义
-   - 设备配置模块
+  fields: {
+    // 主键字段
+    primaryKey: {
+      name: "id",
+      type: "number",
+      required: true
+    },
+    
+    // 基本字段
+    basicFields: [
+      {
+        name: "deviceNo",
+        type: "string", 
+        label: "设备编号",
+        required: true,
+        component: "input",
+        placeholder: "请输入设备编号"
+      },
+      {
+        name: "assetNo", 
+        type: "string",
+        label: "资产编号", 
+        required: false,
+        component: "input",
+        placeholder: "请输入资产编号"
+      }
+    ],
+    
+    // 下拉选择字段
+    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: "请输入姓名搜索设备负责人"
+      }
+    ],
+    
+    // 数字字段
+    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: "请输入报警下限值"
+      }
+    ],
+    
+    // 开关字段
+    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: "否"
+      }
+    ],
+    
+    // 搜索筛选字段
+    filterFields: [
+      {
+        name: "keyWord",
+        type: "string",
+        label: "关键词",
+        component: "input",
+        placeholder: "设备编号、资产编号"
+      },
+      {
+        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: "选择结束时间"
+      }
+    ]
+  }
+}
+```
 
-## 样式规范
+## 4. 权限定义
-1. 对话框配置
-   ```html
-   <el-dialog
-     v-model="state.showDialog"
-     destroy-on-close
-     :title="title"
-     draggable
-     :close-on-click-modal="false"
-     :close-on-press-escape="false"
-     width="900px"
-   >
-   ```
 
-2. 表单布局
+```typescript
-   ```html
+{
-   <el-form :model="form" ref="formRef" size="default" label-width="120px">
+  // 权限配置
-     <div class="form-section">
+  permissions: [
-       <div class="section-title">模块标题</div>
+    "api:admin:usp-scale:get",        // 查询单条
-       <el-row :gutter="25">
+    "api:admin:usp-scale:get-list",   // 查询列表
-         <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+    "api:admin:usp-scale:get-page",   // 分页查询
-           <el-form-item label="字段名称" prop="fieldName">
+    "api:admin:usp-scale:add",        // 新增
-             <el-input v-model="form.fieldName" clearable placeholder="请输入" />
+    "api:admin:usp-scale:update",     // 更新
-           </el-form-item>
+    "api:admin:usp-scale:soft-delete" // 软删除
-         </el-col>
+  ]
-       </el-row>
+}
-     </div>
+```
-   </el-form>
-   ```
 
-3. 样式定义
+## 5. 表格列配置
-   ```scss
-   .form-section {
-     margin-bottom: 24px;
-     &:last-child { margin-bottom: 0; }
-   }
 
-   .section-title {
+```typescript
-     font-size: 16px;
+{
-     font-weight: 600;
+  // 表格列定义
-     color: #303133;
+  tableColumns: [
-     margin-bottom: 16px;
+    {
-     padding-bottom: 8px;
+      prop: "deviceNo",
-     border-bottom: 2px solid #f0f0f0;
+      label: "设备编号", 
-     position: relative;
+      minWidth: 120,
-     &:before {
+      showOverflowTooltip: true
-       content: '';
+    },
-       position: absolute;
+    {
-       left: 0;
+      prop: "assetNo",
-       bottom: -2px;
+      label: "资产编号",
-       width: 40px;
+      minWidth: 120, 
-       height: 2px;
+      showOverflowTooltip: true
-       background: #409eff;
+    },
-     }
+    {
-   }
+      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"
+        }
+      ]
+    }
+  ]
+}
+```
 
-## 开发规范
+## 6. 表单布局配置
-1. 组件命名
-   - 目录：小写字母，用横线分隔
-   - 组件：PascalCase
-   - 组合函数：camelCase
 
-2. 代码组织
+```typescript
-   ```typescript
+{
-   // 1. 导入声明
+  // 表单配置
-   import { reactive, ref } from 'vue'
+  formConfig: {
-   
+    dialogWidth: "900px",
-   // 2. 类型定义
+    labelWidth: "120px",
-   interface State {
+    
-     showDialog: boolean
+    // 表单分组
-     form: FormData
+    sections: [
-   }
+      {
-   
+        title: "基本信息",
-   // 3. 组件定义
+        fields: [
-   const props = defineProps({
+          "deviceNo", 
-     title: String
+          "assetNo", 
-   })
+          "model", 
-   
+          "specification", 
-   // 4. 状态定义
+          "roomID", 
-   const state = reactive<State>({
+          "principalId"
-     showDialog: false,
+        ]
-     form: {}
+      },
-   })
+      {
-   
+        title: "技术参数", 
-   // 5. 方法定义
+        fields: [
-   const handleSubmit = async () => {
+          "scalePrecision", 
-     // 处理逻辑
+          "warningLowerLimit"
-   }
+        ]
-   ```
+      },
+      {
+        title: "设备配置",
+        fields: [
+          "maintenanceFlag", 
+          "isFeedingScale", 
+          "enabled", 
+          "communicationSettings"
+        ]
+      }
+    ],
+    
+    // 特殊组件（如独立表单）
+    specialComponents: [
+      {
+        name: "communicationSettings",
+        type: "button",
+        label: "通讯设置",
+        buttonText: "配置通讯参数",
+        icon: "ele-Setting",
+        action: "openSubForm",
+        subFormConfig: {
+          title: "通讯设置",
+          width: "600px",
+          fields: [
+            "subSystemIP", 
+            "subSystemIPPort", 
+            "deviceIP", 
+            "deviceIPPort", 
+            "serviceName"
+          ]
+        }
+      }
+    ]
+  }
+}
+```
 
-3. 表单验证
+## 7. 完整示例配置
-   ```typescript
-   const rules = {
-     fieldName: [
-       { required: true, message: '请输入', trigger: ['blur', 'change'] }
-     ]
-   }
-   ```
 
-4. API 调用
+### 设备管理页面示例
-   ```typescript
-   const handleSave = async () => {
-     try {
-       const res = await api.save(state.form)
-       if (res.success) {
-         ElMessage.success('保存成功')
-         emit('refresh')
-         state.showDialog = false
-       }
-     } catch (error) {
-       console.error(error)
-     }
-   }
-   ```
 
-## 注意事项
+```json
-1. 保持与 uspscale 页面风格一致
+{
-2. 使用响应式布局适配不同屏幕
+  "pageInfo": {
-3. 统一表单验证规则和错误提示
+    "moduleName": "device",
-4. 优化用户交互体验
+    "displayName": "设备管理", 
-5. 保持代码风格统一
+    "baseRoute": "admin/device",
-6. 注意性能优化
+    "referenceModule": "admin/room"
-7. 遵循 TypeScript 类型规范 
+  },
+  "apiConfig": {
+    "baseEndpoint": "/api/admin/device",
+    "endpoints": {
+      "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. 开发步骤清单
+
+### 8.1 准备阶段
+- [ ] 确定页面基本信息（模块名、显示名等）
+- [ ] 设计数据结构和字段定义  
+- [ ] 确定API接口规范
+- [ ] 确定权限控制规则
+- [ ] 分析数据关联关系（如外键引用）
+
+### 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 技术栈，使用时请根据实际项目技术栈进行调整。