vue-insagent-pc/src/views/Core/KtCommonTable.vue

<template>
  <div style="position: relative" ref="commonTable">
    <!--表格栏-->
    <el-table id="commonTable" ref="doLayout" :data="data.content" :highlight-current-row="highlightCurrentRow"
      @selection-change="selectionChange" @row-click="rowClick" @current-change="handleCurrentChange"
      :element-loading-text="$t('action.loading')" :border="border" :stripe="stripe" :show-summary="showSummary"
      :summary-method="getSummaries" :show-overflow-tooltip="showOverflowTooltip"
      :height="tableHeights ? tableHeights : tableHeight" :size="size" :align="align" :header-cell-style="{
        background: '#F2F7FC',
        fontWeight: '900',
        color: '#606266',
      }" style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column type="expand" v-if="showSysUserAccountCardList" style="display: flex;">
        <template slot-scope="scope">
          <el-table :data="scope.row.sysUserAccountCardList" size="small" :header-cell-style="{
            background: '#ccc',
            fontWeight: '900',
            color: '#606266',
          }" style="width: 55%">
            <el-table-column type="index" width="50" align="center" label="序号">
            </el-table-column>
            <el-table-column prop="bankAccount" label="银行" style="flex: 1">
            </el-table-column>
            <el-table-column prop="bankAddress" label="开户行" style="flex: 1">
            </el-table-column>
            <el-table-column prop="bankNumber" label="银行卡号" style="flex: 1">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="50" fixed align="center" v-if="showBatchDelete ||
        showBatchSettled ||
        showBatchPrint ||
        customToolseletted
        "></el-table-column>
      <el-table-column v-if="SerialShow" label="序号" type="index" width="50" align="center"></el-table-column>

      <template v-for="column in columns">
        <el-table-column header-align="center" align="center" :prop="column.prop" :label="column.label"
          :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :key="column.prop" :type="column.type"
          :formatter="column.formatter" :sortable="column.sortable ? column.sortable : false"
          v-if="column.signIcon || column.isImg || column.isBtn">
          <template slot-scope="scope">
            <el-switch :disabled="column.isDisabled" v-if="column.signIcon" v-model="scope.row[column.prop]"
              active-value="1" inactive-value="0" @change="signStateChanged(scope.$index, scope.row)"></el-switch>
            <img v-if="column.isImg" :width="column.imgWidth" :height="column.imgHeight" :src="scope.row[column.prop]" />
            <kt-button v-if="column.isBtn" icon="fa fa-edit" :label="column.btnName" :size="size"
              :perms="column.permsEdit" @click="handleBtnEdit(scope.$index, scope.row)" />
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" :prop="column.prop" :label="column.label"
          :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :key="column.prop" :type="column.type"
          :formatter="column.formatter" :sortable="column.sortable ? column.sortable : false" v-else>
          <template v-for="columnchildren in column.children">
            <el-table-column v-if="columnchildren" header-align="center" align="center" :prop="columnchildren.prop"
              :label="columnchildren.label" :width="columnchildren.width" :min-width="columnchildren.minWidth"
              :fixed="columnchildren.fixed" :key="columnchildren.prop" :type="columnchildren.type"
              :formatter="columnchildren.formatter" :sortable="columnchildren.sortable == null ? true : columnchildren.sortable
                ">
            </el-table-column>
          </template>
        </el-table-column>
      </template>
      <el-table-column :label="$t('action.operation')" :width="operationWidth" fixed="right" v-if="showOperation"
        header-align="center" align="center">
        <template slot-scope="scope">
          <kt-button type="primary" v-if="editButtonName" icon="fa fa-edit" :label="editButtonName" :perms="permsEdit"
            :size="size" @click="handleEdit(scope.$index, scope.row)" />
          <kt-button v-if="deleteButtonName" icon="fa fa-trash" :label="deleteButtonName" :perms="permsDelete"
            :size="size" type="danger" @click="handleDeleteFlag(scope.$index, scope.row)" />
          <kt-button :style="{
            background: button1Background + '',
            border: '1px solid' + button1Background,
            color: '#fff',
          }" v-if="button1Name" :label="button1Name"  :perms="permsButton1" :size="size" :icon="button1Icon"
            @click="handleButton1(scope.$index, scope.row)" />
          <kt-button v-if="button2Name" :label="button2Name" :style="button2style" :perms="permsButton2" :size="size" :type="button2Type"
            :icon="button2Icon" @click="handleButton2(scope.$index, scope.row)" />
          <kt-button v-if="button3Name" :label="button3Name" :style="button3style" :perms="permsButton3" :size="size" :type="button3Type"
            :icon="button3Icon" @click="handleButton3(scope.$index, scope.row)" />
          <kt-button v-if="button4Name" :icon="button4Icon" :style="button4style" :type="button4Type" :label="button4Name" :perms="permsButton4"
            :size="size" @click="handleButton4(scope.$index, scope.row)" />
          <kt-button v-if="button5Name" :label="button5Name" :style="button5style" :size="size" :type="button5Type" :icon="button5Icon"
            @click="handleButton5(scope.$index, scope.row)" />
          <kt-button v-if="button6Name" :label="button6Name" :size="size" :type="button6Type"
            @click="handleButton6(scope.$index, scope.row)" />
          <el-button type="text" size="small" v-if="buttonDropdown.length > 0">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                更多
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="val in buttonDropdown" :key="val.label">
                  <el-button style="width:100%" size="mini" type="text"
                    v-if="!val.hide || (val.hide && val.hide(scope.row))" @click="val.click(scope.row)">{{ val.label
                    }}</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <!-- 底部分页 -->
    <div class="bottomFixed " ref="bottomFixed">
      <div>
        <kt-button :label="customToolName" :perms="permscustomTool" :size="size" @click="customToolMethod()"
          :disabled="selections.length === 0" style="float: left;" v-if="customToolseletted" />
        <kt-button class="debutton" :label="deleteName" :perms="permsDelete" :size="size" @click="handleBatchDelete()"
          :disabled="selections.length === 0" style="float: left" v-if="showBatchDelete & showOperation" />
        <kt-button :label="settledName" :perms="permsSettled" :size="size" @click="handleBatchSettled()"
          :disabled="selections.length === 0" style="float: left" v-if="showBatchSettled" />
        <kt-button label="导出Excel" :perms="permsExcel" :size="size" @click="handleBatchPrint()" style="float: left"
          v-if="showBatchPrint" />
      </div>
      <el-pagination @size-change="handleSizeChange" background layout="total, sizes, prev, pager, next, jumper"
        @current-change="refreshPageRequest" :current-page="data.pageNum" :page-size="data.pageSize"
        :page-sizes="[10, 20, 50, 100, 200, 300, 400, 500]" :total="data.totalSize" style="float: right; "
        v-if="isshowpagination">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import BigNumber from "bignumber.js";
export default {
  name: "KtCommonTable",
  components: {
    KtButton,
  },
  props: {
    tableHeights: {
      type: Number,
    },
    operationWidth: {
      type: Number,
      default: 200,
    },
    showBatchSettled: {
      //显示批量结算
      type: Boolean,
      default: false,
    },
    SerialShow: {
      type: Boolean,
      default: true,
    },
    customToolName: {
      type: String,
    },
    permscustomTool: {
      type: String,
    },
    customToolseletted: {
      // 自定义操作组件
      type: Boolean,
      default: false,
    },

    settledName: {
      //批量按钮name
      type: String,
    },
    deleteName: {
      type: String,
    },
    showBatchPrint: {
      //显示批量导出
      type: Boolean,
      default: false,
    },
    //显示合计
    showSummary: {
      type: Boolean,
      default: false,
    },
    button1Name: {
      type: String,
    },
    button2Name: {
      type: String,
    },
    button3Name: {
      type: String,
    },
    button4Name: {
      type: String,
    },
    button5Name: {
      type: String,
    },
    button6Name: {
      type: String,
    },
    buttonDropdown: {
      type: Array,
      default: () => [],
    },
    permsButton1: {
      type: String,
    },
    permsButton2: {
      type: String,
    },
    permsButton3: {
      type: String,
    },
    permsButton4: {
      type: String,
    },
    button1Background: {
      type: String,
      default: "#f56c6c",
    },
    button2Background: {
      type: String,
      default: "rgb(222, 80, 76)",
    },
    button3Background: {
      type: String,
      default: "rgb(14, 194, 22)",
    },
    button4Background: {
      type: String,
      default: "#1e87ed",
    },
    button1Icon: {
      type: String,
      default: "fa fa-trash",
    },
    button2Icon: {
      type: String,
      default: "",
    },
    button3Icon: {
      type: String,
      default: "",
    },
    button4Icon: {
      type: String,
      default: "",
    },
    button5Icon: {
      type: String,
      default: "",
    },
    button2Type: {
      type: String,
      default: "primary",
    },
    button3Type: {
      type: String,
      default: "primary",
    },
    button4Type: {
      type: String,
      default: "primary",
    },
    button5Type: {
      type: String,
      default: "primary",
    },
    button6Type: {
      type: String,
      default: "primary",
    },
    editButtonName: {
      type: String,
    },
    deleteButtonName: {
      type: String,
    },
    isshowpagination: {
      //是否显示分页栏
      type: Boolean,
      default: true,
    },
    showSummaryFieldList: Array, //自定义合计列配置
    keyName: String, //主键字段名
    columns: Array, // 表格列配置
    data: {}, // 表格分页数据
    permsEdit: String, // 编辑权限标识
    permsDelete: String, // 底部按钮标识
    permsSettled: String, // 底部按钮标识
    permsExcel: String, // 底部按钮标识
    size: {
      // 尺寸样式
      type: String,
      default: "small ",
    },
    align: {
      // 文本对齐方式
      type: String,
      default: "left",
    },
    // maxHeight: {  // 表格最大高度
    //   type: Number,
    //   default: 1420
    // },
    // height: {  // 表格最大高度
    //   type: Number,
    //   default: 250
    // },
    showOperation: {
      // 是否显示操作组件
      type: Boolean,
      default: true,
    },
    border: {
      // 是否显示边框
      type: Boolean,
      default: true,
    },
    stripe: {
      // 是否显示斑马线
      type: Boolean,
      default: true,
    },
    highlightCurrentRow: {
      // 是否高亮当前行
      type: Boolean,
      default: true,
    },
    showOverflowTooltip: {
      // 是否单行显示
      type: Boolean,
      default: true,
    },
    showBatchDelete: {
      // 是否显示操作组件
      type: Boolean,
      default: false,
    },
    showSysUserAccountCardList: {
      // 是否显示二级列组件
      type: Boolean,
      default: false,
    },
    button1style: {
      type: Object,
      default: () => ({ }),
    },
    button2style: {
      type: Object,
      default: () => ({ }),
    },
    button3style: {
      type: Object,
      default: () => ({}),

    },
    button4style: {
      type: Object,
      default: () => ({ }),

    },
    button5style: {
      type: Object,
      default: () => ({ }),

    }
  },
  data() {
    return {
      tableHeight: 0,
      loading: false, // 加载标识
      selections: [], // 列表选中列
      pageRequest: {
        pageNum: 1,
        pageSize: 20,
      },
    };
  },
  methods: {
    tableRowClassName(row, rowIndex) {
      // if (!!row.fieldName24 && row.fieldName24.indexOf("未") >= 0) {
      //   return "warningRow";
      // } else if (!!row.fieldName24 && row.fieldName24.indexOf("已") >= 0) {
      // return "successRow";
      // }
      this.$emit("tableRowClassName", row);
      // return '';
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计"; // 假设第一列显示文本'合计'
          return;
        }
        if (this.showSummaryFieldList) {
          // 如果当前列名不在需要计算的列名数组中，直接返回空值或其他标记
          if (!this.showSummaryFieldList.includes(column.property)) {
            sums[index] = "-";
            return;
          }
        }
        let sum = new BigNumber(0);
        data.forEach((item) => {
          let value = item[column.property];
          let number = new BigNumber(value);
          if (!number.isNaN()) {
            sum = sum.plus(number);
          }
        });
        sums[index] = sum.toFixed(); // 转换成字符串避免精度问题
      });
      return sums;
    },
    // 分页查询
    findPage: function () {
      this.loading = true;
      let callback = (res) => {
        this.loading = false;
        //解决操作栏位置偏移问题
        this.$nextTick(() => {
          this.$refs.doLayout.doLayout();
        }, 200);
      };
      this.$emit("findPage", {
        pageRequest: this.pageRequest,
        callback: callback,
      });
    },
    hideLoading() {
      this.loading = false;
    },
    // 选择切换
    selectionChange: function (selections) {
      this.selections = selections;
      this.$emit("selectionChange", {
        selections: selections,
      });
    },
    // 选择切换
    handleCurrentChange: function (val) {
      this.$emit("handleCurrentChange", {
        val: val,
      });
    },

    rowClick: function (row) {
      this.$emit("rowClick", {
        row: row,
      });
    },
    // 换页刷新
    refreshPageRequest: function (pageNum) {
      this.pageRequest.pageNum = pageNum;
      this.pageRequest.pageSize = 20;
      this.findPage();
    },
    // 每页条数发生改变
    handleSizeChange(pageSize) {
      this.pageRequest.pageSize = pageSize;
      this.findPage();
    },
    signStateChanged(index, row) {
      this.$emit("signStateChanged", {
        index: index,
        row: row,
      });
    },
    // 按钮编辑
    handleBtnEdit: function (index, row) {
      this.$emit("handleBtnEdit", {
        index: index,
        row: row,
      });
    },
    // 编辑
    handleEdit: function (index, row) {
      this.$emit("handleEdit", {
        index: index,
        row: row,
      });
      // this.$emit('findLeftTreeData')
    },
    // 删除
    handleDelete: function (index, row) {
      let _keyName = "id";
      if (!!this.keyName) {
        _keyName = this.keyName;
      }

      this.delete(row[_keyName]);
    },
    handleButton1: function (index, row) {
      this.$emit("handleButton1", {
        index: index,
        row: row,
      });
    },
    handleButton2: function (index, row) {
      this.$emit("handleButton2", {
        index: index,
        row: row,
      });
    },
    handleButton3: function (index, row) {
      this.$emit("handleButton3", {
        index: index,
        row: row,
      });
    },
    handleButton4: function (index, row) {
      this.$emit("handleButton4", {
        index: index,
        row: row,
      });
    },
    handleButton5: function (index, row) {
      this.$emit("handleButton5", {
        index: index,
        row: row,
      });
    },
    handleButton6: function (index, row) {
      this.$emit("handleButton6", {
        index: index,
        row: row,
      });
    },
    handleButton: function (index, row) {
      this.$emit("handleButton", {
        index: index,
        row: row,
      });
    },
    //删除单个
    handleDeleteFlag: function (index, row) {
      this.$emit("handleDeleteFlag", { index: index, row: row });
      // var _keyName = "id";
      // if (!!this.keyName) {
      //   _keyName = this.keyName;
      // }
      // let ids = row[_keyName];
      // this.$confirm("确认删除吗？", "提示", {
      //   type: "warning",
      // })
      //   .then(() => {
      //     let params = [];
      //     let idArray = (ids + "").split(",");
      //     for (var i = 0; i < idArray.length; i++) {
      //       var obj = {};
      //       obj[_keyName] = idArray[i];
      //       params.push(obj);
      //     }
      //     this.loading = true;
      //     let callback = (res) => {
      //       if (res.code == 200) {
      //         this.$message({
      //           message: "操作成功",
      //           type: "success",
      //         });
      //         this.findPage();
      //         // this.$emit('findLeftTreeData')
      //       } else {
      //         this.$message({
      //           message: "操作失败, " + res.msg,
      //           type: "error",
      //         });
      //       }
      //     };
      //     this.$emit("handleDeleteFlag", {
      //       params: params,
      //       callback: callback,
      //     });
      //     this.loading = false;
      //   })
      //   .catch(() => {
      //     this.loading = false;
      //   });
    },
    // 批量删除
    handleBatchDelete: function () {
      let idlist = [];
      this.selections.map((item) => idlist.push(item.id));
      this.$emit("handleDelete", idlist);
    },
    //自定义批量操作按钮
    customToolMethod() {
      let idlist = [];
      this.selections.map((item) => idlist.push(item.id));
      this.$emit("customTool", idlist);
    },
    // 删除操作
    delete: function (ids) {
      var _keyName = "id";
      if (!!this.keyName) {
        _keyName = this.keyName;
      }

      this.$confirm("确认删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          let params = [];
          let idArray = (ids + "").split(",");
          for (var i = 0; i < idArray.length; i++) {
            var obj = {};
            obj[_keyName] = idArray[i];
            params.push(obj);
          }
          let callback = (res) => {
            if (res.code == 200) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.findPage();
              // this.$emit('findLeftTreeData')
            } else {
              this.$message({
                message: "操作失败, " + res.msg,
                type: "error",
              });
            }
          };
          this.$emit("handleDelete", {
            params: params,
            callback: callback,
          });
        })
        .catch(() => { });
    },
    //批量结算
    handleBatchSettled: function () {
      let _keyName = "orderno";
      if (!!this.keyName) {
        _keyName = this.keyName;
      }
      let idlist = [];
      this.selections.map((item) => idlist.push(item[_keyName]));
      this.$emit("handleSettled", idlist);
    },
    //批量打印
    handleBatchPrint: function () {
      // let _keyName = "orderno";
      // if(!!this.keyName){
      //   _keyName = this.keyName;
      // }
      // let ids = this.selections.map(item => item[_keyName]).toString()
      // console.log(ids);
      this.$emit("handlePrint");
    },
  },

  mounted() {
    const that = this;
    that.refreshPageRequest(1);
    setTimeout(() => {
      let tableTop = that.$refs.commonTable.offsetTop;
      let bottomTop = that.$refs.bottomFixed.offsetTop;
      that.tableHeight = bottomTop - tableTop - 120 + "px";
    }, 10);
    // window.onresize = function () {
    //   let tableTop = that.$refs.commonTable.offsetTop;
    //   let bottomTop = that.$refs.bottomFixed.offsetTop;
    //   that.tableHeight = bottomTop - tableTop - 120 + "px";
    // };
  },
};
</script>

<style scoped>
/* 底部固定分页 */
.bottomFixed {
  height: 40px;
  bottom: 0;
  width: 100%;
  background: #fff;
  margin-top: 10px;
}

.el-table .warningRow {
  background: oldlace;
}

.el-table .successRow {
  background: #f0f9eb;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--themeColor);
  font-size: 12px;
}
</style>