lion/lionwebsite-frontend-desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

加入标签编辑跟收藏

Browse Source
This commit is contained in:
chuzhongzai 2022-12-29 19:16:30 +08:00
parent aca3da4b7b
commit 9aca694f68
2 changed files with 165 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/Side.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="side" style="width: 100%">
<span v-show="loadComplete">{{showType === 'gallery' ? '本子' : '视频'}}历史</span>
<span v-show="loadComplete">{{showType === 'gallery' || showType === 'collect' ? '本子' : '视频'}}历史</span>
<div v-show="loadComplete" class="load_complete">
<el-table :data="galleryTasks" v-show="isShowGalleryHistory">
@ -13,6 +13,10 @@
文件大小:{{props.row.fileSize}}<br>
分辨率:{{props.row.resolution}}<br>
任务创建时间:{{props.row.createTimeDisplay}}<br>
标签:{{props.row.tag === '' ? '无': props.row.tag}} <br>
<el-button @click="changeCollect(props.row.gid, props.row.isCollect)">{{props.row.isCollect ? '取消收藏' : '收藏'}}</el-button>
<el-button @click="editTag(props.row.gid, props.row.tag)">编辑标签</el-button>
</template>
</el-table-column>
@ -78,14 +82,19 @@
<el-row class="pageChanger">
<el-col>
筛选:<el-select v-model="showType" @change="changeShowType">
<el-option value="gallery" label="本子"/>
<el-option value="video" label="视频"/>
<el-option value="collect" label="收藏"/>
</el-select>
排列顺序:<el-select v-model="sortType" @change="changeSortType">
<el-option value="name" label="名字"></el-option>
<el-option value="shortName" label="简洁名字"></el-option>
<el-option value="createTime" label="任务创建时间"></el-option>
<el-option value="name" label="名字"/>
<el-option value="shortName" label="简洁名字"/>
<el-option value="createTime" label="任务创建时间"/>
</el-select>
显示:<el-select v-model="showNameType" @change="changeShowNameType">
<el-option value="name" label="名字"></el-option>
<el-option value="shortName" label="简洁名字"></el-option>
<el-option value="name" label="名字"/>
<el-option value="shortName" label="简洁名字"/>
</el-select>
</el-col>
<el-col>
@ -93,19 +102,33 @@
<el-button @click="previous">-</el-button>
<el-input v-model="targetPage"
@change="changePage"
v-show="isEditing"
v-show="isEditingPage"
@blur="reverseEditMode"
class="page"
ref="inputNode"></el-input>
<span @click="reverseEditMode" v-show="!isEditing" class="page">{{page}}</span>
<span @click="reverseEditMode" v-show="!isEditingPage" class="page">{{page}}</span>
<el-button @click="next">+</el-button>
<el-button @click="toMax">{{max}}</el-button>
</el-col>
<el-col>
<el-button @click="changeShowType">切换</el-button>
</el-col>
</el-row>
</div>
<el-dialog v-model="isEditingTag" title="编辑标签">
<el-form>
<el-form-item>
<template #label>
标签:
</template>
<template #default>
<el-input v-model="tempTag"></el-input>
</template>
</el-form-item>
</el-form>
<el-footer>
<el-button @click="submitTag">提交修改</el-button>
</el-footer>
</el-dialog>
<span v-show="!loadComplete" class="side">请输入授权码后再查看</span>
</div>
</template>
@ -117,9 +140,12 @@ export default {
name: "Side",
setup(){
let inputNode = ref(null)
let isEditing = ref(false)
let isEditingPage = ref(false)
let isEditingTag = ref(false)
let tempTag = ref("")
let tempGid = ref("")
let showNameType = ref("shortName") // shortName name
let showType = ref("gallery") // gallery video
let showType = ref("gallery") // gallery video collect
let sortType = ref("shortName") // shortName name createTime
let targetPage = ref(1)
let debounceTimer = 0
@ -129,17 +155,11 @@ export default {
})
let galleryTasks = computed(() => {
if(store.getters.galleryTasks)
return store.getters.galleryTasks
else
return null
return store.getters.galleryTasks ? store.getters.galleryTasks: null
})
let videoTasks = computed(() => {
if(store.getters.videoTasks)
return store.getters.videoTasks
else
return null
return store.getters.videoTasks ? store.getters.videoTasks: null
})
let isShowVideoHistory = computed(() => {
@ -147,7 +167,7 @@ export default {
})
let isShowGalleryHistory = computed(() => {
return store.state.showType === "gallery"
return store.state.showType === "gallery" || store.state.showType === "collect"
})
let min = computed(() => {
@ -195,14 +215,7 @@ export default {
}
function changeShowType(){
if(isShowVideoHistory.value){
store.commit("_setShowType", "gallery")
showType.value = "gallery"
}
else{
store.commit("_setShowType", "video")
showType.value = "video"
}
store.commit("_setShowType", showType.value)
}
function changeShowNameType(){
@ -223,9 +236,29 @@ export default {
}
}
function changeCollect(gid, isCollect){
if(isCollect)
store.dispatch("disCollectGallery", gid)
else
store.dispatch("collectGallery", gid)
}
function editTag(gid, tag){
tempTag.value = tag
tempGid.value = gid
isEditingTag.value = true
}
function submitTag(){
store.dispatch("updateTag", {gid:tempGid.value, tag:tempTag.value})
tempTag.value = ''
tempGid.value = ''
isEditingTag.value = false
}
function reverseEditMode(){
isEditing.value = !isEditing.value
if(isEditing){
isEditingPage.value = !isEditingPage.value
if(isEditingPage.value){
inputNode.value.focus()
}
targetPage.value = page.value
@ -259,10 +292,10 @@ export default {
}, 500)
}
return {galleryTasks, videoTasks, min, max, targetPage, loadComplete, page, isEditing, inputNode, isShowVideoHistory,
isShowGalleryHistory, showType, showNameType, sortType,
reverseEditMode, changePage, changeShowType, changeShowNameType, changeSortType, toMax, toMin, previous, next, downloadTask, deleteGallery,
deleteVideo, onlineGalleryReader, onlineVideoViewer, showThumbnail,
return {galleryTasks, videoTasks, min, max, targetPage, loadComplete, page, isEditingPage, isEditingTag, inputNode, isShowVideoHistory,
isShowGalleryHistory, showType, showNameType, sortType, tempTag, tempGid,
reverseEditMode, changePage, changeShowType, changeShowNameType, changeSortType, changeCollect, toMax, toMin, previous, next, downloadTask, deleteGallery,
deleteVideo, onlineGalleryReader, onlineVideoViewer, showThumbnail, editTag, submitTag,
store
}
}
@ -281,6 +314,9 @@ export default {
position: absolute;
top: 85vh;
}
.el-select{
width: 125px;
}
.page{
display: inline-block;
width: 50px;

95
src/store/index.js
View File

@ -119,6 +119,7 @@ const actions = {
validate(context, AuthCode){
axios.post(BaseUrl + "validate?AuthCode=" + AuthCode).then((res)=>{
if(res.data.result === 'success'){
state.userId = parseInt(res.data.data)
context.commit("_authed", AuthCode)
context.dispatch("loadMaskDomain").then()
context.dispatch("loadWeekUsedAmount").then()
@ -148,6 +149,37 @@ const actions = {
ElMessage("查询用量失败")
})
},
collectGallery(context, gid){
axios.post(GalleryManageUrl + "/collect?" +qs.stringify( {
gid,
id:state.userId
})).then((res) => {
ElMessage(res.data.data)
if(res.data.result === 'success'){
context.commit("_collectGallery", gid)
}
})
},
disCollectGallery(context, gid){
axios.post(GalleryManageUrl + "/disCollect?" + qs.stringify(
{
gid,
id:state.userId
})).then((res) => {
ElMessage(res.data.data)
if(res.data.result === 'success'){
context.commit("_disCollectGallery", gid)
}
})
},
updateTag(context, data){
axios.post(GalleryManageUrl + "/tag?" + qs.stringify(data)).then((res) => {
ElMessage(res.data.data)
if(res.data.result === 'success'){
context.commit("_updateTag", data)
}
})
},
searchByLink(context, link){
context.commit("_searchByLink", link)
},
@ -232,11 +264,39 @@ const actions = {
}
const mutations = {
_collectGallery(state, gid){
state.totalGalleryTask.forEach((gallery) => {
if(!gallery.isCollect && gallery.gid === gid){
gallery.isCollect = true
state.collectGallery.push(gallery)
}
})
},
_disCollectGallery(state, gid){
state.collectGallery.splice(0)
state.totalGalleryTask.forEach((gallery) => {
if(gallery.isCollect && gallery.gid === gid)
gallery.isCollect = false
if(gallery.isCollect)
state.collectGallery.push(gallery)
})
},
_updateTag(state, data){
state.totalGalleryTask.forEach((gallery) => {
if(gallery.gid === data.gid){
gallery.tag = data.tag
}
})
},
_updateGalleryTasks(state, data){
let {tasks, type} = data
if(type === 'all') {
state.totalGalleryTask.splice(0)
state.collectGallery.slice(0)
tasks.forEach((task) => {
//处理名字
if (task.name.includes("[")) {
let name = task.name
let lastIndex = name.lastIndexOf("[")
@ -258,6 +318,7 @@ const mutations = {
task.shortName = task.name
}
//处理进度相关
switch (task.status) {
case "已提交":
task.progress = "已提交"
@ -277,7 +338,29 @@ const mutations = {
break;
}
//处理时间戳
task.createTimeDisplay = moment(task.createTime * 1000).format("YYYY-MM-DD HH:mm:ss")
//处理标签
if (task.tag === undefined) {
task.tag = ""
}
//处理是否收藏
if(task.collector !== undefined){
let collector = task.collector.split(",")
task.collector = undefined
collector.forEach((id) => {
if(parseInt(id) === state.userId) {
task.isCollect = true
state.collectGallery.push(task)
}
})
if(task.isCollect === undefined)
task.isCollect = false
}
state.totalGalleryTask.push(task)
})
}
@ -509,6 +592,7 @@ const state = {
totalGalleryTask:[], //存放本子数据的数组
chosenGallery:false, //准备下载的本子
thumbnailGallery:{},
collectGallery:[], //收藏的本子
totalVideoTask:[], //存放视频数据的数组
chosenVideo:false, //准备下载的视频
@ -518,6 +602,7 @@ const state = {
defaultLength:7, //默认个数
shortLength:10, //简洁个数
userId:-1,
isAuth:false, //是否授权
AuthCode:'', //授权码
loadComplete:false, //是否加载完成
@ -535,6 +620,8 @@ const state = {
const getters = {
galleryTasks(state){
if(state.showType === 'collect')
return state.collectGallery.slice((state.page-1)*state.length, state.page*state.length)
if(state.searchTask.length !== 0)
return state.searchTask.slice((state.page-1)*state.length, state.page*state.length)
if(state.totalGalleryTask.length !== 0)
@ -554,9 +641,10 @@ const getters = {
max(state){
let max = 0
let tasks
if(state.searchTask.length !== 0){
if(state.showType === 'collect')
tasks = state.collectGallery
else if(state.searchTask.length !== 0)
tasks = state.searchTask
}
else if(state.showType === "gallery")
if(state.totalGalleryTask.length !== 0)
tasks = state.totalGalleryTask
@ -569,6 +657,9 @@ const getters = {
if(tasks.length % state.length !== 0){
max += 1
}
if(max === 0)
return 1
return max
}
}