bug fix

src/routes/modules/chartRoutes.js

@@ -78,6 +78,12 @@ export default [
 				component: () => import('@/views/chartFrame_manage/index.vue'),
 				hidden: false,
 			},
+			{
+				path: 'addframe',
+				name: '添加框架',
+				component: () => import('@/views/chartFrame_manage/frameEditor.vue'),
+				hidden: false,
+			},
 			{
 				path: 'editframe',
 				name: '编辑框架',

src/views/chartFrame_manage/common/event.js

@@ -11,7 +11,8 @@ export const myEvents = (graph,tempThis=null)=>{
     })
 
     graph.on('node:click',({node,e})=>{
-        if(window.location.pathname.startsWith('/editframe')) return 
+        if(!window.location.pathname.startsWith('/chartframe')) return 
+        console.log('node.data',node.data)
         if(node.data&&node.data.id){
             tempThis&&tempThis.$emit('showDialog',node.data)
         }

src/views/chartFrame_manage/common/graph.js

@@ -21,7 +21,7 @@ const viewConfig = {
     clipboard: false,
 }
 export function myGraph(wrapper,tempThis) {
-    const otherConfig = window.location.pathname.startsWith('/editframe')?{}:viewConfig
+    const otherConfig = window.location.pathname.startsWith('/chartframe')?viewConfig:{}
     const graph = new Graph({...{
         container: document.getElementById(wrapper),
         background: {

src/views/chartFrame_manage/components/frameContainer.vue

@@ -2,7 +2,7 @@
     <!-- 沙盘图区域 -->
     <div class="frame-container-wrap">
         <!-- 工具栏 -->
-        <FrameToolBar v-if="$route.path==='/editframe'&&graph"
+        <FrameToolBar v-if="$route.path!=='/chartframe'&&graph"
             :is-select-edge="isSelectEdge"
             :is-select-node="isSelectNode"
             :canUndo="canUndo"
@@ -23,10 +23,9 @@
             </el-dropdown-menu>
         </div>
         <!-- 内容空提示 -->
-        <div class="empty" v-if="!FrameworkContent.length&&$route.path!=='/editframe'">
+        <div class="empty" v-if="!FrameworkContent.length&&$route.path==='/chartframe'">
             <tableNoData text="框架内无节点"/>
         </div>
-        <!-- 操作提示 -->
     </div>
 </template>
 
@@ -94,9 +93,9 @@ export default {
             //如果有内容,将画布内容居中
             this.FrameworkContent.length&&this.graph.scrollToContent({ animation: { duration: 600 }})
             //如果是非编辑页,加载完成画布内容后冻结画布
-            !window.location.pathname.startsWith('/editframe')&&this.graph.freeze()
-            //如果是编辑页，加载完成后清楚历史数据
-            window.location.pathname.startsWith('/editframe')&&this.graph.cleanHistory()
+            window.location.pathname.startsWith('/chartframe')&&this.graph.freeze()
+            //如果是编辑页，加载完成后清除历史数据
+            !window.location.pathname.startsWith('/chartframe')&&this.graph.cleanHistory()
         },
         dispose(){
             this.graph&&this.graph.dispose()
@@ -107,20 +106,21 @@ export default {
             const nodes = this.graph.getNodes()
             const currentNode = nodes.find(item=>item.id===node.nodeId)
             if(currentNode){
-                currentNode.data.id=node.nodeLink
+                currentNode.data.id=node.nodeLink.MyChartClassifyId
                 currentNode.label=node.nodeName
+                currentNode.data.nodeLink = node.nodeLink
             }else{
                 //在视口范围内添加节点
                 this.graph.addNode({
                     ...baseNode,
                     ...{
-                    x:position.x+position.width/2,
-                    y:position.y+position.height/2,
+                    x:position.x+position.width/2+20,
+                    y:position.y+position.height/2+20,
                     width:120,
                     height:50,
                     data:{
-                        id:node.nodeLink.id,//存储节点对应的myETA分类id
-                        userId:node.nodeLink.userId
+                        id:node.nodeLink.MyChartClassifyId,//存储节点对应的myETA分类id
+                        nodeLink:node.nodeLink
                     },
                     label:node.nodeName||''
                 }})
@@ -136,7 +136,7 @@ export default {
                 this.$emit('editNode',{
                         nodeId:node.id,
                         nodeName:node.label,
-                        nodeLink:{id:node.data.id,userId:node.data.userId}
+                        nodeLink:node.data.nodeLink
                     })
             }
             if(key==='del'){

src/views/chartFrame_manage/components/frameToolBar.vue

@@ -124,7 +124,8 @@
             <ToolItem tooltip="边框样式" toolkey="stokeWidth">
                 <el-dropdown @command="changeCellStyle" trigger="click" class="tool-item">
                     <span class="el-dropdown-link tool-item"> 
-                        <img :src="require(`@/assets/icons/chartFrame/stokeStyle.svg`)">
+                        <img :src="require(`@/assets/icons/chartFrame/stokeStyle.svg`)"
+                            :class="{'img-disabled':!isSelectNode&&!isSelectEdge,'actived':isSelectNode||isSelectEdge}">
                         <i class="el-icon-caret-bottom"></i>
                     </span>
                     <el-dropdown-menu slot="dropdown">

src/views/chartFrame_manage/css/basePage.scss

@@ -88,11 +88,14 @@
         .list{
             display: flex;
             flex-wrap: wrap;
+            gap:20px;
             .item-title{
                 padding-bottom: 10px;
             }
             .list-item{
-                width:300px;
+                width: 22%;
+                min-width:270px;
+               /*  max-width:300px; */
                 padding:10px;
                 background-color: #fff;
                 cursor: pointer;

src/views/chartFrame_manage/frameEditor.vue

@@ -37,11 +37,11 @@
                         <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="classifyId" placeholder="请选择节点链接" style="width:217px;">
+                        <el-select v-model="modifyNode.nodeLink" value-key="MyChartClassifyId" placeholder="请选择节点链接" style="width:217px;">
                             <el-option v-for="item in myList" 
                                 :key="item.MyChartClassifyId"
                                 :label="item.MyChartClassifyName"
-                                :value="{id:item.MyChartClassifyId,userId:item.AdminId}">
+                                :value="item">
                                 <span style="float:left;">{{item.MyChartClassifyName}}</span>
                                 <span style="float:right;color: #8492a6; font-size: 13px"
                                 @click="goToList(item)"><img src="~@/assets/img/chart_m/check.png"></span>
@@ -51,7 +51,7 @@
                 </el-form>
             </div>
             <div class="dialog-footer">
-                <el-button>取消</el-button>
+                <el-button @click="isModifyNodeDialogShow=false">取消</el-button>
                 <el-button type="primary" @click="editNode">确定</el-button>
             </div>
 
@@ -91,11 +91,11 @@ export default {
             await this.$refs.refForm.validate();
             if(!this.$refs.container) return
             this.$refs.container.editNode(this.modifyNode)
-            this.$message.success(`${this.modifyNode.nodeId ? '编辑' : '添加'}成功`);
+            this.$message.success(`${this.modifyNode.nodeId ? '编辑' : '添加'}节点成功`);
             this.isModifyNodeDialogShow = false;
         },
         goToList(item) {
-            window.open(`/mychart?frameId=${item.classifyId}`);
+            window.open(`/mychart?frameId=${item.MyChartClassifyId}`);
         },
         async saveFrame(){
             if(!this.frameDetail.FrameworkName.length){
@@ -108,7 +108,7 @@ export default {
             this.lockLoding = this.$loading({
                 lock: true,
                 text: '保存中...',
-                target: '.frame-container-wrap',
+                target: '.frame-editor-wrap',
                 spinner: 'el-icon-loading',
                 background: 'rgba(255, 255, 255, 0.8)'
             });
@@ -130,9 +130,10 @@ export default {
             this.frameDetail.FrameworkContent = JSON.stringify(this.$refs.container.graph.toJSON())
             if(this.frameId){
                 //edit
-                chartFrameInterface.editFrame({...this.frameDetail,...{ChartFrameworkId:this.frameId}}).then(res=>{
+                chartFrameInterface.editFrame({...this.frameDetail,...{ChartFrameworkId:Number(this.frameId)}}).then(res=>{
                     if(res.Ret!==200) return 
                     this.$message.success("编辑成功")
+                    this.lockLoding.close();
                 })
             }else{
                 //add 
@@ -141,9 +142,10 @@ export default {
                     this.frameId = res.Data?res.Data.ChartFrameworkId:0
                     this.frameDetail = res.Data||{FrameworkName:'',FrameworkContent:''}
                     this.$message.success("新增成功")
+                    this.lockLoding.close();
+                    this.$router.replace({path:'/editframe',query:{frameId:this.frameId}})
                 })
             }
-            this.lockLoding.close();
         },
         getMyList(){
             mychartInterface.classifyList().then((res)=>{

src/views/chartFrame_manage/index.vue

@@ -10,7 +10,7 @@
             </span>
             <span class="move-btn resize" v-drag id="resize"></span>
             <div class="btn-wrap">
-                <el-button type="primary" @click="$router.push('/editframe')" 
+                <el-button type="primary" @click="$router.push('/addframe')" 
                 v-permission="permissionBtn.chartFramePermission.chartframe_my_editFrame">添加框架</el-button>
             </div>
             <div class="search-wrap">
@@ -136,7 +136,7 @@
                         </div>
                         <div style="height:1px;background:#ECECEC;margin:0 -10px;"></div>
                         <div class="item-image" 
-                            :style="`background-image:url(${item.CoverImg?item.CoverImg:require('@/assets/img/document_m/default-img.png')})`"></div>
+                            :style="`background-image:url(${item.FrameworkImg?item.FrameworkImg:require('@/assets/img/document_m/default-img.png')})`"></div>
                         <div style="height:1px;background:#ECECEC;margin:10px -10px;"></div>
                         <div class="item-time">
                             创建时间:{{item.CreateTime}}
@@ -514,7 +514,7 @@ export default {
             
         },
         //点击框架内节点
-        handleShowDialog({id,userId}){
+        handleShowDialog({id,nodeLink}){
             //请求接口看有没有数据
             mychartInterface.myList({
                 PageSize:1200,
@@ -525,7 +525,7 @@ export default {
                 if(res.Data&&res.Data.List){
                     if(res.Data.List.length){
                         this.chartClassify = id
-                        this.classifyUserId = userId||0
+                        this.classifyUserId = nodeLink.AdminId||0
                         this.chartCode = res.Data.List[0].UniqueCode
                         this.chartArr = res.Data.List.map(item => item.UniqueCode)
                         this.myETADetailDialogShow = true