gaoshp
2024-06-25 9626bf75c0cfe5b80be9941d2667ee3579d623e3
src/views/home/widgets/index.vue
@@ -39,6 +39,7 @@
               <div class="widgets-aside-title"><el-icon><el-icon-circle-plus-filled/></el-icon>添加部件</div>
               <div class="widgets-aside-close" @click="close()"><el-icon><el-icon-close /></el-icon></div>
            </el-header>
            {{grid.layout.join(',')}},xxxx
            <el-header style="height:auto">
               <div class="selectLayout">
                  <div class="selectLayout-item item01" :class="{active:grid.layout.join(',')=='12,6,6'}" @click="setLayout([12,6,6])">
@@ -66,9 +67,9 @@
            </el-header>
            <el-main class="nopadding">
               <div class="widgets-list">
                  <div v-if="myCompsList.length<=0" class="widgets-list-nodata">
                  <!-- <div v-if="myCompsList.length<=0" class="widgets-list-nodata">
                     <el-empty description="没有部件啦" :image-size="60"></el-empty>
                  </div>
                  </div> -->
                  <div v-for="item in myCompsList" :key="item.title" class="widgets-list-item">
                     <div class="item-logo"><el-icon><component :is="item.icon" /></el-icon></div>
                     <div class="item-info">
@@ -92,6 +93,7 @@
<script>
   import draggable from 'vuedraggable'
   import allComps from './components'
import { arrow } from '@popperjs/core';
   export default {
      components: {
@@ -134,7 +136,6 @@
            return allCompsList
         },
         myCompsList(){
            alert(1)
            var copmsList = [];
            if(this.defaultGrid.copmsList == undefined) return [];
            this.defaultGrid.copmsList.forEach(item=> {
@@ -142,7 +143,8 @@
            })
            var myGrid = copmsList;
            this.$TOOL.data.set("DASHBOARDGRID", copmsList);
            return this.allCompsList.filter(item => !item.disabled && myGrid.includes(item.key))
            //return this.allCompsList.filter(item => !item.disabled && myGrid.includes(item.key))
            return this.allCompsList;
         },
         nowCompsList(){
            var copmsList = [];
@@ -182,7 +184,7 @@
                     }  
                     // 如果 xcoordinate 也相同,则不交换位置  
                     return 0;  
                  });
                  });
                  cards.forEach((item,index)=> {
                     this.$CONFIG.DEFAULT_GRID.copmsList[index] = [item.cardKey];
                     this.$CONFIG.DEFAULT_GRID.layout[index] = item.cardWide * 2;
@@ -219,19 +221,31 @@
         },
         //隐藏组件
         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(){
            this.customizing = false
            this.$refs.widgets.style.removeProperty('transform')
            this.$TOOL.data.set("grid", this.grid)
            //保存接口
            var copmsList = this.grid.copmsList;
            var flattened = copmsList.reduce((acc, val) => acc.concat(val), []); //扁平化
            var data = this.grid.data.filter(item=>flattened.includes(item.cardKey));
            var obj = {
               workbenchCardAddVOList: data,
               workbenchId: this.workid
            }
            this.$HTTP.post(`/api/blade-system/workbench-card/create-workbench-card`,obj).then(res=> {
               if(res.code == 200) {
                  this.$message.success("操作成功");
               }
            })
            console.log(this.grid,111)
         },
         //恢复默认
         backDefaul(){
@@ -242,8 +256,9 @@
         },
         //关闭
         close(){
            this.customizing = false
            this.$refs.widgets.style.removeProperty('transform')
            //this.customizing = false
            //this.$refs.widgets.style.removeProperty('transform')
            this.backDefaul();
         }
      }
   }