feat：采集设备/子列表添加批量删除按钮

src/api/iot/device/index.ts

@@ -51,8 +51,8 @@ export const DeviceApi = {
   },
 
   // 删除物联设备
-  deleteDevice: async (id: number) => {
+  deleteDevice: async (ids: string) => {
-    return await request.delete({ url: `/iot/device/delete?id=` + id })
+    return await request.delete({ url: `/iot/device/delete?ids=` + ids })
   },
 
   // 复制物联设备
@@ -82,8 +82,8 @@ export const DeviceApi = {
   },
 
   // 删除设备属性
-  deleteDeviceAttribute: async (id: number) => {
+  deleteDeviceAttribute: async (ids: string) => {
-    return await request.delete({ url: `/iot/device-contact-model/delete?id=` + id })
+    return await request.delete({ url: `/iot/device-contact-model/delete?ids=` + ids })
   },
 
   // 获得设备属性

src/api/iot/devicemodel/index.ts

@@ -36,6 +36,11 @@ export const DeviceModelApi = {
     return await request.delete({ url: `/iot/device-model/delete?id=` + id })
   },
 
+  // 复制采集设备模型
+  copyDeviceModel: async (id: number) => {
+    return await request.post({ url: `/iot/device-model/copy`, params: { id } })
+  },
+
   // 导出采集设备模型 Excel
   exportDeviceModel: async (params) => {
     return await request.download({ url: `/iot/device-model/export-excel`, params })

src/views/iot/device/DeviceForm.vue

@@ -76,9 +76,9 @@
         <el-form-item label="采集周期/s" prop="sampleCycle">
           <el-input v-model="formData.sampleCycle" placeholder="请输入采集周期" />
         </el-form-item>
-        <el-form-item label="备注" prop="remark">
+        <!-- <el-form-item label="备注" prop="remark">
           <el-input v-model="formData.remark" placeholder="请输入备注" />
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="是否启用" prop="isEnable">
           <el-radio-group v-model="formData.isEnable">
             <el-radio

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

@@ -47,12 +47,16 @@
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
+        <el-button type="danger" plain @click="handleBatchDelete" v-hasPermi="['iot:device:delete']">
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
+        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
 
   <ContentWrap>
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       :stripe="true"
@@ -135,6 +139,8 @@ import { DeviceAttributeTypeApi, DeviceAttributeTypeVO } from '@/api/iot/devicea
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
+const tableRef = ref()
+
 const props = defineProps<{
   deviceId?: number // 设备id（主表的关联字段）
 }>()
@@ -227,18 +233,32 @@ const openForm = (type: string, id?: number) => {
 }
 
 /** 删除按钮操作 */
-const handleDelete = async (id: number) => {
+const buildIdsParam = (ids: number | number[]) => {
+  return Array.isArray(ids) ? ids.join(',') : String(ids)
+}
+
+const handleDelete = async (ids: number | number[]) => {
   try {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await DeviceApi.deleteDeviceAttribute(id)
+    await DeviceApi.deleteDeviceAttribute(buildIdsParam(ids))
     message.success(t('common.delSuccess'))
+    selectedIds.value = []
+    tableRef.value?.clearSelection?.()
     // 刷新列表
     await getList()
   } catch {}
 }
 
+const handleBatchDelete = async () => {
+  if (!selectedIds.value.length) {
+    message.error('请选择需要删除的数据')
+    return
+  }
+  await handleDelete(selectedIds.value)
+}
+
 onMounted(async () => {
   try {
     const data = await DeviceAttributeTypeApi.getDeviceAttributeTypePage({ pageNo: 1, pageSize: 10 })

src/views/iot/device/index.vue

@@ -74,6 +74,9 @@
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
+        <el-button type="danger" plain @click="handleBatchDelete" v-hasPermi="['iot:device:delete']">
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
+        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -81,13 +84,17 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      row-key="id"
+      @selection-change="handleSelectionChange"
     >
-      <el-table-column label="设备编号" align="left" prop="deviceCode" width="200px"/>
+      <el-table-column type="selection" width="55" reserve-selection />
-      <el-table-column label="设备名称" align="left" prop="deviceName" width="250px"/>
+      <el-table-column label="设备编号" align="left" prop="deviceCode"/>
+      <el-table-column label="设备名称" align="left" prop="deviceName"/>
       <!-- <el-table-column label="设备类型" align="left" prop="deviceType" width="150px"> -->
         <!-- <template #default="scope">
           <dict-tag :type="DICT_TYPE.IOT_DEVICE_TYPE" :value="scope.row.deviceType" />
@@ -95,15 +102,15 @@
       </el-table-column> -->
       <el-table-column label="采集协议" align="left" prop="protocol" width="250px">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.IOT_PROTOCOL" :value="scope.row.procotol" />
+          <dict-tag :type="DICT_TYPE.IOT_PROTOCOL" :value="scope.row.protocol" />
         </template>
       </el-table-column>
-      <el-table-column label="连接状态" align="center" prop="status">
+      <el-table-column label="连接状态" align="center" prop="status" width="200px">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.IOT_GATEWAY_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column label="采集周期(s)" align="left" prop="sampleCycle" width="150px"/>
+      <el-table-column label="采集周期(s)" align="left" prop="sampleCycle" width="200px"/>
       
       <!-- <el-table-column label="读主题" align="center" prop="readTopic" />
       <el-table-column label="写主题" align="center" prop="writeTopic" />
@@ -125,7 +132,7 @@
         :formatter="dateFormatter"
         width="170px"
       /> -->
-      <el-table-column label="是否启用" align="center" prop="isEnable"  fixed="right">
+      <el-table-column label="是否启用" align="center" prop="isEnable"  fixed="right" width="200px">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isEnable" />
         </template>
@@ -205,6 +212,8 @@ defineOptions({ name: 'Device' })
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
+const tableRef = ref()
+
 const loading = ref(true) // 列表的加载中
 const list = ref<DeviceVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
@@ -228,6 +237,11 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 
+const selectedIds = ref<number[]>([])
+const handleSelectionChange = (rows: any[]) => {
+  selectedIds.value = rows?.map((row) => row.id).filter((id) => id !== undefined) ?? []
+}
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -259,18 +273,37 @@ const openForm = (type: string, id?: number) => {
 }
 
 /** 删除按钮操作 */
-const handleDelete = async (id: number) => {
+const buildIdsParam = (ids: number | number[]) => {
+  return Array.isArray(ids) ? ids.join(',') : String(ids)
+}
+
+const handleDelete = async (ids: number | number[]) => {
   try {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await DeviceApi.deleteDevice(id)
+    const idsParam = buildIdsParam(ids)
+    await DeviceApi.deleteDevice(idsParam)
     message.success(t('common.delSuccess'))
+    selectedIds.value = []
+    tableRef.value?.clearSelection?.()
+    if (attributeDeviceId.value && idsParam.split(',').includes(String(attributeDeviceId.value))) {
+      attributeDeviceId.value = undefined
+      attributeDeviceName.value = ''
+    }
     // 刷新列表
     await getList()
   } catch {}
 }
 
+const handleBatchDelete = async () => {
+  if (!selectedIds.value.length) {
+    message.error('请选择需要删除的数据')
+    return
+  }
+  await handleDelete(selectedIds.value)
+}
+
 const handleCopy = async (id: number) => {
   try {
     await DeviceApi.copyDevice(id)

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

@@ -42,7 +42,7 @@
               />
             </el-select>
           </el-form-item>
-      <el-form-item label="寄存器地址" prop="address">
+      <!-- <el-form-item label="寄存器地址" prop="address">
         <el-input
           v-model="queryParams.address"
           placeholder="请输入寄存器地址"
@@ -50,8 +50,8 @@
           @keyup.enter="handleQuery"
           class="!w-240px"
         />
-      </el-form-item>
+      </el-form-item> -->
-      <el-form-item label="创建时间" prop="createTime">
+      <!-- <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
           value-format="YYYY-MM-DD HH:mm:ss"
@@ -61,7 +61,7 @@
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
           class="!w-220px"
         />
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -78,7 +78,7 @@
           plain
           @click="handleExport"
           :loading="exportLoading"
-          v-hasPermi="['iot:device-model-attribute:export']"
+          v-hasPermi="['iot:device-model:export']"
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
@@ -89,7 +89,7 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="ID" align="center" prop="id" />
+      <!-- <el-table-column label="ID" align="center" prop="id" /> -->
       <el-table-column label="点位编码" align="center" prop="attributeCode" />
       <el-table-column label="点位名称" align="center" prop="attributeName" />
       <el-table-column label="点位类型" align="center" prop="attributeType" />
@@ -106,13 +106,13 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" min-width="120px">
+      <el-table-column label="操作" align="center" width="150px" fixed="right">
         <template #default="scope">
           <el-button
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['iot:device-model-attribute:update']"
+            v-hasPermi="['iot:device-model:update']"
           >
             编辑
           </el-button>
@@ -120,7 +120,7 @@
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['iot:device-model-attribute:delete']"
+            v-hasPermi="['iot:device-model:delete']"
           >
             删除
           </el-button>
@@ -191,7 +191,7 @@ watch(
 )
 
 /** 查询列表 */
-const getList = async () => {
+async function getList() {
   loading.value = true
   try {
     const data = await DeviceModelAttributeApi.getDeviceModelAttributePage(queryParams)
@@ -203,7 +203,7 @@ const getList = async () => {
 }
 
 /** 搜索按钮操作 */
-const handleQuery = () => {
+function handleQuery() {
   if (!props.id) {
     return
   }
@@ -266,4 +266,4 @@ onMounted(async () => {
 
 })
 
-</script>
+</script>

src/views/iot/devicemodel/index.vue

@@ -43,7 +43,7 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item label="备注" prop="remark">
+      <!-- <el-form-item label="备注" prop="remark">
         <el-input
           v-model="queryParams.remark"
           placeholder="请输入备注"
@@ -51,8 +51,8 @@
           @keyup.enter="handleQuery"
           class="!w-240px"
         />
-      </el-form-item>
+      </el-form-item> -->
-      <el-form-item label="创建时间" prop="createTime">
+      <!-- <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
           value-format="YYYY-MM-DD HH:mm:ss"
@@ -62,7 +62,7 @@
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
           class="!w-220px"
         />
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -90,11 +90,15 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table
-v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" highlight-current-row
+      v-loading="loading"
-      @current-change="handleCurrentChange">
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      highlight-current-row
+    >
       <el-table-column label="模型编码" align="center" prop="code" />
       <el-table-column label="模型名称" align="center" prop="name" />
-       <el-table-column align="center" label="通讯协议" prop="protocol'" min-width="150">
+      <el-table-column align="center" label="通讯协议" prop="protocol" min-width="150">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.IOT_PROTOCOL" :value="scope.row.protocol" />
         </template>
@@ -109,6 +113,15 @@ v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" hi
       />
       <el-table-column label="操作" align="center" min-width="120px">
         <template #default="scope">
+          <el-button link type="primary" @click.stop="handleShowAttribute(scope.row)">点位</el-button>
+          <el-button
+            link
+            type="primary"
+            @click="handleCopy(scope.row.id)"
+            v-hasPermi="['iot:device-model:create']"
+          >
+            复制
+          </el-button>
           <el-button
             link
             type="primary"
@@ -136,9 +149,14 @@ v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" hi
       @pagination="getList"
     />
   </ContentWrap>
-  <!-- 采集点列表 -->
+
   <ContentWrap>
-    <ModelAttributeList :id="currentRow.id" />
+    <el-tabs model-value="modelAttribute">
+      <el-tab-pane :label="modelAttributeTabLabel" name="modelAttribute">
+        <ModelAttributeList v-if="attributeModelId" :id="attributeModelId" />
+        <el-empty v-else description="请点击设备模型列表的“点位”查看采集点" />
+      </el-tab-pane>
+    </el-tabs>
   </ContentWrap>
   <!-- 表单弹窗：添加/修改 -->
   <DeviceModelForm ref="formRef" @success="getList" />
@@ -231,14 +249,31 @@ const handleExport = async () => {
   }
 }
 
-/** 选中行操作 */
+const attributeModelId = ref<number | undefined>(undefined)
-const currentRow = ref({}) // 选中行
+const attributeModelName = ref('')
-const handleCurrentChange = (row) => {
+
-  currentRow.value = row
+const modelAttributeTabLabel = computed(() => {
+  if (!attributeModelId.value) {
+    return '采集点'
+  }
+  return attributeModelName.value ? `采集点：${attributeModelName.value}` : '采集点'
+})
+
+const handleShowAttribute = (row: any) => {
+  attributeModelId.value = row?.id
+  attributeModelName.value = row?.name ?? ''
+}
+
+const handleCopy = async (id: number) => {
+  try {
+    await DeviceModelApi.copyDeviceModel(id)
+    message.success('复制成功')
+    await getList()
+  } catch {}
 }
 
 /** 初始化 **/
 onMounted(() => {
   getList()
 })
-</script>
+</script>