完善分配标签的功能
This commit is contained in:
jmal
parent
3620763129
commit
341f8221f2
@ -32,12 +32,13 @@
|
||||
</div>
|
||||
<div v-if="item.tags && item.tags.length > 0 && !public">
|
||||
<div v-if="pc">
|
||||
<svg-icon v-if="grid" class="pc grid icon-tag" icon-class="tag2" :style="{left: 14 * index -9 + 'px', color: tag.color}" v-for="(tag,index) in item.tags.slice(0, 7)" :key="index"/>
|
||||
<svg-icon v-else class="pc list icon-tag" icon-class="tag2" :style="{left: 14 * index + 3 + 'px', color: tag.color}" v-for="(tag,index) in item.tags.slice(0, 5)" :key="index"/>
|
||||
<svg-icon v-if="grid" class="pc grid icon-tag" icon-class="tag2" :style="{left: 14 * index + 'px', color: tag.color}" v-for="(tag,index) in item.tags.slice(0, 3)" :key="tag.tagId"/>
|
||||
<!-- 列表模式下只能显示一个标签 -->
|
||||
<svg-icon v-else class="pc list icon-tag" icon-class="tag2" :style="{color: tag.color}" v-for="tag in item.tags.slice(0, 1)" :key="tag.tagId"/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<svg-icon v-if="grid" class="mobile grid icon-tag" icon-class="tag2" :style="{left: 1 * index + 'rem', color: tag.color}" v-for="(tag,index) in item.tags.slice(0, 5)" :key="index"/>
|
||||
<svg-icon v-else class="mobile list icon-tag" icon-class="tag2" :style="{left: 1 * index + 'rem', color: tag.color}" v-for="(tag,index) in item.tags.slice(0, 3)" :key="index"/>
|
||||
<svg-icon v-if="grid" class="mobile grid icon-tag" icon-class="tag2" :style="{left: 1 * index + 'rem', color: tag.color}" v-for="(tag,index) in item.tags.slice(0, 3)" :key="tag.tagId"/>
|
||||
<svg-icon v-else class="mobile list icon-tag" icon-class="tag2" :style="{color: tag.color}" v-for="tag in item.tags.slice(0, 1)" :key="tag.tagId"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.ossFolder && !public">
|
||||
@ -51,7 +52,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<svg-icon v-if="item.isFolder" icon-class="folder"/>
|
||||
<div v-else-if="item.contentType.indexOf('video') > -1">
|
||||
<div v-else-if="item.contentType && item.contentType.indexOf('video') > -1">
|
||||
<div v-if="item.mediaCover === undefined || item.mediaCover === 'true'">
|
||||
<div v-if="grid && pc" class="grid-play-icon">
|
||||
<svg-icon icon-class="play1"/>
|
||||
@ -71,7 +72,7 @@
|
||||
</div>
|
||||
<svg-icon v-else icon-class="video"/>
|
||||
</div>
|
||||
<div v-else-if="item.contentType.indexOf('audio') > -1">
|
||||
<div v-else-if="item.contentType && item.contentType.indexOf('audio') > -1">
|
||||
<div v-if="item.music !== undefined">
|
||||
<div v-if="item.music.name !== null">
|
||||
<el-image v-if="grid" :style="{'height':details?'110px':(gridWidth-35) + 'px'}" fit="contain"
|
||||
@ -90,7 +91,7 @@
|
||||
</div>
|
||||
<svg-icon v-else icon-class="audio"/>
|
||||
</div>
|
||||
<div v-else-if="item.contentType.startsWith('image')">
|
||||
<div v-else-if="item.contentType && item.contentType.startsWith('image')">
|
||||
<el-image v-if="grid || grid === 'details'" :style="{'height':details?'110px':(gridWidth-35) + 'px'}"
|
||||
fit="contain" :src="item.fileId ? (imageUrl+item.fileId) : (imageUrl+item.id)">
|
||||
<div slot="error" class="image-slot">
|
||||
@ -254,27 +255,27 @@ export default {
|
||||
.pc.grid.icon-tag {
|
||||
font-size: 14px;
|
||||
left: 0;
|
||||
bottom: -10px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.mobile.grid.icon-tag {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
bottom: 1.6rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
|
||||
.pc.list.icon-tag {
|
||||
font-size: 12px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.mobile.list.icon-tag {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
left: 0.5rem;
|
||||
bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.oss-folder {
|
||||
|
||||
@ -807,7 +807,7 @@
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<tag-dialog :fileList.sync="tagDialogObjectList"
|
||||
<tag-dialog :fileList="tagDialogObjectList"
|
||||
:status.sync="tagDialogVisible" @onSuccess="allocateTagSuccess"/>
|
||||
<share-dialog
|
||||
:file.sync="shareDialogObject"
|
||||
@ -3740,7 +3740,10 @@ export default {
|
||||
}
|
||||
},
|
||||
allocateTag() {
|
||||
this.tagDialogObjectList = this.$refs.fileListTable.tableSelectData;
|
||||
// 将this.$refs.fileListTable.tableSelectData拷贝给tagDialogObjectList而不是赋值
|
||||
this.tagDialogObjectList = JSON.parse(
|
||||
JSON.stringify(this.$refs.fileListTable.tableSelectData)
|
||||
);
|
||||
this.tagDialogVisible = true
|
||||
},
|
||||
allocateTagSuccess() {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
v-for="tag in tags"
|
||||
closable
|
||||
:disable-transitions="false"
|
||||
@close="handleClose(tag.id)">
|
||||
@close="handleClose(tag.name)">
|
||||
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
@ -33,6 +33,19 @@
|
||||
>
|
||||
</el-input>
|
||||
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新标签</el-button>
|
||||
|
||||
<div class="tag-list">
|
||||
<p>现有标签: </p>
|
||||
<el-button
|
||||
size="small"
|
||||
:key="tag.name"
|
||||
v-for="tag in existingTags"
|
||||
@click="addTag(tag)">
|
||||
<svg-icon :style="{ color: tag.color, fontSize: '14px' }" icon-class="tag2"></svg-icon>
|
||||
{{tag.name}}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="small" type="primary" @click="submitTag" v-loading="saveLoading">保存
|
||||
@ -44,7 +57,8 @@
|
||||
|
||||
<script>
|
||||
|
||||
import api from '@/api/file-api'
|
||||
import fileApi from '@/api/file-api'
|
||||
import tagApi from '@/api/tag'
|
||||
import { Sketch } from 'vue-color'
|
||||
|
||||
export default {
|
||||
@ -69,6 +83,8 @@ export default {
|
||||
inputVisible: false,
|
||||
inputValue: '',
|
||||
tags: [],
|
||||
existingTags: [],
|
||||
tagList: [],
|
||||
defaultTagColor: '#f56c6c',
|
||||
saveLoading: false,
|
||||
colors: {
|
||||
@ -99,14 +115,34 @@ export default {
|
||||
})
|
||||
})
|
||||
}
|
||||
this.showName = this.fileList.length + '项目'
|
||||
|
||||
// 加载已有标签列表
|
||||
tagApi.tagList({userId: this.$store.state.user.userId,}).then(res => {
|
||||
this.tagList = res.data
|
||||
this.updateExistingTags()
|
||||
})
|
||||
|
||||
if (this.fileList.length === 1) {
|
||||
this.showName = this.fileList[0].name
|
||||
} else {
|
||||
this.showName = this.fileList.length + '项目'
|
||||
}
|
||||
this.tagDialogVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose(tag) {
|
||||
this.tags.splice(this.tags.indexOf(tag), 1);
|
||||
updateExistingTags() {
|
||||
this.existingTags = this.tagList.filter(item => {
|
||||
return !this.tags.some(tag => tag.name === item.name)
|
||||
})
|
||||
},
|
||||
handleClose(tagName) {
|
||||
// 删除tags, 找出tags中的tag.name, 删除
|
||||
// 找出tags中的tag.name的索引
|
||||
let index = this.tags.findIndex(item => item.name === tagName)
|
||||
this.tags.splice(index, 1)
|
||||
this.updateExistingTags()
|
||||
},
|
||||
showInput() {
|
||||
this.inputVisible = true;
|
||||
@ -128,6 +164,11 @@ export default {
|
||||
this.inputVisible = false;
|
||||
this.inputValue = '';
|
||||
},
|
||||
addTag(tag) {
|
||||
// 是否有相同的标签
|
||||
this.tags.push({ name: tag.name, color: tag.color });
|
||||
this.updateExistingTags()
|
||||
},
|
||||
tagDialogClose() {
|
||||
this.$emit('update:status', this.tagDialogVisible)
|
||||
},
|
||||
@ -135,7 +176,7 @@ export default {
|
||||
this.saveLoading = true
|
||||
// 提取出文件id
|
||||
const fileIdList = this.fileList.map(item => item.id)
|
||||
api.setTags({fileIds: fileIdList}, this.tags).then(() => {
|
||||
fileApi.setTags({fileIds: fileIdList}, this.tags).then(() => {
|
||||
this.saveLoading = false
|
||||
this.$message.success('保存成功');
|
||||
this.$emit('onSuccess')
|
||||
@ -167,21 +208,21 @@ export default {
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.button-new-tag {
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.input-new-tag {
|
||||
margin-top: 10px;
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.button-tab-icon {
|
||||
@ -194,6 +235,20 @@ export default {
|
||||
width: 25px !important;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
p {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-button {
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.el-button+.el-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user