节点data增加属性,图表移出,复制到

src/views/chartFrame_manage/components/frameContainer.vue

@@ -44,25 +44,33 @@ export default {
             //需要调用vue实例的事件添加在这里
             this.graph.on('node:click',({node,e})=>{
                 if(window.location.pathname.startsWith('/editframe')) return 
-                if(node.data&&node.data.myETAId){
-                    tempThis.$emit('showDialog',node.data.myETAId)
+                if(node.data&&node.data.id){
+                    tempThis.$emit('showDialog',node.data)
                 }
             })
             //mock
             this.graph.addNode({
                 ...baseNode,
                 ...{
-                    data:{myETAId:653},
+                    data:{id:653,userId:218},
                     label:'text'
                 }})
-                this.graph.addNode({
+            this.graph.addNode({
                 ...baseNode,
                 ...{
                     x:200,
                     y:200,
-                    data:{myETAId:652},
+                    data:{id:652,userId:218},
                     label:'text2'
-                }})
+            }})
+            this.graph.addNode({
+                ...baseNode,
+                ...{
+                    x:400,
+                    y:200,
+                    data:{id:370,userId:204},
+                    label:'别人的框架测试'
+            }})
             //如果有内容
             this.graph.scrollToContent({ animation: { duration: 600 }})
             //如果是非编辑页,加载完成画布内容后冻结画布
@@ -74,7 +82,7 @@ export default {
             const nodes = this.graph.getNodes()
             const currentNode = nodes.find(item=>item.id===node.nodeId)
             if(currentNode){
-                currentNode.data.myETAId=node.nodeLink
+                currentNode.data.id=node.nodeLink
                 currentNode.label=node.nodeName
             }else{
                 //在视口范围内添加节点
@@ -86,7 +94,8 @@ export default {
                     width:120,
                     height:50,
                     data:{
-                        myETAId:node.nodeLink,//存储节点对应的myETA分类id
+                        id:node.nodeLink.id,//存储节点对应的myETA分类id
+                        userId:node.nodeLink.userId
                     },
                     label:node.nodeName||''
                 }})
@@ -102,7 +111,7 @@ export default {
                 this.$emit('editNode',{
                         nodeId:node.id,
                         nodeName:node.label,
-                        nodeLink:node.data.myETAId
+                        nodeLink:{id:node.data.id,userId:node.data.userId}
                     })
             }
             if(key==='del'){

src/views/chartFrame_manage/frameEditor.vue

@@ -36,11 +36,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" placeholder="请选择节点链接" style="width:217px;">
+                        <el-select v-model="modifyNode.nodeLink" value-key="classifyId" placeholder="请选择节点链接" style="width:217px;">
                             <el-option v-for="item in mockMyList" 
                                 :key="item.classifyId"
                                 :label="item.name"
-                                :value="item.classifyId">
+                                :value="{id:item.classifyId,userId:item.adminId}">
                                 <span style="float:left;">{{item.name}}</span>
                                 <span style="float:right;color: #8492a6; font-size: 13px"
                                 @click="goToList(item)"><i class="el-icon-view"></i></span>
@@ -74,11 +74,18 @@ export default {
             mockMyList: [
                 {
                     classifyId: 652,
+                    adminId:218,
                     name: '框架1'
                 },
                 {
                     classifyId: 651,
+                    adminId:218,
                     name: '框架2'
+                },
+                {
+                    classifyId:370,
+                    adminId:204,
+                    name:'别人的框架'
                 }
             ]
         };

src/views/chartFrame_manage/index.vue

@@ -189,9 +189,43 @@
             :select_classify="chartClassify"
             :chart_code="chartCode"
             :allChart="chartArr"
-            :classifyUserId="roleId"
+            :classifyUserId="classifyUserId"
             @close="myETADetailDialogShow=false"
+            @remove="removeChart"
         />
+        <!-- my eta图表复制到弹窗 -->
+        <el-dialog
+            title="复制到我的图库"
+            :visible.sync="isCopyDialogShow"
+            :close-on-click-modal="false"
+            :modal-append-to-body="false"
+            @close="isCopyDialogShow=false"
+            width="589px"
+            v-dialogDrag
+            center
+        >
+            <div class="dialog-container" v-loading="copyDialogLoading">
+                <div>
+                    <span style="margin-right:5px;">复制到</span>
+                    <el-select
+                        v-model="copyToClassify"
+                        placeholder="请选择目录"
+                        style="width: 80%;"
+                        multiple clearable
+                    >
+                        <el-option v-for="item in myETAClassArr"
+                            :key="item.value"
+                            :label="item.name"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </div>
+            </div>
+            <div class="dialog-footer">
+                <el-button @click="isCopyDialogShow=false">取消</el-button>
+                <el-button type="primary" @click="copyToClass">确定</el-button>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
@@ -269,17 +303,15 @@ export default {
             frameType:'my',
             myETADetailDialogShow:false,
             chartClassify:0,
+            classifyUserId:0,
             chartCode:'',
             chartArr:[],
+            isCopyDialogShow:false,
+            myETAClassArr:[],
+            copyToClassify:[],
+            modeId:0,
         };
     },
-    computed: {
-        /* 登录角色id */
-        roleId() {
-            let id = Number(localStorage.getItem('AdminId'));
-            return id;
-        },
-    },
     methods: {
         slideHandle(){
             this.isSlideLeft = !this.isSlideLeft;
@@ -356,7 +388,7 @@ export default {
             this.getPublicList()
             this.getMyList()
         },
-        handleShowDialog(id){
+        handleShowDialog({id,userId}){
             //请求接口看有没有数据
             mychartInterface.myList({
                 PageSize:1200,
@@ -367,6 +399,7 @@ export default {
                 if(res.Data&&res.Data.List){
                     if(res.Data.List.length){
                         this.chartClassify = id
+                        this.classifyUserId = userId||0
                         this.chartCode = res.Data.List[0].UniqueCode
                         this.chartArr = res.Data.List.map(item => item.UniqueCode)
                         this.myETADetailDialogShow = true
@@ -375,6 +408,44 @@ export default {
                     this.$message.warning('该节点链接的图库没有图表')
                 }
             })
+        },
+        //打开复制到弹窗
+        async moveMychart(id) {
+            this.isCopyDialogShow = true
+            this.copyDialogLoading = true
+            this.modeId = id
+            //获取当前图表所属分类
+            const { Data : chartClassifyList=[]} = await mychartInterface.getChartInClassify({ChartInfoId: id })
+            //获取myETA全部分类
+            const {Data} = await mychartInterface.classifyList()
+            const classifyListData = Data?Data.List.map(item=>{
+                return {...item,fromPublic: 0}
+            }):[]
+            //过滤掉所属分类
+            this.myETAClassArr = classifyListData
+                .map((item) => ({
+                name: item.MyChartClassifyName,
+                value: item.MyChartClassifyId,
+                }))
+                .filter((x) => !chartClassifyList.includes(x.value))
+            this.copyDialogLoading = false
+        },
+        //将图表复制到其他目录
+        copyToClass(){
+            mychartInterface.copyMyChart({
+                ChartInfoId: this.modeId,
+                MyChartClassifyId: this.copyToClassify,
+            })
+            .then((res) => {
+                if (res.Ret !== 200) return;
+                this.$message.success('复制成功');
+                this.isCopyDialogShow = false;
+            });
+        },
+        //弹窗中移除了图表,对chartArr做对应改动
+        removeChart(UniqueCode){
+            console.log('?',UniqueCode)
+            this.chartArr.splice(this.chartArr.findIndex(item => item === UniqueCode), 1)
         }
     },
     mounted(){

src/views/mychart_manage/index.vue

@@ -882,6 +882,7 @@ export default {
       : 0;
     this.ispublic=sessionStorage.getItem('myChartIspublic')? Number(sessionStorage.getItem('myChartIspublic')): '';
     }
+    //从图库框架跳转来的
     if(this.$route.query.frameId){
         this.select_classify = Number(this.$route.query.frameId)
         this.ispublic = ''