Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
042a590e by 任超
Options

feat:导出excel

1 parent bdde9e93
Inline Side-by-side
Showing 11 changed files with 567 additions and 45 deletions
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
10 10
11 <template> 11 <template>
12 <div :class="['lb-table', customClass]"> 12 <div :class="['lb-table', customClass]">
13 <el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable" 13 <el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable" :border='border'
14 :border='border' :row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection" 14 :row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection" v-bind="$attrs"
15 v-bind="$attrs" :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%" 15 :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
16 :span-method="this.merge ? this.mergeMethod : this.spanMethod"> 16 :span-method="this.merge ? this.mergeMethod : this.spanMethod">
17 <el-table-column width="45" align="center" v-if="isRadio"> 17 <el-table-column width="45" align="center" v-if="isRadio">
18 <template slot-scope="scope"> 18 <template slot-scope="scope">
......
1 /*
2 * FileName: lb-column.vue
3 * Remark: element-column
4 * Project: lb-element-table
5 * Author: 任超
6 * File Created: Tuesday, 19th March 2019 9:58:23 am
7 * Last Modified: Tuesday, 19th March 2019 10:14:42 am
8 * Modified By: 任超
9 */
10
11 <template>
12 <el-table-column v-bind="$attrs" v-on="$listeners" :prop="column.prop" :label="column.label" :type="column.type"
13 :index="column.index" :column-key="column.columnKey" :width="column.width" :min-width="column.minWidth"
14 :fixed="column.fixed" :scoped-slot="column.renderHeader" :sortable="column.sortable || false"
15 :sort-method="column.sortMethod" :sort-by="column.sortBy" :sort-orders="column.sortOrders"
16 :resizable="column.resizable || true" :formatter="column.formatter"
17 :show-overflow-tooltip="column.showOverflowTooltip || false" :align="column.align || align || 'center'"
18 :header-align="column.headerAlign || headerAlign || column.align || align || 'center'"
19 :class-name="column.className" :label-class-name="column.labelClassName" :selectable="column.selectable"
20 :reserve-selection="column.reserveSelection || false" :filters="column.filters"
21 :filter-placement="column.filterPlacement" :filter-multiple="column.filterMultiple"
22 :filter-method="column.filterMethod" :filtered-value="column.filteredValue">
23 <template slot="header" slot-scope="scope">
24 <lb-render v-if="column.renderHeader" :scope="scope" :render="column.renderHeader">
25 </lb-render>
26 <span v-else>{{ scope.column.label }}</span>
27 </template>
28
29 <template slot-scope="scope">
30 <lb-render :scope="scope" :render="column.render">
31 </lb-render>
32 </template>
33
34 <template v-if="column.children">
35 <lb-column v-for="(col, index) in column.children" :key="index" :column="col">
36 </lb-column>
37 </template>
38 </el-table-column>
39 </template>
40
41 <script>
42 import LbRender from './LbRender'
43 import forced from './forced.js'
44 export default {
45 name: 'LbColumn',
46 props: {
47 column: Object,
48 headerAlign: String,
49 align: String
50 },
51 components: {
52 LbRender
53 },
54 methods: {
55 setColumn () {
56 if (this.column.type) {
57 this.column.renderHeader = forced[this.column.type].renderHeader
58 this.column.render = this.column.render || forced[this.column.type].renderCell
59 }
60 if (this.column.formatter) {
61 this.column.render = (h, scope) => {
62 return <span>{scope.column.formatter(scope.row, scope.column, scope.row, scope.$index)}</span>
63 }
64 }
65 if (!this.column.render) {
66 this.column.render = (h, scope) => {
67 return <span>{scope.row[scope.column.property]}</span>
68 }
69 }
70 }
71 },
72 watch: {
73 column: {
74 handler () {
75 this.setColumn()
76 },
77 immediate: true
78 }
79 }
80 }
81 </script>
1 /*
2 * FileName: lb-render.vue
3 * Remark: 自定义render
4 * Project: lb-element-table
5 * Author: 任超
6 * File Created: Tuesday, 19th March 2019 10:15:30 am
7 * Last Modified: Tuesday, 19th March 2019 10:15:32 am
8 * Modified By: 任超
9 */
10 <script>
11 export default {
12 name: 'LbRender',
13 functional: true,
14 props: {
15 scope: Object,
16 render: Function
17 },
18 render: (h, ctx) => {
19 return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : ''
20 }
21 }
22 </script>
1 export default {
2 selection: {
3 renderHeader: (h, { store }) => {
4 return (
5 <el-checkbox
6 disabled={store.states.data && store.states.data.length === 0}
7 indeterminate={
8 store.states.selection.length > 0 && !store.states.isAllSelected
9 }
10 nativeOn-click={store.toggleAllSelection}
11 value={store.states.isAllSelected}
12 />
13 )
14 },
15 renderCell: (h, { row, column, store, $index }) => {
16 return (
17 <el-checkbox
18 nativeOn-click={event => event.stopPropagation()}
19 value={store.isSelected(row)}
20 disabled={
21 column.selectable
22 ? !column.selectable.call(null, row, $index)
23 : false
24 }
25 on-input={() => {
26 store.commit('rowSelectedChanged', row)
27 }}
28 />
29 )
30 },
31 sortable: false,
32 resizable: false
33 },
34 index: {
35 renderHeader: (h, scope) => {
36 return <span>{scope.column.label || '#'}</span>
37 },
38 renderCell: (h, { $index, column }) => {
39 let i = $index + 1
40 const index = column.index
41
42 if (typeof index === 'number') {
43 i = $index + index
44 } else if (typeof index === 'function') {
45 i = index($index)
46 }
47
48 return <div>{i}</div>
49 },
50 sortable: false
51 },
52 expand: {
53 renderHeader: (h, scope) => {
54 return <span>{scope.column.label || ''}</span>
55 },
56 renderCell: (h, { row, store }, proxy) => {
57 const expanded = store.states.expandRows.indexOf(row) > -1
58 return (
59 <div
60 class={
61 'el-table__expand-icon ' +
62 (expanded ? 'el-table__expand-icon--expanded' : '')
63 }
64 on-click={e => proxy.handleExpandClick(row, e)}
65 >
66 <i class='el-icon el-icon-arrow-right' />
67 </div>
68 )
69 },
70 sortable: false,
71 resizable: false,
72 className: 'el-table__expand-column'
73 }
74 }
1 /*
2 * FileName: lb-table.vue
3 * Remark: element table
4 * Project: lb-element-table
5 * Author: 任超
6 * File Created: Tuesday, 19th March 2019 9:55:27 am
7 * Last Modified: Tuesday, 19th March 2019 9:55:34 am
8 * Modified By: 任超
9 */
10
11 <template>
12 <div :class="['lb-table', customClass]">
13 <el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable" :border='border'
14 :row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection" v-bind="$attrs"
15 :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
16 :span-method="this.merge ? this.mergeMethod : this.spanMethod">
17 <el-table-column width="45" align="center" v-if="isRadio">
18 <template slot-scope="scope">
19 <el-radio v-model="selected" :label="scope.$index"></el-radio>
20 </template>
21 </el-table-column>
22
23 <el-table-column :label="downTitle" align="center">
24 <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
25 </lb-column>
26 </el-table-column>
27 </el-table>
28 <br>
29 <el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
30 layout="total, prev, pager, next" @current-change="paginationCurrentChange"
31 :style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
32 </el-pagination>
33 </div>
34 </template>
35
36 <script>
37 import LbColumn from './LbColumn'
38 export default {
39 props: {
40 column: Array,
41 data: Array,
42 spanMethod: Function,
43 pagination: {
44 type: Boolean,
45 default: true,
46 },
47 downExcel: {
48 type: Boolean,
49 default: false,
50 },
51 downTitle: {
52 type: String,
53 default: '标题'
54 },
55 isRadio: {
56 type: Boolean,
57 default: false,
58 },
59 border: {
60 type: Boolean,
61 default: false,
62 },
63 showHeader: {
64 type: Boolean,
65 default: true,
66 },
67 paginationTop: {
68 type: String,
69 default: '0',
70 },
71 heightNum: {
72 type: Number,
73 default: 355,
74 },
75 maxHeight: {
76 type: Number,
77 default: 500
78 },
79 heightNumSetting: {
80 type: Boolean,
81 default: false,
82 },
83 customClass: {
84 type: String,
85 default: '',
86 },
87 paginationAlign: {
88 type: String,
89 default: 'left',
90 },
91 merge: Array,
92 },
93 components: {
94 LbColumn,
95 },
96 data () {
97 return {
98 tableHeight: 'auto',
99 mergeLine: {},
100 mergeIndex: {},
101 selected: ''
102 }
103 },
104 created () {
105 this.getMergeArr(this.data, this.merge)
106 this.getHeight()
107 },
108 computed: {
109 dataLength () {
110 return [] || this.data.length
111 },
112 },
113 methods: {
114 // 单选
115 singleElection (row) {
116 this.selected = this.data.indexOf(row);
117 },
118
119 tableRowClassName ({ row, rowIndex }) {
120 if (rowIndex % 2 === 1) {
121 return 'interlaced';
122 }
123 },
124 getHeight () {
125 if (!this.heightNumSetting) {
126 let _this = this
127 if (this.heightNum) {
128 _this.$nextTick(() => {
129
130 window.addEventListener('resize', () => {
131 _this.tableHeight = _this.calcHeightx(230)
132 });
133 _this.tableHeight = _this.calcHeightx(230)
134 })
135 } else {
136 _this.tableHeight = window.innerHeight - _this.heightNum
137 }
138 }
139 },
140 calcHeightx (value, wappered = true) {
141 //项目自定义的公共header部分的高度，可忽略
142 let header = document.querySelector(".from-clues-header").offsetHeight;
143 //value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分）
144 value = value == undefined ? 100 : value;
145 let res = window.innerHeight - parseInt(header) - value;
146 if (wappered) {
147 //通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素
148 let wapper = window.document.getElementsByClassName('el-table__body-wrapper');
149 //通过原生方法，获取dom节点的高度------获取element-ui table表格header的元素
150 let header = window.document.getElementsByClassName('el-table__header-wrapper');
151 //必须加延时，要不然赋不上去值
152 setTimeout(() => {
153 //通过上边计算得到的table高度的value值，减去table表格的header高度，剩下的通过dom节点直接强行赋给table表格的body
154 wapper[0].style.height = (value - header[0].clientHeight)
155 }, 100)
156 }
157 return res;
158 },
159 clearSelection () {
160 this.$refs.elTable.clearSelection()
161 },
162 toggleRowSelection (row, selected) {
163 this.$refs.elTable.toggleRowSelection(row, selected)
164 },
165 toggleAllSelection () {
166 this.$refs.elTable.toggleAllSelection()
167 },
168 toggleRowExpansion (row, expanded) {
169 this.$refs.elTable.toggleRowExpansion(row, expanded)
170 },
171 setCurrentRow (row) {
172 this.$refs.elTable.setCurrentRow(row)
173 },
174 clearSort () {
175 this.$refs.elTable.clearSort()
176 },
177 clearFilter (columnKey) {
178 this.$refs.elTable.clearFilter(columnKey)
179 },
180 doLayout () {
181 this.$refs.elTable.doLayout()
182 },
183 sort (prop, order) {
184 this.$refs.elTable.sort(prop, order)
185 },
186 paginationCurrentChange (val) {
187 this.$emit('p-current-change', val)
188 },
189 getMergeArr (tableData, merge) {
190 if (!merge) return
191 this.mergeLine = {}
192 this.mergeIndex = {}
193 merge.forEach((item, k) => {
194 tableData.forEach((data, i) => {
195 if (i === 0) {
196 this.mergeIndex[item] = this.mergeIndex[item] || []
197 this.mergeIndex[item].push(1)
198 this.mergeLine[item] = 0
199 } else {
200 if (data[item] === tableData[i - 1][item]) {
201 this.mergeIndex[item][this.mergeLine[item]] += 1
202 this.mergeIndex[item].push(0)
203 } else {
204 this.mergeIndex[item].push(1)
205 this.mergeLine[item] = i
206 }
207 }
208 })
209 })
210 },
211 mergeMethod ({ row, column, rowIndex, columnIndex }) {
212 const index = this.merge.indexOf(column.property)
213 if (index > -1) {
214 const _row = this.mergeIndex[this.merge[index]][rowIndex]
215 const _col = _row > 0 ? 1 : 0
216 return {
217 rowspan: _row,
218 colspan: _col,
219 }
220 }
221 },
222 },
223 watch: {
224 merge () {
225 this.getMergeArr(this.data, this.merge)
226 },
227 dataLength () {
228 this.getMergeArr(this.data, this.merge)
229 }
230 },
231 }
232 </script>
233 <style rel="stylesheet/scss" scoped lang="scss">
234 .lb-table {
235 margin-top: 1px;
236
237 .interlaced {
238 background: #fafcff;
239 border: 1px solid #ebf2fa;
240 }
241 }
242
243 /deep/.el-table .cell {
244 padding-left: 3px;
245 padding-right: 3px;
246 }
247
248 /deep/.el-radio__label {
249 display: none;
250 }
251 </style>
1 ## 这是对于element-table 进行的二次封装
2
3 ### 文档地址
4
5 <!-- table 已经全局注册不需要每个页面单独注册 -->
6
7 [Windows/Mac/Linux 全平台客户端](https://github.liubing.me/lb-element-table/zh/guide/)
...@@ -122,15 +122,28 @@ export function timestampToTime (timestamp) { ...@@ -122,15 +122,28 @@ export function timestampToTime (timestamp) {
122 var D = date.getDate() > 10 ? date.getDate() : '0' + date.getDate() 122 var D = date.getDate() > 10 ? date.getDate() : '0' + date.getDate()
123 return Y + M + D 123 return Y + M + D
124 } 124 }
125
126
127 function formatDate (value) {
128 var date = new Date(value);
129 var y = date.getFullYear(),
130 m = date.getMonth() + 1,
131 d = date.getDate()
132 if (m < 10) { m = '0' + m; }
133 if (d < 10) { d = '0' + d; }
134 var t = y + '-' + m + '-' + d
135 return t;
136 }
137
125 export function getCurrentDate (date = 'firstDay') { 138 export function getCurrentDate (date = 'firstDay') {
126 var now = new Date() // 当前日期 139 var now = new Date() // 当前日期
127 var nowYear = now.getFullYear() //当前年 140 var nowYear = now.getFullYear() //当前年
128 var nowMonth = now.getMonth() //当前月 （值为0~11） 141 var nowMonth = now.getMonth() //当前月 （值为0~11）
129 var d = now.getDate() //当天 142 var d = now.getDate() //当天
130 if (date == 'firstDay') { 143 if (date == 'firstDay') {
131 return new Date(nowYear, nowMonth, 1) // 本月开始时间 144 return formatDate(new Date(nowYear, nowMonth, 1)) // 本月开始时间
132 } else { 145 } else {
133 return new Date(nowYear, nowMonth + 1, 0); // 本月结束时间 146 return formatDate(new Date(nowYear, nowMonth + 1, 0)) // 本月结束时间
134 } 147 }
135 } 148 }
136 149
...@@ -147,7 +160,21 @@ export function setExport2Excel (exportName) { ...@@ -147,7 +160,21 @@ export function setExport2Excel (exportName) {
147 // 样式的文档地址 160 // 样式的文档地址
148 // https://www.npmjs.com/package/xlsx-style 161 // https://www.npmjs.com/package/xlsx-style
149 for (const key in wb) { 162 for (const key in wb) {
150 if (key.indexOf('!') === -1 && wb[key].v) { 163 if (key == 'A1') {
164 wb[key].s = {
165 font: {//字体设置
166 sz: 24,
167 bold: true,
168 },
169 alignment: {//文字居中
170 horizontal: 'center',
171 vertical: 'center',
172 wrapText: 1,
173 indent: 0,
174 wrap_text: true
175 }
176 }
177 } else if (key.indexOf('!') === -1 && wb[key].v) {
151 wb[key].s = { 178 wb[key].s = {
152 font: {//字体设置 179 font: {//字体设置
153 sz: 13, 180 sz: 13,
......
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
10 .el-table--border::after { 10 .el-table--border::after {
11 width: 0 !important; 11 width: 0 !important;
12 } 12 }
13 .export-excel-wrapper{ 13
14 .export-excel-wrapper {
14 display: inline-block; 15 display: inline-block;
15 } 16 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 <el-col :span="6"> 17 <el-col :span="6">
18 <el-form-item label="至" prop="endTime" label-width="35px"> 18 <el-form-item label="至" prop="endTime" label-width="35px">
19 <el-date-picker type="date" class="width100" placeholder="结束日期" :picker-options="pickerOptionsEnd" clearable 19 <el-date-picker type="date" class="width100" placeholder="结束日期" :picker-options="pickerOptionsEnd" clearable
20 v-model="form.endTime" value-format="yyyy-MM-dd" @change="endTimeChange"></el-date-picker> 20 v-model="form.endTime" value-format="yyyy-MM-dd"></el-date-picker>
21 </el-form-item> 21 </el-form-item>
22 </el-col> 22 </el-col>
23 <!-- 按钮操作 --> 23 <!-- 按钮操作 -->
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
25 <el-form-item> 25 <el-form-item>
26 <btn nativeType="cz" @click="handleResetForm">重置</btn> 26 <btn nativeType="cz" @click="handleResetForm">重置</btn>
27 <btn nativeType="cx" @click="handleSearch">查询</btn> 27 <btn nativeType="cx" @click="handleSearch">查询</btn>
28 <btn nativeType="cx" @click="handlesetExport2Excel(2121)">导出1</btn> 28 <btn nativeType="cx" @click="handlesetExport2Excel(downTitle)">导出</btn>
29 </el-form-item> 29 </el-form-item>
30 </el-col> 30 </el-col>
31 </el-row> 31 </el-row>
...@@ -33,9 +33,13 @@ ...@@ -33,9 +33,13 @@
33 </div> 33 </div>
34 <!-- 列表区域 --> 34 <!-- 列表区域 -->
35 <div class="from-clues-content"> 35 <div class="from-clues-content">
36 <lb-table ref="table" :id="'mytable'" :header-cell-style="headerStyle" :pagination="false" 36 <lb-table ref="table" :header-cell-style="headerStyle1" :pagination="false" :column="tableData.columns"
37 :column="tableData.columns" :data="tableData.data"> 37 :data="tableData.data">
38 </lb-table> 38 </lb-table>
39
40 <down-lb-table ref="table" v-show="false" :id="'mytable'" :downExcel="true" :header-cell-style="headerStyle"
41 :pagination="false" :column="tableData.columns" :data="tableData.data" :downTitle="downTitle">
42 </down-lb-table>
39 </div> 43 </div>
40 </div> 44 </div>
41 </template> 45 </template>
...@@ -46,12 +50,15 @@ ...@@ -46,12 +50,15 @@
46 import data from "./data"; 50 import data from "./data";
47 // 引入table混入方法 51 // 引入table混入方法
48 import tableMixin from "@/mixins/tableMixin.js"; 52 import tableMixin from "@/mixins/tableMixin.js";
49 //引入日期处理方法 53 // 导出excel表格
50 import { timeFormat } from "@/utils/operation"; 54 import downLbTable from '@/components/downLbTable'
51 // 获取时间 55 // 获取时间
52 import { getCurrentDate, setExport2Excel } from "@/utils/tools"; 56 import { getCurrentDate, setExport2Excel } from "@/utils/tools";
53 export default { 57 export default {
54 name: "jsbwcx", 58 name: "jsbwcx",
59 components: {
60 downLbTable
61 },
55 mixins: [tableMixin], 62 mixins: [tableMixin],
56 data () { 63 data () {
57 return { 64 return {
...@@ -80,8 +87,7 @@ export default { ...@@ -80,8 +87,7 @@ export default {
80 // 表格数据 87 // 表格数据
81 form: { 88 form: {
82 startTime: "", // 开始日期 89 startTime: "", // 开始日期
83 endTime: "", // 结束日期 90 endTime: "" // 结束日期
84 currentPage: 1
85 }, 91 },
86 // 校验规则 92 // 校验规则
87 rules: { 93 rules: {
...@@ -105,15 +111,38 @@ export default { ...@@ -105,15 +111,38 @@ export default {
105 ] 111 ]
106 .concat(data.columns()), 112 .concat(data.columns()),
107 data: [] 113 data: []
108 } 114 },
115 // 导出表格标题
116 downTitle: ''
117 }
118 },
119 watch: {
120 form: {
121 handler (newVal, oldVal) {
122 this.generateFileName()
123 },
124 deep: true
109 } 125 }
110 }, 126 },
111 created () { 127 created () {
112 this.handleResetForm() 128 this.handleResetForm()
129 this.generateFileName()
113 }, 130 },
114 methods: { 131 methods: {
115 handleSearch () { }, 132 handleSearch () { },
133 // 生成文件名
134 generateFileName () {
135 var reg = /(\d{4})\-(\d{2})\-(\d{2})/;
136 this.downTitle = `汉中市不动产登记增量数据接入质量评价表(${this.form.startTime.replace(reg, "$1年$2月$3日")}至${this.form.endTime.replace(reg, "$1年$2月$3日")})`
137 },
116 headerStyle ({ row, rowIndex }) { 138 headerStyle ({ row, rowIndex }) {
139 if (rowIndex == 4) {
140 row[2].rowSpan = 2;
141 row[3].rowSpan = 2;
142 row[4].rowSpan = 2;
143 }
144 },
145 headerStyle1 ({ row, rowIndex }) {
117 if (rowIndex == 3) { 146 if (rowIndex == 3) {
118 row[2].rowSpan = 2; 147 row[2].rowSpan = 2;
119 row[3].rowSpan = 2; 148 row[3].rowSpan = 2;
...@@ -123,10 +152,6 @@ export default { ...@@ -123,10 +152,6 @@ export default {
123 handlesetExport2Excel (val) { 152 handlesetExport2Excel (val) {
124 setExport2Excel(val) 153 setExport2Excel(val)
125 }, 154 },
126 //截止日期变化
127 endTimeChange (val) {
128 this.form.endTime = timeFormat(new Date(val), true)
129 },
130 // 初始化数据 155 // 初始化数据
131 featchData () { }, 156 featchData () { },
132 // 重置 157 // 重置
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 <el-col :span="6"> 17 <el-col :span="6">
18 <el-form-item label="至" prop="endTime" label-width="35px"> 18 <el-form-item label="至" prop="endTime" label-width="35px">
19 <el-date-picker type="date" class="width100" placeholder="结束日期" :picker-options="pickerOptionsEnd" clearable 19 <el-date-picker type="date" class="width100" placeholder="结束日期" :picker-options="pickerOptionsEnd" clearable
20 v-model="form.endTime" value-format="yyyy-MM-dd" @change="endTimeChange"></el-date-picker> 20 v-model="form.endTime" value-format="yyyy-MM-dd"></el-date-picker>
21 </el-form-item> 21 </el-form-item>
22 </el-col> 22 </el-col>
23 <!-- 按钮操作 --> 23 <!-- 按钮操作 -->
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
26 <btn nativeType="cz" @click="handleResetForm">重置</btn> 26 <btn nativeType="cz" @click="handleResetForm">重置</btn>
27 <!-- 导出excel --> 27 <!-- 导出excel -->
28 <btn nativeType="cx" @click="handleSearch">查询</btn> 28 <btn nativeType="cx" @click="handleSearch">查询</btn>
29 <btn nativeType="cx" @click="handlesetExport2Excel(2121)">导出</btn> 29 <btn nativeType="cx" @click="handlesetExport2Excel(downTitle)">导出</btn>
30 </el-form-item> 30 </el-form-item>
31 </el-col> 31 </el-col>
32 </el-row> 32 </el-row>
...@@ -34,8 +34,12 @@ ...@@ -34,8 +34,12 @@
34 </div> 34 </div>
35 <!-- 列表区域 --> 35 <!-- 列表区域 -->
36 <div class="from-clues-content"> 36 <div class="from-clues-content">
37 <lb-table ref="table" :id="'mytable'" :pagination="false" :column="tableData.columns" :data="tableData.data"> 37 <lb-table ref="table" :pagination="false" :column="tableData.columns" :data="tableData.data">
38 </lb-table> 38 </lb-table>
39
40 <down-lb-table ref="table" v-show="false" :id="'mytable'" :downExcel="true" :pagination="false"
41 :column="tableData.columns" :data="tableData.data" :downTitle="downTitle">
42 </down-lb-table>
39 </div> 43 </div>
40 </div> 44 </div>
41 </template> 45 </template>
...@@ -46,12 +50,15 @@ ...@@ -46,12 +50,15 @@
46 import data from "./data"; 50 import data from "./data";
47 // 引入table混入方法 51 // 引入table混入方法
48 import tableMixin from "@/mixins/tableMixin.js"; 52 import tableMixin from "@/mixins/tableMixin.js";
49 //引入日期处理方法 53 // 导出excel表格
50 import { timeFormat } from "@/utils/operation"; 54 import downLbTable from '@/components/downLbTable'
51 // 获取时间 55 // 获取时间
52 import { getCurrentDate, setExport2Excel } from "@/utils/tools"; 56 import { getCurrentDate, setExport2Excel } from "@/utils/tools";
53 export default { 57 export default {
54 name: "jsbwcx", 58 name: "jsbwcx",
59 components: {
60 downLbTable
61 },
55 mixins: [tableMixin], 62 mixins: [tableMixin],
56 data () { 63 data () {
57 return { 64 return {
...@@ -80,8 +87,7 @@ export default { ...@@ -80,8 +87,7 @@ export default {
80 // 表格数据 87 // 表格数据
81 form: { 88 form: {
82 startTime: "", // 开始日期 89 startTime: "", // 开始日期
83 endTime: "", // 结束日期 90 endTime: "" // 结束日期
84 currentPage: 1
85 }, 91 },
86 // 校验规则 92 // 校验规则
87 rules: { 93 rules: {
...@@ -105,21 +111,32 @@ export default { ...@@ -105,21 +111,32 @@ export default {
105 ] 111 ]
106 .concat(data.columns()), 112 .concat(data.columns()),
107 data: [], 113 data: [],
108 } 114 },
109 }; 115 downTitle: ''
116 }
117 },
118 watch: {
119 form: {
120 handler (newVal, oldVal) {
121 this.generateFileName()
122 },
123 deep: true
124 }
110 }, 125 },
111 created () { 126 created () {
112 this.handleResetForm() 127 this.handleResetForm()
128 this.generateFileName()
113 }, 129 },
114 methods: { 130 methods: {
115 handleSearch () { }, 131 handleSearch () { },
132 // 生成文件名
133 generateFileName () {
134 var reg = /(\d{4})\-(\d{2})\-(\d{2})/;
135 this.downTitle = `汉中市不动产登记增量数据相关字段空项率统计(${this.form.startTime.replace(reg, "$1年$2月$3日")}至${this.form.endTime.replace(reg, "$1年$2月$3日")})`
136 },
116 handlesetExport2Excel (val) { 137 handlesetExport2Excel (val) {
117 setExport2Excel(val) 138 setExport2Excel(val)
118 }, 139 },
119 //截止日期变化
120 endTimeChange (val) {
121 this.form.endTime = timeFormat(new Date(val), true)
122 },
123 // 初始化数据 140 // 初始化数据
124 featchData () { }, 141 featchData () { },
125 // 重置 142 // 重置
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 <el-col :span="6"> 17 <el-col :span="6">
18 <el-form-item label="至" prop="endTime" label-width="35px"> 18 <el-form-item label="至" prop="endTime" label-width="35px">
19 <el-date-picker type="date" class="width100" placeholder="结束日期" :picker-options="pickerOptionsEnd" clearable 19 <el-date-picker type="date" class="width100" placeholder="结束日期" :picker-options="pickerOptionsEnd" clearable
20 v-model="form.endTime" value-format="yyyy-MM-dd" @change="endTimeChange"></el-date-picker> 20 v-model="form.endTime" value-format="yyyy-MM-dd"></el-date-picker>
21 </el-form-item> 21 </el-form-item>
22 </el-col> 22 </el-col>
23 <!-- 按钮操作 --> 23 <!-- 按钮操作 -->
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
25 <el-form-item> 25 <el-form-item>
26 <btn nativeType="cz" @click="handleResetForm">重置</btn> 26 <btn nativeType="cz" @click="handleResetForm">重置</btn>
27 <btn nativeType="cx" @click="handleSearch">查询</btn> 27 <btn nativeType="cx" @click="handleSearch">查询</btn>
28 <btn nativeType="cx" @click="handlesetExport2Excel(2121)">导出</btn> 28 <btn nativeType="cx" @click="handlesetExport2Excel(downTitle)">导出</btn>
29 </el-form-item> 29 </el-form-item>
30 </el-col> 30 </el-col>
31 </el-row> 31 </el-row>
...@@ -33,24 +33,30 @@ ...@@ -33,24 +33,30 @@
33 </div> 33 </div>
34 <!-- 列表区域 --> 34 <!-- 列表区域 -->
35 <div class="from-clues-content"> 35 <div class="from-clues-content">
36 <lb-table ref="table" :id="'mytable'" :pagination="false" :column="tableData.columns" :data="tableData.data"> 36 <lb-table ref="table" :pagination="false" :column="tableData.columns" :data="tableData.data">
37 </lb-table> 37 </lb-table>
38 <down-lb-table ref="table" v-show="false" :id="'mytable'" :downExcel="true" :pagination="false"
39 :column="tableData.columns" :data="tableData.data" :downTitle="downTitle">
40 </down-lb-table>
38 </div> 41 </div>
39 </div> 42 </div>
40 </template> 43 </template>
41 44
42 <script> 45 <script>
43 // 接入质量评价表 46 // 登簿质量评价表
44 // 引入表格头部数据 47 // 引入表格头部数据
45 import data from "./data"; 48 import data from "./data";
46 // 引入table混入方法 49 // 引入table混入方法
47 import tableMixin from "@/mixins/tableMixin.js"; 50 import tableMixin from "@/mixins/tableMixin.js";
48 //引入日期处理方法 51 // 导出excel表格
49 import { timeFormat } from "@/utils/operation"; 52 import downLbTable from '@/components/downLbTable'
50 // 获取时间 53 // 获取时间
51 import { getCurrentDate, setExport2Excel } from "@/utils/tools"; 54 import { getCurrentDate, setExport2Excel } from "@/utils/tools";
52 export default { 55 export default {
53 name: "jsbwcx", 56 name: "jsbwcx",
57 components: {
58 downLbTable
59 },
54 mixins: [tableMixin], 60 mixins: [tableMixin],
55 data () { 61 data () {
56 return { 62 return {
...@@ -103,22 +109,33 @@ export default { ...@@ -103,22 +109,33 @@ export default {
103 } 109 }
104 ] 110 ]
105 .concat(data.columns()), 111 .concat(data.columns()),
106 data: [], 112 data: []
107 } 113 },
114 downTitle: ''
115 }
116 },
117 watch: {
118 form: {
119 handler (newVal, oldVal) {
120 this.generateFileName()
121 },
122 deep: true
108 } 123 }
109 }, 124 },
110 created () { 125 created () {
111 this.handleResetForm() 126 this.handleResetForm()
127 this.generateFileName()
112 }, 128 },
113 methods: { 129 methods: {
114 handleSearch () { }, 130 handleSearch () { },
131 // 生成文件名
132 generateFileName () {
133 var reg = /(\d{4})\-(\d{2})\-(\d{2})/;
134 this.downTitle = `汉中市不动产登记增量数据登簿质量评价表(${this.form.startTime.replace(reg, "$1年$2月$3日")}至${this.form.endTime.replace(reg, "$1年$2月$3日")})`
135 },
115 handlesetExport2Excel (val) { 136 handlesetExport2Excel (val) {
116 setExport2Excel(val) 137 setExport2Excel(val)
117 }, 138 },
118 //截止日期变化
119 endTimeChange (val) {
120 this.form.endTime = timeFormat(new Date(val), true)
121 },
122 // 初始化数据 139 // 初始化数据
123 featchData () { }, 140 featchData () { },
124 // 重置 141 // 重置
......