添加客服添加标签

components/create-chat.vue

 <template>
     <el-dialog
         class="create-chat"
-        title="创建会话"
+        title="添加客服"
         :visible="true"
         @close="hide"
     >
         <div class="search-bar">
-            <span class="search-title">用户搜索: </span>
-            <el-input class="search-input" v-model="searchText"></el-input>
-            <el-button
-                style="margin-left: auto"
-                type="primary"
-                size="medium"
-                @click="search"
-                >筛选</el-button
-            >
+            <div class="row input-row">
+                <span class="search-title">用户搜索: </span>
+                <el-input class="search-input" v-model="searchText"></el-input>
+                <el-button
+                    style="margin-left: auto"
+                    type="primary"
+                    size="medium"
+                    @click="search"
+                    >筛选</el-button
+                >
+            </div>
+            <div class="row">
+                <GeneralTagSelectForFilter
+                    ref="generalTagSelect"
+                    :tagGroups="tagGroups"
+                    class="tag-group"
+                ></GeneralTagSelectForFilter>
+            </div>
         </div>
         <div class="users" v-loading="loading">
             <div
@@ -50,18 +59,17 @@
 <script lang="ts">
 import { ListEasy, ListTypes } from "uniplat-sdk";
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-
+import GeneralTagSelectForFilter from "@/components/statistic/GeneralTagSelectForFilter.vue"
 import buttonThrottle from "../utils/button-throttle";
-
 import avatar from "@/customer-service/components/avatar.vue";
-import { ChatStore, chatStore } from "@/customer-service/store/model";
+import { TagManagerTypes } from "uniplat-sdk"
 import chat from "@/customer-service/xim/index";
 type User = {
     id: string;
     name: string;
 };
 type ThenArg<T> = T extends PromiseLike<infer U> ? U : T;
-@Component({ components: { avatar } })
+@Component({ components: { avatar, GeneralTagSelectForFilter } })
 export default class ChatCreator extends Vue {
     @Prop({
         type: Array,
@@ -74,6 +82,7 @@ export default class ChatCreator extends Vue {
         this.nextPage();
     }
 
+    private tagGroups: TagManagerTypes.TagGroup[] = []
     private searchText = "";
     private currentPage = 1;
     private total = 0;
@@ -90,6 +99,15 @@ export default class ChatCreator extends Vue {
         await this.getUserList();
     }
 
+    private getSelectedTags() {
+        if (this.$refs.generalTagSelect) {
+            return (
+                this.$refs.generalTagSelect as GeneralTagSelectForFilter
+            ).getSelectedTags()
+        }
+        return []
+    }
+
     private async getUserList(searchText: string | null = null) {
         this.loading = true;
         const list = chat.getSdk().model("user").list();
@@ -103,11 +121,13 @@ export default class ChatCreator extends Vue {
         const { pageData, getList } = await list.query({
             pageIndex: this.currentPage,
             item_size: this.pageSize,
+            tagFilters: this.getSelectedTags()
         });
         this.total = pageData.record_count;
         this.getList = getList;
         this.userList = this.exactUserList(pageData.rows);
         this.loading = false;
+        this.tagGroups = pageData.tagGroups || []
     }
 
     private exactUserList(rows: any[]) {
@@ -178,6 +198,9 @@ export default class ChatCreator extends Vue {
 }
 </script>
 <style lang="less" scoped>
+.text-right {
+    text-align: right;
+}
 .create-chat {
     /deep/ .el-dialog__body {
         padding: 30px 40px;
@@ -208,12 +231,22 @@ export default class ChatCreator extends Vue {
     }
 }
 .search-bar {
-    display: flex;
     align-items: center;
     background: #f5f6fa;
     padding: 12px 20px;
     box-sizing: border-box;
     margin-bottom: 30px;
+    .row + .row {
+        margin-top: 5px;
+    }
+    .tag-group /deep/ .checkbox-group {
+        padding: 0;
+        margin-bottom: 0;
+    }
+    .input-row {
+        display: flex;
+        line-height: 40px;
+    }
 }
 .search-input {
     width: 160px;