@web-utils/component 2.0.13 → 2.2.0

package/pageable-table/index.mjs

@@ -0,0 +1,478 @@
+var $ = Object.defineProperty, v = Object.defineProperties;
+var w = Object.getOwnPropertyDescriptors;
+var p = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var g = (e, a, t) => a in e ? $(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, c = (e, a) => {
+  for (var t in a || (a = {}))
+    f.call(a, t) && g(e, t, a[t]);
+  if (p)
+    for (var t of p(a))
+      b.call(a, t) && g(e, t, a[t]);
+  return e;
+}, m = (e, a) => v(e, w(a));
+var y = (e, a) => {
+  var t = {};
+  for (var s in e)
+    f.call(e, s) && a.indexOf(s) < 0 && (t[s] = e[s]);
+  if (e != null && p)
+    for (var s of p(e))
+      a.indexOf(s) < 0 && b.call(e, s) && (t[s] = e[s]);
+  return t;
+};
+var h = (e, a, t) => new Promise((s, l) => {
+  var u = (r) => {
+    try {
+      i(t.next(r));
+    } catch (d) {
+      l(d);
+    }
+  }, n = (r) => {
+    try {
+      i(t.throw(r));
+    } catch (d) {
+      l(d);
+    }
+  }, i = (r) => r.done ? s(r.value) : Promise.resolve(r.value).then(u, n);
+  i((t = t.apply(e, a)).next());
+});
+import { hasOwn as C } from "@web-utils/core";
+import { cloneDeep as S, merge as k } from "@web-utils/integrations/lodash";
+import { f as _, h as x, i as B } from "../chunks/index.LGsb2aDq.mjs";
+import { n as P } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var E = function() {
+  var e = this, a = e.$createElement, t = e._self._c || a;
+  return t("div", {
+    class: ["pageable-table", {
+      "auto-height": e.autoHeight
+    }]
+  }, [t("div", {
+    staticClass: "pageable-table-wrapper"
+  }, [e._t("toolbar"), t("ElTable", e._g(e._b({
+    ref: "table",
+    class: ["flex-item", {
+      "header-bold": e.headerBold
+    }],
+    attrs: {
+      data: e.records,
+      border: e.border
+    },
+    on: {
+      "hook:updated": e.updateTableScrollPosition,
+      "sort-change": e.onSortChange,
+      "row-dblclick": e.rowDbClick,
+      "current-change": e.onCurrentChange
+    },
+    scopedSlots: e._u([{
+      key: "empty",
+      fn: function() {
+        return [e._t("empty", function() {
+          return [e.tableStatus === e.TABLE_STATUS.loading ? [t("span", {
+            staticClass: "pageable-table-loading"
+          }, [t("i", {
+            staticClass: "table-status-icon el-icon-loading"
+          }), e._v(" 加载中...")])] : e.tableStatus === e.TABLE_STATUS.error ? [t("ElButton", {
+            staticClass: "pageable-table-error",
+            attrs: {
+              icon: "table-status-icon fa fa-frown-o"
+            },
+            on: {
+              click: e.refresh
+            }
+          }, [e._v(" 加载失败，点击重试！ ")])] : [e._v(" 暂无数据 ")]];
+        })];
+      },
+      proxy: !0
+    }, {
+      key: "append",
+      fn: function() {
+        return [e._t("append")];
+      },
+      proxy: !0
+    }], null, !0)
+  }, "ElTable", e.filterTableProperties(e.mergeAttrs), !1), e.filterTableEvents(e.$listeners)), [e.multiple && e.selection ? t("TableColumn", {
+    key: "multiple",
+    attrs: {
+      type: "selection",
+      width: "45",
+      align: "center"
+    }
+  }) : e._e(), !e.multiple && e.selection ? t("TableColumn", {
+    key: "single",
+    attrs: {
+      type: "single-selection",
+      "class-name": "single-select-column",
+      width: "45",
+      align: "center"
+    },
+    scopedSlots: e._u([{
+      key: "header",
+      fn: function() {
+        return [t("ElRadio", {
+          attrs: {
+            value: !!e.currentRow,
+            label: !0
+          }
+        }, [t("span")])];
+      },
+      proxy: !0
+    }, {
+      key: "default",
+      fn: function(s) {
+        var l = s.row;
+        return [t("ElRadio", {
+          attrs: {
+            label: !0,
+            value: e.currentRow && e.currentRow[e.$attrs["row-key"] || "id"] === l[e.$attrs["row-key"] || "id"]
+          }
+        }, [t("span")])];
+      }
+    }], null, !1, 307797321)
+  }) : e._e(), e.index ? t("TableColumn", {
+    key: "order",
+    attrs: {
+      type: "index",
+      label: "序号",
+      width: e.indexWidth,
+      align: "center"
+    },
+    scopedSlots: e._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) + " ")];
+      }
+    }], null, !1, 4238275121)
+  }) : e._e(), e._t("default", function() {
+    return [e.columns && e.columns.length ? e._l(e.headers, function(s, l) {
+      return t("TableColumn", e._b({
+        key: `${s.prop}-${l}`
+      }, "TableColumn", s, !1));
+    }) : t("TableColumn", {
+      attrs: {
+        label: "点击表格行复制模板"
+      },
+      scopedSlots: e._u([{
+        key: "default",
+        fn: function(s) {
+          var l = s.row;
+          return [t("pre", {
+            staticClass: "pointer"
+          }, [e._v(e._s(JSON.stringify(l, null, "	")))])];
+        }
+      }])
+    })];
+  })], 2), t("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,
+      background: "",
+      layout: "total, prev, pager, next, jumper"
+    },
+    on: {
+      "current-change": function(s) {
+        e.page.page = s;
+      }
+    }
+  })], 2)]);
+}, A = [];
+const o = {
+  loading: 1,
+  error: -1,
+  empty: 2,
+  success: 0
+}, R = {
+  name: "PageableTable",
+  bus: {
+    reloadTableView(e) {
+      e === this.viewId && this.getPage();
+    }
+  },
+  inheritAttrs: !1,
+  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: !0
+    },
+    index: {
+      type: Boolean,
+      default: !0
+    },
+    multiple: {
+      type: Boolean,
+      default: !0
+    },
+    selection: {
+      type: Boolean,
+      default: !0
+    },
+    border: {
+      type: Boolean,
+      default: !0
+    },
+    reloadOnModelChange: {
+      type: Boolean,
+      default: !1
+    },
+    columns: {
+      type: Array
+    },
+    pageSize: {
+      type: Number,
+      default: 25
+    }
+  },
+  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 a = {};
+    this.model && (a = S(this.model));
+    const t = this.pageSize;
+    return {
+      TABLE_STATUS: Object.freeze(o),
+      tableStatus: o.empty,
+      records: [],
+      currentRow: null,
+      page: {
+        total: 0,
+        page: 1,
+        limit: t,
+        ascs: this.ascs,
+        descs: this.descs,
+        model: a,
+        filters: e
+      }
+    };
+  },
+  computed: {
+    guard() {
+      return this.reloadOnModelChange ? {
+        asc: this.page.ascs,
+        desc: this.page.descs,
+        page: this.page.page,
+        model: this.page.model,
+        filters: this.page.filters
+      } : {
+        asc: this.page.ascs,
+        desc: this.page.descs,
+        page: this.page.page,
+        filters: this.page.filters
+      };
+    },
+    method() {
+      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;
+    },
+    mergeAttrs() {
+      return k({}, this.$attrs, { height: this.autoHeight ? null : "auto" });
+    },
+    headers() {
+      var e;
+      return ((e = this.columns) == null ? void 0 : e.map(_)) || [];
+    }
+  },
+  watch: {
+    url: { handler: "reload" },
+    api: { handler: "reload" },
+    "$attrs.data"() {
+      this.getPage();
+    },
+    model: {
+      deep: !0,
+      handler(e) {
+        this.setModel(e);
+      }
+    }
+  },
+  created() {
+    this.$watch(() => this.guard, this.getPage, {
+      deep: !0,
+      immediate: this.immediate
+    });
+  },
+  mounted() {
+    this.$refs.table.bodyWrapper.addEventListener("scroll", this.onTableScroll);
+  },
+  beforeDestroy() {
+    this.$refs.table.bodyWrapper.removeEventListener("scroll", this.onTableScroll);
+  },
+  methods: {
+    rowDbClick(...e) {
+      var t;
+      const a = this.$refs.table.$children.find((s) => {
+        var l;
+        return ((l = s.$options) == null ? void 0 : l.name) === "ElTableBody";
+      });
+      a && ((t = a.$refs.tooltip) == null || t.hide()), this.$emit("row-dblclick", ...e);
+    },
+    updateTableScrollPosition() {
+      return h(this, null, function* () {
+        this.$refs.table.bodyWrapper && this.scrollTo(this.tableScrollTop, this.tableScrollLeft);
+      });
+    },
+    filterTableProperties: x,
+    filterTableEvents: B,
+    filterTableColumnProperties: _,
+    onTableScroll() {
+      this.tableScrollTop = this.$refs.table.bodyWrapper.scrollTop, this.tableScrollLeft = this.$refs.table.bodyWrapper.scrollLeft;
+    },
+    onSortChange({
+      prop: e,
+      order: a
+    }) {
+      this.page.ascs = a === "ascending" ? e : "", this.page.descs = a === "descending" ? e : "";
+    },
+    onCurrentChange(e) {
+      this.currentRow = e;
+    },
+    /**
+     *
+     * @param {FilterRule} rule
+     */
+    addRule(e) {
+      this.removeRule(e.field), this.page.filters.rules.push(e);
+    },
+    addRules(e) {
+      e.forEach((a) => this.addRule(a));
+    },
+    setModelField(e, a) {
+      this.$set(this.page.model, e, a);
+    },
+    setModel(e) {
+      this.page.page = 1, this.page.model = S(e);
+    },
+    deleteModelField(e) {
+      delete this.page.model[e];
+    },
+    removeRule(e) {
+      const a = this.page.filters.rules, t = a.findIndex((s) => s.field === e);
+      t > -1 && a.splice(t, 1);
+    },
+    addFilter({
+      field: e,
+      op: a,
+      value: t
+    }) {
+      this.page.filters = Object.assign({}, this.page.filters, {
+        rules: [{
+          field: e,
+          op: a,
+          value: t
+        }],
+        op: "and"
+      });
+    },
+    clearFilters() {
+      this.page.filters = {};
+    },
+    clearSelection() {
+      this.$refs.table.clearSelection();
+    },
+    search() {
+      this.setModel(this.model), this.getPage();
+    },
+    getPage() {
+      return h(this, null, function* () {
+        var r;
+        if (C(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 i = this.page, { filters: a } = i, t = y(i, ["filters"]), s = c({}, t);
+        if ((r = a == null ? void 0 : a.rules) != null && r.length && (s.filters = { rules: a.rules }), this.api || this.url) {
+          this.tableStatus = o.loading;
+          try {
+            this.api && (e = yield this.api(s)), this.url && (e = yield this.method(this.url, s));
+          } catch (d) {
+            this.tableStatus = o.error, console.error(d);
+            return;
+          }
+        } else {
+          this.$notify.warning({
+            title: "开发提示！",
+            message: "PageableTable 请提供 url(String) 或 api(Function) 属性"
+          });
+          return;
+        }
+        const { data: l } = e || {}, { total: u, records: n } = l || {};
+        this.page.total = Number(u), this.records = n, !n || !n.length ? this.tableStatus = o.empty : this.tableStatus = o.success, this.$refs.table.doLayout(), this.$emit("page-loaded", l);
+      });
+    },
+    refresh() {
+      return h(this, null, function* () {
+        yield this.getPage();
+      });
+    },
+    reload() {
+      return h(this, null, function* () {
+        this.page = m(c({}, this.$options.data.call(this).page), {
+          total: this.page.total
+        });
+      });
+    },
+    scrollTo(e, a) {
+      e && (this.$refs.table.bodyWrapper.scrollTop = e), a && (this.$refs.table.bodyWrapper.scrollLeft = a);
+    }
+  }
+}, T = {};
+var O = /* @__PURE__ */ P(
+  R,
+  E,
+  A,
+  !1,
+  L,
+  null,
+  null,
+  null
+);
+function L(e) {
+  for (let a in T)
+    this[a] = T[a];
+}
+const D = /* @__PURE__ */ function() {
+  return O.exports;
+}();
+export {
+  D as default
+};

package/pageable-table/style.css

@@ -0,0 +1 @@
+.pageable-table{flex:auto;height:100%;position:relative}.pageable-table .single-select-column .el-radio__label{padding:0}.pageable-table.auto-height{height:auto;position:static}.pageable-table.auto-height .el-table{min-height:200px;position:static}.pageable-table.auto-height .pageable-table-wrapper{position:static}.pageable-table .pageable-table-wrapper{flex-direction:column;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.pageable-table .el-pagination{background-color:#fff}.pageable-table .table-status-icon{font-size:20px}.pageable-table .pageable-table-loading{align-items:center;display:inline-flex}.pageable-table .pageable-table-error{color:red;border:1px solid #fca4a4;align-items:center;display:inline-flex}.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{z-index:1;content:"";background-color:#606266;width:100%;height:1px;position:absolute;bottom:0;left:0}.pageable-table .total{padding:10px}