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

package/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue.js

@@ -1,209 +1,157 @@
-import { SvgIcon as F } from "tmgc2-share";
-import C from "../../../../utils/i18n.js";
-import { resolveComponent as c, createElementBlock as l, openBlock as s, normalizeClass as u, createBlock as W, createCommentVNode as r, withModifiers as m, withCtx as b, renderSlot as _, createElementVNode as a, Fragment as f, createVNode as o, toDisplayString as h } from "vue";
+import _ from "./form-item-wrapper.vue2.js";
+import { createElementBlock as t, openBlock as l, withModifiers as c, normalizeClass as v, createVNode as n, createCommentVNode as s, withCtx as f, renderSlot as k, createElementVNode as a, Fragment as g, toDisplayString as r } from "vue";
 /* empty css                       */
-import p from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const y = {
-  name: "form-item-wrapper",
-  mixins: [C],
-  components: {
-    SvgIcon: F
-  },
-  props: {
-    field: Object,
-    designer: Object,
-    parentWidget: Object,
-    parentList: Array,
-    indexOfParentList: Number,
-    designState: {
-      type: Boolean,
-      default: !1
-    },
-    subFormRowIndex: {
-      /* 子表单组件行索引，从0开始计数 */
-      type: Number,
-      default: -1
-    },
-    subFormColIndex: {
-      /* 子表单组件列索引，从0开始计数 */
-      type: Number,
-      default: -1
-    },
-    subFormRowId: {
-      /* 子表单组件行Id，唯一id且不可变 */
-      type: String,
-      default: ""
-    },
-    rules: Array
-  },
-  inject: ["getFormConfig", "getSubFormFieldFlag", "getSubFormName"],
-  computed: {
-    formConfig() {
-      return this.getFormConfig();
-    },
-    selected() {
-      return !!this.designer && this.field.id === this.designer.selectedId;
-    },
-    label() {
-      return this.field.options.labelHidden ? "" : this.field.options.label;
-    },
-    labelWidth() {
-      return this.field.options.labelHidden ? 0 : this.field.options.labelWidth ? this.field.options.labelWidth : this.designer ? this.designer.formConfig.labelWidth : this.formConfig.labelWidth;
-    },
-    labelAlign() {
-      return this.field.options.labelAlign ? this.field.options.labelAlign : this.designer ? this.designer.formConfig.labelAlign || "right" : this.formConfig.labelAlign || "right";
-    },
-    size() {
-      return this.field.options.size ? this.field.options.size : this.designer ? this.designer.formConfig.size || "middle" : this.formConfig.size || "middle";
-    },
-    customClass() {
-      var t;
-      return ((t = this.field.options.customClass) == null ? void 0 : t.join(" ")) || "";
-    },
-    subFormName() {
-      return this.getSubFormName ? this.getSubFormName() : "";
-    },
-    subFormItemFlag() {
-      return this.getSubFormFieldFlag ? this.getSubFormFieldFlag() : !1;
-    }
-  },
-  created() {
-  },
-  methods: {
-    // handleHidden() {
-    //   if (this.designState) {
-    //     return false;
-    //   }
-    //   const { onHidden, hidden } = this.field.options;
-    //   if (hidden) return true;
-    //   if (onHidden) {
-    //     const onHiddenFn = new Function(onHidden);
-    //     return onHiddenFn.call(this);
-    //   }
-    //   return false;
-    // },
-    selectField(t) {
-      this.designer && (this.designer.setSelected(t), this.designer.emitEvent("field-selected", this.parentWidget));
-    },
-    selectParentWidget() {
-      this.parentWidget ? this.designer.setSelected(this.parentWidget) : this.designer.clearSelected();
-    },
-    moveUpWidget() {
-      this.designer.moveUpWidget(this.parentList, this.indexOfParentList), this.designer.emitHistoryChange();
-    },
-    moveDownWidget() {
-      this.designer.moveDownWidget(this.parentList, this.indexOfParentList), this.designer.emitHistoryChange();
-    },
-    removeFieldWidget() {
-      if (this.parentList) {
-        let t = null;
-        this.parentList.length === 1 ? this.parentWidget && (t = this.parentWidget) : this.parentList.length === 1 + this.indexOfParentList ? t = this.parentList[this.indexOfParentList - 1] : t = this.parentList[this.indexOfParentList + 1], this.$nextTick(() => {
-          this.parentList.splice(this.indexOfParentList, 1), this.designer.setSelected(t), this.designer.emitHistoryChange();
-        });
-      }
-    },
-    getPropName() {
-      return this.subFormItemFlag && !this.designState ? this.subFormName + "." + this.subFormRowIndex + "." + this.field.options.name : this.field.options.name;
-    }
-  }
-}, k = { class: "label-box" }, L = {
+import h from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const I = { class: "label-box" }, w = {
   key: 0,
   class: "custom-label"
-}, I = { class: "label-text" }, S = { class: "label-text" }, x = {
+}, y = { class: "label-text" }, C = { class: "label-text" }, W = {
   key: 1,
   class: "label-text"
-}, w = {
+}, S = {
   key: 0,
   class: "field-action"
-}, P = ["title"], N = ["title"], A = ["title"], O = ["title"], z = {
+}, x = ["title"], L = ["title"], P = ["title"], z = ["title"], D = {
   key: 1,
   class: "drag-handler background-opacity"
-}, H = ["title"], j = { key: 0 };
-function D(t, n, e, B, U, i) {
-  const d = c("svg-icon"), v = c("a-form-item");
-  return s(), l("div", {
-    class: u(["field-wrapper", { "design-time-bottom-margin": !!this.designer }])
-  }, [
-    e.field.formItemFlag ? (s(), W(v, {
-      key: 0,
-      labelCol: { style: { width: i.labelWidth + "px" } },
-      title: i.label,
-      size: i.size,
-      rules: e.rules,
-      name: i.getPropName(),
-      labelAlign: i.labelAlign,
-      class: u([i.selected ? "selected" : "", i.customClass]),
-      onClick: n[0] || (n[0] = m((g) => i.selectField(e.field), ["stop"]))
-    }, {
-      label: b(() => [
-        a("div", k, [
-          e.field.options.labelIconClass ? (s(), l("span", L, [
-            e.field.options.labelIconPosition === "front" ? (s(), l(f, { key: 0 }, [
-              o(d, {
-                "icon-class": e.field.options.labelIconClass
-              }, null, 8, ["icon-class"]),
-              a("div", I, h(i.label), 1)
-            ], 64)) : e.field.options.labelIconPosition === "rear" ? (s(), l(f, { key: 1 }, [
-              a("div", S, h(i.label), 1),
-              o(d, {
-                "icon-class": e.field.options.labelIconClass
-              }, null, 8, ["icon-class"])
-            ], 64)) : r("", !0)
-          ])) : (s(), l("div", x, h(i.label), 1))
-        ])
-      ]),
-      default: b(() => [
-        _(t.$slots, "default", {}, void 0, !0)
-      ]),
-      _: 3
-    }, 8, ["labelCol", "title", "size", "rules", "name", "labelAlign", "class"])) : r("", !0),
-    this.designer ? (s(), l(f, { key: 1 }, [
-      e.designer.selectedId === e.field.id ? (s(), l("div", w, [
-        a("i", {
-          title: t.i18nt("designer.hint.selectParentWidget"),
-          onClick: n[1] || (n[1] = m((g) => i.selectParentWidget(e.field), ["stop"]))
-        }, [
-          o(d, { "icon-class": "icon-el-back" })
-        ], 8, P),
-        e.parentList && e.parentList.length > 1 ? (s(), l("i", {
-          key: 0,
-          title: t.i18nt("designer.hint.moveUpWidget"),
-          onClick: n[2] || (n[2] = m((g) => i.moveUpWidget(e.field), ["stop"]))
-        }, [
-          o(d, { "icon-class": "icon-el-move-up" })
-        ], 8, N)) : r("", !0),
-        e.parentList && e.parentList.length > 1 ? (s(), l("i", {
-          key: 1,
-          title: t.i18nt("designer.hint.moveDownWidget"),
-          onClick: n[3] || (n[3] = m((g) => i.moveDownWidget(e.field), ["stop"]))
-        }, [
-          o(d, { "icon-class": "icon-el-move-down" })
-        ], 8, A)) : r("", !0),
-        a("i", {
-          title: t.i18nt("designer.hint.remove"),
-          onClick: n[4] || (n[4] = m((...g) => i.removeFieldWidget && i.removeFieldWidget(...g), ["stop"]))
-        }, [
-          o(d, { "icon-class": "icon-el-delete" })
-        ], 8, O)
-      ])) : r("", !0),
-      e.designer.selectedId === e.field.id ? (s(), l("div", z, [
-        a("i", {
-          title: t.i18nt("designer.hint.dragHandler")
-        }, [
-          o(d, { "icon-class": "icon-el-drag-move" })
-        ], 8, H),
-        a("i", null, h(t.i18n2t(
-          `designer.widgetLabel.${e.field.type}`,
-          `extension.widgetLabel.${e.field.type}`
-        )), 1),
-        e.field.options.hidden === !0 ? (s(), l("i", j, [
-          o(d, { "icon-class": "icon-el-hide" })
-        ])) : r("", !0)
-      ])) : r("", !0)
-    ], 64)) : r("", !0)
-  ], 2);
+}, N = ["title"], U = { key: 0 };
+function A(b, o, i, e, F, V) {
+  var m;
+  return l(), t(
+    "div",
+    {
+      class: v(["field-wrapper", {
+        "design-time-bottom-margin": e.designState,
+        "field-wrapper-widget": e.designState,
+        selected: e.selected
+      }]),
+      onClick: o[4] || (o[4] = c((d) => e.selectWidget(i.field), ["stop"]))
+    },
+    [
+      n(e.FormItem, {
+        labelCol: { style: { width: e.labelWidth + "px" } },
+        title: e.label,
+        size: e.size,
+        rules: i.rules,
+        name: e.getPropName,
+        labelAlign: e.labelAlign,
+        class: v([e.customClass])
+      }, {
+        label: f(() => [
+          a("div", I, [
+            i.field.options.labelIconClass ? (l(), t("span", w, [
+              i.field.options.labelIconPosition === "front" ? (l(), t(
+                g,
+                { key: 0 },
+                [
+                  n(e.SvgIcon, {
+                    "icon-class": i.field.options.labelIconClass
+                  }, null, 8, ["icon-class"]),
+                  a(
+                    "div",
+                    y,
+                    r(e.label),
+                    1
+                    /* TEXT */
+                  )
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              )) : i.field.options.labelIconPosition === "rear" ? (l(), t(
+                g,
+                { key: 1 },
+                [
+                  a(
+                    "div",
+                    C,
+                    r(e.label),
+                    1
+                    /* TEXT */
+                  ),
+                  n(e.SvgIcon, {
+                    "icon-class": i.field.options.labelIconClass
+                  }, null, 8, ["icon-class"])
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              )) : s("v-if", !0)
+            ])) : (l(), t(
+              "div",
+              W,
+              r(e.label),
+              1
+              /* TEXT */
+            ))
+          ])
+        ]),
+        default: f(() => [
+          k(b.$slots, "default", {}, void 0, !0)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["labelCol", "title", "size", "rules", "name", "labelAlign", "class"]),
+      e.designState ? (l(), t(
+        g,
+        { key: 0 },
+        [
+          ((m = e.designer) == null ? void 0 : m.selectedId) === i.field.id ? (l(), t("div", S, [
+            a("i", {
+              title: e.i18nt("designer.hint.selectParentWidget"),
+              onClick: o[0] || (o[0] = c((...d) => e.selectParentWidget && e.selectParentWidget(...d), ["stop"]))
+            }, [
+              n(e.SvgIcon, { "icon-class": "icon-el-back" })
+            ], 8, x),
+            i.parentList && i.parentList.length > 1 ? (l(), t("i", {
+              key: 0,
+              title: e.i18nt("designer.hint.moveUpWidget"),
+              onClick: o[1] || (o[1] = c((...d) => e.moveUpWidget && e.moveUpWidget(...d), ["stop"]))
+            }, [
+              n(e.SvgIcon, { "icon-class": "icon-el-move-up" })
+            ], 8, L)) : s("v-if", !0),
+            i.parentList && i.parentList.length > 1 ? (l(), t("i", {
+              key: 1,
+              title: e.i18nt("designer.hint.moveDownWidget"),
+              onClick: o[2] || (o[2] = c((...d) => e.moveDownWidget && e.moveDownWidget(...d), ["stop"]))
+            }, [
+              n(e.SvgIcon, { "icon-class": "icon-el-move-down" })
+            ], 8, P)) : s("v-if", !0),
+            a("i", {
+              title: e.i18nt("designer.hint.remove"),
+              onClick: o[3] || (o[3] = c((...d) => e.removeWidget && e.removeWidget(...d), ["stop"]))
+            }, [
+              n(e.SvgIcon, { "icon-class": "icon-el-delete" })
+            ], 8, z)
+          ])) : s("v-if", !0),
+          e.selected ? (l(), t("div", D, [
+            a("i", {
+              title: e.i18nt("designer.hint.dragHandler")
+            }, [
+              n(e.SvgIcon, { "icon-class": "icon-el-drag-move" })
+            ], 8, N),
+            a(
+              "i",
+              null,
+              r(e.i18n2t(
+                `designer.widgetLabel.${i.field.type}`,
+                `extension.widgetLabel.${i.field.type}`
+              )),
+              1
+              /* TEXT */
+            ),
+            i.field.options.hidden === !0 ? (l(), t("i", U, [
+              n(e.SvgIcon, { "icon-class": "icon-el-hide" })
+            ])) : s("v-if", !0)
+          ])) : s("v-if", !0)
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      )) : s("v-if", !0)
+    ],
+    2
+    /* CLASS */
+  );
 }
-const q = /* @__PURE__ */ p(y, [["render", D], ["__scopeId", "data-v-30542ff6"]]);
+const j = /* @__PURE__ */ h(_, [["render", A], ["__scopeId", "data-v-e14e1a58"], ["__file", "/Users/zhaopeng/dev/kunpeng/tmgc2-web-vfrom/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue"]]);
 export {
-  q as default
+  j as default
 };

package/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue2.js

@@ -0,0 +1,127 @@
+import { defineComponent as O, inject as g, computed as n } from "vue";
+import { SvgIcon as z } from "tmgc2-share";
+import { useI18n as L } from "../../../../utils/i18n.js";
+import { useContainerWidget as j } from "../container-widget/useContainerWidget.js";
+import { FormItem as R } from "ant-design-vue";
+import { useDesigner as D } from "../useFormDesigner.js";
+const J = /* @__PURE__ */ O({
+  name: "form-item-wrapper",
+  __name: "form-item-wrapper",
+  props: {
+    rules: {
+      type: Array,
+      required: !1
+    },
+    widget: {
+      type: null,
+      required: !0
+    },
+    field: {
+      type: null,
+      required: !0
+    },
+    designer: {
+      type: null,
+      required: !1
+    },
+    parentWidget: {
+      type: [Object, null],
+      required: !1,
+      default: null
+    },
+    parentList: {
+      type: [Array, null],
+      required: !1
+    },
+    indexOfParentList: {
+      type: Number,
+      required: !1,
+      default: 0
+    },
+    subFormRowIndex: {
+      type: Number,
+      required: !1
+    },
+    subFormRowId: {
+      type: String,
+      required: !1
+    },
+    subFormColIndex: {
+      type: Number,
+      required: !1
+    }
+  },
+  setup(b, {
+    expose: c
+  }) {
+    c();
+    const {
+      i18nt: F,
+      i18n2t: y
+    } = L(), e = b, s = g("getSubFormName", () => ""), u = g("getSubFormFieldFlag", () => !1), {
+      formConfig: o,
+      designer: W,
+      designState: d
+    } = D(), v = n(() => {
+      var t, r, i, l, p;
+      return (r = (t = e.field) == null ? void 0 : t.options) != null && r.labelHidden ? 0 : (l = (i = e.field) == null ? void 0 : i.options) != null && l.labelWidth ? e.field.options.labelWidth : (p = o.value) == null ? void 0 : p.labelWidth;
+    }), q = n(() => {
+      var t, r, i, l;
+      return (r = (t = e.field) == null ? void 0 : t.options) != null && r.labelHidden ? "" : (l = (i = e.field) == null ? void 0 : i.options) == null ? void 0 : l.label;
+    }), I = n(() => {
+      var t, r, i;
+      return (r = (t = e.field) == null ? void 0 : t.options) != null && r.labelAlign ? e.field.options.labelAlign : ((i = o.value) == null ? void 0 : i.labelAlign) || "right";
+    }), a = n(() => () => s ? s() : ""), S = n(() => {
+      var t, r, i;
+      return (r = (t = e.field) == null ? void 0 : t.options) != null && r.size ? e.field.options.size : ((i = o.value) == null ? void 0 : i.size) || "middle";
+    }), m = n(() => u ? u() : !1), _ = n(() => m.value && !d ? a.value + "." + e.subFormRowIndex + "." + e.field.options.name : e.field.options.name), {
+      customClass: w,
+      selected: x,
+      moveUpWidget: N,
+      selectWidget: A,
+      selectParentWidget: P,
+      removeWidget: h,
+      moveDownWidget: C
+    } = j({
+      widget: e.field,
+      parentWidget: e.parentWidget,
+      indexOfParentList: e.indexOfParentList
+    }), f = {
+      i18nt: F,
+      i18n2t: y,
+      props: e,
+      getSubFormName: s,
+      getSubFormFieldFlag: u,
+      formConfig: o,
+      designer: W,
+      designState: d,
+      labelWidth: v,
+      label: q,
+      labelAlign: I,
+      subFormName: a,
+      size: S,
+      subFormItemFlag: m,
+      getPropName: _,
+      customClass: w,
+      selected: x,
+      moveUpWidget: N,
+      selectWidget: A,
+      selectParentWidget: P,
+      removeWidget: h,
+      moveDownWidget: C,
+      get SvgIcon() {
+        return z;
+      },
+      get FormItem() {
+        return R;
+      }
+    };
+    return Object.defineProperty(f, "__isScriptSetup", {
+      enumerable: !1,
+      value: !0
+    }), f;
+  }
+});
+export {
+  J as default
+};

package/src/components/form-designer/form-widget/field-widget/hooks/useSelect.js

@@ -0,0 +1,136 @@
+import { ref as b, computed as c, unref as z } from "vue";
+import { debounce as F, isArray as P } from "lodash-es";
+import { translateOptionItems as N } from "../../../../../utils/util.js";
+import { useExecFunction as R } from "tmgc2-share";
+function q(t, v) {
+  if (!Array.isArray(t))
+    return -1;
+  let l = -1;
+  return t.forEach((i, r) => {
+    i === v && (l = r);
+  }), l;
+}
+function J({ field: t, designState: v, fieldModel: l }) {
+  const i = b({
+    val: ""
+  }), r = b(!1), a = b({
+    page: 1,
+    pageSize: 20,
+    totalPage: 0,
+    total: 0
+  }), { execHttpFunction: S } = R(), g = async () => {
+    var e;
+    if (!r.value) {
+      if (r.value = !0, t.options.dsEnabled && ((e = t.options.http) != null && e.url))
+        try {
+          const { http: o, dataHandlerCode: n, dataReqHandlerCode: u } = t.options, s = await S(
+            {
+              http: o,
+              dataHandlerCode: n,
+              dataReqHandlerCode: u
+            },
+            {}
+          );
+          if (!s) {
+            r.value = !1;
+            return;
+          }
+          if (P(s)) {
+            p(s);
+            return;
+          }
+          P(s.list) && (t.options.loadingPage ? (a.value.total = s.total || 0, a.value.totalPage = s.totalPage || 0, p([...y(), ...s.list])) : p(s.list));
+        } catch (o) {
+          console.error("err: ", o);
+        }
+      else
+        p([...y()]);
+      r.value = !1;
+    }
+  }, I = F(function() {
+    a.value.page += 1, g();
+  }, 500), w = (e) => {
+    if (!t.options.loadingPage) return;
+    const { target: o } = e, { scrollTop: n, scrollHeight: u, clientHeight: s } = o;
+    if (u - (n + s) <= 30 && a.value.totalPage > a.value.page) {
+      if (a.value.totalPage === a.value.page)
+        return;
+      I();
+    }
+  }, E = c(() => (t == null ? void 0 : t.options.labelKey) || "label"), x = c(() => (t == null ? void 0 : t.options.valueKey) || "value"), H = c(() => (t == null ? void 0 : t.options.childrenKey) || "children"), h = c(() => ({
+    label: (t == null ? void 0 : t.options.labelKey) || "label",
+    value: (t == null ? void 0 : t.options.valueKey) || "value",
+    options: "options"
+  })), m = (e, o) => o[h.value.label].toLowerCase().indexOf(e.toLowerCase()) >= 0, C = () => {
+    a.value = { page: 1, pageSize: 20, total: 0, totalPage: 0 }, p([]);
+  }, L = (e) => {
+    t.options.showSearch && (v || (C(), i.value.val = e, g()));
+  }, A = c(() => {
+    var n;
+    const o = (n = t == null ? void 0 : t.options) == null ? void 0 : n.showSearch;
+    return {
+      loading: r.value,
+      fieldNames: h.value,
+      showSearch: !0,
+      onPopupScroll: w,
+      onSearch: L,
+      filterOption: !o && m,
+      listHeight: 240
+    };
+  }), p = async (e) => {
+    t.options.optionItems = N(
+      e,
+      t.type,
+      t.options.labelKey || "label",
+      t.options.valueKey || "value"
+    );
+  }, y = () => a.value.page === 1 && t.options.dsEnabled ? [] : t.options.optionItems, k = c(() => {
+    if (l.value === null)
+      return "";
+    {
+      let e = "";
+      const { valueKey: o, labelKey: n } = t.options;
+      return t.options.optionItems.forEach((u) => {
+        (u[o] === l.value || q(l.value, u[o]) !== -1) && (e = e === "" ? u[n] : e + " " + u[n]);
+      }), e;
+    }
+  }), K = () => {
+    t.options.dsEnabled && t.options.optionItems.splice(0, t.options.optionItems.length);
+  }, O = (e) => {
+    const o = t.options.optionItems;
+    o && o.length > 0 && o.forEach((n) => {
+      n.value === e && (n.disabled = !0);
+    });
+  };
+  return {
+    selectDefineExpose: {
+      disableOption: O,
+      clearOptionItems: K,
+      enableOption: (e) => {
+        const o = t.options.optionItems;
+        o && o.length > 0 && o.forEach((n) => {
+          n.value === e && (n.disabled = !1);
+        });
+      },
+      keyword: z(i)
+    },
+    disableOption: O,
+    clearOptionItems: K,
+    childrenKey: H,
+    valueKey: x,
+    labelKey: E,
+    optionLabel: k,
+    loadOptions: p,
+    filterOption: m,
+    keyword: i,
+    pager: a,
+    loading: r,
+    fieldNames: h,
+    selectOps: A,
+    initOptionItems: g,
+    getOptionItems: y
+  };
+}
+export {
+  J as useSelect
+};