feat(数据查看): 数据类型改分组单下拉框（支持搜索）+ 接入左侧冻结标识列（含此前未提交的冻结列实现）

zhizhijie

9 天以前 7a26ed20d0b95f781a60f9fc94ffae613c87fe6f

feat(数据查看): 数据类型改分组单下拉框（支持搜索）+ 接入左侧冻结标识列（含此前未提交的冻结列实现）

 traffic-audit-web/src/views/DataView.vue

@@ -21,12 +21,10 @@
          <el-date-picker v-model="period" type="month" placeholder="报表期（全部）" value-format="yyyy-MM" clearable style="width:150px" @change="doQuery"></el-date-picker>
          <span class="toolbar-sep"></span>
          <span class="toolbar-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:250px" 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-select v-model="type" size="small" style="width:300px" placeholder="选择数据类型" filterable
                     :title="currentTypeLabel" @change="onTypeSelect">
            <el-option-group v-for="g in modules" :key="g.key" :label="g.name">
              <el-option v-for="t in g.types" :key="t.value" :label="t.label" :value="t.value"></el-option>
            </el-option-group>
          </el-select>
          <el-input v-model="keyword" placeholder="企业/市州名称" clearable style="width:180px" @keyup.enter.native="doQuery"></el-input>
@@ -37,7 +35,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 visibleColumns" :key="c.prop" :prop="c.prop" :label="c.label" :min-width="c.width" show-overflow-tooltip>
              <el-table-column v-for="c in renderColumns" :key="c.prop" :prop="c.prop" :label="c.label" :min-width="c.width" :fixed="c.fixed ? 'left' : false" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ formatCell(scope.row[c.prop]) }}</span>
                </template>
@@ -112,6 +110,13 @@
    }
  },
  computed: {
    currentTypeLabel() {
      for (const g of this.modules) {
        const t = g.types.find(x => x.value === this.type)
        if (t) return g.name + ' · ' + t.label
      }
      return this.type
    },
    activeTypes() {
      const g = this.modules.find(x => x.key === this.activeModule) || this.modules[0]
      return g
@@ -121,6 +126,26 @@
      const hiddenLabels = ['企业代码', '统一社会信用代码', '填报单位']
      return (this.columns || []).filter(c =>
        hiddenProps.indexOf(c.prop) < 0 && hiddenLabels.indexOf(c.label) < 0)
    },
    // 左侧冻结"这是谁的数据"所需列：横向滚动时企业名称/市州不会跑出视野。
    // 只冻结从第 1 列开始的一段连续列，避免冻结列之间被普通列打断。
    renderColumns() {
      const stickyProps = ['reportPeriod', 'regionCode', 'city', 'regionName', 'periodType',
        'enterpriseName', 'projectName', 'plateNo']
      const nameProps = ['enterpriseName', 'projectName', 'plateNo']
      const cols = this.visibleColumns
      let limit = -1
      for (let i = 0; i < cols.length && i < 6; i++) {
        if (nameProps.indexOf(cols[i].prop) >= 0) { limit = Math.min(i, 3); break }
      }
      if (limit < 0) {
        // 表里没有名称列（如货运量周转量）时，冻结开头的连续标识列
        limit = 0
        while (limit + 1 < cols.length && limit < 2 && stickyProps.indexOf(cols[limit + 1].prop) >= 0) {
          limit++
        }
      }
      return cols.map((c, i) => Object.assign({}, c, { fixed: i <= limit && stickyProps.indexOf(c.prop) >= 0 }))
    }
  },
  methods: {
@@ -132,7 +157,11 @@
      }
      this.doQuery()
    },
    onTypeSelect() { this.doQuery() },
    onTypeSelect() {
      const g = this.modules.find(x => x.types.some(t => t.value === this.type))
      if (g) this.activeModule = g.key
      this.doQuery()
    },
    doQuery() {
      this.page = 1
      this.records = []