@web-utils/component 4.0.16 → 5.0.0-beta02

package/pageable-table/index.mjs

@@ -1,512 +1,2 @@
-import { copy as v, hasOwn as P } from "@web-utils/core";
-import S from "element-ui/lib/message";
-import { g as _, f as C, i as B, j as A } from "../chunks/index.B2TRddqf.mjs";
-import { merge as f } from "@web-utils/integrations/lodash";
-import { g as K } from "../chunks/dictionary.DGt59Ir7.mjs";
-import { _ as T } from "../chunks/helper.BiMLcEEk.mjs";
-import "vue";
-import { n as b } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
-import { isEqual as L } from "lodash-es";
-function F(t) {
-  v(
-    t,
-    () => _(S).success({ duration: 1e3, message: "复制成功！", type: "success" }),
-    () => _(S).error({ duration: 1e3, message: "复制失败！", type: "error" })
-  );
-}
-const z = {
-  name: "TableColumnFilterable",
-  functional: !0,
-  /**
-   *
-   * @param h
-   * @param context {FunctionalContext}
-   * @returns {JSX.Element}
-   */
-  render(t, e) {
-    const {
-      data: {
-        key: s
-      },
-      props: l,
-      parent: {
-        records: i
-      },
-      scopedSlots: a
-    } = e, {
-      hide: o,
-      isVNode: n,
-      filterable: r,
-      allowSort: g,
-      autoUpdate: d,
-      scopedSlots: x,
-      prop: m,
-      ...$
-    } = l, y = `${s}-${r}${d ? `-${Math.random()}`.replace("0.", "") : ""}`, u = {
-      props: {
-        prop: m,
-        ...$
-      }
-    };
-    if (r) {
-      const w = [...new Set(i.map((c) => c[m]).filter((c) => c))].map((c) => ({
-        text: c,
-        value: c
-      }));
-      u.props.filterMethod = (c, k, E) => {
-        const R = E.property;
-        return k[R] === c;
-      }, u.props.filters = w;
-    }
-    const h = x || a;
-    return h != null && h.default ? t("ElTableColumn", T([{}, u, {
-      scopedSlots: h,
-      key: y
-    }])) : t("TableColumn", T([{}, u, {
-      key: y
-    }]));
-  }
-}, O = null, W = null;
-var V = /* @__PURE__ */ b(
-  z,
-  O,
-  W,
-  !1,
-  null,
-  null
-);
-const D = V.exports, M = {
-  name: "TableColumnFilter",
-  props: {
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    visible: Boolean
-  }
-};
-var U = function() {
-  var e = this, s = e._self._c;
-  return s("ElDrawer", { staticClass: "table-column-filter", attrs: { visible: e.visible, title: "表格设置", "append-to-body": "" }, on: { "update:visible": (l) => e.$emit("update:visible", l) } }, [s("ElTable", { attrs: { data: e.columns, border: "" } }, [s("ElTableColumn", { attrs: { label: "列名" }, scopedSlots: e._u([{ key: "default", fn: function({ row: l }) {
-    return [e._v(" " + e._s(l.label) + " ")];
-  } }]) }), s("ElTableColumn", { attrs: { label: "隐藏", align: "center" }, scopedSlots: e._u([{ key: "default", fn: function({ row: l }) {
-    return [s("ElCheckbox", { model: { value: l.hide, callback: function(i) {
-      e.$set(l, "hide", i);
-    }, expression: "row.hide" } })];
-  } }]) }), s("ElTableColumn", { attrs: { label: "冻结", align: "center" }, scopedSlots: e._u([{ key: "default", fn: function({ row: l }) {
-    return [s("ElCheckbox", { model: { value: l.fixed, callback: function(i) {
-      e.$set(l, "fixed", i);
-    }, expression: "row.fixed" } })];
-  } }]) }), s("ElTableColumn", { attrs: { label: "过滤", align: "center" }, scopedSlots: e._u([{ key: "default", fn: function({ row: l }) {
-    return [s("ElCheckbox", { model: { value: l.filterable, callback: function(i) {
-      e.$set(l, "filterable", i);
-    }, expression: "row.filterable" } })];
-  } }]) }), s("ElTableColumn", { attrs: { label: "排序", align: "center" }, scopedSlots: e._u([{ key: "default", fn: function({ row: l }) {
-    return [s("ElCheckbox", { attrs: { title: l.allowSort ? null : "该列不支持排序!", disabled: !l.allowSort }, model: { value: l.sortable, callback: function(i) {
-      e.$set(l, "sortable", i);
-    }, expression: "row.sortable" } })];
-  } }]) })], 1)], 1);
-}, N = [], j = /* @__PURE__ */ b(
-  M,
-  U,
-  N,
-  !1,
-  null,
-  null
-);
-const H = j.exports, Q = {
-  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 q(t, e) {
-  const s = t.map((i) => {
-    const { hide: a, filterable: o, allowSort: n, sortable: r, fixed: g, ...d } = i;
-    return d;
-  }), l = e.map((i) => {
-    const { hide: a, filterable: o, allowSort: n, sortable: r, fixed: g, ...d } = i;
-    return d;
-  });
-  return L(s, l);
-}
-function I(t) {
-  let e = "";
-  for (const s in t)
-    e += `<TableColumn prop="${s}" label="${s}"/>
-`;
-  return e;
-}
-const p = {
-  loading: 1,
-  error: -1,
-  empty: 2,
-  success: 0
-}, J = {
-  name: "PageableTable",
-  components: { TableColumnFilter: H, TableColumnFilterable: D },
-  mixins: [Q],
-  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(p),
-      tableStatus: p.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 f({}, this.$attrs, { height: this.autoHeight ? null : "auto" });
-    },
-    headers() {
-      var t;
-      return ((t = this.columns) == null ? void 0 : t.map(C)) || [];
-    }
-  },
-  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 s = null;
-        if (t) {
-          const l = this.$slots.default, { columns: i } = t;
-          l ? l.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" ? s = {
-                ...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" ? s = {
-              ...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(s), 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, s) {
-      if (this.clickRowSelect && this.selectable(t)) {
-        const l = this.$refs.table;
-        if (this.selectedRows.find((a) => a[this.rowKey] === t[this.rowKey])) {
-          l.toggleRowSelection(t, !1);
-          return;
-        }
-        l.toggleRowSelection(t);
-      }
-    },
-    hideTooltip() {
-      var e;
-      const t = this.$refs.table.$children.find((s) => {
-        var l;
-        return ((l = s.$options) == null ? void 0 : l.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: A,
-    filterTableEvents: B,
-    filterTableColumnProperties: C,
-    onTableScroll() {
-      this.tableScrollTop = this.$refs.table.bodyWrapper.scrollTop, this.tableScrollLeft = this.$refs.table.bodyWrapper.scrollLeft;
-    },
-    copy: (t) => F(I(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 (P(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 s = this.getPageQuery();
-      if (this.api || this.url) {
-        t !== !1 && (this.tableStatus = p.loading);
-        try {
-          this.api && (e = await this.api(s));
-        } catch {
-          this.tableStatus = p.error;
-          return;
-        }
-      } else {
-        this.$notify.warning({
-          title: "开发提示！",
-          message: "PageableTable 请提供 url(String) 或 api(Function) 属性"
-        });
-        return;
-      }
-      const {
-        data: { data: l }
-      } = e || {}, { total: i, records: a } = l || {};
-      this.page.total = Number(i), this.records = await this.mapRow(a), !a || !a.length ? this.tableStatus = p.empty : this.tableStatus = p.success, this.doLayout(), this.$emit("page-loaded", l);
-    },
-    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 (s) => {
-        var l;
-        e[`$${s.prop}`] = e[s.prop], s.dicData ? e[s.prop] = ((l = s.dicData.find((i) => i.value === e[s.prop])) == null ? void 0 : l.label) || e[s.prop] : e[s.prop] = await K(s.dicType, e[s.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 ? f(this.expandColumn, t) : this.expandColumn = t;
-    },
-    updateColumns(t) {
-      if (!q(this.tableColumns, t)) {
-        const e = {};
-        this.tableColumns.forEach((s) => {
-          e[s.prop] = s;
-        }), t.map((s) => {
-          const l = e[s.prop];
-          if (l) {
-            const { hide: i, filterable: a, allowSort: o, sortable: n, fixed: r } = l;
-            return f(l, s), l.hide = i, l.filterable = a, l.allowSort = o, l.sortable = n, l.fixed = r, l;
-          }
-          return s;
-        }), this.tableColumns = t;
-      }
-    },
-    onPageVisible() {
-      this.refresh(!1);
-    }
-  }
-};
-var X = function() {
-  var e = this, s = e._self._c;
-  return s("div", { class: ["pageable-table", { "auto-height": e.autoHeight }] }, [s("div", { staticClass: "pageable-table-wrapper" }, [e._t("toolbar", null, { selectedRows: e.selectedRows }), s("ElTable", 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 ? [s("span", { staticClass: "pageable-table-loading" }, [s("i", { staticClass: "table-status-icon el-icon-loading" }), e._v(" 加载中... ")])] : e.tableStatus === e.TABLE_STATUS.error ? [s("ElButton", { staticClass: "pageable-table-error", attrs: { icon: "table-status-icon el-icon-error" }, on: { click: e.refresh } }, [e._v("加载失败，点击重试！")])] : s("ElEmpty")];
-    })];
-  }, 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 ? s("TableColumnFilterable", e._b({}, "TableColumnFilterable", e.expandColumn, !1)) : e._e(), e.multiple && e.selection ? s("TableColumn", { key: "multiple", attrs: { type: "selection", selectable: e.selectable, width: e.selectionWidth, align: "center" } }) : e._e(), !e.multiple && e.selection ? s("TableColumn", { 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 [s("ElRadio", { attrs: { value: !!e.currentRow, label: !0 } }, [s("span")])];
-  }, proxy: !0 }, { key: "default", fn: function({ row: l }) {
-    return [s("ElRadio", { attrs: { label: !0, disabled: !e.selectable(l), value: e.currentRow && e.currentRow[e.$attrs["row-key"] || e.rowKey || "id"] === l[e.$attrs["row-key"] || e.rowKey || "id"] } }, [s("span")])];
-  } }], null, !1, 1270221895) }) : e._e(), e.index ? s("TableColumn", { key: "order", attrs: { type: "index", label: "序号", width: e.indexWidth, align: "center" }, scopedSlots: e._u([{ key: "default", fn: function({ $index: l }) {
-    return [e._v(" " + e._s((e.page.page - 1) * e.page.limit + l + 1 || l + 1) + " ")];
-  } }], null, !1, 4238275121) }) : e._e(), e.tableColumns ? e._l(e.tableColumns.filter((l) => !l.hide), function(l, i) {
-    var a, o;
-    return s("TableColumnFilterable", e._b({ key: `${((a = l.props) == null ? void 0 : a.prop) || l.prop}-${i}`, scopedSlots: e._u([e.$scopedSlots[((o = l.props) == null ? void 0 : o.prop) || l.prop] ? { key: "default", fn: function({ row: n }) {
-      var r;
-      return [e._t(((r = l.props) == null ? void 0 : r.prop) || l.prop, null, { row: n })];
-    } } : null], null, !0) }, "TableColumnFilterable", l, !1));
-  }) : [s("TableColumn", { attrs: { label: "点击表格行复制模板" }, scopedSlots: e._u([{ key: "default", fn: function({ row: l }) {
-    return [s("pre", { staticClass: "pointer", on: { click: function(i) {
-      return e.copy(l);
-    } } }, [e._v(e._s(JSON.stringify(l, null, "	")))])];
-  } }]) })]], 2), e.paging ? s("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, "page-sizes": [10, 25, 50, 100, 500, 1e3, 2e3], background: "", layout: "total, sizes, prev, pager, next, jumper" }, on: { "size-change": (l) => {
-    e.page.limit = l;
-  }, "current-change": (l) => {
-    e.page.page = l;
-  } } }) : e._e(), s("TableColumnFilter", { attrs: { visible: e.showSettings, columns: e.tableColumns }, on: { "update:visible": function(l) {
-    e.showSettings = l;
-  } } })], 2), s("ResizeObserver", { on: { notify: e.doLayout } })], 1);
-}, G = [], Y = /* @__PURE__ */ b(
-  J,
-  X,
-  G,
-  !1,
-  null,
-  null
-);
-const ne = Y.exports;
-export {
-  ne as default
-};
+import { t as e } from "../chunks/PageableTable.Ba3XSbZ5.mjs";
+export { e as default };