1

lzhe

2024-04-14 3830233baf564fe39d5887ad5fd02207aba91f34

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

@@ -2,7 +2,9 @@
   <div>
      <el-card shadow="hover" header="快捷入口">
         <ul>
            <li><div>人工-部门</div></li>
            <li v-for="(item,index) in titleList">
               <div @click="goPage(item)">{{item.name}}</div>
            </li>
            <li><div class="addMenu" @click="showDrawer">+ 添加菜单</div></li>
         </ul>
      </el-card>
@@ -10,12 +12,16 @@
         <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 v-for="(item,index1) in value" @click="addChecked(item,key,index1)" >
                  <div class="parent-name">{{item.name}}</div>
                  <div class="triangle-topright" v-if="item.checked"></div>
                  <el-icon class="icon-topright" v-if="item.checked"><Select /></el-icon>
               </span>
            </div>
         </div>
         <div class="drawer-foot">
            <el-button @click="closeDrawer">取消</el-button>
            <el-button type="primary" @click="drawerConfirm">确定</el-button>
         </div>
      </el-drawer>
   </div>
@@ -28,28 +34,99 @@
       icons.push(key)
   }
   export default {
      title: "快捷入口",
      icon: "el-icon-data-line",
      description: "添加常用菜单入口",
      data() {
         return {
            direction: "rtl",
            titleList: [],
            drawer: false,
            menuList: {}
            menuList: {},
            CARD_INFO: [],
            firstMenuList: [],  //存储初始化的数据
            setCard: [],
            workid: ""
         }
      },
      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;
         this.getCard();
      },
      methods: {
         drawerConfirm() {
            var list = [];
            for(var key in this.menuList) {
               this.menuList[key].forEach(item=> {
                  if(item.checked) {
                     list.push(item.id);
                  }
               })
            }
            this.setCard.forEach(item=> {
               if(item.cardKey == "Entrance") {
                  item.textContent = list.join(",");
               }
            })
            var obj = {
               workbenchId: this.workid,
               workbenchCardAddVOList: this.setCard
            }
            this.$HTTP.post(`/api/blade-system/workbench-card/create-workbench-card`,obj).then(res=> {
               if(res.code == 200) {
                  this.drawer = false;
                  this.menuList = {};
                  this.getCard();  //重新获取快捷菜单
               }
            })
            //console.log(this.setCard,222)
         },
         getCard() {  //获取快捷菜单
            this.$HTTP.get(`/api/blade-system/workbench-card/list?workbenchId=${this.workid}`).then(res=> {
               if(res.code == 200) {
                  this.setCard = res.data;
                  res.data.forEach(item=> {
                     if(item.cardKey == "Entrance") {
                        this.$TOOL.data.set("CARD_INFO", item.textContent);
                     }
                  })
                  this.init(); //根据获取的快捷菜单和菜单确定最后一级和勾选状态
               }
            })
         },
         init() {
            this.titleList = [];
            var data = this.$TOOL.data.get("MENU");
            this.workid = data[0].children[0].id;  //记录第一个children的id
            this.CARD_INFO = this.$TOOL.data.get("CARD_INFO").split(",");
            var obj = {};
            //取最后一级菜单
            data.forEach((item,index)=> {
               if(item.name != "工作台") {
                  obj[item.name] = this.getLastLevelNames(item.children);
               }
            })
            this.menuList = obj;
            this.firstMenuList = JSON.parse(JSON.stringify(obj));  //存储初始化的数据
            // 获取title
            for(var key in this.menuList) {
               this.menuList[key].forEach(item=> {
                  if(item.checked) {
                     this.titleList.push(item)
                  }
               })
            }
         },
         addChecked(item,key,index1) {
            this.menuList[key][index1].checked = !this.menuList[key][index1].checked;
         },
         goPage(item) {
            this.$router.push(item.path);
         },
         getLastLevelNames(tree) {  
           const lastLevelNames = [];  
			  
           var that = this;
           const lastLevelNames = [];
           //,checked: this.$TOOL.data.get("CARD_INFO").split(",").include(item.id)
           tree.forEach(item => {  
             if (item.children) {  
               // 递归调用，处理子菜单项  
@@ -58,7 +135,7 @@
               lastLevelNames.push(...childLastLevelNames);  
             } else {  
               // 当前项没有子菜单项，是最后一层，添加其名称  
               lastLevelNames.push(item.name);  
               lastLevelNames.push({name:item.name,id: item.id,checked: that.CARD_INFO.includes(item.id),path: item.path});  
             }  
           });  
           
@@ -67,24 +144,29 @@
         showDrawer() {
            this.drawer = true;
         },
         closeDrawer() {
            this.menuList = JSON.parse(JSON.stringify(this.firstMenuList));
            this.drawer = false;
         },
         handleClose(done) {
              this.$confirm('确认关闭？').then(_ => {
                  done();
               }).catch(_ => {});
           }
            this.menuList = JSON.parse(JSON.stringify(this.firstMenuList));
              done();
          }
      }
   }
</script>
<style scoped>
   ul {list-style: none;margin-bottom: 10px;overflow: hidden;}
   ul li {float: left;margin-bottom: 8px;}
   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,.addMenu{border: 1px solid #3b8e8e;margin-top: 10px;height: 43px;margin-left: 10px;display: flex;align-items: center;justify-content: center;color: #3b8e8e;border-radius: 2px;border-radius: 2px;white-space: nowrap;cursor: pointer;min-width: 112px;}
   ul li div:hover {background-color: #ebf4f4;}
   .addMenu {border: 1px dashed #3b8e8e;}
   ..addMenu:hover {border: 1px dashed #104E8B;}
   .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 {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;min-width: 112px;}
   .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;}
   .drawer-foot {text-align: right;margin-top: 8px;margin-bottom: 8px;margin-right: 20px;}
</style>