feat: 解决表单设计器数据缓存问题

ruoyi-ui/src/views/tool/build/FormDrawer.vue

@@ -9,7 +9,7 @@
                 <i class="el-icon-setting" />
               </el-badge>
             </div>
-            <el-tabs v-model="activeTab" type="card" class="editor-tabs">
+            <el-tabs v-model="activeTab" type="border-card" class="editor-tabs">
               <el-tab-pane name="html">
                 <span slot="label">
                   <i v-if="activeTab==='html'" class="el-icon-edit" />
@@ -32,9 +32,9 @@
                 </span>
               </el-tab-pane>
             </el-tabs>
-            <div v-show="activeTab==='html'" id="editorHtml" class="tab-editor" />
-            <div v-show="activeTab==='js'" id="editorJs" class="tab-editor" />
-            <div v-show="activeTab==='css'" id="editorCss" class="tab-editor" />
+            <div v-show="activeTab==='html'" style="margin-top: 8px" id="editorHtml" class="tab-editor" />
+            <div v-show="activeTab==='js'" style="margin-top: 8px" id="editorJs" class="tab-editor" />
+            <div v-show="activeTab==='css'" style="margin-top: 8px" id="editorCss" class="tab-editor" />
           </el-col>
           <el-col :md="24" :lg="12" class="right-preview">
             <div class="action-bar" :style="{'text-align': 'left'}">
@@ -60,9 +60,10 @@
               ref="previewPage"
               class="result-wrapper"
               frameborder="0"
-              src="preview.html"
+              :src="url"
               @load="iframeLoad"
             />
+<!--            <i-frame v-show="isIframeLoaded" :src="url" />-->
             <div v-show="!isIframeLoaded" v-loading="true" class="result-wrapper" />
           </el-col>
         </el-row>
@@ -76,6 +77,7 @@
   </div>
 </template>
 <script>
+import iFrame from "@/components/iFrame/index";
 import { parse } from '@babel/parser'
 import ClipboardJS from 'clipboard'
 import { saveAs } from 'file-saver'
@@ -84,7 +86,7 @@ import {
 } from '@/utils/generator/html'
 import { makeUpJs } from '@/utils/generator/js'
 import { makeUpCss } from '@/utils/generator/css'
-import { exportDefault, beautifierConf, titleCase } from '@/utils/index'
+import { exportDefault, beautifierConf, titleCase } from '@/utils'
 import ResourceDialog from './ResourceDialog'
 import loadMonaco from '@/utils/loadMonaco'
 import loadBeautifier from '@/utils/loadBeautifier'
@@ -103,7 +105,7 @@ let beautifier
 let monaco
 
 export default {
-  components: { ResourceDialog },
+  components: { ResourceDialog,iFrame },
   props: ['formData', 'generateConf'],
   data() {
     return {
@@ -118,7 +120,8 @@ export default {
       resourceVisible: false,
       scripts: [],
       links: [],
-      monaco: null
+      monaco: null,
+      url: "/preview.html",
     }
   },
   computed: {

ruoyi-ui/src/views/tool/build/ResourceDialog.vue

@@ -60,7 +60,7 @@
   </div>
 </template>
 <script>
-import { deepClone } from '@/utils/index'
+import { deepClone } from '@/utils'
 
 export default {
   components: {},

ruoyi-ui/src/views/tool/build/RightPanel.vue

@@ -651,7 +651,7 @@
 <script>
 import { isArray } from 'util'
 import TreeNodeDialog from './TreeNodeDialog'
-import { isNumberStr } from '@/utils/index'
+import { isNumberStr } from '@/utils'
 import IconsDialog from './IconsDialog'
 import {
   inputComponents, selectComponents, layoutComponents

ruoyi-ui/src/views/tool/build/TreeNodeDialog.vue

@@ -71,7 +71,7 @@
   </div>
 </template>
 <script>
-import { isNumberStr } from '@/utils/index'
+import { isNumberStr } from '@/utils'
 import { getTreeNodeId, saveTreeNodeId } from '@/utils/db'
 
 const id = getTreeNodeId()

ruoyi-ui/src/views/tool/build/index.vue

@@ -41,9 +41,9 @@
 
     <div class="center-board">
       <div class="action-bar">
-        <el-button icon="el-icon-video-play" type="text" @click="run">
-          运行
-        </el-button>
+<!--        <el-button icon="el-icon-video-play" type="text" @click="run">-->
+<!--          运行-->
+<!--        </el-button>-->
         <el-button icon="el-icon-plus" type="text" @click="handleForm">
           保存
         </el-button>