公共图库,公共框架增加展开收起,公共图库改为目录

src/views/chartFrame_manage/components/frameContainer.vue

@@ -113,7 +113,7 @@ export default {
                 const currentNode = nodes.find(item=>item.id===node.NodeId)
                 if(currentNode){
                     currentNode.removeTools()
-                    const toolOption = this.getToolOption(node.ChartNum||0)
+                    const toolOption = this.getToolOption({chartNum:node.ChartNum||0,color:currentNode.attrs.label.fill})
                     currentNode.addTools(toolOption)
                 }
             })

src/views/chartFrame_manage/css/basePage.scss

@@ -57,12 +57,20 @@
                 overflow-y: auto;
             } */
             .public-catalog{
+                .title{
+                    cursor: pointer;
+                    span{
+                        margin-left: 5px;
+                    }
+                }
                 .catalog-tree{
-                    margin: 20px 0;
+                   /*  margin: 20px 0; */
+                   margin-top:20px;
                     min-height: 100px;
                 }
             }
             .my-list{
+                margin-top: 20px;
                 .classify-item{
                     display: flex;
                     align-items: center;

src/views/chartFrame_manage/css/customTree.scss

@@ -1,4 +1,4 @@
-.chart-frame-wrap{
+.chart-frame-wrap,.tree-wrap{
     .catalog-tree{
         .custom-tree-node {
             display: flex !important;

src/views/chartFrame_manage/index.vue

@@ -34,8 +34,8 @@
             </div>
             <div class="catalog-list">
                 <div class="public-catalog">
-                    <p>公共框架</p>
-                    <div class="catalog-tree">
+                    <p @click="expandPublic = !expandPublic" class="title">公共框架<span><i :class="{'el-icon-arrow-down':!expandPublic,'el-icon-arrow-up':expandPublic}"></i></span></p>
+                    <div class="catalog-tree" v-show="expandPublic">
                         <el-tree
                             ref="catalogTree"
                             class="catalog-tree other-tree"
@@ -244,7 +244,7 @@
 
 <script>
 import draggable from 'vuedraggable';
-import FrameContainer from './components/frameContainer.vue';
+import FrameContainer from './components/frameContainer';
 import chartDetail from '@/views/mychart_manage/components/chartDetailDia.vue';
 import { mychartInterface,chartFrameInterface } from '@/api/api.js';
 import {copyBlob} from '@/utils/svgToblob.js';
@@ -274,6 +274,7 @@ export default {
     data() {
         return {
             isSlideLeft:false,//控制左侧目录栏是否显示
+            expandPublic:false,//控制公共框架展开收起
 
             /* drag 我的框架相关 */
             dragStartIndex:0,

src/views/mychart_manage/index.vue

@@ -48,8 +48,8 @@
       </div>
       <div class="left-bottom">
         <div class="public-classify" v-if="publicClassifyList.length">
-          <h3 class="classify-type">公共图库</h3>
-          <ul class="public-ul">
+          <h3 @click="expandPublic = !expandPublic" class="classify-type">公共图库<span><i :class="{'el-icon-arrow-down':!expandPublic,'el-icon-arrow-up':expandPublic}"></i></span></h3>
+          <!-- <ul class="public-ul">
             <li
               :class="[
                 'classify-item',
@@ -74,7 +74,32 @@
                 </el-dropdown>
               </div>
             </li>
-          </ul>
+          </ul> -->
+          <div class="tree-wrap" v-show="expandPublic">
+                <el-tree
+                    ref="catalogTree"
+                    class="catalog-tree other-tree"
+                    empty-text="暂无图库"
+                    :data="publicClassifyList"
+                    node-key="nodeKeyId"
+                    :expand-on-click-node="false"
+                    @current-change="(data,node)=>{nodeChange(data,node)}"
+                    >
+                    <div class="custom-tree-node" slot-scope="{ data,node }">
+                        <span class="tree-label">{{ data.name }}</span>
+                        <div class="right-item right-item-box" >
+                            <el-dropdown @command="handleCommand" trigger="click" v-if="isShowDropPublic&&data.MyChartClassifyId">
+                            <span class="el-dropdown-link"> 
+                                <i class="el-icon-more" style="font-size: 16px;transform: rotate(90deg);cursor: pointer"/>
+                            </span>
+                            <el-dropdown-menu slot="dropdown">
+                                <el-dropdown-item :command="{key:'copy'}" :disabled="select_classify_userid === roleId">复制</el-dropdown-item>
+                            </el-dropdown-menu>
+                            </el-dropdown>
+                        </div>
+                    </div>
+                </el-tree>
+            </div>
         </div>
         <div class="classify" v-if="classifyList.length">
           <h3 class="classify-type">我的图库</h3>
@@ -166,7 +191,7 @@
         
         <div class="cont-top">
           <span>共{{ total }}张图表</span>
-          <span v-if="ispublic === 1">分享人: {{ publicClassifyList.find(item => item.MyChartClassifyId === select_classify).RealName}}</span>
+          <span v-if="ispublic === 1">分享人: {{ RealName }}</span>
         </div>
         <div
           class="chart-public-list"
@@ -229,7 +254,7 @@
         </div>
       </div>
       <div v-else class="nodata">
-        <span v-if="ispublic === 1" class="sharer">分享人: {{ publicClassifyList.find(item => item.MyChartClassifyId === select_classify).RealName}}</span>
+        <span v-if="ispublic === 1" class="sharer">分享人: {{ RealName }}</span>
         <tableNoData text="暂无图表"/>
       </div>
     </div>
@@ -324,6 +349,8 @@ export default {
   },
   data() {
     return {
+      expandPublic:false,
+      RealName:'',
       haveData: true,
       isSlideLeft: false, //收起分类
       search_txt: '',
@@ -473,10 +500,36 @@ export default {
     getPublicClassify() {
       mychartInterface.publicClassify().then((res) => {
         if(res.Ret !== 200) return;
-        this.publicClassifyList = res.Data ? res.Data.List.map(item => ({
+        /* this.publicClassifyList = res.Data ? res.Data.List.map(item => ({
           ...item,
           fromPublic: 1
-        })) : [];
+        })) : []; */
+        this.publicClassifyList = res.Data?res.Data.List||[]:[]
+        /* this.publicClassifyList = [{
+            MenuAdminId:204,
+            MenuName:"ficc销售name",
+            Items:[{
+                MyChartClassifyId:370,
+                MyChartClassifyName:"图库2.0",
+                RealName:'ficc销售'
+            }]
+        }] */
+        this.publicClassifyList = this.publicClassifyList.map(list=>{
+            list.name = list.MenuName
+            list.nodeKeyId = 'list' + list.MenuAdminId
+            if(list.Items){
+                list.children = list.Items.map(item=>{
+                    return {
+                        ...item,
+                        ...{
+                            nodeKeyId:'item'+ item.MyChartClassifyId,
+                            name:item.MyChartClassifyName
+                        }
+                    }
+                })
+            }
+            return list
+        })
       })
     },
 
@@ -550,9 +603,28 @@ export default {
 			if(!this.search_have_more) return;
 			this.searchApi(this.current_search,++this.search_page);
 		},
-
+    nodeChange(data,node){
+        if(node.level===1){
+            this.select_classify = 0
+            this.haveData = false
+            this.total = 0
+            this.page_no = 1
+            this.chartList = []
+            this.RealName = ''
+            return
+        }
+        this.RealName = data.RealName
+        this.chooseClassify({
+            MyChartClassifyId:data.MyChartClassifyId,
+            fromPublic:1,
+            AdminId:data.AdminId
+        })
+    },
     /* 切换分类 */
     chooseClassify({MyChartClassifyId,fromPublic,AdminId}) {
+      if(fromPublic!==1){
+        this.$refs.catalogTree.setCurrentKey(null)
+      }
       this.select_classify = MyChartClassifyId;
       this.ispublic = fromPublic;
       this.select_classify_userid = AdminId;
@@ -936,6 +1008,7 @@ export default {
 };
 </script>
 <style lang="scss">
+@import "../chartFrame_manage/css/customTree.scss";
 .mychart_container {
   position: relative;
   .right-item-box {
@@ -1059,6 +1132,9 @@ export default {
         margin-bottom: 20px;
         /* .public-ul {
         } */
+        .tree-wrap{
+            padding:15px;
+        }
       }
     }
     .noclassify {