有关标准页面的组件方法

<template>
  <div>
    <el-row v-if="showSurvey">
      <el-col :span="24" style="margin-bottom: 10px;">
        <el-tag type="info" class="self__tag">
          概况
        </el-tag>
        <slot name="survey" />
      </el-col>
    </el-row>
    <el-row v-if="showOperate">
      <el-col :span="24" style="margin-bottom: 17px;">
        <el-tag type="info" class="self__tag">
          操作
        </el-tag>
        <slot name="operate" />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" style="display: flex;">
        <el-tag type="info" class="self__tag">
          查询
        </el-tag>
        <slot name="search" />
      </el-col>
    </el-row>
    <el-row v-if="showSelection">
      <el-col :span="24" style="margin-bottom: 10px;">
        <el-tag type="info" class="self__tag">
          快捷
        </el-tag>
        <slot name="fast" />
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      size="small"
      border
      :cell-style="cellStyle"
      :header-cell-style="headerStyle"
      class="table"
      :max-height="limitHeight?tableHeight:null"
      @selection-change="handleSelection"
    >
      <el-table-column v-if="showSelection" type="selection" />
      <el-table-column
        v-for="(item,index) in columnList"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        :formatter="item.type?(getFormatter(item.type)):null"
        :width="item.width?item.width:null"
        :show-overflow-tooltip="item.show?true:null"
      />
      <slot name="else" />
      <slot v-if="showTableControl" name="tableControl" />
    </el-table>
    <div class="self__footer">
      <slot name="footer" />
      <page-nation :total="total" @pageChange="pageChange" />
    </div>
  </div>
</template>

<script>
import constants from '~/plugins/constants'
import dateUtil from '~/plugins/dateUtil'
import pageNation from '~/components/pageNation'
export default {
  name: 'NormPage',
  components: { pageNation },
  props: {
    //  显示操作行
    showOperate: {
      type: Boolean,
      default: false
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    //  显示表格多选
    showSelection: {
      type: Boolean,
      default: false
    },
    //  表格列数据
    columnList: {
      type: Array,
      default: () => []
    },
    showShop: {
      type: Boolean,
      default: false
    },
    //  是否限制表格的最大高度 true限制  false不限制
    limitHeight: {
      type: Boolean,
      default: true
    },
    showTableControl: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    },
    showSurvey: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      tableHeight: 0,
      formatterList: [
        { type: 'time', formatter: this.timeFormatter },
        { type: 'gid', formatter: this.gidFormatter },
        { type: 'uniacid', formatter: this.uniacidFormatter },
        { type: 'money', formatter: this.moneyFormatter },
        { type: 'inprice', formatter: this.inpriceFormatter },
        { type: 'tariff', formatter: this.tariffFormat },
        { type: 'endway', formatter: this.endwayFormat }
      ],
      comTypeList: [
        {
          typeName: '不限',
          value: 0
        },
        {
          typeName: '标准计时',
          value: 1
        },
        {
          typeName: '包时段',
          value: 2
        },
        {
          typeName: '包时长',
          value: 3
        }
      ]
    }
  },
  mounted () {
    this.$nextTick(() => {
      if (this.limitHeight) {
        this.tableHeight = constants.METHOD.setTableHeight()
      }
    })
  },
  methods: {
    cellStyle () {
      return constants.COMMON.cell_style
    },
    headerStyle () {
      return constants.COMMON.head_cell_style
    },
    handleSelection (val) {
      this.$emit('handleSelection', val)
    },
    timeFormatter (row, column, cellValue, index) {
      return dateUtil.parseTimeInYmdHms(cellValue)
    },
    getFormatter (type) {
      const obj = this.formatterList.find(item => item.type === type)
      return obj.formatter
    },
    //  上机类型判断
    tariffFormat (row, column, cellValue, index) {
      const obj = this.comTypeList.find(item => item.value === cellValue)
      return obj ? obj.typeName : ''
    },
    //  结账方式判断
    endwayFormat (row, column, cellValue, index) {
      // ZeroMoneyLogoff(1,"余额不足自动结账"),
      //  MemberLogoff(2,"会员自主结账"),
      //  UserLogoff(3,"吧员结账"),
      //  ChangePcLogoff(4,"换机结账"),
      //  PeriodEndLogoff(5,"包时段结束结账"),

      const arr = [
        '余额不足自动结账',
        '会员自主结账',
        '吧员结账',
        '换机结账',
        '包时段结束结账',
        '关机太久导致下机',
        '激活太久导致下机'
      ]
      return arr[cellValue - 1]
    },
    uniacidFormatter (row, column, cellValue, index) {
      return this.$store.getters['web/user/getCompanyNameByUniacid'](cellValue)
    },
    gidFormatter (row, column, cellValue, index) {
      if (cellValue === 0) {
        return '未上机'
      }
      return this.$store.getters['web/user/getNetbarName'](cellValue)
    },
    moneyFormatter (row, column, cellValue, index) {
      return cellValue / 100
    },
    inpriceFormatter (row, column, cellValue, index) {
      return cellValue / 1000
    },
    pageChange (val) {
      this.$emit('pageChange', val)
    }
  }
}
</script>

<style scoped lang="scss">
  .self__footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
</style>