cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.61

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

@@ -1,874 +1,884 @@
-<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>
-        <el-button
-          :type="layoutType === 'PC' ? 'info' : ''"
-          @click="changeLayoutType('PC')"
-          size="mini"
-        >
-          {{ 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')"
-          size="mini"
-        >
-          {{ 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" :style="{ width: 'auto' }">
-      <div class="right-toolbar-con">
-        <!--        <el-button type="text" @click="showFormConfigDialog=true">
-                  <i class="iconfont icon-liebiaoshezhi-list-setting"/>
-                  表单/列表设置
-                </el-button>-->
-        <el-button
-          type="primary"
-          @click="saveReportTemplate()"
-          plain
-          v-if="
-            designer.vueInstance.isDev &&
-            designer.vueInstance.menuKindAuth.editAuth === 1 &&
-            !readonly
-          "
-        >
-          <i class="el-icon-check" />
-          保存
-        </el-button>
-        <el-divider direction="vertical"></el-divider>
-        <el-button
-          v-if="showToolButton('clearDesignerButton') && !readonly"
-          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-divider direction="vertical"></el-divider>
-        <el-button
-          v-if="showToolButton('importJsonButton') && !readonly"
-          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> -->
-        <template v-for="(idx, slotName) in $slots">
-          <slot :name="slotName"></slot>
-        </template>
-      </div>
-    </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"
-      :append-to-body="true"
-      :modal-append-to-body="true"
-      class="small-padding-dialog preview-dialog"
-      width="75%"
-      :fullscreen="true"
-      @close="showPreviewDialogFlag = false"
-    >
-      <div>
-        <div
-          class="form-render-wrapper"
-          id="containt"
-          :class="[
-            layoutType === 'H5'
-              ? 'h5-layout'
-              : layoutType === 'Pad'
-              ? 'pad-layout'
-              : '',
-          ]"
-        >
-          <VFormRender
-            ref="preForm"
-            :form-json="formJson"
-            :form-data="testFormData"
-            :preview-state="true"
-            :option-data="testOptionData"
-            @appendButtonClick="testOnAppendButtonClick"
-            @buttonClick="testOnButtonClick"
-            @formChange="handleFormChange"
-            :reportTemplate.sync="reportTemplate"
-            v-if="showRender"
-            visible-key="showRender"
-            :parent-target="_self"
-            @reload="$reloadHandle"
-          >
-            <!--
-            <div slot="testSlot">aaaa</div>
-            -->
-          </VFormRender>
-        </div>
-      </div>
-      <!--      <el-tabs v-model="activeName" class="tab-box">
-              <el-tab-pane label="常规" name="first">
-                <div>
-                  <div class="form-render-wrapper" id="containt"
-                       :class="[layoutType === 'H5' ? 'h5-layout' : layoutType === 'Pad' ? 'pad-layout' : '']">
-                    <VFormRender
-                      ref="preForm"
-                      :form-json="formJson"
-                      :form-data="testFormData"
-                      :preview-state="true"
-                      :option-data="testOptionData"
-                      @appendButtonClick="testOnAppendButtonClick"
-                      @buttonClick="testOnButtonClick"
-                      @formChange="handleFormChange"
-                      :reportTemplate.sync="reportTemplate"
-                      v-if="showRender" visible-key="showRender" :parent-target="_self" @reload="$reloadHandle"
-                    >
-                      &lt;!&ndash;
-                      <div slot="testSlot">aaaa</div>
-                      &ndash;&gt;
-                    </VFormRender>
-                  </div>
-                </div>
-                <code-editor v-model="testFunc" style="display: none"></code-editor>
-              </el-tab-pane>
-              <el-tab-pane label="列表" name="second">
-                <template v-if="false">
-                  <div class="grid-height">
-                    <vxe-grid ref="table-m1" v-bind="vxeOption" @resizable-change="$vxeTableUtil.onColumnWitchChange"
-                              @custom="$vxeTableUtil.customHandle">
-                      <template #form>
-                        <div class="clearfix screen-btns">
-                          <div class="fl">
-                            <vxe-button status="primary" class="button-sty" icon="el-icon-plus">新增
-                            </vxe-button>
-                          </div>
-                          <div class="fr">
-                            <vxe-button icon="el-icon-brush" class="button-sty" type="text" status="primary" plain
-                                        @click="formData={}">重置
-                            </vxe-button>
-                            <vxe-button status="warning" icon="el-icon-search" class="button-sty">搜索
-                            </vxe-button>
-                          </div>
-                        </div>
-                        <template v-if="searchFields.length>0">
-                          <vxe-form ref="form" class="screen-box" title-width="92px" title-align="right" :data="formData">
-                            <vxe-form-item v-for="(item,index) in searchFields"
-                                           :key="index" :title="item.label+':'">
-                              <template v-slot>
-                                <el-input v-model="formData[item.prop]" size="small" clearable/>
-                              </template>
-                            </vxe-form-item>
-                          </vxe-form>
-                        </template>
-                      </template>
-                    </vxe-grid>
-                  </div>
-                </template>
-                <template v-else>
-                  <div id="containt">
-                    <div class="tree-box fl">
-                      <div class="tit"><b>机构分类</b></div>
-                      <el-tree
-                        :props="treeOption.defaultProps"
-                        :load="loadNode"
-                        node-key="id"
-                        ref="tree"
-                        highlight-current
-                        lazy
-                        :expand-on-click-node="false"
-                        @node-click="handleNodeClick"
-                        class="tree-list"
-                        icon-class="el-icon-arrow-down"
-                      ></el-tree>
-                    </div>
-                    <label id="labBtn">
-                      <div class="icon">
-                        <i class="el-icon-more"></i>
-                        <i class="el-icon-more"></i>
-                      </div>
-                    </label>
-                    <div class="main-right fr" style="padding-left:6px;">
-                      <div class="grid-height">
-                        <vxe-grid ref="table-m1" v-bind="vxeOption" @resizable-change="$vxeTableUtil.onColumnWitchChange"
-                                  @custom="$vxeTableUtil.customHandle">
-                          <template #form>
-                            <div class="clearfix screen-btns">
-                              <div class="fl">
-                                <vxe-button status="primary" class="button-sty" icon="el-icon-plus">新增
-                                </vxe-button>
-                              </div>
-                              <div class="fr">
-                                <vxe-button icon="el-icon-brush" class="button-sty" type="text" status="primary" plain
-                                            @click="formData={}">重置
-                                </vxe-button>
-                                <vxe-button status="warning" icon="el-icon-search" class="button-sty">搜索
-                                </vxe-button>
-                              </div>
-                            </div>
-                            <template v-if="searchFields.length>0">
-                              <vxe-form ref="form" class="screen-box" title-width="92px" title-align="right" :data="formData">
-                                <vxe-form-item v-for="(item,index) in searchFields"
-                                               :key="index" :title="item.label+':'">
-                                  <template v-slot>
-                                    <el-input v-model="formData[item.prop]" size="small" clearable/>
-                                  </template>
-                                </vxe-form-item>
-                              </vxe-form>
-                            </template>
-                          </template>
-                        </vxe-grid>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-              </el-tab-pane>
-            </el-tabs>-->
-      <div slot="footer" class="dialog-footer" v-if="false">
-        <!-- <el-button type="primary" @click="getFormData" class="button-sty">{{ i18nt('designer.hint.getFormData') }}</el-button>
-        <el-button type="primary" @click="resetForm" class="button-sty">{{ i18nt('designer.hint.resetForm') }}</el-button>
-        <el-button type="primary" @click="setFormDisabled" class="button-sty">{{ i18nt('designer.hint.disableForm') }}</el-button>
-        <el-button type="primary" @click="setFormEnabled" class="button-sty">{{ i18nt('designer.hint.enableForm') }}</el-button>
-        <el-button type="" @click="showPreviewDialogFlag = false" class="button-sty">{{ i18nt('designer.hint.closePreview') }}</el-button> -->
-        <el-button v-if="false" @click="printFormJson" class="button-sty"
-          >PrintFormJson</el-button
-        >
-        <el-button v-if="false" @click="testValidate" class="button-sty"
-          >TestValidate</el-button
-        >
-        <el-button v-if="false" @click="testSetFormData" class="button-sty"
-          >TestSF</el-button
-        >
-        <el-button @click="$refs['preForm'].saveForm()" class="button-sty"
-          >测试保存</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 preview-dialog"
-      center
-      v-dialog-drag
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :destroy-on-close="true"
-      :append-to-body="true"
-      :modal-append-to-body="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" class="button-sty"
-          >{{ i18nt("designer.hint.import") }}
-        </el-button>
-        <el-button @click="showImportJsonDialogFlag = false" class="button-sty"
-          >{{ 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 preview-dialog"
-      center
-      v-dialog-drag
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :destroy-on-close="true"
-      :append-to-body="true"
-      :modal-append-to-body="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 button-sty"
-          :data-clipboard-text="jsonRawContent"
-          @click="copyFormJson"
-          >{{ i18nt("designer.hint.copyJson") }}
-        </el-button>
-        <el-button @click="saveFormJson" class="button-sty">{{
-          i18nt("designer.hint.saveFormJson")
-        }}</el-button>
-        <el-button
-          type=""
-          @click="showExportJsonDialogFlag = false"
-          class="button-sty"
-        >
-          {{ i18nt("designer.hint.closePreview") }}
-        </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 preview-dialog"
-      center
-      v-dialog-drag
-      width="65%"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :destroy-on-close="true"
-      :append-to-body="true"
-      :modal-append-to-body="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 button-sty"
-          :data-clipboard-text="vueCode"
-          @click="copyVueCode"
-        >
-          {{ i18nt("designer.hint.copyVueCode") }}
-        </el-button>
-        <el-button
-          type="primary"
-          class="copy-html-btn button-sty"
-          :data-clipboard-text="htmlCode"
-          @click="copyHtmlCode"
-          >{{ i18nt("designer.hint.copyHtmlCode") }}
-        </el-button>
-        <el-button @click="saveVueCode" class="button-sty">{{
-          i18nt("designer.hint.saveVueCode")
-        }}</el-button>
-        <el-button @click="saveHtmlCode" class="button-sty">{{
-          i18nt("designer.hint.saveHtmlCode")
-        }}</el-button>
-        <el-button
-          type=""
-          @click="showExportCodeDialogFlag = false"
-          class="button-sty"
-        >
-          {{ 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 preview-dialog"
-      center
-      v-dialog-drag
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :destroy-on-close="true"
-      :append-to-body="true"
-      :modal-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 button-sty"
-          :data-clipboard-text="formDataRawJson"
-          @click="copyFormDataJson"
-        >
-          {{ i18nt("designer.hint.copyFormData") }}
-        </el-button>
-        <el-button @click="saveFormData" class="button-sty">{{
-          i18nt("designer.hint.saveFormData")
-        }}</el-button>
-        <el-button
-          type=""
-          @click="showFormDataDialogFlag = false"
-          class="button-sty"
-        >
-          {{ 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 preview-dialog"
-      center
-      v-dialog-drag
-      width="65%"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :destroy-on-close="true"
-      :append-to-body="true"
-      :modal-append-to-body="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 button-sty"
-          :data-clipboard-text="sfcCode"
-          @click="copyV2SFC"
-          >{{ i18nt("designer.hint.copyVue2SFC") }}
-        </el-button>
-        <el-button
-          type="primary"
-          class="copy-vue3-sfc-btn button-sty"
-          :data-clipboard-text="sfcCodeV3"
-          @click="copyV3SFC"
-          >{{ i18nt("designer.hint.copyVue3SFC") }}
-        </el-button>
-        <el-button @click="saveV2SFC" class="button-sty">{{
-          i18nt("designer.hint.saveVue2SFC")
-        }}</el-button>
-        <el-button @click="saveV3SFC" class="button-sty">{{
-          i18nt("designer.hint.saveVue3SFC")
-        }}</el-button>
-        <el-button
-          type=""
-          @click="showExportSFCDialogFlag = false"
-          class="button-sty"
-        >
-          {{ i18nt("designer.hint.closePreview") }}
-        </el-button>
-      </div>
-    </el-dialog>
-    <el-dialog
-      :title="i18nt('表单编辑')"
-      v-if="showFormConfigDialog"
-      :visible.sync="showFormConfigDialog"
-      :modal="false"
-      :show-close="!0"
-      custom-class="dialog-style list-dialog"
-      :close-on-click-modal="!1"
-      :close-on-press-escape="!1"
-      :destroy-on-close="!0"
-      v-el-drag-dialog
-      v-el-dialog-center
-    >
-      <div class="cont" style="height: auto; max-height: 500px">
-        <el-scrollbar class="setting-scrollbar">
-          <form-setting
-            :designer="designer"
-            :form-config="designer.formConfig"
-          ></form-setting>
-        </el-scrollbar>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import VFormRender from "../../../../components/xform/form-render/index";
-import indexMixin from "./indexMixin.js";
-import FormSetting from "../../../../components/xform/form-designer/setting-panel/form-setting";
-
-export default {
-  name: "ToolbarPanel",
-  components: {
-    VFormRender,
-    FormSetting,
-  },
-  inject: ["readonly"],
-  mixins: [indexMixin],
-  data() {
-    return {
-      defaultProps: {
-        label: "name", //这里是树结构中需显示的数据（即接口返回的需展示在页面上的参数）
-        children: [],
-        isLeaf: "leaf",
-      },
-      treeOption: {
-        title: "机构分类",
-        defaultProps: {
-          label: "name",
-          children: [],
-          isLeaf: "leaf",
-        },
-        url1: "/user/sale_org/getAllList",
-        url2: "/user/sale_org/getChildren",
-        formRewriteMap: {
-          saleOrgId: "id",
-          saleOrgName: "name",
-        },
-        preHadnleData(row) {
-          row.leaf = !row.hasChild;
-        },
-        treeNodeParam(row) {
-          return {
-            parent: row.id,
-            enabled: true,
-          };
-        },
-      },
-    };
-  },
-  methods: {
-    handleNodeClick(data, node, v) {
-      let treeOption = this.treeOption;
-      let formRewriteMap = treeOption.formRewriteMap || {};
-      let formData = {};
-      Object.keys(formRewriteMap).forEach((key) => {
-        // this.$set(this.formData, key, data[formRewriteMap[key]]);
-        formData[key] = data[formRewriteMap[key]];
-      });
-
-      this.$forceUpdate();
-      /*
-      this.searchEvent();*/
-    },
-    // 异步树叶子节点懒加载逻辑
-    loadNode(node, resolve) {
-      let treeOption = this.treeOption;
-      let id = node && node.data && node.data.id ? node.data.id || "" : "";
-      let param = (treeOption.treeNodeParam
-        ? treeOption.treeNodeParam(node?.data || {})
-        : null) || {
-        parent: id,
-        enabled: true,
-      };
-      let url = !id ? treeOption.url1 : treeOption.url2;
-      this.$http({
-        url: url,
-        method: "post",
-        data: param,
-        success: (res) => {
-          res.objx.forEach((value) => {
-            treeOption.preHadnleData(value);
-          });
-          resolve(res.objx);
-        },
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-div.toolbar-container {
-  //min-width: 728px;  /* 解决工具按钮栏换行的问题 */
-  /* 上一行css有问题，当窗口宽度不足时会把按钮挤出到右边的属性设置区，弃之！ */
-}
-
-.left-toolbar {
-  float: left;
-  font-size: 16px;
-}
-
-.right-toolbar {
-  float: right;
-  //width: 420px;
-  text-align: right;
-  overflow: hidden;
-
-  .right-toolbar-con {
-    text-align: right;
-
-    .el-button {
-      margin-left: 15px;
-      margin-right: 15px;
-      font-size: 14px;
-      vertical-align: middle;
-
-      &.el-button--primary {
-        padding: 7px 14px;
-      }
-    }
-  }
-}
-
-.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;
-    padding: 0;
-
-    .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);
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.form-render-wrapper.pad-layout {
-  margin: 0 auto;
-  width: 960px;
-  border-radius: 15px;
-  //border-width: 10px;
-  box-shadow: 0 0 1px 10px #495060;
-  height: calc(100vh - 125px);
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.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>
+<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 :title="layoutTypeLocked ? layoutTypeLockedTip : ''">
+        <!-- 锁定时只保留当前模式一个按钮，另一个不显示 -->
+        <el-button
+          v-if="!layoutTypeLocked || layoutType === 'PC'"
+          :type="layoutType === 'PC' ? 'info' : ''"
+          :disabled="layoutTypeLocked"
+          @click="changeLayoutType('PC')"
+          size="mini"
+        >
+          {{ i18nt("designer.toolbar.pcLayout") }}
+        </el-button>
+        <!--         <el-button :type="layoutType === 'Pad' ? 'info' : ''" @click="changeLayoutType('Pad')">{{ i18nt('designer.toolbar.padLayout') }}</el-button>-->
+        <el-button
+          v-if="!layoutTypeLocked || layoutType === 'H5'"
+          :type="layoutType === 'H5' ? 'info' : ''"
+          :disabled="layoutTypeLocked"
+          @click="changeLayoutType('H5')"
+          size="mini"
+        >
+          {{ 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" :style="{ width: 'auto' }">
+      <div class="right-toolbar-con">
+        <!--        <el-button type="text" @click="showFormConfigDialog=true">
+                  <i class="iconfont icon-liebiaoshezhi-list-setting"/>
+                  表单/列表设置
+                </el-button>-->
+        <el-button
+          type="primary"
+          @click="saveReportTemplate()"
+          plain
+          v-if="
+            designer.vueInstance.isDev &&
+            designer.vueInstance.menuKindAuth.editAuth === 1 &&
+            !readonly
+          "
+        >
+          <i class="el-icon-check" />
+          保存
+        </el-button>
+        <el-divider direction="vertical"></el-divider>
+        <el-button
+          v-if="showToolButton('clearDesignerButton') && !readonly"
+          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-divider direction="vertical"></el-divider>
+        <el-button
+          v-if="showToolButton('importJsonButton') && !readonly"
+          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> -->
+        <template v-for="(idx, slotName) in $slots">
+          <slot :name="slotName"></slot>
+        </template>
+      </div>
+    </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"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      class="small-padding-dialog preview-dialog"
+      width="75%"
+      :fullscreen="true"
+      @close="showPreviewDialogFlag = false"
+    >
+      <div>
+        <div
+          class="form-render-wrapper"
+          id="containt"
+          :class="[
+            layoutType === 'H5'
+              ? 'h5-layout'
+              : layoutType === 'Pad'
+              ? 'pad-layout'
+              : '',
+          ]"
+        >
+          <VFormRender
+            ref="preForm"
+            :form-json="formJson"
+            :form-data="testFormData"
+            :preview-state="true"
+            :option-data="testOptionData"
+            @appendButtonClick="testOnAppendButtonClick"
+            @buttonClick="testOnButtonClick"
+            @formChange="handleFormChange"
+            :reportTemplate.sync="reportTemplate"
+            v-if="showRender"
+            visible-key="showRender"
+            :parent-target="_self"
+            @reload="$reloadHandle"
+          >
+            <!--
+            <div slot="testSlot">aaaa</div>
+            -->
+          </VFormRender>
+        </div>
+      </div>
+      <!--      <el-tabs v-model="activeName" class="tab-box">
+              <el-tab-pane label="常规" name="first">
+                <div>
+                  <div class="form-render-wrapper" id="containt"
+                       :class="[layoutType === 'H5' ? 'h5-layout' : layoutType === 'Pad' ? 'pad-layout' : '']">
+                    <VFormRender
+                      ref="preForm"
+                      :form-json="formJson"
+                      :form-data="testFormData"
+                      :preview-state="true"
+                      :option-data="testOptionData"
+                      @appendButtonClick="testOnAppendButtonClick"
+                      @buttonClick="testOnButtonClick"
+                      @formChange="handleFormChange"
+                      :reportTemplate.sync="reportTemplate"
+                      v-if="showRender" visible-key="showRender" :parent-target="_self" @reload="$reloadHandle"
+                    >
+                      &lt;!&ndash;
+                      <div slot="testSlot">aaaa</div>
+                      &ndash;&gt;
+                    </VFormRender>
+                  </div>
+                </div>
+                <code-editor v-model="testFunc" style="display: none"></code-editor>
+              </el-tab-pane>
+              <el-tab-pane label="列表" name="second">
+                <template v-if="false">
+                  <div class="grid-height">
+                    <vxe-grid ref="table-m1" v-bind="vxeOption" @resizable-change="$vxeTableUtil.onColumnWitchChange"
+                              @custom="$vxeTableUtil.customHandle">
+                      <template #form>
+                        <div class="clearfix screen-btns">
+                          <div class="fl">
+                            <vxe-button status="primary" class="button-sty" icon="el-icon-plus">新增
+                            </vxe-button>
+                          </div>
+                          <div class="fr">
+                            <vxe-button icon="el-icon-brush" class="button-sty" type="text" status="primary" plain
+                                        @click="formData={}">重置
+                            </vxe-button>
+                            <vxe-button status="warning" icon="el-icon-search" class="button-sty">搜索
+                            </vxe-button>
+                          </div>
+                        </div>
+                        <template v-if="searchFields.length>0">
+                          <vxe-form ref="form" class="screen-box" title-width="92px" title-align="right" :data="formData">
+                            <vxe-form-item v-for="(item,index) in searchFields"
+                                           :key="index" :title="item.label+':'">
+                              <template v-slot>
+                                <el-input v-model="formData[item.prop]" size="small" clearable/>
+                              </template>
+                            </vxe-form-item>
+                          </vxe-form>
+                        </template>
+                      </template>
+                    </vxe-grid>
+                  </div>
+                </template>
+                <template v-else>
+                  <div id="containt">
+                    <div class="tree-box fl">
+                      <div class="tit"><b>机构分类</b></div>
+                      <el-tree
+                        :props="treeOption.defaultProps"
+                        :load="loadNode"
+                        node-key="id"
+                        ref="tree"
+                        highlight-current
+                        lazy
+                        :expand-on-click-node="false"
+                        @node-click="handleNodeClick"
+                        class="tree-list"
+                        icon-class="el-icon-arrow-down"
+                      ></el-tree>
+                    </div>
+                    <label id="labBtn">
+                      <div class="icon">
+                        <i class="el-icon-more"></i>
+                        <i class="el-icon-more"></i>
+                      </div>
+                    </label>
+                    <div class="main-right fr" style="padding-left:6px;">
+                      <div class="grid-height">
+                        <vxe-grid ref="table-m1" v-bind="vxeOption" @resizable-change="$vxeTableUtil.onColumnWitchChange"
+                                  @custom="$vxeTableUtil.customHandle">
+                          <template #form>
+                            <div class="clearfix screen-btns">
+                              <div class="fl">
+                                <vxe-button status="primary" class="button-sty" icon="el-icon-plus">新增
+                                </vxe-button>
+                              </div>
+                              <div class="fr">
+                                <vxe-button icon="el-icon-brush" class="button-sty" type="text" status="primary" plain
+                                            @click="formData={}">重置
+                                </vxe-button>
+                                <vxe-button status="warning" icon="el-icon-search" class="button-sty">搜索
+                                </vxe-button>
+                              </div>
+                            </div>
+                            <template v-if="searchFields.length>0">
+                              <vxe-form ref="form" class="screen-box" title-width="92px" title-align="right" :data="formData">
+                                <vxe-form-item v-for="(item,index) in searchFields"
+                                               :key="index" :title="item.label+':'">
+                                  <template v-slot>
+                                    <el-input v-model="formData[item.prop]" size="small" clearable/>
+                                  </template>
+                                </vxe-form-item>
+                              </vxe-form>
+                            </template>
+                          </template>
+                        </vxe-grid>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </el-tab-pane>
+            </el-tabs>-->
+      <div slot="footer" class="dialog-footer" v-if="false">
+        <!-- <el-button type="primary" @click="getFormData" class="button-sty">{{ i18nt('designer.hint.getFormData') }}</el-button>
+        <el-button type="primary" @click="resetForm" class="button-sty">{{ i18nt('designer.hint.resetForm') }}</el-button>
+        <el-button type="primary" @click="setFormDisabled" class="button-sty">{{ i18nt('designer.hint.disableForm') }}</el-button>
+        <el-button type="primary" @click="setFormEnabled" class="button-sty">{{ i18nt('designer.hint.enableForm') }}</el-button>
+        <el-button type="" @click="showPreviewDialogFlag = false" class="button-sty">{{ i18nt('designer.hint.closePreview') }}</el-button> -->
+        <el-button v-if="false" @click="printFormJson" class="button-sty"
+          >PrintFormJson</el-button
+        >
+        <el-button v-if="false" @click="testValidate" class="button-sty"
+          >TestValidate</el-button
+        >
+        <el-button v-if="false" @click="testSetFormData" class="button-sty"
+          >TestSF</el-button
+        >
+        <el-button @click="$refs['preForm'].saveForm()" class="button-sty"
+          >测试保存</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 preview-dialog"
+      center
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-append-to-body="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" class="button-sty"
+          >{{ i18nt("designer.hint.import") }}
+        </el-button>
+        <el-button @click="showImportJsonDialogFlag = false" class="button-sty"
+          >{{ 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 preview-dialog"
+      center
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-append-to-body="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 button-sty"
+          :data-clipboard-text="jsonRawContent"
+          @click="copyFormJson"
+          >{{ i18nt("designer.hint.copyJson") }}
+        </el-button>
+        <el-button @click="saveFormJson" class="button-sty">{{
+          i18nt("designer.hint.saveFormJson")
+        }}</el-button>
+        <el-button
+          type=""
+          @click="showExportJsonDialogFlag = false"
+          class="button-sty"
+        >
+          {{ i18nt("designer.hint.closePreview") }}
+        </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 preview-dialog"
+      center
+      v-dialog-drag
+      width="65%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-append-to-body="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 button-sty"
+          :data-clipboard-text="vueCode"
+          @click="copyVueCode"
+        >
+          {{ i18nt("designer.hint.copyVueCode") }}
+        </el-button>
+        <el-button
+          type="primary"
+          class="copy-html-btn button-sty"
+          :data-clipboard-text="htmlCode"
+          @click="copyHtmlCode"
+          >{{ i18nt("designer.hint.copyHtmlCode") }}
+        </el-button>
+        <el-button @click="saveVueCode" class="button-sty">{{
+          i18nt("designer.hint.saveVueCode")
+        }}</el-button>
+        <el-button @click="saveHtmlCode" class="button-sty">{{
+          i18nt("designer.hint.saveHtmlCode")
+        }}</el-button>
+        <el-button
+          type=""
+          @click="showExportCodeDialogFlag = false"
+          class="button-sty"
+        >
+          {{ 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 preview-dialog"
+      center
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-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 button-sty"
+          :data-clipboard-text="formDataRawJson"
+          @click="copyFormDataJson"
+        >
+          {{ i18nt("designer.hint.copyFormData") }}
+        </el-button>
+        <el-button @click="saveFormData" class="button-sty">{{
+          i18nt("designer.hint.saveFormData")
+        }}</el-button>
+        <el-button
+          type=""
+          @click="showFormDataDialogFlag = false"
+          class="button-sty"
+        >
+          {{ 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 preview-dialog"
+      center
+      v-dialog-drag
+      width="65%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-append-to-body="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 button-sty"
+          :data-clipboard-text="sfcCode"
+          @click="copyV2SFC"
+          >{{ i18nt("designer.hint.copyVue2SFC") }}
+        </el-button>
+        <el-button
+          type="primary"
+          class="copy-vue3-sfc-btn button-sty"
+          :data-clipboard-text="sfcCodeV3"
+          @click="copyV3SFC"
+          >{{ i18nt("designer.hint.copyVue3SFC") }}
+        </el-button>
+        <el-button @click="saveV2SFC" class="button-sty">{{
+          i18nt("designer.hint.saveVue2SFC")
+        }}</el-button>
+        <el-button @click="saveV3SFC" class="button-sty">{{
+          i18nt("designer.hint.saveVue3SFC")
+        }}</el-button>
+        <el-button
+          type=""
+          @click="showExportSFCDialogFlag = false"
+          class="button-sty"
+        >
+          {{ i18nt("designer.hint.closePreview") }}
+        </el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+      :title="i18nt('表单编辑')"
+      v-if="showFormConfigDialog"
+      :visible.sync="showFormConfigDialog"
+      :modal="false"
+      :show-close="!0"
+      custom-class="dialog-style list-dialog"
+      :close-on-click-modal="!1"
+      :close-on-press-escape="!1"
+      :destroy-on-close="!0"
+      v-el-drag-dialog
+      v-el-dialog-center
+    >
+      <div class="cont" style="height: auto; max-height: 500px">
+        <el-scrollbar class="setting-scrollbar">
+          <form-setting
+            :designer="designer"
+            :form-config="designer.formConfig"
+          ></form-setting>
+        </el-scrollbar>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import VFormRender from "../../../../components/xform/form-render/index";
+import indexMixin from "./indexMixin.js";
+import FormSetting from "../../../../components/xform/form-designer/setting-panel/form-setting";
+
+export default {
+  name: "ToolbarPanel",
+  components: {
+    VFormRender,
+    FormSetting,
+  },
+  inject: ["readonly"],
+  mixins: [indexMixin],
+  data() {
+    return {
+      defaultProps: {
+        label: "name", //这里是树结构中需显示的数据（即接口返回的需展示在页面上的参数）
+        children: [],
+        isLeaf: "leaf",
+      },
+      treeOption: {
+        title: "机构分类",
+        defaultProps: {
+          label: "name",
+          children: [],
+          isLeaf: "leaf",
+        },
+        url1: "/user/sale_org/getAllList",
+        url2: "/user/sale_org/getChildren",
+        formRewriteMap: {
+          saleOrgId: "id",
+          saleOrgName: "name",
+        },
+        preHadnleData(row) {
+          row.leaf = !row.hasChild;
+        },
+        treeNodeParam(row) {
+          return {
+            parent: row.id,
+            enabled: true,
+          };
+        },
+      },
+    };
+  },
+  methods: {
+    handleNodeClick(data, node, v) {
+      let treeOption = this.treeOption;
+      let formRewriteMap = treeOption.formRewriteMap || {};
+      let formData = {};
+      Object.keys(formRewriteMap).forEach((key) => {
+        // this.$set(this.formData, key, data[formRewriteMap[key]]);
+        formData[key] = data[formRewriteMap[key]];
+      });
+
+      this.$forceUpdate();
+      /*
+      this.searchEvent();*/
+    },
+    // 异步树叶子节点懒加载逻辑
+    loadNode(node, resolve) {
+      let treeOption = this.treeOption;
+      let id = node && node.data && node.data.id ? node.data.id || "" : "";
+      let param = (treeOption.treeNodeParam
+        ? treeOption.treeNodeParam(node?.data || {})
+        : null) || {
+        parent: id,
+        enabled: true,
+      };
+      let url = !id ? treeOption.url1 : treeOption.url2;
+      this.$http({
+        url: url,
+        method: "post",
+        data: param,
+        success: (res) => {
+          res.objx.forEach((value) => {
+            treeOption.preHadnleData(value);
+          });
+          resolve(res.objx);
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+div.toolbar-container {
+  //min-width: 728px;  /* 解决工具按钮栏换行的问题 */
+  /* 上一行css有问题，当窗口宽度不足时会把按钮挤出到右边的属性设置区，弃之！ */
+}
+
+.left-toolbar {
+  float: left;
+  font-size: 16px;
+
+  /* 按钮组不是 .el-button，吃不到 element 的 .el-button+.el-button 间距，得自己补 */
+  .el-button-group {
+    margin-left: 10px;
+  }
+}
+
+.right-toolbar {
+  float: right;
+  //width: 420px;
+  text-align: right;
+  overflow: hidden;
+
+  .right-toolbar-con {
+    text-align: right;
+
+    .el-button {
+      margin-left: 15px;
+      margin-right: 15px;
+      font-size: 14px;
+      vertical-align: middle;
+
+      &.el-button--primary {
+        padding: 7px 14px;
+      }
+    }
+  }
+}
+
+.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;
+    padding: 0;
+
+    .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);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.form-render-wrapper.pad-layout {
+  margin: 0 auto;
+  width: 960px;
+  border-radius: 15px;
+  //border-width: 10px;
+  box-shadow: 0 0 1px 10px #495060;
+  height: calc(100vh - 125px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.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>