aibox-custom-component-packages 0.0.6 → 0.0.8

package/es/PageContainer.mjs

@@ -1,13 +1,584 @@
-const t = {
-  ACTION: "action"
-}, o = {
-  TABLE: "table",
-  CARD_INFINITE: "card-infinite"
-}, T = {
-  BOTTOM: "bottom"
-};
+import { w as ke } from "./chunks/index.bCzIhWFw.js";
+import { ref as y, useSlots as Ce, computed as D, watch as O, onMounted as Se, createElementBlock as m, openBlock as r, createCommentVNode as h, createElementVNode as x, renderSlot as z, createVNode as v, unref as o, withCtx as d, createBlock as g, resolveDynamicComponent as xe, toDisplayString as V, normalizeClass as ee, mergeProps as te, toHandlers as Ee, createSlots as ae, normalizeStyle as Pe, Fragment as j, renderList as N, withModifiers as U, createTextVNode as le, normalizeProps as ze, guardReactiveProps as Ie } from "vue";
+import { C as ne } from "./chunks/layout.CygCXa6s.js";
+import { SearchBar as Ae, IconEmpty as Re } from "color-star-custom-components";
+import { IconZuo as De, IconMore as Oe, IconZuoCopy as Ne, IconYou as Te, Loading as Be } from "color-message-aibox-vue";
+import { M as A, C as H, D as Ve } from "./chunks/field-types.CPnMOjle.js";
+import { emitsMap as c, paginationConfig as $, pageParams as R, operationConfigMap as oe } from "color-star-custom-methods";
+import { ElIcon as F, ElAutoResizer as je, ElTable as $e, ElTableColumn as Y, ElButton as Fe, ElDropdown as Me, ElDropdownMenu as Ke, ElDropdownItem as Le, ElScrollbar as We, ElPagination as qe } from "element-plus";
+import { useRouter as Ue } from "vue-router";
+import { _ as He } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import './assets/PageContainer.css';const Ye = { class: "page-container flex flex-col overflow-hidden h-full" }, Ze = { class: "text-1f2329 pd-l-4" }, Ge = { class: "action-buttons flex items-center" }, Je = { class: "flex items-center w-full" }, Qe = { class: "flex-1" }, Xe = {
+  key: 0,
+  class: "flex items-center justify-center w-full"
+}, _e = {
+  key: 1,
+  class: "card-list"
+}, et = {
+  key: 2,
+  class: "loading-indicator flex items-center justify-center pd-t-20 pd-b-20"
+}, tt = {
+  key: 3,
+  class: "pagination-section pd-t-16 flex justify-center"
+}, at = /* @__PURE__ */ Object.assign({
+  name: "PageContainer"
+}, {
+  __name: "layout",
+  props: {
+    // 面包屑导航配置
+    breadcrumb: {
+      type: Object,
+      default: () => ({
+        show: !1,
+        text: ""
+        // icon: IconZuo,
+      })
+    },
+    // 页面标题
+    title: {
+      type: String,
+      default: ""
+    },
+    // 搜索字段配置
+    searchFields: {
+      type: Array,
+      default: () => []
+    },
+    // 搜索模型
+    modelValue: {
+      type: Object,
+      default: () => ({})
+    },
+    // 表格列配置
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    // 表格数据
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    // 表格其他属性
+    tableProps: {
+      type: Object,
+      default: () => ({
+        stripe: !0,
+        border: !1
+      })
+    },
+    // 树表格配置
+    treeProps: {
+      type: Object,
+      default: () => ({})
+    },
+    // 表格事件
+    tableEvents: {
+      type: Object,
+      default: () => ({})
+    },
+    // 是否显示分页
+    showPagination: {
+      type: Boolean,
+      default: !0
+    },
+    // 分页配置
+    pagination: {
+      type: Object,
+      default: () => ({
+        page: R.pageNum,
+        size: R.pageSize,
+        total: 0,
+        pageSizes: $.pageSizes,
+        layout: $.layout
+      })
+    },
+    // 自定义插槽名称列表
+    customSlots: {
+      type: Array,
+      default: () => []
+    },
+    // 数据接口函数
+    api: {
+      type: Function,
+      default: null
+    },
+    // 是否自动加载数据
+    autoLoad: {
+      type: Boolean,
+      default: !0
+    },
+    // 接口自定义参数
+    apiParams: {
+      type: Object,
+      default: () => ({})
+    },
+    // 查询 跟 表格 是否 断开
+    isSeparate: {
+      type: Boolean,
+      default: !1
+    },
+    minWidth: {
+      type: Number,
+      default: 290
+    },
+    // 显示模式：MODES.TABLE(表格) | MODES.CARD_INFINITE(无限滚动卡片)
+    mode: {
+      type: String,
+      default: A.TABLE,
+      validator: (l) => Object.values(A).includes(l)
+    },
+    // 是否显示复选框
+    showSelection: {
+      type: Boolean,
+      default: !1
+    },
+    // 选中的行数据
+    selection: {
+      type: Array,
+      default: () => []
+    },
+    // 是否有展开
+    hasExpand: {
+      type: Boolean,
+      default: !1
+    },
+    // 请求参数处理回调
+    requestParamsCallback: {
+      type: Function,
+      default: null
+    }
+  },
+  emits: [
+    c.search,
+    c.reset,
+    c.actionClick,
+    c.paginationChange,
+    c.sizeChange,
+    c.dataLoaded,
+    c.dataError,
+    c.updateModelValue,
+    "selection-change",
+    "expand-change"
+  ],
+  setup(l, { expose: re, emit: ie }) {
+    const se = Ue(), n = l, w = ie, ue = y(null), M = y(null), de = y(null), fe = Ce(), K = y(!1), k = y([]), C = y({
+      page: R.pageNum,
+      size: R.pageSize,
+      total: 0,
+      pageSizes: $.pageSizes,
+      layout: $.layout
+    }), b = y({ ...n.modelValue }), E = y(!1), I = y(!0), L = y([...n.selection]), S = y([...n.tableProps?.expandRowKeys || []]), T = D(
+      () => n.api ? k.value : n.tableData
+    ), p = D(
+      () => n.api ? C.value : n.pagination
+    ), W = D(
+      () => n.api ? K.value || E.value : n.tableProps.loading || E.value || !1
+    ), B = D(() => n.mode === A.CARD_INFINITE), Z = D(() => n.columns?.map((e) => {
+      if (e.type === H.ACTION && (Array.isArray(e.actions) || typeof e.actions == "function"))
+        return {
+          ...e,
+          align: "center",
+          fixed: "right"
+        };
+      const { width: t, ...u } = e;
+      return {
+        ...u,
+        minWidth: t
+      };
+    })), ce = (e) => {
+      e === Ve.BOTTOM && (!B.value || !I.value || W.value || P({}, !0));
+    }, pe = (e, t) => e.id || e.bnid || e.key || `item-${t}`, me = () => {
+      se.back();
+    }, ve = (e) => {
+      const t = e[n.tableProps?.rowKey];
+      S.value.includes(t) ? S.value = S.value.filter(
+        (u) => u !== t
+      ) : S.value.push(t);
+    }, ge = (e, t) => t.formatter ? t.formatter(e[t.prop], e, t) : e[t.prop], ye = (e) => fe[e] !== void 0, q = (e, t) => typeof e.actions == "function" ? e.actions(t) || [] : e.actions || [], he = (e) => e.length < 3 ? e : e.slice(0, 1), G = (e) => e.length < 3 ? [] : e.slice(1), P = (e = {}, t = !1) => {
+      if (!n.api) return;
+      if (t) {
+        if (!I.value || E.value) return;
+        E.value = !0;
+      } else
+        K.value = !0, B.value && (I.value = !0, E.value = !1);
+      let u = {};
+      typeof n.requestParamsCallback == "function" && (u = n.requestParamsCallback(
+        b.value,
+        n.apiParams
+      ));
+      const a = {
+        ...e,
+        // 搜索参数等
+        ...n.apiParams,
+        ...b.value,
+        ...u
+      };
+      n.showPagination && (t ? a.page = p.value.page + 1 : a.page = p.value.page, a.size = p.value.size), console.log("requestParams", a?.publishStatus), n.api(a).then((f) => {
+        const i = f?.data?.memberSo?.data || f?.data?.data || f?.data || [];
+        if (console.log("newData", i), t) {
+          if (!i || i.length === 0) {
+            I.value = !1;
+            return;
+          }
+          k.value = [...k.value, ...i], C.value.page = a.page, C.value.total = f?.data?.memberSo?.total || f?.data?.total || k.value.length, i.length < p.value.size && (I.value = !1);
+        } else
+          k.value = i, C.value.total = f?.data?.memberSo?.total || f?.data?.total || 0;
+        w(c.dataLoaded, {
+          data: k.value,
+          pagination: C.value,
+          params: a,
+          response: f?.data,
+          isLoadMore: t
+        });
+      }).catch((f) => {
+        t ? I.value = !1 : (k.value = [], C.value.total = 0), w(c.dataError, f);
+      }).finally(() => {
+        t ? E.value = !1 : K.value = !1;
+      });
+    }, J = () => {
+      n.mode === A.CARD_INFINITE && (k.value = []);
+    }, Q = () => {
+      n.api ? (J(), C.value.page = R.pageNum, P()) : w(c.search, b.value);
+    }, X = () => {
+      const e = {};
+      Object.keys(b.value).forEach((t) => {
+        e[t] = void 0;
+      }), b.value = e, n.api ? (J(), C.value.page = R.pageNum, P()) : w(c.reset);
+    }, _ = (e, t, u) => {
+      w(c.actionClick, { action: e, row: t, index: u });
+    }, be = (e) => {
+      L.value = e, w("selection-change", e);
+    }, we = (e, t) => {
+      switch (e) {
+        case oe.search:
+          Q();
+          break;
+        case oe.reset:
+          X();
+          break;
+      }
+    };
+    return O(
+      () => n.modelValue,
+      (e) => {
+        b.value = { ...e };
+      },
+      { deep: !0, immediate: !0 }
+    ), O(
+      () => n.selection,
+      (e) => {
+        L.value = [...e];
+      },
+      { deep: !0, immediate: !0 }
+    ), O(
+      () => n.tableProps?.expandRowKeys,
+      (e) => {
+        e && (S.value = [...e]);
+      },
+      { deep: !0, immediate: !0 }
+    ), O(
+      () => S.value,
+      (e) => {
+        w("expand-change", e);
+      },
+      { deep: !0 }
+    ), O(
+      () => b.value,
+      (e) => {
+        w(c.updateModelValue, { ...e });
+      },
+      { deep: !0 }
+    ), Se(() => {
+      n.autoLoad && n.api && P();
+    }), re({
+      loadData: P,
+      handleSearch: Q,
+      handleReset: X,
+      // 复选框相关方法
+      clearSelection: () => M.value?.clearSelection?.(),
+      toggleAllSelection: () => M.value?.toggleAllSelection?.(),
+      getSelectionRows: () => L.value
+      // SearchBar相关方法
+      // validate: () => searchFormRef.value?.validate?.(),
+      // getFormData: () =>
+      //   searchFormRef.value?.getFormData?.() || internalSearchModel.value,
+      // resetFields: () => {
+      //   if (searchFormRef.value?.resetFields) {
+      //     searchFormRef.value.resetFields()
+      //   } else {
+      //     handleReset()
+      //   }
+      // },
+    }), (e, t) => (r(), m("div", Ye, [
+      l.breadcrumb.show ? (r(), m("div", {
+        key: 0,
+        class: "flex items-center fz-14 pd-b-20 pointer",
+        onClick: me
+      }, [
+        v(o(F), { size: 16 }, {
+          default: d(() => [
+            (r(), g(xe(l.breadcrumb.icon || o(De))))
+          ]),
+          _: 1
+        }),
+        x("span", Ze, V(l.breadcrumb.text), 1)
+      ])) : h("", !0),
+      l.searchFields?.length ? (r(), m("div", {
+        key: 1,
+        class: ee({
+          "search-section pd-b-16 mg-b-16": !l.isSeparate,
+          "bg-fff radius-4 pd-l-16 pd-r-16 pd-t-16 pd-b-16": l.isSeparate
+        })
+      }, [
+        v(ne, { title: "查询" }),
+        v(o(Ae), {
+          ref_key: "searchFormRef",
+          ref: ue,
+          items: l.searchFields,
+          "filter-mode": !1,
+          minWidth: l.minWidth,
+          hideExpandButton: !1,
+          fixedWidth: !0,
+          maxHeight: 32,
+          modelValue: b.value,
+          "onUpdate:modelValue": t[0] || (t[0] = (u) => b.value = u),
+          onOperation: we
+        }, null, 8, ["items", "minWidth", "modelValue"])
+      ], 2)) : h("", !0),
+      x("div", {
+        class: ee(["data-section flex-1 overflow-hidden flex flex-col", {
+          "bg-fff radius-4 pd-l-16 pd-r-16 pd-t-16 pd-b-16 mg-t-16": l.isSeparate
+        }])
+      }, [
+        l.title ? z(e.$slots, "title", { key: 0 }, () => [
+          v(ne, { title: l.title }, {
+            default: d(() => [
+              z(e.$slots, "title-actions", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["title"])
+        ], !0) : h("", !0),
+        l.mode === o(A).TABLE ? (r(), g(o(je), {
+          key: 1,
+          class: "flex-1 overflow-hidden"
+        }, {
+          default: d(({ width: u }) => [
+            v(o($e), te({
+              ref_key: "tableRef",
+              ref: M,
+              data: T.value,
+              columns: Z.value,
+              "tree-props": l.treeProps,
+              "show-overflow-tooltip": !0,
+              "row-key": l.treeProps.value || l.tableProps?.rowKey
+            }, {
+              loading: W.value,
+              expandRowKeys: S.value,
+              ...l.tableProps
+            }, Ee(l.tableEvents), {
+              class: "w-full h-full admin-dashboard-table",
+              border: "",
+              onSelectionChange: be
+            }), ae({
+              default: d(() => [
+                l.showSelection ? (r(), g(o(Y), {
+                  key: 0,
+                  type: "selection",
+                  width: "55",
+                  fixed: "left"
+                })) : h("", !0),
+                l.hasExpand ? (r(), g(o(Y), {
+                  key: 1,
+                  width: "1",
+                  type: "expand",
+                  fixed: "left"
+                }, {
+                  default: d((a) => [
+                    x("div", {
+                      class: "sticky-left",
+                      style: Pe({ width: u + "px" })
+                    }, [
+                      z(e.$slots, "expand", {
+                        row: a.row
+                      }, void 0, !0)
+                    ], 4)
+                  ]),
+                  _: 2
+                }, 1024)) : h("", !0),
+                (r(!0), m(j, null, N(Z.value, (a, f) => (r(), g(o(Y), te({
+                  key: a.prop
+                }, { ref_for: !0 }, a, {
+                  "show-overflow-tooltip": a.type === o(H).ACTION ? !1 : a?.showOverflowTooltip
+                }), ae({ _: 2 }, [
+                  a.type === o(H).ACTION ? {
+                    name: "default",
+                    fn: d((i) => [
+                      x("div", Ge, [
+                        (r(!0), m(j, null, N(he(
+                          q(a, i.row)
+                        ), (s) => (r(), g(o(Fe), {
+                          key: s.key || s.label,
+                          type: s.type || "primary",
+                          size: s.size || "small",
+                          disabled: s.disabled,
+                          loading: s.loading,
+                          text: s.text,
+                          link: s.link,
+                          icon: s.icon,
+                          onClick: U((nt) => _(s, i.row, i.$index), ["stop"]),
+                          style: { "margin-left": "0" }
+                        }, {
+                          default: d(() => [
+                            le(V(s.label), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["type", "size", "disabled", "loading", "text", "link", "icon", "onClick"]))), 128)),
+                        G(q(a, i.row)).length > 0 ? (r(), g(o(Me), {
+                          key: 0,
+                          onCommand: (s) => _(s, i.row, i.$index),
+                          onClick: t[1] || (t[1] = U(() => {
+                          }, ["stop"])),
+                          trigger: "click"
+                        }, {
+                          dropdown: d(() => [
+                            v(o(Ke), null, {
+                              default: d(() => [
+                                (r(!0), m(j, null, N(G(
+                                  q(a, i.row)
+                                ), (s) => (r(), g(o(Le), {
+                                  key: s.key || s.label,
+                                  command: s,
+                                  disabled: s.disabled
+                                }, {
+                                  default: d(() => [
+                                    le(V(s.label), 1)
+                                  ]),
+                                  _: 2
+                                }, 1032, ["command", "disabled"]))), 128))
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          default: d(() => [
+                            v(o(F), null, {
+                              default: d(() => [
+                                v(o(Oe))
+                              ]),
+                              _: 1
+                            })
+                          ]),
+                          _: 2
+                        }, 1032, ["onCommand"])) : h("", !0)
+                      ])
+                    ]),
+                    key: "0"
+                  } : ye(a.prop) ? {
+                    name: "default",
+                    fn: d((i) => [
+                      x("div", Je, [
+                        f === 0 && l.hasExpand ? (r(), g(o(F), {
+                          key: 0,
+                          class: "mg-r-10",
+                          onClick: U((s) => ve(i.row), ["stop"])
+                        }, {
+                          default: d(() => [
+                            S.value.includes(
+                              i.row?.[l.tableProps?.rowKey]
+                            ) ? (r(), g(o(Ne), { key: 0 })) : (r(), g(o(Te), { key: 1 }))
+                          ]),
+                          _: 2
+                        }, 1032, ["onClick"])) : h("", !0),
+                        x("div", Qe, [
+                          z(e.$slots, a.prop, {
+                            row: i.row,
+                            index: i.$index,
+                            column: a
+                          }, void 0, !0)
+                        ])
+                      ])
+                    ]),
+                    key: "1"
+                  } : {
+                    name: "default",
+                    fn: d((i) => [
+                      x("span", null, V(ge(i.row, a)), 1)
+                    ]),
+                    key: "2"
+                  }
+                ]), 1040, ["show-overflow-tooltip"]))), 128))
+              ]),
+              _: 2
+            }, [
+              N(l.customSlots, (a) => ({
+                name: a,
+                fn: d((f) => [
+                  z(e.$slots, a, ze(Ie(f)), void 0, !0)
+                ])
+              }))
+            ]), 1040, ["data", "columns", "tree-props", "row-key"])
+          ]),
+          _: 3
+        })) : l.mode === o(A).CARD_INFINITE ? (r(), g(o(We), {
+          key: 2,
+          ref_key: "scrollbarRef",
+          ref: de,
+          class: "card-container flex-1",
+          onEndReached: ce
+        }, {
+          default: d(() => [
+            T.value.length === 0 ? (r(), m("div", Xe, [
+              v(o(Re))
+            ])) : (r(), m("div", _e, [
+              (r(!0), m(j, null, N(T.value, (u, a) => (r(), m("div", {
+                key: pe(u, a),
+                class: "card-item"
+              }, [
+                z(e.$slots, "card", {
+                  item: u,
+                  index: a,
+                  data: T.value,
+                  loading: W.value
+                }, void 0, !0)
+              ]))), 128))
+            ])),
+            B.value && E.value ? (r(), m("div", et, [
+              v(o(F), {
+                class: "is-loading",
+                color: "var(--primary-color-1)"
+              }, {
+                default: d(() => [
+                  v(o(Be))
+                ]),
+                _: 1
+              }),
+              t[4] || (t[4] = x("span", { class: "fz-14 text-3271fe pd-l-8" }, "加载中...", -1))
+            ])) : h("", !0)
+          ]),
+          _: 3
+        }, 512)) : h("", !0),
+        l.showPagination && !B.value && p.value?.total ? (r(), m("div", tt, [
+          v(o(qe), {
+            "current-page": p.value.page,
+            "onUpdate:currentPage": t[2] || (t[2] = (u) => p.value.page = u),
+            "page-size": p.value.size,
+            "onUpdate:pageSize": t[3] || (t[3] = (u) => p.value.size = u),
+            "page-sizes": p.value.pageSizes,
+            total: p.value.total,
+            layout: p.value.layout,
+            onSizeChange: P,
+            onCurrentChange: P
+          }, null, 8, ["current-page", "page-size", "page-sizes", "total", "layout"])
+        ])) : h("", !0)
+      ], 2),
+      z(e.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+}), lt = /* @__PURE__ */ He(at, [["__scopeId", "data-v-a804a996"]]), vt = ke(lt);
 export {
-  t as COLUMN_TYPES,
-  T as DIRECTION,
-  o as MODES
+  H as COLUMN_TYPES,
+  Ve as DIRECTION,
+  A as MODES,
+  vt as PageContainer,
+  vt as default
 };