1

lzhe

2024-04-14 ce13be0bec67641a173e4eb0405b3a2bebda3747

 src/views/home/widgets/components/ver.vue

@@ -6,28 +6,64 @@
            <li><div class="addMenu" @click="showDrawer">+ 添加菜单</div></li>
         </ul>
      </el-card>
      <el-drawer
        title="我是标题"
        :visible="drawer"
        :direction="direction"
        :before-close="handleClose">
        <span>我来啦!</span>
      <el-drawer title="选择菜单" v-model="drawer" :direction="direction" :before-close="handleClose" size="680">
         <div v-for="(value,key,index) in menuList">
            <div class="parent-children-title">{{key}}</div>
            <div class="parent-children">
               <span v-for="item in value">
                  {{item}}
                  <div class="triangle-topright"></div>
                  <el-icon class="icon-topright"><Select /></el-icon>
               </span>
            </div>
         </div>
      </el-drawer>
   </div>
</template>

<script>
   import * as ElementPlusIconsVue from '@element-plus/icons-vue'
   let icons = []
   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
       icons.push(key)
   }
   export default {
      data() {
         return {
            direction: "rtl",
            drawer: false
            drawer: false,
            menuList: {}
         }
      },
      components: {...ElementPlusIconsVue},
      mounted() {
			
         var data = this.$TOOL.data.get("MENU");
         var obj = {};
         data.forEach((item,index)=> {
            if(item.name != "工作台") {
               obj[item.name] = this.getLastLevelNames(item.children);
            }
         })
         this.menuList = obj;
      },
      methods: {
         getLastLevelNames(tree) {  
           const lastLevelNames = [];  
			  
           tree.forEach(item => {  
             if (item.children) {  
               // 递归调用，处理子菜单项  
               const childLastLevelNames = this.getLastLevelNames(item.children);  
               // 将子菜单项的最底层名称添加到结果中  
               lastLevelNames.push(...childLastLevelNames);  
             } else {  
               // 当前项没有子菜单项，是最后一层，添加其名称  
               lastLevelNames.push(item.name);  
             }  
           });  
			  
           return lastLevelNames;  
         },
         showDrawer() {
            this.drawer = true;
         },
@@ -45,4 +81,10 @@
   ul li div {border: 1px solid #3b8e8e;margin-top: 10px;height: 43px;margin-left: 10px;display: flex;align-items: center;justify-content: center;color: #3b8e8e;padding: 7px 15px;border-radius: 2px;border-radius: 2px;white-space: nowrap;cursor: pointer;}
   ul li div:hover {background-color: #ebf4f4;}
   .addMenu {border: 1px dashed #3b8e8e;}
   .parent-children-title {margin-left: 10px;margin-top: 24px;font-weight: 700;font-size: 14px;text-align: left;color: #333;}
   .parent-children {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;padding-left: 10px;box-sizing: border-box;}
   .parent-children span {margin-left: 10px;margin-top: 10px;width: 22%;border: 0.5px solid #20B2AA;border-radius: 2px;height: 43px;display: flex;align-items: center;justify-content: center;cursor: pointer;position: relative;}
   .parent-children span:hover {border: 1px solid #104E8B;}
   .triangle-topright {width: 0;height: 0;border-top: 28px solid #3b8e8e;border-left: 28px solid transparent;position: absolute;right: 0;top: 0;}
   .icon-topright {position: absolute;right: 2px;top: 2px;z-index: 2;color: #fff;}
</style>