@web-utils/component 2.0.13 → 2.2.0

package/dist/components/pageable-table/index.js

@@ -1,496 +0,0 @@
-import { cloneDeep, merge, hasOwn } from "@web-utils/core";
-import { f as filterTableColumnProperties, d as filterTableProperties, e as filterTableEvents } from "../../chunks/c69d5628.js";
-import { n as normalizeComponent } from "../../chunks/3d28cc08.js";
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    class: ["pageable-table", {
-      "auto-height": _vm.autoHeight
-    }]
-  }, [_c("div", {
-    staticClass: "pageable-table-wrapper"
-  }, [_vm._t("toolbar"), _c("ElTable", _vm._g(_vm._b({
-    ref: "table",
-    class: ["flex-item", {
-      "header-bold": _vm.headerBold
-    }],
-    attrs: {
-      "data": _vm.records,
-      "border": _vm.border
-    },
-    on: {
-      "hook:updated": _vm.updateTableScrollPosition,
-      "sort-change": _vm.onSortChange,
-      "row-dblclick": _vm.rowDbClick,
-      "current-change": _vm.onCurrentChange
-    },
-    scopedSlots: _vm._u([{
-      key: "empty",
-      fn: function() {
-        return [_vm._t("empty", function() {
-          return [_vm.tableStatus === _vm.TABLE_STATUS.loading ? [_c("span", {
-            staticClass: "pageable-table-loading"
-          }, [_c("i", {
-            staticClass: "table-status-icon el-icon-loading"
-          }), _vm._v(" 加载中...")])] : _vm.tableStatus === _vm.TABLE_STATUS.error ? [_c("ElButton", {
-            staticClass: "pageable-table-error",
-            attrs: {
-              "icon": "table-status-icon fa fa-frown-o"
-            },
-            on: {
-              "click": _vm.refresh
-            }
-          }, [_vm._v(" 加载失败，点击重试！ ")])] : [_vm._v(" 暂无数据 ")]];
-        })];
-      },
-      proxy: true
-    }, {
-      key: "append",
-      fn: function() {
-        return [_vm._t("append")];
-      },
-      proxy: true
-    }], null, true)
-  }, "ElTable", _vm.filterTableProperties(_vm.mergeAttrs), false), _vm.filterTableEvents(_vm.$listeners)), [_vm.multiple && _vm.selection ? _c("TableColumn", {
-    key: "multiple",
-    attrs: {
-      "type": "selection",
-      "width": "45",
-      "align": "center"
-    }
-  }) : _vm._e(), !_vm.multiple && _vm.selection ? _c("TableColumn", {
-    key: "single",
-    attrs: {
-      "type": "single-selection",
-      "class-name": "single-select-column",
-      "width": "45",
-      "align": "center"
-    },
-    scopedSlots: _vm._u([{
-      key: "header",
-      fn: function() {
-        return [_c("ElRadio", {
-          attrs: {
-            "value": !!_vm.currentRow,
-            "label": true
-          }
-        }, [_c("span")])];
-      },
-      proxy: true
-    }, {
-      key: "default",
-      fn: function(_ref) {
-        var row = _ref.row;
-        return [_c("ElRadio", {
-          attrs: {
-            "label": true,
-            "value": _vm.currentRow && _vm.currentRow[_vm.$attrs["row-key"] || "id"] === row[_vm.$attrs["row-key"] || "id"]
-          }
-        }, [_c("span")])];
-      }
-    }], null, false, 307797321)
-  }) : _vm._e(), _vm.index ? _c("TableColumn", {
-    key: "order",
-    attrs: {
-      "type": "index",
-      "label": "序号",
-      "width": _vm.indexWidth,
-      "align": "center"
-    },
-    scopedSlots: _vm._u([{
-      key: "default",
-      fn: function(_ref2) {
-        var $index = _ref2.$index;
-        return [_vm._v(" " + _vm._s((_vm.page.page - 1) * _vm.page.limit + $index + 1 || $index + 1) + " ")];
-      }
-    }], null, false, 4238275121)
-  }) : _vm._e(), _vm._t("default", function() {
-    return [_vm.columns && _vm.columns.length ? _vm._l(_vm.headers, function(item, headerIndex) {
-      return _c("TableColumn", _vm._b({
-        key: `${item.prop}-${headerIndex}`
-      }, "TableColumn", item, false));
-    }) : _c("TableColumn", {
-      attrs: {
-        "label": "点击表格行复制模板"
-      },
-      scopedSlots: _vm._u([{
-        key: "default",
-        fn: function(_ref3) {
-          var row = _ref3.row;
-          return [_c("pre", {
-            staticClass: "pointer"
-          }, [_vm._v(_vm._s(JSON.stringify(row, null, "	")))])];
-        }
-      }])
-    })];
-  })], 2), _c("ElPagination", {
-    staticClass: "flex-not-shrink",
-    attrs: {
-      "current-page": _vm.page.page,
-      "hide-on-single-page": _vm.hideOnSinglePage,
-      "page-size": _vm.page.limit,
-      "total": _vm.page.total,
-      "background": "",
-      "layout": "total, prev, pager, next, jumper"
-    },
-    on: {
-      "current-change": function(curPage) {
-        _vm.page.page = curPage;
-      }
-    }
-  })], 2)]);
-};
-var staticRenderFns = [];
-const PageableTable_vue_vue_type_style_index_0_lang = "";
-const TABLE_STATUS = {
-  loading: 1,
-  error: -1,
-  empty: 2,
-  success: 0
-};
-const __vue2_script = {
-  name: "PageableTable",
-  bus: {
-    reloadTableView(viewId) {
-      if (viewId === this.viewId) {
-        this.getPage();
-      }
-    }
-  },
-  inheritAttrs: false,
-  props: {
-    viewId: {
-      type: String
-    },
-    url: {
-      type: String
-    },
-    httpGet: Boolean,
-    hideOnSinglePage: Boolean,
-    api: {
-      type: Function
-    },
-    filters: {
-      type: Object
-    },
-    filter: {
-      type: Object
-    },
-    rules: {
-      type: Array,
-      default: () => []
-    },
-    model: {
-      type: Object
-    },
-    ascs: {
-      type: String,
-      default: ""
-    },
-    descs: {
-      type: String,
-      default: ""
-    },
-    headerBold: Boolean,
-    autoHeight: Boolean,
-    immediate: {
-      type: Boolean,
-      default: true
-    },
-    index: {
-      type: Boolean,
-      default: true
-    },
-    multiple: {
-      type: Boolean,
-      default: true
-    },
-    selection: {
-      type: Boolean,
-      default: true
-    },
-    border: {
-      type: Boolean,
-      default: true
-    },
-    reloadOnModelChange: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      type: Array
-    },
-    pageSize: {
-      type: Number,
-      default: 25
-    }
-  },
-  data() {
-    let filters = { rules: [] };
-    if (this.rules && this.rules.length > 0) {
-      filters.rules = this.rules;
-    }
-    if (this.filters) {
-      filters = this.filters;
-    }
-    if (this.filter) {
-      filters = Object.assign({}, filters, this.filter);
-    }
-    let model = {};
-    if (this.model) {
-      model = cloneDeep(this.model);
-    }
-    const limit = this.pageSize;
-    return {
-      TABLE_STATUS: Object.freeze(TABLE_STATUS),
-      tableStatus: TABLE_STATUS.empty,
-      records: [],
-      currentRow: null,
-      page: {
-        total: 0,
-        page: 1,
-        limit,
-        ascs: this.ascs,
-        descs: this.descs,
-        model,
-        filters
-      }
-    };
-  },
-  computed: {
-    guard() {
-      if (this.reloadOnModelChange) {
-        return {
-          asc: this.page.ascs,
-          desc: this.page.descs,
-          page: this.page.page,
-          model: this.page.model,
-          filters: this.page.filters
-        };
-      } else {
-        return {
-          asc: this.page.ascs,
-          desc: this.page.descs,
-          page: this.page.page,
-          filters: this.page.filters
-        };
-      }
-    },
-    method() {
-      return this.httpGet ? httpGet : httpPost;
-    },
-    indexWidth() {
-      const indexStr = `${(this.page.page - 1) * this.page.limit + this.records.length}`;
-      if (indexStr.length > 3) {
-        return 50 + (indexStr.length - 3) * 10;
-      } else {
-        return 50;
-      }
-    },
-    mergeAttrs() {
-      return merge({}, this.$attrs, { height: this.autoHeight ? null : "auto" });
-    },
-    headers() {
-      var _a;
-      return ((_a = this.columns) == null ? void 0 : _a.map(filterTableColumnProperties)) || [];
-    }
-  },
-  watch: {
-    url: { handler: "reload" },
-    api: { handler: "reload" },
-    "$attrs.data"() {
-      this.getPage();
-    },
-    model: {
-      deep: true,
-      handler(newVal) {
-        this.setModel(newVal);
-      }
-    }
-  },
-  created() {
-    this.$watch(() => this.guard, this.getPage, {
-      deep: true,
-      immediate: this.immediate
-    });
-  },
-  mounted() {
-    this.$refs.table.bodyWrapper.addEventListener("scroll", this.onTableScroll);
-  },
-  beforeDestroy() {
-    this.$refs.table.bodyWrapper.removeEventListener("scroll", this.onTableScroll);
-  },
-  methods: {
-    rowDbClick(...args) {
-      var _a;
-      const body = this.$refs.table.$children.find((value) => {
-        var _a2;
-        return ((_a2 = value.$options) == null ? void 0 : _a2.name) === "ElTableBody";
-      });
-      if (body) {
-        (_a = body.$refs.tooltip) == null ? void 0 : _a.hide();
-      }
-      this.$emit("row-dblclick", ...args);
-    },
-    async updateTableScrollPosition() {
-      if (this.$refs.table.bodyWrapper) {
-        this.scrollTo(this.tableScrollTop, this.tableScrollLeft);
-      }
-    },
-    filterTableProperties,
-    filterTableEvents,
-    filterTableColumnProperties,
-    onTableScroll() {
-      this.tableScrollTop = this.$refs.table.bodyWrapper.scrollTop;
-      this.tableScrollLeft = this.$refs.table.bodyWrapper.scrollLeft;
-    },
-    onSortChange({
-      prop,
-      order
-    }) {
-      this.page.ascs = order === "ascending" ? prop : "";
-      this.page.descs = order === "descending" ? prop : "";
-    },
-    onCurrentChange(currentRow) {
-      this.currentRow = currentRow;
-    },
-    addRule(rule) {
-      this.removeRule(rule.field);
-      this.page.filters.rules.push(rule);
-    },
-    addRules(rules) {
-      rules.forEach((value) => this.addRule(value));
-    },
-    setModelField(field, value) {
-      this.$set(this.page.model, field, value);
-    },
-    setModel(model) {
-      this.page.page = 1;
-      this.page.model = cloneDeep(model);
-    },
-    deleteModelField(field) {
-      delete this.page.model[field];
-    },
-    removeRule(field) {
-      const rules = this.page.filters.rules;
-      const index = rules.findIndex((value) => value.field === field);
-      if (index > -1) {
-        rules.splice(index, 1);
-      }
-    },
-    addFilter({
-      field,
-      op,
-      value
-    }) {
-      this.page.filters = Object.assign({}, this.page.filters, {
-        rules: [{
-          field,
-          op,
-          value
-        }],
-        op: "and"
-      });
-    },
-    clearFilters() {
-      this.page.filters = {};
-    },
-    clearSelection() {
-      this.$refs.table.clearSelection();
-    },
-    search() {
-      this.setModel(this.model);
-      this.getPage();
-    },
-    async getPage() {
-      var _a;
-      if (hasOwn(this.$attrs, "data")) {
-        this.records = this.$attrs.data;
-        this.page.page = 1;
-        this.page.total = this.records.length;
-        this.page.limit = this.page.total;
-        return;
-      }
-      this.records = [];
-      let res;
-      const { filters, ...rest } = this.page;
-      const page = { ...rest };
-      if ((_a = filters == null ? void 0 : filters.rules) == null ? void 0 : _a.length) {
-        page.filters = { rules: filters.rules };
-      }
-      if (this.api || this.url) {
-        this.tableStatus = TABLE_STATUS.loading;
-        try {
-          if (this.api) {
-            res = await this.api(page);
-          }
-          if (this.url) {
-            res = await this.method(this.url, page);
-          }
-        } catch (e) {
-          this.tableStatus = TABLE_STATUS.error;
-          console.error(e);
-          return;
-        }
-      } else {
-        this.$notify.warning({
-          title: "开发提示！",
-          message: "PageableTable 请提供 url(String) 或 api(Function) 属性"
-        });
-        return;
-      }
-      const { data } = res || {};
-      const { total, records } = data || {};
-      this.page.total = Number(total);
-      this.records = records;
-      if (!records || !records.length) {
-        this.tableStatus = TABLE_STATUS.empty;
-      } else {
-        this.tableStatus = TABLE_STATUS.success;
-      }
-      this.$refs.table.doLayout();
-      this.$emit("page-loaded", data);
-    },
-    async refresh() {
-      await this.getPage();
-    },
-    async reload() {
-      this.page = {
-        ...this.$options.data.call(this).page,
-        total: this.page.total
-      };
-    },
-    scrollTo(top, left) {
-      if (top) {
-        this.$refs.table.bodyWrapper.scrollTop = top;
-      }
-      if (left) {
-        this.$refs.table.bodyWrapper.scrollLeft = left;
-      }
-    }
-  }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
-}
-const PageableTable = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export {
-  PageableTable as default
-};

package/dist/components/pageable-table/style.css

@@ -1,72 +0,0 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.pageable-table {
-  flex: 1 1 auto;
-  position: relative;
-  height: 100%;
-}
-.pageable-table .single-select-column .el-radio__label {
-  padding: 0;
-}
-.pageable-table.auto-height {
-  position: static;
-  height: auto;
-}
-.pageable-table.auto-height .el-table {
-  position: static;
-  min-height: 200px;
-}
-.pageable-table.auto-height .pageable-table-wrapper {
-  position: static;
-}
-.pageable-table .pageable-table-wrapper {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.pageable-table .el-pagination {
-  background-color: #fff;
-}
-.pageable-table .table-status-icon {
-  font-size: 20px;
-}
-.pageable-table .pageable-table-loading {
-  display: inline-flex;
-  align-items: center;
-}
-.pageable-table .pageable-table-error {
-  display: inline-flex;
-  align-items: center;
-  color: #f00;
-  border: 1px solid #fca4a4;
-}
-.pageable-table .pageable-table-error:hover {
-  background-color: #fff0f0;
-}
-.pageable-table .pageable-table-total {
-  padding: 0 10px 10px;
-}
-.pageable-table .underline {
-  position: relative;
-}
-.pageable-table .underline::after {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  height: 1px;
-  background-color: #606266;
-  content: "";
-}
-.pageable-table .total {
-  padding: 10px;
-}