批量导入被检设备

2025-01-16 19:45:48 +08:00
parent fe1bb04922
commit 07a5e32579
4 changed files with 215 additions and 194 deletions
--- a/frontend/src/api/device/device/index.ts
+++ b/frontend/src/api/device/device/index.ts
@@ -31,33 +31,33 @@ export const deletePqDev = (params: string[]) => {

 // //导入被检设备(比对)
 // export const importPqDev=(params: Device.ReqPqDevParams)=>{
-//     return http.upload(`/pqDev/import`, params)
+//    return http.upload(`/pqDev/import`, params)
 // }
 //   //导入比对式被检设备
 //   export const importContrastPqDev=(params: Device.ReqPqDevParams)=>{
-//     return http.upload(`/pqDev/importContrast`, params)
+//    return http.upload(`/pqDev/importContrast`, params)
 //   }

-  //导出灿能二楼设备
-  export const exportCNDev=(params: Device.ReqPqDevParams)=>{
-    return http.download(`/pqDev/exportCNDev`, params)
-  }
+//导出灿能二楼设备
+export const exportCNDev = (params: Device.ReqPqDevParams) => {
+  return http.download(`/pqDev/exportCNDev`, params)
+}

-  // 下载灿能二楼设备导入文件模板
-  export const downloadCNDevTemplate = () => {
-    return http.download(`/pqDev/downloadCNDevTemplate`)
-  }
+// 下载灿能二楼设备导入文件模板
+export const downloadCNDevTemplate = () => {
+  return http.download(`/pqDev/downloadCNDevTemplate`)
+}

-  //导入灿能二楼设备
-  export const importCNDev=(params: Device.ReqPqDevParams)=>{
-    return http.upload(`/pqDev/importCNDev`, params)
-  }
+//导入灿能二楼设备
+export const importCNDev = (params: Device.ReqPqDevParams) => {
+  return http.uploadExcel(`/pqDev/importCNDev`, params)
+}
 //根据设备类型决定（电源、icd、模板、通道数、额定电压、额定电流）；
 export const getPqDev = () => {
  return http.post(`/devType/list`)
 }

 //被检设备归档
-export const documentedPqDev=(ids:string[])=>{
+export const documentedPqDev = (ids: string[]) => {
  return http.post(`/pqDev/documented`, ids)
 }
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -42,7 +42,7 @@ class RequestHttp {
        config.loading ?? (config.loading = true)
        config.loading && showFullScreenLoading()
        if (config.headers && typeof config.headers.set === 'function') {
-          config.headers.set('Authorization', 'Bearer '+userStore.token)
+          config.headers.set('Authorization', 'Bearer ' + userStore.token)
        }
        return config
      },
@@ -63,7 +63,7 @@ class RequestHttp {
        // 登陆失效
        if (data.code == ResultEnum.OVERDUE) {
          userStore.setToken('')
-            userStore.setUserInfo({name: ''})
+          userStore.setUserInfo({ name: '' })
          router.replace(LOGIN_URL)
          ElMessage.error(data.message)
          return Promise.reject(data)
@@ -115,9 +115,24 @@ class RequestHttp {
  }

  upload(url: string, params?: object, _object = {}): Promise<BlobPart> {
-    return this.service.post(url, params, { ..._object, headers: { 'Content-Type': 'multipart/form-data' } })
+    return this.service.post(url, params, {
+      ..._object,
+      headers: { 'Content-Type': 'multipart/form-data' }
+    })
  }

+  /**
+   * 针对excel的上传，默认返回的是blob类型，Excel没问题时返回json特殊处理
+   */
+  uploadExcel(url: string, params?: object, _object = {}): Promise<BlobPart> {
+    return this.service.post(url, params, {
+      ..._object,
+      headers: { 'Content-Type': 'multipart/form-data' },
+      responseType: 'blob',
+    })
+  }
+
+
 }

 export default new RequestHttp(config)
--- a/frontend/src/components/ImportExcel/index.vue
+++ b/frontend/src/components/ImportExcel/index.vue
@@ -1,49 +1,48 @@
 <template>
-  <el-dialog v-model="dialogVisible" :title="`批量添加${parameter.title}`" :destroy-on-close="true" width="580px" draggable>
-    <el-form class="drawer-multiColumn-form" label-width="100px">
-      <el-form-item label="模板下载 :">
-        <el-button type="primary" :icon="Download" @click="downloadTemp"> 点击下载 </el-button>
+  <el-dialog v-model='dialogVisible' :title='`批量添加${parameter.title}`' :destroy-on-close='true' width='580px'
+             draggable>
+    <el-form class='drawer-multiColumn-form' label-width='100px'>
+      <el-form-item label='模板下载 :'>
+        <el-button type='primary' :icon='Download' @click='downloadTemp'> 点击下载</el-button>
      </el-form-item>
-      <el-form-item label="文件上传 :">
+      <el-form-item label='文件上传 :'>
        <el-upload
-          action="#"
-          class="upload"
-          :drag="true"
-          :limit="excelLimit"
-          :multiple="true"
-          :show-file-list="true"
-          :http-request="uploadExcel"
-          :before-upload="beforeExcelUpload"
-          :on-exceed="handleExceed"
-          :on-success="excelUploadSuccess"
-          :on-error="excelUploadError"
+          action='#'
+          class='upload'
+          :drag='true'
+          :limit='excelLimit'
+          :multiple='true'
+          :show-file-list='true'
+          :http-request='uploadExcel'
+          :before-upload='beforeExcelUpload'
+          :on-exceed='handleExceed'
          :accept="parameter.fileType!.join(',')"
        >
-          <slot name="empty">
-            <el-icon class="el-icon--upload">
+          <slot name='empty'>
+            <el-icon class='el-icon--upload'>
              <upload-filled />
            </el-icon>
-            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class='el-upload__text'>将文件拖到此处，或<em>点击上传</em></div>
          </slot>
          <template #tip>
-            <slot name="tip">
-              <div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件，文件最大为 {{ parameter.fileSize }}M</div>
+            <slot name='tip'>
+              <div class='el-upload__tip'>请上传 .xls , .xlsx 标准格式文件，文件最大为 {{ parameter.fileSize }}M</div>
            </slot>
          </template>
        </el-upload>
      </el-form-item>
-      <el-form-item v-if="parameter.showCover" label="数据覆盖 :">
-        <el-switch v-model="isCover" />
+      <el-form-item v-if='parameter.showCover' label='数据覆盖 :'>
+        <el-switch v-model='isCover' />
      </el-form-item>
    </el-form>
  </el-dialog>
 </template>

-<script setup lang="ts" name="ImportExcel">
-import { ref } from "vue";
-import { useDownload } from "@/hooks/useDownload";
-import { Download } from "@element-plus/icons-vue";
-import { ElNotification, UploadRequestOptions, UploadRawFile, ElMessage } from "element-plus";
+<script setup lang='ts' name='ImportExcel'>
+import { ref } from 'vue'
+import { useDownload } from '@/hooks/useDownload'
+import { Download } from '@element-plus/icons-vue'
+import { ElNotification, UploadRequestOptions, UploadRawFile, ElMessage } from 'element-plus'

 export interface ExcelParameterProps {
  title: string; // 标题
@@ -57,78 +56,73 @@ export interface ExcelParameterProps {
 }

 // 是否覆盖数据
-const isCover = ref(false);
+const isCover = ref(false)
 // 最大文件上传数
-const excelLimit = ref(1);
+const excelLimit = ref(1)
 // dialog状态
-const dialogVisible = ref(false);
+const dialogVisible = ref(false)
 // 父组件传过来的参数
 const parameter = ref<ExcelParameterProps>({
-  title: "",
+  title: '',
  fileSize: 5,
-  fileType: ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]
-});
+  fileType: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+})

 // 接收父组件参数
 const acceptParams = (params: ExcelParameterProps) => {
-  parameter.value = { ...parameter.value, ...params };
-  dialogVisible.value = true;
-};
+  parameter.value = { ...parameter.value, ...params }
+  dialogVisible.value = true
+}

 // Excel 导入模板下载
 const downloadTemp = () => {
-  if (!parameter.value.tempApi) return;
-  useDownload(parameter.value.tempApi, `${parameter.value.title}模板`,{},false);
-};
+  if (!parameter.value.tempApi) return
+  useDownload(parameter.value.tempApi, `${parameter.value.title}模板`, {}, false)
+}

 // 文件上传
 const uploadExcel = async (param: UploadRequestOptions) => {
-  let excelFormData = new FormData();
-  excelFormData.append("file", param.file);
-  if(parameter.value.patternId){
-    excelFormData.append("patternId",parameter.value.patternId)
+  let excelFormData = new FormData()
+  excelFormData.append('file', param.file)
+  if (parameter.value.patternId) {
+    excelFormData.append('patternId', parameter.value.patternId)
  }
-  isCover.value && excelFormData.append("isCover", isCover.value as unknown as Blob);
+  isCover.value && excelFormData.append('isCover', isCover.value as unknown as Blob)
  //await parameter.value.importApi!(excelFormData);
  await parameter.value.importApi!(excelFormData)
-  .then(res => handleImportResponse( res))
-  parameter.value.getTableList && parameter.value.getTableList();
-  dialogVisible.value = false;
-};
+    .then(res => handleImportResponse(res))
+  parameter.value.getTableList && parameter.value.getTableList()
+  dialogVisible.value = false
+}


-
-
-async function handleImportResponse( res: any) {
-  //console.log('res1', res.type);
-    if (res.type === 'application/json') {
-      //console.log('res2', res);
-        const fileReader = new FileReader()
-        fileReader.onloadend = () => {
-            try {
-                const jsonData = JSON.parse(fileReader.result)
-               // console.log('123',jsonData)
-                if (jsonData.code === 'A0000') {
-                    ElMessage.success('导入成功')
-                } else {
-                    //ElMessage.error('导入失败，请查看下载附件！')
-                }
-            } catch (err) {
-                console.log(err)
-            }
+async function handleImportResponse(res: any) {
+  if (res.type === 'application/json') {
+    const fileReader = new FileReader()
+    fileReader.onloadend = () => {
+      try {
+        const jsonData = JSON.parse(fileReader.result)
+        if (jsonData.code === 'A0000') {
+          ElMessage.success('导入成功')
+        } else {
+          ElMessage.error(jsonData.message)
        }
-        fileReader.readAsText(res)
-    } else {
-        //ElMessage.error('导入失败，请查看下载附件！')
-        // let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
-        // const url = window.URL.createObjectURL(blob)
-        // const link = document.createElement('a')
-        // link.href = url
-        // link.download = '终端入网检测失败列表'
-        // document.body.appendChild(link)
-        // link.click()
-        // link.remove()
+      } catch (err) {
+        console.log(err)
+      }
    }
+    fileReader.readAsText(res)
+  } else {
+    ElMessage.error('导入失败，请查看下载附件！')
+    let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
+    const url = window.URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = '终端入网检测失败列表'
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+  }
 }

 /**
@@ -136,56 +130,56 @@ async function handleImportResponse( res: any) {
 * @param file 上传的文件
 * */
 const beforeExcelUpload = (file: UploadRawFile) => {
-  const isExcel = parameter.value.fileType!.includes(file.type as File.ExcelMimeType);
-  const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!;
+  const isExcel = parameter.value.fileType!.includes(file.type as File.ExcelMimeType)
+  const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!
  if (!isExcel)
    ElNotification({
-      title: "温馨提示",
-      message: "上传文件只能是 xls / xlsx 格式！",
-      type: "warning"
-    });
+      title: '温馨提示',
+      message: '上传文件只能是 xls / xlsx 格式！',
+      type: 'warning',
+    })
  if (!fileSize)
    setTimeout(() => {
      ElNotification({
-        title: "温馨提示",
+        title: '温馨提示',
        message: `上传文件大小不能超过 ${parameter.value.fileSize}MB！`,
-        type: "warning"
-      });
-    }, 0);
-  return isExcel && fileSize;
-};
+        type: 'warning',
+      })
+    }, 0)
+  return isExcel && fileSize
+}

 // 文件数超出提示
 const handleExceed = () => {
  ElNotification({
-    title: "温馨提示",
-    message: "最多只能上传一个文件！",
-    type: "warning"
-  });
-};
+    title: '温馨提示',
+    message: '最多只能上传一个文件！',
+    type: 'warning',
+  })
+}

 // 上传错误提示
-const excelUploadError = () => {
-  ElNotification({
-    title: "温馨提示",
-    message: `批量添加${parameter.value.title}失败，请您重新上传！`,
-    type: "error"
-  });
-};
+// const excelUploadError = () => {
+//   ElNotification({
+//     title: '温馨提示',
+//     message: `批量添加${parameter.value.title}失败，请您重新上传！`,
+//     type: 'error',
+//   })
+// }

 // 上传成功提示
-const excelUploadSuccess = () => {
-  ElNotification({
-    title: "温馨提示",
-    message: `批量添加${parameter.value.title}成功！`,
-    type: "success"
-  });
-};
+// const excelUploadSuccess = () => {
+//   ElNotification({
+//     title: '温馨提示',
+//     message: `批量添加${parameter.value.title}成功！`,
+//     type: 'success',
+//   })
+// }

 defineExpose({
-  acceptParams
-});
+  acceptParams,
+})
 </script>
-<style lang="scss" scoped>
+<style lang='scss' scoped>
@import "./index.scss";
 </style>
--- a/frontend/src/views/machine/device/index.vue
+++ b/frontend/src/views/machine/device/index.vue
@@ -10,8 +10,12 @@
      <template #tableHeader='scope'>
        <el-button v-auth.device="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
        <el-button v-auth.device="'export'" type='primary' :icon='Upload' plain @click='downloadFile()'>导出</el-button>
-        <el-button v-auth.device="'import'" type='primary' :icon='Download' plain @click="importFile('')" v-if='modeStore.currentMode != "比对式"'>导入</el-button>
-        <el-button v-auth.device="'import'" type='primary' :icon='Download' plain @click="importFile('比对式')" v-if='modeStore.currentMode === "比对式"'>导入</el-button>
+        <el-button v-auth.device="'import'" type='primary' :icon='Download' plain @click="importFile('')"
+                   v-if='modeStore.currentMode != "比对式"'>导入
+        </el-button>
+        <el-button v-auth.device="'import'" type='primary' :icon='Download' plain @click="importFile('比对式')"
+                   v-if='modeStore.currentMode === "比对式"'>导入
+        </el-button>
        <el-button v-auth.device="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
                   @click='batchDelete(scope.selectedListIds)'>
          删除
@@ -19,8 +23,11 @@
      </template>
      <!-- 表格操作 -->
      <template #operation='scope'>
-        <el-button v-auth.device="'edit'" type='primary' link :icon='EditPen' :model-value="false" @click="openDialog('edit', scope.row)">编辑</el-button>
-        <el-button v-auth.device="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
+        <el-button v-auth.device="'edit'" type='primary' link :icon='EditPen' :model-value='false'
+                   @click="openDialog('edit', scope.row)">编辑
+        </el-button>
+        <el-button v-auth.device="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除
+        </el-button>
      </template>

    </ProTable>
@@ -40,20 +47,28 @@ import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/i
 import DevicePopup from '@/views/machine/device/components/devicePopup.vue'
 import { CirclePlus, Delete, EditPen, Download, Upload } from '@element-plus/icons-vue'
 import { useDictStore } from '@/stores/modules/dict'
-import {getPqDevList, deletePqDev, getPqDev, exportCNDev, downloadCNDevTemplate, importCNDev} from '@/api/device/device/index.ts'
+import {
+  getPqDevList,
+  deletePqDev,
+  getPqDev,
+  exportCNDev,
+  downloadCNDevTemplate,
+  importCNDev,
+} from '@/api/device/device/index.ts'
 import { ElMessageBox } from 'element-plus'
-import { computed, onBeforeMount, onMounted, reactive, ref } from 'vue'
-import { useModeStore , useAppSceneStore} from '@/stores/modules/mode';
+import { onBeforeMount, reactive, ref } from 'vue'
+import { useModeStore, useAppSceneStore } from '@/stores/modules/mode'
+
 defineOptions({
-      name: 'device'
-  })
-const modeStore = useModeStore();
+  name: 'device',
+})
+const modeStore = useModeStore()
 const dictStore = useDictStore()
 const appSceneStore = useAppSceneStore()
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
 const devicePopup = ref()
-const boundPqDevList=ref<Device.ReqPqDevParams[]>([])//根据检测计划id查询出所有已绑定的设备 
+const boundPqDevList = ref<Device.ReqPqDevParams[]>([])//根据检测计划id查询出所有已绑定的设备
 // 存储设备类型选项
 const devTypeOptions = ref<Device.ResDev[]>([])

@@ -61,7 +76,7 @@ const getTableList = async (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params))
  newParams.searchEndTime = endDate.value
  newParams.searchBeginTime = startDate.value
-  const patternId  = dictStore.getDictData('Pattern').find(item=>item.name=== modeStore.currentMode)?.id//获取数据字典中对应的id
+  const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id//获取数据字典中对应的id
  newParams.pattern = patternId
  return getPqDevList(newParams)
 }
@@ -87,7 +102,7 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
    minWidth: 200,
    render: (scope) => {
      // 查找设备类型名称
-      const name = devTypeOptions.value.find(option => option.id === scope.row.devType);
+      const name = devTypeOptions.value.find(option => option.id === scope.row.devType)
      return <span>{name?.name}</span>
    },
  },
@@ -99,16 +114,16 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
    ...(appSceneStore.currentScene === '0' ? {
      search: {
        render: () => {
-        return (
-          <div class='flx-flex-start'>
-            <TimeControl
-              default={'月'}
-              onUpdate-dates={handleDateChange}
-            />
-          </div>
-        )
+          return (
+            <div class='flx-flex-start'>
+              <TimeControl
+                default={'月'}
+                onUpdate-dates={handleDateChange}
+              />
+            </div>
+          )
+        },
      },
-       },
    } : {}),
    // search: {
    //   span: 2,
@@ -166,47 +181,46 @@ const handleDateChange = (startDateTemp: string, endDateTemp: string) => {
 }
 // 打开 drawer(新增、编辑)
 const openDialog = (titleType: string, row: Partial<Device.ResPqDev> = {}) => {
-  devicePopup.value?.open(titleType, row,modeStore.currentMode,appSceneStore.currentScene,devTypeOptions.value)
+  devicePopup.value?.open(titleType, row, modeStore.currentMode, appSceneStore.currentScene, devTypeOptions.value)
 }


-
 // 批量删除设备
 const batchDelete = async (id: string[]) => {
-  const patternId  = dictStore.getDictData('Pattern').find(item=>item.name=== modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
-  await useHandleData(deletePqDev, {'ids':id,'pattern': patternId} , '删除所选设备')
+  const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
+  await useHandleData(deletePqDev, { 'ids': id, 'pattern': patternId }, '删除所选设备')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
 }

 // 删除设备
 const handleDelete = async (params: Device.ResPqDev) => {
-  const patternId  = dictStore.getDictData('Pattern').find(item=>item.name=== modeStore.currentMode)?.id//获取数据字典中对应的id
-  await useHandleData(deletePqDev, {'ids': [params.id] ,'pattern': patternId}, `删除【${params.name}】设备`)
+  const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id//获取数据字典中对应的id
+  await useHandleData(deletePqDev, { 'ids': [params.id], 'pattern': patternId }, `删除【${params.name}】设备`)
  proTable.value?.getTableList()
 }

 // 导出设备
 const downloadFile = async () => {
-    // 获取当前的搜索参数
-    const searchParam = proTable.value?.searchParam || {};
+  // 获取当前的搜索参数
+  const searchParam = proTable.value?.searchParam || {}

-    // 将开始时间和结束时间添加到搜索参数中
-    searchParam.searchBeginTime = startDate.value;
-    searchParam.searchEndTime = endDate.value;
+  // 将开始时间和结束时间添加到搜索参数中
+  searchParam.searchBeginTime = startDate.value
+  searchParam.searchEndTime = endDate.value

-    ElMessageBox.confirm('确认导出被检设备?', '温馨提示', { type: 'warning' }).then(() =>{
-      const patternId  = dictStore.getDictData('Pattern').find(item=>item.name=== modeStore.currentMode)?.id//获取数据字典中对应的id
-      useDownload(exportCNDev,'被检设备导出数据', {...proTable.value?.searchParam,pattern:patternId}, false,'.xlsx')
-    })
+  ElMessageBox.confirm('确认导出被检设备?', '温馨提示', { type: 'warning' }).then(() => {
+    const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id//获取数据字典中对应的id
+    useDownload(exportCNDev, '被检设备导出数据', { ...proTable.value?.searchParam, pattern: patternId }, false, '.xlsx')
+  })
 }

 //导入设备
 const deviceImportExcel = ref<InstanceType<typeof ImportExcel> | null>(null)

-const importFile = async (pattern:string) => {
+const importFile = async (pattern: string) => {

-  if(pattern === '比对式'){
+  if (pattern === '比对式') {
    // const params = {
    //     title: '被检设备',
    //     showCover: false,
@@ -215,34 +229,32 @@ const importFile = async (pattern:string) => {
    //     getTableList: proTable.value?.getTableList,
    // }
    // deviceImportExcel.value?.acceptParams(params)
-  }else{
+  } else {
    const params = {
-    title: '被检设备',
-    showCover: false,
-    patternId:  dictStore.getDictData('Pattern').find(item=>item.name=== modeStore.currentMode)?.id,
-    tempApi: downloadCNDevTemplate,
-    importApi: importCNDev,
-    // importApi: modeStore.currentMode === "比对式"? importContrastPqDev: importCNDev,
-    getTableList: proTable.value?.getTableList,
+      title: '被检设备',
+      showCover: false,
+      patternId: dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id,
+      tempApi: downloadCNDevTemplate,
+      importApi: importCNDev,
+      // importApi: modeStore.currentMode === "比对式"? importContrastPqDev: importCNDev,
+      getTableList: proTable.value?.getTableList,
    }
    deviceImportExcel.value?.acceptParams(params)
-
-    console.log(params)
  }

 }

 onBeforeMount(async () => {
  const response = await getPqDev()
-    devTypeOptions.value = (response.data as Device.ResDev[]).map(item => ({
-      id: item.id,
-      name: item.name,
-      icd: item.icd,
-      power: item.power,
-      devVolt: item.devVolt,
-      devCurr: item.devCurr,
-      devChns: item.devChns
-    }))
+  devTypeOptions.value = (response.data as Device.ResDev[]).map(item => ({
+    id: item.id,
+    name: item.name,
+    icd: item.icd,
+    power: item.power,
+    devVolt: item.devVolt,
+    devCurr: item.devCurr,
+    devChns: item.devChns,
+  }))
 })
 </script>