cloud-web-corejs 1.0.276 → 1.0.277

package/src/components/xform/form-designer/toolbar-panel/indexMixin.js

@@ -1,589 +1,655 @@
-import {
-  deepClone,
-  copyToClipboard,
-  generateId,
-  getQueryParam,
-  traverseAllWidgets,
-  addWindowResizeHandler
-} from '../../../../components/xform/utils/util';
-import i18n from '../../../../components/xform/utils/i18n';
-import {
-  generateCode
-} from '../../../../components/xform/utils/code-generator';
-import {
-  genSFC
-} from '../../../../components/xform/utils/sfc-generator';
-import loadBeautifier from '../../../../components/xform/utils/beautifierLoader';
-import {
-  saveAs
-} from 'file-saver';
-import axios from 'axios';
-
-let modules = {};
-const baseRefUtil = {
-  i18n,
-  generateCode,
-  genSFC,
-  loadBeautifier,
-  saveAs,
-  axios,
-  deepClone,
-  copyToClipboard,
-  generateId,
-  getQueryParam,
-  traverseAllWidgets,
-  addWindowResizeHandler
-};
-
-modules = {
-  mixins: [baseRefUtil.i18n],
-  props: {
-    designer: Object
-  },
-  inject: ['getDesignerConfig', 'saveReportTemplate', 'getReportTemplate', 'getFormTemplateTableDTOs', 'readonly'],
-  data() {
-    return {
-      designerConfig: this.getDesignerConfig(),
-      showRender: true,
-      toolbarWidth: 600,
-      showPreviewDialogFlag: false,
-      showImportJsonDialogFlag: false,
-      showExportJsonDialogFlag: false,
-      showExportCodeDialogFlag: false,
-      showFormDataDialogFlag: false,
-      showExportSFCDialogFlag: false,
-      showNodeTreeDrawerFlag: false,
-
-      nodeTreeData: [],
-
-      testFunc: '',
-      importTemplate: '',
-      jsonContent: '',
-      jsonRawContent: '',
-
-      formDataJson: '',
-      formDataRawJson: '',
-
-      vueCode: '',
-      htmlCode: '',
-
-      sfcCode: '',
-      sfcCodeV3: '',
-
-      activeCodeTab: 'vue',
-      activeSFCTab: 'vue2',
-
-      testFormData: {},
-      testOptionData: {},
-
-      activeName: 'first',
-      formInsListFieldDTOs: [],
-      vxeOption: {},
-      formData: {},
-      showFormConfigDialog: false
-    };
-  },
-  computed: {
-    formJson() {
-      return {
-        // widgetList: this.designer.widgetList,
-        // formConfig: this.designer.formConfig
-
-        widgetList: baseRefUtil.deepClone(this.designer.widgetList),
-        formConfig: baseRefUtil.deepClone(this.designer.formConfig)
-      };
-    },
-
-    undoDisabled() {
-      return !this.designer.undoEnabled();
-    },
-
-    redoDisabled() {
-      return !this.designer.redoEnabled();
-    },
-
-    layoutType() {
-      return this.designer.getLayoutType();
-    }
-  },
-  watch: {
-    'designer.widgetList': {
-      deep: true,
-      handler(val) {
-        //console.log('test-----', val)
-        //this.refreshNodeTree()
-      }
-    }
-  },
-  mounted() {
-    let maxTBWidth = this.designerConfig.toolbarMaxWidth || 380;
-    let minTBWidth = this.designerConfig.toolbarMinWidth || 300;
-    let newTBWidth = window.innerWidth - 260 - 300 - 320 - 80;
-    //this.toolbarWidth = newTBWidth >= maxTBWidth ? maxTBWidth : newTBWidth <= minTBWidth ? minTBWidth : newTBWidth;
-    baseRefUtil.addWindowResizeHandler(() => {
-      this.$nextTick(() => {
-        let newTBWidth2 = window.innerWidth - 260 - 300 - 320 - 80;
-        //this.toolbarWidth = newTBWidth2 >= maxTBWidth ? maxTBWidth : newTBWidth2 <= minTBWidth ? minTBWidth :
-        newTBWidth2;
-      });
-    });
-  },
-  methods: {
-    showToolButton(configName) {
-      if (this.designerConfig[configName] === undefined) {
-        return true;
-      }
-
-      return !!this.designerConfig[configName];
-    },
-
-    buildTreeNodeOfWidget(widget, treeNode) {
-      let curNode = {
-        id: widget.id,
-        label: widget.options.label || widget.type
-        //selectable: true,
-      };
-      treeNode.push(curNode);
-
-      if (widget.category === undefined) {
-        return;
-      }
-
-      curNode.children = [];
-      if (widget.type === 'grid') {
-        widget.cols.map(col => {
-          let colNode = {
-            id: col.id,
-            label: col.options.name || widget.type,
-            children: []
-          };
-          curNode.children.push(colNode);
-          col.widgetList.map(wChild => {
-            this.buildTreeNodeOfWidget(wChild, colNode.children);
-          });
-        });
-      } else if (widget.type === 'table') {
-        //TODO: 需要考虑合并单元格！！
-        widget.rows.map(row => {
-          let rowNode = {
-            id: row.id,
-            label: 'table-row',
-            selectable: false,
-            children: []
-          };
-          curNode.children.push(rowNode);
-
-          row.cols.map(cell => {
-            if (!!cell.merged) {
-              //跳过合并单元格！！
-              return;
-            }
-
-            let rowChildren = rowNode.children;
-            let cellNode = {
-              id: cell.id,
-              label: 'table-cell',
-              children: []
-            };
-            rowChildren.push(cellNode);
-
-            cell.widgetList.map(wChild => {
-              this.buildTreeNodeOfWidget(wChild, cellNode.children);
-            });
-          });
-        });
-      } else if (widget.type === 'h5-table') {
-        //TODO: 需要考虑合并单元格！！
-        widget.rows.map(row => {
-          let rowNode = {
-            id: row.id,
-            label: 'table-row',
-            selectable: false,
-            children: []
-          };
-          curNode.children.push(rowNode);
-
-          row.cols.map(cell => {
-            if (!!cell.merged) {
-              //跳过合并单元格！！
-              return;
-            }
-
-            let rowChildren = rowNode.children;
-            let cellNode = {
-              id: cell.id,
-              label: 'table-cell',
-              children: []
-            };
-            rowChildren.push(cellNode);
-
-            cell.widgetList.map(wChild => {
-              this.buildTreeNodeOfWidget(wChild, cellNode.children);
-            });
-          });
-        });
-      } else if (widget.type === 'tab') {
-        widget.tabs.map(tab => {
-          let tabNode = {
-            id: tab.id,
-            label: tab.options.name || widget.type,
-            selectable: false,
-            children: []
-          };
-          curNode.children.push(tabNode);
-          tab.widgetList.map(wChild => {
-            this.buildTreeNodeOfWidget(wChild, tabNode.children);
-          });
-        });
-      } else if (widget.type === 'sub-form') {
-        widget.widgetList.map(wChild => {
-          this.buildTreeNodeOfWidget(wChild, curNode.children);
-        });
-      } else if (widget.category === 'container') {
-        //自定义容器
-        widget.widgetList.map(wChild => {
-          this.buildTreeNodeOfWidget(wChild, curNode.children);
-        });
-      }
-    },
-
-    refreshNodeTree() {
-      this.nodeTreeData.length = 0;
-      this.designer.widgetList.forEach(wItem => {
-        this.buildTreeNodeOfWidget(wItem, this.nodeTreeData);
-      });
-    },
-
-    showNodeTreeDrawer() {
-      this.refreshNodeTree();
-      this.showNodeTreeDrawerFlag = true;
-      this.$nextTick(() => {
-        if (!!this.designer.selectedId) {
-          //同步当前选中组件到节点树！！！
-          this.$refs.nodeTree.setCurrentKey(this.designer.selectedId);
-        }
-      });
-    },
-
-    undoHistory() {
-      this.designer.undoHistoryStep();
-    },
-
-    redoHistory() {
-      this.designer.redoHistoryStep();
-    },
-
-    changeLayoutType(newType) {
-      this.designer.changeLayoutType(newType);
-      this.$emit("loadWidgets");
-    },
-
-    clearFormWidget() {
-      this.designer.clearDesigner(),
-        this.designer.formWidget.clearWidgetRefList(),
-        this.designer.emitEvent("form-json-imported", []);
-      this.$emit("loadWidgets");
-    },
-
-    previewForm() {
-      this.reportTemplate = this.getReportTemplate();
-      this.showPreviewDialogFlag = true;
-      this.activeName = 'first';
-    },
-
-    saveAsFile(fileContent, defaultFileName) {
-      this.$prompt(this.i18nt('designer.hint.fileNameForSave'), this.i18nt('designer.hint.saveFileTitle'), {
-        inputValue: defaultFileName,
-        closeOnClickModal: false,
-        inputPlaceholder: this.i18nt('designer.hint.fileNameInputPlaceholder')
-      })
-        .then(({
-                 value
-               }) => {
-          if (!value) {
-            value = defaultFileName;
-          }
-
-          if (baseRefUtil.getQueryParam('vscode') == 1) {
-            this.vsSaveFile(value, fileContent);
-            return;
-          }
-
-          const fileBlob = new Blob([fileContent], {
-            type: 'text/plain;charset=utf-8'
-          });
-          baseRefUtil.saveAs(fileBlob, value);
-        })
-        .catch(() => {
-          //
-        });
-    },
-
-    vsSaveFile(fileName, fileContent) {
-      const msgObj = {
-        cmd: 'writeFile',
-        data: {
-          fileName,
-          code: fileContent
-        }
-      };
-      window.parent.postMessage(msgObj, '*');
-    },
-
-    importJson() {
-      this.importTemplate = JSON.stringify(this.designer.getImportTemplate(), null, '  ');
-      this.showImportJsonDialogFlag = true;
-    },
-    doJsonImport() {
-      try {
-        let importObj = JSON.parse(this.importTemplate);
-        this.designer.handleImportJson(importObj)
-        this.designer.loadFormJson(importObj);
-
-        this.showImportJsonDialogFlag = false;
-        this.$message.success(this.i18nt('designer.hint.importJsonSuccess'));
-
-        this.designer.emitHistoryChange();
-
-        this.designer.emitEvent('form-json-imported', []);
-      } catch (ex) {
-        this.$message.error(ex + '');
-      }
-    },
-
-    exportJson() {
-      let widgetList = baseRefUtil.deepClone(this.designer.widgetList);
-      let formConfig = baseRefUtil.deepClone(this.designer.formConfig);
-      let formCode = this.designer?.vueInstance?.reportTemplate?.formCode;
-      if(formCode){
-        formConfig.formCode = formCode;
-      }
-      this.jsonContent = JSON.stringify({
-        widgetList,
-        formConfig
-      }, null, '  ');
-      this.jsonRawContent = JSON.stringify({
-        widgetList,
-        formConfig
-      });
-      this.showExportJsonDialogFlag = true;
-    },
-
-    copyFormJson(e) {
-      baseRefUtil.copyToClipboard(this.jsonRawContent, e, this.$message, this.i18nt('designer.hint.copyJsonSuccess'),
-        this.i18nt(
-          'designer.hint.copyJsonFail'));
-    },
-
-    saveFormJson() {
-      this.saveAsFile(this.jsonContent, `vform${baseRefUtil.generateId()}.json`);
-    },
-
-    exportCode() {
-      this.vueCode = baseRefUtil.generateCode(this.formJson);
-      this.htmlCode = baseRefUtil.generateCode(this.formJson, 'html');
-      this.showExportCodeDialogFlag = true;
-    },
-
-    copyVueCode(e) {
-      baseRefUtil.copyToClipboard(this.vueCode, e, this.$message, this.i18nt('designer.hint.copyVueCodeSuccess'), this
-        .i18nt(
-          'designer.hint.copyVueCodeFail'));
-    },
-
-    copyHtmlCode(e) {
-      baseRefUtil.copyToClipboard(this.htmlCode, e, this.$message, this.i18nt('designer.hint.copyHtmlCodeSuccess'),
-        this.i18nt(
-          'designer.hint.copyHtmlCodeFail'));
-    },
-
-    saveVueCode() {
-      this.saveAsFile(this.vueCode, `vform${baseRefUtil.generateId()}.vue`);
-    },
-
-    saveHtmlCode() {
-      this.saveAsFile(this.htmlCode, `vform${baseRefUtil.generateId()}.html`);
-    },
-
-    generateSFC() {
-      baseRefUtil.loadBeautifier(beautifier => {
-        this.sfcCode = baseRefUtil.genSFC(this.designer.formConfig, this.designer.widgetList, beautifier);
-        this.sfcCodeV3 = baseRefUtil.genSFC(this.designer.formConfig, this.designer.widgetList, beautifier, true);
-        this.showExportSFCDialogFlag = true;
-      });
-    },
-
-    copyV2SFC(e) {
-      baseRefUtil.copyToClipboard(this.sfcCode, e, this.$message, this.i18nt('designer.hint.copySFCSuccess'), this
-        .i18nt(
-          'designer.hint.copySFCFail'));
-    },
-
-    copyV3SFC(e) {
-      baseRefUtil.copyToClipboard(this.sfcCodeV3, e, this.$message, this.i18nt('designer.hint.copySFCSuccess'), this
-        .i18nt(
-          'designer.hint.copySFCFail'));
-    },
-
-    saveV2SFC() {
-      this.saveAsFile(this.sfcCode, `vformV2-${baseRefUtil.generateId()}.vue`);
-    },
-
-    saveV3SFC() {
-      this.saveAsFile(this.sfcCodeV3, `vformV3-${baseRefUtil.generateId()}.vue`);
-    },
-
-    getFormData() {
-      this.$refs['preForm']
-        .getFormData()
-        .then(formData => {
-          this.formDataJson = JSON.stringify(formData, null, '  ');
-          this.formDataRawJson = JSON.stringify(formData);
-
-          this.showFormDataDialogFlag = true;
-        })
-        .catch(error => {
-          this.$message.error(error);
-        });
-    },
-
-    copyFormDataJson(e) {
-      baseRefUtil.copyToClipboard(this.formDataRawJson, e, this.$message, this.i18nt('designer.hint.copyJsonSuccess'),
-        this.i18nt(
-          'designer.hint.copyJsonFail'));
-    },
-
-    saveFormData() {
-      this.saveAsFile(this.htmlCode, `formData${baseRefUtil.generateId()}.json`);
-    },
-
-    resetForm() {
-      this.$refs['preForm'].resetForm();
-    },
-
-    setFormDisabled() {
-      this.$refs['preForm'].disableForm();
-    },
-
-    setFormEnabled() {
-      this.$refs['preForm'].enableForm();
-    },
-
-    printFormJson() {
-      let tmpFS = {
-        widgetList: baseRefUtil.deepClone(this.designer.widgetList),
-        formConfig: baseRefUtil.deepClone(this.designer.formConfig)
-      };
-
-      console.log(tmpFS);
-    },
-
-    testValidate() {
-      console.log('test===', this.$refs['preForm'].validateForm());
-    },
-
-    testSetFormData() {
-      // let fData = {
-      //   'fuTest': [
-      //     {
-      //       name: '上传文件测试.xlsx',
-      //       url: 'https://www.vform666.com/123.xlsx'
-      //     }
-      //   ]
-      // }
-      // this.$refs['preForm'].setFormData(fData)
-
-      let nfData = {
-        checkbox45524: [1, 2]
-      };
-      this.$refs['preForm'].setFormData(nfData);
-    },
-
-    handleFormChange(fieldName, newValue, oldValue, formModel) {
-      /*
-        console.log('---formChange start---')
-        console.log('fieldName', fieldName)
-        console.log('newValue', newValue)
-        console.log('oldValue', oldValue)
-        console.log('formModel', formModel)
-        console.log('---formChange end---')
-        */
-    },
-
-    testOnAppendButtonClick(clickedWidget) {
-      console.log('test', clickedWidget);
-    },
-
-    testOnButtonClick(button) {
-      console.log('test', button);
-    },
-
-    findWidgetById(wId) {
-      let foundW = null;
-      baseRefUtil.traverseAllWidgets(this.designer.widgetList, w => {
-        if (w.id === wId) {
-          foundW = w;
-        }
-      });
-
-      return foundW;
-    },
-
-    onNodeTreeClick(nodeData, node, nodeEl) {
-      //console.log('test', JSON.stringify(nodeData))
-
-      if (nodeData.selectable !== undefined && !nodeData.selectable) {
-        this.$message.info(this.i18nt('designer.hint.currentNodeCannotBeSelected'));
-      } else {
-        const selectedId = nodeData.id;
-        const foundW = this.findWidgetById(selectedId);
-        if (!!foundW) {
-          this.designer.setSelected(foundW);
-        }
-      }
-    },
-    initSearchCondition() {
-      let formConfig = this.designer.formConfig;
-      let gridConfig = formConfig.gridConfig || {};
-      let searchFields = gridConfig.searchFields || [];
-      searchFields = searchFields.filter(item => {
-        return !!item.prop && !!item.label;
-      });
-      this.searchFields = searchFields;
-    },
-    createColumns() {
-      let formConfig = this.designer.formConfig;
-      let gridConfig = formConfig.gridConfig || {};
-      let tableColumns = gridConfig.tableColumns || [];
-      if (tableColumns.length) {
-        return tableColumns.map((row, index) => {
-          let column = {
-            title: row.label,
-            field: row.prop,
-            width: 150
-          }
-          if (index === 0) {
-            column.fixed = 'left';
-          }
-          return column;
-        })
-      } else {
-        let formTemplateTableDTOs = this.getFormTemplateTableDTOs();
-        let formTemplateTableDTO = formTemplateTableDTOs.find(item => item.tableType == 0);
-        let formInsListFieldDTOs = [];
-        if (formTemplateTableDTO) {
-          formInsListFieldDTOs = formTemplateTableDTO.formTemplateFieldDTOs || [];
-        }
-        return formInsListFieldDTOs.map(row => {
-          return {
-            title: row.fieldDesc,
-            field: row.fieldName,
-            width: 150
-          }
-        })
-      }
-    }
-  }
-};
-
-export default modules;
+import {
+  deepClone,
+  copyToClipboard,
+  generateId,
+  getQueryParam,
+  traverseAllWidgets,
+  addWindowResizeHandler,
+} from "../../../../components/xform/utils/util";
+import i18n from "../../../../components/xform/utils/i18n";
+import { generateCode } from "../../../../components/xform/utils/code-generator";
+import { genSFC } from "../../../../components/xform/utils/sfc-generator";
+import loadBeautifier from "../../../../components/xform/utils/beautifierLoader";
+import { saveAs } from "file-saver";
+import axios from "axios";
+
+let modules = {};
+const baseRefUtil = {
+  i18n,
+  generateCode,
+  genSFC,
+  loadBeautifier,
+  saveAs,
+  axios,
+  deepClone,
+  copyToClipboard,
+  generateId,
+  getQueryParam,
+  traverseAllWidgets,
+  addWindowResizeHandler,
+};
+
+modules = {
+  mixins: [baseRefUtil.i18n],
+  props: {
+    designer: Object,
+  },
+  inject: [
+    "getDesignerConfig",
+    "saveReportTemplate",
+    "getReportTemplate",
+    "getFormTemplateTableDTOs",
+    "readonly",
+  ],
+  data() {
+    return {
+      designerConfig: this.getDesignerConfig(),
+      showRender: true,
+      toolbarWidth: 600,
+      showPreviewDialogFlag: false,
+      showImportJsonDialogFlag: false,
+      showExportJsonDialogFlag: false,
+      showExportCodeDialogFlag: false,
+      showFormDataDialogFlag: false,
+      showExportSFCDialogFlag: false,
+      showNodeTreeDrawerFlag: false,
+
+      nodeTreeData: [],
+
+      testFunc: "",
+      importTemplate: "",
+      jsonContent: "",
+      jsonRawContent: "",
+
+      formDataJson: "",
+      formDataRawJson: "",
+
+      vueCode: "",
+      htmlCode: "",
+
+      sfcCode: "",
+      sfcCodeV3: "",
+
+      activeCodeTab: "vue",
+      activeSFCTab: "vue2",
+
+      testFormData: {},
+      testOptionData: {},
+
+      activeName: "first",
+      formInsListFieldDTOs: [],
+      vxeOption: {},
+      formData: {},
+      showFormConfigDialog: false,
+    };
+  },
+  computed: {
+    formJson() {
+      return {
+        // widgetList: this.designer.widgetList,
+        // formConfig: this.designer.formConfig
+
+        widgetList: baseRefUtil.deepClone(this.designer.widgetList),
+        formConfig: baseRefUtil.deepClone(this.designer.formConfig),
+      };
+    },
+
+    undoDisabled() {
+      return !this.designer.undoEnabled();
+    },
+
+    redoDisabled() {
+      return !this.designer.redoEnabled();
+    },
+
+    layoutType() {
+      return this.designer.getLayoutType();
+    },
+  },
+  watch: {
+    "designer.widgetList": {
+      deep: true,
+      handler(val) {
+        //console.log('test-----', val)
+        //this.refreshNodeTree()
+      },
+    },
+  },
+  mounted() {
+    let maxTBWidth = this.designerConfig.toolbarMaxWidth || 380;
+    let minTBWidth = this.designerConfig.toolbarMinWidth || 300;
+    let newTBWidth = window.innerWidth - 260 - 300 - 320 - 80;
+    //this.toolbarWidth = newTBWidth >= maxTBWidth ? maxTBWidth : newTBWidth <= minTBWidth ? minTBWidth : newTBWidth;
+    this.winResizeUnbind = baseRefUtil.addWindowResizeHandler(() => {
+      this.$nextTick(() => {
+        let newTBWidth2 = window.innerWidth - 260 - 300 - 320 - 80;
+        //this.toolbarWidth = newTBWidth2 >= maxTBWidth ? maxTBWidth : newTBWidth2 <= minTBWidth ? minTBWidth :
+        newTBWidth2;
+      });
+    });
+  },
+  beforeDestroy() {
+    // window 级监听持有本实例，销毁时必须解绑，否则工具栏面板整树泄露
+    if (this.winResizeUnbind) {
+      this.winResizeUnbind();
+      this.winResizeUnbind = null;
+    }
+  },
+  methods: {
+    showToolButton(configName) {
+      if (this.designerConfig[configName] === undefined) {
+        return true;
+      }
+
+      return !!this.designerConfig[configName];
+    },
+
+    buildTreeNodeOfWidget(widget, treeNode) {
+      let curNode = {
+        id: widget.id,
+        label: widget.options.label || widget.type,
+        //selectable: true,
+      };
+      treeNode.push(curNode);
+
+      if (widget.category === undefined) {
+        return;
+      }
+
+      curNode.children = [];
+      if (widget.type === "grid") {
+        widget.cols.map((col) => {
+          let colNode = {
+            id: col.id,
+            label: col.options.name || widget.type,
+            children: [],
+          };
+          curNode.children.push(colNode);
+          col.widgetList.map((wChild) => {
+            this.buildTreeNodeOfWidget(wChild, colNode.children);
+          });
+        });
+      } else if (widget.type === "table") {
+        //TODO: 需要考虑合并单元格！！
+        widget.rows.map((row) => {
+          let rowNode = {
+            id: row.id,
+            label: "table-row",
+            selectable: false,
+            children: [],
+          };
+          curNode.children.push(rowNode);
+
+          row.cols.map((cell) => {
+            if (!!cell.merged) {
+              //跳过合并单元格！！
+              return;
+            }
+
+            let rowChildren = rowNode.children;
+            let cellNode = {
+              id: cell.id,
+              label: "table-cell",
+              children: [],
+            };
+            rowChildren.push(cellNode);
+
+            cell.widgetList.map((wChild) => {
+              this.buildTreeNodeOfWidget(wChild, cellNode.children);
+            });
+          });
+        });
+      } else if (widget.type === "h5-table") {
+        //TODO: 需要考虑合并单元格！！
+        widget.rows.map((row) => {
+          let rowNode = {
+            id: row.id,
+            label: "table-row",
+            selectable: false,
+            children: [],
+          };
+          curNode.children.push(rowNode);
+
+          row.cols.map((cell) => {
+            if (!!cell.merged) {
+              //跳过合并单元格！！
+              return;
+            }
+
+            let rowChildren = rowNode.children;
+            let cellNode = {
+              id: cell.id,
+              label: "table-cell",
+              children: [],
+            };
+            rowChildren.push(cellNode);
+
+            cell.widgetList.map((wChild) => {
+              this.buildTreeNodeOfWidget(wChild, cellNode.children);
+            });
+          });
+        });
+      } else if (widget.type === "tab") {
+        widget.tabs.map((tab) => {
+          let tabNode = {
+            id: tab.id,
+            label: tab.options.name || widget.type,
+            selectable: false,
+            children: [],
+          };
+          curNode.children.push(tabNode);
+          tab.widgetList.map((wChild) => {
+            this.buildTreeNodeOfWidget(wChild, tabNode.children);
+          });
+        });
+      } else if (widget.type === "sub-form") {
+        widget.widgetList.map((wChild) => {
+          this.buildTreeNodeOfWidget(wChild, curNode.children);
+        });
+      } else if (widget.category === "container") {
+        //自定义容器
+        widget.widgetList.map((wChild) => {
+          this.buildTreeNodeOfWidget(wChild, curNode.children);
+        });
+      }
+    },
+
+    refreshNodeTree() {
+      this.nodeTreeData.length = 0;
+      this.designer.widgetList.forEach((wItem) => {
+        this.buildTreeNodeOfWidget(wItem, this.nodeTreeData);
+      });
+    },
+
+    showNodeTreeDrawer() {
+      this.refreshNodeTree();
+      this.showNodeTreeDrawerFlag = true;
+      this.$nextTick(() => {
+        if (!!this.designer.selectedId) {
+          //同步当前选中组件到节点树！！！
+          this.$refs.nodeTree.setCurrentKey(this.designer.selectedId);
+        }
+      });
+    },
+
+    undoHistory() {
+      this.designer.undoHistoryStep();
+    },
+
+    redoHistory() {
+      this.designer.redoHistoryStep();
+    },
+
+    changeLayoutType(newType) {
+      this.designer.changeLayoutType(newType);
+      this.$emit("loadWidgets");
+    },
+
+    clearFormWidget() {
+      this.designer.clearDesigner(),
+        this.designer.formWidget.clearWidgetRefList(),
+        this.designer.emitEvent("form-json-imported", []);
+      this.$emit("loadWidgets");
+    },
+
+    previewForm() {
+      this.reportTemplate = this.getReportTemplate();
+      this.showPreviewDialogFlag = true;
+      this.activeName = "first";
+    },
+
+    saveAsFile(fileContent, defaultFileName) {
+      this.$prompt(
+        this.i18nt("designer.hint.fileNameForSave"),
+        this.i18nt("designer.hint.saveFileTitle"),
+        {
+          inputValue: defaultFileName,
+          closeOnClickModal: false,
+          inputPlaceholder: this.i18nt(
+            "designer.hint.fileNameInputPlaceholder"
+          ),
+        }
+      )
+        .then(({ value }) => {
+          if (!value) {
+            value = defaultFileName;
+          }
+
+          if (baseRefUtil.getQueryParam("vscode") == 1) {
+            this.vsSaveFile(value, fileContent);
+            return;
+          }
+
+          const fileBlob = new Blob([fileContent], {
+            type: "text/plain;charset=utf-8",
+          });
+          baseRefUtil.saveAs(fileBlob, value);
+        })
+        .catch(() => {
+          //
+        });
+    },
+
+    vsSaveFile(fileName, fileContent) {
+      const msgObj = {
+        cmd: "writeFile",
+        data: {
+          fileName,
+          code: fileContent,
+        },
+      };
+      window.parent.postMessage(msgObj, "*");
+    },
+
+    importJson() {
+      this.importTemplate = JSON.stringify(
+        this.designer.getImportTemplate(),
+        null,
+        "  "
+      );
+      this.showImportJsonDialogFlag = true;
+    },
+    doJsonImport() {
+      try {
+        let importObj = JSON.parse(this.importTemplate);
+        this.designer.handleImportJson(importObj);
+        this.designer.loadFormJson(importObj);
+
+        this.showImportJsonDialogFlag = false;
+        this.$message.success(this.i18nt("designer.hint.importJsonSuccess"));
+
+        this.designer.emitHistoryChange();
+
+        this.designer.emitEvent("form-json-imported", []);
+      } catch (ex) {
+        this.$message.error(ex + "");
+      }
+    },
+
+    exportJson() {
+      let widgetList = baseRefUtil.deepClone(this.designer.widgetList);
+      let formConfig = baseRefUtil.deepClone(this.designer.formConfig);
+      let formCode = this.designer?.vueInstance?.reportTemplate?.formCode;
+      if (formCode) {
+        formConfig.formCode = formCode;
+      }
+      this.jsonContent = JSON.stringify(
+        {
+          widgetList,
+          formConfig,
+        },
+        null,
+        "  "
+      );
+      this.jsonRawContent = JSON.stringify({
+        widgetList,
+        formConfig,
+      });
+      this.showExportJsonDialogFlag = true;
+    },
+
+    copyFormJson(e) {
+      baseRefUtil.copyToClipboard(
+        this.jsonRawContent,
+        e,
+        this.$message,
+        this.i18nt("designer.hint.copyJsonSuccess"),
+        this.i18nt("designer.hint.copyJsonFail")
+      );
+    },
+
+    saveFormJson() {
+      this.saveAsFile(
+        this.jsonContent,
+        `vform${baseRefUtil.generateId()}.json`
+      );
+    },
+
+    exportCode() {
+      this.vueCode = baseRefUtil.generateCode(this.formJson);
+      this.htmlCode = baseRefUtil.generateCode(this.formJson, "html");
+      this.showExportCodeDialogFlag = true;
+    },
+
+    copyVueCode(e) {
+      baseRefUtil.copyToClipboard(
+        this.vueCode,
+        e,
+        this.$message,
+        this.i18nt("designer.hint.copyVueCodeSuccess"),
+        this.i18nt("designer.hint.copyVueCodeFail")
+      );
+    },
+
+    copyHtmlCode(e) {
+      baseRefUtil.copyToClipboard(
+        this.htmlCode,
+        e,
+        this.$message,
+        this.i18nt("designer.hint.copyHtmlCodeSuccess"),
+        this.i18nt("designer.hint.copyHtmlCodeFail")
+      );
+    },
+
+    saveVueCode() {
+      this.saveAsFile(this.vueCode, `vform${baseRefUtil.generateId()}.vue`);
+    },
+
+    saveHtmlCode() {
+      this.saveAsFile(this.htmlCode, `vform${baseRefUtil.generateId()}.html`);
+    },
+
+    generateSFC() {
+      baseRefUtil.loadBeautifier((beautifier) => {
+        this.sfcCode = baseRefUtil.genSFC(
+          this.designer.formConfig,
+          this.designer.widgetList,
+          beautifier
+        );
+        this.sfcCodeV3 = baseRefUtil.genSFC(
+          this.designer.formConfig,
+          this.designer.widgetList,
+          beautifier,
+          true
+        );
+        this.showExportSFCDialogFlag = true;
+      });
+    },
+
+    copyV2SFC(e) {
+      baseRefUtil.copyToClipboard(
+        this.sfcCode,
+        e,
+        this.$message,
+        this.i18nt("designer.hint.copySFCSuccess"),
+        this.i18nt("designer.hint.copySFCFail")
+      );
+    },
+
+    copyV3SFC(e) {
+      baseRefUtil.copyToClipboard(
+        this.sfcCodeV3,
+        e,
+        this.$message,
+        this.i18nt("designer.hint.copySFCSuccess"),
+        this.i18nt("designer.hint.copySFCFail")
+      );
+    },
+
+    saveV2SFC() {
+      this.saveAsFile(this.sfcCode, `vformV2-${baseRefUtil.generateId()}.vue`);
+    },
+
+    saveV3SFC() {
+      this.saveAsFile(
+        this.sfcCodeV3,
+        `vformV3-${baseRefUtil.generateId()}.vue`
+      );
+    },
+
+    getFormData() {
+      this.$refs["preForm"]
+        .getFormData()
+        .then((formData) => {
+          this.formDataJson = JSON.stringify(formData, null, "  ");
+          this.formDataRawJson = JSON.stringify(formData);
+
+          this.showFormDataDialogFlag = true;
+        })
+        .catch((error) => {
+          this.$message.error(error);
+        });
+    },
+
+    copyFormDataJson(e) {
+      baseRefUtil.copyToClipboard(
+        this.formDataRawJson,
+        e,
+        this.$message,
+        this.i18nt("designer.hint.copyJsonSuccess"),
+        this.i18nt("designer.hint.copyJsonFail")
+      );
+    },
+
+    saveFormData() {
+      this.saveAsFile(
+        this.htmlCode,
+        `formData${baseRefUtil.generateId()}.json`
+      );
+    },
+
+    resetForm() {
+      this.$refs["preForm"].resetForm();
+    },
+
+    setFormDisabled() {
+      this.$refs["preForm"].disableForm();
+    },
+
+    setFormEnabled() {
+      this.$refs["preForm"].enableForm();
+    },
+
+    printFormJson() {
+      let tmpFS = {
+        widgetList: baseRefUtil.deepClone(this.designer.widgetList),
+        formConfig: baseRefUtil.deepClone(this.designer.formConfig),
+      };
+
+      console.log(tmpFS);
+    },
+
+    testValidate() {
+      console.log("test===", this.$refs["preForm"].validateForm());
+    },
+
+    testSetFormData() {
+      // let fData = {
+      //   'fuTest': [
+      //     {
+      //       name: '上传文件测试.xlsx',
+      //       url: 'https://www.vform666.com/123.xlsx'
+      //     }
+      //   ]
+      // }
+      // this.$refs['preForm'].setFormData(fData)
+
+      let nfData = {
+        checkbox45524: [1, 2],
+      };
+      this.$refs["preForm"].setFormData(nfData);
+    },
+
+    handleFormChange(fieldName, newValue, oldValue, formModel) {
+      /*
+        console.log('---formChange start---')
+        console.log('fieldName', fieldName)
+        console.log('newValue', newValue)
+        console.log('oldValue', oldValue)
+        console.log('formModel', formModel)
+        console.log('---formChange end---')
+        */
+    },
+
+    testOnAppendButtonClick(clickedWidget) {
+      console.log("test", clickedWidget);
+    },
+
+    testOnButtonClick(button) {
+      console.log("test", button);
+    },
+
+    findWidgetById(wId) {
+      let foundW = null;
+      baseRefUtil.traverseAllWidgets(this.designer.widgetList, (w) => {
+        if (w.id === wId) {
+          foundW = w;
+        }
+      });
+
+      return foundW;
+    },
+
+    onNodeTreeClick(nodeData, node, nodeEl) {
+      //console.log('test', JSON.stringify(nodeData))
+
+      if (nodeData.selectable !== undefined && !nodeData.selectable) {
+        this.$message.info(
+          this.i18nt("designer.hint.currentNodeCannotBeSelected")
+        );
+      } else {
+        const selectedId = nodeData.id;
+        const foundW = this.findWidgetById(selectedId);
+        if (!!foundW) {
+          this.designer.setSelected(foundW);
+        }
+      }
+    },
+    initSearchCondition() {
+      let formConfig = this.designer.formConfig;
+      let gridConfig = formConfig.gridConfig || {};
+      let searchFields = gridConfig.searchFields || [];
+      searchFields = searchFields.filter((item) => {
+        return !!item.prop && !!item.label;
+      });
+      this.searchFields = searchFields;
+    },
+    createColumns() {
+      let formConfig = this.designer.formConfig;
+      let gridConfig = formConfig.gridConfig || {};
+      let tableColumns = gridConfig.tableColumns || [];
+      if (tableColumns.length) {
+        return tableColumns.map((row, index) => {
+          let column = {
+            title: row.label,
+            field: row.prop,
+            width: 150,
+          };
+          if (index === 0) {
+            column.fixed = "left";
+          }
+          return column;
+        });
+      } else {
+        let formTemplateTableDTOs = this.getFormTemplateTableDTOs();
+        let formTemplateTableDTO = formTemplateTableDTOs.find(
+          (item) => item.tableType == 0
+        );
+        let formInsListFieldDTOs = [];
+        if (formTemplateTableDTO) {
+          formInsListFieldDTOs =
+            formTemplateTableDTO.formTemplateFieldDTOs || [];
+        }
+        return formInsListFieldDTOs.map((row) => {
+          return {
+            title: row.fieldDesc,
+            field: row.fieldName,
+            width: 150,
+          };
+        });
+      }
+    },
+  },
+};
+
+export default modules;