@kp-ui/lowcode 1.0.72 → 1.0.73

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

@@ -0,0 +1,1046 @@
+import { defineComponent, defineAsyncComponent, 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 { 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 { message } from "ant-design-vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    leftWidth: {},
+    rightWidth: {},
+    changeRightWidth: {},
+    changeLeftWidth: {},
+    designer: {},
+    saveJsonApi: {},
+    globalDsv: { default: () => ({}) }
+  },
+  setup(__props, { expose: __expose }) {
+    const VFormRender = defineAsyncComponent(() => import("../../form-render/index.vue.js"));
+    const props = __props;
+    const getDesignerConfig = inject("getDesignerConfig");
+    const nodeTree = ref(null);
+    const preForm = 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 formDataJson = ref("");
+    const formDataRawJson = ref("");
+    const vueCode = 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),
+        formConfig: cloneDeep(props.designer.formConfig)
+      };
+    });
+    const undoDisabled = computed(() => {
+      return !props.designer.undoEnabled();
+    });
+    const redoDisabled = computed(() => {
+      return !props.designer.redoEnabled();
+    });
+    const layoutType = computed(() => {
+      return props.designer.getLayoutType();
+    });
+    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;
+      const newTBWidth = window.innerWidth - 260 - 300 - 320 - 80;
+      toolbarWidth.value = newTBWidth >= maxTBWidth ? maxTBWidth : newTBWidth <= minTBWidth ? minTBWidth : newTBWidth;
+      addWindowResizeHandler(() => {
+        nextTick(() => {
+          const newTBWidth2 = window.innerWidth - 260 - 300 - 320 - 80;
+          toolbarWidth.value = newTBWidth2 >= maxTBWidth ? maxTBWidth : newTBWidth2 <= minTBWidth ? minTBWidth : newTBWidth2;
+        });
+      });
+    });
+    const { i18nt } = useI18n();
+    const saveJson = () => {
+      if (props.saveJsonApi) {
+        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;
+      }
+      return !!designerConfig.value[configName];
+    };
+    const buildTreeNodeOfWidget = (widget, treeNode) => {
+      const curNode = {
+        id: widget.id,
+        label: widget.options.label || widget.type,
+        children: []
+      };
+      treeNode.push(curNode);
+      if (widget.category === void 0) {
+        return;
+      }
+      if (widget.type === "grid") {
+        widget.cols.map((col) => {
+          const colNode = {
+            id: col.id,
+            label: col.options.name || widget.type,
+            children: []
+          };
+          curNode.children.push(colNode);
+          col.widgetList.map((wChild) => {
+            buildTreeNodeOfWidget(wChild, colNode.children);
+          });
+        });
+      } else if (widget.type === "table") {
+        widget.rows.map((row) => {
+          const rowNode = {
+            id: row.id,
+            label: "table-row",
+            selectable: false,
+            children: []
+          };
+          curNode.children.push(rowNode);
+          row.cols.map((cell) => {
+            if (!!cell.merged) {
+              return;
+            }
+            const rowChildren = rowNode.children;
+            const cellNode = {
+              id: cell.id,
+              label: "table-cell",
+              children: []
+            };
+            rowChildren.push(cellNode);
+            cell.widgetList.map((wChild) => {
+              buildTreeNodeOfWidget(wChild, cellNode.children);
+            });
+          });
+        });
+      } else if (widget.type === "tab") {
+        widget.tabs.map((tab) => {
+          const tabNode = {
+            id: tab.id,
+            label: tab.options.name || widget.type,
+            selectable: false,
+            children: []
+          };
+          curNode.children.push(tabNode);
+          tab.widgetList.map((wChild) => {
+            buildTreeNodeOfWidget(wChild, tabNode.children);
+          });
+        });
+      } else if (widget.type === "sub-form") {
+        widget.widgetList.map((wChild) => {
+          buildTreeNodeOfWidget(wChild, curNode.children);
+        });
+      } else if (widget.category === "container") {
+        widget.widgetList.map((wChild) => {
+          buildTreeNodeOfWidget(wChild, curNode.children);
+        });
+      }
+    };
+    const refreshNodeTree = () => {
+      nodeTreeData.value.length = 0;
+      props.designer.widgetList.forEach((wItem) => {
+        buildTreeNodeOfWidget(wItem, nodeTreeData.value);
+      });
+    };
+    const showNodeTreeDrawer = () => {
+      refreshNodeTree();
+      showNodeTreeDrawerFlag.value = true;
+      nextTick(() => {
+        if (!!props.designer.selectedId) ;
+      });
+    };
+    const undoHistory = () => {
+      props.designer.undoHistoryStep();
+    };
+    const redoHistory = () => {
+      props.designer.redoHistoryStep();
+    };
+    const changeLayoutType = (newType) => {
+      props.designer.changeLayoutType(newType);
+    };
+    const clearFormWidget = () => {
+      props.designer.clearDesigner();
+      props.designer.formWidget.clearWidgetRefList();
+      message.success("ok");
+    };
+    const previewForm = () => {
+      showPreviewDialogFlag.value = true;
+    };
+    const saveAsFile = (fileContent, defaultFileName) => {
+      const value = "json.json";
+      if (getQueryParam("vscode") == 1) {
+        vsSaveFile(value, fileContent);
+        return;
+      }
+      const fileBlob = new Blob([fileContent], { type: "text/plain;charset=utf-8" });
+      saveAs(fileBlob, value);
+    };
+    const vsSaveFile = (fileName, fileContent) => {
+      const msgObj = {
+        cmd: "writeFile",
+        data: {
+          fileName,
+          code: fileContent
+        }
+      };
+      window.parent.postMessage(msgObj, "*");
+    };
+    const importJson = () => {
+      importTemplate.value = JSON.stringify(props.designer.getImportTemplate(), null, "  ");
+      showImportJsonDialogFlag.value = true;
+    };
+    const doJsonImport = () => {
+      try {
+        const importObj = JSON.parse(importTemplate.value);
+        if (!importObj || !importObj.formConfig) {
+          throw new Error(i18nt("designer.hint.invalidJsonFormat"));
+        }
+        props.designer.loadFormJson(importObj);
+        showImportJsonDialogFlag.value = false;
+        message.success(i18nt("designer.hint.importJsonSuccess"));
+        props.designer.emitHistoryChange();
+        props.designer.emitEvent("form-json-imported", []);
+      } catch (ex) {
+        message.error(ex + "");
+      }
+    };
+    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);
+    };
+    const showData = async () => {
+      const formConfig = props.designer.formConfig;
+      const { id: _id } = getLocat();
+      const dsResult = await fmtHttpParams(formConfig.serveList.vformDetail, { _id });
+      const leaveDates = [{ date: "2024-10-28" }, { date: "2024-10-29" }, { date: "2024-10-20" }];
+      preForm.value.getWidgetRef("leaveDates").setValue(leaveDates);
+      preForm.value.setFormData({
+        ...dsResult
+      });
+      preForm.value.setReadMode(true);
+    };
+    const getFormData = () => {
+      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);
+      });
+    };
+    const copyFormDataJson = (e) => {
+      copyToClipboard(
+        formDataRawJson.value,
+        e,
+        message,
+        i18nt("designer.hint.copyJsonSuccess"),
+        i18nt("designer.hint.copyJsonFail")
+      );
+    };
+    const saveFormData = () => {
+      saveAsFile(htmlCode.value);
+    };
+    const resetForm = () => {
+      preForm.value.resetForm();
+    };
+    const setFormDisabled = () => {
+      preForm.value.disableForm();
+    };
+    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);
+    };
+    const testOnAppendButtonClick = (clickedWidget) => {
+      console.log("test", clickedWidget);
+    };
+    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", { class: "toolbar-container" }, [
+        createElementVNode("div", { class: "left-toolbar" }, [
+          createVNode(_component_a_button, {
+            type: "link",
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.changeLeftWidth())
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(SvgIcon), {
+                style: normalizeStyle(`transform:${_ctx.leftWidth === 0 ? "rotate(180deg)" : "rotate(0deg)"}`),
+                "icon-class": "a-ipadarrow_back"
+              }, null, 8, ["style"])
+            ]),
+            _: 1
+          }),
+          createVNode(_component_a_button, {
+            type: "link",
+            disabled: undoDisabled.value,
+            title: unref(i18nt)("designer.toolbar.undoHint"),
+            onClick: undoHistory
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(SvgIcon), { "icon-class": "undo" })
+            ]),
+            _: 1
+          }, 8, ["disabled", "title"]),
+          createVNode(_component_a_button, {
+            type: "link",
+            disabled: redoDisabled.value,
+            title: unref(i18nt)("designer.toolbar.redoHint"),
+            onClick: redoHistory
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(SvgIcon), { "icon-class": "redo" })
+            ]),
+            _: 1
+          }, 8, ["disabled", "title"]),
+          createVNode(_component_a_radio_group, {
+            value: layoutType.value,
+            "onUpdate:value": _cache[4] || (_cache[4] = ($event) => layoutType.value = $event)
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_a_radio_button, {
+                value: "PC",
+                type: layoutType.value === "PC" ? "primary" : "",
+                onClick: _cache[1] || (_cache[1] = ($event) => changeLayoutType("PC"))
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(i18nt)("designer.toolbar.pcLayout")), 1)
+                ]),
+                _: 1
+              }, 8, ["type"]),
+              createVNode(_component_a_radio_button, {
+                value: "Pad",
+                type: layoutType.value === "Pad" ? "primary" : "",
+                onClick: _cache[2] || (_cache[2] = ($event) => changeLayoutType("Pad"))
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(i18nt)("designer.toolbar.padLayout")), 1)
+                ]),
+                _: 1
+              }, 8, ["type"]),
+              createVNode(_component_a_radio_button, {
+                type: layoutType.value === "H5" ? "primary" : "",
+                onClick: _cache[3] || (_cache[3] = ($event) => changeLayoutType("H5")),
+                value: "H5"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(i18nt)("designer.toolbar.mobileLayout")), 1)
+                ]),
+                _: 1
+              }, 8, ["type"])
+            ]),
+            _: 1
+          }, 8, ["value"])
+        ]),
+        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),
+          width: 280,
+          "destroy-on-close": true,
+          class: "node-tree-drawer"
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_a_tree, {
+              ref_key: "nodeTree",
+              ref: nodeTree,
+              treeData: nodeTreeData.value,
+              "default-expand-all": "",
+              "highlight-current": "",
+              class: "node-tree",
+              "icon-class": "el-icon-arrow-right",
+              fieldNames: { children: "children", title: "label", key: "id" }
+            }, null, 8, ["treeData"])
+          ]),
+          _: 1
+        }, 8, ["title", "visible"]),
+        createElementVNode("div", { class: "right-toolbar" }, [
+          createElementVNode("div", { class: "right-toolbar-con" }, [
+            showToolButton("clearDesignerButton") ? (openBlock(), createBlock(_component_a_button, {
+              key: 0,
+              type: "link",
+              onClick: clearFormWidget
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(SvgIcon), { "icon-class": "el-delete" }),
+                createTextVNode(toDisplayString(unref(i18nt)("designer.toolbar.clear")), 1)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true),
+            showToolButton("previewFormButton") ? (openBlock(), createBlock(_component_a_button, {
+              key: 1,
+              type: "link",
+              onClick: previewForm
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(SvgIcon), { "icon-class": "el-view" }),
+                createTextVNode(toDisplayString(unref(i18nt)("designer.toolbar.preview")), 1)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true),
+            showToolButton("importJsonButton") ? (openBlock(), createBlock(_component_a_button, {
+              key: 2,
+              type: "link",
+              onClick: importJson
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18nt)("designer.toolbar.importJson")), 1)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true),
+            showToolButton("exportJsonButton") ? (openBlock(), createBlock(_component_a_button, {
+              key: 3,
+              type: "link",
+              onClick: exportJson
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18nt)("designer.toolbar.exportJson")), 1)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true),
+            showToolButton("exportCodeButton") ? (openBlock(), createBlock(_component_a_button, {
+              key: 4,
+              type: "link",
+              onClick: saveJson
+            }, {
+              default: withCtx(() => [
+                createTextVNode(" 保存 ")
+              ]),
+              _: 1
+            })) : createCommentVNode("", true),
+            createVNode(_component_a_button, {
+              type: "link",
+              onClick: _cache[6] || (_cache[6] = ($event) => _ctx.changeRightWidth())
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(SvgIcon), {
+                  style: normalizeStyle(`transform:${_ctx.rightWidth === 0 ? "rotate(0deg)" : "rotate(180deg)"}`),
+                  "icon-class": "a-ipadarrow_back"
+                }, null, 8, ["style"])
+              ]),
+              _: 1
+            }),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.$slots, (idx, slotName) => {
+              return renderSlot(_ctx.$slots, slotName, {}, void 0, true);
+            }), 256))
+          ])
+        ]),
+        createVNode(unref(TpfModal), {
+          title: unref(i18nt)("designer.toolbar.preview"),
+          visible: showPreviewDialogFlag.value,
+          "onUpdate:visible": _cache[8] || (_cache[8] = ($event) => showPreviewDialogFlag.value = $event),
+          "show-close": true,
+          "close-on-click-modal": false,
+          "close-on-press-escape": false,
+          center: "",
+          "destroy-on-close": true,
+          "append-to-body": true,
+          class: "drag-dialog",
+          width: "75%",
+          fullscreen: layoutType.value === "H5" || layoutType.value === "Pad"
+        }, {
+          footerRight: withCtx(() => [
+            createVNode(_component_a_button, { onClick: showData }, {
+              default: withCtx(() => [
+                createTextVNode("数据回显")
+              ]),
+              _: 1
+            }),
+            createVNode(_component_a_button, {
+              type: "primary",
+              onClick: getFormData
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18nt)("designer.hint.getFormData")), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(_component_a_button, {
+              type: "primary",
+              onClick: resetForm
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18nt)("designer.hint.resetForm")), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(_component_a_button, {
+              type: "primary",
+              onClick: setFormDisabled
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18nt)("designer.hint.disableForm")), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(_component_a_button, {
+              type: "primary",
+              onClick: setFormEnabled
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18nt)("designer.hint.enableForm")), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(_component_a_button, {
+              onClick: _cache[7] || (_cache[7] = ($event) => showPreviewDialogFlag.value = false)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18nt)("designer.hint.closePreview")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", null, [
+              createElementVNode("div", {
+                class: normalizeClass(["form-render-wrapper", [
+                  layoutType.value === "H5" ? "h5-layout" : layoutType.value === "Pad" ? "pad-layout" : ""
+                ]])
+              }, [
+                createVNode(unref(VFormRender), {
+                  vfCtx: vfCtx.value,
+                  ref_key: "preForm",
+                  ref: preForm,
+                  "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"])
+              ], 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", { class: "dialog-footer" }, [
+              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", { class: "dialog-footer" }, [
+              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(TpfModal), {
+          title: unref(i18nt)("designer.hint.exportFormData"),
+          visible: showFormDataDialogFlag.value,
+          "onUpdate:visible": _cache[17] || (_cache[17] = ($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,
+              onClick: copyFormDataJson
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18nt)("designer.hint.copyFormData")), 1)
+              ]),
+              _: 1
+            }, 8, ["data-clipboard-text"]),
+            createVNode(_component_a_button, { onClick: saveFormData }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18nt)("designer.hint.saveFormData")), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(_component_a_button, {
+              onClick: _cache[16] || (_cache[16] = ($event) => showFormDataDialogFlag.value = false)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18nt)("designer.hint.closePreview")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          default: withCtx(() => [
+            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", { class: "dialog-footer" }, [
+              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"])
+          ]),
+          _: 1
+        }, 8, ["title", "visible"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};