auth-web/src/components/table/index.vue

<!--
    @Modular：表格组件
    @Author: zouwf
    @Date: 2019-03-23
-->
<template>
  <dg-table
    ref="grid"
    row-key="id"
    border
    :expand-row-keys="expands"
    @change-current="handleChangeCurrent"
    @change-size="handleChangeSize"
    @selection-change="handleSelectionChange"
    @expand-change="handleExpandChange"
    @row-click="handleRowClick"
    @cell-click="handleCellClick"
    :url="url"
    :condition="condition"
    :pagination="pagination"
    :pagination-props="paginationProps"
    :mapping="mapping"
    :lazyLoad="lazyLoad"
    highlight-current-row
    :before-search="_beforeSearch"
    :before-quest="beforeQuest"
  >
    <!--序号-->
    <dg-table-column type="index" width="70" label="序号" align="center" fixed="left" />
    <!--复选框情况-->
    <dg-table-column type="selection" width="55" v-if="selection" />
    <slot name="expand" />
    <template v-for="(item, indexs) in headerData">
      <dg-table-column :key="indexs" v-bind="item" align="center">
        <template slot-scope="scope">
          <slot v-if="item.custom" v-bind:row="scope.row" :name="item.prop"></slot>
        </template>
      </dg-table-column>
    </template>
    <!--操作栏-->
    <slot></slot>
  </dg-table>
</template>

<script>
import moment from 'moment';
export default {
  name: 'Ltable',
  props: {
    lazyLoad: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    },
    // 表头配置
    headerData: {
      type: Array,
      default: () => []
    },
    // 开启复选
    selection: {
      type: Boolean,
      default: false
    },
    // 开启复选
    url: {
      type: String,
      default: '',
      require: true
    },
    // 表格查询参数
    condition: {
      type: Object,
      default: () => {}
    },
    sort: {
      type: Object,
      default: () => {}
    },
    // 是否开启分页
    pagination: {
      type: Boolean,
      default: true
    },
    // 分页选项
    paginationProps: {
      type: Object,
      default: () => {
        return {
          currentPage: 1,
          pageSizes: [10, 20, 30],
          pageSize: 10,
          layout: 'total, sizes, prev, pager, next, jumper'
        };
      }
    },
    // 最大高度
    maxheight: {
      type: [Number, String],
      default: ''
    },
    converter: Function,
    beforeSearch: {
      type: Function,
      default: (conditions) => conditions
    },
    tableName: {
      type: String,
      default: '表格'
    }
  },
  // 页面数据绑定
  data() {
    return {
      expands: [],
      mapping: {
        list: 'content',
        total: 'totalPages'
      }
    };
  },

  mounted() {},

  // 方法
  methods: {
    _beforeSearch(conditions) {
      conditions = this.beforeSearch(conditions);
      let tmpCond = JSON.parse(conditions.searchCondition);
      let result = [];
      tmpCond.map((item, i) => {
        if (item.op === 'between') {
          if (item.value[0]) {
            // tmpCond.splice(i, 1);
            result.push({ ...item, op: '>=', value: item.value[0] });
            result.push({ ...item, op: '<=', value: item.value[1] });
          }
        } else {
          result.push(item);
        }
      });

      conditions.searchCondition = JSON.stringify(result);
      conditions.sort = JSON.stringify(this.sort);
      return conditions;
    },
    /**
     * 页码切换
     * @current 切换值
     * */
    handleChangeCurrent(current) {
      this.$emit('handleChangeCurrent', current);
    },

    /**
     * 页面切换
     * @current 切换值
     * */
    handleChangeSize(size) {
      this.$emit('handleChangeSize', size);
    },

    /**
     * 页码切换
     * @data 选中数据数组
     * */
    handleSelectionChange(data) {
      this.$emit('handleSelectionChange', data);
    },

    handleExpandChange(row, expanded) {
      const that = this;
      if (expanded.length) {
        that.expands = [];
        if (row) {
          that.expands.push(row.id);
          this.$emit('expand', row, expanded);
        }
      } else {
        that.expands = [];
      }
    },

    /**
     * 查询
     * */
    handleSearchClick() {
      this.$refs.grid.searchForm();
    },
    /**
     * 表格某行被点击
     * */
    handleRowClick(row, column, event) {
      this.$refs.grid.setCurrentRow(row);

      this.$emit('handleRowClick', { row, column });
    },
    // 某单元格被点击
    handleCellClick(row, column, cell, event) {
      this.$emit('handleCellClick', { row, column });
    },

    /*
     * 切换勾选状态
     * */
    toggleRowSelection(row, bool = false) {
      return this.$refs.grid.toggleRowSelection(row, bool);
    },
    getReqSearchCondition() {
      return this.$refs.grid.getReqSearchCondition();
    },
    beforeQuest(res) {
      const { content, totalElements } = res.data;
      const result = {
        data: {
          content,
          totalElements
        }
      };
      this.$emit('getTotalElements', { totalElements, tableName: this.tableName });
      return result;
    }
  },
  created() {}
};
</script>

<style scoped lang="scss">
</style>