style:新增excel导出

任超
Showing 7 changed files with 111 additions and 9 deletions
package.json
src/main.js
src/views/statistics/css/index.scss
src/views/statistics/dataReceiveQuality/index.vue
src/views/statistics/nullTermRatio/data/index.js
src/views/statistics/nullTermRatio/index.vue
src/views/statistics/registerBookQuality/index.vue
--- a/package.json
View file @3cb67aa
+++ b/package.json
View file @3cb67aa
@@ -11,10 +11,10 @@
    "@jiaminghi/data-view": "^2.10.0",
    "axios": "^0.21.1",
    "clipboard": "^2.0.11",
-    "jsoneditor": "^9.9.2",
    "core-js": "^3.6.5",
    "echarts": "^4.6.0",
    "js-cookie": "2.2.0",
+    "jsoneditor": "^9.9.2",
    "lodash": "^4.17.21",
    "node-sass": "^4.14.1",
    "normalize.css": "7.0.0",
@@ -22,6 +22,7 @@
    "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"
--- a/src/main.js
View file @3cb67aa
+++ b/src/main.js
View file @3cb67aa
@@ -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,6 +44,7 @@ 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/views/statistics/css/index.scss
View file @3cb67aa
+++ b/src/views/statistics/css/index.scss
View file @3cb67aa
@@ -9,4 +9,7 @@
 /deep/.el-table--group::after,
 .el-table--border::after {
  width: 0 !important;
+}
+.export-excel-wrapper{
+  display: inline-block;
 }
\ No newline at end of file
--- a/src/views/statistics/dataReceiveQuality/index.vue
View file @3cb67aa
+++ b/src/views/statistics/dataReceiveQuality/index.vue
View file @3cb67aa
@@ -25,6 +25,10 @@
            <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"
+                name="需要导出的表格名字.xls">
+                <btn nativeType="cx">导出</btn>
+              </download-excel>
            </el-form-item>
          </el-col>
        </el-row>
@@ -111,8 +115,36 @@ 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()
--- a/src/views/statistics/nullTermRatio/data/index.js
View file @3cb67aa
+++ b/src/views/statistics/nullTermRatio/data/index.js
View file @3cb67aa
--- a/src/views/statistics/nullTermRatio/index.vue
View file @3cb67aa
+++ b/src/views/statistics/nullTermRatio/index.vue
View file @3cb67aa
@@ -22,9 +22,14 @@
          </el-col>
          <!-- 按钮操作 -->
          <el-col :span="12" class="btnColRight">
-            <el-form-item>
+            <el-form-item class="d-flex">
              <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"
+                name="需要导出的表格名字.xls">
+                <btn nativeType="cx">导出</btn>
+              </download-excel>
            </el-form-item>
          </el-col>
        </el-row>
@@ -111,8 +116,36 @@ 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()
--- a/src/views/statistics/registerBookQuality/index.vue
View file @3cb67aa
+++ b/src/views/statistics/registerBookQuality/index.vue
View file @3cb67aa
@@ -25,6 +25,10 @@
            <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"
+                name="需要导出的表格名字.xls">
+                <btn nativeType="cx">导出</btn>
+              </download-excel>
            </el-form-item>
          </el-col>
        </el-row>
@@ -111,8 +115,36 @@ 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()