我的列表右键菜单新增列表排序功能

src/renderer/views/List.vue

@@ -69,6 +69,7 @@
     material-menu(:menus="listsItemMenu" :location="listsData.menuLocation" item-name="name" :isShow="listsData.isShowItemMenu" @menu-click="handleListsItemMenuClick")
     material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
     material-search-list(:list="list" @action="handleMusicSearchAction" :visible="isVisibleMusicSearch")
+    material-list-sort-modal(:show="isShowListSortModal" :music-info="musicInfo" :selected-num="selectdListDetailData.length" @close="isShowListSortModal = false" @confirm="handleSortMusicInfo")
 </template>
 
 <script>
@@ -91,6 +92,7 @@ export default {
       delayShow: false,
       isShowListAdd: false,
       isShowListAddMultiple: false,
+      isShowListSortModal: false,
       delayTimeout: null,
       isToggleList: true,
       focusTarget: 'listDetail',
@@ -123,6 +125,7 @@ export default {
           copyName: true,
           addTo: true,
           moveTo: true,
+          sort: true,
           download: true,
           remove: true,
           sourceDetail: true,
@@ -229,6 +232,11 @@ export default {
           action: 'sourceDetail',
           disabled: !this.listMenu.itemMenuControl.sourceDetail,
         },
+        {
+          name: this.$t('view.list.list_sort'),
+          action: 'sort',
+          disabled: !this.listMenu.itemMenuControl.sort,
+        },
         {
           name: this.$t('view.list.list_add_to'),
           action: 'addTo',
@@ -329,6 +337,7 @@ export default {
       'removeUserList',
       'setListScroll',
       'setList',
+      'sortList',
     ]),
     ...mapActions('songList', ['getListDetailAll']),
     ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
@@ -809,6 +818,20 @@ export default {
             })
           }
           break
+        case 'sort':
+          this.isShowListSortModal = true
+          this.musicInfo = this.list[index]
+          // if (this.selectdListDetailData.length) {
+          //   this.isShowDownloadMultiple = true
+          // } else {
+          //   minfo = this.list[index]
+          //   if (!this.assertApiSupport(minfo.source)) return
+          //   this.musicInfo = minfo
+          //   this.$nextTick(() => {
+          //     this.isShowDownload = true
+          //   })
+          // }
+          break
         case 'remove':
           if (this.selectdListDetailData.length) {
             this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
@@ -854,11 +877,22 @@ export default {
       const targetListInfo = this.userList[index]
       const list = await this.fetchList(targetListInfo.id, targetListInfo.source, targetListInfo.sourceListId)
       // console.log(targetListInfo.list.length, list.length)
+      this.removeAllSelectListDetail()
       this.setList({
         ...targetListInfo,
         list,
       })
     },
+    handleSortMusicInfo(num) {
+      num = Math.min(num, this.list.length)
+      this.sortList({
+        id: this.listId,
+        sortNum: num,
+        musicInfos: this.selectdListDetailData.length ? [...this.selectdListDetailData] : [this.musicInfo],
+      })
+      this.removeAllSelectListDetail()
+      this.isShowListSortModal = false
+    },
   },
 }
 </script>