From 7a17662bdadf36c4e30bd53b896571612d48abbb Mon Sep 17 00:00:00 2001
From: zhizhijie <zhizhijie@users.noreply.gitee.com>
Date: 星期三, 09 九月 2026 11:17:38 +0800
Subject: [PATCH] fix: 4项整改——审核结果按模板双Sheet导出(仅核实型+状态筛选)/明细表格化、数据查看分组选择与隐藏三列、报表页隐藏货运旅客城市客运小表、整本预览展示货运城市客运中口径当月累计同比 + 测试报告与工作日结
---
traffic-audit-web/src/views/DataView.vue | 182 +++++++++++++++++++++++++++++++++++++++++----
1 files changed, 164 insertions(+), 18 deletions(-)
diff --git a/traffic-audit-web/src/views/DataView.vue b/traffic-audit-web/src/views/DataView.vue
index 8ef5b0d..7ab9413 100644
--- a/traffic-audit-web/src/views/DataView.vue
+++ b/traffic-audit-web/src/views/DataView.vue
@@ -16,21 +16,18 @@
</el-aside>
<el-main>
<h3>瀵煎叆鏁版嵁鏌ョ湅</h3>
- <el-form :inline="true">
- <el-form-item label="鏁版嵁绫诲瀷">
- <el-radio-group v-model="type" @change="loadData">
- <el-radio-button label="h2032">H203-2鏈堟姤</el-radio-button>
- <el-radio-button label="transportAuth">杩愭斂杞﹁締</el-radio-button>
- <el-radio-button label="trackMileage">杞ㄨ抗閲岀▼</el-radio-button>
- <el-radio-button label="scaleSplit">瑙勪笂瑙勪笅鎷嗗垎</el-radio-button>
- <el-radio-button label="freightTurnover">璐ц繍閲忓懆杞噺</el-radio-button>
- <el-radio-button label="h2031">H203-1鏃呭鏈堟姤</el-radio-button>
- <el-radio-button label="passengerAuth">鏃呭杩愭斂杞﹁締</el-radio-button>
- <el-radio-button label="cityBus">鍩庡競鍏氦鏈堟姤</el-radio-button>
- <el-radio-button label="cityTaxi">宸℃父鍑虹鏈堟姤</el-radio-button>
- <el-radio-button label="cityTaxiAuth">鍑虹杞﹁繍鏀胯溅杈�</el-radio-button>
- </el-radio-group>
- </el-form-item>
+ <div class="type-row">
+ <span class="type-label">鏁版嵁绫诲瀷</span>
+ <el-radio-group v-model="activeModule" size="small" @change="onModuleChange">
+ <el-radio-button v-for="g in modules" :key="g.key" :label="g.key">{{ g.name }}</el-radio-button>
+ </el-radio-group>
+ <el-select v-model="type" size="small" style="width:300px" placeholder="閫夋嫨鏁版嵁绫诲瀷" @change="onTypeSelect">
+ <el-option-group :label="activeTypes.name">
+ <el-option v-for="t in activeTypes.types" :key="t.value" :label="t.label" :value="t.value"></el-option>
+ </el-option-group>
+ </el-select>
+ </div>
+ <el-form :inline="true" class="filter-row">
<el-form-item label="鎶ヨ〃鏈�">
<el-date-picker v-model="period" type="month" placeholder="鍏ㄩ儴" value-format="yyyy-MM" clearable style="width:140px" @change="loadData"></el-date-picker>
</el-form-item>
@@ -48,7 +45,7 @@
<div class="table-wrap" ref="tableWrap">
<div class="table-area">
<el-table :data="records" border v-loading="loading" size="small" style="width:100%" height="100%">
- <el-table-column v-for="c in columns" :key="c.prop" :prop="c.prop" :label="c.label" :min-width="c.width" show-overflow-tooltip>
+ <el-table-column v-for="c in visibleColumns" :key="c.prop" :prop="c.prop" :label="c.label" :min-width="c.width" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ formatCell(scope.row[c.prop]) }}</span>
</template>
@@ -73,6 +70,31 @@
name: 'DataView',
data() {
return {
+ modules: [
+ {
+ key: 'freight', name: '閬撹矾璐ц繍', types: [
+ { value: 'h2032', label: '閬撹矾璐х墿杩愯緭鏈堝害鐢熶骇鎯呭喌' },
+ { value: 'transportAuth', label: '杩愭斂杞﹁締' },
+ { value: 'trackMileage', label: '杞ㄨ抗閲岀▼' },
+ { value: 'scaleSplit', label: '瑙勪笂瑙勪笅鎷嗗垎' },
+ { value: 'freightTurnover', label: '璐ц繍閲忓懆杞噺' }
+ ]
+ },
+ {
+ key: 'passenger', name: '鍏矾鏃呭', types: [
+ { value: 'h2031', label: '鍏矾鏃呭杩愯緭鏈堝害鐢熶骇鎯呭喌' },
+ { value: 'passengerAuth', label: '杩愭斂杞﹁締鏁�' }
+ ]
+ },
+ {
+ key: 'city', name: '鍩庡競瀹㈣繍', types: [
+ { value: 'cityBus', label: '鍩庡競鍏叡浜ら�氭湀搴﹁繍钀ユ儏鍐�' },
+ { value: 'cityTaxi', label: '宸℃父鍑虹姹借溅杩愯惀鏈嶅姟鎯呭喌鏈堟姤' },
+ { value: 'cityTaxiAuth', label: '鍑虹杞﹁繍鏀胯溅杈�' }
+ ]
+ }
+ ],
+ activeModule: 'freight',
type: 'h2032',
period: '',
keyword: '',
@@ -81,12 +103,35 @@
total: 0,
records: [],
columns: [],
- loading: false
+ loading: false,
+ loadingMore: false
+ }
+ },
+ computed: {
+ activeTypes() {
+ const g = this.modules.find(x => x.key === this.activeModule) || this.modules[0]
+ return g
+ },
+ visibleColumns() {
+ const hiddenProps = ['enterpriseCode', 'unifiedCreditCode', 'reportUnit']
+ const hiddenLabels = ['浼佷笟浠ｇ爜', '缁熶竴绀句細淇＄敤浠ｇ爜', '濉姤鍗曚綅']
+ return (this.columns || []).filter(c =>
+ hiddenProps.indexOf(c.prop) < 0 && hiddenLabels.indexOf(c.label) < 0)
}
},
methods: {
+ onModuleChange(key) {
+ const g = this.modules.find(x => x.key === key)
+ if (!g || !g.types.length) return
+ if (!g.types.some(t => t.value === this.type)) {
+ this.type = g.types[0].value
+ }
+ this.loadData()
+ },
+ onTypeSelect() { this.loadData() },
loadData() {
this.loading = true
+ this.loadingMore = false
api.get('/data/list', {
params: {
type: this.type,
@@ -98,7 +143,7 @@
}).then(res => {
const d = res.data || {}
this.records = d.records || []
- this.columns = d.columns || []
+ this.columns = (d.columns || []).filter(c => ['enterpriseCode', 'unifiedCreditCode', 'reportUnit'].indexOf(c.prop) < 0 && ['浼佷笟浠ｇ爜', '缁熶竴绀句細淇＄敤浠ｇ爜', '濉姤鍗曚綅'].indexOf(c.label) < 0)
this.total = d.total || 0
if (this.page > 1 && this.records.length === 0) {
this.page = 1
@@ -109,7 +154,71 @@
this.$message.error('鏁版嵁鏌ヨ澶辫触')
}).finally(() => {
this.loading = false
+ this.$nextTick(() => this.attachBodyScroll())
})
+ },
+ // el-table 鍥哄畾楂樺害鍚庯紝鐪熸鐨勭珫鍚戞粴鍔ㄥ鍣ㄦ槸鍐呴儴鐨� body-wrapper锛堥〉闈㈡湰韬笉婊氬姩锛�
+ attachBodyScroll() {
+ const wrap = this.$refs.tableWrap
+ if (!wrap) return
+ const bw = wrap.querySelector('.el-table__body-wrapper')
+ if (bw && bw._vwScrollHandler !== this.onScroll) {
+ if (bw._vwScrollHandler) bw.removeEventListener('scroll', bw._vwScrollHandler)
+ bw.addEventListener('scroll', this.onScroll, { passive: true })
+ bw._vwScrollHandler = this.onScroll
+ }
+ },
+ // 婊氬姩鍒板簳閮ㄨ嚜鍔ㄨ拷鍔犱笅涓�椤碉紙淇濈暀鎵嬪姩鍒嗛〉璺抽〉鑳藉姏锛�
+ loadMore() {
+ if (this.loading || this.loadingMore) return
+ if (this.records.length >= this.total || this.total <= 0) return
+ const nextPage = this.page + 1
+ this.loadingMore = true
+ api.get('/data/list', {
+ params: {
+ type: this.type,
+ period: this.period || undefined,
+ keyword: this.keyword || undefined,
+ page: nextPage,
+ size: this.size
+ }
+ }).then(res => {
+ const d = res.data || {}
+ const addRows = d.records || []
+ if (!addRows.length) {
+ this.page = nextPage - 1
+ return
+ }
+ this.records = this.records.concat(addRows)
+ this.page = nextPage
+ if (d.total != null) this.total = d.total
+ if (d.columns && d.columns.length) this.columns = d.columns.filter(c => ['enterpriseCode', 'unifiedCreditCode', 'reportUnit'].indexOf(c.prop) < 0 && ['浼佷笟浠ｇ爜', '缁熶竴绀句細淇＄敤浠ｇ爜', '濉姤鍗曚綅'].indexOf(c.label) < 0)
+ }).catch(e => {
+ if (e && e._toast) return
+ this.$message.error('鍔犺浇鏇村澶辫触')
+ }).finally(() => {
+ this.loadingMore = false
+ this.$nextTick(() => this.attachBodyScroll())
+ })
+ },
+ onScroll(e) {
+ // 鏅��/鍏ㄥ睆涓嬬湡姝ｇ殑婊氬姩瀹瑰櫒閮芥槸 el-table 鍐呴儴 body-wrapper锛堟崟鑾烽樁娈靛彲鏀跺埌锛夛紱
+ // 椤甸潰鏁翠綋婊氬姩鏃朵互 window/document 涓哄噯銆�
+ const t = e && e.target
+ let scrollTop, clientHeight, scrollHeight
+ if (t && t.nodeType === 1 && t !== document && typeof t.scrollTop === 'number' && t.scrollHeight > t.clientHeight) {
+ scrollTop = t.scrollTop
+ clientHeight = t.clientHeight
+ scrollHeight = t.scrollHeight
+ } else {
+ const se = document.scrollingElement || document.documentElement
+ scrollTop = se.scrollTop
+ clientHeight = window.innerHeight
+ scrollHeight = se.scrollHeight
+ }
+ if (scrollHeight > 0 && scrollTop + clientHeight >= scrollHeight - 80) {
+ this.loadMore()
+ }
},
toggleFullscreen() {
const el = this.$refs.tableWrap
@@ -131,11 +240,47 @@
if (q.period) this.period = q.period
if (q.keyword) this.keyword = q.keyword
this.loadData()
+ window.addEventListener('scroll', this.onScroll, { passive: true })
+ if (this.$refs.tableWrap) {
+ // capture=true锛歟l-table 鍐呴儴 body-wrapper 鐨勬粴鍔ㄥ湪鎹曡幏闃舵涔熻兘鏀跺埌
+ this.$refs.tableWrap.addEventListener('scroll', this.onScroll, { passive: true, capture: true })
+ }
+ this.$nextTick(() => this.attachBodyScroll())
+ },
+ beforeDestroy() {
+ window.removeEventListener('scroll', this.onScroll)
+ if (this.$refs.tableWrap) {
+ this.$refs.tableWrap.removeEventListener('scroll', this.onScroll, { capture: true })
+ const bw = this.$refs.tableWrap.querySelector('.el-table__body-wrapper')
+ if (bw && bw._vwScrollHandler) bw.removeEventListener('scroll', bw._vwScrollHandler)
+ }
}
}
</script>
<style scoped>
.el-header { background: #409EFF; color: white; line-height: 60px; font-size: 18px; }
+.type-row { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.type-label { color: #606266; font-weight: 600; }
+.filter-row { margin-bottom: 4px; }
+#app .table-wrap {
+ display: flex;
+ flex-direction: column;
+ height: calc(100vh - 330px);
+ min-height: 300px;
+}
+#app .table-area {
+ flex: 1 1 auto;
+ min-height: 0;
+ overflow: hidden;
+}
+#app .table-area .el-table {
+ width: 100%;
+ height: 100%;
+}
+#app .table-wrap .el-pagination {
+ flex: none;
+ margin-top: 8px;
+}
#app .table-area:fullscreen {
padding: 20px;
background: #fff;
@@ -147,6 +292,7 @@
overflow: auto;
display: flex;
flex-direction: column;
+ height: 100vh;
}
#app .table-wrap:fullscreen .table-area {
flex: 1 1 auto;
--
Gitblit v1.9.1