@kp-ui/lowcode 2.14.0-beta.11 → 2.14.0-beta.12

package/src/components/form-designer/setting-panel/property-editor/container-data-table/data-table-tableColumns-editor.vue2.js

@@ -1,13 +1,19 @@
-import { defineComponent as j, ref as k, resolveComponent as h, createElementBlock as I, openBlock as s, Fragment as q, createVNode as o, unref as n, withCtx as d, createTextVNode as v, toDisplayString as m, createElementVNode as T, createBlock as r, createCommentVNode as u, normalizeClass as G } from "vue";
-import { useI18n as J } from "../../../../../utils/i18n.js";
-import K from "../../../../code-editor/code-modal-editor.vue.js";
-import { cloneDeep as D } from "lodash-es";
-import { TpfModal as P } from "tmgc2-share";
-import { message as Q } from "ant-design-vue";
-const X = { class: "table-wrap" }, Y = {
+import { defineComponent as J, ref as U, computed as K, resolveComponent as _, createElementBlock as W, openBlock as h, Fragment as Q, createVNode as g, unref as o, withCtx as r, createTextVNode as v, toDisplayString as C, createElementVNode as N, createBlock as m, createCommentVNode as f, normalizeClass as X } from "vue";
+import { useI18n as Y } from "../../../../../utils/i18n.js";
+import Z from "../../../../code-editor/code-modal-editor.vue.js";
+import { cloneDeep as E } from "lodash-es";
+import { TpfModal as ee } from "tmgc2-share";
+import { message as te } from "ant-design-vue";
+const le = {
+  class: "table-wrap"
+}, ie = {
   key: 2,
-  style: { "text-align": "center" }
-}, Z = { class: "add-btn" }, de = /* @__PURE__ */ j({
+  style: {
+    "text-align": "center"
+  }
+}, ne = {
+  class: "add-btn"
+}, ce = /* @__PURE__ */ J({
   name: "tableColumns-editor",
   inheritAttrs: !1,
   __name: "data-table-tableColumns-editor",
@@ -16,96 +22,110 @@ const X = { class: "table-wrap" }, Y = {
     selectedWidget: {},
     optionModel: {}
   },
-  setup(S, { expose: W }) {
-    const { i18nt: t } = J(), _ = S, x = k(null), f = k(!1), e = k([]), C = k(null), A = [
-      { value: "left", label: "left" },
-      { value: "center", label: "center" },
-      { value: "right", label: "right" }
-    ], E = [
-      {
-        title: "序号",
-        dataIndex: "index",
-        width: 100,
-        fixed: "left",
-        rowDrag: !0,
-        resizable: !0,
-        customRender: ({ index: c }) => c + 1
-      },
-      {
-        title: t("designer.setting.columnName"),
-        dataIndex: "dataIndex",
-        resizable: !0,
-        width: 150
-      },
-      {
-        title: t("designer.setting.columnLabel"),
-        dataIndex: "title",
-        align: "center",
-        resizable: !0,
-        width: 100
-      },
-      {
-        title: t("designer.setting.columnWidth"),
-        dataIndex: "width",
-        resizable: !0,
-        width: 120
-      },
-      {
-        title: t("designer.setting.visibleColumn"),
-        dataIndex: "show",
-        resizable: !0,
-        width: 90
-      },
-      {
-        title: t("designer.setting.sortableColumn"),
-        dataIndex: "sorter",
-        resizable: !0,
-        width: 90
-      },
-      {
-        title: t("designer.setting.resizableColumn"),
-        dataIndex: "resizable",
-        resizable: !0,
-        width: 120
-      },
-      {
-        title: t("designer.setting.ellipsisColumn"),
-        dataIndex: "ellipsis",
-        resizable: !0,
-        width: 150
-      },
-      {
-        title: t("designer.setting.fixedColumn"),
-        dataIndex: "fixed",
-        resizable: !0,
-        width: 100
-      },
-      {
-        title: t("designer.setting.alignTypeOfColumn"),
-        dataIndex: "align",
-        resizable: !0,
-        width: 100
-      },
-      {
-        title: t("designer.setting.customRender"),
-        dataIndex: "customRender",
-        width: 120,
-        resizable: !0,
-        fixed: "right"
-      },
-      {
-        title: t("designer.setting.actionColumn"),
-        dataIndex: "action",
-        width: 80,
-        fixed: "right"
+  setup(M, {
+    expose: $
+  }) {
+    const {
+      i18nt: l
+    } = Y(), I = M, A = U(null), y = U(!1), u = U([]), R = U(null), B = [{
+      value: "left",
+      label: "left"
+    }, {
+      value: "center",
+      label: "center"
+    }, {
+      value: "right",
+      label: "right"
+    }], V = K(() => [{
+      title: "序号",
+      dataIndex: "index",
+      width: 120,
+      fixed: "left",
+      rowDrag: !0,
+      resizable: !0,
+      // customRender: ({ index }: { index: number }) => index + 1
+      customRender: ({
+        record: n,
+        index: t
+      }) => {
+        const e = (p, c, b = []) => {
+          for (let k = 0; k < c.length; k++) {
+            const w = c[k];
+            if (w.columnId === p.columnId)
+              return [...b, k + 1].join(".");
+            if (w.children) {
+              const z = e(p, w.children, [...b, k + 1]);
+              if (z) return z;
+            }
+          }
+          return "";
+        };
+        return e(n, u.value);
       }
-    ], M = (c, g) => {
-      var p;
-      C.value = c, (p = x.value) == null || p.open(g.customRender || "");
-    }, N = (c) => {
-      C.value !== null && (e.value[C.value].customRender = c);
-    }, V = () => {
-      const c = {
+    }, {
+      title: l("designer.setting.columnName"),
+      dataIndex: "dataIndex",
+      resizable: !0,
+      width: 150
+    }, {
+      title: l("designer.setting.columnLabel"),
+      dataIndex: "title",
+      align: "center",
+      resizable: !0,
+      width: 100
+    }, {
+      title: l("designer.setting.columnWidth"),
+      dataIndex: "width",
+      resizable: !0,
+      width: 120
+    }, {
+      title: l("designer.setting.visibleColumn"),
+      dataIndex: "show",
+      resizable: !0,
+      width: 90
+    }, {
+      title: l("designer.setting.sortableColumn"),
+      dataIndex: "sorter",
+      resizable: !0,
+      width: 90
+    }, {
+      title: l("designer.setting.resizableColumn"),
+      dataIndex: "resizable",
+      resizable: !0,
+      width: 120
+    }, {
+      title: l("designer.setting.ellipsisColumn"),
+      dataIndex: "ellipsis",
+      resizable: !0,
+      width: 150
+    }, {
+      title: l("designer.setting.fixedColumn"),
+      dataIndex: "fixed",
+      resizable: !0,
+      width: 100
+    }, {
+      title: l("designer.setting.alignTypeOfColumn"),
+      dataIndex: "align",
+      resizable: !0,
+      width: 100
+    }, {
+      title: l("designer.setting.customRender"),
+      dataIndex: "customRender",
+      width: 120,
+      resizable: !0,
+      fixed: "right"
+    }, {
+      title: l("designer.setting.actionColumn"),
+      dataIndex: "action",
+      width: 160,
+      fixed: "right"
+    }]), O = (n, t) => {
+      var e;
+      R.value = n, (e = A.value) == null || e.open(t.customRender || "");
+    }, F = (n) => {
+      R.value !== null && (u.value[R.value].customRender = n);
+    }, H = () => {
+      const n = {
         isAutoWidth: !1,
         columnId: (/* @__PURE__ */ new Date()).getTime(),
         show: !0,
@@ -119,215 +139,231 @@ const X = { class: "table-wrap" }, Y = {
         resizable: !0,
         showSorterTooltip: !1
       };
-      e.value.push(c), _.designer.emitHistoryChange();
-    }, $ = (c) => {
-      if (e.value.length === 1)
-        return Q.warning(t("designer.setting.onlyOneColumnCannotBeDeleted")), !1;
-      e.value.splice(c, 1);
-    }, B = () => {
-      _.optionModel.tableColumns = D(e.value), f.value = !1;
-    }, z = () => {
-      f.value = !0, e.value = D(_.optionModel.tableColumns);
+      u.value.push(n), I.designer.emitHistoryChange();
+    }, d = (n) => {
+      let t = u.value;
+      for (let e = 0; e < n.length; e++) {
+        const p = n[e];
+        if (Array.isArray(t))
+          t = t[p];
+        else
+          return t;
+        e !== n.length - 1 && (t = t.children || []);
+      }
+      return t;
+    }, T = (n, t, e) => {
+      for (let p = 0; p < n.length; p++) {
+        const c = n[p];
+        if (c.columnId === t.columnId) {
+          c.children || (c.children = []), c.children.push(e);
+          return;
+        }
+        c.children && T(c.children, t, e);
+      }
+    }, S = (n, t) => n.filter((e) => {
+      if (e.columnId === t)
+        return !1;
+      if (e.children && Array.isArray(e.children) && e.children.length > 0) {
+        const p = S(e.children, t);
+        e.children = p;
+      }
+      return !0;
+    }), L = (n, t) => {
+      if (u.value.length === 1)
+        return te.warning(l("designer.setting.onlyOneColumnCannotBeDeleted")), !1;
+      u.value = S(u.value, n.columnId);
+    }, P = (n, t) => {
+      const e = {
+        ...u.value[t],
+        children: null,
+        columnId: (/* @__PURE__ */ new Date()).getTime()
+      };
+      T(u.value, n, e);
+    }, j = () => {
+      I.optionModel.tableColumns = E(u.value), y.value = !1;
+    }, D = () => {
+      y.value = !0, u.value = E(I.optionModel.tableColumns);
     };
-    return W({
-      openSetting: z
-    }), (c, g) => {
-      const p = h("a-button"), O = h("a-form-item"), w = h("a-input"), b = h("a-switch"), U = h("a-select-option"), R = h("a-select"), F = h("a-space"), L = h("s-table");
-      return s(), I(q, null, [
-        o(O, {
-          label: n(t)("designer.setting.tableColEdit")
+    return $({
+      openSetting: D
+    }), (n, t) => {
+      const e = _("a-button"), p = _("a-form-item"), c = _("a-input"), b = _("a-switch"), k = _("a-select-option"), w = _("a-select"), z = _("a-space"), q = _("s-table");
+      return h(), W(Q, null, [g(p, {
+        label: o(l)("designer.setting.tableColEdit")
+      }, {
+        default: r(() => [g(e, {
+          type: "primary",
+          shape: "round",
+          onClick: D
         }, {
-          default: d(() => [
-            o(p, {
-              type: "primary",
-              shape: "round",
-              onClick: z
-            }, {
-              default: d(() => [
-                v(m(n(t)("designer.setting.editAction")), 1)
-              ]),
-              _: 1
-            })
-          ]),
+          default: r(() => [v(C(o(l)("designer.setting.editAction")), 1)]),
+          _: 1
+        })]),
+        _: 1
+      }, 8, ["label"]), g(o(ee), {
+        title: o(l)("designer.setting.tableColEdit"),
+        visible: y.value,
+        "onUpdate:visible": t[2] || (t[2] = (s) => y.value = s),
+        width: "1200px"
+      }, {
+        footerRight: r(() => [g(e, {
+          size: "default",
+          onClick: t[1] || (t[1] = (s) => y.value = !1)
+        }, {
+          default: r(() => [v(C(o(l)("designer.hint.cancel")), 1)]),
           _: 1
-        }, 8, ["label"]),
-        o(n(P), {
-          title: n(t)("designer.setting.tableColEdit"),
-          visible: f.value,
-          "onUpdate:visible": g[2] || (g[2] = (i) => f.value = i),
-          width: "1200px"
+        }), g(e, {
+          size: "default",
+          type: "primary",
+          onClick: j
         }, {
-          footerRight: d(() => [
-            o(p, {
-              size: "default",
-              onClick: g[1] || (g[1] = (i) => f.value = !1)
+          default: r(() => [v(C(o(l)("designer.hint.confirm")), 1)]),
+          _: 1
+        })]),
+        default: r(() => [N("div", le, [g(q, {
+          class: "tpf-surely-table",
+          "aria-hidden": "false",
+          dataSource: u.value,
+          style: {
+            width: "100%"
+          },
+          deepWatchDataSource: "",
+          "cell-style": {
+            padding: "0"
+          },
+          height: "600",
+          id: "singleTable",
+          size: "default",
+          scroll: {
+            y: 300,
+            x: 300
+          },
+          pagination: !1,
+          resizable: "",
+          "row-key": (s) => s.columnId,
+          columns: V.value
+        }, {
+          bodyCell: r(({
+            column: s,
+            record: x,
+            index: G,
+            recordIndexs: a
+          }) => [s.dataIndex === "dataIndex" ? (h(), m(c, {
+            key: 0,
+            value: d(a).dataIndex,
+            "onUpdate:value": (i) => d(a).dataIndex = i
+          }, null, 8, ["value", "onUpdate:value"])) : f("", !0), s.dataIndex === "title" ? (h(), m(c, {
+            key: 1,
+            value: d(a).title,
+            "onUpdate:value": (i) => d(a).title = i
+          }, null, 8, ["value", "onUpdate:value"])) : f("", !0), s.dataIndex === "width" ? (h(), W("div", ie, [g(b, {
+            "checked-children": o(l)("designer.setting.autoWidth"),
+            checked: u.value[a[0]].isAutoWidth,
+            "onUpdate:checked": (i) => u.value[a[0]].isAutoWidth = i
+          }, null, 8, ["checked-children", "checked", "onUpdate:checked"]), x.isAutoWidth ? f("", !0) : (h(), m(c, {
+            key: 0,
+            value: d(a).width,
+            "onUpdate:value": (i) => d(a).width = i
+          }, null, 8, ["value", "onUpdate:value"]))])) : f("", !0), s.dataIndex === "show" ? (h(), m(b, {
+            key: 3,
+            checked: d(a).show,
+            "onUpdate:checked": (i) => d(a).show = i
+          }, null, 8, ["checked", "onUpdate:checked"])) : f("", !0), s.dataIndex === "sorter" ? (h(), m(b, {
+            key: 4,
+            checked: d(a).sorter,
+            "onUpdate:checked": (i) => d(a).sorter = i
+          }, null, 8, ["checked", "onUpdate:checked"])) : f("", !0), s.dataIndex === "resizable" ? (h(), m(b, {
+            key: 5,
+            checked: d(a).resizable,
+            "onUpdate:checked": (i) => d(a).resizable = i
+          }, null, 8, ["checked", "onUpdate:checked"])) : f("", !0), s.dataIndex === "ellipsis" ? (h(), m(b, {
+            key: 6,
+            checked: d(a).ellipsis,
+            "onUpdate:checked": (i) => d(a).ellipsis = i
+          }, null, 8, ["checked", "onUpdate:checked"])) : f("", !0), s.dataIndex === "fixed" ? (h(), m(w, {
+            key: 7,
+            value: d(a).fixed,
+            "onUpdate:value": (i) => d(a).fixed = i,
+            allowClear: "",
+            style: {
+              width: "100%"
+            }
+          }, {
+            default: r(() => [g(k, {
+              value: "left"
             }, {
-              default: d(() => [
-                v(m(n(t)("designer.hint.cancel")), 1)
-              ]),
+              default: r(() => [v(C(o(l)("designer.setting.fixedLeft")), 1)]),
               _: 1
-            }),
-            o(p, {
-              size: "default",
-              type: "primary",
-              onClick: B
+            }), g(k, {
+              value: "right"
             }, {
-              default: d(() => [
-                v(m(n(t)("designer.hint.confirm")), 1)
-              ]),
+              default: r(() => [v(C(o(l)("designer.setting.fixedRight")), 1)]),
               _: 1
-            })
-          ]),
-          default: d(() => [
-            T("div", X, [
-              o(L, {
-                class: "tpf-surely-table",
-                "aria-hidden": "false",
-                dataSource: e.value,
-                style: { width: "100%" },
-                deepWatchDataSource: "",
-                "cell-style": { padding: "0" },
-                height: "600",
-                id: "singleTable",
-                size: "default",
-                scroll: { y: 300, x: 300 },
-                pagination: !1,
-                resizable: "",
-                "row-key": (i) => i.columnId,
-                columns: E
-              }, {
-                bodyCell: d(({ column: i, record: y, index: H, recordIndexs: l }) => [
-                  i.dataIndex === "dataIndex" ? (s(), r(w, {
-                    key: 0,
-                    value: e.value[l[0]].dataIndex,
-                    "onUpdate:value": (a) => e.value[l[0]].dataIndex = a
-                  }, null, 8, ["value", "onUpdate:value"])) : u("", !0),
-                  i.dataIndex === "title" ? (s(), r(w, {
-                    key: 1,
-                    value: e.value[l[0]].title,
-                    "onUpdate:value": (a) => e.value[l[0]].title = a
-                  }, null, 8, ["value", "onUpdate:value"])) : u("", !0),
-                  i.dataIndex === "width" ? (s(), I("div", Y, [
-                    o(b, {
-                      "checked-children": n(t)("designer.setting.autoWidth"),
-                      checked: e.value[l[0]].isAutoWidth,
-                      "onUpdate:checked": (a) => e.value[l[0]].isAutoWidth = a
-                    }, null, 8, ["checked-children", "checked", "onUpdate:checked"]),
-                    y.isAutoWidth ? u("", !0) : (s(), r(w, {
-                      key: 0,
-                      value: e.value[l[0]].width,
-                      "onUpdate:value": (a) => e.value[l[0]].width = a
-                    }, null, 8, ["value", "onUpdate:value"]))
-                  ])) : u("", !0),
-                  i.dataIndex === "show" ? (s(), r(b, {
-                    key: 3,
-                    checked: e.value[l[0]].show,
-                    "onUpdate:checked": (a) => e.value[l[0]].show = a
-                  }, null, 8, ["checked", "onUpdate:checked"])) : u("", !0),
-                  i.dataIndex === "sorter" ? (s(), r(b, {
-                    key: 4,
-                    checked: e.value[l[0]].sorter,
-                    "onUpdate:checked": (a) => e.value[l[0]].sorter = a
-                  }, null, 8, ["checked", "onUpdate:checked"])) : u("", !0),
-                  i.dataIndex === "resizable" ? (s(), r(b, {
-                    key: 5,
-                    checked: e.value[l[0]].resizable,
-                    "onUpdate:checked": (a) => e.value[l[0]].resizable = a
-                  }, null, 8, ["checked", "onUpdate:checked"])) : u("", !0),
-                  i.dataIndex === "ellipsis" ? (s(), r(b, {
-                    key: 6,
-                    checked: e.value[l[0]].ellipsis,
-                    "onUpdate:checked": (a) => e.value[l[0]].ellipsis = a
-                  }, null, 8, ["checked", "onUpdate:checked"])) : u("", !0),
-                  i.dataIndex === "fixed" ? (s(), r(R, {
-                    key: 7,
-                    value: e.value[l[0]].fixed,
-                    "onUpdate:value": (a) => e.value[l[0]].fixed = a,
-                    allowClear: "",
-                    style: {}
-                  }, {
-                    default: d(() => [
-                      o(U, { value: "left" }, {
-                        default: d(() => [
-                          v(m(n(t)("designer.setting.fixedLeft")), 1)
-                        ]),
-                        _: 1
-                      }),
-                      o(U, { value: "right" }, {
-                        default: d(() => [
-                          v(m(n(t)("designer.setting.fixedRight")), 1)
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 2
-                  }, 1032, ["value", "onUpdate:value"])) : u("", !0),
-                  i.dataIndex === "align" ? (s(), r(R, {
-                    key: 8,
-                    style: {},
-                    value: e.value[l[0]].align,
-                    "onUpdate:value": (a) => e.value[l[0]].align = a,
-                    options: A
-                  }, null, 8, ["value", "onUpdate:value"])) : u("", !0),
-                  i.dataIndex === "customRender" ? (s(), r(p, {
-                    key: 9,
-                    onClick: (a) => M(l[0], y),
-                    class: G([{ "button-text-highlight": !!y.customRender }]),
-                    size: "small",
-                    shape: "round"
-                  }, {
-                    default: d(() => [
-                      v(m(n(t)("designer.setting.edit")), 1)
-                    ]),
-                    _: 2
-                  }, 1032, ["onClick", "class"])) : u("", !0),
-                  i.dataIndex === "action" ? (s(), r(F, { key: 10 }, {
-                    default: d(() => [
-                      o(p, {
-                        title: n(t)("designer.setting.deleteTableColumn"),
-                        size: "small",
-                        onClick: (a) => $(H),
-                        type: "text"
-                      }, {
-                        default: d(() => [
-                          v(m(n(t)("designer.setting.delete")), 1)
-                        ]),
-                        _: 2
-                      }, 1032, ["title", "onClick"])
-                    ]),
-                    _: 2
-                  }, 1024)) : u("", !0)
-                ]),
-                _: 1
-              }, 8, ["dataSource", "row-key"]),
-              T("div", Z, [
-                o(p, {
-                  title: n(t)("designer.setting.addTableColumn"),
-                  type: "primary",
-                  size: "medium",
-                  onClick: g[0] || (g[0] = (i) => V())
-                }, {
-                  default: d(() => [
-                    v(m(n(t)("designer.setting.addTableColumn")), 1)
-                  ]),
-                  _: 1
-                }, 8, ["title"])
-              ])
-            ])
-          ]),
+            })]),
+            _: 2
+          }, 1032, ["value", "onUpdate:value"])) : f("", !0), s.dataIndex === "align" ? (h(), m(w, {
+            key: 8,
+            style: {
+              width: "100%"
+            },
+            value: d(a).align,
+            "onUpdate:value": (i) => d(a).align = i,
+            options: B
+          }, null, 8, ["value", "onUpdate:value"])) : f("", !0), s.dataIndex === "customRender" ? (h(), m(e, {
+            key: 9,
+            onClick: (i) => O(a[0], x),
+            class: X([{
+              "button-text-highlight": !!x.customRender
+            }]),
+            size: "small",
+            shape: "round"
+          }, {
+            default: r(() => [v(C(o(l)("designer.setting.edit")), 1)]),
+            _: 2
+          }, 1032, ["onClick", "class"])) : f("", !0), s.dataIndex === "action" ? (h(), m(z, {
+            key: 10
+          }, {
+            default: r(() => [g(e, {
+              title: o(l)("designer.setting.addSubsets"),
+              size: "small",
+              onClick: (i) => P(x, G),
+              type: "text"
+            }, {
+              default: r(() => t[3] || (t[3] = [v(" 增加子集 ")])),
+              _: 2,
+              __: [3]
+            }, 1032, ["title", "onClick"]), g(e, {
+              title: o(l)("designer.setting.deleteTableColumn"),
+              size: "small",
+              onClick: (i) => L(x),
+              type: "text"
+            }, {
+              default: r(() => [v(C(o(l)("designer.setting.delete")), 1)]),
+              _: 2
+            }, 1032, ["title", "onClick"])]),
+            _: 2
+          }, 1024)) : f("", !0)]),
+          _: 1
+        }, 8, ["dataSource", "row-key", "columns"]), N("div", ne, [g(e, {
+          title: o(l)("designer.setting.addTableColumn"),
+          type: "primary",
+          size: "medium",
+          onClick: t[0] || (t[0] = (s) => H())
+        }, {
+          default: r(() => [v(C(o(l)("designer.setting.addTableColumn")), 1)]),
           _: 1
-        }, 8, ["title", "visible"]),
-        o(K, {
-          onSave: N,
-          ref_key: "CodeModalEditorRef",
-          ref: x,
-          title: n(t)("designer.setting.renderFunction"),
-          "fn-params": "scope"
-        }, null, 8, ["title"])
-      ], 64);
+        }, 8, ["title"])])])]),
+        _: 1
+      }, 8, ["title", "visible"]), g(Z, {
+        onSave: F,
+        ref_key: "CodeModalEditorRef",
+        ref: A,
+        title: o(l)("designer.setting.renderFunction"),
+        "fn-params": "scope"
+      }, null, 8, ["title"])], 64);
     };
   }
 });
 export {
-  de as default
+  ce as default
 };