fix: 4项整改——审核结果按模板双Sheet导出(仅核实型+状态筛选)/明细表格化、数据查看分组选择与隐藏三列、报表页隐藏货运旅客城市客运小表、整...

zhizhijie

2026-09-09 7a17662bdadf36c4e30bd53b896571612d48abbb

 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>
        <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-form-item>
          <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: '',
@@ -85,7 +107,28 @@
      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
@@ -100,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
@@ -149,7 +192,7 @@
        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
        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('加载更多失败')
@@ -216,6 +259,9 @@
</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;