skhj-variant 2.1.12

package/src/components/form-designer/toolbar-panel/index.vue

@@ -0,0 +1,1070 @@
+<template>
+  <div class="toolbar-container">
+    <div class="left-toolbar">
+      <el-button
+        type="text"
+        :disabled="undoDisabled"
+        :title="i18nt('designer.toolbar.undoHint')"
+        @click="undoHistory"
+      >
+        <svg-icon icon-class="undo"
+      /></el-button>
+      <el-button
+        type="text"
+        :disabled="redoDisabled"
+        :title="i18nt('designer.toolbar.redoHint')"
+        @click="redoHistory"
+      >
+        <svg-icon icon-class="redo"
+      /></el-button>
+      <el-button-group style="margin-left: 20px">
+        <el-button
+          :type="layoutType === 'PC' ? 'info' : ''"
+          @click="changeLayoutType('PC')"
+        >
+          {{ i18nt("designer.toolbar.pcLayout") }}</el-button
+        >
+        <el-button
+          :type="layoutType === 'Pad' ? 'info' : ''"
+          @click="changeLayoutType('Pad')"
+        >
+          {{ i18nt("designer.toolbar.padLayout") }}</el-button
+        >
+        <el-button
+          :type="layoutType === 'H5' ? 'info' : ''"
+          @click="changeLayoutType('H5')"
+        >
+          {{ i18nt("designer.toolbar.mobileLayout") }}</el-button
+        >
+      </el-button-group>
+      <el-button
+        type=""
+        style="margin-left: 20px"
+        :title="i18nt('designer.toolbar.nodeTreeHint')"
+        @click="showNodeTreeDrawer"
+      >
+        <svg-icon icon-class="node-tree"
+      /></el-button>
+    </div>
+
+    <el-drawer
+      :title="i18nt('designer.toolbar.nodeTreeTitle')"
+      direction="ltr"
+      :visible.sync="showNodeTreeDrawerFlag"
+      :modal="false"
+      :size="280"
+      :destroy-on-close="true"
+      class="node-tree-drawer"
+    >
+      <el-tree
+        ref="nodeTree"
+        :data="nodeTreeData"
+        node-key="id"
+        default-expand-all
+        highlight-current
+        class="node-tree"
+        icon-class="el-icon-arrow-right"
+        @node-click="onNodeTreeClick"
+      ></el-tree>
+    </el-drawer>
+
+    <div class="right-toolbar">
+      <el-button
+        v-if="showToolButton('clearDesignerButton')"
+        type="text"
+        @click="clearFormWidget"
+      >
+        <i class="el-icon-delete" />{{
+          i18nt("designer.toolbar.clear")
+        }}</el-button
+      >
+      <el-button
+        v-if="showToolButton('previewFormButton')"
+        type="text"
+        @click="previewForm"
+      >
+        <i class="el-icon-view" />{{
+          i18nt("designer.toolbar.preview")
+        }}</el-button
+      >
+      <el-button
+        v-if="showToolButton('importJsonButton')"
+        type="text"
+        @click="importJson"
+      >
+        {{ i18nt("designer.toolbar.importJson") }}</el-button
+      >
+      <el-button
+        v-if="showToolButton('exportJsonButton')"
+        type="text"
+        @click="exportJson"
+      >
+        {{ i18nt("designer.toolbar.exportJson") }}</el-button
+      >
+      <el-button
+        v-if="showToolButton('exportCodeButton')"
+        type="text"
+        @click="exportCode"
+      >
+        {{ i18nt("designer.toolbar.exportCode") }}</el-button
+      >
+      <el-button
+        v-if="showToolButton('generateSFCButton')"
+        type="text"
+        @click="generateSFC"
+      >
+        <svg-icon icon-class="vue-sfc" />{{
+          i18nt("designer.toolbar.generateSFC")
+        }}</el-button
+      >
+      <slot name="toolButton"></slot>
+    </div>
+
+    <el-dialog
+      :title="i18nt('designer.toolbar.preview')"
+      :visible.sync="showPreviewDialogFlag"
+      v-if="showPreviewDialogFlag"
+      :show-close="true"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      center
+      v-dialog-drag
+      :destroy-on-close="true"
+      class="small-padding-dialog"
+      width="75%"
+      :fullscreen="layoutType === 'H5'"
+    >
+      <div>
+        <div
+          class="form-render-wrapper"
+          :class="[layoutType === 'H5' ? 'h5-layout' : '']"
+        >
+          <VFormRender
+            ref="preForm"
+            :form-json="formJson"
+            :form-data="testFormData"
+            :preview-state="true"
+            :option-data="testOptionData"
+            @appendButtonClick="testOnAppendButtonClick"
+            @buttonClick="testOnButtonClick"
+            @formChange="handleFormChange"
+          ></VFormRender>
+        </div>
+      </div>
+      <code-editor v-model="testFunc" style="display: none"></code-editor>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="getFormData">{{
+          i18nt("designer.hint.getFormData")
+        }}</el-button>
+        <el-button type="primary" @click="resetForm">{{
+          i18nt("designer.hint.resetForm")
+        }}</el-button>
+        <el-button type="primary" @click="setFormDisabled">{{
+          i18nt("designer.hint.disableForm")
+        }}</el-button>
+        <el-button type="primary" @click="setFormEnabled">{{
+          i18nt("designer.hint.enableForm")
+        }}</el-button>
+        <el-button type="" @click="showPreviewDialogFlag = false">{{
+          i18nt("designer.hint.closePreview")
+        }}</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :title="i18nt('designer.toolbar.importJson')"
+      :visible.sync="showImportJsonDialogFlag"
+      v-if="showImportJsonDialogFlag"
+      :show-close="true"
+      class="small-padding-dialog"
+      center
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+    >
+      <el-alert
+        type="info"
+        :title="i18nt('designer.hint.importJsonHint')"
+        show-icon
+        class="alert-padding"
+      ></el-alert>
+      <code-editor
+        :mode="'json'"
+        :readonly="false"
+        v-model="importTemplate"
+      ></code-editor>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="doJsonImport">
+          {{ i18nt("designer.hint.import") }}</el-button
+        >
+        <el-button @click="showImportJsonDialogFlag = false">
+          {{ i18nt("designer.hint.cancel") }}</el-button
+        >
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :title="i18nt('designer.toolbar.exportJson')"
+      :visible.sync="showExportJsonDialogFlag"
+      v-if="showExportJsonDialogFlag"
+      :show-close="true"
+      class="small-padding-dialog"
+      center
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+    >
+      <code-editor
+        :mode="'json'"
+        :readonly="true"
+        v-model="jsonContent"
+      ></code-editor>
+      <div slot="footer" class="dialog-footer">
+        <!-- <el-button type="primary" class="copy-json-btn" :data-clipboard-text="jsonRawContent" @click="copyFormJson">
+          {{i18nt('designer.hint.copyJson')}}</el-button> -->
+        <el-button @click="saveFormJson" type="primary">保存</el-button>
+        <el-button type="" @click="showExportJsonDialogFlag = false">
+          取消</el-button
+        >
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :title="i18nt('designer.toolbar.exportCode')"
+      :visible.sync="showExportCodeDialogFlag"
+      v-if="showExportCodeDialogFlag"
+      :show-close="true"
+      class="small-padding-dialog"
+      center
+      v-dialog-drag
+      width="65%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+    >
+      <el-tabs
+        type="border-card"
+        class="no-box-shadow no-padding"
+        v-model="activeCodeTab"
+      >
+        <el-tab-pane label="Vue" name="vue">
+          <code-editor
+            :mode="'html'"
+            :readonly="true"
+            v-model="vueCode"
+            :user-worker="false"
+          ></code-editor>
+        </el-tab-pane>
+        <el-tab-pane label="HTML" name="html">
+          <code-editor
+            :mode="'html'"
+            :readonly="true"
+            v-model="htmlCode"
+            :user-worker="false"
+          ></code-editor>
+        </el-tab-pane>
+      </el-tabs>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          class="copy-vue-btn"
+          :data-clipboard-text="vueCode"
+          @click="copyVueCode"
+        >
+          {{ i18nt("designer.hint.copyVueCode") }}</el-button
+        >
+        <el-button
+          type="primary"
+          class="copy-html-btn"
+          :data-clipboard-text="htmlCode"
+          @click="copyHtmlCode"
+        >
+          {{ i18nt("designer.hint.copyHtmlCode") }}</el-button
+        >
+        <el-button @click="saveVueCode">{{
+          i18nt("designer.hint.saveVueCode")
+        }}</el-button>
+        <el-button @click="saveHtmlCode">{{
+          i18nt("designer.hint.saveHtmlCode")
+        }}</el-button>
+        <el-button type="" @click="showExportCodeDialogFlag = false">
+          {{ i18nt("designer.hint.closePreview") }}</el-button
+        >
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :title="i18nt('designer.hint.exportFormData')"
+      :visible.sync="showFormDataDialogFlag"
+      v-if="showFormDataDialogFlag"
+      :show-close="true"
+      class="dialog-title-light-bg"
+      center
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+    >
+      <div style="border: 1px solid #dcdfe6">
+        <code-editor
+          :mode="'json'"
+          :readonly="true"
+          v-model="formDataJson"
+        ></code-editor>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          class="copy-form-data-json-btn"
+          :data-clipboard-text="formDataRawJson"
+          @click="copyFormDataJson"
+        >
+          {{ i18nt("designer.hint.copyFormData") }}</el-button
+        >
+        <el-button @click="saveFormData">{{
+          i18nt("designer.hint.saveFormData")
+        }}</el-button>
+        <el-button type="" @click="showFormDataDialogFlag = false">
+          {{ i18nt("designer.hint.closePreview") }}</el-button
+        >
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :title="i18nt('designer.toolbar.generateSFC')"
+      :visible.sync="showExportSFCDialogFlag"
+      v-if="showExportSFCDialogFlag"
+      :show-close="true"
+      class="small-padding-dialog"
+      center
+      v-dialog-drag
+      width="65%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+    >
+      <el-tabs
+        type="border-card"
+        class="no-box-shadow no-padding"
+        v-model="activeSFCTab"
+      >
+        <el-tab-pane label="Vue2" name="vue2">
+          <code-editor
+            :mode="'html'"
+            :readonly="true"
+            v-model="sfcCode"
+            :user-worker="false"
+          ></code-editor>
+        </el-tab-pane>
+        <el-tab-pane label="Vue3" name="vue3">
+          <code-editor
+            :mode="'html'"
+            :readonly="true"
+            v-model="sfcCodeV3"
+            :user-worker="false"
+          ></code-editor>
+        </el-tab-pane>
+      </el-tabs>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          class="copy-vue2-sfc-btn"
+          :data-clipboard-text="sfcCode"
+          @click="copyV2SFC"
+        >
+          {{ i18nt("designer.hint.copyVue2SFC") }}</el-button
+        >
+        <el-button
+          type="primary"
+          class="copy-vue3-sfc-btn"
+          :data-clipboard-text="sfcCodeV3"
+          @click="copyV3SFC"
+        >
+          {{ i18nt("designer.hint.copyVue3SFC") }}</el-button
+        >
+        <el-button @click="saveV2SFC">{{
+          i18nt("designer.hint.saveVue2SFC")
+        }}</el-button>
+        <el-button @click="saveV3SFC">{{
+          i18nt("designer.hint.saveVue3SFC")
+        }}</el-button>
+        <el-button type="" @click="showExportSFCDialogFlag = false">
+          {{ i18nt("designer.hint.closePreview") }}</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import VFormRender from "@/components/form-render/index";
+import CodeEditor from "@/components/code-editor/index";
+import Clipboard from "clipboard";
+import {
+  deepClone,
+  copyToClipboard,
+  generateId,
+  getQueryParam,
+  traverseAllWidgets,
+} from "@/utils/util";
+import i18n from "@/utils/i18n";
+import { generateCode } from "@/utils/code-generator";
+import { genSFC } from "@/utils/sfc-generator";
+import loadBeautifier from "@/utils/beautifierLoader";
+import { saveAs } from "file-saver";
+import axios from "axios";
+
+export default {
+  name: "ToolbarPanel",
+  mixins: [i18n],
+  components: {
+    VFormRender,
+    CodeEditor,
+    Clipboard,
+  },
+  props: {
+    designer: Object,
+    //导出弹框是否显示
+    jsonIsShow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  inject: ["getDesignerConfig"],
+  watch: {
+    jsonIsShow(val) {
+      this.showExportJsonDialogFlag = val;
+    },
+  },
+  data() {
+    return {
+      designerConfig: this.getDesignerConfig(),
+
+      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: {
+        // 'userName': '666888',
+        // 'productItems': [
+        //   {'pName': 'iPhone12', 'pNum': 10},
+        //   {'pName': 'P50', 'pNum': 16},
+        // ]
+
+        select62173: 2,
+      },
+      testOptionData: {
+        select62173: [
+          { label: "01", value: 1 },
+          { label: "22", value: 2 },
+          { label: "333", value: 3 },
+        ],
+      },
+    };
+  },
+  computed: {
+    formJson() {
+      return {
+        widgetList: this.designer.widgetList,
+        formConfig: 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()
+      },
+    },
+  },
+  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 === "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);
+    },
+
+    clearFormWidget() {
+      this.designer.clearDesigner();
+    },
+
+    previewForm() {
+      this.showPreviewDialogFlag = true;
+    },
+
+    saveAsFile(fileContent, defaultFileName) {
+      this.$emit("sendModuleJson", {
+        formConfigJson: fileContent,
+        modelName: "",
+      });
+      // this.$prompt("模板名称", "保存模板名称", {
+      //   inputValue: "",
+      //   closeOnClickModal: false,
+      //   inputPlaceholder: "请输入模板名称",
+      // })
+      //   .then(({ value }) => {
+
+      //     // if (!value) {
+      //     //   value = defaultFileName
+      //     // }
+      //     // debugger;
+      //     // if (getQueryParam('vscode') == 1) {
+
+      //     //   this.vsSaveFile(value, fileContent)
+      //     //   return
+      //     // }
+
+      //     // const fileBlob = new Blob([fileContent], { type: 'text/plain;charset=utf-8' })
+      //     // 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.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 = deepClone(this.designer.widgetList);
+      let formConfig = deepClone(this.designer.formConfig);
+      this.jsonContent = JSON.stringify({ widgetList, formConfig }, null, "  ");
+      this.jsonRawContent = JSON.stringify({ widgetList, formConfig });
+      this.showExportJsonDialogFlag = true;
+    },
+
+    copyFormJson(e) {
+      copyToClipboard(
+        this.jsonRawContent,
+        e,
+        this.$message,
+        this.i18nt("designer.hint.copyJsonSuccess"),
+        this.i18nt("designer.hint.copyJsonFail")
+      );
+    },
+
+    saveFormJson() {
+      this.saveAsFile(this.jsonContent, `vform${generateId()}.json`);
+    },
+
+    exportCode() {
+      this.vueCode = generateCode(this.formJson);
+      this.htmlCode = generateCode(this.formJson, "html");
+      this.showExportCodeDialogFlag = true;
+    },
+
+    copyVueCode(e) {
+      copyToClipboard(
+        this.vueCode,
+        e,
+        this.$message,
+        this.i18nt("designer.hint.copyVueCodeSuccess"),
+        this.i18nt("designer.hint.copyVueCodeFail")
+      );
+    },
+
+    copyHtmlCode(e) {
+      copyToClipboard(
+        this.htmlCode,
+        e,
+        this.$message,
+        this.i18nt("designer.hint.copyHtmlCodeSuccess"),
+        this.i18nt("designer.hint.copyHtmlCodeFail")
+      );
+    },
+
+    saveVueCode() {
+      this.saveAsFile(this.vueCode, `vform${generateId()}.vue`);
+    },
+
+    saveHtmlCode() {
+      this.saveAsFile(this.htmlCode, `vform${generateId()}.html`);
+    },
+
+    generateSFC() {
+      loadBeautifier((beautifier) => {
+        this.sfcCode = genSFC(
+          this.designer.formConfig,
+          this.designer.widgetList,
+          beautifier
+        );
+        this.sfcCodeV3 = genSFC(
+          this.designer.formConfig,
+          this.designer.widgetList,
+          beautifier,
+          true
+        );
+        this.showExportSFCDialogFlag = true;
+      });
+    },
+
+    copyV2SFC(e) {
+      copyToClipboard(
+        this.sfcCode,
+        e,
+        this.$message,
+        this.i18nt("designer.hint.copySFCSuccess"),
+        this.i18nt("designer.hint.copySFCFail")
+      );
+    },
+
+    copyV3SFC(e) {
+      copyToClipboard(
+        this.sfcCodeV3,
+        e,
+        this.$message,
+        this.i18nt("designer.hint.copySFCSuccess"),
+        this.i18nt("designer.hint.copySFCFail")
+      );
+    },
+
+    saveV2SFC() {
+      this.saveAsFile(this.sfcCode, `vformV2-${generateId()}.vue`);
+    },
+
+    saveV3SFC() {
+      this.saveAsFile(this.sfcCodeV3, `vformV3-${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) {
+      copyToClipboard(
+        this.formDataRawJson,
+        e,
+        this.$message,
+        this.i18nt("designer.hint.copyJsonSuccess"),
+        this.i18nt("designer.hint.copyJsonFail")
+      );
+    },
+
+    saveFormData() {
+      this.saveAsFile(this.htmlCode, `formData${generateId()}.json`);
+    },
+
+    resetForm() {
+      this.$refs["preForm"].resetForm();
+    },
+
+    setFormDisabled() {
+      this.$refs["preForm"].disableForm();
+    },
+
+    setFormEnabled() {
+      this.$refs["preForm"].enableForm();
+    },
+
+    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;
+      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);
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+div.toolbar-container {
+  min-width: 728px; /* 解决工具按钮栏换行的问题！！ */
+}
+
+.left-toolbar {
+  float: left;
+  font-size: 16px;
+}
+
+.right-toolbar {
+  float: right;
+
+  ::v-deep .el-button--text {
+    font-size: 14px !important;
+  }
+}
+
+.el-button i {
+  margin-right: 3px;
+}
+
+.small-padding-dialog {
+  ::v-deep .el-dialog__header {
+    //padding-top: 3px;
+    //padding-bottom: 3px;
+    background: #f1f2f3;
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 12px 15px 12px 15px;
+
+    .el-alert.alert-padding {
+      padding: 0 10px;
+    }
+  }
+
+  ::v-deep .ace-container {
+    border: 1px solid #dcdfe6;
+  }
+}
+
+.dialog-title-light-bg {
+  ::v-deep .el-dialog__header {
+    background: #f1f2f3;
+  }
+}
+
+.no-box-shadow {
+  box-shadow: none;
+}
+
+.no-padding.el-tabs--border-card {
+  ::v-deep .el-tabs__content {
+    padding: 0;
+  }
+}
+
+.form-render-wrapper {
+  //height: calc(100vh - 142px);
+  all: revert !important; /* 防止表单继承el-dialog等外部样式，未生效，原因不明？？ */
+}
+
+.form-render-wrapper.h5-layout {
+  margin: 0 auto;
+  width: 420px;
+  border-radius: 15px;
+  //border-width: 10px;
+  box-shadow: 0 0 1px 10px #495060;
+  height: calc(100vh - 142px);
+}
+
+.node-tree-drawer ::v-deep {
+  .el-drawer {
+    padding: 10px;
+    overflow: auto;
+  }
+
+  .el-drawer__header {
+    margin-bottom: 12px;
+    padding: 5px 5px 0;
+  }
+
+  .el-drawer__body {
+    padding-left: 5px;
+  }
+}
+
+/*.node-tree-scroll-bar {*/
+/*  height: 100%;*/
+/*  overflow: auto;*/
+/*}*/
+
+.node-tree ::v-deep {
+  .el-tree > .el-tree-node:after {
+    border-top: none;
+  }
+  .el-tree-node {
+    position: relative;
+    padding-left: 12px;
+  }
+
+  .el-tree-node__content {
+    padding-left: 0 !important;
+  }
+
+  .el-tree-node__expand-icon.is-leaf {
+    display: none;
+  }
+  .el-tree-node__children {
+    padding-left: 12px;
+    overflow: visible !important; /* 加入此行让el-tree宽度自动撑开，超出宽度el-draw自动出现水平滚动条！ */
+  }
+
+  .el-tree-node :last-child:before {
+    height: 38px;
+  }
+
+  .el-tree > .el-tree-node:before {
+    border-left: none;
+  }
+
+  .el-tree > .el-tree-node:after {
+    border-top: none;
+  }
+
+  .el-tree-node:before {
+    content: "";
+    left: -4px;
+    position: absolute;
+    right: auto;
+    border-width: 1px;
+  }
+
+  .el-tree-node:after {
+    content: "";
+    left: -4px;
+    position: absolute;
+    right: auto;
+    border-width: 1px;
+  }
+
+  .el-tree-node:before {
+    border-left: 1px dashed #4386c6;
+    bottom: 0px;
+    height: 100%;
+    top: -10px;
+    width: 1px;
+  }
+
+  .el-tree-node:after {
+    border-top: 1px dashed #4386c6;
+    height: 20px;
+    top: 12px;
+    width: 16px;
+  }
+
+  .el-tree-node.is-current > .el-tree-node__content {
+    background: #c2d6ea !important;
+  }
+
+  .el-tree-node__expand-icon {
+    margin-left: -3px;
+    padding: 6px 6px 6px 0px;
+    font-size: 16px;
+  }
+}
+</style>