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

.vscode/settings.json

@@ -86,7 +86,7 @@
     "source.fixAll.eslint": "explicit"
   },
   "[vue]": {
-    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+    "editor.defaultFormatter": "Vue.volar"
   },
   "i18n-ally.localesPaths": ["src/locales"],
   "i18n-ally.keystyle": "nested",

src/api/iot/devicemodel/index.ts

@@ -32,8 +32,8 @@ export const DeviceModelApi = {
   },
 
   // 删除采集设备模型
-  deleteDeviceModel: async (id: number) => {
+  deleteDeviceModel: async (ids: string) => {
-    return await request.delete({ url: `/iot/device-model/delete?id=` + id })
+    return await request.delete({ url: `/iot/device-model/delete?ids=` + ids })
   },
 
   // 复制采集设备模型
@@ -46,8 +46,8 @@ export const DeviceModelApi = {
     return await request.download({ url: `/iot/device-model/export-excel`, params })
   },
 
-      // 获得采集设备模型列表
+  // 获得采集设备模型列表
-      getDeviceModelList: async () => {
+  getDeviceModelList: async () => {
-        return await request.get({ url: `/iot/device-model/list`})
+    return await request.get({ url: `/iot/device-model/list` })
-      },
+  },
 }

src/api/iot/devicemodelattribute/index.ts

@@ -37,8 +37,8 @@ export const DeviceModelAttributeApi = {
   },
 
   // 删除采集设备模型-点位管理
-  deleteDeviceModelAttribute: async (id: number) => {
+  deleteDeviceModelAttribute: async (ids: string) => {
-    return await request.delete({ url: `/iot/device-model-attribute/delete?id=` + id })
+    return await request.delete({ url: `/iot/device-model-attribute/delete?ids=` + ids })
   },
 
   // 导出采集设备模型-点位管理 Excel

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

@@ -12,23 +12,17 @@
       </el-form-item>
       <el-form-item label="点位名称" prop="attributeName">
         <el-input v-model="formData.attributeName" placeholder="请输入点位名称" />
-
+      </el-form-item>
-        <el-form-item label="点位类型" prop="attributeType">
+      <el-form-item label="点位类型" prop="attributeType">
-            <el-select
+        <el-select
-              v-model="formData.attributeType"
+          v-model="formData.attributeType"
-              clearable
+          clearable
-              filterable
+          filterable
-              placeholder="请选择点位类型"
+          placeholder="请选择点位类型"
-              class="!w-180px"
+          class="!w-180px"
-            >
+        >
-              <el-option
+          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
-                v-for="item in typeList"
+        </el-select>
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
       </el-form-item>
       <el-form-item label="数据类型" prop="dataType">
         <el-select v-model="formData.dataType" placeholder="请选择数据类型">
@@ -44,7 +38,7 @@
         <el-input v-model="formData.address" placeholder="请输入寄存器地址" />
       </el-form-item>
 
-<el-form-item label="单位" prop="dataUnit">
+      <el-form-item label="单位" prop="dataUnit">
         <el-select v-model="formData.dataUnit" placeholder="请选择单位">
           <el-option
             v-for="dict in getStrDictOptions(DICT_TYPE.IOT_DEVICE_ATTRIBUTE_UNIT)"
@@ -68,8 +62,9 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-  import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
+import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
-import { DeviceModelAttributeApi, DeviceModelAttributeVO } from '@/api/iot/devicemodelattribute'
+import { DeviceModelAttributeApi } from '@/api/iot/devicemodelattribute'
+import { DeviceAttributeTypeApi, DeviceAttributeTypeVO } from '@/api/iot/deviceattributetype'
 
 /** 采集设备模型-点位管理 表单 */
 defineOptions({ name: 'DeviceModelAttributeForm' })
@@ -77,6 +72,21 @@ 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('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -100,13 +110,13 @@ const formRules = reactive({
 const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
-const open = async (type: string, id: number,modelId:number) => {
+const open = async (type: string, id: number, modelId: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
+  await loadTypeList()
   formData.value.deviceModelId = modelId
-  console.log('formData.value.deviceModelId',formData.value.deviceModelId)
   // 修改时，设置数据
   if (id) {
     formLoading.value = true

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

@@ -73,6 +73,14 @@
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
+        <el-button
+          type="danger"
+          plain
+          @click="handleBatchDelete"
+          v-hasPermi="['iot:device-model:delete']"
+        >
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
+        </el-button>
         <el-button
           type="success"
           plain
@@ -88,7 +96,16 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table
+      ref="tableRef"
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      row-key="id"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" reserve-selection />
       <!-- <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" />
@@ -145,7 +162,7 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { DeviceModelAttributeApi, DeviceModelAttributeVO } from '@/api/iot/devicemodelattribute'
 import DeviceModelAttributeForm from './DeviceModelAttributeForm.vue'
-import {DeviceAttributeTypeApi, DeviceAttributeTypeVO} from "@/api/iot/deviceattributetype";
+import { DeviceAttributeTypeApi, DeviceAttributeTypeVO } from '@/api/iot/deviceattributetype'
 
 const props = defineProps<{
   id?: number // id（主表的关联字段）
@@ -156,6 +173,8 @@ const typeList = ref<DeviceAttributeTypeVO[]>([]) // 列表
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
+const tableRef = ref()
+
 const loading = ref(false) // 列表的加载中
 const list = ref<DeviceModelAttributeVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
@@ -177,6 +196,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) ?? []
+}
+
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
   () => props.id,
@@ -232,18 +256,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 DeviceModelAttributeApi.deleteDeviceModelAttribute(id)
+    await DeviceModelAttributeApi.deleteDeviceModelAttribute(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)
+}
+
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {

src/views/iot/devicemodel/index.vue

@@ -1,45 +1,20 @@
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
-    <el-form
+    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
       <el-form-item label="模型编码" prop="code">
-        <el-input
+        <el-input v-model="queryParams.code" placeholder="请输入模型编码" clearable @keyup.enter="handleQuery"
-          v-model="queryParams.code"
+          class="!w-240px" />
-          placeholder="请输入模型编码"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
       </el-form-item>
       <el-form-item label="模型名称" prop="name">
-        <el-input
+        <el-input v-model="queryParams.name" placeholder="请输入模型名称" clearable @keyup.enter="handleQuery"
-          v-model="queryParams.name"
+          class="!w-240px" />
-          placeholder="请输入模型名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
       </el-form-item>
 
-<el-form-item label="通讯协议" prop="protocol">
+      <el-form-item label="通讯协议" prop="protocol">
-        <el-select
+        <el-select v-model="queryParams.protocol" placeholder="请选择通讯协议" clearable class="!w-240px">
-          v-model="queryParams.protocol"
+          <el-option v-for="dict in getStrDictOptions(DICT_TYPE.IOT_PROTOCOL)" :key="dict.value" :label="dict.label"
-          placeholder="请选择通讯协议"
+            :value="dict.value" />
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getStrDictOptions(DICT_TYPE.IOT_PROTOCOL)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
         </el-select>
       </el-form-item>
 
@@ -64,23 +39,20 @@
         />
       </el-form-item> -->
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="handleQuery">
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+          <Icon icon="ep:search" class="mr-5px" /> 搜索
-        <el-button
+        </el-button>
-          type="primary"
+        <el-button @click="resetQuery">
-          plain
+          <Icon icon="ep:refresh" class="mr-5px" /> 重置
-          @click="openForm('create')"
+        </el-button>
-          v-hasPermi="['iot:device-model:create']"
+        <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['iot:device-model:create']">
-        >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
-        <el-button
+        <el-button type="danger" plain @click="handleBatchDelete" v-hasPermi="['iot:device-model:delete']">
-          type="success"
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
-          plain
+        </el-button>
-          @click="handleExport"
+        <el-button type="success" plain @click="handleExport" :loading="exportLoading"
-          :loading="exportLoading"
+          v-hasPermi="['iot:device-model:export']">
-          v-hasPermi="['iot:device-model:export']"
-        >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
       </el-form-item>
@@ -89,13 +61,9 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table
+    <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
-      v-loading="loading"
+      highlight-current-row row-key="id" @selection-change="handleSelectionChange">
-      :data="list"
+      <el-table-column type="selection" width="55" reserve-selection />
-      :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">
@@ -104,50 +72,26 @@
         </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column
+      <!-- <el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormatter" width="180px" /> -->
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
       <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
+          <el-button link type="primary" @click="handleCopy(scope.row.id)" v-hasPermi="['iot:device-model:create']">
-            link
-            type="primary"
-            @click="handleCopy(scope.row.id)"
-            v-hasPermi="['iot:device-model:create']"
-          >
             复制
           </el-button>
-          <el-button
+          <el-button link type="primary" @click="openForm('update', scope.row.id)"
-            link
+            v-hasPermi="['iot:device-model:update']">
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['iot:device-model:update']"
-          >
             编辑
           </el-button>
-          <el-button
+          <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['iot:device-model:delete']">
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['iot:device-model:delete']"
-          >
             删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <Pagination
+    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
-      :total="total"
+      @pagination="getList" />
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
   </ContentWrap>
 
   <ContentWrap>
@@ -163,7 +107,7 @@
 </template>
 
 <script setup lang="ts">
-  import { getStrDictOptions,DICT_TYPE } from '@/utils/dict'
+import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { DeviceModelApi, DeviceModelVO } from '@/api/iot/devicemodel'
@@ -176,6 +120,8 @@ defineOptions({ name: 'DeviceModel' })
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
+const tableRef = ref()
+
 const loading = ref(true) // 列表的加载中
 const list = ref<DeviceModelVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
@@ -191,6 +137,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
@@ -222,16 +173,30 @@ 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 DeviceModelApi.deleteDeviceModel(id)
+    await DeviceModelApi.deleteDeviceModel(buildIdsParam(ids))
     message.success(t('common.delSuccess'))
+    selectedIds.value = []
+    tableRef.value?.clearSelection?.()
     // 刷新列表
     await getList()
-  } catch {}
+  } catch { }
+}
+
+const handleBatchDelete = async () => {
+  if (!selectedIds.value.length) {
+    message.error('请选择需要删除的数据')
+    return
+  }
+  await handleDelete(selectedIds.value)
 }
 
 /** 导出按钮操作 */
@@ -269,7 +234,7 @@ const handleCopy = async (id: number) => {
     await DeviceModelApi.copyDeviceModel(id)
     message.success('复制成功')
     await getList()
-  } catch {}
+  } catch { }
 }
 
 /** 初始化 **/