From 341f8221f2ad9c727faef522735124afd96b1974 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sat, 16 Mar 2024 16:20:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=88=86=E9=85=8D=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Icon/IconFile.vue     | 27 +++++-----
 src/components/ShowFile/ShowFile.vue |  7 ++-
 src/components/TagDialog/index.vue   | 79 +++++++++++++++++++++++-----
 3 files changed, 86 insertions(+), 27 deletions(-)

diff --git a/src/components/Icon/IconFile.vue b/src/components/Icon/IconFile.vue
index daebb4f..ec4ea87 100644
--- a/src/components/Icon/IconFile.vue
+++ b/src/components/Icon/IconFile.vue
@@ -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 {
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 918f6bb..dd68c90 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -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() {
diff --git a/src/components/TagDialog/index.vue b/src/components/TagDialog/index.vue
index 0e7a6eb..e67ad5e 100644
--- a/src/components/TagDialog/index.vue
+++ b/src/components/TagDialog/index.vue
@@ -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>