eta_mobile_front/src/views/ppt/components/PadPPTIndexWrap.vue

<script setup>
import {ref} from 'vue'
import {useClassify} from '../hooks/useClassify'
import openShareIcon from '@/assets/imgs/ppt/ppt_icon_user1.png'
import closeShareIcon from '@/assets/imgs/ppt/ppt_icon_user2.png'
import {apiPPTList} from '@/api/ppt'
import { useRouter } from 'vue-router'

const router=useRouter()

const {
    classifyState,
    getPPTClassifyData,

    fileOptState,
    handleShowFileOpt,
    handlePPTCatalogueCopy,
    handlePPTCatalogueDel,
    handlePPTCatalogueReName,
    
    PPTOptState,
    handleShowPPTOpt,
    handlePPTDel,
    handlePPTShare,
    handleShowPPTCopy,
    handlePPTCopy,

    goPPTDetail
}=useClassify()
getPPTClassifyData()

const activeType=ref('myPPT')

// 获取ppt列表
let activeGroupId=ref('')
let pptList=ref([])
async function getPPTList(){
    const res=await apiPPTList({GroupId:activeGroupId.value})
    if(res.Ret===200){
        pptList.value=res.Data.List||[]
    }
}
getPPTList()

// 跳转搜索
function goMobileSearch(){
    router.push('/ppt/search')
}


</script>

<template>
    <div class="pad-ppt-index-wrap">
        <div class="left-classify-wrap">
            <div class="sticky-box">
            <div class="classify-type-box">
                <span 
                    :class="activeType=='myPPT'&&'active'"
                    @click="activeType='myPPT'"
                >我的PPT</span>
                <span
                    :class="activeType=='pubPPT'&&'active'"
                    @click="activeType='pubPPT'"
                >公共PPT</span>
            </div>
            <div class="classify-list" v-if="activeType=='myPPT'">
                <van-collapse class="level-two" v-model="classifyState.myActiveType" :border="false">
                    <van-collapse-item
                        :name="item.GroupId"
                        v-for="item in classifyState.privateList"
                        :key="item.GroupId"
                        :is-link="false"
                    >
                        <template #title>
                            <div class="title-second" @click="activeGroupId=item.GroupId">
                                <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
                                <span class="van-ellipsis">{{item.GroupName}}</span>
                                <div @click.stop="handleShowFileOpt(item)">
                                    <van-popover position="bottom-start">
                                        <template #reference>
                                            <img class="menu-icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                                        </template>
                                        <div class="pad-classify-file-opt-box">
                                            <div class="item" @click="handlePPTCatalogueCopy">
                                                <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
                                                <span>复制</span>
                                            </div>
                                            <div class="item" @click="fileOptState.showReName=true">
                                                <img src="@/assets/imgs/ppt/ppt_icon_write02.png" alt="">
                                                <span>重命名</span>
                                            </div>
                                            <div class="item del" @click="handlePPTCatalogueDel">
                                                <img src="@/assets/imgs/icon_del.png" alt="">
                                                <span>删除</span>
                                            </div>
                                        </div>
                                    </van-popover>
                                </div>
                            </div>
                        </template>
                        <div 
                            class="ppt-item"
                            v-for="_item in item.PptList" 
                            :key="_item.GroupId"
                            @click.stop="goPPTDetail(_item)"
                        >
                            <span class="van-ellipsis text">{{ _item.Title }}</span>
                            <div @click.stop="handleShowPPTOpt(_item)">
                                <van-popover position="bottom-start">
                                    <template #reference>
                                        <img class="share-icon" :src="_item.IsSingleShareBoolean?openShareIcon:closeShareIcon" alt="">
                                    </template>
                                    <div class="pad-classify-file-opt-box">
                                        <div class="item" @click="handlePPTShare">
                                            <img :src="closeShareIcon" alt="">
                                            <span>仅自己可见</span>
                                        </div>
                                        <div class="item" @click="handlePPTShare">
                                            <img :src="openShareIcon" alt="">
                                            <span>所有人可见</span>
                                        </div>
                                    </div>
                                </van-popover>
                            </div>
                            <div @click.stop="handleShowPPTOpt(_item)">
                                <van-popover position="bottom-start">
                                    <template #reference>
                                        <img class="menu-icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                                    </template>
                                    <div class="pad-classify-file-opt-box">
                                        <div class="item" @click="handleShowPPTCopy">
                                            <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
                                            <span>复制</span>
                                        </div>
                                        <div class="item del" @click="handlePPTDel">
                                            <img src="@/assets/imgs/icon_del.png" alt="">
                                            <span>删除</span>
                                        </div>
                                    </div>
                                </van-popover>
                            </div>
                            
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>
            <div class="classify-list" v-if="activeType=='pubPPT'">
                <van-collapse class="level-two" v-model="classifyState.pubActiveType" :border="false">
                    <van-collapse-item
                        :name="item.GroupId"
                        v-for="item in classifyState.publicList"
                        :key="item.GroupId"
                        :is-link="false"
                    >
                        <template #title>
                            <div class="title-second">
                                <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
                                <span class="van-ellipsis">{{item.GroupName}}</span>
                            </div>
                        </template>
                        <div 
                            class="ppt-item"
                            v-for="_item in item.PptList" 
                            :key="_item.GroupId"
                            @click.stop="goPPTDetail(_item)"
                        >
                            <span class="van-ellipsis text">{{ _item.Title }}</span>
                            <div @click.stop="handleShowPPTOpt(_item)">
                                <van-popover position="bottom-start">
                                    <template #reference>
                                        <img class="menu-icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                                    </template>
                                    <div class="pad-classify-file-opt-box">
                                        <div class="item" @click="handleShowPPTCopy">
                                            <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
                                            <span>复制</span>
                                        </div>
                                    </div>
                                </van-popover>
                            </div>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>
            </div>
        </div>
        <div class="right-list-wrap">
            <div class="search-box">
                <van-search 
                    shape="round" 
                    readonly 
                    placeholder="请输入PPT标题" 
                    @click="goMobileSearch"
                />
            </div>
            <ul class="list-wrap">
                <li 
                    class="item" 
                    v-for="item in pptList"
                    :key="item.PptId"
                    @click="goPPTDetail(item)"
                >
                    <div class="van-ellipsis title">{{item.Title}}</div>
                    <img class="bg-img" :src="item.BackgroundImg" alt="">
                    <div class="time">创建时间:{{item.PptCreateTime}}</div>
                </li>
                <li class="empty-item"></li>
                <li class="empty-item"></li>
            </ul>
        </div>
    </div>
    <!-- 目录重命名 -->
    <van-dialog 
        v-model:show="fileOptState.showReName" 
        title="重命名" 
        show-cancel-button
        confirmButtonText="保存"
        @confirm="handlePPTCatalogueReName"
    >
        <div class="file-rename-wrap">
            <span>目录名称</span>
            <input type="text" placeholder="请输入目录名" v-model="fileOptState.reNameVal">
        </div>
    </van-dialog>
    <!-- ppt复制弹窗 -->
    <van-dialog 
        v-model:show="PPTOptState.showCopy" 
        title="PPT目录" 
        show-cancel-button
        confirmButtonText="保存"
        @confirm="handlePPTCopy"
    >
        <div class="ppt-copy-wrap">
            <span>选择目录</span>
            <van-popover :actions="PPTOptState.copyActions" @select="e=>PPTOptState.copySelectData=e">
                <template #reference>
                    <span class="select-value-box">{{PPTOptState.copySelectData.GroupName||'请选择目录'}}</span>
                </template>
            </van-popover>
        </div>
    </van-dialog>
</template>

<style lang="scss">
.van-collapse-item__content{
    padding: 0;
}
.van-collapse-item--border:after{
    display: none;
}
.van-collapse-item__title--expanded{
    padding-bottom: 6px;
}
.van-collapse-item__wrapper{
    margin-bottom: 20px;
}
.van-collapse-item__title--expanded:after{
    display: none;
}
@media screen and (min-width:$media-width){
    .pad-classify-file-opt-box{
        border: 1px solid $border-color;
        padding: 10px 0;
        .item{
            padding: 10px 20px;
            display: flex;
            align-items: center;
            img{
                width: 20px;
                margin-right: 8px;
            }
        }
        .del{
            color: $theme-red;
        }
    }
            
}
</style>
<style lang="scss" scoped>
@media screen and (min-width:$media-width){
    .pad-ppt-index-wrap{
        display: flex;
        .left-classify-wrap{
            width: 300px;
            min-height: 100vh;
            border-right: 1px solid $border-color;
            padding: 30px;
            .sticky-box{
                position: sticky;
                top: 90px;
            }
            .classify-type-box{
                span{
                    display: inline-block;
                    padding-bottom: 5px;
                    margin-right: 30px;
                }
                .active{
                    color: $theme-color;
                    font-weight: bold;
                    border-bottom: 2px solid $theme-color;
                }
            }
            .classify-list{
                height: 80vh;
                overflow-y: auto;
                &::-webkit-scrollbar{
                    display: none;
                }
            }
            .level-two{
                padding-top: 20px;
                margin-left: -15px;
            }
            .title-second{
                display: flex;
                align-items: center;
                position: relative;
                img{
                    width: 20px;
                    margin-right: 8px;
                }
                span{
                    display: block;
                    width: 80%;
                    font-size: 16px;
                }
                .menu-icon{
                    width: 3px;
                    position: absolute;
                    right: 0;
                    margin-right: 0;
                    top: 5px;
                }
            }
            .ppt-item{
                border-bottom: 1px solid $border-color;
                margin-left: 40px;
                margin-right: var(--van-cell-horizontal-padding);
                padding-top: 14px;
                padding-bottom: 10px;
                position: relative;
                color: $font-grey;
                display: flex;
                .text{
                    width: calc(100% - 55px);
                    display: block;
                }
                .menu-icon{
                    width: 3px;
                    position: absolute;
                    right: 0;
                    top: 20px;
                }
                .share-icon{
                    width: 16px;
                    height: 16px;
                    position: absolute;
                    right: 35px;
                    top: 17px;
                }
            }
        }
        .right-list-wrap{
            flex: 1;
            .search-box{
                padding: 0 10px;
                position: sticky;
                top: 60px;
            }
            .list-wrap{
                padding: var(--van-search-padding);
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                .item{
                    display: block;
                    box-sizing: border-box;
                    width: 260px;
                    min-height: 240px;
                    padding: 10px 14px;
                    border: 1px solid $border-color;
                    margin-bottom: 20px;
                    margin-left: 10px;
                    margin-right: 10px;
                    .bg-img{
                        width: 100%;
                        display: block;
                        margin: 10px 0;
                    }
                }
                .empty-item{
                    width: 260px;
                }
            }
        }
    }
    .file-rename-wrap{
        display: flex;
        align-items: center;
        padding: 50px 30px;
        span{
            flex-shrink: 0;
            margin-right: 20px;
        }
        input{
            flex: 1;
            line-height: 35px;
            padding: 0 30px;
            border-radius: 35px;
            border: 1px solid $border-color;
            width: 150px;
        }
    }
    .ppt-copy-wrap{
        display: flex;
        align-items: center;
        padding: 50px 30px;
        span{
            flex-shrink: 0;
            margin-right: 20px;
        }
        :deep(.van-popover__wrapper){
            flex: 1;
        }
        .select-value-box{
            display: block;
            height: 35px;
            line-height: 35px;
            padding: 0 30px;
            border-radius: 35px;
            border: 1px solid $border-color;
            // min-width: 150px;
        }
    }
}

</style>