添加排除标签

src/views/qw/sopUserLogsInfo/sopUserLogsInfoDetails.vue

@@ -101,6 +101,22 @@
         </div>
 
       </el-form-item>
+
+      <el-form-item label="排除标签" prop="exTagIds">
+        <div @click="handleChangeExTags()" style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 250px">
+          <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
+            <el-tag type="info"
+                    closable
+                    :disable-transitions="false"
+                    v-for="list in this.selectExTags"
+                    :key="list.tagId"
+                    @close="handleCloseExTags(list)"              style="margin: 3px;"
+            >{{list.name}}
+            </el-tag>
+          </div>
+        </div>
+      </el-form-item>
+
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -591,7 +607,40 @@
         <el-button @click="tagCancel()">取消</el-button>
       </div>
     </el-dialog>
+    <el-dialog :title="changeExTagDialog.title" :visible.sync="changeExTagDialog.open" style="width:100%;height: 100%" append-to-body>
+      <div>搜索排除标签：
+        <el-input v-model="queryExTagParams.name" placeholder="请输入标签名称" clearable size="small" style="width: 200px;margin-right: 10px" />
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchExTags(queryExTagParams.name)">搜索</el-button>
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="cancelSearchExTags">重置</el-button>
+      </div>
+      <div v-for="item in exTagGroupList" :key="item.id"  >
+        <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
+          <span class="name-background">{{ item.name }}</span>
+        </div>
+        <div class="tag-container">
+          <a
+            v-for="tagItem in item.tag"
+            class="tag-box"
+            @click="exTagSelection(tagItem)"
+            :class="{ 'tag-selected': tagItem.isSelected }"
+          >
+            {{ tagItem.name }}
+          </a>
+        </div>
+      </div>
 
+      <pagination
+        v-show="exTagTotal>0"
+        :total="exTagTotal"
+        :page.sync="queryExTagParams.pageNum"
+        :limit.sync="queryExTagParams.pageSize"
+        @pagination="getPageListExTagGroup"
+      />
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="exTagSubmitForm()">确 定</el-button>
+        <el-button @click="exTagCancel()">取消</el-button>
+      </div>
+    </el-dialog>
 
     <el-dialog :title="videoNumOptions.title" :visible.sync="videoNumOptions.open" width="1500px" append-to-body>
       <userVideo ref="QwUserVideo" @videoResult="qwUserVideoResult"></userVideo>
@@ -624,6 +673,22 @@ export default {
   components: {PaginationMore, userVideo, ImageUpload},
   data() {
     return {
+      selectExTags: [], // 排除标签选择数组
+      // 排除标签对话框
+      changeExTagDialog: {
+        title: "",
+        open: false,
+      },
+      // 排除标签查询参数
+      queryExTagParams: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+        name: null,
+        corpId: null,
+      },
+      exTagGroupList: [], // 排除标签组列表
+      exTagTotal: 0,     // 排除标签总数
       queryParams1: {
         pageNum: 1,
         pageSize: 10,
@@ -675,6 +740,7 @@ export default {
         pageNum: 1,
         pageSize: 10,
         tagIds:null,
+        exTagIds: null,  // 添加排除标签ID参数
         remark:null,
         sopId: null,
         userLogsId: null,
@@ -779,6 +845,130 @@ export default {
 
   },
   methods: {
+
+    // 搜索排除标签
+    handleChangeExTags() {
+      this.changeExTagDialog.title = "搜索排除的标签";
+      this.changeExTagDialog.open = true;
+
+      // 获取 selectExTags 中的所有 tagId，用于快速查找
+      const selectedTagIds = new Set(
+        (this.selectExTags || []).map(tagItem => tagItem?.tagId)
+      );
+
+      this.queryExTagParams.name = null;
+      this.getPageListExTagGroup();
+
+      setTimeout(() => {
+        for (let i = 0; i < this.exTagGroupList.length; i++) {
+          for (let x = 0; x < this.exTagGroupList[i].tag.length; x++) {
+            this.exTagGroupList[i].tag[x].isSelected = selectedTagIds.has(this.exTagGroupList[i].tag[x].tagId);
+          }
+        }
+      }, 200);
+    },
+
+    // 排除标签选择
+    exTagSelection(row) {
+      row.isSelected = !row.isSelected;
+      this.$forceUpdate();
+    },
+
+    // 确定选择排除标签
+    exTagSubmitForm() {
+      for (let i = 0; i < this.exTagGroupList.length; i++) {
+        for (let x = 0; x < this.exTagGroupList[i].tag.length; x++) {
+          if (this.exTagGroupList[i].tag[x].isSelected === true) {
+            if (!this.selectExTags) {
+              this.selectExTags = [];
+            }
+
+            // 检查当前 tag 是否已经存在于 selectExTags 中
+            let tagExists = this.selectExTags.some(
+              tag => tag.tagId === this.exTagGroupList[i].tag[x].tagId
+            );
+
+            // 如果 tag 不存在于 selectExTags 中，则新增
+            if (!tagExists) {
+              this.selectExTags.push(this.exTagGroupList[i].tag[x]);
+            }
+          }
+        }
+      }
+
+      if (!this.selectExTags || this.selectExTags.length === 0) {
+        return this.$message('请选择排除标签');
+      }
+
+      this.changeExTagDialog.open = false;
+    },
+
+    // 取消选择排除标签
+    exTagCancel() {
+      this.changeExTagDialog.open = false;
+    },
+
+    // 删除一些选择的排除标签
+    handleCloseExTags(list) {
+      const ls = this.selectExTags.findIndex(t => t.tagId === list.tagId);
+      if (ls !== -1) {
+        this.selectExTags.splice(ls, 1);
+        this.selectExTags = [...this.selectExTags];
+      }
+
+      if (this.selectExTags != null && this.selectExTags.length > 0) {
+        // 确保 queryParams.exTagIds 是数组
+        if (!this.queryParams.exTagIds) {
+          this.queryParams.exTagIds = []; // 如果未定义，初始化
+        } else {
+          this.queryParams.exTagIds = []; // 清空已有数据
+        }
+
+        // 遍历并添加 tagId
+        this.selectExTags.forEach(tag => {
+          if (tag.tagId) { // 确保 tagId 存在
+            this.queryParams.exTagIds.push(tag.tagId);
+          }
+        });
+        this.queryParams.exTagIds = this.queryParams.exTagIds.join(",");
+      } else {
+        this.queryParams.exTagIds = null;
+      }
+    },
+
+    // 搜索排除标签
+    handleSearchExTags(name) {
+      searchTags({ name: name, corpId: this.queryParams.corpId }).then(response => {
+        this.exTagGroupList = response.rows;
+      });
+    },
+
+    // 重置排除标签搜索
+    cancelSearchExTags() {
+      this.resetSearchQueryExTag();
+      this.getPageListExTagGroup();
+    },
+
+    // 获取排除标签组分页列表
+    getPageListExTagGroup() {
+      this.queryExTagParams.corpId = this.queryParams.corpId;
+      allListTagGroup(this.queryExTagParams).then(response => {
+        this.exTagGroupList = response.rows;
+        this.exTagTotal = response.total;
+      });
+    },
+
+    // 重置排除标签搜索查询参数
+    resetSearchQueryExTag() {
+      this.queryExTagParams = {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+        name: null,
+      };
+    },
+
+
     getLuckyBagStatus(content) {
       const selectedLuckyBag = this.luckyBagList.find(item => item.id === content.luckyBagId);
       if (selectedLuckyBag) {
@@ -1339,12 +1529,30 @@ export default {
         this.queryParams.tagIds=null;
       }
 
+// 处理排除标签
+      if (this.selectExTags != null && this.selectExTags.length > 0) {
+        if (!this.queryParams.exTagIds) {
+          this.queryParams.exTagIds = [];
+        } else {
+          this.queryParams.exTagIds = [];
+        }
+
+        this.selectExTags.forEach(tag => {
+          if (tag.tagId) {
+            this.queryParams.exTagIds.push(tag.tagId);
+          }
+        });
+        this.queryParams.exTagIds = this.queryParams.exTagIds.join(",");
+      } else {
+        this.queryParams.exTagIds = null;
+      }
 
       this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
       this.selectTags=[];
+      this.selectExTags = []; // 重置排除标签
       this.resetForm("queryForm");
       this.handleQuery();
     },