沙盘图修改-1

src/views/sandbox_manage/index_new_version.vue

@@ -41,7 +41,7 @@
         共{{total}}个逻辑图
       </div>
       <div class="pictures-box" ref="pictureListRef" @scroll="loadMoreSandbox">
-        <el-col :span="6" style="margin-bottom:20px;padding-right: 20px;"
+        <el-col :span="6" style="margin-bottom:20px;padding-right: 20px;min-width: 255px;"
         v-for="picture in pictureList" :key="picture.SandboxId">
           <div class="pictures-item">
             <div class="pictures-item-header">
@@ -248,15 +248,15 @@ import { myGraph } from './common/gragh';
         onlyClassifyTreeData:[],
         setting:{
           data:{
+            keep:{
+              leaf:true,
+              parent:true
+            },
             key:{
               name:"SandboxClassifyName",
               children:"Children",
               isParent:"isCatalogue"
             },
-            // simpleData:{
-            //   idKey:"SandboxClassifyId",
-            //   pIdKey:"ParentId"
-            // }
           },
           view:{
             showLine:false,
@@ -272,7 +272,7 @@ import { myGraph } from './common/gragh';
             showRenameBtn:false,
             drag:{
               isCopy:false,
-              isMove:false,
+              isMove:true,
             }
           },
           callback:{
@@ -356,7 +356,7 @@ import { myGraph } from './common/gragh';
       this.getSandboxClassify()
       this.getSandboxClassifyOnly()
       this.getSandboxList()
-      this.setting.async={
+      // this.setting.async={
         // enable:false,
         // type:'head'
       //   url:(()=>{
@@ -380,7 +380,7 @@ import { myGraph } from './common/gragh';
       //     Uuid:localStorage.getItem("uuid") || "",
       //     AccessToken:localStorage.getItem("uuid")+"--zheshiyigename",
       //   }
-      }
+      // }
     },
     mounted(){
       this.init()
@@ -408,7 +408,8 @@ import { myGraph } from './common/gragh';
         })
       },
       // 获取沙盘图分类
-      getSandboxClassify(parentNode) {
+      getSandboxClassify(parentNode,locationNode) {
+        console.log(parentNode,locationNode,'parentNode,locationNode');
         const sandboxClassifyId = parentNode ? parentNode.SandboxClassifyId:0
         sandInterface.getSandboxClassify({SandboxClassifyId:sandboxClassifyId,IsShowMe:this.searchParams.IsShowMe}).then(res=>{
           console.log(res);
@@ -422,6 +423,30 @@ import { myGraph } from './common/gragh';
             }else{
               this.treeData = nodesData
             }
+            if(locationNode){
+              let searchNode
+              let locationId = locationNode.isCatalogue?locationNode.SandboxClassifyId:locationNode.SandboxId
+              if(parentNode){
+                if(locationNode.isCatalogue){
+                  searchNode=this.zTreeObj.getNodesByParam('SandboxClassifyId',+locationId,parentNode)
+                }else{
+                  searchNode=this.zTreeObj.getNodesByParam('SandboxId',+locationId,parentNode)
+                }
+                console.log(searchNode,'searchNode');
+                if(!(searchNode && searchNode.length>0)) return 
+                this.zTreeClick(null,'',searchNode[0],1)
+                this.zTreeObj.selectNode(searchNode[0])
+              }else{
+                requestAnimationFrame(()=>{
+                  searchNode=this.zTreeObj.getNodesByParam('SandboxClassifyId',+locationId)
+                  console.log(searchNode,'searchNode');
+                  if(!(searchNode && searchNode.length>0)) return 
+                  this.zTreeClick(null,'',searchNode[0],1)
+                  this.zTreeObj.selectNode(searchNode[0])
+                })
+              }
+
+            }
           }
         })
       },
@@ -464,32 +489,34 @@ import { myGraph } from './common/gragh';
         this.selectClassifyShow = false
       },
       zTreeDragBefore(treeId,treeNodes){
-        return !this.permissionBtn.isShowBtn('sandboxPermission','sandbox:classify:move')
+        return this.permissionBtn.isShowBtn('sandboxPermission','sandbox_classify_move')
       },
       zTreeDropBefore(treeId,treeNodes,targetNode,moveType,isCopy){
-        // console.log(treeId,treeNodes,targetNode,moveType,isCopy,'treeId,treeNodes,targetNode,moveType,isCop');
-        // console.log(!treeNodes[0].isCatalogue,targetNode.Level,moveType);
+        console.log(treeId,treeNodes,targetNode,moveType,isCopy,'zTreeDropBefore');
+        if((!targetNode) && (!moveType)) return false
         if(((!treeNodes[0].isCatalogue) && targetNode.Level==1 && moveType!='inner')||
         ((!targetNode.isCatalogue) && moveType=='inner')||
         (treeNodes[0].isCatalogue && targetNode.Level==5 && moveType=='inner')){
           return false
         }
+
         // 接口失败后的还原
-        this.movingRecoveData.treeNode=treeNodes[0]
-        if(treeNodes[0].getPreNode()){
-          this.movingRecoveData.targetNode = treeNodes[0].getPreNode()
-          this.movingRecoveData.moveType = "next"
-        }else if(treeNodes[0].getNextNode()){
-          this.movingRecoveData.targetNode = treeNodes[0].getNextNode()
-          this.movingRecoveData.moveType = "prev"
-        }else if(treeNodes[0].getParentNode()){
-          this.movingRecoveData.targetNode = treeNodes[0].getParentNode()
-          this.movingRecoveData.moveType = "inner"
-        }
+        // this.movingRecoveData.treeNode=treeNodes[0]
+        // if(treeNodes[0].getPreNode()){
+        //   this.movingRecoveData.targetNode = treeNodes[0].getPreNode()
+        //   this.movingRecoveData.moveType = "next"
+        // }else if(treeNodes[0].getNextNode()){
+        //   this.movingRecoveData.targetNode = treeNodes[0].getNextNode()
+        //   this.movingRecoveData.moveType = "prev"
+        // }else if(treeNodes[0].getParentNode()){
+        //   this.movingRecoveData.targetNode = treeNodes[0].getParentNode()
+        //   this.movingRecoveData.moveType = "inner"
+        // }
       },
       zTreeDrop(e,treeId,treeNodes,targetNode,moveType,isCopy){
-        console.log(treeId,treeNodes,targetNode,moveType,isCopy,'treeId,treeNodes,targetNode,moveType,isCop');
+        console.log(treeId,treeNodes[0],targetNode,moveType,isCopy,'zTreeDrop');
         if((!targetNode) && (!moveType)) return
+        console.log(treeNodes[0].getParentNode(),targetNode.getParentNode());
         let parentNode = treeNodes[0].getParentNode()
         let prevNode = treeNodes[0].getPreNode()
         let nextNode = treeNodes[0].getNextNode()
@@ -503,17 +530,40 @@ import { myGraph } from './common/gragh';
           PrevType:prevNode?(prevNode.isCatalogue?1:2):0,
           NextType:nextNode?(nextNode.isCatalogue?1:2):0
         }
-        console.log(params);
         sandInterface.sandboxClassifyMove(params).then(res=>{
           if(res.Ret == 200){
             this.$message.success('移动分类成功')
-          }else{
-            let result=this.zTreeObj.moveNode(this.movingRecoveData.targetNode,this.movingRecoveData.treeNode,this.movingRecoveData.moveType)
-            if(!result){
-              window.location.reload()
+            if(parentNode){
+              this.zTreeObj.removeChildNodes(parentNode)
             }
+            this.getSandboxClassify(parentNode,treeNodes[0])
           }
         })
+        // if((!targetNode) && (!moveType)) return
+        // let parentNode = treeNodes[0].getParentNode()
+        // let prevNode = treeNodes[0].getPreNode()
+        // let nextNode = treeNodes[0].getNextNode()
+        // //移动分类
+        // let params={
+        //   ClassifyId:treeNodes[0].SandboxClassifyId,
+        //   SandboxId:treeNodes[0].isCatalogue?0:treeNodes[0].SandboxId,
+        //   ParentClassifyId:parentNode?parentNode.SandboxClassifyId:0,
+        //   PrevId:prevNode? (prevNode.isCatalogue?prevNode.SandboxClassifyId:prevNode.SandboxId) :0,
+        //   NextId:nextNode? (nextNode.isCatalogue?nextNode.SandboxClassifyId:nextNode.SandboxId) :0,
+        //   PrevType:prevNode?(prevNode.isCatalogue?1:2):0,
+        //   NextType:nextNode?(nextNode.isCatalogue?1:2):0
+        // }
+        // console.log(params);
+        // sandInterface.sandboxClassifyMove(params).then(res=>{
+        //   if(res.Ret == 200){
+        //     this.$message.success('移动分类成功')
+        //   }else{
+        //     // let result=this.zTreeObj.moveNode(this.movingRecoveData.targetNode,this.movingRecoveData.treeNode,this.movingRecoveData.moveType)
+        //     // if(!result){
+        //     //   window.location.reload()
+        //     // }
+        //   }
+        // })
       },
       zTreeExpandBefore(treeId, treeNode){
         // console.log( treeId, treeNode);
@@ -751,29 +801,10 @@ import { myGraph } from './common/gragh';
                     this.getSandboxClassify()
                   }else{
                     let curNode = this.zTreeObj.getNodeByTId(this.addClassifyNodeTid)
-                    console.log(curNode);
-                    // sandInterface.getSandboxClassify({SandboxClassifyId:curNode.SandboxClassifyId,IsShowMe:this.searchParams.IsShowMe}).then(res=>{
-                    //   console.log(res);
-                    //   if (res.Ret === 200) {
-                    //     let nodesData=res.Data.AllNodes || []
-                    //     nodesData.map(item =>{
-                    //       item.isCatalogue = item.SandboxId?false:true
-                    //     })
-                        curNode.Children = []
-                        console.log(curNode,'');
-                        this.zTreeObj.reAsyncChildNodes(curNode,'refresh',false)
-                        this.$nextTick(()=>{
-                          // this.zTreeObj.expandNode(curNode,false,false,false,true)
-                          this.zTreeObj.expandNode(curNode,true,false,false,true)
-                        })
-      
-
-                        // if(parentNode){
-                        //   this.zTreeObj.addNodes(parentNode,nodesData)
-                        // }else{
-                        //   this.treeData = nodesData
-                        // }
-                    //   }
+                    // console.log(curNode,'');
+                    this.zTreeObj.removeChildNodes(curNode)
+                    // this.$nextTick(()=>{
+                      this.zTreeObj.expandNode(curNode,true,false,false,true)
                     // })
                   }
                 }
@@ -855,11 +886,10 @@ import { myGraph } from './common/gragh';
         }
         this.locationActiveNode=beActiveNode
         // 选中
-        setTimeout(()=>{
+        requestAnimationFrame(()=>{
           this.zTreeObj.selectNode(beActiveNode)
           this.activeNode = beActiveNode
-          // console.log('beActiveNode,false,false')
-        },250)
+        })
       },
       expandNodeAsync(parentNode,activeId,isLast=false){
         return new Promise((resolve,reject)=>{
@@ -973,8 +1003,8 @@ import { myGraph } from './common/gragh';
           //目录添加自定义按钮
           let dom = $('#custom-button-zone')[0].cloneNode(true)
           let addClassifyDom = $(dom).find('.add-classify-img')[0]
-          let editClassifyDom = $(dom).find('.add-classify-img')[0]
-          let delClassifyDom = $(dom).find('.add-classify-img')[0]
+          let editClassifyDom = $(dom).find('.edit-classify-img')[0]
+          let delClassifyDom = $(dom).find('.delete-classify-img')[0]
           if(treeNode.Level>4){
             addClassifyDom && (addClassifyDom.style.display='none')
           }else{
@@ -1256,7 +1286,6 @@ import { myGraph } from './common/gragh';
               this.popoverTimeout=null
             },500)
           }
-
         })
 		  },
       foldLink(){
@@ -1611,7 +1640,7 @@ import { myGraph } from './common/gragh';
   position: absolute;
 	z-index: 10000!important;
   &::after{
-    content: url('../../assets/img/document_m/arrow-fold.png');
+    content: url('../../assets/img/sand_new/tools/arrow-end.png');
   }
 }
 .el-cascader{

src/views/sandbox_manage/sandFlowNew/index.vue

@@ -97,6 +97,8 @@
             <img src="~@/assets/img/sand_new/eye-show-black.png" />
             <span>链接展示</span>
           </div> -->
+          <!-- <el-button size="large" type="primary" @click="backList" style="margin-right: 20px;min-width: 120px;"
+          v-if="$route.query.SandboxId">返回</el-button> -->
           <el-button size="large" type="primary" plain @click="copySandHandle" style="margin-right: 20px;min-width: 120px;"
           v-permission="permissionBtn.sandboxPermission.sandbox_addMy">复制图片</el-button>
           <el-button type="primary" size="large" @click="saveChart(null)" style="min-width: 120px;" v-permission="permissionBtn.sandboxPermission.sandbox_saveView">保存</el-button>
@@ -1191,19 +1193,13 @@ import { svgToBase64 } from '@/utils/svgToblob'
             select_cell.data.linkFold=true
           }
         }
-        // let position = select_cell.position()
-        // let size = select_cell.size()
-        // const source = this.graph.addNode({
-        //   x: position.x+size.width/2,
-        //   y: position.y,
-        //   shape: 'link-popover'
-        // })
-        // console.log(source,'sourcesource');
-        // select_cell.addChild(source)
-        // console.log(select_cell);
         this.$message.success("链接保存成功")
         this.addLinkShow=false
       },
+      // backList(){
+      //   // this.sandSaveParams.SandboxId this.sandSaveParams.Name
+      //   this.$router.push({path:"/sandlist",query:{SandboxName:'阿巴阿巴A1',SandboxId:142}})
+      // },
       copySandHandle: _.debounce(function() {
         const { cells } = this.graph.toJSON();
         if(!cells.length) return this.$message.warning('当前画布无可复制内容');