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

<template>
  <div style="position: relative" ref="commonTable">
    <!--表格栏-->
    <el-table id="commonTable" :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-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="40" fixed
        v-if="showBatchDelete || showBatchSettled "></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";
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,
    },
    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,
    },
    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 '';
    },

    // 分页查询
    findPage: function () {
      this.loading = true;
      let callback = (res) => {
        this.loading = false;
      };
      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 _keyName = "id";
      if (!!this.keyName) {
        _keyName = this.keyName;
      }
      //let ids = this.selections.map(item => item.id).toString()
      let ids = this.selections.map((item) => item[_keyName]).toString();
      this.delete(ids);
    },
    // 删除操作
    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.policyno));
      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>