数据统计完善

.env.development

@@ -2,9 +2,9 @@
 # VUE_APP_BASE_URL = 'http://192.168.50.205:9999'
 # VUE_APP_BASE_URL = 'http://172.16.6.217:9999'
 # 测试环境外网
- VUE_APP_BASE_URL = 'http://121.36.17.6:9098'
+#  VUE_APP_BASE_URL = 'http://121.36.17.6:9098'
 # 正式环境外网
-# VUE_APP_BASE_URL = 'http://121.36.17.6:9099'
+VUE_APP_BASE_URL = 'http://121.36.17.6:9099'
 
 # 图片地址
 VUE_APP_BASE_IMG_URL = ""

src/api/index.ts

@@ -131,7 +131,7 @@ request.interceptors.response.use(
   (error) => {
     NProgress.done();
     const status = error.response.status;
-    const msg = error.response.data.msg;
+    const msg = error.response.data.msg || "数据异常，请稍后再试";
     if (status === 424) {
       ElMessageBox.confirm("令牌状态已过期，请点击重新登录", "系统提示", {
         confirmButtonText: "重新登录",
@@ -144,6 +144,12 @@ request.interceptors.response.use(
         });
       });
       return Promise.reject(error);
+    } else {
+      ElMessage({
+        message: msg,
+        type: "error",
+        duration: 5 * 1000
+      });
     }
 
     // let { message } = error;
@@ -152,11 +158,6 @@ request.interceptors.response.use(
     // } else if (message.includes("timeout")) {
     //   message = "系统接口请求超时";
     // } else if (message.includes("Request failed with status code")) {
-    ElMessage({
-      message: msg,
-      type: "error",
-      duration: 5 * 1000
-    });
     // }
     return Promise.reject(error);
   }

src/components/export2xlsx/index.ts

@@ -1,51 +1,114 @@
-import type { Range } from "xlsx";
-import { writeFile, utils } from "xlsx";
+import { Workbook } from "exceljs";
 
 export const exportExcel = (fileData: any[], headerName: any[], headerProp: string[], fileName: string) => {
-  // console.log(fileData, headerName, headerProp, fileName);
   const repeatingData: 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));
+
+  function computedCol(val: number) {
+    const header = [
+      "A",
+      "B",
+      "C",
+      "D",
+      "E",
+      "F",
+      "G",
+      "H",
+      "I",
+      "J",
+      "K",
+      "L",
+      "M",
+      "N",
+      "O",
+      "P",
+      "Q",
+      "R",
+      "S",
+      "T",
+      "U",
+      "V",
+      "W",
+      "X",
+      "Y",
+      "Z"
+    ];
+    const first = Math.floor(val / 26);
+    if (first > 0) {
+      return `${header[first - 1]}${header[val % 26]}`;
+    } else {
+      return `${header[val % 26]}`;
+    }
+  }
+  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) {
-      repeatingData[item] = { s: { r: 0, c: itemIndex }, e: { r: 0, c: index } };
+      repeatingData[item] = `${computedCol(index)}1:${computedCol(itemIndex)}1`;
     }
   });
   const cols = data.map((item) => item[0]);
   cols.forEach((item, index) => {
     const itemIndex = cols.findIndex((ite) => ite === item);
     if (itemIndex !== index) {
-      repeatingData[item] = { s: { r: itemIndex + 3, c: 0 }, e: { r: index + 3, c: 0 } };
+      repeatingData[item] = `A${index + 4}:A${itemIndex + 4}`;
     }
   });
   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 merges: Range[] = [];
-  Object.keys(repeatingData).forEach((item) => {
-    merges.push(repeatingData[item]);
+
+  const workbook = new Workbook();
+  workbook.created = new Date();
+
+  const worksheet = workbook.addWorksheet(fileName, { views: [{ state: "frozen", xSplit: 2, ySplit: 3 }] });
+  worksheet.addRows(data);
+  for (let i = 0; i < data.length; i++) {
+    worksheet.getRow(i + 1).alignment = { vertical: "middle", horizontal: "center" };
+  }
+  for (let i = 0; i < data[0].length; i++) {
+    worksheet.getColumn(i + 1).width = 20;
+  }
+  for (let i = 0; i < 3; i++) {
+    worksheet.getRow(i + 1).font = { bold: true };
+    worksheet.getRow(i + 1).border = {
+      top: { style: "thick", color: { argb: "000000" } },
+      left: { style: "thick", color: { argb: "000000" } },
+      bottom: { style: "thick", color: { argb: "000000" } },
+      right: { style: "thick", color: { argb: "000000" } }
+    };
+  }
+  for (let i = 0; i < 2; i++) {
+    worksheet.getColumn(i + 1).font = { bold: true };
+    worksheet.getColumn(i + 1).border = {
+      top: { style: "thick", color: { argb: "000000" } },
+      left: { style: "thick", color: { argb: "000000" } },
+      bottom: { style: "thick", color: { argb: "000000" } },
+      right: { style: "thick", color: { argb: "000000" } }
+    };
+  }
+  worksheet.mergeCells("A1:A3");
+  worksheet.mergeCells("B1:B3");
+  worksheet.mergeCells("A4:B4");
+  worksheet.mergeCells(`${computedCol(data[0].length - 1)}1:${computedCol(data[0].length - 1)}3`);
+  worksheet.mergeCells(`${computedCol(data[0].length - 2)}1:${computedCol(data[0].length - 2)}3`);
+  Object.keys(repeatingData).forEach((key) => {
+    worksheet.mergeCells(repeatingData[key]);
+  });
+  workbook.xlsx.writeBuffer().then((res) => {
+    const blob = new Blob([res]);
+    const a = document.createElement("a");
+    a.style.display = "none";
+    a.download = decodeURI(`${fileName}.xlsx`);
+    try {
+      a.href = window.URL.createObjectURL(blob);
+    } catch (err) {
+      console.warn("暂无文件信息.请通知开发人员导入文件模版");
+    }
+    a.click();
+    a.remove();
   });
-  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 } },
-    ...merges
-  ];
-  utils.book_append_sheet(wb, ws, fileName);
-  writeFile(wb, `${fileName}.xlsx`);
-  // console.log(cellRef, cell);
 };

src/components/export2xlsx/index1.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 repeatingData: 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) {
+      repeatingData[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) {
+      repeatingData[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 merges: Range[] = [];
+  Object.keys(repeatingData).forEach((item) => {
+    merges.push(repeatingData[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 } },
+    ...merges
+  ];
+  utils.book_append_sheet(wb, ws, fileName);
+  writeFile(wb, `${fileName}.xlsx`);
+  // console.log(cellRef, cell);
+};

src/utils/util.ts

@@ -1,4 +1,4 @@
-import { ref, toRef } from "vue";
+import { ref } from "vue";
 import CryptoJS from "crypto-js";
 
 // 构造树型结构数据
@@ -13,7 +13,7 @@ export function handleTree(arr: any, id: string) {
   function turnTree(arr: any, id: string) {
     const tree = ref<any>([]);
     for (let i = 0; i < arr.length; i++) {
-      const isFirst = tree.value.findIndex((item: any) => arr[i][id].includes(item[id]));
+      const isFirst = tree.value.findIndex((item: any) => arr[i][id].slice(0, 3) === item[id]);
       if (isFirst !== -1) {
         tree.value[isFirst].children.push(arr[i]);
       } else {

src/views/dataStatistics/components/detailedTable.vue

@@ -0,0 +1,245 @@
+<template>
+  <basic-container>
+    <el-form class="whole_form">
+      <el-row :gutter="20">
+        <el-col :span="6" v-if="userInfo.deptType === '1'">
+          <el-form-item label="省份">
+            <el-select v-model="searchList.gameDeptId" multiple clearable @change="getSupplies">
+              <el-option v-for="item in cityList" :key="item.deptId" :label="item.name" :value="item.deptId" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6" v-if="userInfo.deptType === '1'">
+          <el-form-item label="储备仓库">
+            <el-select
+              multiple
+              clearable
+              v-model="searchList.warehouseDeptId"
+              :disabled="!searchList.gameDeptId"
+              :placeholder="!searchList.gameDeptId ? '请先选择省份' : '请选择储备仓库'"
+            >
+              <el-option
+                v-for="item in warehouseList"
+                :key="item.deptId"
+                :label="item.abbreviationName"
+                :value="item.deptId"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6" v-if="userInfo.deptType === '2'">
+          <el-form-item label="储备仓库">
+            <el-select v-model="searchList.warehouseDeptId" multiple clearable placeholder="请选择储备仓库">
+              <el-option
+                v-for="item in warehouseList"
+                :key="item.deptId"
+                :label="item.abbreviationName"
+                :value="item.deptId"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="物资类别">
+            <el-select v-model="searchList.dmUpcode1List" clearable multiple>
+              <el-option v-for="item in suppliesList" :key="item.id" :label="item.name" :value="item.code" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="物资名称">
+            <el-input v-model="searchList.dmUpname2" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row class="btn_center">
+        <el-button :icon="Search" type="primary" @click="getList">查询</el-button>
+        <el-button :icon="RefreshRight" @click="clearSearch">清空</el-button>
+      </el-row>
+    </el-form>
+
+    <el-table
+      :data="tableData"
+      stripe
+      border
+      style="height: 80%"
+      :span-method="arraySpanMethod"
+      v-loading="tableLoading"
+    >
+      <!-- <el-table :data="tableData" stripe border> -->
+      <el-table-column fixed type="index" label="序号" header-align="center" align="center" />
+      <el-table-column fixed prop="gameName" label="省份" header-align="center" align="center" />
+      <el-table-column fixed prop="warehouseName" label="储备仓库" header-align="center" align="center" width="120" />
+      <el-table-column fixed prop="materials1" label="物资大类" header-align="center" align="center" />
+      <el-table-column prop="materials2" label="物资类别" header-align="center" align="center" />
+      <el-table-column prop="materials3" label="物资名称" header-align="center" align="center" />
+      <el-table-column prop="materials4" label="物资单位" header-align="center" align="center" />
+      <el-table-column prop="specs" label="规格" header-align="center" align="center" />
+      <el-table-column prop="quantity" label="数量" header-align="center" align="center" />
+      <el-table-column prop="inboundTime" label="入库时间" header-align="center" align="center" />
+      <el-table-column prop="unitPrice" label="单价(元)" header-align="center" align="center" />
+      <el-table-column prop="totalPrice" label="总价(万元)" header-align="center" align="center">
+        <template #default="{ row }">
+          {{ row.totalPrice ?? row.warehouseTotalPrice }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="remarks" label="备注" header-align="center" align="center" />
+    </el-table>
+  </basic-container>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { useGetters } from "@/hooks/storeHooks";
+import { Search, RefreshRight } from "@element-plus/icons-vue";
+import { getDetailList, getCityList, getSysTreeDict } from "@/api/dataStatistics/index";
+
+const tableData: any = ref([]);
+const tableLoading = ref(false);
+const searchList: any = ref({
+  gameDeptId: [],
+  warehouseDeptId: [],
+  dmUpcode1List: [],
+  dmUpname2: ""
+});
+const mergeObj: any = ref({});
+const cityList: any = ref([]);
+const warehouseList: any = ref([]);
+const suppliesList: any = ref([]);
+
+const { userInfo } = useGetters(["userInfo"]);
+const props = defineProps({
+  payload: {
+    type: Array,
+    default: () => []
+  }
+});
+
+if (userInfo.value.deptType === "1") {
+  // 获取省份列表
+  getCityList({ deptType: 2 }).then((res: any) => {
+    if (res.code === 0) {
+      cityList.value = res.data;
+      searchList.value.gameDeptId = [cityList.value[0].deptId];
+      getSupplies(searchList.value.gameDeptId);
+      getList();
+    }
+  });
+} else {
+  // 获取储备仓库
+  getCityList({ parentIdList: [userInfo.value.deptId] }).then((res: any) => {
+    if (res.code === 0) {
+      warehouseList.value = res.data;
+      searchList.value.warehouseDeptId = [warehouseList.value[0].deptId];
+      getList();
+    }
+  });
+}
+
+// 根据省份列表获取储备仓库
+const getSupplies = (value: string) => {
+  getCityList({ parentIdList: value }).then((res: any) => {
+    if (res.code === 0) {
+      warehouseList.value = res.data;
+    }
+  });
+};
+
+// 获取物资类别
+getSysTreeDict({ type: 1, difference: 2, parentCodeList: props.payload }).then((res: any) => {
+  if (res.code === 0) {
+    suppliesList.value = res.data;
+  }
+});
+
+const clearSearch = () => {
+  searchList.value = {
+    gameDeptId: [],
+    warehouseDeptId: [],
+    dmUpcode1List: [],
+    dmUpname2: ""
+  };
+  getList();
+};
+
+// 获取表格数据
+const getList = () => {
+  const data = {
+    dmUpcode0List: props.payload,
+    ...searchList.value
+  };
+  tableLoading.value = true;
+  getDetailList(data).then((res: any) => {
+    if (res.code === 0) {
+      tableData.value = res.data.filter((item: any) => {
+        if (item.gameName === null && item.totalPrice === null) {
+          item.unitPrice = "总价值";
+          return item;
+        } else if (item.totalPrice === null) {
+          item.unitPrice = "合计";
+          return item;
+        } else {
+          return item;
+        }
+      });
+      getSpanArr(tableData.value);
+    }
+  });
+};
+
+const arraySpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
+  const firstHidden = [2, 3, 4, 5, 6, 7, 8, 9];
+  const secondHidden = [4, 5, 6, 7, 8, 9];
+  if (rowIndex === 0) {
+    if (columnIndex === 1) {
+      return [1, 9];
+    } else if (firstHidden.includes(columnIndex)) {
+      return [0, 0];
+    }
+  } else if (row.unitPrice === "合计") {
+    if (columnIndex === 3) {
+      return [1, 7];
+    } else if (secondHidden.includes(columnIndex)) {
+      return [0, 0];
+    }
+  }
+  const mergeCol = ["gameName", "warehouseName", "materials1", "materials2"];
+  // 判断列的属性
+  if (mergeCol.indexOf(column.property) !== -1) {
+    // 判断其值是不是为0
+    if (mergeObj.value[column.property][rowIndex]) {
+      return [mergeObj.value[column.property][rowIndex], 1];
+    } else {
+      // 如果为0则为需要合并的行
+      return [0, 0];
+    }
+  }
+};
+
+// getSpanArr方法
+const getSpanArr = (data: any) => {
+  const mergeCol = ["gameName", "warehouseName", "materials1", "materials2"];
+  mergeCol.forEach((key: any) => {
+    let count = 0; // 用来记录需要合并行的起始位置
+    mergeObj.value[key] = []; // 记录每一列的合并信息
+    data.forEach((item: any, index: number) => {
+      // index == 0表示数据为第一行，直接 push 一个 1
+      if (index === 0) {
+        mergeObj.value[key].push(1);
+      } else {
+        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
+        if (item[key] === data[index - 1][key]) {
+          mergeObj.value[key][count] += 1;
+          mergeObj.value[key].push(0);
+        } else {
+          // 如果当前行和上一行其值不相等
+          count = index; // 记录当前位置
+          mergeObj.value[key].push(1); // 重新push 一个 1
+        }
+      }
+    });
+  });
+  tableLoading.value = false;
+};
+</script>

src/views/dataStatistics/components/valueTable.vue

@@ -0,0 +1,285 @@
+<template>
+  <basic-container>
+    <el-form class="whole_form">
+      <el-row :gutter="20">
+        <el-col :span="6" v-if="userInfo.deptType === '1'">
+          <el-form-item label="省份">
+            <el-select v-model="searchList.provinceDeptIdList" clearable multiple @change="getSupplies">
+              <el-option v-for="item in cityList" :key="item.deptId" :label="item.name" :value="item.deptId" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6" v-if="userInfo.deptType === '1'">
+          <el-form-item label="储备仓库">
+            <el-select
+              v-model="searchList.deptIdList"
+              clearable
+              multiple
+              :disabled="searchList.provinceDeptIdList.length === 0"
+              :placeholder="searchList.provinceDeptIdList.length === 0 ? '请先选择省份' : '请选择储备仓库'"
+            >
+              <el-option
+                v-for="item in warehouseList"
+                :key="item.deptId"
+                :label="item.abbreviationName"
+                :value="item.deptId"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6" v-if="userInfo.deptType === '2'">
+          <el-form-item label="储备仓库">
+            <el-select v-model="searchList.deptIdList" clearable multiple placeholder="请选择储备仓库">
+              <el-option
+                v-for="item in warehouseList"
+                :key="item.deptId"
+                :label="item.abbreviationName"
+                :value="item.deptId"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="物资类别">
+            <el-select v-model="searchList.dmUpcode1List" clearable multiple>
+              <el-option v-for="item in suppliesList" :key="item.id" :label="item.name" :value="item.code" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="物资名称">
+            <el-input v-model="searchList.dmUpname2" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row class="btn_center">
+        <el-button :icon="Search" type="primary" @click="getList">查询</el-button>
+        <el-button :icon="RefreshRight" @click="clearSearch">清空</el-button>
+      </el-row>
+    </el-form>
+
+    <el-button type="primary" :icon="Download" style="margin-bottom: 10px" @click="downloadExcel">导出</el-button>
+    <el-table
+      :data="tableData"
+      stripe
+      border
+      style="height: 80%"
+      v-loading="tableLoading"
+      :span-method="arraySpanMethod"
+    >
+      <el-table-column fixed type="index" label="序号" header-align="center" align="center" />
+      <el-table-column fixed prop="upidName" label="省份" header-align="center" align="center" />
+      <el-table-column fixed prop="username" label="储备仓库" header-align="center" align="center" width="120" />
+      <template v-for="item in headerName" :key="item">
+        <el-table-column :label="item.dmUpname" header-align="center" align="center">
+          <template v-for="iten in item.children" :key="iten">
+            <el-table-column :label="iten.dmUpname" header-align="center" align="center">
+              <el-table-column :prop="iten.dmUpcode" :label="iten.units" header-align="center" align="center" />
+            </el-table-column>
+          </template>
+        </el-table-column>
+      </template>
+      <el-table-column prop="tolNum" label="数量总计（件）" header-align="center" align="center" />
+      <el-table-column prop="tolMoney" label="总价值（万元）" header-align="center" align="center" />
+    </el-table>
+  </basic-container>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { deepClone, 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, Download } from "@element-plus/icons-vue";
+
+const headerName: any = ref([]);
+const headerProps: any = ref([]);
+const tableData: any = ref([]);
+const searchList: any = ref({
+  provinceDeptIdList: [],
+  deptIdList: [],
+  dmUpcode1List: [],
+  dmUpname2: ""
+});
+const mergeObj: any = ref({});
+const cityList: any = ref([]);
+const warehouseList: any = ref([]);
+const suppliesList: any = ref([]);
+const tableLoading = ref(false);
+const exportHeaderName = ref([]); // 导出用表头
+
+const { userInfo } = useGetters(["userInfo"]);
+
+const props = defineProps({
+  payload: {
+    type: Array,
+    default: () => []
+  },
+  fileName: {
+    type: String,
+    default: ""
+  }
+});
+
+if (userInfo.value.deptType === "1") {
+  // 获取省份列表
+  getCityList({ deptType: 2 }).then((res: any) => {
+    if (res.code === 0) {
+      cityList.value = res.data;
+    }
+  });
+} else {
+  // 获取储备仓库
+  getCityList({ parentIdList: [userInfo.value.deptId] }).then((res: any) => {
+    if (res.code === 0) {
+      warehouseList.value = res.data;
+    }
+  });
+}
+
+// 根据省份列表获取储备仓库
+const getSupplies = (value: string[]) => {
+  getCityList({ parentIdList: value }).then((res: any) => {
+    if (res.code === 0) {
+      warehouseList.value = res.data;
+    }
+  });
+};
+
+// 获取物资类别
+getSysTreeDict({ type: 1, difference: 2, parentCodeList: props.payload }).then((res: any) => {
+  if (res.code === 0) {
+    suppliesList.value = res.data;
+  }
+});
+
+// 获取表头数据
+getDroughtResistantHeader({ matype1: props.payload }).then((res: any) => {
+  if (res.code === 0) {
+    res.data
+      .map((item: any) => {
+        const parent = {
+          dmUpcode: item.matypecode2,
+          dmUpname: item.matypename2
+        };
+        const own = {
+          dmUpcode: item.matypecode3,
+          dmUpname: item.matypename3,
+          units: item.matypename4
+        };
+        return [parent, own];
+      })
+      .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");
+  }
+  getList();
+});
+
+const clearSearch = () => {
+  searchList.value = {
+    provinceDeptIdList: [],
+    deptIdList: [],
+    dmUpcode1List: [],
+    dmUpname2: ""
+  };
+  getList();
+};
+
+// getSpanArr方法
+const getSpanArr = (data: any) => {
+  const mergeCol = ["upidName", "username"];
+  mergeCol.forEach((key: any) => {
+    let count = 0; // 用来记录需要合并行的起始位置
+    mergeObj.value[key] = []; // 记录每一列的合并信息
+    data.forEach((item: any, index: number) => {
+      // index == 0表示数据为第一行，直接 push 一个 1
+      if (index === 0) {
+        mergeObj.value[key].push(1);
+      } else {
+        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
+        if (item[key] === data[index - 1][key]) {
+          mergeObj.value[key][count] += 1;
+          mergeObj.value[key].push(0);
+        } else {
+          // 如果当前行和上一行其值不相等
+          count = index; // 记录当前位置
+          mergeObj.value[key].push(1); // 重新push 一个 1
+        }
+      }
+    });
+  });
+  tableLoading.value = false;
+};
+
+// 获取表格数据
+const getList = () => {
+  const data = {
+    ...searchList.value,
+    dmUpcode0List: ["100", "200"]
+  };
+  tableLoading.value = true;
+  getDroughtResistantList(data).then((res: any) => {
+    if (res.code === 0) {
+      tableData.value = res.data
+        .map((item: any) => {
+          const retVal: any = ref({
+            ...item.map
+          });
+          retVal.value.upidName = item.upidName;
+          retVal.value.username = item.username;
+          retVal.value.tolNum = item.tolNum;
+          retVal.value.tolMoney = item.tolMoney;
+          return retVal.value;
+        })
+        .filter((item: any) => {
+          headerProps.value.filter((ite: any) => {
+            if (!item[ite]) {
+              item[ite] = 0;
+            }
+          });
+          return item;
+        });
+      getSpanArr(tableData.value);
+    }
+  });
+};
+
+const arraySpanMethod = ({ column, rowIndex, columnIndex }: any) => {
+  if (rowIndex === 0) {
+    if (columnIndex === 1) {
+      return [1, 2];
+    } else if (columnIndex === 2) {
+      return [0, 0];
+    }
+  }
+  const mergeCol = ["upidName", "username"];
+  // 判断列的属性
+  if (mergeCol.indexOf(column.property) !== -1) {
+    // 判断其值是不是为0
+    if (mergeObj.value[column.property][rowIndex]) {
+      return [mergeObj.value[column.property][rowIndex], 1];
+    } else {
+      // 如果为0则为需要合并的行
+      return [0, 0];
+    }
+  }
+};
+
+const downloadExcel = () => {
+  const exportProp = deepClone(headerProps.value);
+  exportProp.push("tolNum", "tolMoney");
+  exportExcel(tableData.value, exportHeaderName.value, exportProp, props.fileName);
+};
+</script>

src/views/dataStatistics/droughtResistant/index.vue

@@ -1,264 +1,8 @@
 <!-- 防汛抗旱物资数量价值表 -->
 <template>
-  <basic-container>
-    <el-form class="whole_form">
-      <el-row :gutter="20">
-        <el-col :span="6" v-if="userInfo.deptType === '1'">
-          <el-form-item label="省份">
-            <el-select v-model="searchList.provinceDeptIdList" clearable multiple @change="getSupplies">
-              <el-option v-for="item in cityList" :key="item.deptId" :label="item.name" :value="item.deptId" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6" v-if="userInfo.deptType === '1'">
-          <el-form-item label="储备仓库">
-            <el-select
-              v-model="searchList.deptIdList"
-              clearable
-              multiple
-              :disabled="searchList.provinceDeptIdList.length === 0"
-              :placeholder="searchList.provinceDeptIdList.length === 0 ? '请先选择省份' : '请选择储备仓库'"
-            >
-              <el-option
-                v-for="item in warehouseList"
-                :key="item.deptId"
-                :label="item.abbreviationName"
-                :value="item.deptId"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6" v-if="userInfo.deptType === '2'">
-          <el-form-item label="储备仓库">
-            <el-select v-model="searchList.deptIdList" clearable multiple placeholder="请选择储备仓库">
-              <el-option
-                v-for="item in warehouseList"
-                :key="item.deptId"
-                :label="item.abbreviationName"
-                :value="item.deptId"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="物资类别">
-            <el-select v-model="searchList.dmUpcode1List" clearable multiple>
-              <el-option v-for="item in suppliesList" :key="item.id" :label="item.name" :value="item.code" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="物资名称">
-            <el-input v-model="searchList.dmUpname2" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row class="btn_center">
-        <el-button :icon="Search" type="primary" @click="getList">查询</el-button>
-        <el-button :icon="RefreshRight" @click="clearSearch">清空</el-button>
-      </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" />
-      <el-table-column prop="username" label="储备仓库" header-align="center" align="center" width="120" />
-      <template v-for="item in headerName" :key="item">
-        <el-table-column :label="item.dmUpname" header-align="center" align="center">
-          <template v-for="iten in item.children" :key="iten">
-            <el-table-column :label="iten.dmUpname" header-align="center" align="center">
-              <el-table-column :prop="iten.dmUpcode" :label="iten.units" header-align="center" align="center" />
-            </el-table-column>
-          </template>
-        </el-table-column>
-      </template>
-      <el-table-column prop="tolNum" label="数量总计（件）" header-align="center" align="center" />
-      <el-table-column prop="tolMoney" label="总价值（万元）" header-align="center" align="center" />
-    </el-table>
-  </basic-container>
+  <valueTable :payload="['100', '200']" fileName="防汛抗旱物资数量价值表" />
 </template>
 
 <script setup lang="ts">
-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, Download } from "@element-plus/icons-vue";
-
-const headerName: any = ref([]);
-const headerProps: any = ref([]);
-const tableData: any = ref([]);
-const searchList: any = ref({
-  provinceDeptIdList: [],
-  deptIdList: [],
-  dmUpcode1List: [],
-  dmUpname2: ""
-});
-const mergeObj: any = ref({});
-const cityList: any = ref([]);
-const warehouseList: any = ref([]);
-const suppliesList: any = ref([]);
-const exportHeaderName = ref([]); // 导出用表头
-
-const { userInfo } = useGetters(["userInfo"]);
-
-if (userInfo.value.deptType === "1") {
-  // 获取省份列表
-  getCityList({ deptType: 2 }).then((res: any) => {
-    if (res.code === 0) {
-      cityList.value = res.data;
-    }
-  });
-} else {
-  // 获取储备仓库
-  getCityList({ parentIdList: [userInfo.value.deptId] }).then((res: any) => {
-    if (res.code === 0) {
-      warehouseList.value = res.data;
-    }
-  });
-}
-
-// 根据省份列表获取储备仓库
-const getSupplies = (value: string[]) => {
-  getCityList({ parentIdList: value }).then((res: any) => {
-    if (res.code === 0) {
-      warehouseList.value = res.data;
-    }
-  });
-};
-
-// 获取物资类别
-getSysTreeDict({ type: 1, difference: 2, parentCodeList: ["100", "200"] }).then((res: any) => {
-  if (res.code === 0) {
-    suppliesList.value = res.data;
-  }
-});
-
-// 获取表头数据
-getDroughtResistantHeader({ matype1: ["100", "200"] }).then((res: any) => {
-  if (res.code === 0) {
-    res.data
-      .map((item: any) => {
-        const parent = {
-          dmUpcode: item.matypecode2,
-          dmUpname: item.matypename2
-        };
-        const own = {
-          dmUpcode: item.matypecode3,
-          dmUpname: item.matypename3,
-          units: item.matypename4
-        };
-        return [parent, own];
-      })
-      .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");
-  }
-  getList();
-});
-
-const clearSearch = () => {
-  searchList.value = {
-    provinceDeptIdList: [],
-    deptIdList: [],
-    dmUpcode1List: [],
-    dmUpname2: ""
-  };
-  getList();
-};
-
-// getSpanArr方法
-const getSpanArr = (data: any) => {
-  const mergeCol = ["upidName", "username"];
-  // headerProps.value.forEach((key: any) => {
-  mergeCol.forEach((key: any) => {
-    let count = 0; // 用来记录需要合并行的起始位置
-    mergeObj.value[key] = []; // 记录每一列的合并信息
-    data.forEach((item: any, index: number) => {
-      // index == 0表示数据为第一行，直接 push 一个 1
-      if (index === 0) {
-        mergeObj.value[key].push(1);
-      } else {
-        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
-        if (item[key] === data[index - 1][key]) {
-          mergeObj.value[key][count] += 1;
-          mergeObj.value[key].push(0);
-        } else {
-          // 如果当前行和上一行其值不相等
-          count = index; // 记录当前位置
-          mergeObj.value[key].push(1); // 重新push 一个 1
-        }
-      }
-    });
-  });
-};
-
-// 获取表格数据
-const getList = () => {
-  const data = {
-    ...searchList.value,
-    dmUpcode0List: ["100", "200"]
-  };
-  getDroughtResistantList(data).then((res: any) => {
-    if (res.code === 0) {
-      tableData.value = res.data
-        .map((item: any) => {
-          const retVal: any = ref({
-            ...item.map
-          });
-          retVal.value.upidName = item.upidName;
-          retVal.value.username = item.username;
-          retVal.value.tolNum = item.tolNum;
-          retVal.value.tolMoney = item.tolMoney;
-          return retVal.value;
-        })
-        .filter((item: any) => {
-          headerProps.value.filter((ite: any) => {
-            if (!item[ite]) {
-              item[ite] = 0;
-            }
-          });
-          return item;
-        });
-      getSpanArr(tableData.value);
-    }
-  });
-};
-
-const arraySpanMethod = ({ column, rowIndex, columnIndex }: any) => {
-  if (rowIndex === 0) {
-    if (columnIndex === 1) {
-      return [1, 2];
-    } else if (columnIndex === 2) {
-      return [0, 0];
-    }
-  }
-  const mergeCol = ["upidName", "username"];
-  // 判断列的属性
-  if (mergeCol.indexOf(column.property) !== -1) {
-    // 判断其值是不是为0
-    if (mergeObj.value[column.property][rowIndex]) {
-      return [mergeObj.value[column.property][rowIndex], 1];
-    } else {
-      // 如果为0则为需要合并的行
-      return [0, 0];
-    }
-  }
-};
-
-const downloadExcel = () => {
-  exportExcel(tableData.value, exportHeaderName.value, headerProps.value, "防汛抗旱物资数量价值表");
-};
+import valueTable from "@/views/dataStatistics/components/valueTable.vue";
 </script>

src/views/dataStatistics/floodDroughtPrecaution/index.vue

@@ -1,233 +1,10 @@
 <!-- 防汛抗旱明细统计表 -->
 <template>
-  <basic-container>
-    <el-form class="whole_form">
-      <el-row :gutter="20">
-        <el-col :span="6" v-if="userInfo.deptType === '1'">
-          <el-form-item label="省份">
-            <el-select v-model="searchList.gameDeptId" multiple clearable @change="getSupplies">
-              <el-option v-for="item in cityList" :key="item.deptId" :label="item.name" :value="item.deptId" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6" v-if="userInfo.deptType === '1'">
-          <el-form-item label="储备仓库">
-            <el-select
-              multiple
-              clearable
-              v-model="searchList.warehouseDeptId"
-              :disabled="!searchList.gameDeptId"
-              :placeholder="!searchList.gameDeptId ? '请先选择省份' : '请选择储备仓库'"
-            >
-              <el-option
-                v-for="item in warehouseList"
-                :key="item.deptId"
-                :label="item.abbreviationName"
-                :value="item.deptId"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6" v-if="userInfo.deptType === '2'">
-          <el-form-item label="储备仓库">
-            <el-select v-model="searchList.warehouseDeptId" multiple clearable placeholder="请选择储备仓库">
-              <el-option
-                v-for="item in warehouseList"
-                :key="item.deptId"
-                :label="item.abbreviationName"
-                :value="item.deptId"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="物资类别">
-            <el-select v-model="searchList.dmUpcode1List" clearable multiple>
-              <el-option v-for="item in suppliesList" :key="item.id" :label="item.name" :value="item.code" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="物资名称">
-            <el-input v-model="searchList.dmUpname2" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row class="btn_center">
-        <el-button :icon="Search" type="primary" @click="getList">查询</el-button>
-        <el-button :icon="RefreshRight" @click="clearSearch">清空</el-button>
-      </el-row>
-    </el-form>
-
-    <el-table :data="tableData" stripe border :span-method="arraySpanMethod" v-loading="tableLoading">
-      <!-- <el-table :data="tableData" stripe border> -->
-      <el-table-column type="index" label="序号" header-align="center" align="center" />
-      <el-table-column prop="gameName" label="省份" header-align="center" align="center" />
-      <el-table-column prop="warehouseName" label="储备仓库" header-align="center" align="center" width="120" />
-      <el-table-column prop="materials1" label="物资大类" header-align="center" align="center" />
-      <el-table-column prop="materials2" label="物资类别" header-align="center" align="center" />
-      <el-table-column prop="materials3" label="物资名称" header-align="center" align="center" />
-      <el-table-column prop="materials4" label="物资单位" header-align="center" align="center" />
-      <el-table-column prop="specs" label="规格" header-align="center" align="center" />
-      <el-table-column prop="quantity" label="数量" header-align="center" align="center" />
-      <el-table-column prop="inboundTime" label="入库时间" header-align="center" align="center" />
-      <el-table-column prop="unitPrice" label="单价(元)" header-align="center" align="center" />
-      <el-table-column prop="totalPrice" label="总价(万元)" header-align="center" align="center">
-        <template #default="{ row }">
-          {{ row.totalPrice ?? row.warehouseTotalPrice }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="remarks" label="备注" header-align="center" align="center" />
-    </el-table>
-  </basic-container>
+  <detailedTable :payload="['100', '200']" />
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-
-import { useGetters } from "@/hooks/storeHooks";
-import { Search, RefreshRight } from "@element-plus/icons-vue";
-import { getDetailList, getCityList, getSysTreeDict } from "@/api/dataStatistics/index";
-
-const tableData: any = ref([]);
-const tableLoading = ref(false);
-const searchList: any = ref({
-  gameDeptId: [],
-  warehouseDeptId: [],
-  dmUpcode1List: [],
-  dmUpname2: ""
-});
-const mergeObj: any = ref({});
-const cityList: any = ref([]);
-const warehouseList: any = ref([]);
-const suppliesList: any = ref([]);
-
-const { userInfo } = useGetters(["userInfo"]);
-
-if (userInfo.value.deptType === "1") {
-  // 获取省份列表
-  getCityList({ deptType: 2 }).then((res: any) => {
-    if (res.code === 0) {
-      cityList.value = res.data;
-      searchList.value.gameDeptId = [cityList.value[0].deptId];
-      getSupplies(searchList.value.gameDeptId);
-    }
-  });
-} else {
-  // 获取储备仓库
-  getCityList({ parentIdList: [userInfo.value.deptId] }).then((res: any) => {
-    if (res.code === 0) {
-      warehouseList.value = res.data;
-      searchList.value.warehouseDeptId = [warehouseList.value[0].deptId];
-    }
-  });
-}
-
-// 根据省份列表获取储备仓库
-const getSupplies = (value: string) => {
-  getCityList({ parentIdList: value }).then((res: any) => {
-    if (res.code === 0) {
-      warehouseList.value = res.data;
-    }
-  });
-};
-
-// 获取物资类别
-getSysTreeDict({ type: 1, difference: 2, parentCodeList: ["100", "200"] }).then((res: any) => {
-  if (res.code === 0) {
-    suppliesList.value = res.data;
-  }
-});
-
-const clearSearch = () => {
-  searchList.value = {
-    gameDeptId: [],
-    warehouseDeptId: [],
-    dmUpcode1List: [],
-    dmUpname2: ""
-  };
-  getList();
-};
-
-// 获取表格数据
-const getList = () => {
-  const data = {
-    dmUpcode0List: ["100", "200"],
-    ...searchList.value
-  };
-  tableLoading.value = true;
-  getDetailList(data).then((res: any) => {
-    if (res.code === 0) {
-      tableData.value = res.data.filter((item: any) => {
-        if (item.gameName === null && item.totalPrice === null) {
-          item.unitPrice = "总价值";
-          return item;
-        } else if (item.totalPrice === null) {
-          item.unitPrice = "合计";
-          return item;
-        } else {
-          return item;
-        }
-      });
-      getSpanArr(tableData.value);
-    }
-  });
-};
-
-getList();
-
-const arraySpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
-  const firstHidden = [2, 3, 4, 5, 6, 7, 8, 9];
-  const secondHidden = [4, 5, 6, 7, 8, 9];
-  if (rowIndex === 0) {
-    if (columnIndex === 1) {
-      return [1, 9];
-    } else if (firstHidden.includes(columnIndex)) {
-      return [0, 0];
-    }
-  } else if (row.unitPrice === "合计") {
-    if (columnIndex === 3) {
-      return [1, 7];
-    } else if (secondHidden.includes(columnIndex)) {
-      return [0, 0];
-    }
-  }
-  const mergeCol = ["gameName", "warehouseName", "materials1", "materials2"];
-  // 判断列的属性
-  if (mergeCol.indexOf(column.property) !== -1) {
-    // 判断其值是不是为0
-    if (mergeObj.value[column.property][rowIndex]) {
-      return [mergeObj.value[column.property][rowIndex], 1];
-    } else {
-      // 如果为0则为需要合并的行
-      return [0, 0];
-    }
-  }
-};
-
-// getSpanArr方法
-const getSpanArr = (data: any) => {
-  const mergeCol = ["gameName", "warehouseName", "materials1", "materials2"];
-  mergeCol.forEach((key: any) => {
-    let count = 0; // 用来记录需要合并行的起始位置
-    mergeObj.value[key] = []; // 记录每一列的合并信息
-    data.forEach((item: any, index: number) => {
-      // index == 0表示数据为第一行，直接 push 一个 1
-      if (index === 0) {
-        mergeObj.value[key].push(1);
-      } else {
-        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
-        if (item[key] === data[index - 1][key]) {
-          mergeObj.value[key][count] += 1;
-          mergeObj.value[key].push(0);
-        } else {
-          // 如果当前行和上一行其值不相等
-          count = index; // 记录当前位置
-          mergeObj.value[key].push(1); // 重新push 一个 1
-        }
-      }
-    });
-  });
-  tableLoading.value = false;
-};
+import detailedTable from "@/views/dataStatistics/components/detailedTable.vue";
 </script>
+
+<style lang="scss" scoped></style>

src/views/dataStatistics/reliefMaterial/index.vue

@@ -1,259 +1,8 @@
 <!-- 救灾物资数量价值表 -->
 <template>
-  <basic-container>
-    <el-form class="whole_form">
-      <el-row :gutter="20">
-        <el-col :span="6" v-if="userInfo.deptType === '1'">
-          <el-form-item label="省份">
-            <el-select v-model="searchList.provinceDeptIdList" clearable multiple @change="getSupplies">
-              <el-option v-for="item in cityList" :key="item.deptId" :label="item.name" :value="item.deptId" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6" v-if="userInfo.deptType === '1'">
-          <el-form-item label="储备仓库">
-            <el-select
-              v-model="searchList.deptIdList"
-              clearable
-              multiple
-              :disabled="searchList.provinceDeptIdList.length === 0"
-              :placeholder="searchList.provinceDeptIdList.length === 0 ? '请先选择省份' : '请选择储备仓库'"
-            >
-              <el-option
-                v-for="item in warehouseList"
-                :key="item.deptId"
-                :label="item.abbreviationName"
-                :value="item.deptId"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6" v-if="userInfo.deptType === '2'">
-          <el-form-item label="储备仓库">
-            <el-select v-model="searchList.deptIdList" clearable multiple placeholder="请选择储备仓库">
-              <el-option
-                v-for="item in warehouseList"
-                :key="item.deptId"
-                :label="item.abbreviationName"
-                :value="item.deptId"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="物资类别">
-            <el-select v-model="searchList.dmUpcode1List" clearable multiple>
-              <el-option v-for="item in suppliesList" :key="item.id" :label="item.name" :value="item.code" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="物资名称">
-            <el-input v-model="searchList.dmUpname2" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row class="btn_center">
-        <el-button :icon="Search" type="primary" @click="getList">查询</el-button>
-        <el-button :icon="RefreshRight" @click="clearSearch">清空</el-button>
-      </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" />
-      <el-table-column prop="username" label="储备仓库" header-align="center" align="center" width="120" />
-      <template v-for="item in headerName" :key="item">
-        <el-table-column :label="item.dmUpname" header-align="center" align="center">
-          <template v-for="iten in item.children" :key="iten">
-            <el-table-column :label="iten.dmUpname" header-align="center" align="center">
-              <el-table-column :prop="iten.dmUpcode" :label="iten.units" header-align="center" align="center" />
-            </el-table-column>
-          </template>
-        </el-table-column>
-      </template>
-      <el-table-column prop="tolNum" label="数量总计（件）" header-align="center" align="center" />
-      <el-table-column prop="tolMoney" label="总价值（万元）" header-align="center" align="center" />
-    </el-table>
-  </basic-container>
+  <valueTable :payload="['300']" fileName="救灾物资数量价值表" />
 </template>
 
 <script setup lang="ts">
-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, Download } from "@element-plus/icons-vue";
-
-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"]);
-
-if (userInfo.value.deptType === "1") {
-  // 获取省份列表
-  getCityList({ deptType: 2 }).then((res: any) => {
-    if (res.code === 0) {
-      cityList.value = res.data;
-    }
-  });
-} else {
-  // 获取储备仓库
-  getCityList({ parentIdList: [userInfo.value.deptId] }).then((res: any) => {
-    if (res.code === 0) {
-      warehouseList.value = res.data;
-    }
-  });
-}
-
-// 根据省份列表获取储备仓库
-const getSupplies = (value: string[]) => {
-  getCityList({ parentIdList: value }).then((res: any) => {
-    if (res.code === 0) {
-      warehouseList.value = res.data;
-    }
-  });
-};
-
-// 获取物资类别
-getSysTreeDict({ type: 1, difference: 2, parentCodeList: ["300"] }).then((res: any) => {
-  if (res.code === 0) {
-    suppliesList.value = res.data;
-  }
-});
-
-// 获取表头数据
-getDroughtResistantHeader({ matype1: ["300"] }).then((res: any) => {
-  if (res.code === 0) {
-    res.data
-      .map((item: any) => {
-        const parent = {
-          dmUpcode: item.matypecode2,
-          dmUpname: item.matypename2
-        };
-        const own = {
-          dmUpcode: item.matypecode3,
-          dmUpname: item.matypename3,
-          units: item.matypename4
-        };
-        return [parent, own];
-      })
-      .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");
-  }
-  getList();
-});
-
-// getSpanArr方法
-const getSpanArr = (data: any) => {
-  const mergeCol = ["upidName", "username"];
-  mergeCol.forEach((key: any) => {
-    let count = 0; // 用来记录需要合并行的起始位置
-    mergeObj.value[key] = []; // 记录每一列的合并信息
-    data.forEach((item: any, index: number) => {
-      // index == 0表示数据为第一行，直接 push 一个 1
-      if (index === 0) {
-        mergeObj.value[key].push(1);
-      } else {
-        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
-        if (item[key] === data[index - 1][key]) {
-          mergeObj.value[key][count] += 1;
-          mergeObj.value[key].push(0);
-        } else {
-          // 如果当前行和上一行其值不相等
-          count = index; // 记录当前位置
-          mergeObj.value[key].push(1); // 重新push 一个 1
-        }
-      }
-    });
-  });
-};
-
-// 获取表格数据
-const getList = () => {
-  const data = {
-    ...searchList.value,
-    dmUpcode0List: ["300"]
-  };
-  getDroughtResistantList(data).then((res: any) => {
-    if (res.code === 0) {
-      tableData.value = res.data
-        .map((item: any) => {
-          const retVal: any = ref({
-            ...item.map
-          });
-          retVal.value.upidName = item.upidName;
-          retVal.value.username = item.username;
-          retVal.value.tolMoney = item.tolMoney;
-          retVal.value.tolNum = item.tolNum;
-
-          return retVal.value;
-        })
-        .filter((item: any) => {
-          headerProps.value.filter((ite: any) => {
-            if (!item[ite]) {
-              item[ite] = 0;
-            }
-          });
-          return item;
-        });
-      getSpanArr(tableData.value);
-    }
-  });
-};
-
-const clearSearch = () => {
-  searchList.value = {
-    provinceDeptIdList: [],
-    deptIdList: [],
-    dmUpcode1List: [],
-    dmUpname2: ""
-  };
-  getList();
-};
-
-const arraySpanMethod = ({ column, rowIndex, columnIndex }: any) => {
-  if (rowIndex === 0) {
-    if (columnIndex === 1) {
-      return [1, 2];
-    } else if (columnIndex === 2) {
-      return [0, 0];
-    }
-  }
-  const mergeCol = ["upidName", "username"];
-  // 判断列的属性
-  if (mergeCol.indexOf(column.property) !== -1) {
-    // 判断其值是不是为0
-    if (mergeObj.value[column.property][rowIndex]) {
-      return [mergeObj.value[column.property][rowIndex], 1];
-    } else {
-      // 如果为0则为需要合并的行
-      return [0, 0];
-    }
-  }
-};
-
-const downloadExcel = () => {
-  exportExcel(tableData.value, exportHeaderName.value, headerProps.value, "救灾物资数量价值表");
-};
+import valueTable from "@/views/dataStatistics/components/valueTable.vue";
 </script>

src/views/dataStatistics/reliefMaterialsDetailed/index.vue

@@ -1,232 +1,10 @@
 <!-- 救灾物资明细统计表 -->
 <template>
-  <basic-container>
-    <el-form class="whole_form">
-      <el-row :gutter="20">
-        <el-col :span="6" v-if="userInfo.deptType === '1'">
-          <el-form-item label="省份">
-            <el-select v-model="searchList.gameDeptId" multiple clearable @change="getSupplies">
-              <el-option v-for="item in cityList" :key="item.deptId" :label="item.name" :value="item.deptId" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6" v-if="userInfo.deptType === '1'">
-          <el-form-item label="储备仓库">
-            <el-select
-              multiple
-              clearable
-              v-model="searchList.warehouseDeptId"
-              :disabled="!searchList.gameDeptId"
-              :placeholder="!searchList.gameDeptId ? '请先选择省份' : '请选择储备仓库'"
-            >
-              <el-option
-                v-for="item in warehouseList"
-                :key="item.deptId"
-                :label="item.abbreviationName"
-                :value="item.deptId"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6" v-if="userInfo.deptType === '2'">
-          <el-form-item label="储备仓库">
-            <el-select v-model="searchList.warehouseDeptId" multiple clearable placeholder="请选择储备仓库">
-              <el-option
-                v-for="item in warehouseList"
-                :key="item.deptId"
-                :label="item.abbreviationName"
-                :value="item.deptId"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="物资类别">
-            <el-select v-model="searchList.dmUpcode1List" clearable multiple>
-              <el-option v-for="item in suppliesList" :key="item.id" :label="item.name" :value="item.code" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="物资名称">
-            <el-input v-model="searchList.dmUpname2" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row class="btn_center">
-        <el-button :icon="Search" type="primary" @click="getList">查询</el-button>
-        <el-button :icon="RefreshRight" @click="clearSearch">清空</el-button>
-      </el-row>
-    </el-form>
-
-    <el-table :data="tableData" stripe border :span-method="arraySpanMethod" v-loading="tableLoading">
-      <!-- <el-table :data="tableData" stripe border> -->
-      <el-table-column type="index" label="序号" header-align="center" align="center" />
-      <el-table-column prop="gameName" label="省份" header-align="center" align="center" />
-      <el-table-column prop="warehouseName" label="储备仓库" header-align="center" align="center" width="120" />
-      <el-table-column prop="materials1" label="物资大类" header-align="center" align="center" />
-      <el-table-column prop="materials2" label="物资类别" header-align="center" align="center" />
-      <el-table-column prop="materials3" label="物资名称" header-align="center" align="center" />
-      <el-table-column prop="materials4" label="物资单位" header-align="center" align="center" />
-      <el-table-column prop="specs" label="规格" header-align="center" align="center" />
-      <el-table-column prop="quantity" label="数量" header-align="center" align="center" />
-      <el-table-column prop="inboundTime" label="入库时间" header-align="center" align="center" />
-      <el-table-column prop="unitPrice" label="单价(元)" header-align="center" align="center" />
-      <el-table-column prop="totalPrice" label="总价(万元)" header-align="center" align="center">
-        <template #default="{ row }">
-          {{ row.totalPrice ?? row.warehouseTotalPrice }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="remarks" label="备注" header-align="center" align="center" />
-    </el-table>
-  </basic-container>
+  <detailedTable :payload="['300']" />
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-
-import { useGetters } from "@/hooks/storeHooks";
-import { Search, RefreshRight } from "@element-plus/icons-vue";
-import { getDetailList, getCityList, getSysTreeDict } from "@/api/dataStatistics/index";
-
-const tableData: any = ref([]);
-const tableLoading = ref(false);
-const searchList: any = ref({
-  gameDeptId: [],
-  warehouseDeptId: [],
-  dmUpcode1List: [],
-  dmUpname2: ""
-});
-const mergeObj: any = ref({});
-const cityList: any = ref([]);
-const warehouseList: any = ref([]);
-const suppliesList: any = ref([]);
-
-const { userInfo } = useGetters(["userInfo"]);
-
-if (userInfo.value.deptType === "1") {
-  // 获取省份列表
-  getCityList({ deptType: 2 }).then((res: any) => {
-    if (res.code === 0) {
-      cityList.value = res.data;
-      searchList.value.gameDeptId = [cityList.value[0].deptId];
-      getSupplies(searchList.value.gameDeptId);
-      getList();
-    }
-  });
-} else {
-  // 获取储备仓库
-  getCityList({ parentIdList: [userInfo.value.deptId] }).then((res: any) => {
-    if (res.code === 0) {
-      warehouseList.value = res.data;
-      searchList.value.warehouseDeptId = [warehouseList.value[0].deptId];
-    }
-  });
-}
-
-// 根据省份列表获取储备仓库
-const getSupplies = (value: string) => {
-  getCityList({ parentIdList: value }).then((res: any) => {
-    if (res.code === 0) {
-      warehouseList.value = res.data;
-    }
-  });
-};
-
-// 获取物资类别
-getSysTreeDict({ type: 1, difference: 2, parentCodeList: ["300"] }).then((res: any) => {
-  if (res.code === 0) {
-    suppliesList.value = res.data;
-  }
-});
-
-const clearSearch = () => {
-  searchList.value = {
-    gameDeptId: [],
-    warehouseDeptId: [],
-    dmUpcode1List: [],
-    dmUpname2: ""
-  };
-  getList();
-};
-
-// 获取表格数据
-const getList = () => {
-  const data = {
-    dmUpcode0List: ["300"],
-    ...searchList.value
-  };
-  tableLoading.value = true;
-  getDetailList(data).then((res: any) => {
-    if (res.code === 0) {
-      tableData.value = res.data.filter((item: any) => {
-        if (item.gameName === null && item.totalPrice === null) {
-          item.unitPrice = "总价值";
-          return item;
-        } else if (item.totalPrice === null) {
-          item.unitPrice = "合计";
-          return item;
-        } else {
-          return item;
-        }
-      });
-      getSpanArr(tableData.value);
-    }
-  });
-};
-
-const arraySpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
-  const firstHidden = [2, 3, 4, 5, 6, 7, 8, 9];
-  const secondHidden = [4, 5, 6, 7, 8, 9];
-  if (rowIndex === 0) {
-    if (columnIndex === 1) {
-      return [1, 9];
-    } else if (firstHidden.includes(columnIndex)) {
-      return [0, 0];
-    }
-  } else if (row.unitPrice === "合计") {
-    if (columnIndex === 3) {
-      return [1, 7];
-    } else if (secondHidden.includes(columnIndex)) {
-      return [0, 0];
-    }
-  }
-  const mergeCol = ["gameName", "warehouseName", "materials1", "materials2"];
-  // 判断列的属性
-  if (mergeCol.indexOf(column.property) !== -1) {
-    // 判断其值是不是为0
-    if (mergeObj.value[column.property][rowIndex]) {
-      return [mergeObj.value[column.property][rowIndex], 1];
-    } else {
-      // 如果为0则为需要合并的行
-      return [0, 0];
-    }
-  }
-};
-
-// getSpanArr方法
-const getSpanArr = (data: any) => {
-  const mergeCol = ["gameName", "warehouseName", "materials1", "materials2"];
-  mergeCol.forEach((key: any) => {
-    let count = 0; // 用来记录需要合并行的起始位置
-    mergeObj.value[key] = []; // 记录每一列的合并信息
-    data.forEach((item: any, index: number) => {
-      // index == 0表示数据为第一行，直接 push 一个 1
-      if (index === 0) {
-        mergeObj.value[key].push(1);
-      } else {
-        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
-        if (item[key] === data[index - 1][key]) {
-          mergeObj.value[key][count] += 1;
-          mergeObj.value[key].push(0);
-        } else {
-          // 如果当前行和上一行其值不相等
-          count = index; // 记录当前位置
-          mergeObj.value[key].push(1); // 重新push 一个 1
-        }
-      }
-    });
-  });
-  tableLoading.value = false;
-};
+import detailedTable from "@/views/dataStatistics/components/detailedTable.vue";
 </script>
+
+<style lang="scss" scoped></style>