@kp-ui/lowcode 1.0.89 → 1.0.91

package/src/components/form-designer/toolbar-panel/index.vue2.js

@@ -1,22 +1,17 @@
-import { defineComponent, defineAsyncComponent, getCurrentInstance, inject, ref, computed, watch, onMounted, resolveComponent, createElementBlock, openBlock, createElementVNode, createVNode, createBlock, createCommentVNode, withCtx, unref, normalizeStyle, createTextVNode, toDisplayString, Fragment, renderList, renderSlot, normalizeClass, nextTick } from "vue";
-import { addWindowResizeHandler, getQueryParam, copyToClipboard, traverseAllWidgets } from "../../../utils/util.js";
+import { defineComponent, defineAsyncComponent, getCurrentInstance, inject, ref, computed, onMounted, resolveComponent, createElementBlock, openBlock, createElementVNode, createVNode, withCtx, normalizeStyle, unref, createTextVNode, toDisplayString, createBlock, createCommentVNode, Fragment, renderList, renderSlot, normalizeClass, nextTick } from "vue";
+import { addWindowResizeHandler, copyToClipboard, getQueryParam } from "../../../utils/util.js";
 import { useI18n } from "../../../utils/i18n.js";
-import { generateCode } from "../../../utils/code-generator.js";
 import { saveAs } from "file-saver";
-import axios from "axios";
 import SvgIcon from "../../svg-icon/index.vue.js";
 import { fmtHttpParams } from "../../../utils/request/fmtHttpParams.js";
 import { getLocat } from "@kp-ui/tool";
 import { cloneDeep } from "lodash-es";
-import { TpfModal, CodeEditor } from "tmgc2-share";
+import { TpfModal, TpfCodeEditor, CodeEditor } from "tmgc2-share";
 import { message } from "ant-design-vue";
 const _hoisted_1 = { class: "toolbar-container" };
 const _hoisted_2 = { class: "left-toolbar" };
 const _hoisted_3 = { class: "right-toolbar" };
 const _hoisted_4 = { class: "right-toolbar-con" };
-const _hoisted_5 = { class: "dialog-footer" };
-const _hoisted_6 = { class: "dialog-footer" };
-const _hoisted_7 = { class: "dialog-footer" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
@@ -28,50 +23,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     saveJsonApi: {},
     globalDsv: { default: () => ({}) }
   },
-  setup(__props, { expose: __expose }) {
+  setup(__props) {
     const VFormRender = defineAsyncComponent(() => import("../../form-render/index.vue.js"));
     getCurrentInstance();
     const props = __props;
     const getDesignerConfig = inject("getDesignerConfig");
     const nodeTree = ref(null);
     const preForm = ref(null);
+    const importJsonEditorRef = ref(null);
+    ref(null);
     const vfCtx = ref({ type: "add", ...getLocat() });
     const designerConfig = ref(getDesignerConfig());
     const toolbarWidth = ref(460);
     const showPreviewDialogFlag = ref(false);
     const showImportJsonDialogFlag = ref(false);
-    const showExportJsonDialogFlag = ref(false);
-    const showExportCodeDialogFlag = ref(false);
     const showFormDataDialogFlag = ref(false);
-    const showExportSFCDialogFlag = ref(false);
     const showNodeTreeDrawerFlag = ref(false);
     const nodeTreeData = ref([]);
     const importTemplate = ref("");
-    const jsonContent = ref("");
-    const jsonRawContent = ref("");
+    const exportTemplate = ref("");
+    ref("");
     const formDataJson = ref("");
-    const formDataRawJson = ref("");
-    const vueCode = ref("");
+    ref("");
     const htmlCode = ref("");
-    const sfcCode = ref("");
-    const sfcCodeV3 = ref("");
-    ref("vue");
-    const activeSFCTab = ref("vue2");
     const testFormData = ref({
       select62173: 2
     });
-    const testOptionData = ref({
-      select62173: [
-        { label: "01", value: 1 },
-        { label: "22", value: 2 },
-        { label: "333", value: 3 }
-      ],
-      select001: [
-        { label: "辣椒", value: 1 },
-        { label: "菠萝", value: 2 },
-        { label: "丑橘子", value: 3 }
-      ]
-    });
     const formJson = computed(() => {
       return {
         widgetList: cloneDeep(props.designer.widgetList),
@@ -90,12 +67,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const designerDsv = computed(() => {
       return props.globalDsv;
     });
-    watch(
-      () => props.designer.widgetList,
-      (val) => {
-      },
-      { deep: true }
-    );
     onMounted(() => {
       const maxTBWidth = designerConfig.value.toolbarMaxWidth || 460;
       const minTBWidth = designerConfig.value.toolbarMinWidth || 300;
@@ -114,18 +85,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         props.saveJsonApi(formJson.value);
       }
     };
-    const setReadMode = () => {
-      preForm.value.setFormData({
-        fileupload26481: [
-          {
-            fileCode: "89046755221505",
-            fileName: "首页-透明工厂.png",
-            guidebookId: 89046782484481,
-            id: 89046782484482
-          }
-        ]
-      });
-    };
     const showToolButton = (configName) => {
       if (designerConfig.value[configName] === void 0) {
         return true;
@@ -212,7 +171,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       refreshNodeTree();
       showNodeTreeDrawerFlag.value = true;
       nextTick(() => {
-        if (!!props.designer.selectedId) ;
+        if (!!props.designer.selectedId) {
+          nodeTree.value.setCurrentKey(props.designer.selectedId);
+        }
       });
     };
     const undoHistory = () => {
@@ -253,6 +214,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const importJson = () => {
       importTemplate.value = JSON.stringify(props.designer.getImportTemplate(), null, "  ");
+      importJsonEditorRef.value.open();
       showImportJsonDialogFlag.value = true;
     };
     const doJsonImport = () => {
@@ -273,82 +235,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const exportJson = () => {
       const widgetList = cloneDeep(props.designer.widgetList);
       const formConfig = cloneDeep(props.designer.formConfig);
-      jsonContent.value = JSON.stringify({ widgetList, formConfig }, null, "  ");
-      jsonRawContent.value = JSON.stringify({ widgetList, formConfig });
-      showExportJsonDialogFlag.value = true;
-    };
-    const copyFormJson = (e) => {
-      copyToClipboard(
-        jsonRawContent.value,
-        e,
-        message,
-        i18nt("designer.hint.copyJsonSuccess"),
-        i18nt("designer.hint.copyJsonFail")
-      );
-    };
-    const saveFormJson = () => {
-      saveAsFile(jsonContent.value);
-    };
-    const exportCode = () => {
-      vueCode.value = generateCode(formJson.value);
-      htmlCode.value = generateCode(formJson.value, "html");
-      showExportCodeDialogFlag.value = true;
-    };
-    const copyVueCode = (e) => {
-      copyToClipboard(
-        vueCode.value,
-        e,
-        message,
-        i18nt("designer.hint.copyVueCodeSuccess"),
-        i18nt("designer.hint.copyVueCodeFail")
-      );
-    };
-    const copyHtmlCode = (e) => {
-      copyToClipboard(
-        htmlCode.value,
-        e,
-        message,
-        i18nt("designer.hint.copyHtmlCodeSuccess"),
-        i18nt("designer.hint.copyHtmlCodeFail")
-      );
-    };
-    const saveVueCode = () => {
-      saveAsFile(vueCode.value);
-    };
-    const saveHtmlCode = () => {
-      saveAsFile(htmlCode.value);
-    };
-    const generateSFC = () => {
-    };
-    const copyV2SFC = (e) => {
-      copyToClipboard(
-        sfcCode.value,
-        e,
-        message,
-        i18nt("designer.hint.copySFCSuccess"),
-        i18nt("designer.hint.copySFCFail")
-      );
-    };
-    const copyV3SFC = (e) => {
-      copyToClipboard(
-        sfcCodeV3.value,
-        e,
-        message,
-        i18nt("designer.hint.copySFCSuccess"),
-        i18nt("designer.hint.copySFCFail")
-      );
-    };
-    const saveV2SFC = () => {
-      saveAsFile(sfcCode.value);
-    };
-    const saveV3SFC = () => {
-      saveAsFile(sfcCodeV3.value);
-    };
-    const insertData = async () => {
-      const data = await preForm.value.getFormData();
-      const formConfig = props.designer.formConfig;
-      const res = await fmtHttpParams.call(this, formConfig.serveList.vformUpdate, data);
-      console.log("res: insertData", res);
+      exportTemplate.value = JSON.stringify({ widgetList, formConfig }, null, "  ");
+      showFormDataDialogFlag.value = true;
     };
     const showData = async () => {
       const formConfig = props.designer.formConfig;
@@ -362,10 +250,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       preForm.value.setReadMode(true);
     };
     const getFormData = () => {
+      console.log(preForm.value);
       preForm.value.getFormData().then((formData) => {
-        console.log("formData: ", formData);
         formDataJson.value = JSON.stringify(formData, null, "  ");
-        formDataRawJson.value = JSON.stringify(formData);
         showFormDataDialogFlag.value = true;
       }).catch((error) => {
         message.error(error);
@@ -373,7 +260,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const copyFormDataJson = (e) => {
       copyToClipboard(
-        formDataRawJson.value,
+        exportTemplate.value,
         e,
         message,
         i18nt("designer.hint.copyJsonSuccess"),
@@ -392,59 +279,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const setFormEnabled = () => {
       preForm.value.enableForm();
     };
-    const testLoadForm = () => {
-      axios.get("https://www.fastmock.site/mock/e9710039bb5f11262d1a0f2f0bbe08c8/vform3/getFS").then((res) => {
-        const newFormJson = res.data;
-        preForm.value.setFormJson(newFormJson);
-        nextTick(() => {
-          const newFormData = { input30696: "668899" };
-          preForm.value.setFormData(newFormData);
-        });
-      }).catch((err) => {
-      });
-    };
-    const testSetFormJson = async () => {
-      const { widgetList } = await import("./widgetList.js");
-      const newFormJson = {
-        widgetList,
-        formConfig: {
-          labelWidth: 150,
-          labelPosition: "horizontal",
-          size: "",
-          labelAlign: "label-right-align",
-          cssCode: "",
-          customClass: [],
-          functions: "",
-          onFormCreated: "",
-          onFormDataChange: "",
-          handleOnSubmit: "",
-          onFormValidate: ""
-        }
-      };
-      preForm.value.setFormJson(newFormJson);
-      nextTick(() => {
-        preForm.value.setFormData({
-          input12931: "asdf",
-          input23031: "input23031",
-          textarea21654: "textarea21654",
-          input113152: "input113152",
-          input40240: "input40240"
-        });
-      });
-    };
-    const testSetFormData = () => {
-      const testFD = {
-        input89263: "899668"
-      };
-      preForm.value.setFormData(testFD);
-    };
-    const testReloadOptionData = () => {
-      testOptionData.value["select001"].push({
-        label: "aaa",
-        value: 888
-      });
-      preForm.value.reloadOptionData();
-    };
     const handleFormChange = (fieldName, newValue, oldValue, formModel) => {
       console.log("formModel", formModel);
     };
@@ -454,87 +288,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const testOnButtonClick = (button) => {
       console.log("test", button);
     };
-    const onMyEmitTest = (aaa) => {
-      console.log("-----", aaa);
-    };
-    const findWidgetById = (wId) => {
-      let foundW = null;
-      traverseAllWidgets(props.designer.widgetList, (w) => {
-        if (w.id === wId) {
-          foundW = w;
-        }
-      });
-      return foundW;
-    };
-    const onNodeTreeClick = (nodeData, node, nodeEl) => {
-      if (nodeData.selectable !== void 0 && !nodeData.selectable) {
-        message.info(i18nt("designer.hint.currentNodeCannotBeSelected"));
-      } else {
-        const selectedId = nodeData.id;
-        const foundW = findWidgetById(selectedId);
-        if (!!foundW) {
-          props.designer.setSelected(foundW);
-        }
-      }
-    };
-    __expose({
-      saveJson,
-      setReadMode,
-      showToolButton,
-      buildTreeNodeOfWidget,
-      refreshNodeTree,
-      showNodeTreeDrawer,
-      undoHistory,
-      redoHistory,
-      changeLayoutType,
-      clearFormWidget,
-      previewForm,
-      saveAsFile,
-      vsSaveFile,
-      importJson,
-      doJsonImport,
-      exportJson,
-      copyFormJson,
-      saveFormJson,
-      exportCode,
-      copyVueCode,
-      copyHtmlCode,
-      saveVueCode,
-      saveHtmlCode,
-      generateSFC,
-      copyV2SFC,
-      copyV3SFC,
-      saveV2SFC,
-      saveV3SFC,
-      insertData,
-      showData,
-      getFormData,
-      copyFormDataJson,
-      saveFormData,
-      resetForm,
-      setFormDisabled,
-      setFormEnabled,
-      testLoadForm,
-      testSetFormJson,
-      testSetFormData,
-      testReloadOptionData,
-      handleFormChange,
-      testOnAppendButtonClick,
-      testOnButtonClick,
-      onMyEmitTest,
-      findWidgetById,
-      onNodeTreeClick
-    });
     return (_ctx, _cache) => {
       const _component_a_button = resolveComponent("a-button");
       const _component_a_radio_button = resolveComponent("a-radio-button");
       const _component_a_radio_group = resolveComponent("a-radio-group");
       const _component_a_tree = resolveComponent("a-tree");
       const _component_a_drawer = resolveComponent("a-drawer");
-      const _component_a_alert = resolveComponent("a-alert");
-      const _component_a_modal = resolveComponent("a-modal");
-      const _component_a_tab_pane = resolveComponent("a-tab-pane");
-      const _component_a_tabs = resolveComponent("a-tabs");
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [
           createVNode(_component_a_button, {
@@ -542,7 +301,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.changeLeftWidth())
           }, {
             default: withCtx(() => [
-              createVNode(unref(SvgIcon), {
+              createVNode(SvgIcon, {
                 style: normalizeStyle(`transform:${_ctx.leftWidth === 0 ? "rotate(180deg)" : "rotate(0deg)"}`),
                 "icon-class": "a-ipadarrow_back"
               }, null, 8, ["style"])
@@ -556,7 +315,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onClick: undoHistory
           }, {
             default: withCtx(() => [
-              createVNode(unref(SvgIcon), { "icon-class": "undo" })
+              createVNode(SvgIcon, { "icon-class": "undo" })
             ]),
             _: 1
           }, 8, ["disabled", "title"]),
@@ -567,7 +326,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onClick: redoHistory
           }, {
             default: withCtx(() => [
-              createVNode(unref(SvgIcon), { "icon-class": "redo" })
+              createVNode(SvgIcon, { "icon-class": "redo" })
             ]),
             _: 1
           }, 8, ["disabled", "title"]),
@@ -608,13 +367,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, 8, ["type"])
             ]),
             _: 1
-          }, 8, ["value"])
+          }, 8, ["value"]),
+          createVNode(_component_a_button, {
+            style: { "margin-left": "20px" },
+            title: unref(i18nt)("designer.toolbar.nodeTreeHint"),
+            onClick: showNodeTreeDrawer
+          }, {
+            default: withCtx(() => [
+              createVNode(SvgIcon, { "icon-class": "node-tree" })
+            ]),
+            _: 1
+          }, 8, ["title"])
         ]),
         createVNode(_component_a_drawer, {
           title: unref(i18nt)("designer.toolbar.nodeTreeTitle"),
           direction: "ltr",
-          visible: showNodeTreeDrawerFlag.value,
-          "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => showNodeTreeDrawerFlag.value = $event),
+          open: showNodeTreeDrawerFlag.value,
+          "onUpdate:open": _cache[5] || (_cache[5] = ($event) => showNodeTreeDrawerFlag.value = $event),
           width: 280,
           "destroy-on-close": true,
           class: "node-tree-drawer"
@@ -632,7 +401,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, null, 8, ["treeData"])
           ]),
           _: 1
-        }, 8, ["title", "visible"]),
+        }, 8, ["title", "open"]),
         createElementVNode("div", _hoisted_3, [
           createElementVNode("div", _hoisted_4, [
             showToolButton("clearDesignerButton") ? (openBlock(), createBlock(_component_a_button, {
@@ -641,7 +410,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               onClick: clearFormWidget
             }, {
               default: withCtx(() => [
-                createVNode(unref(SvgIcon), { "icon-class": "el-delete" }),
+                createVNode(SvgIcon, { "icon-class": "el-delete" }),
                 createTextVNode(toDisplayString(unref(i18nt)("designer.toolbar.clear")), 1)
               ]),
               _: 1
@@ -652,7 +421,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               onClick: previewForm
             }, {
               default: withCtx(() => [
-                createVNode(unref(SvgIcon), { "icon-class": "el-view" }),
+                createVNode(SvgIcon, { "icon-class": "el-view" }),
                 createTextVNode(toDisplayString(unref(i18nt)("designer.toolbar.preview")), 1)
               ]),
               _: 1
@@ -682,18 +451,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               type: "link",
               onClick: saveJson
             }, {
-              default: withCtx(() => _cache[23] || (_cache[23] = [
+              default: withCtx(() => _cache[12] || (_cache[12] = [
                 createTextVNode(" 保存 ")
               ])),
               _: 1,
-              __: [23]
+              __: [12]
             })) : createCommentVNode("", true),
             createVNode(_component_a_button, {
               type: "link",
               onClick: _cache[6] || (_cache[6] = ($event) => _ctx.changeRightWidth())
             }, {
               default: withCtx(() => [
-                createVNode(unref(SvgIcon), {
+                createVNode(SvgIcon, {
                   style: normalizeStyle(`transform:${_ctx.rightWidth === 0 ? "rotate(0deg)" : "rotate(180deg)"}`),
                   "icon-class": "a-ipadarrow_back"
                 }, null, 8, ["style"])
@@ -715,15 +484,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           center: "",
           class: "drag-dialog",
           width: "75%",
-          fullscreen: layoutType.value === "H5" || layoutType.value === "Pad"
+          fullscreen: true
         }, {
           footerRight: withCtx(() => [
             createVNode(_component_a_button, { onClick: showData }, {
-              default: withCtx(() => _cache[24] || (_cache[24] = [
+              default: withCtx(() => _cache[13] || (_cache[13] = [
                 createTextVNode("数据回显")
               ])),
               _: 1,
-              __: [24]
+              __: [13]
             }),
             createVNode(_component_a_button, {
               type: "primary",
@@ -784,131 +553,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "form-json": unref(cloneDeep)(formJson.value),
                   "form-data": testFormData.value,
                   "preview-state": true,
-                  "option-data": testOptionData.value,
                   "global-dsv": designerDsv.value,
-                  onMyEmitTest,
                   onAppendButtonClick: testOnAppendButtonClick,
                   onButtonClick: testOnButtonClick,
                   onFormChange: handleFormChange
-                }, null, 8, ["vfCtx", "form-json", "form-data", "option-data", "global-dsv"])
+                }, null, 8, ["vfCtx", "form-json", "form-data", "global-dsv"])
               ], 2)
             ])
           ]),
           _: 1
-        }, 8, ["title", "visible", "fullscreen"]),
-        createVNode(_component_a_modal, {
-          title: unref(i18nt)("designer.toolbar.importJson"),
-          visible: showImportJsonDialogFlag.value,
-          "onUpdate:visible": _cache[11] || (_cache[11] = ($event) => showImportJsonDialogFlag.value = $event),
-          "show-close": true,
-          class: "drag-dialog",
-          "append-to-body": true,
-          center: "",
-          width: "1200px",
-          "close-on-click-modal": false,
-          "close-on-press-escape": false,
-          "destroy-on-close": true
-        }, {
-          footer: withCtx(() => [
-            createElementVNode("div", _hoisted_5, [
-              createVNode(_component_a_button, {
-                type: "primary",
-                onClick: doJsonImport
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(i18nt)("designer.hint.import")), 1)
-                ]),
-                _: 1
-              }),
-              createVNode(_component_a_button, {
-                onClick: _cache[10] || (_cache[10] = ($event) => showImportJsonDialogFlag.value = false)
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(i18nt)("designer.hint.cancel")), 1)
-                ]),
-                _: 1
-              })
-            ])
-          ]),
-          default: withCtx(() => [
-            createVNode(_component_a_alert, {
-              type: "info",
-              message: unref(i18nt)("designer.hint.importJsonHint"),
-              "show-icon": "",
-              class: "alert-padding"
-            }, null, 8, ["message"]),
-            createVNode(unref(CodeEditor), {
-              mode: "json",
-              readonly: false,
-              modelValue: importTemplate.value,
-              "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => importTemplate.value = $event)
-            }, null, 8, ["modelValue"])
-          ]),
-          _: 1
-        }, 8, ["title", "visible"]),
-        createVNode(_component_a_modal, {
-          title: unref(i18nt)("designer.toolbar.exportJson"),
-          visible: showExportJsonDialogFlag.value,
-          "onUpdate:visible": _cache[14] || (_cache[14] = ($event) => showExportJsonDialogFlag.value = $event),
-          "show-close": true,
-          class: "drag-dialog",
-          center: "",
-          "append-to-body": "",
-          width: "1200px",
-          "close-on-click-modal": false,
-          "close-on-press-escape": false,
-          "destroy-on-close": true
-        }, {
-          footer: withCtx(() => [
-            createElementVNode("div", _hoisted_6, [
-              createVNode(_component_a_button, {
-                type: "primary",
-                class: "copy-json-btn",
-                "data-clipboard-text": jsonRawContent.value,
-                onClick: copyFormJson
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(i18nt)("designer.hint.copyJson")), 1)
-                ]),
-                _: 1
-              }, 8, ["data-clipboard-text"]),
-              createVNode(_component_a_button, { onClick: saveFormJson }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(i18nt)("designer.hint.saveFormJson")), 1)
-                ]),
-                _: 1
-              }),
-              createVNode(_component_a_button, {
-                onClick: _cache[13] || (_cache[13] = ($event) => showExportJsonDialogFlag.value = false)
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(i18nt)("designer.hint.closePreview")), 1)
-                ]),
-                _: 1
-              })
-            ])
-          ]),
-          default: withCtx(() => [
-            createVNode(unref(CodeEditor), {
-              mode: "json",
-              readonly: true,
-              modelValue: jsonContent.value,
-              "onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => jsonContent.value = $event)
-            }, null, 8, ["modelValue"])
-          ]),
-          _: 1
         }, 8, ["title", "visible"]),
+        createVNode(unref(TpfCodeEditor), {
+          ref_key: "importJsonEditorRef",
+          ref: importJsonEditorRef,
+          isShowEventFooter: false,
+          "event-header": unref(i18nt)("designer.hint.importJsonHint"),
+          modelValue: importTemplate.value,
+          "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => importTemplate.value = $event),
+          mode: "json",
+          width: 1200,
+          height: "70vh",
+          title: unref(i18nt)("designer.toolbar.importJson"),
+          onSetCode: doJsonImport
+        }, null, 8, ["event-header", "modelValue", "title"]),
         createVNode(unref(TpfModal), {
           title: unref(i18nt)("designer.hint.exportFormData"),
           visible: showFormDataDialogFlag.value,
-          "onUpdate:visible": _cache[17] || (_cache[17] = ($event) => showFormDataDialogFlag.value = $event),
+          "onUpdate:visible": _cache[11] || (_cache[11] = ($event) => showFormDataDialogFlag.value = $event),
           width: "1200px"
         }, {
           footerRight: withCtx(() => [
             createVNode(_component_a_button, {
               type: "primary",
               class: "copy-form-data-json-btn",
-              "data-clipboard-text": formDataRawJson.value,
+              "data-clipboard-text": exportTemplate.value,
               onClick: copyFormDataJson
             }, {
               default: withCtx(() => [
@@ -923,7 +601,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _: 1
             }),
             createVNode(_component_a_button, {
-              onClick: _cache[16] || (_cache[16] = ($event) => showFormDataDialogFlag.value = false)
+              onClick: _cache[10] || (_cache[10] = ($event) => showFormDataDialogFlag.value = false)
             }, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(unref(i18nt)("designer.hint.closePreview")), 1)
@@ -935,116 +613,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createVNode(unref(CodeEditor), {
               mode: "json",
               readonly: true,
-              modelValue: formDataJson.value,
-              "onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => formDataJson.value = $event)
-            }, null, 8, ["modelValue"])
-          ]),
-          _: 1
-        }, 8, ["title", "visible"]),
-        showExportSFCDialogFlag.value ? (openBlock(), createBlock(_component_a_modal, {
-          key: 0,
-          title: unref(i18nt)("designer.toolbar.generateSFC"),
-          visible: showExportSFCDialogFlag.value,
-          "onUpdate:visible": _cache[22] || (_cache[22] = ($event) => showExportSFCDialogFlag.value = $event),
-          "append-to-body": "",
-          "show-close": true,
-          class: "drag-dialog",
-          center: "",
-          width: "65%",
-          "close-on-click-modal": false,
-          "close-on-press-escape": false,
-          "destroy-on-close": true
-        }, {
-          footer: withCtx(() => [
-            createElementVNode("div", _hoisted_7, [
-              createVNode(_component_a_button, {
-                type: "primary",
-                class: "copy-vue2-sfc-btn",
-                "data-clipboard-text": sfcCode.value,
-                onClick: copyV2SFC
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(i18nt)("designer.hint.copyVue2SFC")), 1)
-                ]),
-                _: 1
-              }, 8, ["data-clipboard-text"]),
-              createVNode(_component_a_button, {
-                type: "primary",
-                class: "copy-vue3-sfc-btn",
-                "data-clipboard-text": sfcCodeV3.value,
-                onClick: copyV3SFC
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(i18nt)("designer.hint.copyVue3SFC")), 1)
-                ]),
-                _: 1
-              }, 8, ["data-clipboard-text"]),
-              createVNode(_component_a_button, { onClick: saveV2SFC }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(i18nt)("designer.hint.saveVue2SFC")), 1)
-                ]),
-                _: 1
-              }),
-              createVNode(_component_a_button, { onClick: saveV3SFC }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(i18nt)("designer.hint.saveVue3SFC")), 1)
-                ]),
-                _: 1
-              }),
-              createVNode(_component_a_button, {
-                onClick: _cache[21] || (_cache[21] = ($event) => showExportSFCDialogFlag.value = false)
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(i18nt)("designer.hint.closePreview")), 1)
-                ]),
-                _: 1
-              })
-            ])
-          ]),
-          default: withCtx(() => [
-            createVNode(_component_a_tabs, {
-              type: "border-card",
-              class: "no-box-shadow no-padding",
-              activeKey: activeSFCTab.value,
-              "onUpdate:activeKey": _cache[20] || (_cache[20] = ($event) => activeSFCTab.value = $event)
-            }, {
-              default: withCtx(() => [
-                createVNode(_component_a_tab_pane, {
-                  tab: "Vue2",
-                  key: "vue2"
-                }, {
-                  default: withCtx(() => [
-                    createVNode(unref(CodeEditor), {
-                      mode: "html",
-                      readonly: true,
-                      modelValue: sfcCode.value,
-                      "onUpdate:modelValue": _cache[18] || (_cache[18] = ($event) => sfcCode.value = $event),
-                      "user-worker": false
-                    }, null, 8, ["modelValue"])
-                  ]),
-                  _: 1
-                }),
-                createVNode(_component_a_tab_pane, {
-                  tab: "Vue3",
-                  key: "vue3"
-                }, {
-                  default: withCtx(() => [
-                    createVNode(unref(CodeEditor), {
-                      mode: "html",
-                      readonly: true,
-                      modelValue: sfcCodeV3.value,
-                      "onUpdate:modelValue": _cache[19] || (_cache[19] = ($event) => sfcCodeV3.value = $event),
-                      "user-worker": false
-                    }, null, 8, ["modelValue"])
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }, 8, ["activeKey"])
+              value: exportTemplate.value
+            }, null, 8, ["value"])
           ]),
           _: 1
-        }, 8, ["title", "visible"])) : createCommentVNode("", true)
+        }, 8, ["title", "visible"])
       ]);
     };
   }
@@ -1052,3 +625,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as default
 };
+//# sourceMappingURL=index.vue2.js.map