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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Side.vue
+72 -36
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;