不选择图分类的节点样式,两种节点切换

src/views/chartFrame_manage/common/config.js

@@ -99,13 +99,13 @@ export const baseNode2 = {
             }
         },
         body:{
-            fill:'#FFF',//背景色
-            stroke:'#0052D9',//边框色
+            fill:'#FFF1E9',//背景色
+            stroke:'#F7A340',//边框色
             strokeWidth:1,//边框宽度
             strokeDasharray:'',//虚线,如果赋值为0保存缩略图时会省略掉边框
         },
         label:{ //与svg text属性相同
-            fill:'#0052D9',//文字颜色
+            fill:'#E37318',//文字颜色
             fontSize:14,//文字大小
             fontWeight:'normal',//文字粗细
             fontStyle:'normal',//斜体

src/views/chartFrame_manage/components/frameContainer.vue

@@ -125,18 +125,31 @@ export default {
             const position = this.graph.getContentArea()
             const nodes = this.graph.getNodes()
             const currentNode = nodes.find(item=>item.id===nodeId)
+            let tempNode = currentNode
             if(currentNode){
-                currentNode.data.id=nodeLink.MyChartClassifyId||0
+                const oldId = currentNode.data.id
+                const newId = nodeLink.MyChartClassifyId||0
+                const isSetStyle = (oldId===0&&newId!==0)||(oldId!==0&&newId===0)
+                isSetStyle&&this.setNodeStyle(newId,tempNode)
+                
+                tempNode.data.id=nodeLink.MyChartClassifyId||0
+                tempNode.label=nodeName
+                tempNode.data.nodeLink = nodeLink
+                /* currentNode.data.id=nodeLink.MyChartClassifyId||0
                 currentNode.label=nodeName
                 currentNode.data.nodeLink = nodeLink
                 currentNode.removeTools()
-                if(!currentNode.data.id) return
+                const newId = currentNode.data.id
+                const isSetStyle = (oldId===0&&newId!==0)||(oldId!==0&&newId===0)
+                isSetStyle&&this.setNodeStyle(newId,currentNode)
+                if(!currentNode.data.id) return 
                 const toolOption = this.getToolOption({chartNum:nodeLink.ChartNum,color:currentNode.attrs.label.fill})
-                currentNode.addTools(toolOption)
+                currentNode.addTools(toolOption) */
             }else{
                 //在视口范围内添加节点
-                const tempNode = this.graph.addNode({
-                    ...baseNode,
+                const nodeStyle = nodeLink.MyChartClassifyId?baseNode:baseNode2
+                tempNode = this.graph.addNode({
+                    ...nodeStyle,
                     ...{
                     x:position.x+position.width/2+20,
                     y:position.y+position.height/2+20,
@@ -147,12 +160,12 @@ export default {
                         nodeLink:nodeLink,
                     },
                     label:nodeName,
-                    //tools:[this.getToolOption({chartNum:node.nodeLink.ChartNum,color:baseNode.attrs.label.fill})]
                 }})
-                if(!nodeLink.MyChartClassifyId) return 
-                const toolOption = this.getToolOption({chartNum:nodeLink.ChartNum,color:baseNode.attrs.label.fill})
-                tempNode.addTools(toolOption)
             }
+            tempNode.removeTools()
+            if(!tempNode.data.id) return 
+            const toolOption = this.getToolOption({chartNum:nodeLink.ChartNum,color:tempNode.attrs.label.fill})
+            tempNode.addTools(toolOption)
         },
         //设置节点图分类的数量
         getToolOption({chartNum,color}){
@@ -162,10 +175,20 @@ export default {
             return options
         },
         //设置有无图分类节点的样式
-        //oldType: 1有图分类,2无图分类
-        setNodeStyle(oldType){
-            //oldtype:1 表示节点从无图分类转换成有图分类,节点样式重置为baseNode
-            //oldtype:2 表示节点从有图分类转换成无图分类,节点样式重置为baseNode2
+        //type: 0 无图分类 非0 有图分类
+        //非0 表示节点从无图分类转换成有图分类,节点样式重置为baseNode
+        //0 表示节点从有图分类转换成无图分类,节点样式重置为baseNode2
+        setNodeStyle(type,node){
+            const {attrs={}} = type?baseNode:baseNode2
+            const {body,label} = attrs
+            const styleMap = {
+                'label/fill':label.fill,
+                'body/fill':body.fill,
+                'body/stroke':body.stroke
+            }
+            for(let k in styleMap){
+                node.attr(k,styleMap[k])
+            }
         },
         //点击右键菜单事件
         handleContext(key){

src/views/chartFrame_manage/frameEditor.vue

@@ -36,7 +36,7 @@
                     :rules="rules"
                 >
                     <el-form-item label="节点名称" prop="nodeName">
-                        <el-input v-model.trim="modifyNode.nodeName" placeholder="请输入节点名称" style="width:217px;"></el-input>
+                        <el-input v-model="modifyNode.nodeName" placeholder="请输入节点名称" style="width:217px;"></el-input>
                     </el-form-item>
                     <el-form-item label="节点链接" prop="nodeLink">
                         <el-select v-model="modifyNode.nodeLink" value-key="MyChartClassifyId" placeholder="请选择节点链接" clearable style="width:217px;">
@@ -96,7 +96,12 @@ export default {
         },
         //编辑节点,更改子组件节点信息,隐藏弹窗
         async editNode() {
-            await this.$refs.refForm.validate();
+            this.modifyNode.nodeName&&(this.modifyNode.nodeName = this.modifyNode.nodeName.trim())
+            try{
+                await this.$refs.refForm.validate();
+            }catch(e){
+                return
+            }
             if(!this.$refs.container) return
             this.$refs.container.editNode(this.modifyNode)
             this.$message.success(`${this.modifyNode.nodeId ? '编辑' : '添加'}节点成功`);