拖动排序

package.json

@@ -31,7 +31,8 @@
     "vant": "^4.1.2",
     "vconsole": "^3.15.0",
     "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",

src/api/myETA.js

@@ -226,5 +226,14 @@ export default{
      */
     myETAChartSearch(params){
         return get('/my_chart/search_by_es',params)
+    },
+    /**
+     * 我的图库分类排序
+     * @param MyChartClassifyId
+     * @param NextClassifyId
+     * @param PrevClassifyId
+     */
+    myETAClassifySort(params){
+        return post('/my_chart/classify/move',params)
     }
 }

src/views/myETA/Index.vue

@@ -1,10 +1,11 @@
 <script setup name="MyETAIndex">
-import {ref,reactive} from 'vue'
+import {ref,reactive,computed} from 'vue'
 import { useRouter } from 'vue-router'
 import {useClassify} from './hooks/useClassify'
-import {apiMyChartList,apiMyChartRemove} from '@/api/myETA'
+import apiMyETA  from '@/api/myETA'
 import { showConfirmDialog, showToast } from 'vant';
 import { useWindowSize } from '@vueuse/core'
+import draggable from 'vuedraggable'
 
 const { width, height } = useWindowSize()
 
@@ -26,6 +27,25 @@ const {
     handleAddClassifyBeforeClose
 }=useClassify()
 
+const curChartClassifyList=computed(()=>{
+    return classifyState.classifyTypeAct==1?classifyState.myClassifyList:classifyState.pubClassifyList
+})
+// 拖动排序结束
+function onClassifySortEnd(e){
+    console.log(e);
+    const index=e.item.__draggable_context.index
+    const aitem=e.item.__draggable_context.element
+    const params={
+        MyChartClassifyId:aitem.MyChartClassifyId,
+        NextClassifyId:curChartClassifyList.value[index+1]?.MyChartClassifyId||0,
+        PrevClassifyId:curChartClassifyList.value[index-1]?.MyChartClassifyId||0,
+    }
+    console.log(params);
+    apiMyETA.myETAClassifySort(params).then(res=>{
+
+    })
+}
+
 const showClassifyPop=ref(false)
 
 async function initPage(){
@@ -55,7 +75,7 @@ const listState = reactive({
     total:0,
 })
 async function getChartList(){
-    const res=await apiMyChartList({
+    const res=await apiMyETA.myChartList({
         CurrentIndex:listState.page,
         PageSize:listState.pageSize,
         MyChartClassifyId:listState.cid
@@ -105,7 +125,7 @@ function handleRemoveChart(item,index){
         title: '提示',
         message:'是否确认移出？',
     }).then(()=>{
-        apiMyChartRemove({
+        apiMyETA.myChartRemove({
             MyChartClassifyId:Number(listState.cid),
             MyChartId:item.MyChartId
         }).then(res=>{
@@ -189,7 +209,31 @@ function goDetail(item){
                     @click="classifyTypeChange(item)"
                 >{{item.name}}</span>
             </div>
-            <ul class="list-box">
+            <draggable 
+                class="list-box"
+                :list="curChartClassifyList" 
+                item-key="MyChartClassifyId"
+                animation="300"
+                @end="onClassifySortEnd"
+                :disabled="classifyState.classifyTypeAct!=1"
+                tag="ul"
+            >
+                <template #item="{element}">
+                    <li 
+                        class="item"
+                        @click="handleSwitchClassify(element)"
+                    >
+                        <div :class="['van-ellipsis name',element.MyChartClassifyId===listState.cid&&'active-name']">{{element.MyChartClassifyName}}</div>
+                        <div class="icon-drag-box" v-if="classifyState.classifyTypeAct==1">
+                            <img src="@/assets/imgs/icon_drag.png" alt="">
+                        </div>
+                        <div class="icon-menu-box" @click.stop="handleShowOpt(element)">
+                            <img src="@/assets/imgs/myETA/icon_opt.png" alt="">
+                        </div>
+                    </li>
+                </template>
+            </draggable>
+            <!-- <ul class="list-box">
                 <li 
                     class="item"
                     v-for="item in classifyState.classifyTypeAct==1?classifyState.myClassifyList:classifyState.pubClassifyList"
@@ -197,11 +241,14 @@ function goDetail(item){
                     @click="handleSwitchClassify(item)"
                 >
                     <div :class="['van-ellipsis name',item.MyChartClassifyId===listState.cid&&'active-name']">{{item.MyChartClassifyName}}</div>
-                    <div class="icon-drag-box">
+                    <div class="icon-drag-box" v-if="classifyState.classifyTypeAct==1">
                         <img src="@/assets/imgs/icon_drag.png" alt="">
                     </div>
+                    <div class="icon-menu-box" @click.stop="handleShowOpt(item)">
+                        <img src="@/assets/imgs/myETA/icon_opt.png" alt="">
+                    </div>
                 </li>
-            </ul>
+            </ul> -->
             <div class="bot-btns">
                 <van-button type="primary" block @click="handleAddClassify('')">添加我的分类</van-button>
             </div>
@@ -221,6 +268,49 @@ function goDetail(item){
             <input type="text" placeholder="请输入分类名称！" v-model="classifyState.classifyNameVal">
         </div>
     </van-dialog>
+
+    <!-- 分类操作弹窗 -->
+    <van-popup 
+        v-model:show="classifyState.showClassifyOpt" 
+        round
+        position="bottom"
+    >
+        <div class="classify-opt-wrap">
+            <div class="item border">
+                <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
+                <span>{{classifyState.activeClassifyVal.MyChartClassifyName}}</span>
+            </div>
+            <!-- 我的图库分类操作 -->
+            <template v-if="classifyState.classifyTypeAct==1">
+            <div class="item border blue" @click="handleAddClassify(classifyState.activeClassifyVal)">
+                <img src="@/assets/imgs/ppt/ppt_icon_write.png" alt="">
+                <span>重命名</span>
+            </div>
+            <div class="item border blue">
+                <img src="@/assets/imgs/icon_user.png" alt="">
+                <span>所有人可见</span>
+                <van-switch
+                    class="switch-box"
+                    size="22px" 
+                    :model-value="classifyState.activeClassifyVal.IsPublic?true:false"
+                    @update:model-value="handleClassifyShare"
+                />
+            </div>
+            <div class="item border red" @click="handleClassifyDel(classifyState.activeClassifyVal)">
+                <img src="@/assets/imgs/icon_del.png" alt="">
+                <span>删除</span>
+            </div>
+            </template>
+            <!-- 公共图库分类操作 -->
+            <template v-if="classifyState.classifyTypeAct==2">
+            <div class="item border blue" @click="handleCopyClassify(classifyState.activeClassifyVal)">
+                <img src="@/assets/imgs/ppt/ppt_icon_copy.png" alt="">
+                <span>复制</span>
+            </div>
+            </template>
+        </div>
+
+    </van-popup>
 </template>
 
 <style lang="scss" scoped>
@@ -341,6 +431,15 @@ function goDetail(item){
                     height: 100%;
                 }
             }
+            .icon-menu-box{
+                margin-left: 20px;
+                width: 48px;
+                height: 48px;
+                img{
+                    width: 100%;
+                    height: 100%;
+                }
+            }
         }
     }
     .bot-btns{
@@ -366,6 +465,35 @@ function goDetail(item){
     }
 }
 
+.classify-opt-wrap{
+    .item{
+        padding: 42px;
+        display: flex;
+        align-items: center;
+        position: relative;
+        img{
+            width: 36px;
+            height: 36px;
+            margin-right: 20px;
+        }
+        .switch-box{
+            position: absolute;
+            right: 42px;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+    .border{
+        border-bottom: 1px solid $border-color;
+    }
+    .blue{
+        color: $theme-color;
+    }
+    .red{
+        color: $theme-red;
+    }
+}
+
 
 
 @media screen and (min-width:$media-width){