@kp-ui/lowcode 2.14.0-beta.9 → 2.15.0-alpha.10

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

@@ -1,112 +1,281 @@
-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 { defineComponent as W, mergeModels as A, ref as u, useModel as E, createVNode as i, resolveComponent as n, computed as N, createElementBlock as O, openBlock as j, Fragment as B, unref as o, withCtx as a, createTextVNode as c, toDisplayString as f, createElementVNode as F, nextTick as L, isVNode as $ } from "vue";
+import { useI18n as q } from "../../../../../utils/i18n.js";
+import H from "../../../../code-editor/code-modal-editor.vue.js";
+import { cloneDeep as P } from "lodash-es";
+import { useVxeTable as G, TpfModal as J, Table as K } from "tmgc2-share";
 import { message as Q } from "ant-design-vue";
-const X = { class: "table-wrap" }, Y = {
-  key: 2,
-  style: { "text-align": "center" }
-}, Z = { class: "add-btn" }, de = /* @__PURE__ */ j({
+import { useDesigner as X } from "../../../form-widget/useFormDesigner.js";
+const Y = {
+  class: "add-btn t-flex t-justify-center t-mt-[10px]"
+};
+function g(d) {
+  return typeof d == "function" || Object.prototype.toString.call(d) === "[object Object]" && !$(d);
+}
+const oe = /* @__PURE__ */ W({
   name: "tableColumns-editor",
   inheritAttrs: !1,
   __name: "data-table-tableColumns-editor",
-  props: {
-    designer: {},
-    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
+  props: /* @__PURE__ */ A({
+    selectedWidget: {}
+  }, {
+    optionModel: {
+      default: () => ({
+        tableColumns: () => []
+      })
+    },
+    optionModelModifiers: {}
+  }),
+  emits: ["update:optionModel"],
+  setup(d, {
+    expose: k
+  }) {
+    const {
+      designer: _
+    } = X(), {
+      i18nt: l
+    } = q(), b = u(null), r = u(!1), v = u([]), m = u(null), C = E(d, "optionModel"), y = [{
+      value: "left",
+      label: "left"
+    }, {
+      value: "center",
+      label: "center"
+    }, {
+      value: "right",
+      label: "right"
+    }], R = [{
+      field: "seq",
+      type: "seq",
+      title: "序号",
+      width: 80,
+      dragSort: !0,
+      fixed: "left"
+    }, {
+      field: "dataIndex",
+      title: l("designer.setting.columnName"),
+      width: 150,
+      slots: {
+        default({
+          row: e
+        }) {
+          return i(n("a-input"), {
+            value: e.dataIndex,
+            "onUpdate:value": (t) => e.dataIndex = t,
+            placeholder: l("designer.setting.columnName")
+          }, null);
+        }
+      }
+    }, {
+      field: "title",
+      title: l("designer.setting.columnLabel"),
+      width: 120,
+      slots: {
+        default({
+          row: e
+        }) {
+          return i(n("a-input"), {
+            value: e.title,
+            "onUpdate:value": (t) => e.title = t,
+            placeholder: l("designer.setting.columnLabel")
+          }, null);
+        }
+      }
+    }, {
+      field: "width",
+      title: l("designer.setting.columnWidth"),
+      width: 100,
+      slots: {
+        default({
+          row: e
+        }) {
+          return i("div", {
+            class: "t-flex t-flex-col t-items-center"
+          }, [i(n("a-switch"), {
+            "checked-children": l("designer.setting.autoWidth"),
+            checked: e.isAutoWidth,
+            "onUpdate:checked": (t) => e.isAutoWidth = t
+          }, null), !e.isAutoWidth && i(n("a-input"), {
+            value: e.width,
+            "onUpdate:value": (t) => e.width = t,
+            style: "margin-top: 5px"
+          }, null)]);
+        }
+      }
+    }, {
+      field: "show",
+      title: l("designer.setting.visibleColumn"),
+      width: 90,
+      align: "center",
+      slots: {
+        default({
+          row: e
+        }) {
+          return i(n("a-switch"), {
+            checked: e.show,
+            "onUpdate:checked": (t) => e.show = t
+          }, null);
+        }
+      }
+    }, {
+      field: "sorter",
+      title: l("designer.setting.sortableColumn"),
+      width: 90,
+      align: "center",
+      slots: {
+        default({
+          row: e
+        }) {
+          return i(n("a-switch"), {
+            checked: e.sorter,
+            "onUpdate:checked": (t) => e.sorter = t
+          }, null);
+        }
+      }
+    }, {
+      field: "resizable",
+      title: l("designer.setting.resizableColumn"),
+      width: 100,
+      align: "center",
+      slots: {
+        default({
+          row: e
+        }) {
+          return i(n("a-switch"), {
+            checked: e.resizable,
+            "onUpdate:checked": (t) => e.resizable = t
+          }, null);
+        }
+      }
+    }, {
+      field: "ellipsis",
+      title: l("designer.setting.ellipsisColumn"),
+      width: 140,
+      align: "center",
+      slots: {
+        default({
+          row: e
+        }) {
+          return i(n("a-switch"), {
+            checked: e.ellipsis,
+            "onUpdate:checked": (t) => e.ellipsis = t
+          }, null);
+        }
+      }
+    }, {
+      field: "fixed",
+      title: l("designer.setting.fixedColumn"),
+      width: 100,
+      slots: {
+        default({
+          row: e
+        }) {
+          let t, s;
+          return i(n("a-select"), {
+            value: e.fixed,
+            "onUpdate:value": (p) => e.fixed = p,
+            allowClear: !0,
+            style: "width: 100%"
+          }, {
+            default: () => [i(n("a-select-option"), {
+              value: "left"
+            }, g(t = l("designer.setting.fixedLeft")) ? t : {
+              default: () => [t]
+            }), i(n("a-select-option"), {
+              value: "right"
+            }, g(s = l("designer.setting.fixedRight")) ? s : {
+              default: () => [s]
+            })]
+          });
+        }
+      }
+    }, {
+      field: "align",
+      title: l("designer.setting.alignTypeOfColumn"),
+      width: 100,
+      slots: {
+        default({
+          row: e
+        }) {
+          return i(n("a-select"), {
+            value: e.align,
+            "onUpdate:value": (t) => e.align = t,
+            options: y,
+            style: "width: 100%"
+          }, null);
+        }
+      }
+    }, {
+      field: "customRender",
+      title: l("designer.setting.customRender"),
+      width: 100,
+      align: "center",
+      fixed: "right",
+      slots: {
+        default({
+          row: e,
+          rowIndex: t
+        }) {
+          let s;
+          return i(n("a-button"), {
+            class: [{
+              "button-text-highlight": !!e.customRender
+            }],
+            onClick: () => U(e),
+            size: "small",
+            shape: "round"
+          }, g(s = l("designer.setting.edit")) ? s : {
+            default: () => [s]
+          });
+        }
+      }
+    }, {
+      field: "action",
+      title: l("designer.setting.actionColumn"),
+      width: 80,
+      fixed: "right",
+      align: "center",
+      slots: {
+        default({
+          row: e
+        }) {
+          let t;
+          return i(n("a-button"), {
+            type: "link",
+            onClick: () => I(e),
+            size: "small"
+          }, g(t = l("designer.setting.delete")) ? t : {
+            default: () => [t]
+          });
+        }
+      }
+    }], z = N(() => ({
+      columnConfig: {
+        resizable: !0
       },
-      {
-        title: t("designer.setting.alignTypeOfColumn"),
-        dataIndex: "align",
-        resizable: !0,
-        width: 100
+      rowConfig: {
+        drag: !0
       },
-      {
-        title: t("designer.setting.customRender"),
-        dataIndex: "customRender",
-        width: 120,
-        resizable: !0,
-        fixed: "right"
+      cellConfig: {
+        height: 50
       },
-      {
-        title: t("designer.setting.actionColumn"),
-        dataIndex: "action",
-        width: 80,
-        fixed: "right"
-      }
-    ], 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 = {
-        isAutoWidth: !1,
+      // data: tableColumns.value,
+      size: "mini",
+      columns: R,
+      clickRowCheck: !1
+    })), {
+      tableRef: x,
+      register: T,
+      setTableValue: M
+    } = G({
+      props: z,
+      callbacks: {}
+    }), U = (e) => {
+      var t;
+      m.value = e, (t = b.value) == null || t.open(e.customRender || "");
+    }, D = (e) => {
+      m.value && (m.value.customRender = e);
+    }, S = () => {
+      const e = {
+        isAutoWidth: !0,
         columnId: (/* @__PURE__ */ new Date()).getTime(),
         show: !0,
         width: 150,
@@ -117,217 +286,80 @@ const X = { class: "table-wrap" }, Y = {
         title: "标题名",
         dataIndex: "",
         resizable: !0,
+        ellipsis: !1,
         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);
+      v.value.push(e), _.value.emitHistoryChange();
+    }, I = (e) => {
+      if (v.value.length === 1)
+        return Q.warning(l("designer.setting.onlyOneColumnCannotBeDeleted")), !1;
+      x.value.remove(e);
+    }, V = () => {
+      C.value.tableColumns = x.value.getFullData() || [], r.value = !1;
+    }, w = async () => {
+      r.value = !0, await L(), setTimeout(() => {
+        M(P(C.value.tableColumns));
+      }, 100);
     };
-    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 k({
+      openSetting: w
+    }), (e, t) => {
+      const s = n("a-button"), p = n("a-form-item");
+      return j(), O(B, null, [i(p, {
+        label: o(l)("designer.setting.tableColEdit")
+      }, {
+        default: a(() => [i(s, {
+          type: "primary",
+          shape: "round",
+          onClick: w
+        }, {
+          default: a(() => [c(f(o(l)("designer.setting.editAction")), 1)]),
+          _: 1
+        })]),
+        _: 1
+      }, 8, ["label"]), i(o(J), {
+        title: o(l)("designer.setting.tableColEdit"),
+        visible: r.value,
+        "onUpdate:visible": t[2] || (t[2] = (h) => r.value = h),
+        width: "1280px",
+        height: "70vh"
+      }, {
+        footerRight: a(() => [i(s, {
+          size: "default",
+          onClick: t[1] || (t[1] = (h) => r.value = !1)
+        }, {
+          default: a(() => [c(f(o(l)("designer.hint.cancel")), 1)]),
+          _: 1
+        }), i(s, {
+          size: "default",
+          type: "primary",
+          onClick: V
         }, {
-          default: d(() => [
-            o(p, {
-              type: "primary",
-              shape: "round",
-              onClick: z
-            }, {
-              default: d(() => [
-                v(m(n(t)("designer.setting.editAction")), 1)
-              ]),
-              _: 1
-            })
-          ]),
+          default: a(() => [c(f(o(l)("designer.hint.confirm")), 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"
+        })]),
+        default: a(() => [i(o(K), {
+          onRegister: o(T)
+        }, null, 8, ["onRegister"]), F("div", Y, [i(s, {
+          title: o(l)("designer.setting.addTableColumn"),
+          type: "primary",
+          size: "medium",
+          onClick: t[0] || (t[0] = (h) => S())
         }, {
-          footerRight: d(() => [
-            o(p, {
-              size: "default",
-              onClick: g[1] || (g[1] = (i) => f.value = !1)
-            }, {
-              default: d(() => [
-                v(m(n(t)("designer.hint.cancel")), 1)
-              ]),
-              _: 1
-            }),
-            o(p, {
-              size: "default",
-              type: "primary",
-              onClick: B
-            }, {
-              default: d(() => [
-                v(m(n(t)("designer.hint.confirm")), 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"])
-              ])
-            ])
-          ]),
+          default: a(() => [c(f(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"]), i(H, {
+        onSave: D,
+        ref_key: "CodeModalEditorRef",
+        ref: b,
+        title: o(l)("designer.setting.renderFunction"),
+        "fn-params": "scope"
+      }, null, 8, ["title"])], 64);
     };
   }
 });
 export {
-  de as default
+  oe as default
 };