package.json

@@ -15,12 +15,14 @@
     "crypto-js": "^4.2.0",
     "echarts": "^5.5.0",
     "element-plus": "^2.6.0",
+    "exceljs": "^4.4.0",
     "js-cookie": "^3.0.5",
     "nprogress": "^0.2.0",
     "qs": "^6.11.2",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
-    "vuex": "^4.0.0"
+    "vuex": "^4.0.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@types/crypto-js": "^4.2.2",

src/components/export2xlsx/index.ts

@@ -0,0 +1,51 @@
+import type { Range } from "xlsx";
+import { writeFile, utils } from "xlsx";
+
+export const exportExcel = (fileData: any[], headerName: any[], headerProp: string[], fileName: string) => {
+  // console.log(fileData, headerName, headerProp, fileName);
+  const merges: any = {};
+  const name: string[][] = [[], [], []];
+  const data = fileData.map((obj) => {
+    return headerProp.map((prop) => obj[prop]);
+  });
+  name[0].push("省份", "储备仓库", ...headerName.map((item) => item.matypename2));
+  name[1].push("省份", "储备仓库", ...headerName.map((item) => item.matypename3));
+  name[2].push("省份", "储备仓库", ...headerName.map((item) => item.matypename4));
+  name[0].forEach((item, index) => {
+    const itemIndex = name[0].findIndex((ite) => ite === item);
+    if (itemIndex !== index) {
+      merges[item] = { s: { r: 0, c: itemIndex }, e: { r: 0, c: index } };
+    }
+  });
+  const cols = data.map((item) => item[0]);
+  cols.forEach((item, index) => {
+    const itemIndex = cols.findIndex((ite) => ite === item);
+    if (itemIndex !== index) {
+      merges[item] = { s: { r: itemIndex + 3, c: 0 }, e: { r: index + 3, c: 0 } };
+    }
+  });
+  data.unshift(...name);
+  const ws = utils.aoa_to_sheet(data);
+  const wb = utils.book_new();
+  // 设置单元格样式
+  const cellRef = utils.encode_cell({ c: 0, r: 0 });
+  const cell = ws[cellRef];
+  if (!cell.s) cell.s = {};
+  cell.s.alignment = {
+    horizontal: "center",
+    vertical: "center"
+  };
+  const test: Range[] = [];
+  Object.keys(merges).forEach((item) => {
+    test.push(merges[item]);
+  });
+  ws["!merges"] = [
+    { s: { r: 0, c: 0 }, e: { r: 2, c: 0 } },
+    { s: { r: 0, c: 1 }, e: { r: 2, c: 1 } },
+    { s: { r: 3, c: 0 }, e: { r: 3, c: 1 } },
+    ...test
+  ];
+  utils.book_append_sheet(wb, ws, fileName);
+  writeFile(wb, `${fileName}.xlsx`);
+  // console.log(cellRef, cell);
+};

src/views/admin/dept/index.vue

@@ -194,7 +194,7 @@ import uploadFile from "@/components/uploadFile/index.vue";
 import { nextTick, ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import type { FormInstance, FormRules } from "element-plus";
-import { Search, EditPen, Plus, Edit, Delete } from "@element-plus/icons-vue";
+import { Search, Plus, Edit, Delete } from "@element-plus/icons-vue";
 
 import { useDict } from "@/hooks/dict";
 import { ITablePage } from "@/const/interface_type";

src/views/dataStatistics/droughtResistant/index.vue

@@ -59,6 +59,7 @@
       </el-row>
     </el-form>
 
+    <el-button type="primary" :icon="Download" style="margin-bottom: 10px" @click="downloadExcel">导出</el-button>
     <el-table :data="tableData" stripe border :span-method="arraySpanMethod">
       <el-table-column type="index" label="序号" header-align="center" align="center" />
       <el-table-column prop="upidName" label="省份" header-align="center" align="center" />
@@ -83,13 +84,14 @@ import { ref } from "vue";
 
 import { handleTree } from "@/utils/util";
 import { useGetters } from "@/hooks/storeHooks";
+import { exportExcel } from "@/components/export2xlsx";
 import {
   getDroughtResistantHeader,
   getDroughtResistantList,
   getCityList,
   getSysTreeDict
 } from "@/api/dataStatistics/index";
-import { Search, RefreshRight } from "@element-plus/icons-vue";
+import { Search, RefreshRight, Download } from "@element-plus/icons-vue";
 
 const headerName: any = ref([]);
 const headerProps: any = ref([]);
@@ -104,6 +106,7 @@ const mergeObj: any = ref({});
 const cityList: any = ref([]);
 const warehouseList: any = ref([]);
 const suppliesList: any = ref([]);
+const exportHeaderName = ref([]); // 导出用表头
 
 const { userInfo } = useGetters(["userInfo"]);
 
@@ -158,6 +161,7 @@ getDroughtResistantHeader({ matype1: ["100", "200"] }).then((res: any) => {
       .forEach((item: any) => {
         headerName.value.push(...item);
       });
+    exportHeaderName.value = res.data;
     headerName.value = handleTree(headerName.value, "dmUpcode");
     headerProps.value = res.data.map((item: any) => item.matypecode3);
     headerProps.value.unshift("upidName", "username");
@@ -253,4 +257,8 @@ const arraySpanMethod = ({ column, rowIndex, columnIndex }: any) => {
     }
   }
 };
+
+const downloadExcel = () => {
+  exportExcel(tableData.value, exportHeaderName.value, headerProps.value, "防汛抗旱物资数量价值表");
+};
 </script>

src/views/dataStatistics/reliefMaterial/index.vue

@@ -59,6 +59,7 @@
       </el-row>
     </el-form>
 
+    <el-button type="primary" :icon="Download" style="margin-bottom: 10px" @click="downloadExcel">导出</el-button>
     <el-table :data="tableData" stripe border :span-method="arraySpanMethod">
       <el-table-column type="index" label="序号" header-align="center" align="center" />
       <el-table-column prop="upidName" label="省份" header-align="center" align="center" />
@@ -83,22 +84,24 @@ import { ref } from "vue";
 
 import { handleTree } from "@/utils/util";
 import { useGetters } from "@/hooks/storeHooks";
+import { exportExcel } from "@/components/export2xlsx";
 import {
   getDroughtResistantHeader,
   getDroughtResistantList,
   getCityList,
   getSysTreeDict
 } from "@/api/dataStatistics/index";
-import { Search, RefreshRight } from "@element-plus/icons-vue";
+import { Search, RefreshRight, Download } from "@element-plus/icons-vue";
 
-const headerName: any = ref([]);
-const headerProps: any = ref([]);
-const tableData: any = ref([]);
-const searchList: any = ref({});
-const mergeObj: any = ref({});
-const cityList: any = ref([]);
-const warehouseList: any = ref([]);
-const suppliesList: any = ref([]);
+const headerName: any = ref([]); // 展示用表头
+const headerProps: any = ref([]); // 数据对应code
+const tableData: any = ref([]); // 列表数据
+const searchList: any = ref({}); // 搜索数据
+const mergeObj: any = ref({}); // 处理合并单元格数据
+const cityList: any = ref([]); // 省份信息
+const warehouseList: any = ref([]); // 储备仓库
+const suppliesList: any = ref([]); // 物资类别
+const exportHeaderName = ref([]); // 导出用表头
 
 const { userInfo } = useGetters(["userInfo"]);
 
@@ -153,6 +156,7 @@ getDroughtResistantHeader({ matype1: ["300"] }).then((res: any) => {
       .forEach((item: any) => {
         headerName.value.push(...item);
       });
+    exportHeaderName.value = res.data;
     headerName.value = handleTree(headerName.value, "dmUpcode");
     headerProps.value = res.data.map((item: any) => item.matypecode3);
     headerProps.value.unshift("upidName", "username");
@@ -248,4 +252,8 @@ const arraySpanMethod = ({ column, rowIndex, columnIndex }: any) => {
     }
   }
 };
+
+const downloadExcel = () => {
+  exportExcel(tableData.value, exportHeaderName.value, headerProps.value, "救灾物资数量价值表");
+};
 </script>

src/views/home/index.vue

@@ -1,35 +1,16 @@
 <template>
   <basic-container>
-    <Kq v-if="deptType == '3'"></Kq>
-    <Gjj v-if="deptType == '1' || deptType == '2'"></Gjj>
+    <Kq v-if="userInfo.deptType === '3'"></Kq>
+    <Gjj v-if="userInfo.deptType === '1' || userInfo.deptType === '2'"></Gjj>
   </basic-container>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, toRefs, onMounted, watch } from "vue";
 import Kq from "@/views/home/components/kq.vue";
 import Gjj from "@/views/home/components/gjj.vue";
 import { useGetters } from "@/hooks/storeHooks";
-import { useStore } from "vuex";
-import store from "@/store";
 
 const { userInfo } = useGetters(["userInfo"]);
-const data = reactive({
-  deptType: ""
-});
-
-let { deptType } = toRefs(data);
-
-watch(
-  userInfo,
-  () => {
-    console.log(userInfo.value.deptType, "watch");
-  },
-  { deep: true, immediate: true }
-);
-onMounted(() => {
-  deptType = userInfo.value.deptType ? userInfo.value.deptType : "";
-});
 </script>
 
 <style lang="scss" scoped></style>