加入我的图库

src/api/chart.js

@@ -176,6 +176,16 @@ export default{
      */
     deleteCheck(params){
         return post('/datamanage/chart_classify/delete/check',params)
+    },
+    /**
+     * 移动分类
+     * @param ClassifyId
+     * @param ParentClassifyId
+     * @param PrevClassifyId
+     * @param NextClassifyId
+     */
+    moveClassify(params){
+        return post('/datamanage/chart_classify/move',params)
     }
 
 } 

src/views/chartETA/List.vue

@@ -2,11 +2,18 @@
 //ETA图库页面
 import {ref,reactive} from 'vue'
 import { showToast,showDialog} from "vant";
+import { useWindowSize } from '@vueuse/core'
 import CatalogTree from './components/CatalogTree.vue';
+import OptionPopup from './components/OptionPopup.vue';
+import AddChartToMyETA from './components/AddChartToMyETA.vue';
 import apiChart from '@/api/chart'
 
-import {useCatalogList} from './hooks/useCatalogList'
+import {useCatalogList} from './hooks/useCatalogList';
+
+const { width } = useWindowSize()
+
 const {
+    optArrChart,//图表操作列表
     catalogNodes,//目录列表
     getCatalogList,//获取图库目录
 } = useCatalogList()
@@ -37,7 +44,31 @@ function catalogItemClick({item,type='node',parent}){
     getChartList()
 }
 
-//编辑目录名称参数
+const showOptPopup = ref(false)
+const currentOptArr = ref([])
+const currentNode = ref({})
+//展示操作栏
+function showFileOpt({node,optArr}){
+    currentNode.value = node
+    currentOptArr.value = optArr
+    showOptPopup.value = true
+}
+
+//目录/图表操作栏被点击,处理事件(添加图表分类,添加子分类,重命名,删除分类,移动分类,加入我的图库,移动图表)
+function showFileOptClick({node,opt}){
+    const eventMap = {
+        'addNext':openEditNameDialog,
+        'reName':openEditNameDialog,
+        'delete':openDeleteDialog,
+        'moveTo':openMoveDialog,
+        'addChart':openAddChartDialog,
+        'moveChart':openMoveChartDialog,
+        'cancel':()=>{showOptPopup.value = false}
+    }
+    eventMap[opt.id](node,opt)
+}
+
+//编辑目录参数
 const editNameState = reactive({
     isShowDialog:false,//是否展示编辑名称弹窗
     ChartClassifyId:0,//目录id,为0表示新增
@@ -46,24 +77,8 @@ const editNameState = reactive({
     parentName:'',//上级目录的名称
     type:'addNew',//编辑类型
     title:'添加图表分类',//弹窗标题 ['添加图表分类','添加子分类','重命名']
-    
 })
-//打开编辑目录弹窗的操作id
-const editNameDialogOptIds = ['addNext','reName']
-//目录操作栏被点击,处理事件
-function showFileOptClick({node,opt}){
-    //添加图表分类,添加子分类,重命名
-    if(editNameDialogOptIds.includes(opt.id)){
-        openEditNameDialog(node,opt)
-    }
-    //删除
-    if(opt.id==='delete'){
-        openDeleteDialog(node)
-    }
-    //移动至
-    //加入我的图库
-}
-//编辑目录名称参数
+//编辑目录
 function openEditNameDialog(node,opt){
     const {Level,ChartClassifyId,ChartClassifyName,parentName} = node
     editNameState.Level = Level||1
@@ -75,7 +90,6 @@ function openEditNameDialog(node,opt){
     editNameState.type = opt.id
     editNameState.isShowDialog = true
 }
-
 //根据editNameState调用对应接口
 function handleConfirmEditClassify(){
     //先判断输入框有无内容
@@ -149,6 +163,54 @@ async function openDeleteDialog(node){
     }).catch(()=>{})
 }
 
+//移动分类参数
+const moveClassState = reactive({
+    isShowPopup:false,//是否显示移动分类弹窗
+    ClassifyId:0,//移动的分类id
+    ParentClassifyId:0,//移动至哪个分类下
+    PrevClassifyId:0,//移动后所处的位置,由于不能拖拽,一直为0
+    NextClassifyId:0
+})
+//移动分类
+function openMoveDialog(node){
+    const {ChartClassifyId} = node
+    moveClassState.ClassifyId = ChartClassifyId
+    moveClassState.isShowPopup = true
+}
+function handleMoveClassify({selectedValues}){
+    moveClassState.ParentClassifyId = selectedValues[0]||0
+    moveClassify()
+}
+function closeMoveDialog(){
+    moveClassState.isShowPopup = false
+    moveClassState.ClassifyId = 0
+    moveClassState.ParentClassifyId = 0
+    moveClassState.PrevClassifyId = 0
+    moveClassState.NextClassifyId = 0
+}
+async function moveClassify(){
+    const {ClassifyId,ParentClassifyId,PrevClassifyId,NextClassifyId} = moveClassState
+    const res = await apiChart.moveClassify({
+        ClassifyId,ParentClassifyId,PrevClassifyId,NextClassifyId
+    })
+    if(res.Ret!==200) return 
+    showToast({message:'移动成功',type:'success'})
+    getCatalogList()
+    moveClassState.isShowPopup = false
+
+}
+
+//添加我的图库参数
+const addChartState = reactive({
+    isShowDialog:false,
+    chartInfo:{}
+})
+function openAddChartDialog(node){
+    addChartState.chartInfo = node
+    addChartState.isShowDialog = true
+}
+function openMoveChartDialog(){}
+
 //图表列表
 const listState = reactive({
     cid:0,
@@ -233,7 +295,7 @@ getChartList()
                         <img class="img" :src="item.ChartImage" alt="">   
                         <div class="time">
                             <span>创建时间：{{item.CreateTime.slice(0,10)}}</span>
-                            <span class="tool-icon">
+                            <span class="tool-icon" @click.stop="showFileOpt({node:item,optArr:optArrChart})">
                                 <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                             </span>
                         </div>
@@ -251,7 +313,7 @@ getChartList()
                 <div class="list-box">
                     <CatalogTree 
                         :catalog-nodes="catalogNodes"
-                        :showFileOptClick="showFileOptClick"
+                        :showFileOpt="showFileOpt"
                         @handleCatalogItemClick="catalogItemClick"
                     />
                 </div>
@@ -260,6 +322,14 @@ getChartList()
                 </div>
             </div>
         </van-popup>
+        <!-- 操作栏 -->
+        <OptionPopup 
+            :show-popup="showOptPopup"
+            :node="currentNode"
+            :optArr="currentOptArr"
+            :showFileOptClick="showFileOptClick"
+            @close="showOptPopup=false"
+        />
         <!-- 添加/重命名一二级分类 弹窗 -->
         <van-dialog 
             v-model:show="editNameState.isShowDialog" 
@@ -274,8 +344,23 @@ getChartList()
                 <input type="text" placeholder="请输入分类名称" v-model="editNameState.ChartClassifyName">
             </div>
         </van-dialog>
-        <!-- 移动至 弹窗-->
+        <!-- 移动分类 弹窗-->
+        <van-popup v-model:show="moveClassState.isShowPopup" round position="bottom">
+            <van-picker
+                title="移动至"
+                :columns="catalogNodes"
+                :columns-field-names="{text:'ChartClassifyName',value:'ChartClassifyId'}"
+                @confirm="handleMoveClassify"
+                @cancel="closeMoveDialog"
+                />
+        </van-popup>
         <!-- 加入我的图库 弹窗 -->
+        <AddChartToMyETA 
+            :isShowDialog="addChartState.isShowDialog"
+            :chartInfo="addChartState.chartInfo"
+            @close="addChartState.isShowDialog=false"
+        />
+        <!-- 移动图表弹窗 -->
     </div>
 </template>
 <style lang="scss">
@@ -283,10 +368,36 @@ getChartList()
     .catalog-list-wrap{
         width: 65%;
     }
+    .rename-wrap{
+        padding:48px;
+        input{
+            padding: 24px 32px;
+            border-radius: 12px;
+            background-color: #F6F6F6;
+            width: 100%;
+        }
+        .label{
+            color: #666666;
+            margin-bottom: 32px;
+            text-align: center;
+        }
+    }
     @media screen and (min-width:$media-width){
         .catalog-list-wrap{
             width: 30%;
         }
+        .rename-wrap{
+            padding:24px;
+            input{
+                padding: 12px 16px;
+                border-radius: 6px;
+                background-color: #F6F6F6;
+                width: 100%;
+            }
+            .label{
+                margin-bottom: 16px;
+            }
+        }
     }
 }
 </style>
@@ -355,8 +466,12 @@ getChartList()
                     justify-content: space-between;
                     font-size: 14px;
                     color: $font-grey_999;
-                    .tool-icon>img{
-                        width:5px;
+                    .tool-icon{
+                        width:30px;
+                        text-align: right;
+                        img{
+                            width:5px;
+                        }
                     }
                 }
                 
@@ -396,20 +511,6 @@ getChartList()
             }
         }
     }
-    .rename-wrap{
-        padding:48px;
-        input{
-            padding: 24px 32px;
-            border-radius: 12px;
-            background-color: #F6F6F6;
-            width: 100%;
-        }
-        .label{
-            color: #666666;
-            margin-bottom: 32px;
-            text-align: center;
-        }
-    }
 
     @media screen and (min-width:$media-width){
         .select-wrap{
@@ -477,18 +578,6 @@ getChartList()
                 }
             }
         }
-        .rename-wrap{
-            padding:24px;
-            input{
-                padding: 12px 16px;
-                border-radius: 6px;
-                background-color: #F6F6F6;
-                width: 100%;
-            }
-            .label{
-                margin-bottom: 16px;
-            }
-        }
     }
 }
 </style>

src/views/chartETA/components/AddChartToMyETA.vue

@@ -0,0 +1,201 @@
+<script setup>
+//加入我的图库
+import {ref,watch} from 'vue'
+import {showToast} from 'vant'
+import{apiMyClassifyList,apiMyChartAdd} from '@/api/myETA'
+
+const props = defineProps({
+    isShowDialog:{//是否展示弹窗
+        type:Boolean,
+        default:false
+    },
+    dialogPosition:{//弹窗显示的位置,根据屏幕大小决定
+        type:String,
+        default:'bottom'
+    },
+    chartInfo:{//图表信息
+        type:Object,
+        default:{}
+    }
+})
+
+//是否展示添加分类弹窗
+const showAddClassify = ref(false)
+//新添加的分类名称
+const addClassifyName = ref('')
+
+//我的图库分类列表
+const classifyList = ref([])
+//chartInfo中,已选择的分类ids
+const choosedIds = ref([])
+
+const showAddPop = ref(false)
+watch(()=>props.isShowDialog,()=>{
+    if(props.isShowDialog){
+        getMyClassifyList()
+    }
+    showAddPop.value = props.isShowDialog
+})
+const emits = defineEmits(['close'])
+watch(showAddPop,()=>{
+    if(!showAddPop.value){
+        emits('close')
+    }
+})
+//获取我的图库列表
+async function getMyClassifyList(){
+    const res = await apiMyClassifyList()
+    if(res.Ret!==200) return 
+    classifyList.value = res.Data.List||[]
+    choosedIds.value = props.chartInfo.MyChartClassifyId?props.chartInfo.MyChartClassifyId.split(',').map(e => Number(e)):[]
+
+}
+function closeDialog(){
+    emits('close')
+}
+//选择分类
+function handleChooseClassify(item){
+    if(choosedIds.value.includes(item.MyChartClassifyId)){
+        const index=choosedIds.value.indexOf(item.MyChartClassifyId)
+        choosedIds.value.splice(index,1)
+    }else{
+        choosedIds.value.push(item.MyChartClassifyId)
+    }
+    
+}
+//确认加入的分类
+function handleConfirmAddChart(){
+    if(choosedIds.value.length===0){
+        showToast('请选择分类')
+        return
+    }
+    apiMyChartAdd({
+        ChartInfoId:props.chartInfo.ChartInfoId,
+        MyChartClassifyId:choosedIds.value
+    }).then(res=>{
+        if(res.Ret!==200) return 
+        showToast({message:'加入我的图库成功',type:'success'})
+        closeDialog()
+
+    })
+}
+//添加新的分类
+function handleConfirmEditClassify(){}
+</script>
+
+<template>
+    <van-popup 
+        v-model:show="showAddPop" 
+        :position="dialogPosition"
+        round
+    >
+        <div class="select-classify-wrap">
+            <div class="top-box">
+                <span class="close" @click="closeDialog">关闭</span>
+                <span class="title">加入我的图库</span>
+                <span class="add-btn" @click="showAddClassify=true,addClassifyName=''">添加分类</span>
+            </div>
+            <ul class="classify-list">
+                <li 
+                    :class="['item',choosedIds.includes(item.MyChartClassifyId)?'active':'']" 
+                    v-for="item in classifyList" 
+                    :key="item.MyChartClassifyId"
+                    @click="handleChooseClassify(item)"
+                >{{item.MyChartClassifyName}}</li>
+            </ul>
+            <div class="block"></div>
+            <div class="confirm-btn" @click="handleConfirmAddChart">
+                <span>确定</span>
+            </div>
+        </div>
+    </van-popup>
+    <van-dialog 
+        v-model:show="showAddClassify" 
+        title="添加分类" 
+        show-cancel-button
+        confirmButtonText="确定"
+        @confirm="handleConfirmEditClassify"
+    >
+        <div class="rename-wrap">
+            <input type="text" placeholder="请输入分类名称！" v-model="addClassifyName">
+        </div>
+    </van-dialog>
+</template>
+
+<style scoped lang="scss">
+.select-classify-wrap{
+    .top-box{
+        padding:32px;
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid #DCDFE6;
+        .close{
+            color:#666666;
+        }
+        .title{
+            font-size: 36px;
+        }
+        .add-btn{
+            color:$theme-color;
+        }
+    }
+    .classify-list{
+        .item{
+            padding:32px;
+            border-bottom: 1px solid #DCDFE6;
+            
+            &.active{
+                color:$theme-color;
+                position: relative;
+                &::after{
+                    content: '';
+                    display: block;
+                    width: 36px;
+                    height: 36px;
+                    background-image: url('@/assets/imgs/icon_select2.png');
+                    background-size: cover;
+                    background-repeat: no-repeat;
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    right: $page-padding;
+                }
+            }
+        }
+    }
+    .confirm-btn{
+        padding:32px;
+        text-align: center;
+        color: $theme-color;
+    }
+    .block{
+        background-color: #F6F6F6;
+        height:16px;
+    }
+    @media screen and (min-width:$media-width){
+        .top-box{
+            padding:16px;
+            .title{
+                font-size: 18px;
+            }
+        }
+        .classify-list{
+            .item{
+                padding:16px;
+                &.active{
+                    &::after{
+                        width:18px;
+                        height:18px;
+                    }
+                }
+            }
+        }
+        .confirm-btn{
+            padding:16px;
+        }
+        .block{
+            height:8px;
+        }
+    }
+}
+</style>

src/views/chartETA/components/CatalogItem.vue

@@ -15,67 +15,23 @@ const props = defineProps({
     }
 })
 
-const emits=defineEmits(['showFileOptClick'])
-const showPopup = ref(false)
-function fileOptClick(opt){
-    showPopup.value = false
-    emits('showFileOptClick',{node:props.node,opt})
+const emits=defineEmits(['showFileOptClick','showPopup'])
+function showPopup(){
+    emits('showPopup',{node:props.node,optArr:props.optArr})
 }
 </script>
 
 <template>
     <div class="catalog-item" :class="{'leaf-padding':!showFileImg}">
         <span class="van-ellipsis" :class="{'leaf-padding':!showFileImg}">{{node.ChartClassifyName||''}}</span>
-        <div @click.stop="showPopup=true">
+        <div @click.stop="showPopup">
             <div class="menu-icon">
                 <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
             </div>
-            <van-popup v-model:show="showPopup" round position="bottom" teleport=".chart-eta-list-wrap">
-                <div class="catalog-file-opt-box">
-                    <div class="opt-item" v-for="opt in optArr" :key="opt.label" @click="fileOptClick(opt)">
-                        <span>{{opt.label}}</span>
-                    </div>
-                    <div class="opt-item last" @click="fileOptClick({id:'cancel'})">
-                        <span>确定</span>
-                    </div>
-                </div>
-            </van-popup>
         </div>
     </div>
 </template>
 
-<style lang="scss">
-.catalog-file-opt-box{
-    background-color: #F6F6F6;
-    .opt-item{
-        display: flex;
-        padding:32px;
-        align-items: center;
-        justify-content: center;
-        border-bottom: 1px solid $border-color;
-        background-color: #FFFFFF;
-        img{
-            width:44px;
-        }
-        span{
-            white-space: nowrap;
-        }
-        &.last{
-            border-bottom: none;
-            margin-top:16px;
-        }
-        @media screen and (min-width:$media-width){
-            padding:16px;
-            img{
-                width:32px;
-            }
-            &.last{
-                margin-top: 8px;
-            }
-        }
-    }
-}
-</style>
 <style scoped lang="scss">
 .catalog-item{
     display: flex;

src/views/chartETA/components/CatalogTree.vue

@@ -7,7 +7,7 @@ const props = defineProps({
         type:Array,
         default:[]
     },
-    showFileOptClick:Function
+    showFileOpt:Function
 })
 const emits=defineEmits(['handleCatalogItemClick'])
 //展开的目录
@@ -34,7 +34,7 @@ function handleCatalogItemClick(item,type,node){
                 <CatalogItem 
                     :node="node" 
                     :optArr="optArrNode"
-                    @showFileOptClick="showFileOptClick"/>
+                    @showPopup="showFileOpt"/>
             </template>
             <div 
                 class="list-item"
@@ -46,7 +46,7 @@ function handleCatalogItemClick(item,type,node){
                     :node="item" 
                     :showFileImg="false" 
                     :optArr="optArrItem"
-                    @showFileOptClick="showFileOptClick"/>
+                    @showPopup="showFileOpt"/>
             </div>
             </van-collapse-item>
         </van-collapse>

src/views/chartETA/components/OptionPopup.vue

@@ -0,0 +1,84 @@
+<script setup>
+//目录,图表操作栏
+import {ref,watch} from 'vue'
+const props = defineProps({
+    showPopup:{//是否展示操作栏
+        type:Boolean,
+        default:false
+    },
+    optArr:{
+        type:Array,
+        default:[]
+    },
+    node:{
+        type:Object,
+        default:{}
+    },
+    showFileOptClick:Function
+})
+
+const showPop = ref(false)
+watch(()=>props.showPopup,()=>{
+    showPop.value = props.showPopup
+})
+const emits=defineEmits(['close'])
+watch(showPop,()=>{
+    if(!showPop.value){
+        emits('close')
+    }
+})
+function fileOptClick(opt){
+    showPop.value = false
+    props.showFileOptClick({node:props.node,opt})
+}
+
+</script>
+
+<template>
+    <van-popup v-model:show="showPop" round position="bottom" >
+        <div class="catalog-file-opt-box">
+            <div class="opt-item" v-for="opt in optArr" :key="opt.label" @click="fileOptClick(opt)">
+                <span>{{opt.label}}</span>
+            </div>
+            <div class="opt-item last" @click="fileOptClick({id:'cancel'})">
+                <span>确定</span>
+            </div>
+        </div>
+    </van-popup>
+</template>
+
+<style lang="scss">
+.catalog-file-opt-box{
+    background-color: #F6F6F6;
+    .opt-item{
+        display: flex;
+        padding:32px;
+        align-items: center;
+        justify-content: center;
+        border-bottom: 1px solid $border-color;
+        background-color: #FFFFFF;
+        img{
+            width:44px;
+        }
+        span{
+            white-space: nowrap;
+        }
+        &.last{
+            border-bottom: none;
+            margin-top:16px;
+        }
+        @media screen and (min-width:$media-width){
+            padding:16px;
+            img{
+                width:32px;
+            }
+            &.last{
+                margin-top: 8px;
+            }
+        }
+    }
+}
+</style>
+<style scoped lang="scss">
+
+</style>

src/views/chartETA/hooks/useCatalogList.js

@@ -55,7 +55,7 @@ export function useCatalogList(){
         {
             label:'移动至',
             icon:iconSrc.moveTo,
-            id:'moveTo'
+            id:'moveChart'
         },
     ]
     //目录列表
@@ -76,9 +76,6 @@ export function useCatalogList(){
         })
     }
 
-    //添加/编辑目录名称
-    function editCatalog(){}
-
 
 
 
@@ -86,6 +83,7 @@ export function useCatalogList(){
     return {
         optArrNode,
         optArrItem,
+        optArrChart,
 
         catalogNodes,
         getCatalogList