导出

gaoshp

2024-06-22 0f7b7f1a8e1b72c04d8a32858dea5e40b7f67c9b

 src/views/home/widgets/index.vue

@@ -21,7 +21,10 @@
                        <template #item="{ element }">
                           <div class="widgets-item">
                              <component :is="allComps[element]"></component>
										
                              <div v-if="customizing" class="customize-overlay">
                                 <el-button class="close" type="danger" plain icon="el-icon-close" size="small" @click="remove(element)"></el-button>
                                 <label><el-icon><component :is="allComps[element].icon" /></el-icon>{{ allComps[element].title }}</label>
                              </div>
                           </div>
                        </template>
                     </draggable>
@@ -108,7 +111,6 @@
         this.getWorkbenchCarList();
      },
      mounted() {
         console.log(this.allComps,this.element,this.grid.layout)
         this.$emit('on-mounted')
      },
      computed: {
@@ -132,6 +134,7 @@
            return allCompsList
         },
         myCompsList(){
            alert(1)
            var copmsList = [];
            if(this.defaultGrid.copmsList == undefined) return [];
            this.defaultGrid.copmsList.forEach(item=> {
@@ -157,13 +160,34 @@
            this.$HTTP.get(`/api/blade-system/workbench-card/list?workbenchId=${this.workid}`).then(res=> {
               if(res.code == 200) {
                  let cards = res.data; 
                  //ycoordinate表示从上往下从第几个开始，从0开始数
                  //xcoordinate表示从左往右从第几个开始，从0开始数
                  //按ycoordinate进行从小到大排序，如果ycoordinate一样时，按照xcoordinate从小到大排序
                  //cardWide代表宽度
                  //cardKey代表组件名称
                  cards.sort((a, b) => {  
                     return parseInt(a.xcoordinate, 10) - parseInt(b.xcoordinate, 10);  
                  });  
                     // 先比较 ycoordinate  
                     if (a.ycoordinate < b.ycoordinate) {  
                        return -1;  
                     }  
                     if (a.ycoordinate > b.ycoordinate) {  
                        return 1;  
                     }  
                     // 如果 ycoordinate 相同，则比较 xcoordinate  
                     if (a.xcoordinate < b.xcoordinate) {  
                        return -1;  
                     }  
                     if (a.xcoordinate > b.xcoordinate) {  
                        return 1;  
                     }  
                     // 如果 xcoordinate 也相同，则不交换位置  
                     return 0;  
                  });   
                  cards.forEach((item,index)=> {
                     this.$CONFIG.DEFAULT_GRID.copmsList[index] = [item.cardKey];
                     this.$CONFIG.DEFAULT_GRID.layout[index] = item.cardWide * 2;
                  })
                  console.log(this.$CONFIG.DEFAULT_GRID.copmsList,this.$CONFIG.DEFAULT_GRID.layout,234)
                  this.$CONFIG.DEFAULT_GRID.data = cards;
                  this.defaultGrid = this.$CONFIG.DEFAULT_GRID;
                  this.grid = this.$TOOL.data.get("grid") || JSON.parse(JSON.stringify(this.defaultGrid))
@@ -195,11 +219,13 @@
         },
         //隐藏组件
         remove(item){
            console.log(item,222)
            var newCopmsList = this.grid.copmsList
            newCopmsList.forEach((obj, index) => {
               var newObj = obj.filter(o=>o!=item)
               newCopmsList[index] = newObj;
            })
            //console.log(newCopmsList,123)
         },
         //保存
         save(){