From 589216d6b0b0afd85ddf6b65b56908a34b518242 Mon Sep 17 00:00:00 2001
From: qzp <1748141997@qq.com>
Date: Fri, 7 Jul 2023 00:01:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AAis-active=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/assets/styles/sidebar.scss       |   8 +
 ruoyi-ui/src/components/TopNav/index.vue      | 130 ++++-----
 .../layout/components/Sidebar/SidebarItem.vue |  19 +-
 .../src/layout/components/Sidebar/index.vue   |  19 +-
 ruoyi-ui/src/views/tool/build/index.vue       | 268 +++++++++---------
 5 files changed, 226 insertions(+), 218 deletions(-)

diff --git a/ruoyi-ui/src/assets/styles/sidebar.scss b/ruoyi-ui/src/assets/styles/sidebar.scss
index a14ff6a..a5e4a88 100644
--- a/ruoyi-ui/src/assets/styles/sidebar.scss
+++ b/ruoyi-ui/src/assets/styles/sidebar.scss
@@ -87,6 +87,7 @@
 
     & .theme-dark .is-active > .el-submenu__title {
       color: $base-menu-color-active !important;
+      // border-left: 5px solid $base-menu-color-active !important;
     }
 
     & .nest-menu .el-submenu>.el-submenu__title,
@@ -203,6 +204,7 @@
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
+      // background-color: rgba(0, 0, 0, 0.06) !important;
       background-color: rgba(0, 0, 0, 0.06) !important;
     }
   }
@@ -226,3 +228,9 @@
     }
   }
 }
+.el-menu-item.is-active{
+  border-left: 5px solid #409eff !important;
+}
+.el-scrollbar__view {
+  margin-top: 10px;
+}
\ No newline at end of file
diff --git a/ruoyi-ui/src/components/TopNav/index.vue b/ruoyi-ui/src/components/TopNav/index.vue
index 9fb8dd8..737bf0b 100644
--- a/ruoyi-ui/src/components/TopNav/index.vue
+++ b/ruoyi-ui/src/components/TopNav/index.vue
@@ -5,33 +5,35 @@
     @select="handleSelect"
   >
     <template v-for="(item, index) in topMenus">
-      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
-        ><svg-icon :icon-class="item.meta.icon" />
-        {{ item.meta.title }}</el-menu-item
-      >
+      <el-menu-item
+        v-if="index < visibleNumber"
+        :key="index"
+        :style="{'--theme': theme}"
+        :index="item.path"
+      ><svg-icon :icon-class="item.meta.icon" />
+        {{ item.meta.title }}</el-menu-item>
     </template>
 
     <!-- 顶部菜单超出数量折叠 -->
-    <el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
+    <el-submenu v-if="topMenus.length > visibleNumber" :style="{'--theme': theme}" index="more">
       <template slot="title">更多菜单</template>
       <template v-for="(item, index) in topMenus">
         <el-menu-item
-          :index="item.path"
-          :key="index"
           v-if="index >= visibleNumber"
-          ><svg-icon :icon-class="item.meta.icon" />
-          {{ item.meta.title }}</el-menu-item
-        >
+          :key="index"
+          :index="item.path"
+        ><svg-icon :icon-class="item.meta.icon" />
+          {{ item.meta.title }}</el-menu-item>
       </template>
     </el-submenu>
   </el-menu>
 </template>
 
 <script>
-import { constantRoutes } from "@/router";
+import { constantRoutes } from '@/router'
 
 // 隐藏侧边栏路由
-const hideList = ['/index', '/user/profile'];
+const hideList = ['/index', '/user/profile']
 
 export default {
   data() {
@@ -40,68 +42,68 @@ export default {
       visibleNumber: 5,
       // 当前激活菜单的 index
       currentIndex: undefined
-    };
+    }
   },
   computed: {
     theme() {
-      return this.$store.state.settings.theme;
+      return this.$store.state.settings.theme
     },
     // 顶部显示菜单
     topMenus() {
-      let topMenus = [];
+      const topMenus = []
       this.routers.map((menu) => {
         if (menu.hidden !== true) {
           // 兼容顶部栏一级菜单内部跳转
-          if (menu.path === "/") {
-              topMenus.push(menu.children[0]);
+          if (menu.path === '/') {
+            topMenus.push(menu.children[0])
           } else {
-              topMenus.push(menu);
+            topMenus.push(menu)
           }
         }
-      });
-      return topMenus;
+      })
+      return topMenus
     },
     // 所有的路由信息
     routers() {
-      return this.$store.state.permission.topbarRouters;
+      return this.$store.state.permission.topbarRouters
     },
     // 设置子路由
     childrenMenus() {
-      var childrenMenus = [];
+      var childrenMenus = []
       this.routers.map((router) => {
         for (var item in router.children) {
           if (router.children[item].parentPath === undefined) {
-            if(router.path === "/") {
-              router.children[item].path = "/" + router.children[item].path;
+            if (router.path === '/') {
+              router.children[item].path = '/' + router.children[item].path
             } else {
-              if(!this.ishttp(router.children[item].path)) {
-                router.children[item].path = router.path + "/" + router.children[item].path;
+              if (!this.ishttp(router.children[item].path)) {
+                router.children[item].path = router.path + '/' + router.children[item].path
               }
             }
-            router.children[item].parentPath = router.path;
+            router.children[item].parentPath = router.path
           }
-          childrenMenus.push(router.children[item]);
+          childrenMenus.push(router.children[item])
         }
-      });
-      return constantRoutes.concat(childrenMenus);
+      })
+      return constantRoutes.concat(childrenMenus)
     },
     // 默认激活的菜单
     activeMenu() {
-      const path = this.$route.path;
-      let activePath = path;
-      if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
-        const tmpPath = path.substring(1, path.length);
-        activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
+      const path = this.$route.path
+      let activePath = path
+      if (path !== undefined && path.lastIndexOf('/') > 0 && hideList.indexOf(path) === -1) {
+        const tmpPath = path.substring(1, path.length)
+        activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'))
         if (!this.$route.meta.link) {
-          this.$store.dispatch('app/toggleSideBarHide', false);
+          this.$store.dispatch('app/toggleSideBarHide', false)
         }
-      } else if(!this.$route.children) {
-        activePath = path;
-        this.$store.dispatch('app/toggleSideBarHide', true);
+      } else if (!this.$route.children) {
+        activePath = path
+        this.$store.dispatch('app/toggleSideBarHide', true)
       }
-      this.activeRoutes(activePath);
-      return activePath;
-    },
+      this.activeRoutes(activePath)
+      return activePath
+    }
   },
   beforeMount() {
     window.addEventListener('resize', this.setVisibleNumber)
@@ -110,58 +112,58 @@ export default {
     window.removeEventListener('resize', this.setVisibleNumber)
   },
   mounted() {
-    this.setVisibleNumber();
+    this.setVisibleNumber()
   },
   methods: {
     // 根据宽度计算设置显示栏数
     setVisibleNumber() {
-      const width = document.body.getBoundingClientRect().width / 3;
-      this.visibleNumber = parseInt(width / 85);
+      const width = document.body.getBoundingClientRect().width / 3
+      this.visibleNumber = parseInt(width / 85)
     },
     // 菜单选择事件
     handleSelect(key, keyPath) {
-      this.currentIndex = key;
-      const route = this.routers.find(item => item.path === key);
+      this.currentIndex = key
+      const route = this.routers.find(item => item.path === key)
       if (this.ishttp(key)) {
         // http(s):// 路径新窗口打开
-        window.open(key, "_blank");
+        window.open(key, '_blank')
       } else if (!route || !route.children) {
         // 没有子路由路径内部打开
-        const routeMenu = this.childrenMenus.find(item => item.path === key);
+        const routeMenu = this.childrenMenus.find(item => item.path === key)
         if (routeMenu && routeMenu.query) {
-          let query = JSON.parse(routeMenu.query);
-          this.$router.push({ path: key, query: query });
+          const query = JSON.parse(routeMenu.query)
+          this.$router.push({ path: key, query: query })
         } else {
-          this.$router.push({ path: key });
+          this.$router.push({ path: key })
         }
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch('app/toggleSideBarHide', true)
       } else {
         // 显示左侧联动菜单
-        this.activeRoutes(key);
-        this.$store.dispatch('app/toggleSideBarHide', false);
+        this.activeRoutes(key)
+        this.$store.dispatch('app/toggleSideBarHide', false)
       }
     },
     // 当前激活的路由
     activeRoutes(key) {
-      var routes = [];
+      var routes = []
       if (this.childrenMenus && this.childrenMenus.length > 0) {
         this.childrenMenus.map((item) => {
-          if (key == item.parentPath || (key == "index" && "" == item.path)) {
-            routes.push(item);
+          if (key == item.parentPath || (key == 'index' && item.path == '')) {
+            routes.push(item)
           }
-        });
+        })
       }
-      if(routes.length > 0) {
-        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
+      if (routes.length > 0) {
+        this.$store.commit('SET_SIDEBAR_ROUTERS', routes)
       } else {
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch('app/toggleSideBarHide', true)
       }
     },
     ishttp(url) {
       return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
     }
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss">
diff --git a/ruoyi-ui/src/layout/components/Sidebar/SidebarItem.vue b/ruoyi-ui/src/layout/components/Sidebar/SidebarItem.vue
index 3742f14..8645a36 100644
--- a/ruoyi-ui/src/layout/components/Sidebar/SidebarItem.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/SidebarItem.vue
@@ -53,44 +53,43 @@ export default {
     this.onlyOneChild = null
     return {}
   },
-  created(){
+  created() {
   // console.log(this.item,"item.1",this.basePath);
   },
   methods: {
     hasOneShowingChild(children = [], parent) {
       // console.log(children,"parent");
       if (!children) {
-        children = [];
+        children = []
       }
-    
+
       const showingChildren = children.filter(item => {
         if (item.hidden) {
           return false
         } else {
           // Temp set(will be used if only has one showing child)
           this.onlyOneChild = item
-         
+
           return true
         }
       })
 
       // When there is only one child router, the child router is displayed by default
       if (showingChildren.length === 1) {
-
         return true
       }
 
       // Show parent if there are no child router to display
       if (showingChildren.length === 0) {
         this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
-       
+
         return true
       }
-   
+
       return false
     },
     resolvePath(routePath, routeQuery) {
-      console.log(routePath,routeQuery,"路由");
+      console.log(routePath, routeQuery, '路由')
       if (isExternal(routePath)) {
         return routePath
       }
@@ -98,10 +97,10 @@ export default {
         return this.basePath
       }
       if (routeQuery) {
-        let query = JSON.parse(routeQuery);
+        const query = JSON.parse(routeQuery)
         return { path: path.resolve(this.basePath, routePath), query: query }
       }
-     console.log(this.basePath, routePath,"this.basePath, routePath");
+      console.log(this.basePath, routePath, 'this.basePath, routePath')
       return path.resolve(this.basePath, routePath)
     }
   }
diff --git a/ruoyi-ui/src/layout/components/Sidebar/index.vue b/ruoyi-ui/src/layout/components/Sidebar/index.vue
index d95a43f..c98623a 100644
--- a/ruoyi-ui/src/layout/components/Sidebar/index.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/index.vue
@@ -29,7 +29,7 @@ import { mapGetters, mapState } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/assets/styles/variables.scss'
-import { dynamicRoutes,teacher} from '@/router/index.js'
+import { dynamicRoutes, teacher } from '@/router/index.js'
 import { getroleId } from '@/utils/auth'
 export default {
   components: { SidebarItem, Logo },
@@ -40,7 +40,7 @@ export default {
       const route = this.$route
       const { meta, path } = route
       // if set path, the sidebar will highlight the path you set
-      if (meta.activeMenu) { 
+      if (meta.activeMenu) {
         return meta.activeMenu
       }
       return path
@@ -61,14 +61,13 @@ export default {
     }
   },
   mounted() {
- 
-    const roleid=getroleId()
-      // 判断roleid全等于4就是学生,全等于3就是老师 
-      if(roleid==4){
-        this.routesList = dynamicRoutes
-      }else if(roleid==3){
-        this.routesList = teacher
-      }
+    const roleid = getroleId()
+    // 判断roleid全等于4就是学生,全等于3就是老师
+    if (roleid == 4) {
+      this.routesList = dynamicRoutes
+    } else if (roleid == 3) {
+      this.routesList = teacher
+    }
     console.log('dynamicRoutes', this.routesList)
   }
 }
diff --git a/ruoyi-ui/src/views/tool/build/index.vue b/ruoyi-ui/src/views/tool/build/index.vue
index eabaf91..7d98520 100644
--- a/ruoyi-ui/src/views/tool/build/index.vue
+++ b/ruoyi-ui/src/views/tool/build/index.vue
@@ -2,7 +2,7 @@
   <div class="container">
     <div class="left-board">
       <div class="logo-wrapper">
-        <div class="logo"><img :src="logo" alt="logo" /> Form Generator</div>
+        <div class="logo"><img :src="logo" alt="logo"> Form Generator</div>
       </div>
       <el-scrollbar class="left-scrollbar">
         <div class="components-list">
@@ -152,38 +152,38 @@
       :show-file-name="showFileName"
       @confirm="generate"
     />
-    <input id="copyNode" type="hidden" />
+    <input id="copyNode" type="hidden">
   </div>
 </template>
 
 <script>
-import draggable from "vuedraggable";
-import beautifier from "js-beautify";
-import ClipboardJS from "clipboard";
-import render from "@/utils/generator/render";
-import RightPanel from "./RightPanel";
+import draggable from 'vuedraggable'
+import beautifier from 'js-beautify'
+import ClipboardJS from 'clipboard'
+import render from '@/utils/generator/render'
+import RightPanel from './RightPanel'
 import {
   inputComponents,
   selectComponents,
   layoutComponents,
-  formConf,
-} from "@/utils/generator/config";
-import { beautifierConf, titleCase } from "@/utils/index";
+  formConf
+} from '@/utils/generator/config'
+import { beautifierConf, titleCase } from '@/utils/index'
 import {
   makeUpHtml,
   vueTemplate,
   vueScript,
-  cssStyle,
-} from "@/utils/generator/html";
-import { makeUpJs } from "@/utils/generator/js";
-import { makeUpCss } from "@/utils/generator/css";
-import drawingDefault from "@/utils/generator/drawingDefault";
-import logo from "@/assets/logo/logo.png";
-import CodeTypeDialog from "./CodeTypeDialog";
-import DraggableItem from "./DraggableItem";
+  cssStyle
+} from '@/utils/generator/html'
+import { makeUpJs } from '@/utils/generator/js'
+import { makeUpCss } from '@/utils/generator/css'
+import drawingDefault from '@/utils/generator/drawingDefault'
+import logo from '@/assets/logo/logo.png'
+import CodeTypeDialog from './CodeTypeDialog'
+import DraggableItem from './DraggableItem'
 
-let oldActiveId;
-let tempActiveData;
+let oldActiveId
+let tempActiveData
 
 export default {
   components: {
@@ -191,7 +191,7 @@ export default {
     render,
     RightPanel,
     CodeTypeDialog,
-    DraggableItem,
+    DraggableItem
   },
   data() {
     return {
@@ -210,201 +210,200 @@ export default {
       dialogVisible: false,
       generateConf: null,
       showFileName: false,
-      activeData: drawingDefault[0],
-    };
-  },
-  created() {
-    // 防止 firefox 下 拖拽 会新打卡一个选项卡
-    document.body.ondrop = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
+      activeData: drawingDefault[0]
+    }
   },
   watch: {
     // eslint-disable-next-line func-names
-    "activeData.label": function (val, oldVal) {
+    'activeData.label': function(val, oldVal) {
       if (
         this.activeData.placeholder === undefined ||
         !this.activeData.tag ||
         oldActiveId !== this.activeId
       ) {
-        return;
+        return
       }
       this.activeData.placeholder =
-        this.activeData.placeholder.replace(oldVal, "") + val;
+        this.activeData.placeholder.replace(oldVal, '') + val
     },
     activeId: {
       handler(val) {
-        oldActiveId = val;
+        oldActiveId = val
       },
-      immediate: true,
-    },
+      immediate: true
+    }
+  },
+  created() {
+    // 防止 firefox 下 拖拽 会新打卡一个选项卡
+    document.body.ondrop = (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+    }
   },
   mounted() {
-    const clipboard = new ClipboardJS("#copyNode", {
+    const clipboard = new ClipboardJS('#copyNode', {
       text: (trigger) => {
-        const codeStr = this.generateCode();
+        const codeStr = this.generateCode()
         this.$notify({
-          title: "成功",
-          message: "代码已复制到剪切板，可粘贴。",
-          type: "success",
-        });
-        return codeStr;
-      },
-    });
-    clipboard.on("error", (e) => {
-      this.$message.error("代码复制失败");
-    });
+          title: '成功',
+          message: '代码已复制到剪切板，可粘贴。',
+          type: 'success'
+        })
+        return codeStr
+      }
+    })
+    clipboard.on('error', (e) => {
+      this.$message.error('代码复制失败')
+    })
   },
   methods: {
     activeFormItem(element) {
-      this.activeData = element;
-      this.activeId = element.formId;
+      this.activeData = element
+      this.activeId = element.formId
     },
     onEnd(obj, a) {
       if (obj.from !== obj.to) {
-        this.activeData = tempActiveData;
-        this.activeId = this.idGlobal;
+        this.activeData = tempActiveData
+        this.activeId = this.idGlobal
       }
     },
     addComponent(item) {
-      const clone = this.cloneComponent(item);
-      this.drawingList.push(clone);
-      this.activeFormItem(clone);
+      const clone = this.cloneComponent(item)
+      this.drawingList.push(clone)
+      this.activeFormItem(clone)
     },
     cloneComponent(origin) {
-      const clone = JSON.parse(JSON.stringify(origin));
-      clone.formId = ++this.idGlobal;
-      clone.span = formConf.span;
-      clone.renderKey = +new Date(); // 改变renderKey后可以实现强制更新组件
-      if (!clone.layout) clone.layout = "colFormItem";
-      if (clone.layout === "colFormItem") {
-        clone.vModel = `field${this.idGlobal}`;
-        clone.placeholder !== undefined && (clone.placeholder += clone.label);
-        tempActiveData = clone;
-      } else if (clone.layout === "rowFormItem") {
-        delete clone.label;
-        clone.componentName = `row${this.idGlobal}`;
-        clone.gutter = this.formConf.gutter;
-        tempActiveData = clone;
+      const clone = JSON.parse(JSON.stringify(origin))
+      clone.formId = ++this.idGlobal
+      clone.span = formConf.span
+      clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
+      if (!clone.layout) clone.layout = 'colFormItem'
+      if (clone.layout === 'colFormItem') {
+        clone.vModel = `field${this.idGlobal}`
+        clone.placeholder !== undefined && (clone.placeholder += clone.label)
+        tempActiveData = clone
+      } else if (clone.layout === 'rowFormItem') {
+        delete clone.label
+        clone.componentName = `row${this.idGlobal}`
+        clone.gutter = this.formConf.gutter
+        tempActiveData = clone
       }
-      return tempActiveData;
+      return tempActiveData
     },
     AssembleFormData() {
       this.formData = {
         fields: JSON.parse(JSON.stringify(this.drawingList)),
-        ...this.formConf,
-      };
+        ...this.formConf
+      }
     },
     generate(data) {
-      const func = this[`exec${titleCase(this.operationType)}`];
-      this.generateConf = data;
-      func && func(data);
+      const func = this[`exec${titleCase(this.operationType)}`]
+      this.generateConf = data
+      func && func(data)
     },
     execRun(data) {
-      this.AssembleFormData();
-      this.drawerVisible = true;
+      this.AssembleFormData()
+      this.drawerVisible = true
     },
     execDownload(data) {
-      const codeStr = this.generateCode();
-      const blob = new Blob([codeStr], { type: "text/plain;charset=utf-8" });
-      this.$download.saveAs(blob, data.fileName);
+      const codeStr = this.generateCode()
+      const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
+      this.$download.saveAs(blob, data.fileName)
     },
     execCopy(data) {
-      document.getElementById("copyNode").click();
+      document.getElementById('copyNode').click()
     },
     empty() {
-      this.$confirm("确定要清空所有组件吗？", "提示", { type: "warning" }).then(
+      this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
         () => {
-          this.drawingList = [];
+          this.drawingList = []
         }
-      );
+      )
     },
     drawingItemCopy(item, parent) {
-      let clone = JSON.parse(JSON.stringify(item));
-      clone = this.createIdAndKey(clone);
-      parent.push(clone);
-      this.activeFormItem(clone);
+      let clone = JSON.parse(JSON.stringify(item))
+      clone = this.createIdAndKey(clone)
+      parent.push(clone)
+      this.activeFormItem(clone)
     },
     createIdAndKey(item) {
-      item.formId = ++this.idGlobal;
-      item.renderKey = +new Date();
-      if (item.layout === "colFormItem") {
-        item.vModel = `field${this.idGlobal}`;
-      } else if (item.layout === "rowFormItem") {
-        item.componentName = `row${this.idGlobal}`;
+      item.formId = ++this.idGlobal
+      item.renderKey = +new Date()
+      if (item.layout === 'colFormItem') {
+        item.vModel = `field${this.idGlobal}`
+      } else if (item.layout === 'rowFormItem') {
+        item.componentName = `row${this.idGlobal}`
       }
       if (Array.isArray(item.children)) {
         item.children = item.children.map((childItem) =>
           this.createIdAndKey(childItem)
-        );
+        )
       }
-      return item;
+      return item
     },
     drawingItemDelete(index, parent) {
-      parent.splice(index, 1);
+      parent.splice(index, 1)
       this.$nextTick(() => {
-        const len = this.drawingList.length;
+        const len = this.drawingList.length
         if (len) {
-          this.activeFormItem(this.drawingList[len - 1]);
+          this.activeFormItem(this.drawingList[len - 1])
         }
-      });
+      })
     },
     generateCode() {
-      const { type } = this.generateConf;
-      this.AssembleFormData();
-      const script = vueScript(makeUpJs(this.formData, type));
-      const html = vueTemplate(makeUpHtml(this.formData, type));
-      const css = cssStyle(makeUpCss(this.formData));
-      return beautifier.html(html + script + css, beautifierConf.html);
+      const { type } = this.generateConf
+      this.AssembleFormData()
+      const script = vueScript(makeUpJs(this.formData, type))
+      const html = vueTemplate(makeUpHtml(this.formData, type))
+      const css = cssStyle(makeUpCss(this.formData))
+      return beautifier.html(html + script + css, beautifierConf.html)
     },
     download() {
-      this.dialogVisible = true;
-      this.showFileName = true;
-      this.operationType = "download";
+      this.dialogVisible = true
+      this.showFileName = true
+      this.operationType = 'download'
     },
     run() {
-      this.dialogVisible = true;
-      this.showFileName = false;
-      this.operationType = "run";
+      this.dialogVisible = true
+      this.showFileName = false
+      this.operationType = 'run'
     },
     copy() {
-      this.dialogVisible = true;
-      this.showFileName = false;
-      this.operationType = "copy";
+      this.dialogVisible = true
+      this.showFileName = false
+      this.operationType = 'copy'
     },
     tagChange(newTag) {
-      newTag = this.cloneComponent(newTag);
-      newTag.vModel = this.activeData.vModel;
-      newTag.formId = this.activeId;
-      newTag.span = this.activeData.span;
-      delete this.activeData.tag;
-      delete this.activeData.tagIcon;
-      delete this.activeData.document;
+      newTag = this.cloneComponent(newTag)
+      newTag.vModel = this.activeData.vModel
+      newTag.formId = this.activeId
+      newTag.span = this.activeData.span
+      delete this.activeData.tag
+      delete this.activeData.tagIcon
+      delete this.activeData.document
       Object.keys(newTag).forEach((key) => {
         if (
           this.activeData[key] !== undefined &&
           typeof this.activeData[key] === typeof newTag[key]
         ) {
-          newTag[key] = this.activeData[key];
+          newTag[key] = this.activeData[key]
         }
-      });
-      this.activeData = newTag;
-      this.updateDrawingList(newTag, this.drawingList);
+      })
+      this.activeData = newTag
+      this.updateDrawingList(newTag, this.drawingList)
     },
     updateDrawingList(newTag, list) {
-      const index = list.findIndex((item) => item.formId === this.activeId);
+      const index = list.findIndex((item) => item.formId === this.activeId)
       if (index > -1) {
-        list.splice(index, 1, newTag);
+        list.splice(index, 1, newTag)
       } else {
         list.forEach((item) => {
-          if (Array.isArray(item.children))
-            this.updateDrawingList(newTag, item.children);
-        });
+          if (Array.isArray(item.children)) { this.updateDrawingList(newTag, item.children) }
+        })
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang='scss'>
@@ -443,6 +442,7 @@ export default {
 .right-scrollbar {
   .el-scrollbar__view {
     padding: 12px 18px 15px 15px;
+
   }
 }
 .left-scrollbar .el-scrollbar__wrap {