页面优化

src/api/airqualitycollection/index.ts

@@ -1,52 +1,52 @@
-import request from '@/config/axios'
-
-// 空气质量采集 VO
-export interface QualityCollectionVO {
-  id: number // 主键
-  siteName: string // 站点名称
-  city: string // 城市
-  type: number // 数据类型
-  pm25: number // PM2.s(ugim3)
-  pm10: number // PMo(ug/m3
-  so2: number // sOz(ug/m3)
-  no2: number // NOz(ug/m3)
-  no: number // NO(Hg/m3)
-  nOx: number // NOx(Hg/m3)
-  co: number // CO(mg/m3)
-  o3: number // 0з(ug/m3)
-  remark: string // 备用1
-  remark2: string // 备用2
-}
-
-// 空气质量采集 API
-export const QualityCollectionApi = {
-  // 查询空气质量采集分页
-  getQualityCollectionPage: async (params: any) => {
-    return await request.get({ url: `/system/quality-collection/page`, params })
-  },
-
-  // 查询空气质量采集详情
-  getQualityCollection: async (id: number) => {
-    return await request.get({ url: `/system/quality-collection/get?id=` + id })
-  },
-
-  // 新增空气质量采集
-  createQualityCollection: async (data: QualityCollectionVO) => {
-    return await request.post({ url: `/system/quality-collection/create`, data })
-  },
-
-  // 修改空气质量采集
-  updateQualityCollection: async (data: QualityCollectionVO) => {
-    return await request.put({ url: `/system/quality-collection/update`, data })
-  },
-
-  // 删除空气质量采集
-  deleteQualityCollection: async (id: number) => {
-    return await request.delete({ url: `/system/quality-collection/delete?id=` + id })
-  },
-
-  // 导出空气质量采集 Excel
-  exportQualityCollection: async (params) => {
-    return await request.download({ url: `/system/quality-collection/export-excel`, params })
-  },
-}
+import request from '@/config/axios'
+
+// 空气质量采集 VO
+export interface QualityCollectionVO {
+  id: number // 主键
+  siteName: string // 站点名称
+  city: string // 城市
+  type: number // 数据类型
+  pm25: number // PM2.s(ugim3)
+  pm10: number // PMo(ug/m3
+  so2: number // sOz(ug/m3)
+  no2: number // NOz(ug/m3)
+  no: number // NO(Hg/m3)
+  nOx: number // NOx(Hg/m3)
+  co: number // CO(mg/m3)
+  o3: number // 0з(ug/m3)
+  remark: string // 备用1
+  remark2: string // 备用2
+}
+
+// 空气质量采集 API
+export const QualityCollectionApi = {
+  // 查询空气质量采集分页
+  getQualityCollectionPage: async (params: any) => {
+    return await request.get({ url: `/system/quality-collection/page`, params })
+  },
+
+  // 查询空气质量采集详情
+  getQualityCollection: async (id: number) => {
+    return await request.get({ url: `/system/quality-collection/get?id=` + id })
+  },
+
+  // 新增空气质量采集
+  createQualityCollection: async (data: QualityCollectionVO) => {
+    return await request.post({ url: `/system/quality-collection/create`, data })
+  },
+
+  // 修改空气质量采集
+  updateQualityCollection: async (data: QualityCollectionVO) => {
+    return await request.put({ url: `/system/quality-collection/update`, data })
+  },
+
+  // 删除空气质量采集
+  deleteQualityCollection: async (id: number) => {
+    return await request.delete({ url: `/system/quality-collection/delete?id=` + id })
+  },
+
+  // 导出空气质量采集 Excel
+  exportQualityCollection: async (data:any) => {
+    return await request.upload({ url: `/system/quality-collection/upload-excel`, data })
+  }
+}

src/components/UploadFile/index.ts

@@ -1,6 +1,8 @@
 import UploadImg from './src/UploadImg.vue'
 import UploadImgs from './src/UploadImgs.vue'
 import UploadFile from './src/UploadFile.vue'
-export { UploadImg, UploadImgs, UploadFile}
+import UploadExcel from './src/UploadExcel.vue'
+
+export { UploadImg, UploadImgs, UploadFile, UploadExcel}
 
 

src/views/airqualitycollection/index.vue

@@ -40,26 +40,17 @@
             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>
-          <el-button
-            type="primary"
-            plain
-            @click="openForm('create')"
-            v-hasPermi="['system:quality-collection:create']"
-          >
-            <Icon icon="ep:plus" class="mr-5px" /> 新增
-          </el-button>
-          <el-button
-            type="success"
-            plain
-            @click="handleExport"
-            :loading="exportLoading"
-            v-hasPermi="['system:quality-collection:export']"
-          >
-            <Icon icon="ep:download" class="mr-5px" /> 导出
-          </el-button>
+          <UploadExcel 
+            v-model="fileUrls" 
+            :file-type="['xlsx', 'xls']" 
+            :file-size="1"
+            class="mr-5px"
+            :type="activeName"
+
+          />
         </el-form-item>
        </el-form>
 
@@ -137,6 +128,7 @@ import download from '@/utils/download'
 import { QualityCollectionApi, QualityCollectionVO } from '@/api/airqualitycollection'
 import QualityCollectionForm from './QualityCollectionForm.vue'
 const activeName = ref(1)
+import { UploadExcel } from '@/components/UploadFile'
 
 
 /** 空气质量采集 列表 */
@@ -169,6 +161,8 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 
+const fileUrls = ref()
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true