Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
3cb67aa2 by 任超
Options

style:新增excel导出

1 parent 9282d674
Expand all
Inline Side-by-side
Showing 7 changed files with 111 additions and 9 deletions
......@@ -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"
......
......@@ -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)
......
......@@ -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
......
......@@ -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()
......
......@@ -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()
......
......@@ -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()
......