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="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="selection"
        width="50"
        fixed
        align="center"
        v-if="showBatchDelete || showBatchSettled || showBatchPrint"
      ></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
            style="
              background: #1e87ed;
              border: 1px solid #1e87ed;
              color: #ffffff;
            "
            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
            :style="{
              background: button2Background,
              border: '1px solid' + button2Background,
              color: '#fff',
            }"
            v-if="button2Name"
            :label="button2Name"
            :perms="permsButton2"
            :size="size"
            :icon="button2Icon"
            @click="handleButton2(scope.$index, scope.row)"
          />
          <kt-button
            :style="{
              background: button3Background,
              border: '1px solid' + button3Background,
              color: '#fff',
            }"
            v-if="button3Name"
            :label="button3Name"
            :perms="permsButton3"
            :size="size"
            :icon="button3Icon"
            @click="handleButton3(scope.$index, scope.row)"
          />
          <kt-button
            :style="{
              background: button4Background,
              border: '1px solid ' + button4Background,
              color: '#ffffff',
            }"
            v-if="button4Name"
            :icon="button4Icon"
            :label="button4Name"
            :perms="permsButton4"
            :size="size"
            @click="handleButton4(scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <!-- 底部分页 -->
    <div class="bottomFixed" ref="bottomFixed">
      <kt-button
        class="debutton"
        :label="$t('action.batchDelete')"
        :perms="permsDelete"
        :size="size"
        type="danger"
        @click="handleBatchDelete()"
        :disabled="selections.length === 0"
        style="float: left"
        v-if="showBatchDelete & showOperation"
      />
      <kt-button
        :label="settledName"
        :perms="permsDelete"
        :size="size"
        type="danger"
        @click="handleBatchSettled()"
        :disabled="selections.length === 0"
        style="float: left"
        v-if="showBatchSettled"
      />
      <!-- <kt-button label="导出Excel" :perms="permsDelete" :size="size" type="danger" @click="handleBatchPrint()"
        :disabled="selections.length === 0" style="float: left" v-if="showBatchPrint" /> -->
      <kt-button
        label="导出Excel"
        :perms="permsDelete"
        :size="size"
        type="danger"
        @click="handleBatchPrint()"
        style="float: left"
        v-if="showBatchPrint"
      />
      <el-pagination
        @size-change="handleSizeChange"
        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: left; margin-left: 20px"
        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: {
    operationWidth: {
      type: Number,
      default: 200,
    },
    showBatchSettled: {
      //显示批量结算
      type: Boolean,
      default: false,
    },
    SerialShow: {
      type: Boolean,
      default: true,
    },
    settledName: {
      //批量按钮name
      type: String,
    },
    showBatchPrint: {
      //显示批量导出
      type: Boolean,
      default: false,
    },
    //显示合计
    showSummary: {
      type: Boolean,
      default: false,
    },
    button1Name: {
      type: String,
    },
    button2Name: {
      type: String,
    },
    button3Name: {
      type: String,
    },
    button4Name: {
      type: String,
    },
    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: "fa fa-edit",
    },
    button3Icon: {
      type: String,
      default: "fa fa-edit",
    },
    button4Icon: {
      type: String,
      default: "fa fa-trash",
    },
    editButtonName: {
      type: String,
    },
    deleteButtonName: {
      type: String,
    },
    isshowpagination: {
      //是否显示分页栏
      type: Boolean,
      default: true,
    },
    showSummaryFieldList: Array,//自定义合计列配置
    keyName: String, //主键字段名
    columns: Array, // 表格列配置
    data: {}, // 表格分页数据
    permsEdit: String, // 编辑权限标识
    permsDelete: 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,
    },
  },
  data() {
    return {
      tableHeight: 0,
      // 分页信息
      pageRequest: {
        pageNum: 1,
        pageSize: 20,
      },
      loading: false, // 加载标识
      selections: [], // 列表选中列
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (!!row.fieldName24 && row.fieldName24.indexOf("未") >= 0) {
        return "warningRow";
      } else if (!!row.fieldName24 && row.fieldName24.indexOf("已") >= 0) {
        return "successRow";
      }
      // 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.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,
      });
    },
    //删除单个
    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);
    },
    // 删除操作
    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;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  /* margin-top: 10px; */
  /* box-shadow: 0 -2px 0 0 #efefef; */
}

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

.el-table .successRow {
  background: #f0f9eb;
}
</style>