@v2coding/ui 0.1.4 → 0.1.8

package/src/components/table/table.vue

@@ -1,807 +0,0 @@
-<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>
-    <fill-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>
-    </fill-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 FillView from '../fill-view/fill-view';
-  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: {
-      FillView,
-      RemoteExportsDialog,
-      Refresh: {
-        render(createElement) {
-          return createElement('el-tooltip', {props: {content: '刷新'}}, [
-              createElement('el-button', {
-                props: {icon: 'el-icon-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-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-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/svg/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>