style:表格合并

任超
Showing 6 changed files with 140 additions and 114 deletions
package.json
src/main.js
src/utils/tools.js
src/views/statistics/dataReceiveQuality/index.vue
src/views/statistics/nullTermRatio/index.vue
src/views/statistics/registerBookQuality/index.vue
--- a/package.json
View file @2dd01cd
+++ b/package.json
View file @2dd01cd
@@ -13,6 +13,7 @@
    "clipboard": "^2.0.11",
    "core-js": "^3.6.5",
    "echarts": "^4.6.0",
+    "file-saver": "^2.0.5",
    "js-cookie": "2.2.0",
    "jsoneditor": "^9.9.2",
    "lodash": "^4.17.21",
@@ -22,10 +23,11 @@
    "vue": "2.6.10",
    "vue-awesome": "^4.5.0",
    "vue-json-editor": "^1.4.3",
-    "vue-json-excel": "^0.3.0",
    "vue-router": "3.0.2",
    "vuex": "3.1.0",
-    "xe-utils": "^3.5.7"
+    "xe-utils": "^3.5.7",
+    "xlsx": "^0.17.0",
+    "xlsx-style": "^0.8.13"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.4",
--- a/src/main.js
View file @2dd01cd
+++ b/src/main.js
View file @2dd01cd
@@ -6,7 +6,7 @@ import '@/styles/element-variables.scss'
 import '@/styles/index.scss'
 import Base from './base' // 全局组件引入
 import mixin from '@/utils/mixin/theme.js'
-import JsonExcel from 'vue-json-excel'
 import dataV from '@jiaminghi/data-view';
 import echarts from "echarts"
 import { startLoadingAddCount, endLoadingSubCount } from './utils/requestLoading'
@@ -44,7 +44,6 @@ import _ from 'lodash'
 import './permission' // permission control
 Vue.use(Element, { size: 'small', zIndex: 1000 })
 Vue.use(Base)
-Vue.component('downloadExcel', JsonExcel)
 Vue.component('icon', Icon);
 Vue.prototype.$echarts = echarts
 Vue.use(dataV)
--- a/src/utils/tools.js
View file @2dd01cd
+++ b/src/utils/tools.js
View file @2dd01cd
+import XLSX2 from "xlsx";
+import XLSX from "xlsx-style";
 /**
 * 获取数据类型
 * @param {All} [o] 需要检测的数据
@@ -131,3 +133,103 @@ export function getCurrentDate (date = 'firstDay') {
    return new Date(nowYear, nowMonth + 1, 0); // 本月结束时间
  }
 }
+export function setExport2Excel (exportName) {
+  /* generate workbook object from table */
+  var wb = XLSX2.utils.table_to_sheet(document.querySelector("#mytable"));//mytable为表格的id名
+  if (!wb['!merges']) {
+    this.$message.warning('无法导出：报表无数据');
+    return
+  }
+  for (var i = 0; i < 11; i++) {
+    wb["!cols"][i] = { wpx: 150 }
+  }
+  // 样式的文档地址
+  // https://www.npmjs.com/package/xlsx-style
+  for (const key in wb) {
+    if (key.indexOf('!') === -1 && wb[key].v) {
+      wb[key].s = {
+        font: {//字体设置
+          sz: 13,
+          bold: false,
+          color: {
+            rgb: '000000'//十六进制，不带#
+          }
+        },
+        alignment: {//文字居中
+          horizontal: 'center',
+          vertical: 'center',
+          wrapText: 1,
+          indent: 0,
+          wrap_text: true
+        },
+        border: { // 设置边框
+          top: { style: 'thin' },
+          bottom: { style: 'thin' },
+          left: { style: 'thin' },
+          right: { style: 'thin' }
+        }
+      }
+    }
+  }
+  var data = addRangeBorder(wb['!merges'], wb) //合并项添加边框
+  var filedata = sheet2blob(data)
+  openDownloadDialog(filedata, exportName + ".xlsx")
+}
+//为合并项添加边框
+function addRangeBorder (range, ws) {
+  let arr = ["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"];
+  range.forEach(item => {
+    let startColNumber = Number(item.s.r), endColNumber = Number(item.e.r);
+    let startRowNumber = Number(item.s.c), endRowNumber = Number(item.e.c);
+    const test = ws[arr[startRowNumber] + (startColNumber + 1)];
+    for (let col = startColNumber; col <= endColNumber; col++) {
+      for (let row = startRowNumber; row <= endRowNumber; row++) {
+        ws[arr[row] + (col + 1)] = test;
+      }
+    }
+  })
+  return ws;
+}
+//将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
+function sheet2blob (sheet, sheetName) {
+  sheetName = sheetName || 'sheet1';
+  var workbook = {
+    SheetNames: [sheetName],
+    Sheets: {}
+  };
+  workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
+  var wopts = {
+    bookType: 'xlsx', // 要生成的文件类型
+    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
+    type: 'binary'
+  };
+  var wbout = XLSX.write(workbook, wopts);
+  var blob = new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }); // 字符串转ArrayBuffer
+  function s2ab (s) {
+    var buf = new ArrayBuffer(s.length);
+    var view = new Uint8Array(buf);
+    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+    return buf;
+  }
+  return blob;
+}
+function openDownloadDialog (url, saveName) {
+  if (typeof url == 'object' && url instanceof Blob) {
+    url = URL.createObjectURL(url); // 创建blob地址
+  }
+  var aLink = document.createElement('a');
+  aLink.href = url;
+  aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
+  var event;
+  if (window.MouseEvent) event = new MouseEvent('click');
+  else {
+    event = document.createEvent('MouseEvents');
+    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+  }
+  aLink.dispatchEvent(event);
+}
\ No newline at end of file
--- a/src/views/statistics/dataReceiveQuality/index.vue
View file @2dd01cd
+++ b/src/views/statistics/dataReceiveQuality/index.vue
View file @2dd01cd
@@ -25,10 +25,7 @@
            <el-form-item>
              <btn nativeType="cz" @click="handleResetForm">重置</btn>
              <btn nativeType="cx" @click="handleSearch">查询</btn>
-              <download-excel class="export-excel-wrapper" :data="DetailsForm" :fields="json_fields" :header="title"
+              <btn nativeType="cx" @click="handlesetExport2Excel(2121)">导出</btn>
-                name="需要导出的表格名字.xls">
-                <btn nativeType="cx">导出</btn>
-              </download-excel>
            </el-form-item>
          </el-col>
        </el-row>
@@ -36,9 +33,9 @@
    </div>
    <!-- 列表区域 -->
    <div class="from-clues-content">
-      <lb-table ref="table" :page-size="pageData.size" :current-page.sync="pageData.current" :total="tableData.total"
+      <lb-table ref="table" :id="'mytable'" :page-size="pageData.size" :header-cell-style="headerStyle"
-        @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
+        :current-page.sync="pageData.current" :total="tableData.total" @size-change="handleSizeChange"
-        :data="tableData.data">
+        @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
      </lb-table>
    </div>
  </div>
@@ -53,7 +50,7 @@ import tableMixin from "@/mixins/tableMixin.js";
 //引入日期处理方法
 import { timeFormat } from "@/utils/operation";
 // 获取时间
-import { getCurrentDate } from "@/utils/tools";
+import { getCurrentDate, setExport2Excel } from "@/utils/tools";
 export default {
  name: "jsbwcx",
  mixins: [tableMixin],
@@ -115,41 +112,23 @@ export default {
        total: 0,
        pageSize: 10,
        current: 1
-      },
-      // 表格导出
-      title: "xx公司表格",
-      json_fields: {
-        "排查日期": 'date',
-        "整改隐患内容": 'details',
-        "整改措施": 'measure',
-        "整改时限": 'timeLimit',
-        "应急措施和预案": 'plan',
-        "整改责任人": 'personInCharge',
-        "填表人": 'preparer',
-        "整改资金": 'fund',
-        "整改完成情况": 'complete',
-        "备注": 'remark',
-      },
-      DetailsForm: [
-        {
-          date: "2022-3-10",
-          details: "卸油区过路灯损坏",
-          measure: "更换灯泡",
-          timeLimit: "2022-3-21",
-          plan: "先使用充电灯代替,贴好安全提醒告示",
-          personInCharge: "王xx",
-          preparer: "王xx",
-          fund: "20元",
-          complete: "已完成整改",
-          remark: "重新更换了灯泡",
      }
-      ]
    }
  },
  created () {
    this.handleResetForm()
  },
  methods: {
+    headerStyle ({ row, rowIndex }) {
+      if (rowIndex == 3) {
+        row[2].rowSpan = 2;
+        row[3].rowSpan = 2;
+        row[4].rowSpan = 2;
+      }
+    },
+    handlesetExport2Excel (val) {
+      setExport2Excel(val)
+    },
    //截止日期变化
    endTimeChange (val) {
      this.form.endTime = timeFormat(new Date(val), true)
--- a/src/views/statistics/nullTermRatio/index.vue
View file @2dd01cd
+++ b/src/views/statistics/nullTermRatio/index.vue
View file @2dd01cd
@@ -22,14 +22,11 @@
          </el-col>
          <!-- 按钮操作 -->
          <el-col :span="12" class="btnColRight">
-            <el-form-item class="d-flex">
+            <el-form-item>
              <btn nativeType="cz" @click="handleResetForm">重置</btn>
              <!-- 导出excel -->
              <btn nativeType="cx" @click="handleSearch">查询</btn>
-              <download-excel class="export-excel-wrapper" :data="DetailsForm" :fields="json_fields" :header="title"
+              <btn nativeType="cx" @click="handlesetExport2Excel(2121)">导出</btn>
-                name="需要导出的表格名字.xls">
-                <btn nativeType="cx">导出</btn>
-              </download-excel>
            </el-form-item>
          </el-col>
        </el-row>
@@ -37,9 +34,9 @@
    </div>
    <!-- 列表区域 -->
    <div class="from-clues-content">
-      <lb-table ref="table" :page-size="pageData.size" :current-page.sync="pageData.current" :total="tableData.total"
+      <lb-table ref="table" :page-size="pageData.size" :id="'mytable'" :current-page.sync="pageData.current"
-        @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
+        :total="tableData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
-        :data="tableData.data">
+        :column="tableData.columns" :data="tableData.data">
      </lb-table>
    </div>
  </div>
@@ -54,7 +51,7 @@ import tableMixin from "@/mixins/tableMixin.js";
 //引入日期处理方法
 import { timeFormat } from "@/utils/operation";
 // 获取时间
-import { getCurrentDate } from "@/utils/tools";
+import { getCurrentDate, setExport2Excel } from "@/utils/tools";
 export default {
  name: "jsbwcx",
  mixins: [tableMixin],
@@ -116,41 +113,16 @@ export default {
        total: 0,
        pageSize: 10,
        current: 1
-      },
-      // 表格导出
-      title: "xx公司表格",
-      json_fields: {
-        "排查日期": 'date',
-        "整改隐患内容": 'details',
-        "整改措施": 'measure',
-        "整改时限": 'timeLimit',
-        "应急措施和预案": 'plan',
-        "整改责任人": 'personInCharge',
-        "填表人": 'preparer',
-        "整改资金": 'fund',
-        "整改完成情况": 'complete',
-        "备注": 'remark',
-      },
-      DetailsForm: [
-        {
-          date: "2022-3-10",
-          details: "卸油区过路灯损坏",
-          measure: "更换灯泡",
-          timeLimit: "2022-3-21",
-          plan: "先使用充电灯代替,贴好安全提醒告示",
-          personInCharge: "王xx",
-          preparer: "王xx",
-          fund: "20元",
-          complete: "已完成整改",
-          remark: "重新更换了灯泡",
-        }
-      ]
      }
+    };
  },
  created () {
    this.handleResetForm()
  },
  methods: {
+    handlesetExport2Excel (val) {
+      setExport2Excel(val)
+    },
    //截止日期变化
    endTimeChange (val) {
      this.form.endTime = timeFormat(new Date(val), true)
--- a/src/views/statistics/registerBookQuality/index.vue
View file @2dd01cd
+++ b/src/views/statistics/registerBookQuality/index.vue
View file @2dd01cd
@@ -25,10 +25,7 @@
            <el-form-item>
              <btn nativeType="cz" @click="handleResetForm">重置</btn>
              <btn nativeType="cx" @click="handleSearch">查询</btn>
-              <download-excel class="export-excel-wrapper" :data="DetailsForm" :fields="json_fields" :header="title"
+              <btn nativeType="cx" @click="handlesetExport2Excel(2121)">导出</btn>
-                name="需要导出的表格名字.xls">
-                <btn nativeType="cx">导出</btn>
-              </download-excel>
            </el-form-item>
          </el-col>
        </el-row>
@@ -36,9 +33,9 @@
    </div>
    <!-- 列表区域 -->
    <div class="from-clues-content">
-      <lb-table ref="table" :page-size="pageData.size" :current-page.sync="pageData.current" :total="tableData.total"
+      <lb-table ref="table" :id="'mytable'" :page-size="pageData.size" :current-page.sync="pageData.current"
-        @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
+        :total="tableData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
-        :data="tableData.data">
+        :column="tableData.columns" :data="tableData.data">
      </lb-table>
    </div>
  </div>
@@ -53,7 +50,7 @@ import tableMixin from "@/mixins/tableMixin.js";
 //引入日期处理方法
 import { timeFormat } from "@/utils/operation";
 // 获取时间
-import { getCurrentDate } from "@/utils/tools";
+import { getCurrentDate, setExport2Excel } from "@/utils/tools";
 export default {
  name: "jsbwcx",
  mixins: [tableMixin],
@@ -116,40 +113,15 @@ export default {
        pageSize: 10,
        current: 1
      },
-      // 表格导出
-      title: "xx公司表格",
-      json_fields: {
-        "排查日期": 'date',
-        "整改隐患内容": 'details',
-        "整改措施": 'measure',
-        "整改时限": 'timeLimit',
-        "应急措施和预案": 'plan',
-        "整改责任人": 'personInCharge',
-        "填表人": 'preparer',
-        "整改资金": 'fund',
-        "整改完成情况": 'complete',
-        "备注": 'remark',
-      },
-      DetailsForm: [
-        {
-          date: "2022-3-10",
-          details: "卸油区过路灯损坏",
-          measure: "更换灯泡",
-          timeLimit: "2022-3-21",
-          plan: "先使用充电灯代替,贴好安全提醒告示",
-          personInCharge: "王xx",
-          preparer: "王xx",
-          fund: "20元",
-          complete: "已完成整改",
-          remark: "重新更换了灯泡",
-        }
-      ]
    }
  },
  created () {
    this.handleResetForm()
  },
  methods: {
+    handlesetExport2Excel (val) {
+      setExport2Excel(val)
+    },
    //截止日期变化
    endTimeChange (val) {
      this.form.endTime = timeFormat(new Date(val), true)