目录图标

operationSupport/src/components/common/MenuTree.vue

@@ -1,63 +1,111 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-08-24 11:40:11
+ * @LastEditTime: 2022-09-13 10:52:48
+ * @LastEditors: D4THYL3
+ * @Description: In User Settings Edit
+ * @FilePath: \operationSupport\src\components\common\MenuTree.vue
+-->
 <template>
-    <div>
-        <template v-for="item in menuList">
-            <el-submenu v-if="!!item.children" :index="'/' + item.linkPath" :key="item.id">
-                <template slot="title">
-                    <img
-                        :src="`${envConfig.baseImgApi}${
+  <div>
+    <template v-for="item in menuList">
+      <el-submenu
+        v-if="!!item.children"
+        :index="'/' + item.linkPath"
+        :key="item.id"
+      >
+        <template slot="title">
+          <!-- <img
+            :src="`${envConfig.baseImgApi}${
                             openArray.includes(item.linkPath) ? item.menuDynamicImage || item.menuImage : item.menuImage
                         }`"
-                        style="width: 14px; height: 14px; margin-right: 10px"
-                    />
-                    <span v-if="!collapse" slot="title">{{ item.name }}</span>
-                </template>
-                <menu-tree :menuList="item.children" :openArray="openArray" />
-            </el-submenu>
-            <el-menu-item v-else :index="'/' + item.linkPath" :key="item.id">
-                <img
-                    :src="`${envConfig.baseImgApi}${
+            style="width: 14px; height: 14px; margin-right: 10px"
+          /> -->
+          <img
+            v-show="item.parentMenuId != 405"
+            :src="`${envConfig.baseImgApi}${
+                            openArray.includes(item.linkPath) ? item.menuDynamicImage || item.menuImage : item.menuImage
+                        }`"
+            style="width: 14px; height: 14px; margin-right: 10px"
+          />
+          <span
+            v-if="!collapse"
+            slot="title"
+          >{{ item.name }}</span>
+        </template>
+        <menu-tree
+          :menuList="item.children"
+          :openArray="openArray"
+        />
+      </el-submenu>
+      <el-menu-item
+        v-else
+        :index="'/' + item.linkPath"
+        :key="item.id"
+      >
+        <!-- <img
+          :src="`${envConfig.baseImgApi}${
                         openArray.includes(item.linkPath) ? item.menuDynamicImage || item.menuImage : item.menuImage
                     }`"
-                    style="width: 14px; height: 14px; margin-right: 10px"
-                />
-                <span slot="title">{{ item.name }}</span>
-            </el-menu-item>
-        </template>
-    </div>
+          style="width: 14px; height: 14px; margin-right: 10px"
+        /> -->
+        <img
+          v-if="item.linkPath == 'newWorkBench/index' || item.linkPath =='flow/index'"
+          :src="`${envConfig.baseImgApi}${
+                        openArray.includes(item.linkPath) ? item.menuDynamicImage || item.menuImage : item.menuImage
+                    }`"
+          style="width: 14px; height: 14px; margin-right: 10px"
+        />
+        <img
+          src="@/assets/img/menuicon/xuanzhong2.png"
+          alt=""
+          v-if="openArray.includes(item.linkPath) && item.linkPath != 'newWorkBench/index' && item.linkPath !='flow/index'"
+          style=" margin-right: 10px"
+        >
+        <img
+          src="@/assets/img/menuicon/changtai.png"
+          alt=""
+          v-if="!openArray.includes(item.linkPath) && item.linkPath != 'newWorkBench/index' && item.linkPath !='flow/index'"
+          style=" margin-right: 10px"
+        >
+        <span slot="title">{{ item.name }}</span>
+      </el-menu-item>
+    </template>
+  </div>
 </template>
 <script>
 import MenuTree from './MenuTree.vue';
 import envConfig from '@/config';
 export default {
-    name: 'MenuTree',
-    data() {
-        return {
-            envConfig: envConfig
-        };
-    },
-    components: {
-        MenuTree
-    },
-    computed: {
-        onRoutes() {
-            return this.$route.path;
-        }
+  name: 'MenuTree',
+  data () {
+    return {
+      envConfig: envConfig
+    };
+  },
+  components: {
+    MenuTree
+  },
+  computed: {
+    onRoutes () {
+      return this.$route.path;
+    }
+  },
+  methods: {},
+  props: {
+    menuList: {
+      type: Array,
+      default: () => []
     },
-    methods: {},
-    props: {
-        menuList: {
-            type: Array,
-            default: () => []
-        },
-        collapse: {
-            type: Boolean,
-            default: false
-        },
-        openArray: {
-            type: Array,
-            default: () => []
-        }
+    collapse: {
+      type: Boolean,
+      default: false
     },
-    created() {}
+    openArray: {
+      type: Array,
+      default: () => []
+    }
+  },
+  created () { }
 };
 </script>

operationSupport/src/components/common/Sidebar.vue

@@ -1,109 +1,125 @@
 <template>
-    <div class="sidebar" :style="collapse ? 'width:85px' : 'width:220px'">
-        <div class="logo" v-if="!collapse">
-            <img style="width: rem(90); height: rem(24)" src="@/assets/img/img_logo2.png" />
-            <div class="title"><span class="point"></span>{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
-        </div>
-        <div class="logo shrink" v-else>
-            <div class="text">{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
-        </div>
-        <div class="menu-wrap no-scrollbar">
-            <el-menu
-                class="sidebar-el-menu"
-                ref="sidebarelmenu"
-                :default-active="onRoutes"
-                :collapse="collapse"
-                background-color="#171F32"
-                text-color="#aaadba"
-                active-text-color="#2887f2"
-                unique-opened
-                collapse-transition
-                router
-                :style="collapse ? 'width:84px' : 'width:220px'"
-            >
-                <menu-tree :menuList="menuList" :collapse="collapse" :openArray="openArray"></menu-tree>
-            </el-menu>
-        </div>
-        <div class="footer">
-            <img
-                :class="[collapse ? 'expandhover' : 'packuphover']"
-                :src="collapse ? btnCollpaseright : btnCollpaseleft"
-                @click="collapseChage"
-            />
-        </div>
+  <div
+    class="sidebar"
+    :style="collapse ? 'width:85px' : 'width:220px'"
+  >
+    <div
+      class="logo"
+      v-if="!collapse"
+    >
+      <img
+        style="width: rem(90); height: rem(24)"
+        src="@/assets/img/img_logo2.png"
+      />
+      <div class="title"><span class="point"></span>{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
     </div>
+    <div
+      class="logo shrink"
+      v-else
+    >
+      <div class="text">{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
+    </div>
+    <div class="menu-wrap no-scrollbar">
+      <el-menu
+        class="sidebar-el-menu"
+        ref="sidebarelmenu"
+        :default-active="onRoutes"
+        :collapse="collapse"
+        background-color="#171F32"
+        text-color="#aaadba"
+        active-text-color="#2887f2"
+        unique-opened
+        collapse-transition
+        router
+        :style="collapse ? 'width:84px' : 'width:220px'"
+      >
+        <menu-tree
+          :menuList="menuList"
+          :collapse="collapse"
+          :openArray="openArray"
+        ></menu-tree>
+      </el-menu>
+    </div>
+    <div class="footer">
+      <img
+        :class="[collapse ? 'expandhover' : 'packuphover']"
+        :src="collapse ? btnCollpaseright : btnCollpaseleft"
+        @click="collapseChage"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
 import MenuTree from './MenuTree.vue';
 export default {
-    data() {
-        return {
-            btnCollpaseright: require('@assets/img/btn_collpaseright.png'),
-            btnCollpaseleft: require('@assets/img/btn_collpaseleft.png'),
-            openList: []
-        };
+  data () {
+    return {
+      btnCollpaseright: require('@assets/img/btn_collpaseright.png'),
+      btnCollpaseleft: require('@assets/img/btn_collpaseleft.png'),
+      openList: []
+    };
+  },
+  components: {
+    MenuTree
+  },
+  computed: {
+    onRoutes () {
+      return this.$route.path;
     },
-    components: {
-        MenuTree
+    collapse () {
+      return this.$store.getters['getCollapse'];
     },
-    computed: {
-        onRoutes() {
-            return this.$route.path;
-        },
-        collapse() {
-            return this.$store.getters['getCollapse'];
-        },
-        menuList() {
-            let list = this.$store.getters['getMenuList'];
-            return list;
-        },
-        openArray() {
-            return this.openList;
-        },
-        sessSetThisDetai() {
-            let text = '';
-            if (!!window.sessionStorage.getItem('setThisDetai')) {
-                text = JSON.parse(window.sessionStorage.getItem('setThisDetai')).name;
-            }
-            return text;
-        }
-    },
-    methods: {
-        // 侧边栏折叠
-        collapseChage() {
-            this.$store.dispatch('collapse', !this.collapse);
-        },
-        thisfindMen(arr, indexPath) {
-            let status = [];
-            arr.map((v) => {
-                if (v.children) {
-                    v.children.map((s) => {
-                        if ('/' + s.linkPath === indexPath) {
-                            status.push(v.linkPath, s.linkPath);
-                        }
-                    });
-                } else {
-                    if ('/' + v.linkPath === indexPath) {
-                        status.push(v.linkPath);
-                    }
-                }
-            });
-            return status;
-        }
+    menuList () {
+      let list = this.$store.getters['getMenuList'];
+      return list;
     },
-    watch: {
-        $route(newValue, oldValue) {
-            this.openList = this.thisfindMen(this.$store.getters['getMenuList'], newValue.path);
-        }
+    openArray () {
+      return this.openList;
     },
-    created() {
-        this.openList = this.thisfindMen(this.$store.getters['getMenuList'], this.$route.path);
+    sessSetThisDetai () {
+      let text = '';
+      if (!!window.sessionStorage.getItem('setThisDetai')) {
+        text = JSON.parse(window.sessionStorage.getItem('setThisDetai')).name;
+      }
+      return text;
+    }
+  },
+  methods: {
+    // 侧边栏折叠
+    collapseChage () {
+      this.$store.dispatch('collapse', !this.collapse);
     },
-    mounted() {
-        // this.$refs.sidebarelmenu.$children[0].$children[0].$el.style.paddingLeft = 0;
-        // console.log((this.$refs.sidebarelmenu.$children[0].$children[0].$el.style.paddingLeft = 0));
+    thisfindMen (arr, indexPath) {
+      let status = [];
+      arr.map((v) => {
+        if (v.children) {
+          v.children.map((s) => {
+            if ('/' + s.linkPath === indexPath) {
+              status.push(v.linkPath, s.linkPath);
+            }
+          });
+        } else {
+          if ('/' + v.linkPath === indexPath) {
+            status.push(v.linkPath);
+          }
+        }
+      });
+      return status;
     }
+  },
+  watch: {
+    $route (newValue, oldValue) {
+      this.openList = this.thisfindMen(this.$store.getters['getMenuList'], newValue.path);
+    }
+  },
+  created () {
+    this.openList = this.thisfindMen(this.$store.getters['getMenuList'], this.$route.path);
+  },
+  mounted () {
+    // this.$refs.sidebarelmenu.$children[0].$children[0].$el.style.paddingLeft = 0;
+    // console.log((this.$refs.sidebarelmenu.$children[0].$children[0].$el.style.paddingLeft = 0));
+  }
 };
 </script>
 
@@ -218,6 +234,13 @@ export default {
         color: rgb(39, 135, 241);
     }
 }
+.sidebar-el-menu > div > .el-submenu > .el-menu.el-menu--inline {
+    width: 100% !important;
+}
+// el-submenu
+.sidebar-el-menu > div > .el-submenu > .el-menu.el-menu--inline > div > .el-submenu > .el-menu.el-menu--inline {
+    width: 100% !important;
+}
 .el-menu-item.is-active {
     color: rgb(39, 135, 241);
 }