xt-element-ui 1.1.0 → 1.1.2

package/src/components/table/index.vue

@@ -0,0 +1,731 @@
+<template>
+  <div class="ExTable">
+    <slot name="title">
+      <BaseFlexBox content="between" style="padding: 0 10px;">
+        <div class="small-title" style="padding: 10px; 0" v-if="title">{{ title }}</div>
+        <el-button size="small" type="primary" plain  v-if="toolExport" icon="el-icon-download" @click="exportTableData">导出</el-button>
+      </BaseFlexBox>
+    </slot>
+    <el-table
+      ref="ExtendTable"
+      v-loading="loading"
+      element-loading-text="加载中..."
+      v-bind="getAttrs()"
+      :data="spanFields ? spanTableData : tableData"
+      v-on="$listeners"
+      @current-change="rowChange"
+      @row-click="rowClick"
+      @sort-change="changeTableSort"
+      @selection-change="selectionChange"
+    >
+      <el-table-column v-if="(hasLoad || !tbId) ? expand : false" type="expand" :fixed="defaultColumnsFixed">
+        <template slot-scope="scope">
+          <slot name="expand" :scopeData="scope" :row="scope.row" :column="scope.column" :index="scope.$index" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="(hasLoad || !tbId) && showIndex"
+        type="index"
+        align="center"
+        width="80"
+        :fixed="defaultColumnsFixed?'left':null"
+        :index="showRealIndex ? realIndexRender : indexRender"
+      >
+        <template slot="header" slot-scope="scope">
+          <el-popover v-if="showColumsFilter" width="170" trigger="click" placement="bottom-start">
+            <el-checkbox-group v-model="checkedColumns" class="drop-body">
+              <el-checkbox v-for="(item,ind) in diyColumns" v-show="item.prop" :key="ind" :label="item.prop" class="checkli" @change="(v) => handleToggle(v, item)">{{ item.label }}</el-checkbox>
+            </el-checkbox-group>
+            <i slot="reference" class="el-icon-s-operation" style="cursor: pointer" title="定制列" />
+          </el-popover>
+          <div v-else>序号</div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="(hasLoad || !tbId) && selection"
+        type="selection"
+        align="center"
+        width="50"
+        :fixed="defaultColumnsFixed?'left':null"
+      >
+      </el-table-column>
+      <template v-for="(group, groupIndex) in groupColumns">
+        <el-table-column :key="`group-${groupIndex}`" v-bind="setAttrs(group)">
+          <template slot-scope="{row}"><span>{{ row[group.prop] }}</span></template>
+        </el-table-column>
+      </template>
+      <template v-for="(column, index) in tableColumns">
+        <el-table-column v-if="column.slotName ||column.formatter" :key="index" v-bind="setAttrs(column)">
+          <template slot="header" slot-scope="scope">
+            <slot :name="column.slotHeader || 'header'" :column="scope.column">
+              <span> {{ scope.column.label }}</span>
+            </slot>
+          </template>
+          <template v-if="column.slotName" slot-scope="scope">
+            <slot :name="column.slotName" :scopeData="scope" :row="scope.row" :column="scope.column" :index="scope.$index" />
+          </template>
+          <ExCell v-else :formatter="column.formatter" :index="scope.$index + startIndex" :row="scope.row" :column="column">
+          </ExCell>
+        </el-table-column>
+        <ExColumn v-else-if="column.children && column.children.length" :key="index" :column="column">
+        </ExColumn>
+        <el-table-column v-else v-bind="setAttrs(column)" :prop="column.prop" :label="column.label" :key="index">
+          <template slot="header" slot-scope="scope">
+            <slot :name="column.slotHeader || 'header'" :column="scope.column">
+              <span> {{ scope.column.label }}</span>
+            </slot>
+          </template>
+        </el-table-column>
+      </template>
+      <template v-slot:empty>
+        <div style="text-align:center" v-show="hasLoadData&&!loading">
+          <img :src="emptyIcon" height="150px" />
+          <div class="empty-title">暂无数据</div>
+          <div class="empty-subtitle">{{emptSubTitle}}</div>
+        </div>
+      </template>
+    </el-table>
+    <div ref="toolBar" class="toolBar left">
+      <slot name="pagination">
+        <BasePagination v-if="pagination" :total="total" :page-sizes="pageSizes" :is-simple="simplePage" :page-drop-show="simplePage" :page-size="pagination.PageSize" :current-page="pagination.PageNum" @current-change="pageChange" @size-change="sizeChange"></BasePagination>
+      </slot>
+    </div>
+  </div>
+</template>
+<script>
+import ExColumn from "./ExColumn";
+import ExCell from "./ExCell";
+import exportExcell from "@/views/compreSafeInsIos/mixin/exportExcell.js";
+import { GetSelfData, SaveIsShowInfo } from "@/api/compreSafeInsIos/common.js";
+export default {
+  name: "ExTable",
+  components: {
+    ExCell,
+    ExColumn
+  },
+  mixins: [exportExcell],
+  inheritAttrs: false,
+  props: {
+    tbId: {
+      type: [Number, String],
+      default: ""
+    },
+    tableData: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    height: {
+      type: [Number, String, Function],
+      default: () => null
+    },
+    elementLoadingText: {
+      type: String,
+      default: "拼命加载中"
+    },
+    headerCellStyle: {
+      type: Object,
+      default: () => {
+        return {
+          background: "#F8F8F9",
+          color: "#606266"
+        };
+      }
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    pageSizes: {
+      type: Array,
+      default: () => [20, 50, 100, 200]
+    },
+    pagination: {
+      type: Object,
+      default: null
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    // 自定义 插入列
+    insertColumns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    selectable: {
+      type: Function,
+      default() {
+        return () => true;
+      }
+    },
+    selection: {
+      type: Boolean,
+      default: false
+    },
+    showIndex: {
+      type: Boolean,
+      default: true
+    },
+    showRealIndex: {
+      type: Boolean,
+      default: true
+    },
+    expand: {
+      type: Boolean,
+      default: false
+    },
+    showColumsFilter: {
+      type: Boolean,
+      default: false
+    },
+    defaultColumnsFixed: {
+      type: Boolean,
+      default: true
+    },
+    autoSetHeight: {
+      type: Boolean,
+      default: true
+    },
+    simplePage: {
+      type: Boolean,
+      default: false
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    indexRender: Function,
+    spanFields: {
+      type: Object
+    },
+    groupColumns: { // 左侧合并分组列
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    emptyIcon: {
+      type: String,
+      default: () => {
+        return require("@/assets/images/common/noData.png");
+      }
+    },
+    title: {},
+    emptSubTitle: {},
+    toolExport: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      startIndex: 0,
+      inTableHeight: 0,
+      dropvisible: false,
+      hasLoad: false,
+      hasLoadData: false,
+      diyColumns: this.columns || [], // 自定义列数据源
+      checkedColumns: [],
+      tableColumns: []
+    };
+  },
+  computed: {
+    spanTableData() {
+      return this.calculateGroupSpans(this.tableData, this.spanFields);
+    },
+    constColums() {
+      const _isFixed = this.defaultColumnsFixed ? "left" : null;
+      const _index = { type: "index", align: "center", label: this.showColumsFilter ? "" : "序号", width: "80", fixed: _isFixed, index: this.indexRender };
+      const _selection = { type: "selection", align: "center", width: "50", fixed: _isFixed };
+      if (this.hasLoad || !this.tbId) {
+        return this.selection ? this.showIndex ? [_index, _selection] : [_selection] : (this.showIndex ? [_index] : []);
+      } else {
+        return [];
+      }
+    }
+  },
+  watch: {
+    height(val) {
+      this.changeTableHight();
+    },
+    insertColumns: {
+      deep: true,
+      handler(val) {
+        this.getTableColumns().then(list => {
+          this.diyColumns = list;
+          const _insertColumns = this.insertColumns;
+          _insertColumns.forEach(custom => {
+            list.splice(custom.insertIndex, 0, {
+              type: "custom",
+              ...custom
+            });
+          });
+          this.tableColumns = list.filter(item => (item.show === undefined ? true : item.show));
+          this.checkedColumns = this.updateCheckColumns(this.tableColumns);
+          this.changeTableHight();
+        });
+      }
+    },
+    columns: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        this.getTableColumns().then(list => {
+          this.diyColumns = list;
+          this.tableColumns = list.filter(item => (item.show === undefined ? true : item.show));
+          this.checkedColumns = this.updateCheckColumns(this.tableColumns);
+          this.changeTableHight();
+        });
+      }
+    },
+    tableData: {
+      handler(val) {
+        this.$nextTick(() => {
+          this.changeTableHight();
+          this.hasLoadData = true;
+        });
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // 表格高度自适应浏览器大小
+      this.changeTableHight();
+      if (!this.height) {
+        window.onresize = () => {
+          this.changeTableHight();
+        };
+      }
+    });
+  },
+  activated() {
+    this.doLayout();
+  },
+  beforeDestroy() {
+    document.removeEventListener("click", this.handleDocumentClick);
+  },
+  methods: {
+    realIndexRender(index) {
+      if (this.pagination) {
+        return this.pagination.PageSize * (this.pagination.PageNum - 1) + index + 1;
+      }
+      return index + 1;
+    },
+    updateCheckColumns(columnsData) {
+      const checkArr = [];
+      columnsData.forEach(item => {
+        const { prop, show } = item;
+        if (prop) {
+          const isHidden = (show !== undefined) && !show;
+          !isHidden && checkArr.push(prop);
+        }
+      });
+      return checkArr;
+    },
+    getTableColumns() {
+      const _columns = [];
+      return new Promise((resolve, reject) => {
+        if (!this.hasLoad && this.tbId) {
+          GetSelfData({
+            gridViewTypeId: this.tbId
+          }).then((res) => {
+            const { code, data } = res;
+            if (code === 200 && data.Result) {
+              const _resColumns = JSON.parse(data.Data);
+              // 解决 slotName问题 接口数据根据DATAFIELD 匹配 slotName
+              this.columns.map((item, ind) => {
+                const _fItem = _resColumns.find(it => item.prop == it.DATAFIELD);
+                if (_fItem && item.prop) {
+                  _columns.push({
+                    ...item,
+                    label: _fItem.HEADERTEXT,
+                    show: _fItem.ISSHOW || false,
+                    OrderNum: _fItem.ORDERNUM || ind
+                  });
+                } else if (item.label == "操作") {
+                  _columns.push(item);
+                } else {
+                  return item;
+                }
+              });
+              resolve(_columns.sort((pre, aft) => {
+                return pre.OrderNum - aft.OrderNum;
+              }));
+            } else {
+              resolve(this.columns);
+              this.$emit("update:showColumsFilter", false);
+            }
+            this.hasLoad = true;
+          }).catch(() => {
+            this.hasLoad = true;
+            resolve(this.columns);
+            this.$emit("update:showColumsFilter", false);
+          });
+        } else {
+          resolve(this.columns);
+          this.$emit("update:showColumsFilter", false);
+        }
+      });
+    },
+    handleDropVisible() {
+      this.dropvisible = !this.dropvisible;
+      if (this.dropvisible) {
+        document.addEventListener("click", this.handleDocumentClick);
+      } else {
+        document.removeEventListener("click", this.handleDocumentClick);
+      }
+    },
+    handleDocumentClick(event) {
+      const popoverEl = document.querySelector(".filter-tool");
+      if (!popoverEl.contains(event.target)) {
+        this.dropvisible = false;
+        document.removeEventListener("click", this.handleDocumentClick);
+      }
+    },
+    handleToggle(show, item) {
+      if (this.checkedColumns.length === 0) {
+        this.$Message.MessageWarning("至少选择一列显示！");
+        return;
+      }
+      this.$emit("update:loading", true);
+      item.show = show;
+      this.tableColumns = this.diyColumns.filter(item => (item.show === undefined ? true : item.show));
+      this.checkedColumns = this.updateCheckColumns(this.tableColumns);
+      this.dropvisible = false;
+      // 设置定制列
+      this.changeTableHight();
+      this.$nextTick(() => {
+        this.doLayout();
+      });
+      if (this.tbId) {
+        const params = {
+          dataField: item.prop,
+          isShow: show ? 1 : 0,
+          gridviewTypeId: this.tbId
+        };
+        SaveIsShowInfo(params).then((res) => {
+          const { code } = res;
+          this.$emit("update:loading", false);
+          if (code !== 200) {
+            // 取消勾选处理
+          } else {
+            this.$Message.MessageSuccess("设置成功");
+          }
+        }).catch(() => {
+          this.$emit("update:loading", false);
+        });
+      }
+    },
+    doLayout() {
+      this.$refs.ExtendTable && this.$refs.ExtendTable.doLayout();
+    },
+    getAttrs() {
+      return {
+        height: this.autoSetHeight ? this.inTableHeight : undefined,
+        border: this.border,
+        stripe: true,
+        highlightCurrentRow: true,
+        headerCellStyle: this.headerCellStyle,
+        elementLoadingText: this.elementLoadingText,
+        spanMethod: this.spanFields || this.groupColumns.length ? this.handleSpanMethod : null,
+        ...this.$attrs
+      };
+    },
+    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (this.spanFields) {
+        const field = this.spanFields[columnIndex];
+        if (field && row[`_${field}_start`]) {
+          return {
+            rowspan: row[`_${field}_span`],
+            colspan: 1
+          };
+        } else if (field && !row[`_${field}_start`]) {
+          return {
+            rowspan: 0,
+            colspan: 0
+          };
+        }
+      }
+      if (this.groupColumns.length) {
+        const leftIndex = (Number(this.selection) + Number(this.showIndex));
+        const groupColumnIndex = columnIndex - leftIndex;
+        if (columnIndex >= leftIndex && columnIndex < leftIndex + this.groupColumns.length) {
+          const groupIndex = groupColumnIndex;
+          if (groupIndex >= 0 && groupColumnIndex < this.groupColumns.length) {
+            return this.getSpan(rowIndex, groupIndex);
+          }
+        }
+        return { rowspan: 1, colspan: 1 };
+      }
+    },
+    getSpan(rowIndex, groupIndex) {
+      const spans = this.calculateSpans();
+      if (spans[rowIndex] && spans[rowIndex][groupIndex]) {
+        return spans[rowIndex][groupIndex];
+      }
+      return { rowspan: 1, colspan: 1 };
+    },
+    calculateSpans() {
+      const spans = [];
+      const rowCount = this.tableData.length;
+
+      if (rowCount === 0) return spans;
+
+      // 初始化数组
+      for (let i = 0; i < rowCount; i++) {
+        spans[i] = [];
+        for (let j = 0; j < this.groupColumns.length; j++) {
+          spans[i][j] = { rowspan: 1, colspan: 1 };
+        }
+      }
+
+      // 分级计算合并
+
+      for (let level = 0; level < this.groupColumns.length; level++) {
+        let pos = 0;
+        while (pos < rowCount) {
+          const startPos = pos;
+
+          let endPos = startPos;
+          const currentValue = this.tableData[startPos][this.groupColumns[level].prop];
+
+          // 检查上级是否相同
+
+          let sameParent = true;
+
+          for (let parentLevel = 0; parentLevel < level; parentLevel++) {
+            if (this.tableData[startPos][this.groupColumns[parentLevel].prop] !== this.tableData[endPos][this.groupColumns[parentLevel].prop]) {
+              sameParent = false;
+              break;
+            }
+          }
+
+          if (sameParent) {
+            while (endPos + 1 < rowCount && this.tableData[endPos + 1][this.groupColumns[level].prop] === currentValue && this.checkParentSame(startPos, endPos + 1, level)) {
+              endPos++;
+            }
+          }
+
+          if (endPos > startPos) {
+            spans[startPos][level].rowspan = endPos - startPos + 1;
+            for (let i = startPos + 1; i <= endPos; i++) {
+              spans[i][level].rowspan = 0;
+              spans[i][level].colspan = 0;
+            }
+          }
+
+          pos = endPos + 1;
+        }
+      }
+      return spans;
+    },
+    checkParentSame(rowIndex1, rowIndex2, currentLevel) {
+      for (let level = 0; level < currentLevel; level++) {
+        const prop = this.groupColumns[level].prop;
+        if (this.tableData[rowIndex1][prop] != this.tableData[rowIndex2][prop]) {
+          return false;
+        }
+      }
+      return true;
+    },
+    calculateGroupSpans(data, spanFields) {
+      const result = data.map(item => ({ ...item }));
+      for (const fieldIndex in spanFields) {
+        const field = spanFields[fieldIndex];
+        let currentValue = null;
+        let startIndex = 0;
+
+        result.forEach((row, index) => {
+          if (row[field] !== currentValue) {
+            currentValue = row[field];
+            startIndex = index;
+          }
+
+          row[`_${field}_span`] = 0;
+          row[`_${field}_start`] = false;
+
+          let endIndex = index;
+
+          while (endIndex + 1 < result.length && result[endIndex + 1][field] === currentValue) {
+            endIndex++;
+          }
+          if (index === startIndex) {
+            row[`_${field}_span`] = endIndex - startIndex + 1;
+            row[`_${field}_start`] = true;
+          }
+        });
+      }
+      return result;
+    },
+    changeTableHight() {
+      try {
+        if (!this.autoSetHeight) return;
+        if (this.height) {
+          // 如果有传进来高度就取消自适应
+          this.inTableHeight = (this.height - 1 - (this.title ? 40 : 0));
+          this.$nextTick(() => {
+            this.doLayout();
+          });
+          return;
+        }
+        let tableHeight = window.innerHeight || document.body.clientHeight;
+        // 高度设置
+        const disTop = this.$refs.ExtendTable.$el;
+        tableHeight -= (disTop.getBoundingClientRect().top + 20 + 1);
+        tableHeight -= this.$refs.toolBar.offsetHeight;
+        this.inTableHeight = tableHeight;
+        // 重绘表格
+        this.doLayout();
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    setAttrs(params) {
+      const { ...options } = params;
+      if (!options.align) {
+        options.align = "center";
+      }
+      // if (!options.resizable) {
+      //   options.resizable = true;
+      // }
+      if (options.showTip) {
+        options.showOverflowTooltip = true;
+      }
+      return { ...options };
+    },
+    // 排序
+    changeTableSort(column) {
+      const sortingType = column.order;
+      const sidx = sortingType ? column.prop : "";
+      let sord = "";
+      if (sortingType === "descending") {
+        sord = "desc";
+      } else if (sortingType === "ascending") {
+        sord = "asc";
+      }
+      this.$emit("changeTableSort", sidx, sord);
+    },
+    getSelection() {
+      return this.$refs.ExtendTable.store.states.selection;
+    },
+    clearSelection() {
+      this.$refs.ExtendTable.store.clearSelection();
+      this.$refs.ExtendTable.store.updateAllSelected();
+      return this;
+    },
+    toggleRowSelection(rows, selected) {
+      this.$refs.ExtendTable.toggleRowSelection(rows, true);
+    },
+    toggleRowsSelection(rows, selected) {
+      if (rows instanceof Array) {
+        rows.forEach(row => {
+          this.$refs.ExtendTable.store.toggleRowSelection(row, selected, true);
+        });
+      } else {
+        this.$refs.ExtendTable.store.toggleRowSelection(rows, selected, true);
+      }
+      this.$refs.ExtendTable.store.updateAllSelected();
+    },
+    rowChange(newVal, oldVal) {
+      this.$emit("currentChange", newVal, oldVal);
+    },
+    rowClick(row) {
+      this.$emit("rowClick", row);
+    },
+    pageChange(val) {
+      this.$emit("pageChange", val);
+    },
+    sizeChange(val) {
+      this.$emit("sizeChange", val);
+    },
+    selectionChange(selections) {
+      this.$emit("selectionChange", selections);
+    },
+    exportTableData() {
+      const title = this.title;
+      const list = [];
+      this.tableData.forEach(r => {
+        const obj = { ...r };
+        list.push(obj);
+      });
+      // 复制一份数据解决导出数据问题
+      this.doExport(list, title, null, this.column);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.toolBar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+  &.left{
+    justify-content: flex-start;
+  }
+  &.center{
+    justify-content: center;
+  }
+  &.right{
+    justify-content: flex-end;
+  }
+  /deep/.pagination {
+    padding: 15px 10px;
+    width: 100%;
+    // background-color: #ffffff;
+  }
+}
+.drop-body{
+  height: 175px;
+  overflow: hidden auto;
+  .checkli{
+    padding: 5px;
+    display: block;
+  }
+}
+.empty{
+  &-title{
+    font-size: 16px;
+    color: #333333;
+  }
+  &-subtitle{
+    font-size: 12px;
+    color: #999999;
+  }
+}
+@mixin setColorType($color) {
+  color:  $color;
+  &.effect-light{
+    background-color: rgba($color: $color, $alpha: .2);
+  }
+  &.effect-dark{
+    color: #ffffff;
+    background-color: $color;
+  }
+}
+
+/deep/.el-table__cell,/deep/.el-table__row{
+  &.warn{
+    @include setColorType($darkWarning);
+  }
+  &.error{
+    @include setColorType($darkDanger);
+  }
+  &.info{
+    @include setColorType($darkPrimary);
+  }
+  &.success{
+    @include setColorType($darkSuccess);
+  }
+}
+</style>