Skip to content

bdc / bdcjg-web

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

style:新增excel导出

1 parent 9282d674
Inline Side-by-side
Showing 7 changed files with 206 additions and 67 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()
......
......@@ -7,100 +7,108 @@ class data extends filter {
return [
{
label: "行政区划",
type: "xzqh",
prop: "xzqh",
width: '80'
},
{
label: '国有建设用地使用权',
prop: "",
children: [
{
label: '用途',
prop: "",
children: [
{
label: '空项率',
type: "xx",
prop: "xx",
},
{
label: '分值',
type: "xx",
prop: "xx",
}
]
},
{
label: '权利性质',
prop: "",
children: [
{
label: '空项率',
type: "xx",
prop: "xx",
},
{
label: '分值',
type: "xx",
prop: "xx",
}
]
},
{
label: '权利设定方式',
prop: "",
children: [
{
label: '空项率',
type: "xx",
prop: "xx",
},
{
label: '分值',
type: "xx",
prop: "xx",
}
]
},
{
label: '权利设定方式',
prop: "",
children: [
{
label: '空项率',
type: "xx",
prop: "xx",
},
{
label: '分值',
type: "xx",
prop: "xx",
}
]
},
{
label: ' 共有情况（建设用地）',
prop: "",
children: [
{
label: '空项率',
type: "xx",
prop: "xx",
},
{
label: '分值',
type: "xx",
prop: "xx",
}
]
},
{
label: ' 等别',
label: '等别',
prop: "",
children: [
{
label: '空项率',
type: "xx",
prop: "xx",
},
{
label: '分值',
type: "xx",
prop: "xx",
}
]
},
{
label: ' 容积率',
prop: "",
children: [
{
label: '空项率',
type: "xx",
prop: "xx",
},
{
label: '分值',
type: "xx",
prop: "xx",
}
]
},
......@@ -108,56 +116,61 @@ class data extends filter {
},
{
label: '房屋所有权',
prop: "",
children: [
{
label: '房屋共有情况',
prop: "",
children: [
{
label: '空项率',
type: "xx",
prop: "xx",
},
{
label: '分值',
type: "xx",
prop: "xx",
}
]
},
{
label: '房屋性质',
prop: "",
children: [
{
label: '空项率',
type: "xx",
prop: "xx",
},
{
label: '分值',
type: "xx",
prop: "xx",
}
]
},
{
label: '房屋结构',
prop: "",
children: [
{
label: '空项率',
type: "xx",
prop: "xx",
},
{
label: '分值',
type: "xx",
prop: "xx",
}
]
},
{
label: '竣工时间',
prop: "",
children: [
{
label: '空项率',
type: "xx",
prop: "xx",
},
{
label: '分值',
type: "xx",
prop: "xx",
}
]
}
......@@ -165,16 +178,18 @@ class data extends filter {
},
{
label: '抵押权',
prop: "",
children: [
{
label: '债务履行期限（债权确定时间）',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
......@@ -183,16 +198,18 @@ class data extends filter {
},
{
label: '最高额抵押',
prop: "",
children: [
{
label: '最高债权确定事实和数额',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
......@@ -201,29 +218,32 @@ class data extends filter {
},
{
label: '在建建筑物坐落(一般）',
prop: "",
children: [
{
label: '在建建筑物坐落',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
},
{
label: '在建建筑物抵押范围',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
......@@ -232,29 +252,32 @@ class data extends filter {
},
{
label: '在建建筑物坐落（最高额）',
prop: "",
children: [
{
label: '在建建筑物坐落',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
},
{
label: '在建建筑物抵押范围',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
......@@ -263,29 +286,32 @@ class data extends filter {
},
{
label: '抵押注销',
prop: "",
children: [
{
label: '注销抵押原因',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
},
{
label: '注销时间',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
......@@ -294,55 +320,60 @@ class data extends filter {
},
{
label: '预告登记',
prop: "",
children: [
{
label: '义务人证件种类',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
},
{
label: '义务人证件号',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
},
{
label: '规划用途',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
},
{
label: '房屋性质',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
......@@ -351,68 +382,74 @@ class data extends filter {
},
{
label: '查封登记',
prop: "",
children: [
{
label: '解封机关',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
},
{
label: '解封文件',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
},
{
label: '解封登记时间',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
},
{
label: '解封登簿人',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
},
{
label: '解封业务号',
prop: "",
children: [
{
type: 'xxx',
prop: 'xxx',
label: '空项率',
},
{
type: 'xxx',
prop: 'xxx',
label: '分值',
}
]
......
......@@ -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()
......