style：设备模型/物联设备-采集点管理-点位类型下拉框改为弹框table形式

src/views/iot/device/components/DeviceAttributeForm.vue

@@ -10,11 +10,13 @@ v-model="formData.attributeCode" :placeholder="t('DataCollection.Device.placehol
         <el-input v-model="formData.attributeName" :placeholder="t('DataCollection.Device.placeholderAttributeName')" />
       </el-form-item>
       <el-form-item :label="t('DataCollection.Device.attributeType')" prop="attributeType">
-        <el-select
+        <el-input
-v-model="formData.attributeType" clearable filterable
+          v-model="formData.typeName"
-          :placeholder="t('DataCollection.Device.placeholderAttributeType')" @change="handleAttributeTypeChange">
+          readonly
-          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
+          :placeholder="t('DataCollection.Device.placeholderAttributeType')"
-        </el-select>
+          class="cursor-pointer"
+          @click="openAttributeTypeSelectDialog"
+        />
       </el-form-item>
       <el-form-item :label="t('DataCollection.Device.dataType')" prop="dataType">
         <el-select
@@ -53,11 +55,21 @@ v-model="formData.remark" :placeholder="t('DataCollection.Device.placeholderRema
       </el-button>
     </template>
   </Dialog>
+  <TableSelectDialog
+    ref="attributeTypeSelectDialogRef"
+    :title="t('DataCollection.Device.attributeType')"
+    :columns="attributeTypeColumns"
+    :fetch-api="fetchAttributeTypePage"
+    selection-type="single"
+    row-key="id"
+    @confirm="handleAttributeTypeSelectConfirm"
+  />
 </template>
 <script setup lang="ts">
 import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
 import { DeviceApi } from '@/api/iot/device'
 import { DeviceAttributeTypeApi, DeviceAttributeTypeVO } from '@/api/iot/deviceattributetype'
+import TableSelectDialog from '@/components/TableSelectDialog/TableSelectDialog.vue'
 import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit'
 
 const { t } = useI18n() // 国际化
@@ -68,18 +80,6 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const unitList = ref<ProductUnitVO[]>([]) // 产品单位列表
-const typeList = ref<DeviceAttributeTypeVO[]>([])
-const loadTypeList = async () => {
-  if (typeList.value.length > 0) {
-    return
-  }
-  try {
-    const data = await DeviceAttributeTypeApi.getDeviceAttributeTypePage({ pageNo: 1, pageSize: 10 })
-    typeList.value = data?.list ?? []
-  } catch {
-    typeList.value = []
-  }
-}
 
 const formData = ref({
   id: undefined as number | undefined,
@@ -101,12 +101,6 @@ const handleAttributeCodeInput = (val: string) => {
 }
 
 
-const handleAttributeTypeChange = (val: number | string) => {
-  const matched = typeList.value.find(
-    (item) => item.id === val || String(item.id) === String(val)
-  )
-  formData.value.typeName = matched?.name
-}
 
 const formRules = reactive({
   attributeCode: [
@@ -194,7 +188,6 @@ const open = async (type: string, id?: number, deviceId: number) => {
   // 产品单位
   unitList.value = await ProductUnitApi.getProductUnitSimpleList()
   formData.value.deviceId = deviceId
-  await loadTypeList()
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
@@ -203,20 +196,18 @@ const open = async (type: string, id?: number, deviceId: number) => {
       if (!(formData.value as any)?.deviceId) {
         ; (formData.value as any).deviceId = deviceId
       }
-
+      const currentAttributeType = (formData.value as any)?.attributeType
-      const currentType = (formData.value as any)?.attributeType
+      const currentTypeId = Number(currentAttributeType)
-      if (currentType !== undefined && currentType !== null && currentType !== '') {
+      if (Number.isFinite(currentTypeId) && currentTypeId > 0) {
-        const matched = typeList.value.find(
+        try {
-          (item) =>
+          const selectedType = await DeviceAttributeTypeApi.getDeviceAttributeType(currentTypeId)
-            item.id === currentType ||
+          ;(formData.value as any).attributeType = selectedType.id
-            String(item.id) === String(currentType) ||
+          ;(formData.value as any).typeName = selectedType.name
-            item.name === currentType ||
+        } catch {
-            item.code === currentType
+          // Keep the value returned by the detail API when the type no longer exists.
-        )
-        if (matched) {
-          ; (formData.value as any).attributeType = matched.id
-            ; (formData.value as any).typeName = matched.name
         }
+      } else if (!(formData.value as any)?.typeName && currentAttributeType != null) {
+        ;(formData.value as any).typeName = String(currentAttributeType)
       }
     } finally {
       formLoading.value = false
@@ -249,6 +240,35 @@ const submitForm = async () => {
   }
 }
 
+const attributeTypeSelectDialogRef = ref()
+const attributeTypeColumns = [
+  { label: t('DataCollection.DeviceAttributeType.code'), prop: 'code', minWidth: 140 },
+  { label: t('DataCollection.DeviceAttributeType.name'), prop: 'name', minWidth: 160 },
+  { label: t('DataCollection.DeviceAttributeType.sort'), prop: 'sort', minWidth: 100 },
+  { label: t('DataCollection.DeviceAttributeType.remark'), prop: 'remark', minWidth: 160 },
+  { label: t('DataCollection.DeviceAttributeType.createTime'), prop: 'createTime', minWidth: 180 }
+]
+
+const fetchAttributeTypePage = (params: Record<string, any>) => {
+  return DeviceAttributeTypeApi.getDeviceAttributeTypePage(params)
+}
+
+const openAttributeTypeSelectDialog = () => {
+  const currentTypeId = formData.value.attributeType
+  const currentTypeName = formData.value.typeName
+  const selectedRows = currentTypeId != null && currentTypeName
+    ? [{ id: currentTypeId, name: currentTypeName }]
+    : []
+  attributeTypeSelectDialogRef.value?.open(selectedRows)
+}
+
+const handleAttributeTypeSelectConfirm = (payload: { rows: DeviceAttributeTypeVO[] }) => {
+  const row = payload.rows?.[0]
+  if (!row) return
+  formData.value.attributeType = row.id
+  formData.value.typeName = row.name
+  formRef.value?.clearValidate('attributeType')
+}
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {

src/views/iot/devicemodel/components/DeviceModelAttributeForm.vue

@@ -19,15 +19,13 @@
           :placeholder="t('DataCollection.DeviceModel.placeholderAttributeName')" />
       </el-form-item>
       <el-form-item :label="t('DataCollection.DeviceModel.attributeType')" prop="attributeType">
-        <el-select
+        <el-input
-          v-model="formData.attributeType"
+          v-model="formData.typeName"
-          clearable
+          readonly
-          filterable
           :placeholder="t('DataCollection.DeviceModel.placeholderAttributeType')"
-          @change="handleAttributeTypeChange"
+          class="cursor-pointer"
-        >
+          @click="openAttributeTypeSelectDialog"
-          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
+        />
-        </el-select>
       </el-form-item>
       <el-form-item :label="t('DataCollection.DeviceModel.dataType')" prop="dataType">
         <el-select
@@ -78,11 +76,21 @@
       <el-button @click="dialogVisible = false">{{ t('DataCollection.DeviceModel.dialogCancel') }}</el-button>
     </template>
   </Dialog>
+  <TableSelectDialog
+    ref="attributeTypeSelectDialogRef"
+    :title="t('DataCollection.DeviceModel.attributeType')"
+    :columns="attributeTypeColumns"
+    :fetch-api="fetchAttributeTypePage"
+    selection-type="single"
+    row-key="id"
+    @confirm="handleAttributeTypeSelectConfirm"
+  />
 </template>
 <script setup lang="ts">
 import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
 import { DeviceModelAttributeApi } from '@/api/iot/devicemodelattribute'
 import { DeviceAttributeTypeApi, DeviceAttributeTypeVO } from '@/api/iot/deviceattributetype'
+import TableSelectDialog from '@/components/TableSelectDialog/TableSelectDialog.vue'
 import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit'
 
 /** 采集设备模型-点位管理 表单 */
@@ -91,20 +99,6 @@ defineOptions({ name: 'DeviceModelAttributeForm' })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
-const typeList = ref<DeviceAttributeTypeVO[]>([])
-const typeListLoaded = ref(false)
-const loadTypeList = async () => {
-  if (typeListLoaded.value) {
-    return
-  }
-  try {
-    const data = await DeviceAttributeTypeApi.getDeviceAttributeTypePage({ pageNo: 1, pageSize: 10 })
-    typeList.value = data?.list ?? []
-    typeListLoaded.value = true
-  } catch {
-    typeList.value = []
-  }
-}
 
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
@@ -124,7 +118,19 @@ const formData = ref({
 	  deviceModelId: undefined,
 	})
 const formRules = reactive({
-  attributeCode: [{ required: true, message: t('DataCollection.DeviceModel.validatorAttributeCodeRequired'), trigger: 'blur' }],
+  attributeCode: [
+    { required: true, message: t('DataCollection.DeviceModel.validatorAttributeCodeRequired'), trigger: 'blur' },
+    {
+      validator: (_rule: any, value: string, callback: any) => {
+        if (!value || /^[A-Za-z_][A-Za-z0-9_]*$/.test(value)) {
+          callback()
+          return
+        }
+        callback(new Error('仅支持英文字母、数字和下划线，且必须以字母或下划线开头'))
+      },
+      trigger: ['blur', 'change']
+    }
+  ],
   attributeName: [{ required: true, message: t('DataCollection.DeviceModel.validatorAttributeNameRequired'), trigger: 'blur' }],
   dataType: [{ required: true, message: t('DataCollection.DeviceModel.validatorDataTypeRequired'), trigger: 'change' }],
   attributeType: [{ required: true, message: '点位类型不能为空', trigger: 'change' }]
@@ -189,7 +195,6 @@ const open = async (type: string, id: number, modelId: number) => {
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
-  await loadTypeList()
   // 产品单位
   unitList.value = await ProductUnitApi.getProductUnitSimpleList()
   formData.value.deviceModelId = modelId
@@ -197,20 +202,18 @@ const open = async (type: string, id: number, modelId: number) => {
     formLoading.value = true
     try {
       formData.value = await DeviceModelAttributeApi.getDeviceModelAttribute(id)
-
+      const currentAttributeType = (formData.value as any)?.attributeType
-	      const currentType = (formData.value as any)?.attributeType
+      const currentTypeId = Number(currentAttributeType)
-	      if (currentType !== undefined && currentType !== null && currentType !== '') {
+      if (Number.isFinite(currentTypeId) && currentTypeId > 0) {
-	        const matched = typeList.value.find(
+        try {
-	          (item) =>
+          const selectedType = await DeviceAttributeTypeApi.getDeviceAttributeType(currentTypeId)
-	            item.id === currentType ||
+          ;(formData.value as any).attributeType = selectedType.id
-	            String(item.id) === String(currentType) ||
+          ;(formData.value as any).typeName = selectedType.name
-	            item.name === currentType ||
+        } catch {
-	            item.code === currentType
+          // Keep the value returned by the detail API when the type no longer exists.
-	        )
-	        if (matched) {
-	          ;(formData.value as any).attributeType = matched.id
-	          ;(formData.value as any).typeName = matched.name
         }
+      } else if (!(formData.value as any)?.typeName && currentAttributeType != null) {
+        ;(formData.value as any).typeName = String(currentAttributeType)
       }
     } finally {
       formLoading.value = false
@@ -243,13 +246,36 @@ const submitForm = async () => {
   }
 }
 
-const handleAttributeTypeChange = (val: number | string) => {
+
-	  const matched = typeList.value.find(
+const attributeTypeSelectDialogRef = ref()
-	    (item) => item.id === val || String(item.id) === String(val)
+const attributeTypeColumns = [
-	  )
+  { label: t('DataCollection.DeviceAttributeType.code'), prop: 'code', minWidth: 140 },
-	  ;(formData.value as any).typeName = matched?.name
+  { label: t('DataCollection.DeviceAttributeType.name'), prop: 'name', minWidth: 160 },
+  { label: t('DataCollection.DeviceAttributeType.sort'), prop: 'sort', minWidth: 100 },
+  { label: t('DataCollection.DeviceAttributeType.remark'), prop: 'remark', minWidth: 160 },
+  { label: t('DataCollection.DeviceAttributeType.createTime'), prop: 'createTime', minWidth: 180 }
+]
+
+const fetchAttributeTypePage = (params: Record<string, any>) => {
+  return DeviceAttributeTypeApi.getDeviceAttributeTypePage(params)
 }
 
+const openAttributeTypeSelectDialog = () => {
+  const currentTypeId = formData.value.attributeType
+  const currentTypeName = formData.value.typeName
+  const selectedRows = currentTypeId != null && currentTypeName
+    ? [{ id: currentTypeId, name: currentTypeName }]
+    : []
+  attributeTypeSelectDialogRef.value?.open(selectedRows)
+}
+
+const handleAttributeTypeSelectConfirm = (payload: { rows: DeviceAttributeTypeVO[] }) => {
+  const row = payload.rows?.[0]
+  if (!row) return
+  formData.value.attributeType = row.id as any
+  formData.value.typeName = row.name
+  formRef.value?.clearValidate('attributeType')
+}
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {