feat：采集设备模型添加导入按钮

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

@@ -4,27 +4,20 @@
     <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="120px">
       <el-form-item :label="t('DataCollection.DeviceModel.attributeCode')" prop="attributeCode">
         <el-input
-          v-model="queryParams.attributeCode"
+v-model="queryParams.attributeCode"
-          :placeholder="t('DataCollection.DeviceModel.placeholderAttributeCode')"
+          :placeholder="t('DataCollection.DeviceModel.placeholderAttributeCode')" clearable @keyup.enter="handleQuery"
-          clearable
-          @keyup.enter="handleQuery"
           class="!w-240px" />
       </el-form-item>
       <el-form-item :label="t('DataCollection.DeviceModel.attributeName')" prop="attributeName">
         <el-input
-          v-model="queryParams.attributeName"
+v-model="queryParams.attributeName"
-          :placeholder="t('DataCollection.DeviceModel.placeholderAttributeName')"
+          :placeholder="t('DataCollection.DeviceModel.placeholderAttributeName')" clearable @keyup.enter="handleQuery"
-          clearable
-          @keyup.enter="handleQuery"
           class="!w-240px" />
       </el-form-item>
       <el-form-item :label="t('DataCollection.DeviceModel.attributeType')" prop="attributeType">
         <el-select
-          v-model="queryParams.attributeType"
+v-model="queryParams.attributeType" clearable filterable
-          clearable
+          :placeholder="t('DataCollection.DeviceModel.placeholderAttributeType')" class="!w-240px">
-          filterable
-          :placeholder="t('DataCollection.DeviceModel.placeholderAttributeType')"
-          class="!w-240px">
           <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </el-form-item>
@@ -58,6 +51,9 @@
         <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['iot:device-model:create']">
           <Icon icon="ep:plus" class="mr-5px" /> {{ t('DataCollection.DeviceModel.create') }}
         </el-button>
+        <el-button type="warning" plain @click="openImport" v-hasPermi="['iot:device-model:import']">
+          <Icon icon="ep:upload" class="mr-5px" /> {{ t('action.import') }}
+        </el-button>
         <el-button
 type="success" plain @click="handleExport" :loading="exportLoading"
           v-hasPermi="['iot:device-model:export']">
@@ -87,7 +83,9 @@ ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-to
       <el-table-column :label="t('DataCollection.DeviceModel.ratio')" align="center" prop="ratio" />
       <el-table-column :label="t('DataCollection.DeviceModel.remark')" align="center" prop="remark" />
       <!-- <el-table-column label="采集设备模型id" align="center" prop="deviceModelId" /> -->
-      <el-table-column :label="t('DataCollection.DeviceModel.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" />
+      <el-table-column
+:label="t('DataCollection.DeviceModel.createTime')" align="center" prop="createTime"
+        :formatter="dateFormatter" width="180px" />
       <el-table-column :label="t('DataCollection.DeviceModel.operate')" align="center" width="150px" fixed="right">
         <template #default="scope">
           <el-button
@@ -103,12 +101,43 @@ link type="primary" @click="openForm('update', scope.row.id)"
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
       @pagination="getList" />
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
   <DeviceModelAttributeForm ref="formRef" @success="getList" />
+
+  <!-- 导入弹窗 -->
+  <Dialog v-model="importDialogVisible" :title="t('action.import')" width="400">
+    <el-upload
+ref="uploadRef" v-model:file-list="importFileList" :action="importUrl + '?updateSupport=' + updateSupport" :auto-upload="false"
+      :disabled="importLoading" :headers="uploadHeaders" :limit="1" :on-error="handleImportError"
+      :on-exceed="handleImportExceed" :on-success="handleImportSuccess" accept=".xlsx, .xls" drag>
+      <Icon icon="ep:upload" />
+      <div class="el-upload__text">
+        将文件拖到此处，或点击上传
+      </div>
+      <template #tip>
+        <div class="el-upload__tip text-center">
+          <div class="el-upload__tip">
+            <el-checkbox v-model="updateSupport" />
+            是否更新已存在的数据
+          </div>
+          <span>仅支持 .xlsx, .xls 格式</span>
+          <el-link
+:underline="false" style="font-size: 12px; vertical-align: baseline" type="primary"
+            @click="importTemplate">
+            下载导入模板
+          </el-link>
+        </div>
+      </template>
+    </el-upload>
+    <template #footer>
+      <el-button :disabled="importLoading" type="primary" @click="submitImport">{{ t('common.ok') }}</el-button>
+      <el-button @click="importDialogVisible = false">{{ t('common.cancel') }}</el-button>
+    </template>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
@@ -117,6 +146,7 @@ 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 { getAccessToken, getTenantId } from '@/utils/auth'
 
 const props = defineProps<{
   id?: number // id（主表的关联字段）
@@ -150,6 +180,15 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 
+const importDialogVisible = ref(false)
+const importLoading = ref(false)
+const uploadRef = ref()
+const importUrl =
+  import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/iot/device-model-attribute/import'
+const uploadHeaders = ref()
+const importFileList = ref([])
+const updateSupport = ref(0)
+
 const selectedIds = ref<number[]>([])
 const handleSelectionChange = (rows: any[]) => {
   selectedIds.value = rows?.map((row) => row.id).filter((id) => id !== undefined) ?? []
@@ -208,6 +247,17 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id, props.id)
 }
 
+const openImport = () => {
+  if (!props.id) {
+    message.error('请选择一个采集设备模型')
+    return
+  }
+  importDialogVisible.value = true
+  importLoading.value = false
+  importFileList.value = []
+  updateSupport.value = 0
+}
+
 
 /** 删除按钮操作 */
 const buildIdsParam = (ids: number | number[]) => {
@@ -255,6 +305,45 @@ const handleExport = async () => {
   }
 }
 
+const submitImport = async () => {
+  if (importFileList.value.length === 0) {
+    message.error('请选择导入文件')
+    return
+  }
+  uploadHeaders.value = {
+    Authorization: 'Bearer ' + getAccessToken(),
+    tenantId: getTenantId(),
+  }
+  importLoading.value = true
+  uploadRef.value?.submit()
+}
+
+const handleImportSuccess = (response: any) => {
+  if (!response || response.code !== 0) {
+    message.error(response?.msg || '导入失败')
+    importLoading.value = false
+    return
+  }
+  message.success('导入成功')
+  importLoading.value = false
+  importDialogVisible.value = false
+  getList()
+}
+
+const handleImportError = () => {
+  message.error('导入失败')
+  importLoading.value = false
+}
+
+const handleImportExceed = () => {
+  message.error('只能上传一个文件')
+}
+
+const importTemplate = async () => {
+  const res = await DeviceModelAttributeApi.importDeviceModelAttributeTemplate()
+  download.excel(res, '采集设备模型-点位导入模板.xls')
+}
+
 /** 初始化 **/
 onMounted(async () => {
   typeList.value = await DeviceAttributeTypeApi.getDeviceAttributeTypeList()