导出合并

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <router-view />
 
-    <ThemePicker style="display: none;"></ThemePicker>
+    <!-- <ThemePicker style="display: none;"></ThemePicker> -->
     <OnlineFile></OnlineFile>
   </div>
 </template>

src/views/attendance/leavechart.vue

@@ -6,7 +6,7 @@
           <el-date-picker v-model="select.month"
             type="month" size="small" value-format="yyyy-MM"
             placeholder="月份" format="yyyy-MM"/>
-          <el-select style="width:250px;margin-left:6px"  size="small" v-model="select.department_id" placeholder="请选择">
+          <el-select style="width:250px;margin-left:6px"  size="small" @change="changeDepartment" v-model="select.department_id" placeholder="请选择">
             <el-option v-for="item in departments" :key="item.id" :label="item.name" :value="item.id">
             </el-option>
           </el-select>
@@ -15,11 +15,16 @@
         </template>
       </vxe-toolbar>
       <vxe-table ref="table" stripe :border='true' style="margin-top: 10px;" :loading="loading"
-        :max-height="1400" :min-height="400" :export-config="{}" :print-config="{}" :column-config="{ resizable: true }"
+        :max-height="1400" :min-height="400"
+        :export-config="{type: 'xlsx',filename:exportName,sheetName:exportName}"
+        :print-config="{}" :column-config="{ resizable: true }"
          :expand-config="{
           visibleMethod: () => false,
           trigger: 'manual'
-        }" :data="tableData"  :span-method="mergeCells">
+        }" :data="tableData"
+        :merge-cells="mergeCells"
+        >
+        <!-- :span-method="mergeCells" -->
         <vxe-column width="240" header-align="center" align="center" field="department_name" title="科室"></vxe-column>
         <vxe-column width="180" header-align="center" align="center" field="user.name" title="姓名"></vxe-column>
 
@@ -44,7 +49,7 @@
             </div>
           </template>
         </vxe-column>
-        <vxe-column header-align="center" align="center" field="expire" title="过期天数">
+        <vxe-column header-align="center" align="center" field="expire" title="过期时间">
           <template #default="{ row }">
             <div>
               {{row.expire=='0.00'?'0':row.expire}}
@@ -82,20 +87,29 @@
           month: this.$moment().format('YYYY-MM'),
           department_id: ''
         },
-        departments:[]
+        departments:[],
+        mergeCells:[],
+        exportName:'调休统计表',
+        dName:'全部科室'
       }
     },
     methods: {
       async getList() {
         this.loading = true;
         try {
-          const res = await leaveList(this.select, false);
+          const res = await leaveList(this.select, false);
-          console.log(res);
           let _arr = res?.timeOff || []
           _arr.forEach(item=>{
             item.department_name = item.user.department.name
+            item.sortnumber = item.user.department.sortnumber
+          })
+          _arr.sort((a,b)=>{
+            return a.sortnumber - b.sortnumber
           })
-          this.tableData = _arr;
+          this.tableData = _arr;
+          this.mergeCells = this.generateMergeCells(this.tableData)
+          let date = this.$moment(this.select.month).format("YYYY年MM月")
+          this.exportName = `${date}${this.dName}调休统计表`
           this.loading = false;
         } catch (err) {
           console.error(err);
@@ -105,7 +119,6 @@
       async getDepartmentList() {
         try {
           const res = await departmentListNoAuth();
-          console.log(res);
           let arr = res
           this.departments = arr
           this.departments.unshift({
@@ -116,43 +129,50 @@
           console.error(err);
         }
       },
-      mergeCells({
+      changeDepartment(e){
-        row,
+        if(e){
-        $rowIndex,
+          this.departments.map(item=>{
-        column,
+            if(item.id==e){
-        data
+              this.dName = item.name
-      }) {
-        console.log("row, $rowIndex, column, data", {
-          row,
-          $rowIndex,
-          column,
-          data
-        })
-        let fields = ["department_name"]
-        let cellValue = row[column.property]
-        if (cellValue && fields.includes(column.property)) {
-          let prevRow = data[$rowIndex - 1]
-          let nextRow = data[$rowIndex + 1]
-          if (prevRow && prevRow[column.property] === cellValue) {
-            return {
-              rowspan: 0,
-              colspan: 0
             }
-          } else {
+          })
-            let countRowspan = 1
+        }else{
-            while (nextRow && nextRow[column.property] === cellValue) {
+          this.dName = '全部科室'
-              nextRow = data[++countRowspan + $rowIndex]
+        }
+      },
+      // 合并单元格
+      generateMergeCells(data) {
+        const columns = this.$refs.table.getColumns()
+        let mergeCells = [];
+        const columnsToMerge = ['department_name'];
+        columnsToMerge.forEach(key => {
+          const col = columns.findIndex(item => item['field'] === key);
+          if (col === -1) {
+            return;
+          }
+          for (let i = 0; i < data.length; i++) {
+            let rowspan = 1;
+            const currentValue = data[i][key];
+            for (let j = i + 1; j < data.length; j++) {
+              if (data[j][key] === currentValue) {
+                rowspan++;
+              } else {
+                break;
+              }
             }
-            if (countRowspan > 1) {
+            if (rowspan > 1) {
-              return {
+              mergeCells.push({
-                rowspan: countRowspan,
+                row: i,
+                col,
+                rowspan,
                 colspan: 1
-              }
+              });
+              i += rowspan - 1;
             }
           }
-        }
+        });
-
+        return mergeCells;
-      }
+      },
 
     },
     computed: {},

src/views/attendance/overtimechart.vue

@@ -5,7 +5,8 @@
         <template #buttons>
           <el-date-picker v-model="select.month" type="month" size="small" value-format="yyyy-MM" placeholder="月份"
             format="yyyy-MM" />
-          <el-select style="width:250px;margin-left:6px" size="small" v-model="select.department_id" placeholder="请选择">
+          <el-select style="width:250px;margin-left:6px" size="small" @change="changeDepartment"
+            v-model="select.department_id" placeholder="请选择">
             <el-option v-for="item in departments" :key="item.id" :label="item.name" :value="item.id">
             </el-option>
           </el-select>
@@ -14,12 +15,12 @@
         </template>
       </vxe-toolbar>
       <vxe-table ref="table" stripe :border='true' style="margin-top: 10px;" :loading="loading" :max-height="1400"
-        :min-height="400" :export-config="{type: 'xlsx'}" :print-config="{}" :column-config="{ resizable: true }"
+        :min-height="400" :export-config="{type: 'xlsx',filename:exportName,sheetName:exportName}" :print-config="{}"
-        :expand-config="{
+        :column-config="{ resizable: true }" :expand-config="{
           visibleMethod: () => false,
           trigger: 'manual'
-        }" :data="tableData" :span-method="spanMethods">
+        }" :data="tableData" :merge-cells="mergeCells">
-        <!-- :span-method="spanMethods"  :merge-cells="mergeCells"-->
+        <!-- :span-method="spanMethods"  -->
         <vxe-column width="180" header-align="center" align="center" field="department_name" title="科室"></vxe-column>
         <vxe-column width="180" header-align="center" align="center" field="name" title="姓名"></vxe-column>
         <vxe-column width="180" header-align="center" align="center" field="kaishiriqi" title="日期">
@@ -68,44 +69,9 @@
           department_id: ''
         },
         departments: [],
-        mergeCells: [
+        mergeCells: [],
-          // { row: 0, col: 2, rowspan: 1, colspan: 2 },
+        exportName: '加班统计表',
-          // { row: 2, col: 2, rowspan: 2, colspan: 1 }
+        dName: '全部科室'
-        ],
-        columns: [{
-            field: 'department_name',
-            title: '科室'
-          },
-          {
-            field: 'name',
-            title: '姓名'
-          },
-          {
-            field: 'kaishiriqi',
-            title: '开始日期'
-          },
-          {
-            field: 'yuanyinshuoming',
-            title: '加班事由'
-          },
-          {
-            field: 'jiabanshijian',
-            title: '加班时间'
-          },
-          {
-            field: 'yuanyinshuoming',
-            title: '加班事由'
-          },
-          {
-            field: 'jiabanshichang',
-            title: '加班时长(h)'
-          },
-          {
-            field: 'allDay',
-            title: '本月累计(d)'
-          }
-
-        ]
       }
     },
     methods: {
@@ -115,9 +81,9 @@
           const res = await overtimeList(this.select, false);
           console.log(res);
           let data = res?.users || [];
-          this.tableData = this.overtimeData(data)
+          this.tableData = this.overtimeData(data)
-          console.log("this.tableData", this.tableData)
+          let date = this.$moment(this.select.month).format("YYYY年MM月")
-          // this.setRowSpans()
+          this.exportName = `${date}${this.dName}加班统计表`
           this.loading = false;
         } catch (err) {
           console.error(err);
@@ -151,15 +117,20 @@
             overtime
           } = item;
           const allDay = overtime.reduce((sum, overtimeItem) => sum + parseFloat(overtimeItem.day), 0);
-
           overtime.forEach(overtimeItem => {
             overtimeItem.pid = id;
             overtimeItem.name = name;
             overtimeItem.department_name = department.name
+            overtimeItem.sortnumber = department.sortnumber
+            overtimeItem.department_id = department.id
             overtimeItem.allDay = parseFloat(allDay).toFixed(2);
             result.push(overtimeItem);
           });
+          result.sort((a, b) => {
+            return a.sortnumber - b.sortnumber
+          })
         });
+        this.mergeCells = this.generateMergeCells(result)
         return result;
       },
       exportjbMethod({
@@ -167,112 +138,50 @@
       }) {
         return `${row.kaishiriqi?row.kaishiriqi.substring(11,row.kaishiriqi.length):''}-${row.kaishiriqi?row.jieshushijian.substring(11,row.jieshushijian.length):''}`
       },
-      spanMethods({
+      changeDepartment(e) {
-        row,
+        if (e) {
-        $rowIndex,
+          this.departments.map(item => {
-        column,
+            if (item.id == e) {
-        data
+              this.dName = item.name
-      }) {
-        let fields = ["department_name", "name", "allDay"]
-        let cellValue = row[column.property]
-        if (cellValue && fields.includes(column.property)) {
-          let prevRow = data[$rowIndex - 1]
-          let nextRow = data[$rowIndex + 1]
-          if (prevRow && prevRow[column.property] === cellValue) {
-            return {
-              rowspan: 0,
-              colspan: 0
-            }
-          } else {
-            let countRowspan = 1
-            while (nextRow && nextRow[column.property] === cellValue) {
-              nextRow = data[++countRowspan + $rowIndex]
             }
-            if (countRowspan > 1) {
+          })
-              return {
+        } else {
-                rowspan: countRowspan,
+          this.dName = '全部科室'
-                colspan: 1
-              }
-            }
-          }
         }
-
       },
       // 合并单元格
-      setRowSpans() {
+      generateMergeCells(data) {
-        const options = {
+        const columns = this.$refs.table.getColumns()
-          list: this.tableData, // 表格数据
+        let mergeCells = [];
-          columns: this.columns, // 完整表头
+        const columnsToMerge = ['department_name', 'name', 'allDay'];
-          merges: [ "name", "department_name"], // 需要合并的列
+        columnsToMerge.forEach(key => {
-          condition: ['pid'], // 合并条件
+          const col = columns.findIndex(item => item['field'] === key);
-          field: 'field' // 表头取值的字段
+          if (col === -1) {
-        };
+            return;
-        // 传入此配置项，是指将pid相等的相邻数据合并，如果两条数据不相邻即使pid相等也不会合并
+          }
-        this.mergeCells = this.setMergeCells(options);
+          for (let i = 0; i < data.length; i++) {
-        console.log('this.mergeCells: ', this.mergeCells);
+            let rowspan = 1;
-      },
+            const currentValue = data[i][key];
-      setMergeCells({
+            for (let j = i + 1; j < data.length; j++) {
-        list = [],
+              if (data[j][key] === currentValue) {
-        columns = [],
+                rowspan++;
-        merges = [],
+              } else {
-        condition = [],
+                break;
-        field = 'field'
+              }
-      }) {
+            }
-        console.log("list",list)
+            if (rowspan > 1) {
-        const validMap = new Map(); // 有效合并配置项
+              mergeCells.push({
-        for (let i = 0; i < list.length; i++) {
+                row: i,
-          // 根据判断条件取出当前行对应的表格数据，生成唯一标识
+                col,
-          console.log("list[i][field])",i,list[i]['pid'])
+                rowspan,
-          const hashKey = condition.map(field => list[i][field]).join('&&');
+                colspan: 1
-          let flag = true;
+              });
-          let count = 1;
+              i += rowspan - 1;
-          // 从当前索引i开始，往后找，数据相同的话，count自增，否则跳出while循环
-          while (flag && i + count < list.length) {
-            // 根据判断条件取出下一行的表格数据，生成唯一标识
-            const nextRow = condition.map(field => list[i + count][field]).join('&&');
-            if (hashKey === nextRow) {
-              // 数据相同，count自增
-              count++;
-            } else {
-              // 数据不同，跳出while循环
-              flag = false;
             }
           }
-          // 将有效的合并配置项存入validMap
+        });
-          count > 1 && validMap.set(hashKey + '_' + i, {
-            row: i,
-            rowspan: count
-          });
-          // i 跳过已合并的行，减 1 是因为 i++
-          i += count - 1;
-          // 重置 while 循环标识
-          flag = true;
-        }
-        // 合并记录转换
-        const recordsList = [...validMap.values()];
-        console.log("recordsList",recordsList)
-        if (recordsList.length == 0) {
-          return [];
-        }
-        // 预处理列索引
-        const cols = merges.reduce((acc, mergeField) => {
-          const idx = columns.findIndex(item => item[field] === mergeField);
-          idx !== -1 && acc.push(idx);
-          return acc;
-        }, []);
-        console.log("cols",cols)
-        // 遍历列索引，生成合并单元格配置集合
-        const mergeCells = recordsList.flatMap(({
-          row,
-          rowspan
-        }) => cols.map(col => ({
-          row,
-          col,
-          rowspan,
-          colspan: 1
-        })));
         return mergeCells;
-      }
+      },
 
     },
     computed: {},