@web-utils/component 2.7.19 → 2.7.21

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

@@ -1,64 +1,65 @@
-import { cloneDeep as n, merge as c, hasOwn as g } from "@web-utils/core";
-import { f as d, d as f, e as b } from "../../chunks/utils.fa73de78.js";
-import { n as m } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-var y = function() {
-  var e = this, t = e.$createElement, a = e._self._c || t;
-  return a("div", {
+import { hasOwn } from "@web-utils/core";
+import { cloneDeep, merge } from "@web-utils/integrations/lodash";
+import { f as filterTableColumnProperties, h as filterTableProperties, i as filterTableEvents } from "../../chunks/utils.d7f73f8d.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("div", {
     class: ["pageable-table", {
-      "auto-height": e.autoHeight
+      "auto-height": _vm.autoHeight
     }]
-  }, [a("div", {
+  }, [_c("div", {
     staticClass: "pageable-table-wrapper"
-  }, [e._t("toolbar"), a("ElTable", e._g(e._b({
+  }, [_vm._t("toolbar"), _c("ElTable", _vm._g(_vm._b({
     ref: "table",
     class: ["flex-item", {
-      "header-bold": e.headerBold
+      "header-bold": _vm.headerBold
     }],
     attrs: {
-      data: e.records,
-      border: e.border
+      data: _vm.records,
+      border: _vm.border
     },
     on: {
-      "hook:updated": e.updateTableScrollPosition,
-      "sort-change": e.onSortChange,
-      "row-dblclick": e.rowDbClick,
-      "current-change": e.onCurrentChange
+      "hook:updated": _vm.updateTableScrollPosition,
+      "sort-change": _vm.onSortChange,
+      "row-dblclick": _vm.rowDbClick,
+      "current-change": _vm.onCurrentChange
     },
-    scopedSlots: e._u([{
+    scopedSlots: _vm._u([{
       key: "empty",
       fn: function() {
-        return [e._t("empty", function() {
-          return [e.tableStatus === e.TABLE_STATUS.loading ? [a("span", {
+        return [_vm._t("empty", function() {
+          return [_vm.tableStatus === _vm.TABLE_STATUS.loading ? [_c("span", {
             staticClass: "pageable-table-loading"
-          }, [a("i", {
+          }, [_c("i", {
             staticClass: "table-status-icon el-icon-loading"
-          }), e._v(" 加载中...")])] : e.tableStatus === e.TABLE_STATUS.error ? [a("ElButton", {
+          }), _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: e.refresh
+              click: _vm.refresh
             }
-          }, [e._v(" 加载失败，点击重试！ ")])] : [e._v(" 暂无数据 ")]];
+          }, [_vm._v(" 加载失败，点击重试！ ")])] : [_vm._v(" 暂无数据 ")]];
         })];
       },
       proxy: !0
     }, {
       key: "append",
       fn: function() {
-        return [e._t("append")];
+        return [_vm._t("append")];
       },
       proxy: !0
     }], null, !0)
-  }, "ElTable", e.filterTableProperties(e.mergeAttrs), !1), e.filterTableEvents(e.$listeners)), [e.multiple && e.selection ? a("TableColumn", {
+  }, "ElTable", _vm.filterTableProperties(_vm.mergeAttrs), !1), _vm.filterTableEvents(_vm.$listeners)), [_vm.multiple && _vm.selection ? _c("TableColumn", {
     key: "multiple",
     attrs: {
       type: "selection",
       width: "45",
       align: "center"
     }
-  }) : e._e(), !e.multiple && e.selection ? a("TableColumn", {
+  }) : _vm._e(), !_vm.multiple && _vm.selection ? _c("TableColumn", {
     key: "single",
     attrs: {
       type: "single-selection",
@@ -66,90 +67,90 @@ var y = function() {
       width: "45",
       align: "center"
     },
-    scopedSlots: e._u([{
+    scopedSlots: _vm._u([{
       key: "header",
       fn: function() {
-        return [a("ElRadio", {
+        return [_c("ElRadio", {
           attrs: {
-            value: !!e.currentRow,
+            value: !!_vm.currentRow,
             label: !0
           }
-        }, [a("span")])];
+        }, [_c("span")])];
       },
       proxy: !0
     }, {
       key: "default",
-      fn: function(s) {
-        var l = s.row;
-        return [a("ElRadio", {
+      fn: function(_ref) {
+        var row = _ref.row;
+        return [_c("ElRadio", {
           attrs: {
             label: !0,
-            value: e.currentRow && e.currentRow[e.$attrs["row-key"] || "id"] === l[e.$attrs["row-key"] || "id"]
+            value: _vm.currentRow && _vm.currentRow[_vm.$attrs["row-key"] || "id"] === row[_vm.$attrs["row-key"] || "id"]
           }
-        }, [a("span")])];
+        }, [_c("span")])];
       }
     }], null, !1, 307797321)
-  }) : e._e(), e.index ? a("TableColumn", {
+  }) : _vm._e(), _vm.index ? _c("TableColumn", {
     key: "order",
     attrs: {
       type: "index",
       label: "序号",
-      width: e.indexWidth,
+      width: _vm.indexWidth,
       align: "center"
     },
-    scopedSlots: e._u([{
+    scopedSlots: _vm._u([{
       key: "default",
-      fn: function(s) {
-        var l = s.$index;
-        return [e._v(" " + e._s((e.page.page - 1) * e.page.limit + l + 1 || l + 1) + " ")];
+      fn: function(_ref2) {
+        var $index = _ref2.$index;
+        return [_vm._v(" " + _vm._s((_vm.page.page - 1) * _vm.page.limit + $index + 1 || $index + 1) + " ")];
       }
     }], null, !1, 4238275121)
-  }) : e._e(), e._t("default", function() {
-    return [e.columns && e.columns.length ? e._l(e.headers, function(s, l) {
-      return a("TableColumn", e._b({
-        key: `${s.prop}-${l}`
-      }, "TableColumn", s, !1));
-    }) : a("TableColumn", {
+  }) : _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, !1));
+    }) : _c("TableColumn", {
       attrs: {
         label: "点击表格行复制模板"
       },
-      scopedSlots: e._u([{
+      scopedSlots: _vm._u([{
         key: "default",
-        fn: function(s) {
-          var l = s.row;
-          return [a("pre", {
+        fn: function(_ref3) {
+          var row = _ref3.row;
+          return [_c("pre", {
             staticClass: "pointer"
-          }, [e._v(e._s(JSON.stringify(l, null, "	")))])];
+          }, [_vm._v(_vm._s(JSON.stringify(row, null, "	")))])];
         }
       }])
     })];
-  })], 2), a("ElPagination", {
+  })], 2), _c("ElPagination", {
     staticClass: "flex-not-shrink",
     attrs: {
-      "current-page": e.page.page,
-      "hide-on-single-page": e.hideOnSinglePage,
-      "page-size": e.page.limit,
-      total: e.page.total,
+      "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(s) {
-        e.page.page = s;
+      "current-change": function(curPage) {
+        _vm.page.page = curPage;
       }
     }
   })], 2)]);
-}, _ = [];
-const r = {
+}, staticRenderFns = [];
+const TABLE_STATUS = {
   loading: 1,
   error: -1,
   empty: 2,
   success: 0
-}, S = {
+}, __vue2_script = {
   name: "PageableTable",
   bus: {
-    reloadTableView(e) {
-      e === this.viewId && this.getPage();
+    reloadTableView(viewId) {
+      viewId === this.viewId && this.getPage();
     }
   },
   inheritAttrs: !1,
@@ -221,24 +222,24 @@ const r = {
     }
   },
   data() {
-    let e = { rules: [] };
-    this.rules && this.rules.length > 0 && (e.rules = this.rules), this.filters && (e = this.filters), this.filter && (e = Object.assign({}, e, this.filter));
-    let t = {};
-    this.model && (t = n(this.model));
-    const a = this.pageSize;
+    let filters = { rules: [] };
+    this.rules && this.rules.length > 0 && (filters.rules = this.rules), this.filters && (filters = this.filters), this.filter && (filters = Object.assign({}, filters, this.filter));
+    let model = {};
+    this.model && (model = cloneDeep(this.model));
+    const limit = this.pageSize;
     return {
-      TABLE_STATUS: Object.freeze(r),
-      tableStatus: r.empty,
+      TABLE_STATUS: Object.freeze(TABLE_STATUS),
+      tableStatus: TABLE_STATUS.empty,
       records: [],
       currentRow: null,
       page: {
         total: 0,
         page: 1,
-        limit: a,
+        limit,
         ascs: this.ascs,
         descs: this.descs,
-        model: t,
-        filters: e
+        model,
+        filters
       }
     };
   },
@@ -261,15 +262,15 @@ const r = {
       return this.httpGet ? this.httpGet : this.httpPost;
     },
     indexWidth() {
-      const e = `${(this.page.page - 1) * this.page.limit + this.records.length}`;
-      return e.length > 3 ? 50 + (e.length - 3) * 10 : 50;
+      const indexStr = `${(this.page.page - 1) * this.page.limit + this.records.length}`;
+      return indexStr.length > 3 ? 50 + (indexStr.length - 3) * 10 : 50;
     },
     mergeAttrs() {
-      return c({}, this.$attrs, { height: this.autoHeight ? null : "auto" });
+      return merge({}, this.$attrs, { height: this.autoHeight ? null : "auto" });
     },
     headers() {
-      var e;
-      return ((e = this.columns) == null ? void 0 : e.map(d)) || [];
+      var _a;
+      return ((_a = this.columns) == null ? void 0 : _a.map(filterTableColumnProperties)) || [];
     }
   },
   watch: {
@@ -280,8 +281,8 @@ const r = {
     },
     model: {
       deep: !0,
-      handler(e) {
-        this.setModel(e);
+      handler(newVal) {
+        this.setModel(newVal);
       }
     }
   },
@@ -298,65 +299,65 @@ const r = {
     this.$refs.table.bodyWrapper.removeEventListener("scroll", this.onTableScroll);
   },
   methods: {
-    rowDbClick(...e) {
-      var a;
-      const t = this.$refs.table.$children.find((s) => {
-        var l;
-        return ((l = s.$options) == null ? void 0 : l.name) === "ElTableBody";
+    rowDbClick(...args) {
+      var _a;
+      const body = this.$refs.table.$children.find((value) => {
+        var _a2;
+        return ((_a2 = value.$options) == null ? void 0 : _a2.name) === "ElTableBody";
       });
-      t && ((a = t.$refs.tooltip) == null || a.hide()), this.$emit("row-dblclick", ...e);
+      body && ((_a = body.$refs.tooltip) == null || _a.hide()), this.$emit("row-dblclick", ...args);
     },
     async updateTableScrollPosition() {
       this.$refs.table.bodyWrapper && this.scrollTo(this.tableScrollTop, this.tableScrollLeft);
     },
-    filterTableProperties: f,
-    filterTableEvents: b,
-    filterTableColumnProperties: d,
+    filterTableProperties,
+    filterTableEvents,
+    filterTableColumnProperties,
     onTableScroll() {
       this.tableScrollTop = this.$refs.table.bodyWrapper.scrollTop, this.tableScrollLeft = this.$refs.table.bodyWrapper.scrollLeft;
     },
     onSortChange({
-      prop: e,
-      order: t
+      prop,
+      order
     }) {
-      this.page.ascs = t === "ascending" ? e : "", this.page.descs = t === "descending" ? e : "";
+      this.page.ascs = order === "ascending" ? prop : "", this.page.descs = order === "descending" ? prop : "";
     },
-    onCurrentChange(e) {
-      this.currentRow = e;
+    onCurrentChange(currentRow) {
+      this.currentRow = currentRow;
     },
     /**
      *
      * @param {FilterRule} rule
      */
-    addRule(e) {
-      this.removeRule(e.field), this.page.filters.rules.push(e);
+    addRule(rule) {
+      this.removeRule(rule.field), this.page.filters.rules.push(rule);
     },
-    addRules(e) {
-      e.forEach((t) => this.addRule(t));
+    addRules(rules) {
+      rules.forEach((value) => this.addRule(value));
     },
-    setModelField(e, t) {
-      this.$set(this.page.model, e, t);
+    setModelField(field, value) {
+      this.$set(this.page.model, field, value);
     },
-    setModel(e) {
-      this.page.page = 1, this.page.model = n(e);
+    setModel(model) {
+      this.page.page = 1, this.page.model = cloneDeep(model);
     },
-    deleteModelField(e) {
-      delete this.page.model[e];
+    deleteModelField(field) {
+      delete this.page.model[field];
     },
-    removeRule(e) {
-      const t = this.page.filters.rules, a = t.findIndex((s) => s.field === e);
-      a > -1 && t.splice(a, 1);
+    removeRule(field) {
+      const rules = this.page.filters.rules, index = rules.findIndex((value) => value.field === field);
+      index > -1 && rules.splice(index, 1);
     },
     addFilter({
-      field: e,
-      op: t,
-      value: a
+      field,
+      op,
+      value
     }) {
       this.page.filters = Object.assign({}, this.page.filters, {
         rules: [{
-          field: e,
-          op: t,
-          value: a
+          field,
+          op,
+          value
         }],
         op: "and"
       });
@@ -371,20 +372,20 @@ const r = {
       this.setModel(this.model), this.getPage();
     },
     async getPage() {
-      var o;
-      if (g(this.$attrs, "data")) {
+      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 e;
-      const { filters: t, ...a } = this.page, s = { ...a };
-      if ((o = t == null ? void 0 : t.rules) != null && o.length && (s.filters = { rules: t.rules }), this.api || this.url) {
-        this.tableStatus = r.loading;
+      let res;
+      const { filters, ...rest } = this.page, page = { ...rest };
+      if ((_a = filters == null ? void 0 : filters.rules) != null && _a.length && (page.filters = { rules: filters.rules }), this.api || this.url) {
+        this.tableStatus = TABLE_STATUS.loading;
         try {
-          this.api && (e = await this.api(s)), this.url && (e = await this.method(this.url, s));
-        } catch (p) {
-          this.tableStatus = r.error, console.error(p);
+          this.api && (res = await this.api(page)), this.url && (res = await this.method(this.url, page));
+        } catch (e) {
+          this.tableStatus = TABLE_STATUS.error, console.error(e);
           return;
         }
       } else {
@@ -394,8 +395,8 @@ const r = {
         });
         return;
       }
-      const { data: l } = e || {}, { total: u, records: i } = l || {};
-      this.page.total = Number(u), this.records = i, !i || !i.length ? this.tableStatus = r.empty : this.tableStatus = r.success, this.$refs.table.doLayout(), this.$emit("page-loaded", l);
+      const { data } = res || {}, { total, records } = data || {};
+      this.page.total = Number(total), this.records = records, !records || !records.length ? this.tableStatus = TABLE_STATUS.empty : this.tableStatus = TABLE_STATUS.success, this.$refs.table.doLayout(), this.$emit("page-loaded", data);
     },
     async refresh() {
       await this.getPage();
@@ -406,28 +407,28 @@ const r = {
         total: this.page.total
       };
     },
-    scrollTo(e, t) {
-      e && (this.$refs.table.bodyWrapper.scrollTop = e), t && (this.$refs.table.bodyWrapper.scrollLeft = t);
+    scrollTo(top, left) {
+      top && (this.$refs.table.bodyWrapper.scrollTop = top), left && (this.$refs.table.bodyWrapper.scrollLeft = left);
     }
   }
-}, h = {};
-var T = /* @__PURE__ */ m(
-  S,
-  y,
-  _,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  v,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function v(e) {
-  for (let t in h)
-    this[t] = h[t];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const k = /* @__PURE__ */ function() {
-  return T.exports;
+const PageableTable = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  k as default
+  PageableTable as default
 };

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

@@ -1 +1,66 @@
-.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:red;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}
+.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: red;
+  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;
+}