@v2coding/ui 0.1.0

package/src/components/table/table.vue

@@ -0,0 +1,805 @@
+<template>
+  <div class="ui-table" v-loading="realLoading">
+    <div class="ui-table-select-bar" v-show="hasSearchBar && searchBarVisible">
+      <slot name="search-bar"/>
+    </div>
+    <div class="ui-table-tool-bar" v-if="hasToolbar">
+      <slot name="tool-bar"/>
+    </div>
+    <div v-if="hasAlert" class="ui-table-alert">
+      <i class="el-icon-info"></i>
+      <slot name="alert">
+        已选择 {{ selection.length }} 条.
+        <el-button type="text" @click="clearSelection">清空</el-button>
+      </slot>
+    </div>
+    <div style="position: relative;z-index: 1;">
+      <div v-if="privateTools && privateTools.length > 0" class="private-tools">
+        <div v-for="(tool, i) in privateTools" :key="i" class="tool">
+          <component :is="tool"></component>
+        </div>
+      </div>
+    </div>
+    <flex-scroll-view>
+      <el-table
+        ref="table"
+        height="100%"
+        :data="realData"
+        :border="border"
+        :class="tableCls"
+        v-bind="$attrs"
+        v-on="$listeners"
+        @selection-change="onSelectionChange"
+        @row-click="onRowClick"
+        @row-dblclick="onRowDblClick"
+        @cell-dblclick="onCellDbClick"
+        @select-all="onSelectAll"
+        @select="onSelect"
+      >
+        <slot></slot>
+        <component v-for="(column, i) in columns" :key="i" :is="column.componentName || 'ui-table-column'" v-bind="column" v-on="column.listeners"></component>
+        <template v-slot:empty>
+          <div class="ui-table-empty">暂无数据</div>
+        </template>
+      </el-table>
+    </flex-scroll-view>
+    <div v-show="hasPagination" class="footer-bar">
+      <slot name="footer-bar"/>
+    </div>
+    <remote-exports-dialog :visible.sync="exportsVisible" :current-page="remoteData && remoteData.no" :total-page="remoteData && remoteData.totalPages" v-bind-table:table @exports="onRemoteExports"/>
+  </div>
+</template>
+<script>
+  import ExportsMixin from '../exports/mixin';
+  import RemoteExportsDialog from '../exports/remote-exports-dialog';
+
+  let tableIdSeed = 1;
+
+  export default {
+    name: 'ui-table',
+    provide() {
+      return {
+        uiTable: this,
+      };
+    },
+    mixins: [ExportsMixin],
+    props: {
+      url: String,
+      data: Array,
+      params: {
+        type: Object,
+        default: () => ({}),
+      },
+      loading: Boolean,
+      searchBarInitVisible: {
+        type: Boolean,
+        default: true,
+      },
+      initLoad: {
+        type: Boolean,
+        default: true,
+      },
+      showButton: {
+        type: Boolean,
+        default: true,
+      },
+      alert: Boolean,
+      privateTools: {
+        type: Array,
+        default() {
+          // return ['refresh', 'columns'];
+          return ['columns'];
+        },
+      },
+      columns: Array,
+      border: {
+        type: Boolean,
+        default: false,
+      },
+      tableCls: String,
+      editValid: {
+        type: Function,
+        default: () => void 0,
+      },
+      editCellValid: {
+        type: Function,
+        default: () => void 0,
+      },
+      selectionMode: {
+        type: String,
+        validator: (val) => ['single', 'multiple'].includes(val),
+        default: 'single',
+      },
+      onSelect: {
+        type: Function,
+        default: () => void 0,
+      },
+      changeLoadedData: {
+        type: Function,
+        default: (res) => res,
+      },
+      rowSelect: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    data() {
+      this.tablePageParams = {}; // tablePageParams 不用监听
+      return {
+        selection: [],
+        cols: [],
+        remoteData: null,
+        searchBar: null,
+        pagination: null,
+        remoteLoading: false,
+        exportsVisible: false,
+        searchBarVisible: this.searchBarInitVisible,
+        isTree: false, // 当前 table 是否含有 tree 列(用于: 含有 tree 时所有的列取消排序)
+        editData: null,
+        editPosition: null,
+      };
+    },
+    computed: {
+      hasSearchBar() {
+        return !!this.searchBar;
+      },
+      hasToolbar() {
+        if (this.showButton === false) {
+          return false;
+        }
+        return !!this.$scopedSlots['tool-bar'];
+      },
+      hasAlert() {
+        if (!this.alert) {
+          return false;
+        }
+        return !!this.cols.find((column) => column.type === 'selection');
+      },
+      hasPagination() {
+        return !!this.pagination;
+      },
+      realData() {
+        if (this.remoteData) {
+          if (this.hasPagination) {
+            return this.remoteData.data;
+          }
+          return this.remoteData;
+        }
+        return this.data;
+      },
+      realLoading() {
+        if (this.loading) {
+          return true;
+        }
+        return this.remoteLoading;
+      },
+      controlColumns() {
+        return this.cols.filter((column) => !['selection', 'action'].includes(column.type));
+      },
+    },
+    watch: {
+      url() {
+        this.reload();
+      },
+      params() {
+        this.reload();
+      },
+      async realData() {
+        await this.$nextTick();
+        setTimeout(() => {
+          this.doLayout();
+        }, 200);
+      },
+    },
+    created() {
+      this.uiTableId = 'ui-table_' + tableIdSeed++;
+      this.listeners = {
+        func: () => void 0,
+        register: (func) => {
+          this.listeners.func = func;
+        },
+        trigger: (...args) => {
+          this.listeners.func(...args);
+        },
+      };
+    },
+    mounted() {
+      this.init();
+      this.$root.$on('resize', this.onResize);
+      this.onResize();
+    },
+    beforeDestroy() {
+      this.$root.$off('resize', this.onResize);
+    },
+    methods: {
+      getExported() {
+        return {
+          // table methods
+          clearSelection: this.$refs.table.clearSelection,
+          toggleRowSelection: this.$refs.table.toggleRowSelection,
+          toggleAllSelection: this.$refs.table.toggleAllSelection,
+          toggleRowExpansion: this.$refs.table.toggleRowExpansion,
+          setCurrentRow: this.$refs.table.setCurrentRow,
+          clearSort: this.$refs.table.clearSort,
+          clearFilter: this.$refs.table.clearFilter,
+          doLayout: this.$refs.table.doLayout,
+          sort: this.$refs.table.sort,
+          // current component methods
+          reload: this.reload,
+          getSelection: this.getSelection,
+          getColumns: this.getColumns,
+          editRow: this.editRow,
+        };
+      },
+      init() {
+        if (this.hasSearchBar) {
+          // 在 searchBar 中执行加载数据方法
+          return;
+        }
+        this.initLoad && this.reload();
+      },
+      onResize() {
+        this.doLayout();
+      },
+      resetTableParams() {
+        this.initPaginationParams();
+      },
+      changePage(params = {}) {
+        this.tablePageParams = params;
+        this.reload();
+      },
+      reload(params) {
+        if (!this.url) {
+          return;
+        }
+        if (this.remoteLoading) {
+          return;
+        }
+        this.fetchData(params).then((res) => {
+          if (this.hasPagination) {
+            const { data, totalPages, no } = res;
+            if (Array.isArray(data) && data.length <= 0 && no !== 1) {
+              this.tablePageParams.no = totalPages;
+              this.reload(params);
+              return;
+            }
+          }
+          this.remoteData = this.changeLoadedData(res);
+          this.$emit('loaded', res);
+        });
+      },
+      getSelection() {
+        return this.selection;
+      },
+      getColumns() {
+        return this.$refs.table.columns.map(column => column.property).filter(Boolean);
+      },
+      getHeaders() {
+        const getAllHeaders = (columns, parents = []) => {
+          return columns.reduce((headers, column) => {
+            if (column.children) {
+              const _parents = [...parents];
+              column.label && _parents.push(column.label);
+              headers.push(...getAllHeaders(column.children, [..._parents]));
+            } else {
+              column.property && column.label && headers.push([...parents, column.label]);
+            }
+            return headers;
+          }, []);
+        };
+        return getAllHeaders(this.$refs.table.store.states.originColumns);
+      },
+      getSearchParams() {
+        if (this.searchBar) {
+          return this.searchBar.getSearchParams();
+        }
+        return {};
+      },
+      doLayout() {
+        this.$refs.table && this.$refs.table.doLayout();
+      },
+      setCurrentRow(row) {
+        this.$refs.table.setCurrentRow(row);
+      },
+      editRow(index) {
+        const editable = this.cols.some(col => col.editable);
+        if (!editable) {
+          return;
+        }
+        const rowData = this.$refs.table.tableData[index];
+        this.editData = JSON.parse(JSON.stringify(rowData));
+        this.editPosition = {
+          rowIndex: index,
+        };
+      },
+      /**
+       * @private
+       */
+      fetchData(params) {
+        this.remoteLoading = true;
+        const searchParams = this.getSearchParams();
+        return this.$axios.get(this.url, {
+          params: Object.assign({}, this.tablePageParams, searchParams, this.params, params || {}),
+          ...(this.hasPagination ? {} : {fallback: Array}), // list table 期望返回数组(网络请求错误时默认期望返回 Result)
+        }).then((r) => {
+          this.remoteLoading = false;
+          if (r.success) {
+            return Promise.resolve(r.data);
+          }
+          return Promise.resolve(this.hasPagination ? {no: 1, size: 0, data: [], total: 0, totalPages: 1} : []);
+        }).catch(() => {
+          this.remoteLoading = false;
+          return Promise.resolve(this.hasPagination ? {no: 1, size: 0, data: [], total: 0, totalPages: 1} : []);
+        });
+      },
+      /**
+       * @private
+       */
+      registerSearchBar(searchBar) {
+        this.searchBar = searchBar;
+      },
+      /**
+       * @private
+       */
+      registerPagination(pagination) {
+        this.pagination = pagination;
+        this.initPaginationParams();
+      },
+      /**
+       * @private
+       */
+      unRegisterPagination() {
+        this.removePaginationParams();
+        this.pagination = null;
+      },
+      /**
+       * @private
+       */
+      initPaginationParams() {
+        if (!this.pagination) {
+          return;
+        }
+        this.tablePageParams = this.pagination.getInitParams();
+      },
+      removePaginationParams() {
+        if (!this.pagination) {
+          return;
+        }
+        this.tablePageParams = {};
+      },
+      /**
+       * @private
+       */
+      clearSelection() {
+        this.$refs.table.clearSelection();
+      },
+      /**
+       * Events
+       */
+      toggleSearchBarVisible() {
+        this.searchBarVisible = !this.searchBarVisible;
+      },
+      toggleControlColumn(i) {
+        const column = this.controlColumns[i];
+        if (!column) {
+          return;
+        }
+        column.visible = !column.visible;
+      },
+      onSelectionChange(selection) {
+        let selects = selection;
+        if (this.selectionMode === 'single') {
+          const tableStoreStates = this.$refs.table.store.states;
+          const isAllSelected = tableStoreStates.isAllSelected;
+          const tableSelection = tableStoreStates.selection;
+          if (isAllSelected && (tableStoreStates.data || []).length === tableStoreStates.selection.length) {
+            selects = [];
+            selection.forEach(row => {
+              const i = tableSelection.indexOf(row);
+              i !== -1 && tableSelection.splice(i, 1);
+              this.$refs.table.toggleRowSelection(row, false);
+            });
+          } else {
+            selects = selection.slice(selection.length - 1, selection.length);
+            selection.slice(0, selection.length - 1).forEach(row => {
+              const i = tableSelection.indexOf(row);
+              i !== -1 && tableSelection.splice(i, 1);
+              this.$refs.table.toggleRowSelection(row, false);
+            });
+          }
+        }
+        this.selection = selects;
+      },
+      onRowClick(row) {
+        if (!this.rowSelect) {
+          return;
+        }
+        const currentRowIndex = this.$refs.table.tableData.indexOf(row);
+        if (this.editPosition && this.editPosition.rowIndex === currentRowIndex) {
+          return;
+        }
+        this.$refs.table.toggleRowSelection(row);
+      },
+      onRowDblClick(row) {
+        this.$emit('select-change', [row]);
+      },
+      onCellDbClick(row, column) {
+        const col = this.cols.find(c => c.columnId === column.id);
+        if (!col.editable) {
+          return;
+        }
+        const currentRowIndex = this.$refs.table.tableData.indexOf(row);
+        // row edit
+        if (this.editPosition && !this.editPosition.columnId && this.editPosition.rowIndex === currentRowIndex) {
+          return;
+        }
+        if (this.editPosition && this.editPosition.rowIndex === currentRowIndex && this.editPosition.columnId === column.id) {
+          return;
+        }
+        this.editPosition = {
+          rowIndex: currentRowIndex,
+          columnId: column.id,
+          prop: column.property,
+        };
+        this.editData = JSON.parse(JSON.stringify(row));
+      },
+      onSelectAll() {
+        if (this.selectionMode === 'single') {
+          this.$refs.table.clearSelection();
+        }
+      },
+      /**
+       * @private
+       */
+      addColumn(column) {
+        const isAdded = this.cols.some((c) => c.id === column.id);
+        if (isAdded) {
+          return;
+        }
+        this.cols.push(Object.freeze({
+          id: column.id,
+          type: column.type,
+          label: column.label,
+          visible: column.visible !== false,
+          editable: column.editable,
+          instance: column.instance,
+          columnId: '',
+        }));
+        if (column.type === 'tree') {
+          this.isTree = true;
+        }
+      },
+      removeColumn(columnId) {
+        const index = this.cols.findIndex((c) => c.id === columnId);
+        if (index === -1) {
+          return;
+        }
+        this.cols.splice(index, 1);
+      },
+      updateColumnId(id, columnId) {
+        const index = this.cols.findIndex((c) => c.id === id);
+        if (index === -1) {
+          return;
+        }
+        this.cols.splice(index, 1, Object.freeze({...this.cols[index], columnId}));
+      },
+      updateColumnVisible(id, visible) {
+        const index = this.cols.findIndex((c) => c.id === id);
+        if (index === -1) {
+          return;
+        }
+        this.cols.splice(index, 1, Object.freeze({...this.cols[index], visible}));
+      },
+      /**
+       * @private
+       */
+      getVisible(id) {
+        const column = this.cols.find((column) => column.id === id);
+        if (!column) {
+          return true;
+        }
+        return column.visible !== false;
+      },
+      getTableDom() {
+        const table = this.$el.querySelector('.el-table').cloneNode(true);
+        table.querySelector('.el-table__fixed').remove(); // 删除左边fixed
+        table.querySelector('.el-table__fixed-right').remove(); // 删除右边fixed
+        Array.from(table.querySelectorAll('.ui-table-column-action')).forEach(node => node.remove()); // 删除操作列
+        Array.from(table.querySelectorAll('.ui-table-column-selection')).forEach(node => node.remove()); // 删除选择列
+        return table;
+      },
+      cancelEdit() {
+        this.editData = null;
+        this.editPosition = null;
+      },
+      saveEdit() {
+        const valid = this.editValid(this.editData);
+        if (valid === false) {
+          return;
+        }
+        this.$emit('edit-row', this.editData);
+        this.$refs.table.tableData.splice(this.editPosition.rowIndex, 1, this.editData);
+        this.cancelEdit();
+      },
+      saveEditCell() {
+        const columnProp = this.editPosition.prop;
+        const originalValue = this.$refs.table.tableData[this.editPosition.rowIndex][columnProp];
+        const cellValue = this.editData[columnProp];
+        if (originalValue === cellValue) {
+          this.cancelEdit();
+          return;
+        }
+        const valid = this.editCellValid(cellValue, this.editData, columnProp);
+        if (valid === false) {
+          return;
+        }
+        this.$emit('edit-cell', cellValue, this.editData, columnProp);
+        this.$refs.table.tableData.splice(this.editPosition.rowIndex, 1, this.editData);
+        this.cancelEdit();
+      },
+      exportEntity(url = '', filename = '文件.xlsx') {
+        if (!url) {
+          console.error(`请指定 export api 请求地址`);
+          return;
+        }
+
+        const searchParams = this.getSearchParams();
+        const columns = this.getColumns();
+        const headers = this.getHeaders();
+        this.$axios.download(url, filename, {params: {...searchParams, columns: columns.join(','), headers: JSON.stringify(headers)}});
+      },
+      exportsLocal(filename) {
+        if (!this.$refs.table) {
+          return;
+        }
+        return this.exportsTable(filename, this.$refs.table);
+      },
+      exportsRemote(filename) {
+        this.exportsVisible = true;
+        this.listeners.register((params) => {
+          const {start, end, columns} = params;
+          const loading = this.$loading({
+            lock: true,
+            text: 'Loading',
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)',
+          });
+          const searchParams = this.getSearchParams();
+          const requestParams = {...searchParams, no: 1, size: end * this.tablePageParams.size};
+          this.$axios.get(this.url, {params: requestParams}).then(result => {
+            loading.close();
+            const {data = []} = result.data || {};
+            const list = data.slice((start - 1) * this.tablePageParams.size);
+            this.exports(list, filename, columns);
+          }).catch(() => {
+            loading.close();
+            this.$message.error('导出失败');
+          });
+        });
+      },
+      onRemoteExports(params) {
+        this.listeners.trigger(params);
+      },
+      // print() {
+      //   this.$print(this.getTableDom());
+      // },
+      // excel() {
+      //   const wb = XLSX.utils.table_to_book(this.getTableDom());
+      //   const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'});
+      //   try {
+      //     FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), 'sheetjs.xlsx');
+      //   } catch (e) {
+      //     console.error(e, wbout);
+      //   }
+      //   return wbout;
+      // },
+    },
+    components: {
+      RemoteExportsDialog,
+      Refresh: {
+        render(createElement) {
+          return createElement('el-tooltip', {props: {content: '刷新'}}, [
+              createElement('el-button', {
+                props: {icon: 'el-icon-fa-refresh', size: 'mini', circle: true},
+                on: {click: this.$parent.reload},
+              }),
+          ]);
+        },
+      },
+      Exports: {
+        render(createElement) {
+          return createElement('el-tooltip', {props: {content: '导出Excel'}}, [
+              createElement('el-button', {
+                props: {icon: 'el-icon-fa-cloud-download', size: 'mini', circle: true},
+                on: {click: this.$parent.exportsRemote},
+              }),
+          ]);
+        },
+      },
+      Columns: {
+        render(createElement) {
+          const {controlColumns, updateColumnVisible} = this.$parent;
+          // 非固定宽度列
+          const scalableColumns = controlColumns.filter(col => {
+            const colInstance = col.instance;
+            return !colInstance.realWidth && colInstance.minWidth && !colInstance.realFixed;
+          });
+          const visibleScalableColumns = scalableColumns.filter(c => c.visible);
+          let disabledColumn;
+          if (visibleScalableColumns.length <= 1) {
+            disabledColumn = visibleScalableColumns[0];
+          }
+          // 通过其它方式把 非固定宽度列 全部隐藏. 这里需要满足至少展示一个 非固定宽度列
+          if (visibleScalableColumns.length <= 0) {
+            const defaultVisibleColumn = scalableColumns[0]
+            defaultVisibleColumn && updateColumnVisible(defaultVisibleColumn.id, true);
+          }
+          return createElement('el-dropdown', {props: {trigger: 'click', hideOnClick: false}}, [
+              createElement('el-tooltip', {props: {content: '设置显示列'}}, [
+                  createElement('el-button', {props: {icon: 'el-icon-more', circle: true, size: 'mini'}})
+              ]),
+              createElement('el-dropdown-menu', {slot: 'dropdown'}, controlColumns.map((column, i) => {
+                return createElement('el-dropdown-item', {key: i}, [
+                    createElement('el-checkbox', {
+                      props: {value: column.visible, disabled: column === disabledColumn},
+                      on: {
+                        input: () => {
+                          updateColumnVisible(column.id, !column.visible);
+                          this.$parent.$nextTick(() => {
+                            this.$parent.doLayout();
+                          });
+                        },
+                      },
+                    }, [
+                        createElement('span', {attrs: {class: 'column-label'}}, [column.label]),
+                    ]),
+                ]);
+              })),
+          ]);
+        },
+      },
+      Search: {
+        render(createElement) {
+          if (!this.$parent.hasSearchBar) {
+            return null;
+          }
+          return createElement('el-tooltip', {props: {content: this.$parent.searchBarVisible ? '隐藏查询区域' : '显示查询区域'}}, [
+              createElement('el-button', {
+                props: {icon: 'el-icon-fa-search', circle: true},
+                on: {click: this.$parent.toggleSearchBarVisible},
+              }),
+          ]);
+        },
+      },
+    },
+  };
+</script>
+<style lang="less">
+  .ui-table {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    z-index: 0;
+    background-color: #fff;
+    padding: 15px 20px;
+
+    .ui-table-select-bar {
+      flex: none;
+
+      .ui-table-select {
+        position: relative;
+        padding-right: 100px;
+
+        &.has-reset {
+          padding-right: 200px;
+        }
+
+        .submit-item {
+          position: absolute;
+          top: 0;
+          right: 0;
+          margin-right: 0;
+          margin-bottom: 0;
+        }
+      }
+
+      .el-input {
+        width: 200px;
+      }
+    }
+
+    .ui-table-tool-bar {
+      padding: 10px 0;
+      flex: none;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      flex-direction: row;
+      background-color: #fff;
+    }
+
+    .private-tools {
+      z-index: 1;
+      position: absolute;
+      top: 8px;
+      right: 5px;
+      display: flex;
+      flex-direction: row;
+      padding-left: 20px;
+
+      .tool + .tool {
+        margin-left: 5px;
+      }
+
+      .el-button.el-tooltip {
+        background: rgba(255, 255, 255, 0.6);
+        backdrop-filter: blur(3px);
+        box-shadow: 0 0 3px #999;
+      }
+    }
+
+    .ui-table-alert {
+      margin-bottom: 10px;
+      border: 1px solid #b3d8ff;
+      background-color: #ecf5ff;
+      border-radius: 3px;
+      padding: 8px 10px;
+
+      .el-icon-info {
+        color: #409eff;
+        margin-right: 6px;
+      }
+
+      .el-button--text {
+        padding: 0;
+        margin-left: 10px;
+      }
+    }
+
+    .el-table {
+      flex: 1;
+      border: 1px solid #EBEEF5;
+      border-bottom: none;
+      z-index: 0;
+    }
+
+    .footer-bar {
+      flex: none;
+      display: block;
+      padding: 20px 15px 15px;
+      background-color: #fff;
+
+      .el-pagination {
+        text-align: right;
+        padding: 0;
+      }
+    }
+
+    .ui-table-empty {
+      padding-top: 110px;
+      background: url("../../../assets/img/empty.svg") center top no-repeat;
+      background-size: auto 100px;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 14px;
+      line-height: 22px;
+      text-align: center;
+    }
+  }
+
+  .column-label {
+    width: 80px;
+    display: inline-block;
+    vertical-align: middle;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-table-column-action {
+    .el-button {
+      box-shadow: none;
+      padding: 0;
+      line-height: inherit;
+    }
+  }
+</style>