@web-utils/component 4.0.15 → 5.0.0-beta01

package/pageable-table/index.mjs

@@ -1,522 +1,2 @@
-import O from "../resize-observer/index.mjs";
-import b from "element-ui/lib/checkbox";
-import d from "element-ui/lib/table-column";
-import v from "element-ui/lib/table";
-import W from "element-ui/lib/drawer";
-import { n as _ } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
-import F from "element-ui/lib/pagination";
-import { T as f, g as V } from "../chunks/TableColumn.BzivvXMF.mjs";
-import { _ as w } from "../chunks/helper.BiMLcEEk.mjs";
-import "vue";
-import x from "element-ui/lib/radio";
-import D from "element-ui/lib/empty";
-import M from "element-ui/lib/button";
-import { copy as U, hasOwn as N } from "@web-utils/core";
-import T from "element-ui/lib/message";
-import { g as k, f as R, a as H, b as j } from "../chunks/index.Cn7aq-Et.mjs";
-import { merge as m } from "@web-utils/integrations/lodash";
-import { isEqual as Q } from "lodash-es";
-const q = {
-  name: "TableColumnFilter",
-  props: {
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    visible: Boolean
-  }
-};
-var I = function() {
-  var e = this, l = e._self._c;
-  return l(W, { staticClass: "table-column-filter", attrs: { visible: e.visible, title: "表格设置", "append-to-body": "" }, on: { "update:visible": (s) => e.$emit("update:visible", s) } }, [l(v, { attrs: { data: e.columns, border: "" } }, [l(d, { attrs: { label: "列名" }, scopedSlots: e._u([{ key: "default", fn: function({ row: s }) {
-    return [e._v(" " + e._s(s.label) + " ")];
-  } }]) }), l(d, { attrs: { label: "隐藏", align: "center" }, scopedSlots: e._u([{ key: "default", fn: function({ row: s }) {
-    return [l(b, { model: { value: s.hide, callback: function(i) {
-      e.$set(s, "hide", i);
-    }, expression: "row.hide" } })];
-  } }]) }), l(d, { attrs: { label: "冻结", align: "center" }, scopedSlots: e._u([{ key: "default", fn: function({ row: s }) {
-    return [l(b, { model: { value: s.fixed, callback: function(i) {
-      e.$set(s, "fixed", i);
-    }, expression: "row.fixed" } })];
-  } }]) }), l(d, { attrs: { label: "过滤", align: "center" }, scopedSlots: e._u([{ key: "default", fn: function({ row: s }) {
-    return [l(b, { model: { value: s.filterable, callback: function(i) {
-      e.$set(s, "filterable", i);
-    }, expression: "row.filterable" } })];
-  } }]) }), l(d, { attrs: { label: "排序", align: "center" }, scopedSlots: e._u([{ key: "default", fn: function({ row: s }) {
-    return [l(b, { attrs: { title: s.allowSort ? null : "该列不支持排序!", disabled: !s.allowSort }, model: { value: s.sortable, callback: function(i) {
-      e.$set(s, "sortable", i);
-    }, expression: "row.sortable" } })];
-  } }]) })], 1)], 1);
-}, J = [], X = /* @__PURE__ */ _(
-  q,
-  I,
-  J,
-  !1,
-  null,
-  null
-);
-const P = X.exports, G = {
-  name: "TableColumnFilterable",
-  functional: !0,
-  /**
-   *
-   * @param h
-   * @param context {FunctionalContext}
-   * @returns {JSX.Element}
-   */
-  render(t, e) {
-    const {
-      data: {
-        key: l
-      },
-      props: s,
-      parent: {
-        records: i
-      },
-      scopedSlots: a
-    } = e, {
-      hide: o,
-      isVNode: n,
-      filterable: r,
-      allowSort: S,
-      autoUpdate: u,
-      scopedSlots: E,
-      prop: $,
-      ...B
-    } = s, C = `${l}-${r}${u ? `-${Math.random()}`.replace("0.", "") : ""}`, h = {
-      props: {
-        prop: $,
-        ...B
-      }
-    };
-    if (r) {
-      const A = [...new Set(i.map((p) => p[$]).filter((p) => p))].map((p) => ({
-        text: p,
-        value: p
-      }));
-      h.props.filterMethod = (p, K, L) => {
-        const z = L.property;
-        return K[z] === p;
-      }, h.props.filters = A;
-    }
-    const g = E || a;
-    return g != null && g.default ? t(d, w([{}, h, {
-      scopedSlots: g,
-      key: C
-    }])) : t(f, w([{}, h, {
-      key: C
-    }]));
-  }
-}, Y = null, Z = null;
-var ee = /* @__PURE__ */ _(
-  G,
-  Y,
-  Z,
-  !1,
-  null,
-  null
-);
-const y = ee.exports;
-function te(t) {
-  U(
-    t,
-    () => k(T).success({ duration: 1e3, message: "复制成功！", type: "success" }),
-    () => k(T).error({ duration: 1e3, message: "复制失败！", type: "error" })
-  );
-}
-const se = {
-  props: {
-    useVisibilityChange: Boolean
-  },
-  created() {
-    this.useVisibilityChange && document.addEventListener("visibilitychange", this.onPageVisibleChange);
-  },
-  beforeDestroy() {
-    this.useVisibilityChange && document.removeEventListener("visibilitychange", this.onPageVisibleChange);
-  },
-  methods: {
-    onPageVisibleChange() {
-      var t, e;
-      document.hidden ? (t = this.onPageHidden) == null || t.call(this) : (e = this.onPageVisible) == null || e.call(this);
-    }
-  }
-};
-function le(t, e) {
-  const l = t.map((i) => {
-    const { hide: a, filterable: o, allowSort: n, sortable: r, fixed: S, ...u } = i;
-    return u;
-  }), s = e.map((i) => {
-    const { hide: a, filterable: o, allowSort: n, sortable: r, fixed: S, ...u } = i;
-    return u;
-  });
-  return Q(l, s);
-}
-function ae(t) {
-  let e = "";
-  for (const l in t)
-    e += `<TableColumn prop="${l}" label="${l}"/>
-`;
-  return e;
-}
-const c = {
-  loading: 1,
-  error: -1,
-  empty: 2,
-  success: 0
-}, ie = {
-  name: "PageableTable",
-  components: { TableColumnFilter: P, TableColumnFilterable: y },
-  mixins: [se],
-  emits: ["page-loaded", "row-dblclick"],
-  bus: {
-    reloadTableView(t) {
-      t === this.viewId && this.getPage();
-    }
-  },
-  inheritAttrs: !1,
-  props: {
-    selectionWidth: {
-      type: String,
-      default: "45"
-    },
-    viewId: String,
-    url: String,
-    hideOnSinglePage: Boolean,
-    api: Function,
-    model: Object,
-    ascs: {
-      type: Array,
-      default: () => []
-    },
-    descs: {
-      type: Array,
-      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: Array,
-    pageSize: {
-      type: Number,
-      default: 25
-    },
-    dicOptions: {
-      type: Array,
-      default: () => []
-    },
-    paging: {
-      type: Boolean,
-      default: !0
-    },
-    clickRowSelect: Boolean,
-    payloadStyle: String,
-    rowKey: {
-      type: String,
-      default: "id"
-    },
-    disabledRowKeys: Array,
-    selectExport: Boolean
-  },
-  data() {
-    const t = this.pageSize;
-    return {
-      TABLE_STATUS: Object.freeze(c),
-      tableStatus: c.empty,
-      records: [],
-      currentRow: null,
-      showSettings: !1,
-      selectedRows: [],
-      page: { total: 0, page: 1, limit: t, ascs: this.ascs, descs: this.descs },
-      tableColumns: [],
-      expandColumn: null,
-      renderKey: 1
-    };
-  },
-  computed: {
-    guard() {
-      return this.reloadOnModelChange ? {
-        asc: this.page.ascs,
-        desc: this.page.descs,
-        page: this.page.page,
-        limit: this.page.limit,
-        model: this.model
-      } : { asc: this.page.ascs, desc: this.page.descs, page: this.page.page, limit: this.page.limit };
-    },
-    indexWidth() {
-      var e;
-      const t = `${(this.page.page - 1) * this.page.limit + (((e = this.records) == null ? void 0 : e.length) ?? 0)}`;
-      return t.length > 3 ? 60 + (t.length - 3) * 10 : 60;
-    },
-    mergeAttrs() {
-      return m({}, this.$attrs, { height: this.autoHeight ? null : "auto" });
-    },
-    headers() {
-      var t;
-      return ((t = this.columns) == null ? void 0 : t.map(R)) || [];
-    }
-  },
-  watch: {
-    url: { handler: "reload" },
-    api: { handler: "reload" },
-    "$attrs.data": "getPage"
-  },
-  created() {
-    this.$watch(() => this.guard, this.getPage, { deep: !0, immediate: this.immediate }), this.$watch(
-      () => ({ columns: this.columns, renderKey: this.renderKey }),
-      (t) => {
-        const e = [];
-        let l = null;
-        if (t) {
-          const s = this.$slots.default, { columns: i } = t;
-          s ? s.forEach((a) => {
-            if (!a.isComment && a.data) {
-              const { attrs: o, props: n, scopedSlots: r } = a.data;
-              a.data.props = a.data.props || {}, a.data.props.type === "expand" ? l = {
-                ...o,
-                ...n,
-                scopedSlots: r,
-                hide: !1,
-                filterable: !1,
-                allowSort: a.data.props.sortable !== !1,
-                sortable: !1,
-                fixed: a.data.props.fixed
-              } : e.push({
-                ...o,
-                ...n,
-                scopedSlots: r,
-                hide: !1,
-                isVNode: !0,
-                filterable: !1,
-                allowSort: a.data.props.sortable !== !1,
-                sortable: !1,
-                fixed: a.data.props.fixed
-              });
-            }
-          }) : i && i.forEach((a) => {
-            a.type === "expand" ? l = {
-              ...a,
-              props: a,
-              hide: !1,
-              filterable: !1,
-              allowSort: a.sortable !== !1,
-              sortable: !1,
-              fixed: a.fixed
-            } : e.push({
-              ...a,
-              props: a,
-              hide: !1,
-              filterable: !1,
-              allowSort: a.sortable !== !1,
-              sortable: !1,
-              fixed: a.fixed
-            });
-          }), this.updateExpandColumn(l), this.updateColumns(e);
-        }
-      },
-      { immediate: !0 }
-    );
-  },
-  mounted() {
-    this.$refs.table.bodyWrapper.addEventListener("scroll", this.onTableScroll);
-  },
-  beforeUpdate() {
-    this.renderKey++;
-  },
-  beforeDestroy() {
-    this.$refs.table.bodyWrapper.removeEventListener("scroll", this.onTableScroll);
-  },
-  methods: {
-    rowDbClick(...t) {
-      this.hideTooltip(), this.$emit("row-dblclick", ...t);
-    },
-    rowClick(t, e, l) {
-      if (this.clickRowSelect && this.selectable(t)) {
-        const s = this.$refs.table;
-        if (this.selectedRows.find((a) => a[this.rowKey] === t[this.rowKey])) {
-          s.toggleRowSelection(t, !1);
-          return;
-        }
-        s.toggleRowSelection(t);
-      }
-    },
-    hideTooltip() {
-      var e;
-      const t = this.$refs.table.$children.find((l) => {
-        var s;
-        return ((s = l.$options) == null ? void 0 : s.name) === "ElTableBody";
-      });
-      (e = t == null ? void 0 : t.$refs.tooltip) == null || e.hide();
-    },
-    updateTableScrollPosition() {
-      this.$refs.table.bodyWrapper && this.scrollTo(this.tableScrollTop, this.tableScrollLeft);
-    },
-    filterTableProperties: j,
-    filterTableEvents: H,
-    filterTableColumnProperties: R,
-    onTableScroll() {
-      this.tableScrollTop = this.$refs.table.bodyWrapper.scrollTop, this.tableScrollLeft = this.$refs.table.bodyWrapper.scrollLeft;
-    },
-    copy: (t) => te(ae(t)),
-    onSortChange({ prop: t, order: e }) {
-      this.payloadStyle !== "body" ? (this.page.ascs = e === "ascending" ? t : "", this.page.descs = e === "descending" ? t : "") : (this.page.ascs = e === "ascending" ? [t] : this.ascs, this.page.descs = e === "descending" ? [t] : this.descs);
-    },
-    onCurrentChange(t) {
-      this.selectable(t) && (this.currentRow = t);
-    },
-    handleSelectionChange(t) {
-      this.selectedRows = t;
-    },
-    clearSelection() {
-      this.$refs.table.clearSelection();
-    },
-    getPageQuery() {
-      let t;
-      return this.payloadStyle !== "body" ? t = { ...this.page, current: this.page.page, size: this.page.limit, ...this.model || {} } : t = { page: { ...this.page, current: this.page.page, size: this.page.limit }, example: this.model || {} }, this.selectExport && (this.rowKey ? t.exportKeys = this.selectedRows.map((e) => e[this.rowKey]) : t.exportKeys = this.selectedRows.map((e) => this.records.indexOf(e))), t;
-    },
-    async getPage(t) {
-      var o;
-      if (N(this.$attrs, "data") && this.$attrs.data !== !1) {
-        this.records = this.$attrs.data, this.page.page = 1, this.page.total = (o = this.records) == null ? void 0 : o.length, this.page.limit = this.page.total;
-        return;
-      }
-      t !== !1 && (this.records = []);
-      let e;
-      const l = this.getPageQuery();
-      if (this.api || this.url) {
-        t !== !1 && (this.tableStatus = c.loading);
-        try {
-          this.api && (e = await this.api(l));
-        } catch {
-          this.tableStatus = c.error;
-          return;
-        }
-      } else {
-        this.$notify.warning({
-          title: "开发提示！",
-          message: "PageableTable 请提供 url(String) 或 api(Function) 属性"
-        });
-        return;
-      }
-      const {
-        data: { data: s }
-      } = e || {}, { total: i, records: a } = s || {};
-      this.page.total = Number(i), this.records = await this.mapRow(a), !a || !a.length ? this.tableStatus = c.empty : this.tableStatus = c.success, this.doLayout(), this.$emit("page-loaded", s);
-    },
-    doLayout() {
-      var t;
-      (t = this.$refs.table) == null || t.doLayout();
-    },
-    async refresh(t) {
-      await this.getPage(t);
-    },
-    reload() {
-      this.page = { ...this.$options.data.call(this).page, limit: this.page.limit };
-    },
-    scrollTo(t, e) {
-      t && (this.$refs.table.bodyWrapper.scrollTop = t), e && (this.$refs.table.bodyWrapper.scrollLeft = e);
-    },
-    toggleRowSelection(t, e) {
-      this.$refs.table.toggleRowSelection(t, e);
-    },
-    mapRow(t) {
-      return t.map((e) => (this.dicOptions.forEach(async (l) => {
-        var s;
-        e[`$${l.prop}`] = e[l.prop], l.dicData ? e[l.prop] = ((s = l.dicData.find((i) => i.value === e[l.prop])) == null ? void 0 : s.label) || e[l.prop] : e[l.prop] = await V(l.dicType, e[l.prop]);
-      }), e));
-    },
-    toggleSettings() {
-      this.showSettings = !this.showSettings;
-    },
-    selectable(t) {
-      var e;
-      return !(t != null && t.disabled) && !((e = this.disabledRowKeys) != null && e.includes(t == null ? void 0 : t[this.rowKey]));
-    },
-    updateExpandColumn(t) {
-      t && this.expandColumn ? m(this.expandColumn, t) : this.expandColumn = t;
-    },
-    updateColumns(t) {
-      if (!le(this.tableColumns, t)) {
-        const e = {};
-        this.tableColumns.forEach((l) => {
-          e[l.prop] = l;
-        }), t.map((l) => {
-          const s = e[l.prop];
-          if (s) {
-            const { hide: i, filterable: a, allowSort: o, sortable: n, fixed: r } = s;
-            return m(s, l), s.hide = i, s.filterable = a, s.allowSort = o, s.sortable = n, s.fixed = r, s;
-          }
-          return l;
-        }), this.tableColumns = t;
-      }
-    },
-    onPageVisible() {
-      this.refresh(!1);
-    }
-  }
-};
-var oe = function() {
-  var e = this, l = e._self._c;
-  return l("div", { class: ["pageable-table", { "auto-height": e.autoHeight }] }, [l("div", { staticClass: "pageable-table-wrapper" }, [e._t("toolbar", null, { selectedRows: e.selectedRows }), l(v, e._g(e._b({ ref: "table", class: ["flex-item", { "header-bold": e.headerBold }], attrs: { data: e.records, border: e.border, stripe: "", size: "medium" }, on: { "hook:updated": e.updateTableScrollPosition, "sort-change": e.onSortChange, "row-dblclick": e.rowDbClick, "row-click": e.rowClick, "cell-click": e.hideTooltip, "current-change": e.onCurrentChange, "selection-change": e.handleSelectionChange }, scopedSlots: e._u([{ key: "empty", fn: function() {
-    return [e._t("empty", function() {
-      return [e.tableStatus === e.TABLE_STATUS.loading ? [l("span", { staticClass: "pageable-table-loading" }, [l("i", { staticClass: "table-status-icon el-icon-loading" }), e._v(" 加载中... ")])] : e.tableStatus === e.TABLE_STATUS.error ? [l(M, { staticClass: "pageable-table-error", attrs: { icon: "table-status-icon el-icon-error" }, on: { click: e.refresh } }, [e._v("加载失败，点击重试！")])] : l(D)];
-    })];
-  }, 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.expandColumn ? l(y, e._b({}, "TableColumnFilterable", e.expandColumn, !1)) : e._e(), e.multiple && e.selection ? l(f, { key: "multiple", attrs: { type: "selection", selectable: e.selectable, width: e.selectionWidth, align: "center" } }) : e._e(), !e.multiple && e.selection ? l(f, { key: "single", attrs: { sortable: !1, type: "single-selection", "class-name": "single-select-column", width: e.selectionWidth, align: "center" }, scopedSlots: e._u([{ key: "header", fn: function() {
-    return [l(x, { attrs: { value: !!e.currentRow, label: !0 } }, [l("span")])];
-  }, proxy: !0 }, { key: "default", fn: function({ row: s }) {
-    return [l(x, { attrs: { label: !0, disabled: !e.selectable(s), value: e.currentRow && e.currentRow[e.$attrs["row-key"] || e.rowKey || "id"] === s[e.$attrs["row-key"] || e.rowKey || "id"] } }, [l("span")])];
-  } }], null, !1, 1270221895) }) : e._e(), e.index ? l(f, { key: "order", attrs: { type: "index", label: "序号", width: e.indexWidth, align: "center" }, scopedSlots: e._u([{ key: "default", fn: function({ $index: s }) {
-    return [e._v(" " + e._s((e.page.page - 1) * e.page.limit + s + 1 || s + 1) + " ")];
-  } }], null, !1, 4238275121) }) : e._e(), e.tableColumns ? e._l(e.tableColumns.filter((s) => !s.hide), function(s, i) {
-    var a, o;
-    return l(y, e._b({ key: `${((a = s.props) == null ? void 0 : a.prop) || s.prop}-${i}`, scopedSlots: e._u([e.$scopedSlots[((o = s.props) == null ? void 0 : o.prop) || s.prop] ? { key: "default", fn: function({ row: n }) {
-      var r;
-      return [e._t(((r = s.props) == null ? void 0 : r.prop) || s.prop, null, { row: n })];
-    } } : null], null, !0) }, "TableColumnFilterable", s, !1));
-  }) : [l(f, { attrs: { label: "点击表格行复制模板" }, scopedSlots: e._u([{ key: "default", fn: function({ row: s }) {
-    return [l("pre", { staticClass: "pointer", on: { click: function(i) {
-      return e.copy(s);
-    } } }, [e._v(e._s(JSON.stringify(s, null, "	")))])];
-  } }]) })]], 2), e.paging ? l(F, { 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, "page-sizes": [10, 25, 50, 100, 500, 1e3, 2e3], background: "", layout: "total, sizes, prev, pager, next, jumper" }, on: { "size-change": (s) => {
-    e.page.limit = s;
-  }, "current-change": (s) => {
-    e.page.page = s;
-  } } }) : e._e(), l(P, { attrs: { visible: e.showSettings, columns: e.tableColumns }, on: { "update:visible": function(s) {
-    e.showSettings = s;
-  } } })], 2), l(O, { on: { notify: e.doLayout } })], 1);
-}, re = [], ne = /* @__PURE__ */ _(
-  ie,
-  oe,
-  re,
-  !1,
-  null,
-  null
-);
-const Re = ne.exports;
-export {
-  Re as default
-};
+import { t as e } from "../chunks/PageableTable.Bujb0NUx.mjs";
+export { e as default };