完善自定义列表、新增右键菜单
This commit is contained in:
lyswhut
+216
-69
@@ -8,34 +8,35 @@ div(:class="$style.download")
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th.nobreak.center(style="width: 10px;") #
|
||||
th.nobreak(style="width: 28%;") {{$t('view.download.name')}}
|
||||
th.nobreak(style="width: 22%;") {{$t('view.download.progress')}}
|
||||
th.nobreak(style="width: 15%;") {{$t('view.download.status')}}
|
||||
th.nobreak.center(style="width: 5%;") #
|
||||
th.nobreak {{$t('view.download.name')}}
|
||||
th.nobreak(style="width: 20%;") {{$t('view.download.progress')}}
|
||||
th.nobreak(style="width: 22%;") {{$t('view.download.status')}}
|
||||
th.nobreak(style="width: 10%;") {{$t('view.download.quality')}}
|
||||
th.nobreak(style="width: 20%;") {{$t('view.download.action')}}
|
||||
div.scroll(v-if="list.length" :class="$style.tbody")
|
||||
th.nobreak(style="width: 13%;") {{$t('view.download.action')}}
|
||||
div.scroll(v-if="list.length" :class="$style.tbody" ref="dom_scrollContent")
|
||||
table
|
||||
tbody(ref="dom_tbody")
|
||||
tr(v-for='(item, index) in showList' :key='item.key' @click="handleDoubleClick($event, index)" :class="playListIndex === index ? $style.active : ''")
|
||||
td.nobreak.center(style="width: 37px;" @click.stop) {{index + 1}}
|
||||
td.break(style="width: 28%;")
|
||||
tr(v-for='(item, index) in showList' :key='item.key' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)" :class="playListIndex === index ? $style.active : ''")
|
||||
td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" @click.stop) {{index + 1}}
|
||||
td.break
|
||||
span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}}
|
||||
td.break(style="width: 22%;") {{item.progress.progress}}%
|
||||
td.break(style="width: 15%;") {{item.statusText}}
|
||||
td.break(style="width: 20%;") {{item.progress.progress}}%
|
||||
td.break(style="width: 22%;") {{item.statusText}}
|
||||
td.break(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
|
||||
td(style="width: 20%; padding-left: 0; padding-right: 0;")
|
||||
material-list-buttons(:index="index" :download-btn="false" :file-btn="item.status != downloadStatus.ERROR"
|
||||
td(style="width: 13%; padding-left: 0; padding-right: 0;")
|
||||
material-list-buttons(:index="index" :download-btn="false" :file-btn="item.status != downloadStatus.ERROR" remove-btn
|
||||
:start-btn="!item.isComplate && item.status != downloadStatus.WAITING && (item.status != downloadStatus.RUN)"
|
||||
:pause-btn="!item.isComplate && (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING)" :list-add-btn="false"
|
||||
:play-btn="item.status == downloadStatus.COMPLETED" :search-btn="item.status == downloadStatus.ERROR" @btn-click="handleListBtnClick")
|
||||
material-flow-btn(:show="isShowEditBtn" :play-btn="false" :download-btn="false" :add-btn="false" :start-btn="true" :pause-btn="true" @btn-click="handleFlowBtnClick")
|
||||
//- material-flow-btn(:show="isShowEditBtn" :play-btn="false" :download-btn="false" :add-btn="false" :start-btn="true" :pause-btn="true" @btn-click="handleFlowBtnClick")
|
||||
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
|
||||
div(:class="$style.noItem" v-else)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions, mapMutations } from 'vuex'
|
||||
import { checkPath, openDirInExplorer } from '../utils'
|
||||
import { checkPath, openDirInExplorer, findParentNode } from '../utils'
|
||||
import path from 'path'
|
||||
|
||||
export default {
|
||||
@@ -45,35 +46,28 @@ export default {
|
||||
clickTime: window.performance.now(),
|
||||
clickIndex: -1,
|
||||
selectdData: [],
|
||||
isShowEditBtn: false,
|
||||
// isShowEditBtn: false,
|
||||
isShowDownloadMultiple: false,
|
||||
tabs: [
|
||||
{
|
||||
name: this.$t('view.download.all'),
|
||||
id: 'all',
|
||||
},
|
||||
{
|
||||
name: this.$t('view.download.runing'),
|
||||
id: 'runing',
|
||||
},
|
||||
{
|
||||
name: this.$t('view.download.paused'),
|
||||
id: 'paused',
|
||||
},
|
||||
{
|
||||
name: this.$t('view.download.error'),
|
||||
id: 'error',
|
||||
},
|
||||
{
|
||||
name: this.$t('view.download.finished'),
|
||||
id: 'finished',
|
||||
},
|
||||
],
|
||||
tabId: 'all',
|
||||
keyEvent: {
|
||||
isShiftDown: false,
|
||||
isModDown: false,
|
||||
},
|
||||
listMenu: {
|
||||
isShowItemMenu: false,
|
||||
itemMenuControl: {
|
||||
play: true,
|
||||
start: true,
|
||||
pause: true,
|
||||
file: true,
|
||||
search: true,
|
||||
remove: true,
|
||||
},
|
||||
menuLocation: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -104,6 +98,64 @@ export default {
|
||||
return this.list
|
||||
}
|
||||
},
|
||||
tabs() {
|
||||
return [
|
||||
{
|
||||
name: this.$t('view.download.all'),
|
||||
id: 'all',
|
||||
},
|
||||
{
|
||||
name: this.$t('view.download.runing'),
|
||||
id: 'runing',
|
||||
},
|
||||
{
|
||||
name: this.$t('view.download.paused'),
|
||||
id: 'paused',
|
||||
},
|
||||
{
|
||||
name: this.$t('view.download.error'),
|
||||
id: 'error',
|
||||
},
|
||||
{
|
||||
name: this.$t('view.download.finished'),
|
||||
id: 'finished',
|
||||
},
|
||||
]
|
||||
},
|
||||
listItemMenu() {
|
||||
return [
|
||||
{
|
||||
name: this.$t('view.download.menu_play'),
|
||||
action: 'play',
|
||||
hide: !this.listMenu.itemMenuControl.play,
|
||||
},
|
||||
{
|
||||
name: this.$t('view.download.menu_start'),
|
||||
action: 'start',
|
||||
hide: !this.listMenu.itemMenuControl.start,
|
||||
},
|
||||
{
|
||||
name: this.$t('view.download.menu_pause'),
|
||||
action: 'pause',
|
||||
hide: !this.listMenu.itemMenuControl.pause,
|
||||
},
|
||||
{
|
||||
name: this.$t('view.download.menu_file'),
|
||||
action: 'file',
|
||||
hide: !this.listMenu.itemMenuControl.file,
|
||||
},
|
||||
{
|
||||
name: this.$t('view.download.menu_search'),
|
||||
action: 'search',
|
||||
hide: !this.listMenu.itemMenuControl.search,
|
||||
},
|
||||
{
|
||||
name: this.$t('view.download.menu_remove'),
|
||||
action: 'remove',
|
||||
hide: !this.listMenu.itemMenuControl.remove,
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectdData(n) {
|
||||
@@ -228,25 +280,22 @@ export default {
|
||||
index = this.list.findIndex(i => i.key === key)
|
||||
let info = this.list[index]
|
||||
if (info.isComplate) {
|
||||
this.handlePlay(index)
|
||||
this.handlePlay(info)
|
||||
} else if (info.status === this.downloadStatus.RUN) {
|
||||
this.handlePauseTask(index)
|
||||
} else {
|
||||
this.handleStartTask(index)
|
||||
}
|
||||
},
|
||||
async handlePlay(index) {
|
||||
const targetSong = this.list[index]
|
||||
async handlePlay(targetSong) {
|
||||
if (!await checkPath(path.join(this.setting.download.savePath, targetSong.fileName))) return
|
||||
this.setList({ list: { list: this.list, id: 'download' }, index: this.list.findIndex(i => i.key === targetSong.key) })
|
||||
},
|
||||
handleListBtnClick(info) {
|
||||
let item = this.showList[info.index]
|
||||
const key = item.key
|
||||
let index = this.list.findIndex(i => i.key === key)
|
||||
switch (info.action) {
|
||||
case 'play':
|
||||
this.handlePlay(index)
|
||||
this.handlePlay(item)
|
||||
break
|
||||
case 'start':
|
||||
this.startTask(item)
|
||||
@@ -258,10 +307,10 @@ export default {
|
||||
this.removeTask(item)
|
||||
break
|
||||
case 'file':
|
||||
this.handleOpenFolder(index)
|
||||
this.handleOpenFolder(item.filePath)
|
||||
break
|
||||
case 'search':
|
||||
this.handleSearch(index)
|
||||
this.handleSearch(item.musicInfo)
|
||||
break
|
||||
}
|
||||
},
|
||||
@@ -274,40 +323,138 @@ export default {
|
||||
node.classList.add('active')
|
||||
}
|
||||
},
|
||||
async handleFlowBtnClick(action) {
|
||||
let selectdData = [...this.selectdData]
|
||||
this.removeAllSelect()
|
||||
await this.$nextTick()
|
||||
// async handleFlowBtnClick(action) {
|
||||
// let selectdData = [...this.selectdData]
|
||||
// this.removeAllSelect()
|
||||
// await this.$nextTick()
|
||||
|
||||
switch (action) {
|
||||
case 'start':
|
||||
this.startTasks(selectdData)
|
||||
break
|
||||
case 'pause':
|
||||
this.pauseTasks(selectdData)
|
||||
break
|
||||
case 'remove':
|
||||
this.removeTasks(selectdData)
|
||||
break
|
||||
}
|
||||
// switch (action) {
|
||||
// case 'start':
|
||||
// this.startTasks(selectdData)
|
||||
// break
|
||||
// case 'pause':
|
||||
// this.pauseTasks(selectdData)
|
||||
// break
|
||||
// case 'remove':
|
||||
// this.removeTasks(selectdData)
|
||||
// break
|
||||
// }
|
||||
// },
|
||||
async handleOpenFolder(filePath) {
|
||||
if (!await checkPath(filePath)) return
|
||||
openDirInExplorer(filePath)
|
||||
},
|
||||
async handleOpenFolder(index) {
|
||||
let path = this.list[index].filePath
|
||||
if (!await checkPath(path)) return
|
||||
openDirInExplorer(path)
|
||||
},
|
||||
handleSearch(index) {
|
||||
const info = this.list[index].musicInfo
|
||||
handleSearch(musicInfo) {
|
||||
this.$router.push({
|
||||
path: 'search',
|
||||
query: {
|
||||
text: `${info.name} ${info.singer}`,
|
||||
text: `${musicInfo.name} ${musicInfo.singer}`,
|
||||
},
|
||||
})
|
||||
},
|
||||
handleTabChange() {
|
||||
this.selectdData = []
|
||||
},
|
||||
handleListItemRigthClick(event, index) {
|
||||
let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
|
||||
if (dom_selected) dom_selected.classList.remove('selected')
|
||||
this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
|
||||
let dom_td = findParentNode(event.target, 'TD')
|
||||
this.listMenu.rightClickItemIndex = index
|
||||
this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
|
||||
this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
|
||||
|
||||
let item = this.showList[index]
|
||||
if (item.isComplate) {
|
||||
this.listMenu.itemMenuControl.play =
|
||||
this.listMenu.itemMenuControl.file = true
|
||||
this.listMenu.itemMenuControl.start =
|
||||
this.listMenu.itemMenuControl.pause = false
|
||||
} else if (item.status === this.downloadStatus.ERROR || item.status === this.downloadStatus.PAUSE) {
|
||||
this.listMenu.itemMenuControl.play =
|
||||
this.listMenu.itemMenuControl.pause =
|
||||
this.listMenu.itemMenuControl.file = false
|
||||
this.listMenu.itemMenuControl.start = true
|
||||
} else {
|
||||
this.listMenu.itemMenuControl.play =
|
||||
this.listMenu.itemMenuControl.start =
|
||||
this.listMenu.itemMenuControl.file = false
|
||||
this.listMenu.itemMenuControl.pause = true
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.listMenu.isShowItemMenu = true
|
||||
})
|
||||
},
|
||||
hideListMenu() {
|
||||
let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
|
||||
if (dom_selected) dom_selected.classList.remove('selected')
|
||||
this.listMenu.isShowItemMenu = false
|
||||
this.listMenu.rightClickItemIndex = -1
|
||||
},
|
||||
handleListItemMenuClick(action) {
|
||||
// console.log(action)
|
||||
let index = this.listMenu.rightClickItemIndex
|
||||
this.hideListMenu()
|
||||
// let key
|
||||
let item
|
||||
|
||||
switch (action && action.action) {
|
||||
case 'play':
|
||||
item = this.showList[index]
|
||||
if (item) this.handlePlay(item)
|
||||
break
|
||||
case 'start':
|
||||
if (this.selectdData.length) {
|
||||
let selectdData = [...this.selectdData]
|
||||
this.removeAllSelect()
|
||||
this.startTasks(selectdData)
|
||||
} else {
|
||||
item = this.showList[index]
|
||||
if (item) this.startTask(item)
|
||||
this.$nextTick(() => {
|
||||
this.isShowDownload = true
|
||||
})
|
||||
}
|
||||
break
|
||||
case 'pause':
|
||||
if (this.selectdData.length) {
|
||||
let selectdData = [...this.selectdData]
|
||||
this.removeAllSelect()
|
||||
this.pauseTasks(selectdData)
|
||||
} else {
|
||||
item = this.showList[index]
|
||||
if (item) this.pauseTask(item)
|
||||
this.$nextTick(() => {
|
||||
this.isShowDownload = true
|
||||
})
|
||||
}
|
||||
break
|
||||
case 'file':
|
||||
item = this.showList[index]
|
||||
// key = item.key
|
||||
// index = this.list.findIndex(i => i.key === key)
|
||||
if (item) this.handleOpenFolder(item.filePath)
|
||||
break
|
||||
case 'search':
|
||||
item = this.showList[index]
|
||||
if (item) this.handleSearch(item.musicInfo)
|
||||
break
|
||||
case 'remove':
|
||||
if (this.selectdData.length) {
|
||||
let selectdData = [...this.selectdData]
|
||||
this.removeAllSelect()
|
||||
this.removeTasks(selectdData)
|
||||
} else {
|
||||
item = this.showList[index]
|
||||
if (item) this.removeTask(item)
|
||||
this.$nextTick(() => {
|
||||
this.isShowDownload = true
|
||||
})
|
||||
}
|
||||
break
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user