@kp-ui/lowcode 2.15.0-beta.7 → 2.16.0-alpha.3

package/src/components/form-designer/index.vue.js

@@ -1,20 +1,18 @@
-import { defineComponent as z, provide as i, ref as s, computed as W, watch as G, onMounted as K, resolveComponent as l, createBlock as Q, openBlock as X, withCtx as r, createVNode as n, createSlots as Y, renderList as Z, renderSlot as j, createElementVNode as O } from "vue";
-import ee from "./widget-panel/index.vue.js";
-import te from "./toolbar-panel/index.vue.js";
-import oe from "./setting-panel/index.vue.js";
-import ne from "./form-widget/index.vue.js";
-import { createDesigner as re } from "../designer.js";
-import { useLocaleStore as ie } from "@kp-ui/i18n";
-import { deepClone as w, getAllFieldWidgets as L, getAllContainerWidgets as J } from "../../utils/util.js";
-import { isEmpty as A, set as ae } from "lodash-es";
+import { defineComponent as z, ref as l, provide as s, computed as G, watch as K, onMounted as Q, resolveComponent as a, createBlock as X, openBlock as Y, withCtx as r, createVNode as n, createSlots as Z, renderList as j, renderSlot as O, createElementVNode as ee } from "vue";
+import te from "./widget-panel/index.vue.js";
+import oe from "./toolbar-panel/index.vue.js";
+import ne from "./setting-panel/index.vue.js";
+import re from "./form-widget/index.vue.js";
+import { createDesigner as ie } from "./designer.js";
+import { useLocaleStore as le } from "@kp-ui/i18n";
+import { deepClone as F, getAllFieldWidgets as w, getAllContainerWidgets as L } from "../../utils/util.js";
+import { isEmpty as b, set as se } from "lodash-es";
 import { useI18n as D } from "../../utils/i18n.js";
-import { message as E } from "ant-design-vue";
-import { storeToRefs as se } from "pinia";
-import { useExecFunction as le, useRef as de } from "tmgc2-share";
-import { useEmitter as ue } from "../../utils/useEmitter.js";
-import { LayoutTypeEnum as fe } from "../../constants/LayoutTypeEnum.js";
-import { getLocat as me } from "@kp-ui/tool";
-const ce = { class: "container-scroll-bar" }, be = /* @__PURE__ */ z({
+import { message as J } from "ant-design-vue";
+import { storeToRefs as ae } from "pinia";
+import { useExecFunction as de, useRef as fe } from "tmgc2-share";
+import { useEmitter as ge } from "../../utils/useEmitter.js";
+const ue = { class: "container-scroll-bar" }, Je = /* @__PURE__ */ z({
   name: "VFormDesigner",
   componentName: "VFormDesigner",
   __name: "index",
@@ -37,105 +35,108 @@ const ce = { class: "container-scroll-bar" }, be = /* @__PURE__ */ z({
     }) },
     globalDsv: { default: () => ({}) }
   },
-  setup(S, { expose: b }) {
-    const { i18nt: c } = D(), B = ie(), { locale: g } = se(B), d = S, u = ue(), { context: T } = le();
-    i("serverFieldList", () => p.value), i("designState", !0);
-    const f = s(270), m = s(300), p = s([]), { initLocale: x } = D(), o = s(re(T)), V = W(() => o.value.formConfig), v = s({}), h = W(() => {
-      const { type: e = fe.PC } = me();
-      return e;
-    });
-    i("formData", v), i("formConfig", V), i("designer", o), i("getDesignerConfig", () => d.designerConfig), i("layoutType", h), o.value.changeLayoutType(h.value);
-    const P = (e) => {
-      if (!A(e))
+  setup(A, { expose: R }) {
+    const m = l(), { i18nt: c } = D(), S = le(), { locale: p } = ae(S), d = A, f = ge(), { context: E } = de();
+    s("serverFieldList", () => v.value), s("designState", !0);
+    const g = l(270), u = l(300), v = l([]), { initLocale: B } = D(), o = l(ie(E)), V = G(() => o.value.formConfig), h = l({});
+    s("formData", h), s("formConfig", V), s("designer", o), s("getDesignerConfig", () => d.designerConfig);
+    const $ = (e) => {
+      if (!b(e))
         try {
           if (!e || !e.formConfig)
             throw new Error(c("designer.hint.invalidJsonFormat"));
           o.value.loadFormJson(e), o.value.emitHistoryChange(), o.value.emitEvent("form-json-imported", []);
         } catch (t) {
-          E.error(t + "");
+          J.error(t + "");
         }
-    }, R = async () => {
-      d.fieldListApi && (p.value = await d.fieldListApi());
-    }, $ = (e) => {
-      if (!A(e))
+    }, k = async () => {
+      d.fieldListApi && (v.value = await d.fieldListApi());
+    }, x = (e) => {
+      if (!b(e))
         try {
           let t = !1;
           typeof e == "string" ? t = o.value.loadFormJson(JSON.parse(e)) : e.constructor === Object && (t = o.value.loadFormJson(e)), t && o.value.emitHistoryChange();
         } catch (t) {
-          E.error(t + "");
+          J.error(t + "");
         }
     }, H = () => ({
-      widgetList: w(o.value.widgetList),
-      formConfig: w(o.value.formConfig)
-    }), U = (e = []) => e.length ? L(e) : L(o.value.widgetList), k = (e = []) => e.length ? J(e) : J(o.value.widgetList);
-    G(
-      g,
+      widgetList: F(o.value.widgetList),
+      formConfig: F(o.value.formConfig)
+    }), P = (e = []) => e.length ? w(e) : w(o.value.widgetList), U = (e = []) => e.length ? L(e) : L(o.value.widgetList), I = (e, t = !1) => m.value.getWidgetRef(e, t);
+    K(
+      p,
       () => {
-        x(g.value);
+        B(p.value);
       },
       {
         immediate: !0
       }
     );
-    const [I, M] = de(!1), N = () => {
-      u.off$("fieldChange"), u.on$("fieldChange", ({ fieldName: e, value: t }) => {
-        console.log("fieldChange", e, t), typeof e < "u" && typeof t < "u" && ae(v.value, e, t);
+    const [M, N] = fe(!1), T = () => {
+      f.off$("fieldChange"), f.on$("fieldChange", ({ fieldName: e, value: t }) => {
+        console.log("fieldChange", e, t), typeof e < "u" && typeof t < "u" && se(h.value, e, t);
       });
     };
-    return K(() => {
-      N(), R();
-    }), b({
-      ...u,
+    return Q(() => {
+      o.value.initDesigner(), T(), k();
+    }), R({
+      ...f,
       i18nt: c,
-      isLoading: I,
-      setLoading: M,
-      getContainerWidgets: k,
-      getFieldWidgets: U,
+      isLoading: M,
+      setLoading: N,
+      getWidgetRef: I,
+      getContainerWidgets: U,
+      getFieldWidgets: P,
       getFormJson: H,
-      setFormJson: $,
-      setJsonImport: P
+      setFormJson: x,
+      setJsonImport: $
     }), (e, t) => {
-      const y = l("a-layout-sider"), q = l("a-layout-header"), C = l("a-layout-content"), _ = l("a-layout");
-      return X(), Q(_, { class: "main-container full-height" }, {
+      const C = a("a-layout-sider"), q = a("a-layout-header"), y = a("a-layout-content"), _ = a("a-layout");
+      return Y(), X(_, { class: "main-container full-height" }, {
         default: r(() => [
           n(_, null, {
             default: r(() => [
-              n(y, {
-                width: f.value,
+              n(C, {
+                width: g.value,
                 class: "side-panel"
               }, {
                 default: r(() => [
-                  n(ee)
+                  n(te)
                 ]),
                 _: 1
               }, 8, ["width"]),
-              n(C, { class: "center-layout-container" }, {
+              n(y, { class: "center-layout-container" }, {
                 default: r(() => [
                   n(q, { class: "toolbar-header" }, {
                     default: r(() => [
-                      n(te, {
+                      n(oe, {
                         saveJsonApi: e.saveJsonApi,
                         "global-dsv": e.globalDsv,
-                        leftWidth: f.value,
-                        "onUpdate:leftWidth": t[0] || (t[0] = (a) => f.value = a),
-                        rightWidth: m.value,
-                        "onUpdate:rightWidth": t[1] || (t[1] = (a) => m.value = a),
+                        leftWidth: g.value,
+                        "onUpdate:leftWidth": t[0] || (t[0] = (i) => g.value = i),
+                        rightWidth: u.value,
+                        "onUpdate:rightWidth": t[1] || (t[1] = (i) => u.value = i),
                         ref: "toolbarRef"
-                      }, Y({ _: 2 }, [
-                        Z(e.$slots, (a, F) => ({
-                          name: F,
+                      }, Z({ _: 2 }, [
+                        j(e.$slots, (i, W) => ({
+                          name: W,
                           fn: r(() => [
-                            j(e.$slots, F)
+                            O(e.$slots, W)
                           ])
                         }))
                       ]), 1032, ["saveJsonApi", "global-dsv", "leftWidth", "rightWidth"])
                     ]),
                     _: 3
                   }),
-                  n(C, { class: "form-widget-main" }, {
+                  n(y, { class: "form-widget-main" }, {
                     default: r(() => [
-                      O("div", ce, [
-                        n(ne)
+                      ee("div", ue, [
+                        n(re, {
+                          "global-dsv": e.globalDsv,
+                          "form-config": o.value.formConfig,
+                          ref_key: "formRef",
+                          ref: m
+                        }, null, 8, ["global-dsv", "form-config"])
                       ])
                     ]),
                     _: 1
@@ -143,12 +144,14 @@ const ce = { class: "container-scroll-bar" }, be = /* @__PURE__ */ z({
                 ]),
                 _: 3
               }),
-              n(y, { width: m.value }, {
+              n(C, { width: u.value }, {
                 default: r(() => [
-                  n(oe, {
+                  n(ne, {
                     "selected-widget": o.value.selectedWidget,
-                    "onUpdate:selectedWidget": t[2] || (t[2] = (a) => o.value.selectedWidget = a)
-                  }, null, 8, ["selected-widget"])
+                    "onUpdate:selectedWidget": t[2] || (t[2] = (i) => o.value.selectedWidget = i),
+                    "global-dsv": e.globalDsv,
+                    "form-config": o.value.formConfig
+                  }, null, 8, ["selected-widget", "global-dsv", "form-config"])
                 ]),
                 _: 1
               }, 8, ["width"])
@@ -162,6 +165,6 @@ const ce = { class: "container-scroll-bar" }, be = /* @__PURE__ */ z({
   }
 });
 export {
-  be as default
+  Je as default
 };
 //# sourceMappingURL=index.vue.js.map

package/src/components/form-designer/index.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../src/components/form-designer/index.vue"],"sourcesContent":["<template>\n    <a-layout class=\"main-container full-height\">\n        <a-layout>\n            <a-layout-sider :width=\"leftWidth\" class=\"side-panel\">\n                <WidgetPanel />\n            </a-layout-sider>\n\n            <a-layout-content class=\"center-layout-container\">\n                <a-layout-header class=\"toolbar-header\">\n                    <toolbar-panel\n                        :saveJsonApi=\"saveJsonApi\"\n                        :global-dsv=\"globalDsv\"\n                        v-model:leftWidth=\"leftWidth\"\n                        v-model:rightWidth=\"rightWidth\"\n                        ref=\"toolbarRef\"\n                    >\n                        <template v-for=\"(idx, slotName) in $slots\" #[slotName]>\n                            <slot :name=\"slotName\"></slot>\n                        </template>\n                    </toolbar-panel>\n                </a-layout-header>\n                <a-layout-content class=\"form-widget-main\">\n                    <div class=\"container-scroll-bar\">\n                        <VFormWidget />\n                    </div>\n                </a-layout-content>\n            </a-layout-content>\n            <a-layout-sider :width=\"rightWidth\">\n                <setting-panel v-model:selected-widget=\"designer.selectedWidget\" />\n            </a-layout-sider>\n        </a-layout>\n    </a-layout>\n</template>\n\n<script lang=\"ts\" setup>\n    import WidgetPanel from './widget-panel/index.vue';\n    import ToolbarPanel from './toolbar-panel/index.vue';\n    import SettingPanel from './setting-panel/index.vue';\n    import VFormWidget from './form-widget/index.vue';\n    import { createDesigner } from '../designer';\n    import { useLocaleStore } from '@kp-ui/i18n';\n    import { deepClone, getAllContainerWidgets, getAllFieldWidgets } from '@/utils/util';\n    import { isEmpty, set } from 'lodash-es';\n    import { ref, provide, watch, onMounted, computed } from 'vue';\n    import { WidgetTree } from '@/types/schema';\n    import { useI18n } from '@/utils/i18n';\n    import { message } from 'ant-design-vue';\n    import { storeToRefs } from 'pinia';\n    import { useExecFunction, useRef } from 'tmgc2-share';\n    import { useEmitter } from '@/utils/useEmitter';\n    import { LayoutTypeEnum } from '@/constants/LayoutTypeEnum';\n    import { getLocat } from '@kp-ui/tool';\n    defineOptions({\n        name: 'VFormDesigner',\n        componentName: 'VFormDesigner'\n    });\n\n    const { i18nt } = useI18n();\n    const localeStore = useLocaleStore();\n    const { locale } = storeToRefs(localeStore);\n\n    const props = withDefaults(\n        defineProps<{\n            saveJsonApi: (json: any) => Promise<void>;\n            fieldListApi: () => Promise<any[]>;\n            designerConfig?: {\n                eventCollapse?: boolean;\n                widgetNameReadonly?: boolean;\n                clearDesignerButton?: boolean;\n                previewFormButton?: boolean;\n                importJsonButton?: boolean;\n                exportJsonButton?: boolean;\n            };\n            globalDsv?: Record<string, any>;\n        }>(),\n        {\n            designerConfig: () => ({\n                eventCollapse: true, //是否显示组件事件属性折叠面板\n                widgetNameReadonly: false, //禁止修改组件名称\n                clearDesignerButton: true, //是否显示清空设计器按钮\n                previewFormButton: true, //是否显示预览表单按钮\n                importJsonButton: true, //是否显示导入JSON按钮\n                exportJsonButton: true //是否显示导出JSON器按钮\n            }),\n            globalDsv: () => ({})\n        }\n    );\n    const emitter = useEmitter();\n    const { context } = useExecFunction();\n\n    provide('serverFieldList', () => fieldList.value);\n    provide('designState', true); // 设计态标识\n    const leftWidth = ref(270);\n    const rightWidth = ref(300);\n    const fieldList = ref<any[]>([]);\n    const { initLocale } = useI18n();\n    const designer = ref(createDesigner(context));\n    const formConfig = computed(() => designer.value.formConfig);\n    // 状态变量\n    const formDataModel = ref<Record<string, any>>({});\n\n    const layoutType = computed(() => {\n        const { type = LayoutTypeEnum.PC } = getLocat();\n        return type;\n    });\n\n    provide('formData', formDataModel);\n    provide('formConfig', formConfig);\n    provide('designer', designer);\n    provide('getDesignerConfig', () => props.designerConfig);\n    provide('layoutType', layoutType);\n\n    designer.value.changeLayoutType(layoutType.value);\n\n    const setJsonImport = (importObj: WidgetTree) => {\n        if (isEmpty(importObj)) return;\n        try {\n            if (!importObj || !importObj.formConfig) {\n                throw new Error(i18nt('designer.hint.invalidJsonFormat'));\n            }\n            designer.value.loadFormJson(importObj);\n            designer.value.emitHistoryChange();\n            designer.value.emitEvent('form-json-imported', []);\n        } catch (error) {\n            message.error(error + '');\n        }\n    };\n\n    const loadFieldListFromServer = async () => {\n        if (!props.fieldListApi) {\n            return;\n        }\n        fieldList.value = await props.fieldListApi();\n    };\n\n    const setFormJson = (formJson: WidgetTree) => {\n        if (isEmpty(formJson)) return;\n        try {\n            let modifiedFlag = false;\n            if (typeof formJson === 'string') {\n                modifiedFlag = designer.value.loadFormJson(JSON.parse(formJson));\n            } else if (formJson.constructor === Object) {\n                modifiedFlag = designer.value.loadFormJson(formJson);\n            }\n            if (modifiedFlag) {\n                designer.value.emitHistoryChange();\n            }\n        } catch (error) {\n            message.error(error + '');\n        }\n    };\n\n    const getFormJson = (): WidgetTree => {\n        return {\n            widgetList: deepClone(designer.value.widgetList),\n            formConfig: deepClone(designer.value.formConfig)\n        };\n    };\n\n    const getFieldWidgets = (widgetList = []) => {\n        return widgetList.length\n            ? getAllFieldWidgets(widgetList)\n            : getAllFieldWidgets(designer.value.widgetList);\n    };\n\n    /**\n     * 获取所有容器组件\n     * @returns {*[]}\n     */\n    const getContainerWidgets = (widgetList = []) => {\n        return widgetList.length\n            ? getAllContainerWidgets(widgetList)\n            : getAllContainerWidgets(designer.value.widgetList);\n    };\n\n    watch(\n        locale,\n        () => {\n            initLocale(locale.value);\n        },\n        {\n            immediate: true\n        }\n    );\n    const [isLoading, setLoading] = useRef(false);\n\n    /**\n     * 字段值变化事件处理器\n     */\n    const fieldChangeEventHandler = () => {\n        emitter.off$('fieldChange');\n        emitter.on$('fieldChange', ({ fieldName, value }) => {\n            console.log('fieldChange', fieldName, value);\n\n            // 过滤掉错误值\n            if (typeof fieldName !== 'undefined' && typeof value !== 'undefined') {\n                set(formDataModel.value, fieldName, value);\n            }\n        });\n    };\n\n    onMounted(() => {\n        fieldChangeEventHandler();\n        loadFieldListFromServer();\n    });\n\n    defineExpose({\n        ...emitter,\n        i18nt,\n        isLoading,\n        setLoading,\n        getContainerWidgets,\n        getFieldWidgets,\n        getFormJson,\n        setFormJson,\n        setJsonImport\n    });\n</script>\n\n<style lang=\"less\">\n    .main-container {\n        background: #fff;\n        .ant-layout-sider {\n            background: #fff;\n        }\n        :deep(aside) {\n            /* 防止aside样式被外部样式覆盖！！ */\n            margin: 0;\n            padding: 0;\n            background: inherit;\n        }\n        .form-widget-main {\n            padding: 0;\n            position: relative;\n            overflow-x: hidden;\n            flex: 1 0 0;\n        }\n        .full-height {\n            height: 100%;\n            overflow-y: hidden;\n        }\n        .center-layout-container {\n            min-width: 680px;\n            border-left: 2px solid #ebeef5;\n            border-right: 2px dotted #ebeef5;\n            display: flex;\n            flex-direction: column;\n        }\n        .form-widget-footer {\n            flex: 0 0 50px;\n            align-items: center;\n            background: #fff;\n            display: flex;\n            justify-content: space-between;\n            padding: 0 15px;\n        }\n\n        .main-header {\n            border-bottom: 2px solid #ebeef5;\n            background: #fff;\n            padding: 0;\n\n            height: 48px !important;\n            line-height: 48px !important;\n            min-width: 800px;\n        }\n\n        .container-scroll-bar {\n            height: 100%;\n            & > .form-widget-container {\n                height: 100%;\n            }\n        }\n\n        .toolbar-header {\n            font-size: 14px;\n            border-bottom: 1px solid rgba(5, 5, 5, 0.06);\n            height: 42px !important;\n            background: #fff;\n            padding: 0;\n        }\n\n        .side-panel {\n            width: 260px !important;\n            overflow-y: hidden;\n        }\n    }\n\n    div.main-title {\n        font-size: 18px;\n        color: #242424;\n        display: flex;\n        align-items: center;\n        justify-items: center;\n\n        img {\n            cursor: pointer;\n            width: 36px;\n            height: 36px;\n        }\n\n        span.bold {\n            font-size: 20px;\n            font-weight: bold;\n            margin: 0 6px 0 6px;\n        }\n\n        span.version-span {\n            font-size: 14px;\n            color: #101f1c;\n            margin-left: 6px;\n        }\n    }\n\n    .float-left {\n        float: left;\n    }\n\n    .float-right {\n        float: right;\n    }\n</style>\n"],"names":["i18nt","useI18n","localeStore","useLocaleStore","locale","storeToRefs","props","__props","emitter","useEmitter","context","useExecFunction","provide","fieldList","leftWidth","ref","rightWidth","initLocale","designer","createDesigner","formConfig","computed","formDataModel","layoutType","type","LayoutTypeEnum","getLocat","setJsonImport","importObj","isEmpty","error","message","loadFieldListFromServer","setFormJson","formJson","modifiedFlag","getFormJson","deepClone","getFieldWidgets","widgetList","getAllFieldWidgets","getContainerWidgets","getAllContainerWidgets","watch","isLoading","setLoading","useRef","fieldChangeEventHandler","fieldName","value","set","onMounted","__expose","_createBlock","_component_a_layout","_createVNode","_component_a_layout_sider","WidgetPanel","_component_a_layout_content","_component_a_layout_header","ToolbarPanel","saveJsonApi","globalDsv","$event","$slots","idx","slotName","_renderSlot","_ctx","_createElementVNode","_hoisted_1","VFormWidget","SettingPanel","_cache"],"mappings":"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"}
+{"version":3,"file":"index.vue.js","sources":["../../../../src/components/form-designer/index.vue"],"sourcesContent":["<template>\n    <a-layout class=\"main-container full-height\">\n        <a-layout>\n            <a-layout-sider :width=\"leftWidth\" class=\"side-panel\">\n                <WidgetPanel />\n            </a-layout-sider>\n\n            <a-layout-content class=\"center-layout-container\">\n                <a-layout-header class=\"toolbar-header\">\n                    <toolbar-panel\n                        :saveJsonApi=\"saveJsonApi\"\n                        :global-dsv=\"globalDsv\"\n                        v-model:leftWidth=\"leftWidth\"\n                        v-model:rightWidth=\"rightWidth\"\n                        ref=\"toolbarRef\"\n                    >\n                        <template v-for=\"(idx, slotName) in $slots\" #[slotName]>\n                            <slot :name=\"slotName\"></slot>\n                        </template>\n                    </toolbar-panel>\n                </a-layout-header>\n                <a-layout-content class=\"form-widget-main\">\n                    <div class=\"container-scroll-bar\">\n                        <VFormWidget\n                            :global-dsv=\"globalDsv\"\n                            :form-config=\"designer.formConfig\"\n                            ref=\"formRef\"\n                        />\n                    </div>\n                </a-layout-content>\n            </a-layout-content>\n            <a-layout-sider :width=\"rightWidth\">\n                <setting-panel\n                    v-model:selected-widget=\"designer.selectedWidget\"\n                    :global-dsv=\"globalDsv\"\n                    :form-config=\"designer.formConfig\"\n                />\n            </a-layout-sider>\n        </a-layout>\n    </a-layout>\n</template>\n\n<script lang=\"ts\" setup>\n    import WidgetPanel from './widget-panel/index.vue';\n    import ToolbarPanel from './toolbar-panel/index.vue';\n    import SettingPanel from './setting-panel/index.vue';\n    import VFormWidget from './form-widget/index.vue';\n    import { createDesigner } from '@/components/form-designer/designer';\n    import { useLocaleStore } from '@kp-ui/i18n';\n    import {\n        deepClone,\n        getAllContainerWidgets,\n        getAllFieldWidgets,\n        traverseAllWidgets\n    } from '@/utils/util';\n    import { isEmpty, set } from 'lodash-es';\n    import { ref, provide, watch, onMounted, computed } from 'vue';\n    import { WidgetTree } from '@/types/schema';\n    import { useI18n } from '@/utils/i18n';\n    import { message } from 'ant-design-vue';\n    import { storeToRefs } from 'pinia';\n    import { useExecFunction, useRef } from 'tmgc2-share';\n    import { useEmitter } from '@/utils/useEmitter';\n\n    defineOptions({\n        name: 'VFormDesigner',\n        componentName: 'VFormDesigner'\n    });\n\n    const formRef = ref();\n    const { i18nt } = useI18n();\n    const localeStore = useLocaleStore();\n    const { locale } = storeToRefs(localeStore);\n\n    const props = withDefaults(\n        defineProps<{\n            saveJsonApi: (json: any) => Promise<void>;\n            fieldListApi: () => Promise<any[]>;\n            designerConfig?: {\n                eventCollapse?: boolean;\n                widgetNameReadonly?: boolean;\n                clearDesignerButton?: boolean;\n                previewFormButton?: boolean;\n                importJsonButton?: boolean;\n                exportJsonButton?: boolean;\n            };\n            globalDsv?: Record<string, any>;\n        }>(),\n        {\n            designerConfig: () => ({\n                eventCollapse: true, //是否显示组件事件属性折叠面板\n                widgetNameReadonly: false, //禁止修改组件名称\n                clearDesignerButton: true, //是否显示清空设计器按钮\n                previewFormButton: true, //是否显示预览表单按钮\n                importJsonButton: true, //是否显示导入JSON按钮\n                exportJsonButton: true //是否显示导出JSON器按钮\n            }),\n            globalDsv: () => ({})\n        }\n    );\n    const emitter = useEmitter();\n    const { context } = useExecFunction();\n    provide('serverFieldList', () => fieldList.value);\n    provide('designState', true); // 设计态标识\n    const leftWidth = ref(270);\n    const rightWidth = ref(300);\n    const fieldList = ref<any[]>([]);\n    const { initLocale } = useI18n();\n    const designer = ref(createDesigner(context));\n    const formConfig = computed(() => designer.value.formConfig);\n    // 状态变量\n    const formDataModel = ref<Record<string, any>>({});\n\n    provide('formData', formDataModel);\n    provide('formConfig', formConfig);\n    provide('designer', designer);\n    provide('getDesignerConfig', () => props.designerConfig);\n\n    const setJsonImport = (importObj: WidgetTree) => {\n        if (isEmpty(importObj)) return;\n        try {\n            if (!importObj || !importObj.formConfig) {\n                throw new Error(i18nt('designer.hint.invalidJsonFormat'));\n            }\n            designer.value.loadFormJson(importObj);\n            designer.value.emitHistoryChange();\n            designer.value.emitEvent('form-json-imported', []);\n        } catch (error) {\n            message.error(error + '');\n        }\n    };\n\n    const loadFieldListFromServer = async () => {\n        if (!props.fieldListApi) {\n            return;\n        }\n        fieldList.value = await props.fieldListApi();\n    };\n\n    const setFormJson = (formJson: WidgetTree) => {\n        if (isEmpty(formJson)) return;\n        try {\n            let modifiedFlag = false;\n            if (typeof formJson === 'string') {\n                modifiedFlag = designer.value.loadFormJson(JSON.parse(formJson));\n            } else if (formJson.constructor === Object) {\n                modifiedFlag = designer.value.loadFormJson(formJson);\n            }\n            if (modifiedFlag) {\n                designer.value.emitHistoryChange();\n            }\n        } catch (error) {\n            message.error(error + '');\n        }\n    };\n\n    const getFormJson = (): WidgetTree => {\n        return {\n            widgetList: deepClone(designer.value.widgetList),\n            formConfig: deepClone(designer.value.formConfig)\n        };\n    };\n\n    const getFieldWidgets = (widgetList = []) => {\n        return widgetList.length\n            ? getAllFieldWidgets(widgetList)\n            : getAllFieldWidgets(designer.value.widgetList);\n    };\n\n    /**\n     * 获取所有容器组件\n     * @returns {*[]}\n     */\n    const getContainerWidgets = (widgetList = []) => {\n        return widgetList.length\n            ? getAllContainerWidgets(widgetList)\n            : getAllContainerWidgets(designer.value.widgetList);\n    };\n\n    const getWidgetRef = (widgetName, showError = false) => {\n        return formRef.value.getWidgetRef(widgetName, showError);\n    };\n\n    watch(\n        locale,\n        () => {\n            initLocale(locale.value);\n        },\n        {\n            immediate: true\n        }\n    );\n    const [isLoading, setLoading] = useRef(false);\n\n    /**\n     * 字段值变化事件处理器\n     */\n    const fieldChangeEventHandler = () => {\n        emitter.off$('fieldChange');\n        emitter.on$('fieldChange', ({ fieldName, value }) => {\n            console.log('fieldChange', fieldName, value);\n\n            // 过滤掉错误值\n            if (typeof fieldName !== 'undefined' && typeof value !== 'undefined') {\n                set(formDataModel.value, fieldName, value);\n            }\n        });\n    };\n\n    onMounted(() => {\n        designer.value.initDesigner();\n        fieldChangeEventHandler();\n        loadFieldListFromServer();\n    });\n\n    defineExpose({\n        ...emitter,\n        i18nt,\n        isLoading,\n        setLoading,\n        getWidgetRef,\n        getContainerWidgets,\n        getFieldWidgets,\n        getFormJson,\n        setFormJson,\n        setJsonImport\n    });\n</script>\n\n<style lang=\"less\">\n    .main-container {\n        background: #fff;\n        .ant-layout-sider {\n            background: #fff;\n        }\n        :deep(aside) {\n            /* 防止aside样式被外部样式覆盖！！ */\n            margin: 0;\n            padding: 0;\n            background: inherit;\n        }\n        .form-widget-main {\n            padding: 0;\n            position: relative;\n            overflow-x: hidden;\n            flex: 1 0 0;\n        }\n        .full-height {\n            height: 100%;\n            overflow-y: hidden;\n        }\n        .center-layout-container {\n            min-width: 680px;\n            border-left: 2px solid #ebeef5;\n            border-right: 2px dotted #ebeef5;\n            display: flex;\n            flex-direction: column;\n        }\n        .form-widget-footer {\n            flex: 0 0 50px;\n            align-items: center;\n            background: #fff;\n            display: flex;\n            justify-content: space-between;\n            padding: 0 15px;\n        }\n\n        .main-header {\n            border-bottom: 2px solid #ebeef5;\n            background: #fff;\n            padding: 0;\n\n            height: 48px !important;\n            line-height: 48px !important;\n            min-width: 800px;\n        }\n\n        .container-scroll-bar {\n            height: 100%;\n            & > .form-widget-container {\n                height: 100%;\n            }\n        }\n\n        .toolbar-header {\n            font-size: 14px;\n            border-bottom: 1px dotted #cccccc;\n            height: 42px !important;\n            background: #fff;\n            padding: 0;\n        }\n\n        .side-panel {\n            width: 260px !important;\n            overflow-y: hidden;\n        }\n    }\n\n    div.main-title {\n        font-size: 18px;\n        color: #242424;\n        display: flex;\n        align-items: center;\n        justify-items: center;\n\n        img {\n            cursor: pointer;\n            width: 36px;\n            height: 36px;\n        }\n\n        span.bold {\n            font-size: 20px;\n            font-weight: bold;\n            margin: 0 6px 0 6px;\n        }\n\n        span.version-span {\n            font-size: 14px;\n            color: #101f1c;\n            margin-left: 6px;\n        }\n    }\n\n    .float-left {\n        float: left;\n    }\n\n    .float-right {\n        float: right;\n    }\n\n    div.external-link {\n        display: flex;\n        align-items: center;\n\n        a {\n            font-size: 13px;\n            text-decoration: none;\n            margin-right: 10px;\n            color: #606266;\n        }\n    }\n</style>\n"],"names":["formRef","ref","i18nt","useI18n","localeStore","useLocaleStore","locale","storeToRefs","props","__props","emitter","useEmitter","context","useExecFunction","provide","fieldList","leftWidth","rightWidth","initLocale","designer","createDesigner","formConfig","computed","formDataModel","setJsonImport","importObj","isEmpty","error","message","loadFieldListFromServer","setFormJson","formJson","modifiedFlag","getFormJson","deepClone","getFieldWidgets","widgetList","getAllFieldWidgets","getContainerWidgets","getAllContainerWidgets","getWidgetRef","widgetName","showError","watch","isLoading","setLoading","useRef","fieldChangeEventHandler","fieldName","value","set","onMounted","__expose","_createBlock","_component_a_layout","_createVNode","_component_a_layout_sider","WidgetPanel","_component_a_layout_content","_component_a_layout_header","ToolbarPanel","saveJsonApi","globalDsv","$event","$slots","idx","slotName","_renderSlot","_ctx","_createElementVNode","_hoisted_1","VFormWidget","SettingPanel","_cache"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import o from "./form-setting.vue2.js";
 /* empty css                  */
 import t from "../../../../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-c232c01e"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9d3391e5"]]);
 export {
-  e as default
+  p as default
 };
 //# sourceMappingURL=form-setting.vue.js.map