目录变为6级

src/api/modules/chartRelevanceApi.js

@@ -3,11 +3,22 @@ import http from "@/api/http.js"
 export default{
     /**
    * 获取分类
+   * IsShowMe 是否仅展示我的：true-是
+   * ParentId 父级ID，一级分类不传或者0即可
+   * Source 来源：3-相关性（不传默认也为这个）；4-滚动相关性
    * @returns 
    */
   classifyList:  params =>{
     return http.get('/correlation/chart_classify/list',params)
   },
+  /**
+   * 分类树
+   * @param {*} params 
+   * @returns 
+   */
+  classifyTree:params=>{
+    return http.get('/correlation/chart_classify/tree',params)
+  },
 
   /**
    * 新增分类
@@ -46,8 +57,14 @@ export default{
   },
 
   /**
-   * 移动分类
-   * @param {*} params ClassifyId "PrevClassifyId":1, "NextClassifyId":2,
+   * 移动分类or图表
+   * @param {*} params "ClassifyId": 228, //分类ID
+    "ParentClassifyId": 0, //父级分类ID
+    "PrevClassifyId": 0, //上一个兄弟节点分类ID
+    "NextClassifyId": 227, //下一个兄弟节点分类ID
+    "ChartInfoId": 0, //图表ID，如果图表ID>0则移动对象为图表，否则默认为移动分类
+    "PrevChartInfoId": 0, //上一个兄弟节点图表ID
+    "NextChartInfoId": 0 //下一个兄弟节点图表ID
    * @returns 
    */
   classifyMove: params => {

src/views/chartRelevance_manage/components/saveChartTobaseDia.vue

@@ -112,18 +112,30 @@ export default {
       if(this.chartData.Source===1) {
         res = await dataBaseInterface.chartClassify();
       }else if(['/relevancechartEditor','/relevancechartEditorV2'].includes(this.$route.path)&&this.chartData.Source!==1) {
-        res = await chartRelevanceApi.classifyList();
+        res = await chartRelevanceApi.classifyTree();
       }else if(this.$route.path==='/statisticFeatureChartEditor'&&this.chartData.Source!==1) {
         res = await statisticFeatureInterface.classifyList();
       }
 
       if(res.Ret !== 200) return
-      this.filterNodes(res.Data.AllNodes,this.chartData.Source===1?3:1)
+      if(['/relevancechartEditor','/relevancechartEditorV2'].includes(this.$route.path)&&this.chartData.Source!==1){
+        this.filterNodesAll(res.Data.AllNodes)
+      }else{
+        this.filterNodes(res.Data.AllNodes,this.chartData.Source===1?3:1)
+      }
+      
 
 			this.classifyOptions = res.Data.AllNodes || [];
     
 		},
-
+		filterNodesAll(arr){
+			arr.length && arr.forEach(item => {
+				item.Children && item.Children.length && this.filterNodesAll(item.Children)
+				if(!item.Children.length) {
+					delete item.Children
+				}
+			})
+		},
 		// 递归改变第三级目录结构
 		filterNodes(arr,n) {
 			arr.length && arr.forEach(item => {

src/views/chartRelevance_manage/mixins/classifyMixin.js

@@ -37,6 +37,14 @@ export default {
         let search_obj = this.searchOptions.find(
           (_) => _.ChartInfoId === newval
         );
+        if(this.$route.path==='/chartrelevance'){
+            if(!search_obj) return 
+            // 重置筛选状态
+            this.select_id = newval;
+            this.select_node = search_obj.UniqueCode;
+            this.select_classify = 0;
+            return 
+        }
         let deep_arr = _.cloneDeep(this.treeData);
         // 查找图表的分类父级id
 
@@ -121,8 +129,8 @@ export default {
 				width > 500
 					? 'auto'
 					: width <= 260
-					? 90
-					: 0.7 * width;
+					? 80
+					: 0.4 * width;
 			this.$set(node, 'Nodewidth', label_wid + 'px');
 		},200),
 

src/views/chartRelevance_manage/relevance/components/modifyClassifyDialog.vue

@@ -10,8 +10,8 @@
         width="560px"
         v-dialogDrag>
             <div slot="title" style="display:flex;alignItems:center;">
-                <img :src="title=='添加'?$icons.add:title=='编辑'?$icons.edit:''" style="color:#fff;width:16px;height:16px;marginRight:5px;">
-                <span style="fontSize:16px;">{{title==='添加' ? $t('Table.add_btn') : $t('Table.edit_btn')}}</span>
+                <img :src="type=='add'?$icons.add:$icons.edit" style="color:#fff;width:16px;height:16px;marginRight:5px;">
+                <span style="fontSize:16px;">{{type==='add' ? $t('Table.add_btn') : $t('Table.edit_btn')}}</span>
             </div>
             <div class="dialog-main">
                 <el-form
@@ -43,97 +43,95 @@
 </template>
 
 <script>
+import chartRelevanceApi from "@/api/modules/chartRelevanceApi.js";
 export default {
-	props: {
-		isOpenDialog: {
-			type: Boolean,
-		},
-		//标题
-		title: {
-			type: String,
-			default: '添加'
-		},
-		formData: {
-			type: Object,//{parentArr父级数据}
-		}
-	},
-	computed:{
-		getParentName(){
-			const arr=this.formData.parentArr||[]
-			let strArr=arr.reverse().map(item=>{
-				return item.classifyName
-			})
-			
-			return strArr.join('/')
-		}
-	},
-	data () {
-		return {
-			formRules: {
-				levelVal:[
-					{ required: true, message: this.$t('EtaBasePage.input_menu_msg'), trigger: 'blur' },
-				],
-				level_menu:[
-					{ required: true, message: this.$t('Edb.Valids.menu_msg'), trigger: 'blur' },
-				],
-				frequency:[
-					{ required: true, message: this.$t('Edb.Valids.fre_msg'), trigger: 'blur' },
-				],
-				unit:[
-					{ required: true, message: this.$t('Edb.Valids.unit_msg'), trigger: ['blur','change'] },
-				],
-			},
-			options:  [],
-			unitArr,
-			levelProps: {
-				label: 'ClassifyName',
-				value: 'ClassifyId',
-				children: 'Children',
-				checkStrictly: true
-			},
-			frequencyArr,
+    props: {
+        isOpenDialog: {
+            type: Boolean,
+        },
+        type:{
+            type:String,
+            default:'add'
+        },
+        formData: {
+            type: Object,//{parentArr父级数据}
+        }
+    },
+    computed:{
+        getParentName(){
+            const arr=this.formData.parentArr||['无']
+            let strArr=arr.reverse().map(item=>{
+                return item.classifyName
+            })
+            
+            return strArr.join('/')
+        }
+    },
+    data () {
+        return {
+            formRules: {
+                levelVal:[
+                    { required: true, message: this.$t('EtaBasePage.input_menu_msg'), trigger: 'blur' },
+                ],
+            },
+            options:  [],
 
-		};
-	},
-	methods: {
-		async saveHandle() {
-			await this.$refs.diaForm.validate();
-		},
-		/* 成功回调 */
-		callbackHandle(type) {
-			this.$refs.diaForm.resetFields();
-			this.$emit('sucessCallback',type)
-		},
-		/* 取消 */
-		cancelHandle() {
-			this.$refs.diaForm.resetFields();
-			this.$emit('closeDia')
-		},
-	},
-	created() {},
-	mounted() {},
+        };
+    },
+    methods: {
+        async saveHandle() {
+            await this.$refs.diaForm.validate();
+            let addParams = {
+                ChartClassifyName:this.formData.levelVal,
+                Level:this.formData.level,
+                ParentId:this.formData.parent_id,
+            }
+            let editParams = {
+                ChartClassifyName:this.formData.levelVal,
+                ChartClassifyId:this.formData.nodeId
+            }
+            const res = this.type==='add'?await chartRelevanceApi.classifyAdd(addParams):await chartRelevanceApi.classifyEdit(editParams)
+            if(res.Ret!==200) return 
+            this.$message.success(`${this.type==='add'?'新增':'编辑'}成功`)
+            this.callbackHandle()
+
+
+        },
+        /* 成功回调 */
+        callbackHandle(type) {
+            this.$refs.diaForm.resetFields();
+            this.$emit('sucessCallback',type)
+        },
+        /* 取消 */
+        cancelHandle() {
+            this.$refs.diaForm.resetFields();
+            this.$emit('closeDia')
+        },
+    },
+    created() {},
+    mounted() {},
 }
 </script>
 <style lang='scss'>
 .Dialog-box {
-	.parentStr{
-		display: block;
-		width: 304px;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-	.dialog-main {
-		padding-left: 50px;
-	}
-	.el-cascader .el-input {
-		width: 100%;
-	}
-	.dia-bot {
-		margin: 52px 0 30px;
-		display: flex;
-		justify-content: center;
+    .parentStr{
+        display: block;
+        width: 304px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .dialog-main {
+        padding-left: 50px;
+    }
+    .el-cascader .el-input {
+        width: 100%;
+    }
+    .dia-bot {
+        margin: 52px 0 30px;
+        display: flex;
+        justify-content: center;
 
-	}
-}
+    }
+    }
 </style>

src/views/chartRelevance_manage/relevance/list.vue

@@ -68,7 +68,6 @@
             :default-expanded-keys="defaultShowNodes"
             draggable
             :expand-on-click-node="false"
-            check-strictly
             empty-text="暂无分类"
             lazy
             :load="getLazyTreeData"
@@ -97,6 +96,7 @@
                 :style="`width:${
                   (select_node === data.UniqueCode && node.Nodewidth) || ''
                 }`"
+                :id="`node${data.UniqueCode}`"
               >
                 <span>{{ currentLang==='en' ? (data.ChartClassifyNameEn||data.ChartClassifyName) : data.ChartClassifyName  }}</span>
               </span>
@@ -295,8 +295,9 @@
     /> -->
     <modifyClassifyDialog
       :isOpenDialog.sync="classifyDia"
-      :title="dialog_title"
+      :type="classifyDiaType"
       :formData="classifyForm"
+      @sucessCallback="sucessCallback"
     />
 
     <!-- 加入我的图库弹窗 -->
@@ -388,7 +389,7 @@ export default {
       dynamicNode: null,
 
       /* 分类弹窗 */
-      dialog_title: "",
+      classifyDiaType: "add",//add or edit
       classifyDia: false, //
       classifyForm: {},
 
@@ -417,6 +418,140 @@ export default {
     };
   },
   methods: {
+    /* 判断节点是否能被拖拽 */
+    canDragHandle({data}) {
+        return data.Button.MoveButton;
+    },
+    /* 判断节点是否能被拖入 */
+    canDropHandle(draggingNode, dropNode, type) {
+        let canDrop=false
+        
+        // 如果拖动的是图表
+        if(draggingNode.data.ChartInfoId){
+            if(!(dropNode.level===1&&type!=='inner')){
+                canDrop=true
+            }
+        }else{//拖动的是目录
+            //目录层级不能改变
+            if((dropNode.level+1==draggingNode.level&&type==='inner'&&!dropNode.data.ChartInfoId)||(dropNode.level===draggingNode.level&&type!=='inner')){
+                canDrop=true
+            }
+        }
+        return canDrop
+    },
+    /* 拖拽完成 */
+    dropOverHandle(b,a,i,e) {
+        // 被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置
+        const isChart=b.data.ChartInfoId?true:false
+        let list=a.parent.childNodes;
+        let targetIndex=0
+        let ClassifyId=0,//分类ID,若当前节点为图表,则为0
+        ParentClassifyId=0,//移动后,所在位置的父级分类ID
+        PrevClassifyId=0,//前一个节点的分类ID,若前一个节点为图表,则为0
+        NextClassifyId=0,//后一个节点的分类ID,同上
+        ChartInfoId=0,//图表ID,若当前节点为分类,则为0
+        PrevChartInfoId=0,//前一个节点的图表ID,若前一个节点为分类,则为0
+        NextChartInfoId=0;//后一个节点的图表ID
+
+        ClassifyId=isChart?0:b.data.ChartClassifyId
+        ChartInfoId=isChart?b.data.ChartInfoId:0
+        
+
+        if(i!=='inner'){
+            ParentClassifyId=a.parent.data.ChartClassifyId||0
+            list.forEach((item,index)=>{
+                if(isChart){
+                    if(item.data.ChartInfoId===b.data.ChartInfoId){
+                        targetIndex=index
+                    }
+                }else{
+                    if(item.data.ChartClassifyId===b.data.ChartClassifyId){
+                        targetIndex=index
+                    }
+                }
+            })
+
+            console.log(targetIndex);
+            
+            
+            if(targetIndex===0){
+                const data=list[targetIndex+1].data
+                NextClassifyId=data.ChartInfoId?0:data.ChartClassifyId
+                NextChartInfoId=data.ChartInfoId?data.ChartInfoId:0
+            }else if(targetIndex===list.length-1){
+                const data=list[targetIndex-1].data
+                PrevClassifyId=data.ChartInfoId?0:data.ChartClassifyId
+                PrevChartInfoId=data.ChartInfoId?data.ChartInfoId:0
+            }else{
+                const pData=list[targetIndex-1].data
+                PrevClassifyId=pData.ChartInfoId?0:pData.ChartClassifyId
+                PrevChartInfoId=pData.ChartInfoId?pData.ChartInfoId:0
+
+                const nData=list[targetIndex+1].data
+                NextClassifyId=nData.ChartInfoId?0:nData.ChartClassifyId
+                NextChartInfoId=nData.ChartInfoId?nData.ChartInfoId:0
+            }
+        }else{
+            ParentClassifyId=a.data.ChartClassifyId||0
+        }
+
+        const params={
+            ClassifyId,
+            ParentClassifyId,
+            PrevClassifyId,
+            NextClassifyId,
+            ChartInfoId,
+            PrevChartInfoId,
+            NextChartInfoId
+        }
+        console.log(params);
+        chartRelevanceApi.classifyMove(params).then(res=>{
+            if(res.Ret===200){
+                // this.$message.success('移动成功!')
+                this.$message.success(this.$t('MsgPrompt.move_sort_success'))
+            }
+            this.getTreeData()
+            if(this.select_id){
+                this.getDetailHandle();
+            }
+            
+        })
+    },
+
+    /* 拖拽覆盖添加背景色 */
+    dropMouseOver(node1,node2,e) {
+        // console.log(e.layerY);
+        
+        // 被拖拽节点对应的 Node、所进入节点对应的 Node、event
+        if(!node2.data.EdbInfoId&&(node1.level>node2.level||(node1.data.EdbInfoId>0&&!node2.data.EdbInfoId)) && (e.target.childNodes[0].className.includes('el-tree-node__content') 
+        || e.target.className.includes('el-tree-node__content'))) {
+            // console.log(e.target.childNodes[0])
+            e.target.childNodes[0].className.includes('el-tree-node__content') 
+            ? e.target.childNodes[0].style.backgroundColor = '#409eff' 
+            : e.target.style.backgroundColor = '#409eff';
+        }
+        
+    },
+    /* 拖拽离开/拖拽完成重置背景色 */
+    dropMouseLeave(node1,node2,e) {
+        let arrs = $('.el-tree-node__content');
+        for( let a of arrs ) {
+            a.style.backgroundColor = 'transparent';
+        }
+    },
+    sucessCallback(type){
+        this.classifyDia = false;
+        this.getTreeData();
+        if(type === 'add') {
+            //新增分类完成之后，展开父节点显示刚新增的分类，若已展开节点则不做处理
+            let code = sessionStorage.getItem('expandCode');
+            let flag = 	this.defaultShowNodes.some((item) => {
+                return item === code
+            });
+            !flag &&code&& this.defaultShowNodes.push(code);
+            sessionStorage.removeItem('expandCode');
+        }
+    },
     // 递归节点
     getNodeParentData(data,arr){
         if(data.level===0) return
@@ -425,7 +560,7 @@ export default {
         return arr
     },
     addNode(node,data){
-        this.dialog_title = '添加';
+        this.classifyDiaType = 'add';
         let arr=[]
         arr=this.getNodeParentData(node,arr)
         /* 添加目录 */
@@ -434,6 +569,7 @@ export default {
             parent_id: data.ChartClassifyId,
             level: node.level,
             levelVal:'',
+            nodeId:'',
         }
         //存储当前要新增子级的目录code
         sessionStorage.setItem('expandCode', data.UniqueCode);
@@ -465,7 +601,7 @@ export default {
     handleShowChartDetail({ UniqueCode, ChartInfoId }){
         this.select_classify = 0;
         this.select_id = ChartInfoId;
-
+        this.select_node = UniqueCode;
     },
     /* 添加图表 */
     goAddChart() {
@@ -496,6 +632,10 @@ export default {
           this.$nextTick(() => {
             /* 新增完成后 处理树展开和选中 */
             //params && this.selectCurrentNode(params);
+            if(params){
+                this.select_node = params.code;
+                this.select_id = params.id;
+            }
           });
         });
     },
@@ -553,29 +693,33 @@ export default {
       this.search_txt = "";
       this.select_node = UniqueCode;
       this.select_classify = !ChartInfoId ? ChartClassifyId : 0;
-      // if(this.select_id !== ChartInfoId) {
       this.select_id = ChartInfoId || 0;
-      // }
       this.resetNodeStyle(node);
       this.dynamicNode = node;
     },
 
     /* 添加一级目录 */
     addLevelOneHandle() {
-      this.dialog_title = this.$t('StatisticAnalysis.ChartRelevance.add_chart_classify')||"添加图表分类";
-      this.classifyForm = {
-        classify_name: "",
-      };
-      this.classifyDia = true;
+        this.classifyDiaType = 'add';
+        this.classifyForm = {
+            parent_id: 0,
+            level: 0,
+            levelVal:'',
+        };
+        this.classifyDia = true;
     },
 
     /* 编辑节点 */
     editNode(node, { ChartClassifyName,ChartClassifyNameEn, ChartClassifyId }) {
-      this.dialog_title = this.$t('StatisticAnalysis.ChartRelevance.edit_chart_classify')||"编辑图表分类";
+      this.classifyDiaType = 'edit'
+      let arr=[]
+      arr=this.getNodeParentData(node.parent,arr)
       /* 编辑目录 */
       this.classifyForm = {
-        classify_name: this.currentLang==='en'?ChartClassifyNameEn:ChartClassifyName,
-        classify_id: ChartClassifyId,
+        parentArr:arr,
+        level:node.level,
+        levelVal: this.currentLang==='en'?ChartClassifyNameEn:ChartClassifyName,
+        nodeId: ChartClassifyId,
       };
       this.classifyDia = true;
     },
@@ -700,9 +844,14 @@ export default {
         })
         .then((res) => {
           if (res.Ret !== 200) return;
-
           this.chartInfo = res.Data.ChartInfo;
           this.tableData = res.Data.EdbInfoList;
+          this.defaultShowNodes = res.Data.ClassifyLevels||[];
+          this.$nextTick(()=>{
+            setTimeout(() => {
+                this.$refs.treeRef.setCurrentKey(this.select_node);
+            }, 1200);
+          })
           if(this.chartInfo.Source === 3) {
             this.relevanceChartData = {
               ChartInfo: res.Data.ChartInfo,
@@ -729,7 +878,25 @@ export default {
             }
             this.setDefaultChart([res.Data.DataResp]);
           }
-          
+          this.$nextTick(()=>{
+                const _node = this.$refs.treeRef.getNode(this.select_node)
+                this.dynamicNode = _node;
+                this.dynamicNode&&this.resetNodeStyle(this.dynamicNode)
+                setTimeout(() => {
+                    let node = document.getElementById(`node${this.select_node}`)||{}
+                    let parent = document.getElementsByClassName('tree-cont')[0];
+                    //parent可视区间：[scrollTop,scrollTop+offsetHeight]
+                    //node位置:node.offsetTop
+                    const overTop = node.offsetTop+node.clientHeight+30<parent.scrollTop
+                    const overBottom = node.offsetTop+node.clientHeight+30>parent.scrollTop+parent.offsetHeight
+                    if(overTop){
+                        parent.scrollTop = node.offsetTop-60
+                    }
+                    if(overBottom){
+                        parent.scrollTop =  node.offsetTop - parent.offsetHeight/2
+                    }
+                },1500)
+            })
         });
     },
 

src/views/chartRelevance_manage/relevance/relevanceChartEditorV2.vue

@@ -757,7 +757,7 @@ export default {
             }
             this.$message.success(`${isEdit?'更新':'保存'}成功`)
             //设置缩略图
-            this.$refs[`chartCard`+2].setChartImage(2,ChartInfoId)
+            this.$refs[`chartCard`+2].setChartImage(2,res.Data.ChartInfoId)
             this.isSaveChartToBase = false
         },
     },

src/views/dataEntry_manage/components/SaveChartOther.vue

@@ -109,7 +109,7 @@ export default {
       if([2,5,'good_price'].includes(this.source)){//商品价格
         res=await futuresInterface.classifyList()
       }else if([3,4,'relevance_chart'].includes(this.source)){//相关性图表
-        res=await chartRelevanceApi.classifyList()
+        res=await chartRelevanceApi.classifyTree()
       }else if([6,'fitting_equation'].includes(this.source)){//拟合方程
         res=await fittingEquationInterface.classifyList()
       }else if([7,8,9,'statistic_feature'].includes(this.source)) { //标准差 百分位 频率图
@@ -125,7 +125,7 @@ export default {
       if([2,5,'good_price'].includes(this.source)){//商品价格
         this.filterNodes(res.Data.AllNodes,1)
       }else if([3,4,'relevance_chart'].includes(this.source)){//相关性图表
-        this.filterNodes(res.Data.AllNodes,1)
+        this.filterNodesAll(res.Data.AllNodes)
       }else if([6,'fitting_equation'].includes(this.source)){//拟合方程
         this.filterNodes(res.Data.AllNodes,1)
       }else if([7,8,9,'statistic_feature'].includes(this.source)) { //标准差 百分位 频率图
@@ -139,7 +139,14 @@ export default {
 			this.classifyOptions = res.Data.AllNodes || [];
     
 		},
-
+		filterNodesAll(arr){
+			arr.length && arr.forEach(item => {
+				item.Children && item.Children.length && this.filterNodesAll(item.Children)
+				if(!item.Children.length) {
+					delete item.Children
+				}
+			})
+		},
 		// 递归改变第三级目录结构
 		filterNodes(arr,n) {
 			arr.length && arr.forEach(item => {