@aplus-frontend/ui 0.5.28 → 0.5.30

package/es/src/ap-grid/index.vue.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as Fe, useSlots as Be, getCurrentInstance as Ie, ref as k, computed as n, unref as o, watch as T, createElementBlock as F, openBlock as s, normalizeStyle as z, normalizeClass as f, createCommentVNode as y, createElementVNode as B, createVNode as U, mergeProps as g, createSlots as G, withCtx as h, Fragment as X, renderList as A, createBlock as c, resolveDynamicComponent as _, renderSlot as V, normalizeProps as J, guardReactiveProps as Pe } from "vue";
+import { defineComponent as Fe, useSlots as Be, getCurrentInstance as Ie, ref as k, computed as n, unref as o, watch as F, createElementBlock as B, openBlock as s, normalizeStyle as z, normalizeClass as g, createCommentVNode as S, createElementVNode as I, createVNode as U, mergeProps as h, createSlots as G, withCtx as v, Fragment as X, renderList as A, createBlock as p, resolveDynamicComponent as _, renderSlot as V, normalizeProps as J, guardReactiveProps as Pe } from "vue";
 import { VxeTable as Ee, VxeColumn as Q } from "vxe-table";
 import "vxe-table/es/style.css";
 import "vxe-pc-ui/es/style.css";
@@ -93,6 +93,7 @@ const ko = /* @__PURE__ */ Fe({
     defaultData: {},
     dataSource: {},
     onLoadingChange: {},
+    onShownColumnsChange: {},
     searchForm: { type: [Boolean, Object], default: void 0 },
     beforeSearchSubmit: {},
     pagination: { type: [Boolean, Object], default: void 0 },
@@ -113,77 +114,77 @@ const ko = /* @__PURE__ */ Fe({
     var q;
     const L = Be(), a = ae, w = (q = Ie()) == null ? void 0 : q.appContext.app;
     w && !w.__VXE_PC_UI_INSTALLED__ && (w.use(Y), w.__VXE_PC_UI_INSTALLED__ = !0);
-    const { e: I, b: d, be: te } = Xe("ap-grid"), le = Je("valueTypeMap"), i = k([]), D = k([]), p = k(), S = k(a.size), [, m] = Ge(), { t: ne } = Qe();
+    const { e: P, b: i, be: te } = Xe("ap-grid"), le = Je("valueTypeMap"), d = k([]), D = k([]), m = k(), C = k(a.size), [, c] = Ge(), { t: ne } = Qe();
     Y.setConfig({
-      i18n: (e, l) => ne(`ap.${e}`, l)
+      i18n: (e, r) => ne(`ap.${e}`, r)
     });
-    const { renderConfig: se, updateSignal: ie } = Ue(i);
+    const { renderConfig: se, updateSignal: de } = Ue(d);
     let O = 0;
-    const de = n(() => {
-      if (p.value)
-        return p.value.$el.querySelector(
+    const ie = n(() => {
+      if (m.value)
+        return m.value.$el.querySelector(
           ".vxe-table--header-inner-wrapper"
         );
     }), K = n(() => {
-      var e, l, t;
-      return O++, ((t = (l = (e = a.columns) == null ? void 0 : e.filter(
-        (r) => !r.hideInSearch && r.dataIndex && (r.valueType || r.customRenderFormItem) && !ze.includes(r.valueType)
-      )) == null ? void 0 : l.sort((r, u) => {
-        let C = Z(r.order);
-        return Z(u.order) - C;
-      })) == null ? void 0 : t.map((r) => {
+      var e, r, l;
+      return O++, ((l = (r = (e = a.columns) == null ? void 0 : e.filter(
+        (t) => !t.hideInSearch && t.dataIndex && (t.valueType || t.customRenderFormItem) && !ze.includes(t.valueType)
+      )) == null ? void 0 : r.sort((t, u) => {
+        let y = Z(t.order);
+        return Z(u.order) - y;
+      })) == null ? void 0 : l.map((t) => {
         const u = Ae(
-          r,
-          _e(r.fieldProps, {})
-        ), C = {
-          ...r,
+          t,
+          _e(t.fieldProps, {})
+        ), y = {
+          ...t,
           fieldProps: {
-            label: r.title,
-            name: r.dataIndex,
+            label: t.title,
+            name: t.dataIndex,
             ...u || {},
             _signal: O
           },
           renderNode: void 0
         };
-        return C.renderNode = Ve(
-          C,
+        return y.renderNode = Ve(
+          y,
           o(le)
-        ), C;
+        ), y;
       })) || [];
-    }), ue = n(() => [
-      d(),
-      a.card ? null : d("wrapper"),
-      a.adaptive ? d("adaptive") : null,
-      a.sticky ? d("sticky") : null
-    ].filter(Boolean)), $ = n(() => ee(o(i), (e) => {
+    }), ce = n(() => [
+      i(),
+      a.card ? null : i("wrapper"),
+      a.adaptive ? i("adaptive") : null,
+      a.sticky ? i("sticky") : null
+    ].filter(Boolean)), $ = n(() => ee(o(d), (e) => {
       if (e.sorter === !0)
         return e.key || e.dataIndex;
-    }).filter(Boolean)), H = n(() => ee(o(i), (e) => {
+    }).filter(Boolean)), H = n(() => ee(o(d), (e) => {
       if (e.filters && !e.onFilter)
         return e.key || e.dataIndex;
     }).filter(Boolean)), {
-      formRef: P,
+      formRef: E,
       submit: j,
       reset: W,
-      refresh: ce,
-      data: v,
+      refresh: ue,
+      data: f,
       tableProps: M,
       setDataSource: pe,
       handleTableChange: me
     } = Le({
       async request(e) {
-        var t;
-        if (!R.value.preserveSelectedRowKeys && b(a.dataSource) && N(), !b(a.dataSource)) {
-          const r = e.pageSize * (e.current - 1);
+        var l;
+        if (!R.value.preserveSelectedRowKeys && b(a.dataSource) && T(), !b(a.dataSource)) {
+          const t = e.pageSize * (e.current - 1);
           return {
-            data: (a.pagination === !1 ? a.dataSource : a.dataSource.slice(r, r + e.pageSize)) || [],
+            data: (a.pagination === !1 ? a.dataSource : a.dataSource.slice(t, t + e.pageSize)) || [],
             total: a.dataSource.length || 0
           };
         }
-        const l = await ((t = a.request) == null ? void 0 : t.call(a, e));
+        const r = await ((l = a.request) == null ? void 0 : l.call(a, e));
         return {
-          data: (l == null ? void 0 : l.data) || [],
-          total: (l == null ? void 0 : l.total) || 0
+          data: (r == null ? void 0 : r.data) || [],
+          total: (r == null ? void 0 : r.total) || 0
         };
       },
       namespace: "ap-grid",
@@ -196,160 +197,168 @@ const ko = /* @__PURE__ */ Fe({
       pagination: a.pagination
     }), { sortChangeEvent: fe, filterChangeEvent: ge, paginationChangeEvent: he } = Oe(me);
     We({
-      columns: n(() => i.value),
+      columns: n(() => d.value),
       columnsBackup: n(() => D.value),
-      size: n(() => S.value ? qe[S.value] : "middle"),
+      size: n(() => C.value ? qe[C.value] : "middle"),
       updateColumns(e) {
-        i.value = e;
+        var r;
+        d.value = e, (r = a.onShownColumnsChange) == null || r.call(a, e);
       },
       updateSize(e) {
-        S.value = Me[e];
+        C.value = Me[e];
       },
       renderConfig: n(() => ({
         className: te("table-header", "title"),
-        color: m.value.colorPrimary
-      }))
+        color: c.value.colorPrimary
+      })),
+      dataSource: n(() => o(f).records)
     });
     const ve = n(
-      () => i.value.some(
+      () => d.value.some(
         (e) => e.fixed === "left" || e.fixed === !0
       ) ? "left" : void 0
     ), Ce = n(
-      () => b(a.loading) ? v.loading : a.loading
+      () => b(a.loading) ? f.loading : a.loading
     ), ye = n(
-      () => b(a.dataSource) ? v.records : a.dataSource
-    ), { selectedRows: x, rowSelection: R, ...be } = je({
+      () => b(a.dataSource) ? f.records : a.dataSource
+    ), { selectedRows: x, rowSelection: R, ...Se } = je({
       ...a.rowSelection === !0 ? {} : a.rowSelection,
       dataSource: ye,
       rowKey: a.rowKey
-    }), E = () => {
-      const e = p.value;
+    }), N = () => {
+      const e = m.value;
       e && (x.value = [
         ...e.getCheckboxReserveRecords(),
         ...e.getCheckboxRecords()
       ]);
-    }, we = () => {
-      const e = p.value;
+    }, be = () => {
+      const e = m.value;
       e && (x.value = [e.getRadioRecord()]);
     };
-    function Se() {
+    function we() {
       var e;
-      return ((e = a.columns) == null ? void 0 : e.filter((l) => !l.hideInTable)) || [];
+      return ((e = a.columns) == null ? void 0 : e.filter((r) => !r.hideInTable)) || [];
     }
     function xe(e) {
-      var l, t, r;
-      (r = (t = (l = P.value) == null ? void 0 : l.apForm) == null ? void 0 : t.setFieldsValue) == null || r.call(t, e);
+      var r, l, t;
+      (t = (l = (r = E.value) == null ? void 0 : r.apForm) == null ? void 0 : l.setFieldsValue) == null || t.call(l, e);
     }
     function Re(e = !1) {
-      var t, r, u;
-      const l = e ? "getFieldsValueTransformed" : "getFieldsValue";
-      return (u = (r = (t = P.value) == null ? void 0 : t.apForm) == null ? void 0 : r[l]) == null ? void 0 : u.call(r, !0);
+      var l, t, u;
+      const r = e ? "getFieldsValueTransformed" : "getFieldsValue";
+      return (u = (t = (l = E.value) == null ? void 0 : l.apForm) == null ? void 0 : t[r]) == null ? void 0 : u.call(t, !0);
     }
-    function N() {
-      be.clearAll();
-      const e = p.value;
+    function T() {
+      Se.clearAll();
+      const e = m.value;
       e && (R.value.type === "radio" ? (e.clearRadioRow(), e.clearRadioReserve()) : (e.clearCheckboxRow(), e.clearCheckboxReserve()));
     }
-    async function ke(e, l) {
-      var r;
-      const t = v.records[e];
-      if (t)
-        return (r = p.value) == null ? void 0 : r.scrollToRow(t, l);
+    async function ke(e, r) {
+      var t;
+      const l = f.records[e];
+      if (l)
+        return (t = m.value) == null ? void 0 : t.scrollToRow(l, r);
     }
-    return T(
+    return F(
       () => [a.columnResizable, a.columns],
       () => {
-        const e = Se();
-        i.value = e, D.value = e;
+        var r;
+        const e = we();
+        d.value = e, (r = a.onShownColumnsChange) == null || r.call(a, e), D.value = e;
       },
       {
         deep: !0,
         immediate: !0
       }
-    ), T(
+    ), F(
       () => a.dataSource,
       (e) => {
         pe(e);
       },
       { immediate: !0, deep: !0 }
-    ), T(
-      () => o(v).loading,
+    ), F(
+      () => o(f).loading,
       (e) => {
-        var l;
-        (l = a.onLoadingChange) == null || l.call(a, e);
+        var r;
+        (r = a.onLoadingChange) == null || r.call(a, e);
+      }
+    ), F(
+      () => a.size,
+      (e) => {
+        C.value = e;
       }
     ), re({
       submit: j,
       reset: W,
-      refresh: ce,
+      refresh: ue,
       setSearchFormValues: xe,
       getSearchFormValues: Re,
-      getShowColumns: () => o(i),
+      getShowColumns: () => o(d),
       rowSelection: {
         selectedRows: n(() => x.value),
-        clearAll: N
+        clearAll: T
       },
       scrollToRow: ke
-    }), (e, l) => (s(), F("div", {
-      class: f(ue.value),
+    }), (e, r) => (s(), B("div", {
+      class: g(ce.value),
       style: z(e.wrapperStyle)
     }, [
-      o(b)(e.dataSource) && e.searchForm !== !1 && K.value.length > 0 ? (s(), F("div", {
+      o(b)(e.dataSource) && e.searchForm !== !1 && K.value.length > 0 ? (s(), B("div", {
         key: 0,
-        class: f(e.card ? o(I)("search-wrapper") : null),
+        class: g(e.card ? o(P)("search-wrapper") : null),
         style: z(e.searchFormWrapperStyle)
       }, [
-        U(o(Te).SearchForm, g(e.searchForm || {}, {
+        U(o(Te).SearchForm, h(e.searchForm || {}, {
           ref_key: "formRef",
-          ref: P,
+          ref: E,
           "custom-reset": "",
           "submit-loading": o(M).loading,
           onSubmit: o(j),
           onReset: o(W)
         }), G({
-          default: h(() => [
-            (s(!0), F(X, null, A(K.value, (t) => (s(), c(_(t.renderNode.Comp), g({
-              key: t.dataIndex,
-              item: t,
+          default: v(() => [
+            (s(!0), B(X, null, A(K.value, (l) => (s(), p(_(l.renderNode.Comp), h({
+              key: l.dataIndex,
+              item: l,
               ref_for: !0
-            }, t.fieldProps || {}, {
-              span: t.span,
-              "custom-render": t.renderNode.render
+            }, l.fieldProps || {}, {
+              span: l.span,
+              "custom-render": l.renderNode.render
             }), null, 16, ["item", "span", "custom-render"]))), 128))
           ]),
           _: 2
         }, [
           L.searchFormExtra ? {
             name: "extra",
-            fn: h(() => [
+            fn: v(() => [
               V(e.$slots, "searchFormExtra")
             ]),
             key: "0"
           } : void 0
         ]), 1040, ["submit-loading", "onSubmit", "onReset"])
-      ], 6)) : y("", !0),
-      B("div", {
-        class: f([o(I)("table-wrapper"), e.card ? o(I)("table-wrapper-card") : null]),
+      ], 6)) : S("", !0),
+      I("div", {
+        class: g([o(P)("table-wrapper"), e.card ? o(P)("table-wrapper-card") : null]),
         style: z(e.tableWrapperStyle)
       }, [
-        B("div", {
-          class: f(o(d)("header-wrapper"))
+        I("div", {
+          class: g(o(i)("header-wrapper"))
         }, [
           V(e.$slots, "title", {
             selectedRows: o(x),
             selectedRowKeys: o(R).selectedRowKeys,
-            shownColumns: i.value,
-            clearAll: N
+            shownColumns: d.value,
+            clearAll: T
           })
         ], 2),
-        B("div", {
-          class: f(o(d)("vxe-wrapper"))
+        I("div", {
+          class: g(o(i)("vxe-wrapper"))
         }, [
-          (s(), c(o(Ee), g(o(Ke)(a), {
+          (s(), p(o(Ee), h(o(Ke)(a), {
             ref_key: "tableRef",
-            ref: p,
-            key: o(ie),
-            data: o(v).records,
+            ref: m,
+            key: o(de),
+            data: o(f).records,
             "sort-config": { remote: $.value.length > 0 },
             "filter-config": { remote: H.value.length > 0 },
             loading: Ce.value,
@@ -358,62 +367,64 @@ const ko = /* @__PURE__ */ Fe({
               keyField: a.rowKey
             },
             style: {
-              "--vxe-ui-table-row-checkbox-checked-background-color": o(m).controlItemBgActive,
-              "--vxe-ui-table-row-hover-checkbox-checked-background-color": o(m).controlItemBgActiveHover,
-              "--vxe-ui-font-primary-color": o(m).colorPrimary,
+              "--vxe-ui-table-row-checkbox-checked-background-color": o(c).controlItemBgActive,
+              "--vxe-ui-table-row-hover-checkbox-checked-background-color": o(c).controlItemBgActiveHover,
+              "--vxe-ui-font-primary-color": o(c).colorPrimary,
               "--vxe-ui-table-header-background-color": "var(--ap-table-header-bg)",
               "--vxe-ui-table-cell-padding-default": "12px",
               "--vxe-ui-table-cell-padding-medium": "9px",
-              "--vxe-ui-table-row-radio-checked-background-color": o(m).controlItemBgActive,
-              "--vxe-ui-table-row-hover-radio-checked-background-color": o(m).controlItemBgActiveHover
+              "--vxe-ui-table-row-radio-checked-background-color": o(c).controlItemBgActive,
+              "--vxe-ui-table-row-hover-radio-checked-background-color": o(c).controlItemBgActiveHover,
+              "--vxe-ui-font-color": o(c).colorTextBase,
+              "--vxe-ui-table-border-color": o(c).colorBorderSecondary
             },
-            size: S.value,
+            size: C.value,
             onSortChange: o(fe),
             onFilterChange: o(ge),
-            onCheckboxChange: E,
-            onCheckboxRangeChange: E,
-            onCheckboxAll: E,
-            onRadioChange: we
+            onCheckboxChange: N,
+            onCheckboxRangeChange: N,
+            onCheckboxAll: N,
+            onRadioChange: be
           }), G({
-            empty: h(() => [
+            empty: v(() => [
               U(o(oe), {
                 image: o(oe).PRESENTED_IMAGE_SIMPLE
               }, null, 8, ["image"])
             ]),
-            default: h(() => [
-              a.expandable ? (s(), c(o(Q), g({ key: 0 }, o($e)(e.expandable), { fixed: ve.value }), {
-                content: h((t) => [
-                  (s(), c(_(a.expandable.renderContent(t))))
+            default: v(() => [
+              a.expandable ? (s(), p(o(Q), h({ key: 0 }, o($e)(e.expandable), { fixed: ve.value }), {
+                content: v((l) => [
+                  (s(), p(_(a.expandable.renderContent(l))))
                 ]),
                 _: 1
-              }, 16, ["fixed"])) : y("", !0),
-              a.rowSelection ? (s(), c(o(Q), J(g({ key: 1 }, o(He)(o(R), i.value))), null, 16)) : y("", !0),
-              (s(!0), F(X, null, A(o(se), (t) => (s(), c(_(t), {
-                key: t.props.colId
+              }, 16, ["fixed"])) : S("", !0),
+              a.rowSelection ? (s(), p(o(Q), J(h({ key: 1 }, o(He)(o(R), d.value))), null, 16)) : S("", !0),
+              (s(!0), B(X, null, A(o(se), (l) => (s(), p(_(l), {
+                key: l.props.colId
               }))), 128))
             ]),
             _: 2
           }, [
-            A(o(Ne)(L, ["searchFormExtra"]), (t, r) => ({
-              name: r,
-              fn: h((u) => [
-                V(e.$slots, r, J(Pe(u || {})))
+            A(o(Ne)(L, ["searchFormExtra"]), (l, t) => ({
+              name: t,
+              fn: v((u) => [
+                V(e.$slots, t, J(Pe(u || {})))
               ])
             }))
           ]), 1040, ["data", "sort-config", "filter-config", "loading", "row-config", "style", "size", "onSortChange", "onFilterChange"]))
         ], 2),
-        B("div", {
-          class: f(o(d)("pagination-wrapper"))
+        I("div", {
+          class: g(o(i)("pagination-wrapper"))
         }, [
-          e.sticky ? (s(), c(o(Ye), {
+          e.sticky ? (s(), p(o(Ye), {
             key: 0,
             direction: "horizontal",
-            "scroll-container": de.value
-          }, null, 8, ["scroll-container"])) : y("", !0),
-          e.pagination !== !1 ? (s(), c(o(De), g({
+            "scroll-container": ie.value
+          }, null, 8, ["scroll-container"])) : S("", !0),
+          e.pagination !== !1 ? (s(), p(o(De), h({
             key: 1,
-            class: o(d)("pagination")
-          }, o(M).pagination, { onChange: o(he) }), null, 16, ["class", "onChange"])) : y("", !0)
+            class: o(i)("pagination")
+          }, o(M).pagination, { onChange: o(he) }), null, 16, ["class", "onChange"])) : S("", !0)
         ], 2)
       ], 6)
     ], 6));

package/es/src/ap-grid/interface.d.ts

@@ -60,6 +60,10 @@ export type ApGridColumnType<RecordType = any, ExtraValueType = 'text', ValueTyp
      * 指定值类型（将会用于默认渲染和查询表单生成）
      */
     valueType?: MergedValueType;
+    /**
+     * 指定渲染内容是否为html
+     */
+    html?: boolean;
     /**
      * 值类型额外配置的参数（用于查询表单渲染）
      */
@@ -158,6 +162,11 @@ export type ApGridProps<RecordType = any, ParamsType = any> = Omit<TableProps<Re
      * @returns
      */
     onLoadingChange?: (loading: boolean) => void;
+    /**
+     * 当可显示列变更后触发
+     * @returns
+     */
+    onShownColumnsChange?: (columns: ApGridColumnType<RecordType>[]) => void;
     /**
      * 查询表单配置，设置为false表示不渲染查询表单
      */