eta_front/src/views/chartFrame_manage/index.vue

<template>
    <!-- 图库框架 列表页 -->
    <div class="chart-frame-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 type="primary" @click="$router.push('/editframe')">添加框架</el-button>
            </div>
            <div class="search-wrap">
                <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">
                    <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'}" 
                                        :class="item.IsPublic === 0 ? 'el-dropdown-menu-item-chat-act' : ''"
                                        class="el-dropdown-menu-item-chat"
                                        >
                                        <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'}" 
                                        :class="item.IsPublic === 1 ? 'el-dropdown-menu-item-chat-act' : ''"
                                        class="el-dropdown-menu-item-chat"
                                        >
                                        <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>
                            <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 page-block-wrap" id="detail-right">
            <div class="empty" v-if="!currentFrame.frameId&&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 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>

<script>
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,
                    name:'XXX的框架',
                    nodeKeyId:1,
                    children:[{
                        frameId:1,
                        name:'黄金稳住了吗？aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
                        nodeKeyId:'1-1',
                        updateTime:'2023/10/13'
                    }]
                },
                {
                    catalogId:2,
                    name:'aaa的框架',
                    nodeKeyId:2,
                    children:[]
                }
            ],
            currentList:[],
            mockFrameList:[
                {
                    frameId:2,
                    name:'框架1',
                    IsPublic:0,
                    updateTime:'2023/10/10'
                },
                {
                    frameId:3,
                    name:'框架2',
                    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 = data
            }else{
                this.currentList = data.children||[]
            }
        },
        menuDragStart(){},
        menuDragenter(){},
        menuDragOver(){},
        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.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>

<style lang="scss">
@import "./css/customTree.scss";
</style>
<style scoped lang="scss">
@import "./css/basePage.scss";
</style>