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

<template>
  <div v-tableLoad="tableLoad">
    <!-- :header-cell-style="{background:'#EEEEEE',color:'#333'}" -->
    {{height + '33333'}}
    <el-table
      v-loading="loading"
      ref="table"
      :fit="tool.calculatedColumnWidth($refs.table,layout)"
      :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, index) in layout"
        :key="col.tablecolid"
        :prop="col.columnname"
        :label="col.title"
        :min-width="col.width || 150"
        :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/jiangxu.svg"
                v-if="!col.sort"
                @click="setSort(col, 1)"
              />
              <img src="@/assets/shengxu.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>