v1.5 eta图库页面

src/views/chartETA/ChartDetail.vue

@@ -0,0 +1,12 @@
+<script setup>
+</script>
+
+<template>
+    <div>
+
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/chartETA/List.vue

@@ -1,51 +1,54 @@
 <script setup>
 //ETA图库页面
 import {ref,reactive} from 'vue'
+import CatalogTree from './components/CatalogTree.vue';
 import apiChart from '@/api/chart'
 
-
-const goMobileSearch = ()=>{
+import {useCatalogList} from './hooks/useCatalogList'
+const {
+    catalogNodes,//目录列表
+    getCatalogList,//获取图库目录
+} = useCatalogList()
+//跳转至搜索页
+const goSearch = ()=>{
 
 }
 
-
-const goDetail = ()=>{}
+//跳转至图表详情页
+const goChartDetail = ()=>{}
 
 
-//目录列表
-const catalogNodes = ref([])
 //是否展示目录列表
 const IsShowCatalog = ref(false)
-//展开的目录
-const activeCatalogs = ref([])
-//获取图库目录
-async function getCatalogList(){
-    const res = await apiChart.ETAChartClassifyList()
-    if(res.Ret!==200) return 
-    catalogNodes.value = res.Data?res.Data.AllNodes:[]||[]
-}
+
 //展示目录列表
 function showCatalog(){
     IsShowCatalog.value = true
 }
-//展示目录操作栏，pad模式是 phone模式是popup
-function handleShowFileOpt(){}
-//子目录被点击
-function handleCatalogItemClick(item){
+//激活的目录路径
+const catalogMenu = ref('')
+//目录被点击 type:['node'一级目录,'item'二级目录]
+function catalogItemClick({item,type='node',parent}){
+    catalogMenu.value = type==='node'?item.ChartClassifyName||'':parent.ChartClassifyName+'/'+item.ChartClassifyName
     listState.cid = item.ChartClassifyId
     listState.list=[]
     listState.page=1
     getChartList()
 }
+//目录操作栏被点击
+function showFileOptClick(node){
+    console.log('a,node:',node)
+}
 //图表列表
 const listState = reactive({
-    cid:152,
+    cid:0,
     list:[],
     page:1,
     pageSize:15,
     finished:false,
     loading:false,
     total:0,
+    IsShowMe:false
 })
 //获取图表列表
 async function getChartList(){
@@ -60,12 +63,13 @@ async function getChartList(){
     const arr = res.Data?res.Data.List:[]
     listState.list = [...listState.list,...arr]
     listState.total = res.Data?res.Data.Paging.Totals:0
-    listState.finished = res.Data?res.Data.Paging.IsEnd:0
+    listState.finished = res.Data?res.Data.Paging.IsEnd:true
     listState.loading=false
 }
 
 //下拉加载
 function onLoad(){
+    if(IsShowCatalog.value) return
     listState.page++
     getChartList()
 }
@@ -83,14 +87,16 @@ getChartList()
                     readonly 
                     placeholder="请输入图表名称"
                     style="flex:1"
-                    @click-input="goMobileSearch"
+                    @click-input="goSearch"
                 />
                 <div class="lang-icon icon">en</div>
                 <div class="list-icon icon" @click="showCatalog">list</div>
             </div>
             <div class="select-box">
-                <p>共{{listState.total}}张图表</p>
-                <span>只看我的</span>
+                <p>
+                    <span style="margin-right: 5px;font-weight: bold;">{{ catalogMenu }}</span>
+                    共{{listState.total}}张图表</p>
+                <span> <van-checkbox v-model="listState.IsShowMe" shape="square">只看我的</van-checkbox></span>
             </div>
         </div>
         <div class="chart-list-wrap">
@@ -107,7 +113,7 @@ getChartList()
                         class="chart-list-item" 
                         v-for="item in listState.list" 
                         :key="item.ChartInfoId"
-                        @click="goDetail(item)"
+                        @click="goChartDetail(item)"
                     >
                         <div class="title">{{item.ChartName}}</div>
                         <img class="img" :src="item.ChartImage" alt="">   
@@ -127,35 +133,11 @@ getChartList()
                     <span class="close-icon">X</span>
                 </div>
                 <div class="list-box">
-                    <van-collapse v-model="activeCatalogs" :border="false">
-                        <van-collapse-item 
-                            v-for="node in catalogNodes"
-                            :key="node.UniqueCode"
-                            :name="node.UniqueCode"
-                            :is-link="false"
-                        >
-                        <template #title>
-                            <div class="list-title">
-                                <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
-                                <span class="van-ellipsis">{{node.ChartClassifyName}}</span>
-                                <div @click.stop="handleShowFileOpt(node)" class="menu-icon">
-                                    <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
-                                </div>
-                            </div>
-                        </template>
-                        <div 
-                            class="list-item"
-                            v-for="item in node.Children" 
-                            :key="item.UniqueCode"
-                            @click.stop="handleCatalogItemClick(item)"
-                        >
-                            <span class="van-ellipsis text">{{ item.ChartClassifyName }}</span>
-                            <div @click.stop="handleShowFileOpt(item)" class="menu-icon">
-                                <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
-                            </div>
-                        </div>
-                        </van-collapse-item>
-                    </van-collapse>
+                    <CatalogTree 
+                        :catalog-nodes="catalogNodes"
+                        :showFileOptClick="showFileOptClick"
+                        @handleCatalogItemClick="catalogItemClick"
+                    />
                 </div>
                 <div class="bottom">
                     <span>添加图表分类</span>
@@ -166,15 +148,12 @@ getChartList()
 </template>
 <style lang="scss">
 .chart-eta-list-wrap{
-    .van-cell__title{
-        overflow: hidden;
-    }
     .catalog-list-wrap{
         width: 65%;
     }
     @media screen and (min-width:$media-width){
         .catalog-list-wrap{
-            width: auto;
+            width: 20%;
         }
     }
 }
@@ -244,34 +223,6 @@ getChartList()
             padding: 0 15px;
             align-items: center;
         }
-        .list-box{
-            padding:15px;
-            .list-title,.list-item{
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                span{
-                    flex: 1;
-                    text-align: center;
-                    box-sizing: border-box;
-                    padding: 0 15px;
-                }
-                
-            }
-            img{
-                display: block;
-                width: 48px;
-                height: auto;
-            }
-            .menu-icon{
-                width: 30px;
-                text-align: center;
-                .icon{
-                    width: 6px;
-                    margin-right: 0;
-                }
-            }
-        }
     }
 
     @media screen and (min-width:$media-width){
@@ -304,20 +255,6 @@ getChartList()
                 }
             }
         }
-        .catalog-list{
-            .list-box{
-                padding:15px;
-            .list-title{
-                display: flex;
-            }
-            img{
-                    width: 32px;
-                    &.icon{
-                        width:15px;
-                    }
-                }
-        }
-        }
     }
 }
 </style>

src/views/chartETA/Search.vue

@@ -0,0 +1,12 @@
+<script setup>
+</script>
+
+<template>
+    <div>
+
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/chartETA/components/CatalogItem.vue

@@ -0,0 +1,108 @@
+<script setup>
+import {ref} from 'vue'
+const props = defineProps({
+    showFileImg:{
+        type:Boolean,
+        default:true
+    },
+    node:{
+        type:Object,
+        default:{}
+    },
+    optArr:{
+        type:Array,
+        default:[]
+    }
+})
+/* const emits=defineEmits(['showFileOptClick'])
+function handleShowFileOptClick(){
+    emits('showFileOptClick',props.node)
+} */
+const showPopover = ref(false)
+function fileOptClick(opt){
+    showPopover.value = false
+    console.log('opt:',opt)
+}
+</script>
+
+<template>
+    <div class="catalog-item">
+        <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="" v-if="showFileImg">
+        <span class="van-ellipsis">{{node.ChartClassifyName||''}}</span>
+        <div @click.stop>
+            <!-- <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt=""> -->
+            <van-popover placement="bottom-end" v-model:show="showPopover">
+                <template #reference>
+                    <div class="menu-icon">
+                        <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
+                    </div>
+                </template>
+                <div class="catalog-file-opt-box">
+                    <div class="opt-item" v-for="opt in optArr" :key="opt.label" @click="fileOptClick(opt)">
+                        <img :src="opt.icon" alt="">
+                        <span>{{opt.label}}</span>
+                    </div>
+                </div>
+            </van-popover>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+.catalog-file-opt-box{
+    .opt-item{
+        display: flex;
+        padding:5px 15px;
+        gap:10px;
+        align-items: center;
+        border-bottom: 1px solid $border-color;
+        img{
+            width:44px;
+        }
+        span{
+            white-space: nowrap;
+        }
+        @media screen and (min-width:$media-width){
+            img{
+                width:32px;
+            }
+        }
+    }
+}
+</style>
+<style scoped lang="scss">
+.catalog-item{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+    span{
+        flex: 1;
+        text-align: center;
+        box-sizing: border-box;
+        padding: 0 15px;
+    }
+    img{
+        display: inline-block;
+        width: 48px;
+        height: auto;
+        &.icon{
+            width: 6px;
+            margin-right: 0;
+        }
+    }
+    .menu-icon{
+        width: 30px;
+        text-align: center;
+        
+    }
+    @media screen and (min-width:$media-width){
+        img{
+            width: 32px;
+            &.icon{
+                width:6px;
+            }
+        }
+    }
+}
+</style>

src/views/chartETA/components/CatalogTree.vue

@@ -0,0 +1,58 @@
+<script setup>
+import {ref} from 'vue'
+import {useCatalogList} from '../hooks/useCatalogList'
+import CatalogItem from './CatalogItem.vue';
+const props = defineProps({
+    catalogNodes:{
+        type:Array,
+        default:[]
+    },
+    showFileOptClick:Function
+})
+const emits=defineEmits(['handleCatalogItemClick'])
+//展开的目录
+const activeCatalogs = ref([])
+//目录操作栏
+const {optArrNode,optArrItem} = useCatalogList()
+//点击目录
+function handleCatalogItemClick(item,type,node){
+    emits('handleCatalogItemClick',{item,type,parent:node})
+}
+</script>
+
+<template>
+    <div class="catalog-tree-wrap">
+        <van-collapse v-model="activeCatalogs" :border="false">
+            <van-collapse-item 
+                v-for="node in catalogNodes"
+                :key="node.UniqueCode"
+                :name="node.UniqueCode"
+                :is-link="false"
+                @click.stop="handleCatalogItemClick(node)"
+            >
+            <template #title>
+                <CatalogItem 
+                    :node="node" 
+                    :optArr="optArrNode"
+                    @showFileOptClick="showFileOptClick"/>
+            </template>
+            <div 
+                class="list-item"
+                v-for="item in node.Children" 
+                :key="item.UniqueCode"
+                @click.stop="handleCatalogItemClick(item,'item',node)"
+            >
+                <CatalogItem 
+                    :node="item" 
+                    :showFileImg="false" 
+                    :optArr="optArrItem"
+                    @showFileOptClick="showFileOptClick"/>
+            </div>
+            </van-collapse-item>
+        </van-collapse>
+    </div>
+</template>
+
+<style lang="scss">
+
+</style>

src/views/chartETA/hooks/useCatalogList.js

@@ -0,0 +1,80 @@
+import {getStaticImg} from '@/hooks/common'
+import {ref} from 'vue'
+import apiChart from '@/api/chart'
+export function useCatalogList(){
+    //操作栏图标的地址
+    const iconSrc = {
+        'addNext':getStaticImg('ppt/icon_action_copy.png'),
+        'reName':getStaticImg('ppt/icon_action_copy.png'),
+        'delete':getStaticImg('ppt/icon_action_copy.png'),
+        'moveTo':getStaticImg('ppt/icon_action_copy.png'),
+        'addChart':getStaticImg('ppt/icon_action_copy.png')
+    }
+    //目录,图表的操作栏
+    const optArrNode=[
+        {
+            label:'添加子分类',
+            icon:iconSrc.addNext,//图标地址
+            id:'addNext'
+        },
+        {
+            label:'重命名',
+            icon:iconSrc.reName,
+            id:'reName'
+        },
+        {
+            label:'删除',
+            icon:iconSrc.delete,
+            id:'delete'
+        },
+    ]
+    const optArrItem=[
+        {
+            label:'移动至',
+            icon:iconSrc.moveTo,
+            id:'moveTo'
+        },
+        {
+            label:'重命名',
+            icon:iconSrc.reName,
+            id:'reName'
+        },
+        {
+            label:'删除',
+            icon:iconSrc.delete,
+            id:'delete'
+        }
+    ]
+    const optArrChart=[
+        {
+            label:'加入我的图库',
+            icon:iconSrc.addChart,
+            id:'addChart'
+        },
+        {
+            label:'移动至',
+            icon:iconSrc.moveTo,
+            id:'moveTo'
+        },
+    ]
+    //目录列表
+    const catalogNodes = ref([])
+    //获取目录列表
+    async function getCatalogList(){
+        const res = await apiChart.ETAChartClassifyList()
+        if(res.Ret!==200) return 
+        catalogNodes.value = res.Data?res.Data.AllNodes:[]||[]
+    }
+
+
+
+
+
+    return {
+        optArrNode,
+        optArrItem,
+
+        catalogNodes,
+        getCatalogList
+    }
+}