Merge branch 'master' of http://111.30.93.211:10101/r/supipe

叶松

2023-10-26 979c7c817b2e7d2430ac447b10f943c12dac3b64

 web/src/components/element/Table.vue

@@ -1,151 +1,154 @@
<template>
  <div>
    <!-- elTable -->
    <el-table v-loading="tableLoading" :data="tableData" :ref="tableRef" :size="tableSize" @row-click="rowClick"
      @row-dblclick="rowDblClick" @selection-change="handleSelectionChange" border stripe>
      <template v-for="(col, index) in tableColumns">
        <!-- 选择框 -->
        <el-table-column v-if="col.selection" :key="`selection${index}`" width="50" type="selection" align="center">
        </el-table-column>

        <!-- 序号 -->
        <el-table-column v-else-if="col.index" :key="`index${index}`" width="50" :label="col.name || '序号'" type="index"
          align="center">
        </el-table-column>

        <!-- 操作 -->
        <el-table-column v-else-if="col.operation" :key="`operation${col.name}`" :width="col.width" :label="col.name"
          align="center">
          <template #default="{ row }">
            <el-button v-for="subCol in col.value" :key="subCol.name" :class="subCol.class || ''" :icon="subCol.icon || ''"
              v-permission="subCol.permission || ''" @click="subCol.handleRow ? subCol.handleRow(row) : emptyFn">
              {{ subCol.name }}
            </el-button>
          </template>
        </el-table-column>

        <!-- 常规col -->
        <el-table-column v-else :key="col.name" :width="col.width" :label="col.name" :prop="col.key"
          :show-overflow-tooltip="col.showOverflowTip || false" :align="col.align || 'center'">
          <template #default="{ row }">
            <!-- slotのcol -->
            <template v-if="col.slot">
              <slot :name="col.slot" :row="row"></slot>
            </template>
            <!-- 需处理数据のcol -->
            <template v-else-if="col.formatter">
              {{ col.formatter(row) }}
            </template>
            <!-- 普通のcol -->
            <template v-else>
              {{ row[col.key] }}
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页组件 -->
    <cPagination :total="pageTotal" :page-num.sync="pageNum" :page-size.sync="pageSize" @change-page-num="changePageNum"
      @change-page-size="changePageSize" />
  </div>
</template>
<script>
import cPagination from "./Pagination"
export default {
  name: "cTable",
  data() {
    return {
      time: null,
      emptyFn: () => { }
    };
  },
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
    tableHeight: {
      type: Number,
      default: null
    },
    tableLoading: {
      type: Boolean,
      default: false
    },
    tableRef: {
      type: String,
      default: "multipleTable"
    },
    tableSize: {
      type: String,
      default: "mini"
    },
    tableColumns: {
      type: Array,
      default() {
        return [];
      }
    },
    pageTotal: {
      type: Number
    },
    pageNum: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageChange: {
      type: Function,
      default: () => { }
    },
    handleSelection: {
      type: Function,
      default: () => { }
    }
  },
  components: {
    cPagination
  },
  methods: {
    changePageNum(val) {
      // console.log(val)
      // this.pageNum = val
      this.$emit("update:pageNum", val);
      this.pageChange();
    },
    changePageSize(val) {
      this.$emit("update:pageSize", val);
      if (val * (this.pageNum - 1) <= this.pageTotal) {
        this.pageChange();
      }
    },
    // 单击
    rowClick() {
      // this.time && clearTimeout(this.time);
      // this.time = setTimeout(() => {
      //   this.$refs[this.tableRef].toggleRowSelection(row);
      // }, 200);
    },
    // 双击
    rowDblClick() {
      // this.time && clearTimeout(this.time);
    },
    clearSelection() {
      this.$refs[this.tableRef].clearSelection();
    },
    handleSelectionChange(val) {
      this.handleSelection(val);
    }
  }
};
</script>
<style lang="scss" scoped>
.el-table {
  border: none;
}
<template>

  <div class="box">

    <!-- elTable -->

    <el-table v-loading="tableLoading" :data="tableData" :ref="tableRef" :size="tableSize" @row-click="handleRowClick"

      @row-dblclick="handleRowDblClick" @selection-change="handleSelectionChange" border stripe>

      <template v-for="(col, index) in tableColumns">

        <!-- 选择框 -->

        <el-table-column v-if="col.selection" :key="`selection${index}`" width="50" type="selection" align="center">

        </el-table-column>



        <!-- 序号 -->

        <el-table-column v-else-if="col.index" :key="`index${index}`" width="50" :label="col.name || '序号'" type="index"

          align="center">

        </el-table-column>



        <!-- 操作 -->

        <el-table-column v-else-if="col.operation" :key="`operation${col.name}`" :width="col.width" :label="col.name"

          align="center">

          <template #default="{ row }">

            <el-button v-for="subCol in col.value" :key="subCol.name" :class="subCol.class || ''"

              :icon="subCol.icon || ''" v-permission="subCol.permission || ''"

              @click="subCol.handleRow ? subCol.handleRow(row) : emptyFn">

              {{ subCol.name }}

            </el-button>

          </template>

        </el-table-column>



        <!-- 常规col -->

        <el-table-column v-else :key="col.name" :width="col.width" :label="col.name" :prop="col.key"

          :show-overflow-tooltip="col.showOverflowTip || false" :align="col.align || 'center'">

          <template #default="{ row }">

            <!-- slotのcol -->

            <template v-if="col.slot">

              <slot :name="col.slot" :row="row"></slot>

            </template>

            <!-- 需处理数据のcol -->

            <template v-else-if="col.formatter">

              {{ col.formatter(row) }}

            </template>

            <!-- 普通のcol -->

            <template v-else>

              {{ row[col.key] }}

            </template>

          </template>

        </el-table-column>

      </template>

    </el-table>

    <!-- 分页组件 -->

    <cPagination v-if="pageTotal" :total="pageTotal" :page-num.sync="pageNum" :page-size.sync="pageSize"

      @change-page-num="changePageNum" @change-page-size="changePageSize" />

  </div>

</template>

<script>

import cPagination from "./Pagination"

export default {

  name: "cTable",

  data() {

    return {

      time: null,

      emptyFn: () => { }

    };

  },

  props: {

    tableData: {

      type: Array,

      default() {

        return [];

      }

    },

    tableHeight: {

      type: Number,

      default: null

    },

    tableLoading: {

      type: Boolean,

      default: false

    },

    tableRef: {

      type: String,

      default: "multipleTable"

    },

    tableSize: {

      type: String,

      default: "mini"

    },

    tableColumns: {

      type: Array,

      default() {

        return [];

      }

    },

    pageTotal: {

      type: Number

    },

    pageNum: {

      type: Number,

      default: 1

    },

    pageSize: {

      type: Number,

      default: 10

    },

    pageChange: {

      type: Function,

      default: () => { }

    },

    handleSelection: {

      type: Function,

      default: () => { }

    },

    rowClick: {

      type: Function,

      default: () => { }

    },

  },

  components: {

    cPagination

  },

  methods: {

    changePageNum(val) {

      this.$emit("update:pageNum", val)

      this.pageChange()

    },

    changePageSize(val) {

      this.$emit("update:pageSize", val)

      if (val * (this.pageNum - 1) <= this.pageTotal) {

        this.pageChange()

      }

    },

    // 单击

    handleRowClick(row) {

      this.rowClick(row)

    },

    // 双击

    handleRowDblClick() { },

    handleSelectionChange(val) {

      this.handleSelection(val)

    }

  }

};

</script>

<style lang="scss" scoped>

.box {

  height: 100%;

  display: flex;

  flex-direction: column;

}



.el-table {

  overflow: auto;

  border: none;

  height: 100%;

}

</style>