列表页操作

src/routes/modules/chartRoutes.js

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

src/views/chartFrame_manage/css/basePage.scss

@@ -1,7 +1,27 @@
 .chart-frame-wrap{
     display: flex;
     width:100%;
+    position:relative;
     *{box-sizing: border-box;}
+    .slide-icon {
+        padding: 20px 0;
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
+        border-radius: 5px;
+        cursor: pointer;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 99;
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.05);
+        }
+        &.slide-left {
+          right: 0;
+        }
+        &.slide-right {
+          left: 0;
+        }
+    }
     .page-block-wrap{
         padding:20px;
         background-color: #fff;
@@ -16,6 +36,17 @@
         position: relative;
         display: flex;
         flex-direction: column;
+        gap:20px 0;
+        .move-btn {
+            height: 100%;
+            width: 4px;
+            position: absolute;
+            right: 0px;
+            top: 0;
+            &:hover {
+              cursor: col-resize;
+            }
+          }
         .catalog-list{
             display: flex;
             flex-direction: column;
@@ -24,11 +55,17 @@
             .public-catalog,.my-list{
                 min-height: 50%;
             }
+            .public-catalog{
+                .catalog-tree{
+                    margin-top: 20px;
+                }
+            }
             .my-list{
                 .classify-item{
                     display: flex;
                     align-items: center;
                     padding:10px;
+                    cursor: pointer;
                     &.active{
                         background: #e0eefd;
                         color: #409eff;
@@ -45,6 +82,7 @@
         }
     }
     .detail-wrap{
+        padding:0;
         flex:1;
         background-color: transparent;
         .list{
@@ -68,6 +106,37 @@
                 }
             }
         }
+        .detail{
+            background-color: #fff;
+            width:100%;
+            height:100%;
+            display: flex;
+            flex-direction: column;
+            .top-info{
+                width:100%;
+                padding:20px;
+                display: flex;
+                .title{
+                    flex: 1;
+                    text-align: center;
+                    margin: 0 20px;
+                }
+                .tool{
+                    .el-button{
+                        padding: 0;
+                    }
+                }
+                border-bottom: 1px solid #ECECEC;
+            }
+            .frame-wrap{
+                flex:1;
+            }
+        }
+    }
+    .dialog-container,.dialog-footer{
+        text-align: center;
+    }
+    .dialog-footer{
+        padding:25px 0;
     }
-
 }

src/views/chartFrame_manage/css/customTree.scss

@@ -17,6 +17,9 @@
                 text-overflow: ellipsis;
             }
         }
+        .el-tree-node__content {
+            margin-bottom: 7px !important;
+        }
         .expanded.el-icon-caret-right:before {
             content: url('~@/assets/img/set_m/down.png') !important;
         }

src/views/chartFrame_manage/frameEditor.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- 添加编辑框架 -->
     <div>
-
+        编辑编辑
     </div>
 </template>
 

src/views/chartFrame_manage/index.vue

@@ -1,12 +1,34 @@
 <template>
     <!-- 图库框架 列表页 -->
     <div class="chart-frame-wrap">
-        <div class="catalog-wrap page-block-wrap">
+        <span class="slide-icon slide-right" @click="slideHandle" v-show="isSlideLeft">
+            <i class="el-icon-d-arrow-right"></i>
+        </span>
+        <div class="catalog-wrap page-block-wrap" id="catalog-left" v-show="!isSlideLeft">
+            <span class="slide-icon slide-left" @click="slideHandle">
+                <i class="el-icon-d-arrow-left"></i>
+            </span>
+            <span class="move-btn resize" v-drag id="resize"></span>
             <div class="btn-wrap">
-                <el-button>添加框架</el-button>
+                <el-button type="primary" @click="$router.push('/editframe')">添加框架</el-button>
             </div>
             <div class="search-wrap">
-                <el-input style="width: 100%;" placeholder="请输入框架名称"></el-input>
+                <el-select style="width:100%"
+                    filterable remote
+                    placeholder="请输入框架名称"
+                    v-model="searchText"
+                    :remote-method="searchHandle"
+                    value-key="frameId"
+                    clearable
+                    >
+                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
+                    <el-option
+                        v-for="item in searchOptions"
+                        :key="item.frameId"
+                        :label="item.name"
+                        :value="item"
+                    />
+                </el-select>
             </div>
             <div class="catalog-list">
                 <div class="public-catalog">
@@ -57,22 +79,29 @@
                                 </span>
                                 <el-dropdown-menu slot="dropdown">
                                     <el-dropdown-item 
-                                        :command="{key:'own',IsCompanyPublic:undefined,item}" 
+                                        :command="{key:'own'}" 
                                         :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">
-                                        仅自己可见
+                                        <div style="display: flex;align-items: center;">
+                                            <img v-if="item.IsPublic === 0" src="~@/assets/img/chart_m/Group_act.png">
+                                            <img v-else src="~@/assets/img/chart_m/Group.png">
+                                            <span style="margin-left:5px">仅自己可见</span>
+                                            
+                                        </div>
+                                        
                                     </el-dropdown-item>
                                     <el-dropdown-item 
-                                        :command="{key:'public',IsCompanyPublic:undefined,item}" 
+                                        :command="{key:'public'}" 
                                         :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">
-                                        所有人可见
+                                        <div style="display: flex;align-items: center;">
+                                            <img v-if="item.IsPublic === 1" src="~@/assets/img/chart_m/User_act.png">
+                                            <img v-else src="~@/assets/img/chart_m/User.png">
+                                            <span style="margin-left:5px">所有人可见</span>
+                                        </div>
+                                        
                                     </el-dropdown-item>
                                 </el-dropdown-menu>
                             </el-dropdown>
@@ -93,8 +122,8 @@
                 </div>
             </div>
         </div>
-        <div class="detail-wrap page-block-wrap">
-            <div class="empty" v-if="!currentFrame&&!publicCurrentFrame&&currentList.length===0">
+        <div class="detail-wrap page-block-wrap" id="detail-right">
+            <div class="empty" v-if="!currentFrame.frameId&&currentList.length===0">
                 <tableNoData text="暂无数据"/>
             </div>
             <template v-else>
@@ -110,12 +139,47 @@
                         <div class="item-image" 
                             :style="`background-image:url(${item.CoverImg?item.CoverImg:require('@/assets/img/document_m/default-img.png')})`"></div>
                     </div>
+                    <div class="empty" v-if="currentList.length===0">
+                        <tableNoData text="暂无数据"/>
+                    </div>
                 </div>
                 <div class="detail" v-else>
-                    详情详情
+                    <div class="top-info">
+                        <span>更新时间:{{currentFrame.updateTime}}</span>
+                        <span class="title text_oneLine">{{currentFrame.name}}</span>
+                        <div class="tool">
+                            <el-button type="text" @click="handleOption('edit',currentFrame)" v-if="frameType==='my'">编辑</el-button>
+                            <el-button type="text" @click="handleOption('copy',currentFrame)">复制图片</el-button>
+                            <el-button type="text" @click="handleOption('del',currentFrame)" style="color:red;"
+                                v-if="frameType==='my'">删除</el-button>
+                        </div>
+                    </div>
+                    <div class="frame-wrap"></div>
                 </div>
             </template>
         </div>
+        <!-- 重命名弹窗 -->
+        <el-dialog
+            title="重命名框架"
+            :visible.sync="isRenameDialogShow"
+            :close-on-click-modal="false"
+            :modal-append-to-body="false"
+            @close="isRenameDialogShow=false"
+            width="589px"
+            v-dialogDrag
+            center
+        >
+            <div class="dialog-container">
+                <div>
+                    <span style="margin-right:5px;">框架名称</span>
+                    <el-input v-model="modifyFrame.name" placeholder="请输入框架名称"></el-input>
+                </div>
+            </div>
+            <div class="dialog-footer">
+                <el-button @click="isRenameDialogShow=false">取消</el-button>
+                <el-button type="primary" @click="renameFrame">确定</el-button>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
@@ -123,8 +187,32 @@
 import draggable from 'vuedraggable';
 export default {
     components:{draggable},
+    directives: {
+        drag(el, bindings) {
+            el.onmousedown = function (e) {
+                let init = e.clientX;
+                let left = $('#catalog-left')[0];
+                let initWidth = left.offsetWidth;
+                document.onmousemove = function (e) {
+                let end = e.clientX;
+                let newWidth = end - init + initWidth;
+                left.style.width = newWidth+'px';
+                //reloadFrame()
+                };
+                document.onmouseup = function () {
+                document.onmousemove = document.onmouseup = null;
+                e.releaseCapture && e.releaseCapture();
+                };
+                e.setCapture && e.setCapture();
+                return false;
+            };
+        },
+    },
     data() {
         return {
+            isSlideLeft:false,//控制左侧目录栏是否显示
+            searchText:'',
+            searchOptions:[],
             mockPublic:[
                 {
                     catalogId:1,
@@ -133,38 +221,64 @@ export default {
                     children:[{
                         frameId:1,
                         name:'黄金稳住了吗？aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
-                        nodeKeyId:'1-1'
+                        nodeKeyId:'1-1',
+                        updateTime:'2023/10/13'
                     }]
+                },
+                {
+                    catalogId:2,
+                    name:'aaa的框架',
+                    nodeKeyId:2,
+                    children:[]
                 }
             ],
             currentList:[],
-            publicCurrentFrame:null,
             mockFrameList:[
                 {
                     frameId:2,
                     name:'框架1',
                     IsPublic:0,
+                    updateTime:'2023/10/10'
                 },
                 {
                     frameId:3,
                     name:'框架2',
-                    IsPublic:1
+                    IsPublic:1,
+                    updateTime:'2023/10/11'
                 }
             ],
             currentFrame:{},
-            
+            modifyFrame:{},
+            isRenameDialogShow:false,
             model:'frame',
+            frameType:'my'
         };
     },
     methods: {
+        slideHandle(){
+            this.isSlideLeft = !this.isSlideLeft;
+        },
+        getPublicList(){},
+        getMyList(type){
+            if(type!=='init') return 
+            //如果是其他页面跳转来的
+            if(this.$route.query.frameId){
+                this.currentFrame = this.mockFrameList.find(i=>i.frameId===Number(this.$route.query.frameId))||{}
+            }else{
+                //否则选择mockFrameList的第一个
+                this.currentFrame = this.mockFrameList[0]||{}
+            }
+            
+        },
+        searchHandle(){},
         nodeChange(data,node){
+            this.frameType = 'public'
             this.changeModel(node.level===2?'frame':'list',data)
         },
         changeModel(type,data){
             this.model = type
             if(type==='frame'){
-                this.currentFrame = {}
-                this.publicCurrentFrame = data
+                this.currentFrame = data
             }else{
                 this.currentList = data.children||[]
             }
@@ -172,15 +286,55 @@ export default {
         menuDragStart(){},
         menuDragenter(){},
         menuDragOver(){},
-        handleCommand(){
-
+        handleCommand(command){
+            if(command.key==='edit'){
+                this.modifyFrame = _.cloneDeep(this.currentFrame)
+                this.isRenameDialogShow = true
+            }
+            if(command.key==='del'){
+                this.deleteFrame(this.currentFrame)
+            }
         },
         chooseFrame(item){
-            this.model = 'frame'
-            this.publicCurrentFrame = null
-            this.currentFrame = item
+            this.frameType = 'my'
+            this.changeModel('frame',item)
+        },
+        handleOption(type,data){
+            const optionMap = {
+                'edit':this.handleEditFrame,
+                'copy':this.copyFrame,
+                'del':this.deleteFrame,
+            }
+            optionMap[type](data)
+        },
+        handleEditFrame(data){
+            this.$router.push({path:'/editframe',query:{frameId:data.frameId}})
+        },
+        copyFrame(data){},
+        deleteFrame(data){
+            this.$confirm("删除后不可恢复，确认删除吗？","提示",{
+                confirmButtonText:"确定",
+                cancelButtonText:"取消",
+                type:"warning"
+            }).then(()=>{
+                //删除
+                this.$message.success("删除成功")
+                this.getPublicList()
+                this.getMyList()
+            }).catch(()=>{})
+        },
+        renameFrame(){
+            //this.modifyFrame
+            this.$message.success("编辑成功")
+            this.isRenameDialogShow = false
+            this.getPublicList()
+            this.getMyList()
         }
     },
+    mounted(){
+        this.getPublicList()
+        this.getMyList('init')
+    }
 };
 </script>