@kp-ui/lowcode 1.0.20 → 1.0.23

package/src/components/form-designer/setting-panel/form-setting.vue.js

@@ -0,0 +1,513 @@
+import O from "../../../utils/i18n.js";
+import U from "../../code-editor/index.vue.js";
+import { insertGlobalFunctionsToHtml as x, insertCustomCssToHead as E, deepClone as w } from "../../../utils/util.js";
+import { resolveComponent as m, createElementBlock as v, openBlock as C, createVNode as t, createCommentVNode as p, withModifiers as M, withCtx as s, createBlock as z, createTextVNode as f, toDisplayString as g, normalizeClass as c, createElementVNode as y } from "vue";
+import j from "../../../../_virtual/_plugin-vue_export-helper.js";
+const S = {
+  name: "form-setting",
+  mixins: [O],
+  components: {
+    CodeEditor: U
+  },
+  props: {
+    designer: Object,
+    formConfig: Object
+  },
+  inject: ["getDesignerConfig"],
+  data() {
+    return {
+      designerConfig: this.getDesignerConfig(),
+      formActiveCollapseNames: ["1", "2"],
+      formSizes: [
+        { label: "default", value: "middle" },
+        { label: "large", value: "large" },
+        { label: "small", value: "small" }
+      ],
+      showEditFormCssDialogFlag: !1,
+      formCssCode: "",
+      cssClassList: [],
+      showEditFunctionsDialogFlag: !1,
+      functionsCode: "",
+      showFormEventDialogFlag: !1,
+      formEventHandlerCode: "",
+      curEventName: "",
+      eventParamsMap: {
+        onFormCreated: "onFormCreated() {",
+        onFormMounted: "onFormMounted() {",
+        onFormDataChange: "onFormDataChange(fieldName, newValue, oldValue, formModel, subFormName, subFormRowIndex) {"
+        //'onFormValidate':     'onFormValidate() {',
+      }
+    };
+  },
+  created() {
+    this.designer.handleEvent("form-json-imported", () => {
+      this.formCssCode = this.formConfig.cssCode, E(this.formCssCode), this.extractCssClass(), this.designer.emitEvent("form-css-updated", w(this.cssClassList));
+    });
+  },
+  mounted() {
+    setTimeout(() => {
+      this.formCssCode = this.formConfig.cssCode, E(this.formCssCode), this.extractCssClass(), this.designer.emitEvent("form-css-updated", w(this.cssClassList));
+    }, 1200);
+  },
+  methods: {
+    getFormEventHandled(o) {
+      return !!this.formConfig[o] && this.formConfig[o].length > 0;
+    },
+    showEventCollapse() {
+      return this.designerConfig.eventCollapse === void 0 ? !0 : !!this.designerConfig.eventCollapse;
+    },
+    editFormCss() {
+      this.formCssCode = this.designer.formConfig.cssCode, this.showEditFormCssDialogFlag = !0;
+    },
+    extractCssClass() {
+      const o = /\..*{/g, e = this.formCssCode.match(o), i = [];
+      e && e.length > 0 && e.forEach((_) => {
+        const l = _.split(",");
+        l.length > 0 && l.forEach((d) => {
+          const r = d.trim();
+          if (r.indexOf(".", 1) !== -1) {
+            const a = r.substring(
+              r.indexOf(".") + 1,
+              r.indexOf(".", 1)
+            );
+            a && i.push(a.trim());
+          } else if (r.indexOf(" ") !== -1) {
+            const a = r.substring(r.indexOf(".") + 1, r.indexOf(" "));
+            a && i.push(a.trim());
+          } else if (r.indexOf("{") !== -1) {
+            const a = r.substring(r.indexOf(".") + 1, r.indexOf("{"));
+            i.push(a.trim());
+          } else {
+            const a = r.substring(r.indexOf(".") + 1);
+            i.push(a.trim());
+          }
+        });
+      });
+    },
+    saveFormCss() {
+      this.extractCssClass(), this.designer.formConfig.cssCode = this.formCssCode, E(this.formCssCode), this.showEditFormCssDialogFlag = !1, this.designer.emitEvent("form-css-updated", w(this.cssClassList));
+    },
+    editGlobalFunctions() {
+      this.functionsCode = this.designer.formConfig.functions, this.showEditFunctionsDialogFlag = !0;
+    },
+    saveGlobalFunctions() {
+      const o = this.$refs.gfEditor.getEditorAnnotations();
+      let e = !1;
+      if (o && o.length > 0 && (o.forEach((i) => {
+        i.type === "error" && (e = !0);
+      }), e)) {
+        this.$message.error(this.i18nt("designer.setting.syntaxCheckWarning"));
+        return;
+      }
+      this.designer.formConfig.functions = this.functionsCode, x(this.functionsCode), this.showEditFunctionsDialogFlag = !1;
+    },
+    editFormEventHandler(o) {
+      this.curEventName = o, this.formEventHandlerCode = this.formConfig[o], this.showFormEventDialogFlag = !0;
+    },
+    saveFormEventHandler() {
+      const o = this.$refs.ecEditor.getEditorAnnotations();
+      let e = !1;
+      if (o && o.length > 0 && (o.forEach((i) => {
+        i.type === "error" && (e = !0);
+      }), e)) {
+        this.$message.error(this.i18nt("designer.setting.syntaxCheckWarning"));
+        return;
+      }
+      this.formConfig[this.curEventName] = this.formEventHandlerCode, this.showFormEventDialogFlag = !1;
+    }
+  }
+}, G = {
+  key: 0,
+  class: ""
+}, L = { class: "dialog-footer" }, P = {
+  key: 1,
+  class: ""
+}, W = { class: "dialog-footer" }, T = {
+  key: 2,
+  class: ""
+}, B = { class: "dialog-footer" };
+function K(o, e, i, _, l, d) {
+  const r = m("a-select"), a = m("a-form-item"), h = m("a-radio-button"), k = m("a-radio-group"), V = m("a-input-number"), u = m("a-button"), D = m("a-collapse-panel"), A = m("a-collapse"), N = m("a-form"), H = m("a-alert"), F = m("code-editor"), b = m("a-modal");
+  return C(), v("div", null, [
+    t(N, {
+      model: i.formConfig,
+      labelAlign: "left",
+      "label-width": "120px",
+      class: "setting-form tpf-form",
+      onSubmit: e[9] || (e[9] = M(() => {
+      }, ["prevent"]))
+    }, {
+      default: s(() => [
+        t(A, {
+          activeKey: l.formActiveCollapseNames,
+          "onUpdate:activeKey": e[8] || (e[8] = (n) => l.formActiveCollapseNames = n),
+          class: "setting-collapse"
+        }, {
+          default: s(() => [
+            t(D, {
+              key: "1",
+              header: o.i18nt("designer.setting.基本属性")
+            }, {
+              default: s(() => [
+                t(a, {
+                  label: o.i18nt("designer.setting.formSize")
+                }, {
+                  default: s(() => [
+                    t(r, {
+                      value: i.formConfig.size,
+                      "onUpdate:value": e[0] || (e[0] = (n) => i.formConfig.size = n),
+                      options: l.formSizes,
+                      allowClear: ""
+                    }, null, 8, ["value", "options"])
+                  ]),
+                  _: 1
+                }, 8, ["label"]),
+                t(a, {
+                  label: o.i18nt("designer.setting.labelPosition")
+                }, {
+                  default: s(() => [
+                    t(k, {
+                      value: i.formConfig.labelPosition,
+                      "onUpdate:value": e[1] || (e[1] = (n) => i.formConfig.labelPosition = n),
+                      class: "radio-group-custom"
+                    }, {
+                      default: s(() => [
+                        t(h, { value: "horizontal" }, {
+                          default: s(() => [
+                            f("水平")
+                          ]),
+                          _: 1
+                        }),
+                        t(h, { value: "vertical" }, {
+                          default: s(() => [
+                            f("垂直")
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["value"])
+                  ]),
+                  _: 1
+                }, 8, ["label"]),
+                t(a, {
+                  label: o.i18nt("designer.setting.labelAlign")
+                }, {
+                  default: s(() => [
+                    t(k, {
+                      value: i.formConfig.labelAlign,
+                      "onUpdate:value": e[2] || (e[2] = (n) => i.formConfig.labelAlign = n),
+                      class: "radio-group-custom"
+                    }, {
+                      default: s(() => [
+                        t(h, { value: "left" }, {
+                          default: s(() => [
+                            f(g(o.i18nt("designer.setting.leftAlign")), 1)
+                          ]),
+                          _: 1
+                        }),
+                        t(h, { value: "right" }, {
+                          default: s(() => [
+                            f(g(o.i18nt("designer.setting.rightAlign")), 1)
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["value"])
+                  ]),
+                  _: 1
+                }, 8, ["label"]),
+                t(a, {
+                  label: o.i18nt("designer.setting.labelWidth")
+                }, {
+                  default: s(() => [
+                    t(V, {
+                      value: i.formConfig.labelWidth,
+                      "onUpdate:value": e[3] || (e[3] = (n) => i.formConfig.labelWidth = n),
+                      min: 0,
+                      style: { width: "100%" },
+                      allowClear: ""
+                    }, null, 8, ["value"])
+                  ]),
+                  _: 1
+                }, 8, ["label"]),
+                t(a, {
+                  label: o.i18nt("designer.setting.formCss")
+                }, {
+                  default: s(() => [
+                    t(u, {
+                      type: "info",
+                      shape: "round",
+                      onClick: d.editFormCss,
+                      class: c([{ "button-text-highlight": !!i.formConfig.cssCode }])
+                    }, {
+                      default: s(() => [
+                        f(g(o.i18nt("designer.setting.addCss")), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["onClick", "class"])
+                  ]),
+                  _: 1
+                }, 8, ["label"]),
+                t(a, {
+                  label: o.i18nt("designer.setting.customClass")
+                }, {
+                  default: s(() => [
+                    t(r, {
+                      value: i.formConfig.customClass,
+                      "onUpdate:value": e[4] || (e[4] = (n) => i.formConfig.customClass = n),
+                      allowClear: "",
+                      mode: "tags",
+                      onChange: d.extractCssClass,
+                      options: l.cssClassList
+                    }, null, 8, ["value", "onChange", "options"])
+                  ]),
+                  _: 1
+                }, 8, ["label"]),
+                t(a, {
+                  label: o.i18nt("designer.setting.globalFunctions")
+                }, {
+                  default: s(() => [
+                    t(u, {
+                      type: "info",
+                      class: c([{ "button-text-highlight": !!i.formConfig.functions }]),
+                      shape: "round",
+                      onClick: d.editGlobalFunctions
+                    }, {
+                      default: s(() => [
+                        f(g(o.i18nt("designer.setting.addEventHandler")), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["class", "onClick"])
+                  ]),
+                  _: 1
+                }, 8, ["label"])
+              ]),
+              _: 1
+            }, 8, ["header"]),
+            d.showEventCollapse() ? (C(), z(D, {
+              key: "2",
+              header: o.i18nt("designer.setting.事件属性")
+            }, {
+              default: s(() => [
+                t(a, {
+                  label: "onFormCreated",
+                  "label-width": "150px"
+                }, {
+                  default: s(() => [
+                    t(u, {
+                      type: "info",
+                      plain: "",
+                      shape: "round",
+                      class: c([d.getFormEventHandled("onFormCreated") ? "button-text-highlight" : ""]),
+                      onClick: e[5] || (e[5] = (n) => d.editFormEventHandler("onFormCreated"))
+                    }, {
+                      default: s(() => [
+                        f(g(o.i18nt("designer.setting.addEventHandler")), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["class"])
+                  ]),
+                  _: 1
+                }),
+                t(a, {
+                  label: "onFormMounted",
+                  "label-width": "150px"
+                }, {
+                  default: s(() => [
+                    t(u, {
+                      type: "info",
+                      shape: "round",
+                      class: c([d.getFormEventHandled("onFormMounted") ? "button-text-highlight" : ""]),
+                      onClick: e[6] || (e[6] = (n) => d.editFormEventHandler("onFormMounted"))
+                    }, {
+                      default: s(() => [
+                        f(g(o.i18nt("designer.setting.addEventHandler")), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["class"])
+                  ]),
+                  _: 1
+                }),
+                t(a, {
+                  label: "onFormDataChange",
+                  "label-width": "150px"
+                }, {
+                  default: s(() => [
+                    t(u, {
+                      type: "info",
+                      plain: "",
+                      shape: "round",
+                      class: c([d.getFormEventHandled("onFormDataChange") ? "button-text-highlight" : ""]),
+                      onClick: e[7] || (e[7] = (n) => d.editFormEventHandler("onFormDataChange"))
+                    }, {
+                      default: s(() => [
+                        f(g(o.i18nt("designer.setting.addEventHandler")), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["class"])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["header"])) : p("", !0)
+          ]),
+          _: 1
+        }, 8, ["activeKey"])
+      ]),
+      _: 1
+    }, 8, ["model"]),
+    l.showFormEventDialogFlag ? (C(), v("div", G, [
+      t(b, {
+        title: o.i18nt("designer.setting.editFormEventHandler"),
+        visible: l.showFormEventDialogFlag,
+        "onUpdate:visible": e[12] || (e[12] = (n) => l.showFormEventDialogFlag = n),
+        "show-close": !0,
+        "custom-class": "drag-dialog small-padding-dialog",
+        "append-to-body": "",
+        "close-on-click-modal": !1,
+        "close-on-press-escape": !1,
+        "destroy-on-close": !0,
+        width: 800
+      }, {
+        footer: s(() => [
+          y("div", L, [
+            t(u, {
+              onClick: e[11] || (e[11] = (n) => l.showFormEventDialogFlag = !1)
+            }, {
+              default: s(() => [
+                f(g(o.i18nt("designer.hint.cancel")), 1)
+              ]),
+              _: 1
+            }),
+            t(u, {
+              type: "primary",
+              onClick: d.saveFormEventHandler
+            }, {
+              default: s(() => [
+                f(g(o.i18nt("designer.hint.confirm")), 1)
+              ]),
+              _: 1
+            }, 8, ["onClick"])
+          ])
+        ]),
+        default: s(() => [
+          t(H, {
+            type: "info",
+            closable: !1,
+            message: "form." + l.eventParamsMap[l.curEventName]
+          }, null, 8, ["message"]),
+          t(F, {
+            mode: "javascript",
+            readonly: !1,
+            modelValue: l.formEventHandlerCode,
+            "onUpdate:modelValue": e[10] || (e[10] = (n) => l.formEventHandlerCode = n),
+            ref: "ecEditor"
+          }, null, 8, ["modelValue"]),
+          t(H, {
+            type: "info",
+            closable: !1,
+            message: "}"
+          })
+        ]),
+        _: 1
+      }, 8, ["title", "visible"])
+    ])) : p("", !0),
+    l.showEditFormCssDialogFlag ? (C(), v("div", P, [
+      t(b, {
+        title: o.i18nt("designer.setting.formCss"),
+        visible: l.showEditFormCssDialogFlag,
+        "onUpdate:visible": e[15] || (e[15] = (n) => l.showEditFormCssDialogFlag = n),
+        "show-close": !0,
+        "custom-class": "drag-dialog small-padding-dialog",
+        "append-to-body": "",
+        "close-on-click-modal": !1,
+        "close-on-press-escape": !1,
+        "destroy-on-close": !0
+      }, {
+        footer: s(() => [
+          y("div", W, [
+            t(u, {
+              onClick: e[14] || (e[14] = (n) => l.showEditFormCssDialogFlag = !1)
+            }, {
+              default: s(() => [
+                f(g(o.i18nt("designer.hint.cancel")), 1)
+              ]),
+              _: 1
+            }),
+            t(u, {
+              type: "primary",
+              onClick: d.saveFormCss
+            }, {
+              default: s(() => [
+                f(g(o.i18nt("designer.hint.confirm")), 1)
+              ]),
+              _: 1
+            }, 8, ["onClick"])
+          ])
+        ]),
+        default: s(() => [
+          t(F, {
+            mode: "css",
+            readonly: !1,
+            modelValue: l.formCssCode,
+            "onUpdate:modelValue": e[13] || (e[13] = (n) => l.formCssCode = n)
+          }, null, 8, ["modelValue"])
+        ]),
+        _: 1
+      }, 8, ["title", "visible"])
+    ])) : p("", !0),
+    l.showEditFunctionsDialogFlag ? (C(), v("div", T, [
+      t(b, {
+        title: o.i18nt("designer.setting.globalFunctions"),
+        visible: l.showEditFunctionsDialogFlag,
+        "onUpdate:visible": e[18] || (e[18] = (n) => l.showEditFunctionsDialogFlag = n),
+        width: 600,
+        "show-close": !0,
+        "custom-class": "drag-dialog small-padding-dialog",
+        "append-to-body": "",
+        "close-on-click-modal": !1,
+        "close-on-press-escape": !1,
+        "destroy-on-close": !0
+      }, {
+        footer: s(() => [
+          y("div", B, [
+            t(u, {
+              onClick: e[17] || (e[17] = (n) => l.showEditFunctionsDialogFlag = !1)
+            }, {
+              default: s(() => [
+                f(g(o.i18nt("designer.hint.cancel")), 1)
+              ]),
+              _: 1
+            }),
+            t(u, {
+              type: "primary",
+              onClick: d.saveGlobalFunctions
+            }, {
+              default: s(() => [
+                f(g(o.i18nt("designer.hint.confirm")), 1)
+              ]),
+              _: 1
+            }, 8, ["onClick"])
+          ])
+        ]),
+        default: s(() => [
+          t(F, {
+            mode: "javascript",
+            readonly: !1,
+            modelValue: l.functionsCode,
+            "onUpdate:modelValue": e[16] || (e[16] = (n) => l.functionsCode = n),
+            ref: "gfEditor"
+          }, null, 8, ["modelValue"])
+        ]),
+        _: 1
+      }, 8, ["title", "visible"])
+    ])) : p("", !0)
+  ]);
+}
+const X = /* @__PURE__ */ j(S, [["render", K]]);
+export {
+  X as default
+};