页面整体布局

src/routes/modules/chartRoutes.js

@@ -65,12 +65,19 @@ export default [
 		name: 'My ETA',
 		hidden: false,
 		icon_path: require('@/assets/img/home/data_ic.png'),
-		children: [{
+		children: [
+			{
 				path: 'mychart',
 				name: 'My ETA',
 				component: () => import('@/views/mychart_manage/index.vue'),
 				hidden: false,
-			}
+			},
+			{
+				path: 'chartframe',
+				name: '图库框架',
+				component: () => import('@/views/chartFrame_manage/index.vue'),
+				hidden: false,
+			},
 		]
 	},
 

src/views/chartFrame_manage/css/basePage.scss

@@ -0,0 +1,73 @@
+.chart-frame-wrap{
+    display: flex;
+    width:100%;
+    *{box-sizing: border-box;}
+    .page-block-wrap{
+        padding:20px;
+        background-color: #fff;
+        border-radius: 4px;
+        height: calc(100vh - 120px);
+    }
+    .catalog-wrap{
+        width:300px;
+        min-width: 300px;
+        margin-right: 30px;
+        padding:20px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        .catalog-list{
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            overflow-y: auto;
+            .public-catalog,.my-list{
+                min-height: 50%;
+            }
+            .my-list{
+                .classify-item{
+                    display: flex;
+                    align-items: center;
+                    padding:10px;
+                    &.active{
+                        background: #e0eefd;
+                        color: #409eff;
+                    }
+                    .item-label{
+                        flex: 1;
+                        margin: 0 5px;
+                    }
+                    .icon{
+                        width: 18px;
+                    }
+                }
+            }
+        }
+    }
+    .detail-wrap{
+        flex:1;
+        background-color: transparent;
+        .list{
+            display: flex;
+            flex-wrap: wrap;
+            .item-title{
+                padding-bottom: 10px;
+            }
+            .list-item{
+                width:300px;
+                padding:10px;
+                background-color: #fff;
+                cursor: pointer;
+                .item-image{
+                    margin-top:10px;
+                    width:100%;
+                    height: 0;
+                    padding-bottom: 70%;
+                    background-color: pink;
+                    background: no-repeat center/cover url('~@/assets/img/document_m/default-img.png');
+                }
+            }
+        }
+    }
+
+}

src/views/chartFrame_manage/css/customTree.scss

@@ -0,0 +1,44 @@
+.chart-frame-wrap{
+    .catalog-tree{
+        .custom-tree-node {
+            display: flex !important;
+            justify-content: space-between;
+            align-items: center;
+            display: block;
+            flex: 1;
+            width: calc(100% - 28px);
+            .node_label {
+                margin-right: 2px;
+            }
+            .tree-label {
+                flex: 1;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+        .expanded.el-icon-caret-right:before {
+            content: url('~@/assets/img/set_m/down.png') !important;
+        }
+        .el-icon-caret-right:before {
+            content: url('~@/assets/img/set_m/slide.png') !important;
+        }
+        .el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
+            content: '' !important;
+        }
+        .el-tree-node__expand-icon.expanded {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+        }
+    }
+    .el-dropdown-menu-item{
+        &:hover {
+            background-color: #F5F7FA  !important;
+            color: #606266 !important;
+        }
+    }
+    .el-dropdown-menu .el-dropdown-menu-item-chat {
+        background-color: #ecf5ff !important;
+        color: #66b1ff !important;
+    }
+}

src/views/chartFrame_manage/index.vue

@@ -1,29 +1,192 @@
 <template>
     <!-- 图库框架 列表页 -->
     <div class="chart-frame-wrap">
-        <div class="catalog-wrap">
-            
+        <div class="catalog-wrap page-block-wrap">
+            <div class="btn-wrap">
+                <el-button>添加框架</el-button>
+            </div>
+            <div class="search-wrap">
+                <el-input style="width: 100%;" placeholder="请输入框架名称"></el-input>
+            </div>
+            <div class="catalog-list">
+                <div class="public-catalog">
+                    <p>公共框架</p>
+                    <div class="catalog-tree">
+                        <el-tree
+                            ref="catalogTree"
+                            class="catalog-tree other-tree"
+                            empty-text="暂无分类"
+                            :data="mockPublic"
+                            node-key="nodeKeyId"
+                            :expand-on-click-node="false"
+                            @current-change="(data,node)=>{nodeChange(data,node)}"
+                            >
+                            <span class="custom-tree-node" slot-scope="{ data,node }"
+                            >
+                                <span class="tree-label">{{ data.name }}</span>
+                            </span>
+                        </el-tree>
+                    </div>
+                </div>
+                <div class="my-list">
+                    <p>我的框架</p>
+                    <draggable
+                        v-model="mockFrameList"
+                        class="classify-ul"
+                        animation="300"
+                        tag="ul"
+                        @start="menuDragStart"
+                        @update="menuDragenter"
+                        @end="menuDragOver"
+                    >
+                        <li class="classify-item" :class="{'active':currentFrame.frameId===item.frameId}"
+                            v-for="item in mockFrameList" :key="item.frameId"
+                            @click="chooseFrame(item)"
+                            >
+                            <span>
+                                <img src="~@/assets/img/data_m/move_ico.png"
+                                    alt="" class="move"
+                                    style="width: 14px; height: 14px;"
+                                />
+                            </span>
+                            <span class="item-label text_oneLine">{{ item.name }}</span>
+                            <el-dropdown style="margin-right: 10px" @command="handleCommand" trigger="click">
+                                <span class="el-dropdown-link  el-dropdown-link-img">
+                                    <img class="icon" src="~@/assets/img/chart_m/Group.png" v-if="item.IsPublic === 0">
+                                    <img class="icon" src="~@/assets/img/chart_m/User.png" v-else>
+                                </span>
+                                <el-dropdown-menu slot="dropdown">
+                                    <el-dropdown-item 
+                                        :command="{key:'own',IsCompanyPublic:undefined,item}" 
+                                        :class="item.IsPublic === 0 ? 'el-dropdown-menu-item-chat-act' : ''"
+                                        class="el-dropdown-menu-item-chat"
+                                        >
+                                        <img v-if="item.IsPublic === 0" src="~@/assets/img/chart_m/Group_act.png">
+                                        <img v-else src="~@/assets/img/chart_m/Group.png">
+                                        仅自己可见
+                                    </el-dropdown-item>
+                                    <el-dropdown-item 
+                                        :command="{key:'public',IsCompanyPublic:undefined,item}" 
+                                        :class="item.IsPublic === 1 ? 'el-dropdown-menu-item-chat-act' : ''"
+                                        class="el-dropdown-menu-item-chat"
+                                        >
+                                        <img v-if="item.IsPublic === 1" src="~@/assets/img/chart_m/User_act.png">
+                                        <img v-else src="~@/assets/img/chart_m/User.png">
+                                        所有人可见
+                                    </el-dropdown-item>
+                                </el-dropdown-menu>
+                            </el-dropdown>
+                            <el-dropdown @command="handleCommand" trigger="click">
+                            <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 v-if="permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_rename')"
+                                    :command="{key:'edit'}">重命名</el-dropdown-item>
+                                <el-dropdown-item v-if="permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_delete')"
+                                    :command="{key:'del'}">删除</el-dropdown-item>
+                            </el-dropdown-menu>
+                            </el-dropdown>
+                           
+                        </li>
+                    </draggable>
+                </div>
+            </div>
         </div>
-        <div class="detail-wrap">
-            <div class="list"></div>
-            <div class="detail"></div>
+        <div class="detail-wrap page-block-wrap">
+            <div class="empty" v-if="!currentFrame&&!publicCurrentFrame&&currentList.length===0">
+                <tableNoData text="暂无数据"/>
+            </div>
+            <template v-else>
+                <div class="list" v-if="model==='list'">
+                    <div class="list-item" 
+                        v-for="item in currentList" :key="item.nodeKeyId"
+                        @click="changeModel('frame',item)"
+                        >
+                        <div class="item-title text_oneLine">
+                            <span>{{item.name}}</span>
+                        </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>
+                    </div>
+                </div>
+                <div class="detail" v-else>
+                    详情详情
+                </div>
+            </template>
         </div>
     </div>
 </template>
 
 <script>
+import draggable from 'vuedraggable';
 export default {
+    components:{draggable},
     data() {
         return {
-
+            mockPublic:[
+                {
+                    catalogId:1,
+                    name:'XXX的框架',
+                    nodeKeyId:1,
+                    children:[{
+                        frameId:1,
+                        name:'黄金稳住了吗？aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+                        nodeKeyId:'1-1'
+                    }]
+                }
+            ],
+            currentList:[],
+            publicCurrentFrame:null,
+            mockFrameList:[
+                {
+                    frameId:2,
+                    name:'框架1',
+                    IsPublic:0,
+                },
+                {
+                    frameId:3,
+                    name:'框架2',
+                    IsPublic:1
+                }
+            ],
+            currentFrame:{},
+            
+            model:'frame',
         };
     },
     methods: {
+        nodeChange(data,node){
+            this.changeModel(node.level===2?'frame':'list',data)
+        },
+        changeModel(type,data){
+            this.model = type
+            if(type==='frame'){
+                this.currentFrame = {}
+                this.publicCurrentFrame = data
+            }else{
+                this.currentList = data.children||[]
+            }
+        },
+        menuDragStart(){},
+        menuDragenter(){},
+        menuDragOver(){},
+        handleCommand(){
 
+        },
+        chooseFrame(item){
+            this.model = 'frame'
+            this.publicCurrentFrame = null
+            this.currentFrame = item
+        }
     },
 };
 </script>
 
+<style lang="scss">
+@import "./css/customTree.scss";
+</style>
 <style scoped lang="scss">
-
+@import "./css/basePage.scss";
 </style>