yos_web/src/optionSystem/FProductManage/modules/table.vue

<template>
    <div v-tableLoad="tableLoad">
      <!-- :header-cell-style="{background:'#EEEEEE',color:'#333'}" -->
      <el-table v-loading="loading" ref="table" :row-class-name="tableClassName" highlight-current-row :data="data != undefined ? data : list"  size="mini" :height="height ? height : list.length <= 4?'260px':list.length <= 20?'calc(100vh - 420px)':'calc(100vh - 420px)'"  @row-click="rowClick" style="width:100%;" :header-cell-style="{background:'#fafafafa',height:'40px',color:'#000000'}" @selection-change="selectionChange">
        <el-table-column
            type="selection"
            width="35" fixed v-if="checkbox">
        </el-table-column>
        <el-table-column v-for="col in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title" :width="width && col.width === 0 ? 150 : col.width" :fixed="fixedName ? fixedName == col.columnname?redirect ? redirect : 'right' :false : false">
          <template v-slot:header="{ column,$index }">
            <div style="display: flex;align-items: center;align-content: center;">
              <span @click="setSort(col,0)">{{ col.title }}</span>
              <div v-if="col.sortable == 1" class="sort-icon">
                <img src="@/assets/降序.svg" v-if="!col.sort" @click="setSort(col,1)">
                <img src="@/assets/升序.svg" v-else @click="setSort(col,0)">
              </div>
            </div>
          </template>
          <template slot-scope="scope">
            <div class="table-panel">
              <!-- 自定义表格显示内容 -->
              <slot v-if="custom" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
              <!-- 否则就是默认 -->
              <span v-else>{{scope.row[col.columnname]}}</span>
              <!-- 操作结构内容 -->
              <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div  class="container normal-panel" style="text-align:right" v-if="param && page">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="param.content.pageSize"
            layout="total,sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import {mapGetters} from "vuex"
  export default {
    /*
      layout:表结构数据;
      data:表渲染数据;
      custom:是否启用自定义结构;
      opwidth:操作列宽度
    */
    name:'MyTable',
    props:['layout','data','custom','height','fixedName','width','checkbox','redirect','customHeader','param','noQuery','page','tableName'],
    data () {
      return {
        list:[],
        total:0,
        currentPage:1,
        totalPage:0,
      }
    },
    computed:{
      ...mapGetters({
        loading:'loading'
      })
    },
    methods:{
      tableLoad () {
      if (this.param.content.pageNumber == this.totalPage) return
        this.param.content.pageNumber += 1
        console.log(this.param.content.pageNumber);
        
        this.listData(()=>{},true)
      },
      async listData (callback,init) {
        if (!init) this.param.content.pageNumber = 1
        if (this.tableName) this.param.content.tableid = this.tool.tabelCol(this.$route.name)[this.tableName].tableid
        let res = await this.$api.requested(this.param)
        this.total = res.total
        this.currentPage = res.pageNumber
        this.list = this.param.content.pageNumber == 1 ? res.data : [...this.list,...res.data]
        this.totalPage = res.pageTotal
        this.param.content.sort = res.sort
        callback && callback()
      },
      setSort(column,sort) {
        this.param.content.simplesort = {}
        column.cur = 1
        if (column.columnname == 'matchratio') {
          this.param.content.sort = this.param.content.sort.map(v => {
            return {
              reversed:v.sortname=='匹配度'?sort==1?0:1:v.reversed,
              sorted:v.sortname=='匹配度'?1:0,
              sortid:v.sortid,
              sortname:v.sortname
            }
          })
          delete this.param.content.simplesort
          column.sort = sort
        } else if (column.columnname == 'maxruntime') {
          this.param.content.sort = this.param.content.sort.map(v => {
            return {
              reversed:v.sortname=='开关时间'?sort==1?0:1:v.reversed,
              sorted:v.sortname=='开关时间'?1:0,
              sortid:v.sortid,
              sortname:v.sortname
            }
          })
          column.sort = sort
          delete this.param.content.simplesort
        } else {
          column.sort = this.param.content.simplesort[column.columnname] = sort
          delete this.param.content.sort
        }
        this.layout.forEach(e=>{
          if (e.columnname !== column.columnname) {
            e.cur = 0
            e.sort = 0
          }
        })
        this.listData()
      },
      rowClick (row) {
        this.$emit('rowClick',row)
      },
      tableClassName ({row,rowIndex}) {
        row.index = rowIndex
      },
      selectionChange(row){
        this.$emit('selectionChange',row)
      },
      handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
        this.param.content.pageSize = val
        this.listData(()=>{},true)
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.param.content.pageNumber = val
        this.listData(()=>{},true)
      },
    },
    created () {
      !this.noQuery && this.param && this.listData()
    },
    mounted () {
    }
  }
  
  </script>
  <style scoped>
    .sort-icon img {
      cursor: pointer;
      width: 18px;
      height: 18px;
    }
  </style>