创建会话

create-chat.vue

 <template>
-  <el-dialog title="创建会话" :visible="visible" @close="hide">
-    选择聊天对象
-    {{ userList.length }}
-    <el-table
-      v-loading="loading"
-      :data="userList"
-      style="width: 100%"
-      height="250"
-      @selection-change="handleSelectionChange"
+    <el-dialog
+        class="create-chat"
+        title="创建会话"
+        :visible="visible"
+        @close="hide"
     >
-      <el-table-column type="selection" width="55"> </el-table-column>
-      <el-table-column prop="id" label="id" width="150"> </el-table-column>
-      <el-table-column prop="name" label="name" width="150"> </el-table-column>
-    </el-table>
-    <el-button @click="nextPage">加载下一页</el-button>
+        <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>
+        <div v-loading="loading">
+            <div
+                v-for="user in userList"
+                :key="user.id"
+                class="user-con"
+                :class="{ isChoosed:isChoosed(user.id) }"
+                @click="onClickUser(user.id)"
+            >
+                <avatar />
+                <span class="user-name">{{ user.name }}</span>
+            </div>
+        </div>
+        <el-pagination
+            :current-page.sync="currentPage"
+            class="fs-pager"
+            layout="prev, pager, next"
+            :total="total"
+            :page-size="pageSize"
+        ></el-pagination>
         <span slot="footer" class="dialog-footer">
             <el-button @click="hide">取 消</el-button>
             <el-button type="primary" @click="createChat">确 定</el-button>
@@ -21,9 +42,12 @@
     </el-dialog>
 </template>
 <script lang="ts">
-import type { ListEasy, } from "uniplat-sdk";
-import { Component, Vue } from "vue-property-decorator";
+import { ListEasy, ListTypes } from "uniplat-sdk";
+import { Component, Vue, Watch } from "vue-property-decorator";
 
+import buttonThrottle from "./utils/button-throttle";
+
+import avatar from "@/customer-service/components/avatar.vue";
 import { ChatStore, chatStore } from "@/customer-service/store/model";
 import chat from "@/customer-service/xim/index";
 type User = {
@@ -31,7 +55,7 @@ type User = {
     name: string;
 };
 type ThenArg<T> = T extends PromiseLike<infer U> ? U : T;
-@Component({ components: {} })
+@Component({ components: { avatar } })
 export default class ChatCreator extends Vue {
     @chatStore.State(ChatStore.STATE_CHAT_CREATOR_VISIBLE)
     private readonly visible!: ChatStore.STATE_CHAT_CREATOR_VISIBLE;
@@ -42,22 +66,52 @@ export default class ChatCreator extends Vue {
     @chatStore.Action(ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN)
     private readonly _createChat!: ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN;
 
+    @Watch("currentPage")
+    private pageChange() {
+        this.nextPage();
+    }
+
+    @Watch("visible")
+    private onvisibleChange() {
+      if (this.visible) {
+        this.selectedUsers = [];
+      }
+    }
+
+    private searchText = "";
     private currentPage = 1;
+    private total = 0;
+    private pageSize = 15;
+    private selectedUsers: number[] = [];
     private userList: {
         id: any;
         name: any;
-}[] = [];
+    }[] = [];
 
     private getList!: ThenArg<ReturnType<ListEasy["query"]>>["getList"];
 
-  public async created() {
+    public created() {
+        this.getUserList();
+    }
+
+    private async getUserList(searchText: string | null = null) {
+        this.loading = true;
         const list = chat.getSdk().model("user").list();
+        if (searchText) {
+            list.addFilter({
+                property: "first_name",
+                value: searchText,
+                match: ListTypes.filterMatchType.fuzzy,
+            });
+        }
         const { pageData, getList } = await list.query({
             pageIndex: this.currentPage,
-      item_size: 50,
+            item_size: this.pageSize,
         });
+        this.total = pageData.record_count;
         this.getList = getList;
         this.userList = this.exactUserList(pageData.rows);
+        this.loading = false;
     }
 
     private exactUserList(rows: any[]) {
@@ -69,28 +123,90 @@ export default class ChatCreator extends Vue {
         });
     }
 
+    private search() {
+        this.currentPage = 1;
+        this.getUserList(this.searchText);
+    }
+
     private loading = false;
+    @buttonThrottle()
     private async nextPage() {
         this.loading = true;
-    this.currentPage++;
         const data = await this.getList(this.currentPage);
         this.loading = false;
-    this.userList = [...this.userList, ...this.exactUserList(data.rows)];
+        this.userList = this.exactUserList(data.rows);
     }
 
-  private selectedRows: string[] = [];
-  private handleSelectionChange(selectedRows: User[]) {
-    this.selectedRows = selectedRows.map((k) => String(k.id));
+    private isChoosed(id: number) {
+        return this.selectedUsers.includes(id);
     }
 
+    private onClickUser(id: number) {
+        if (this.isChoosed(id)) {
+            this.removeUser(id);
+        } else {
+            this.addUser(id);
+        }
+    }
+
+    private addUser(id: number) {
+        this.selectedUsers.push(id);
+    }
+
+    private removeUser(id: number) {
+        this.selectedUsers = this.selectedUsers.filter((_id) => _id !== id);
+    }
+
+    @buttonThrottle()
     private createChat() {
         const { keyvalue, model_name } = this.$route.params;
         this._createChat({
             modelName: model_name,
             selectedListId: keyvalue,
-      uids: this.selectedRows,
+            uids: this.selectedUsers.map(id => String(id))
         });
     }
 }
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.create-chat {
+    /deep/ .el-dialog__body {
+        padding: 30px 40px;
+    }
+}
+.user-con {
+    display: inline-flex;
+    vertical-align: top;
+    width: 33.33%;
+    align-items: center;
+    margin-bottom: 40px;
+    cursor: pointer;
+    &.isChoosed {
+      outline: 1px solid #3285FF;
+    }
+}
+.user-name {
+    height: 15px;
+    font-size: 15px;
+    color: #000000;
+    line-height: 15px;
+    margin-left: 20px;
+}
+.search-bar {
+    display: flex;
+    align-items: center;
+    background: #f5f6fa;
+    padding: 12px 20px;
+    box-sizing: border-box;
+    margin-bottom: 30px;
+}
+.search-input {
+    width: 160px;
+    margin-left: 10px;
+    /deep/ .el-input__inner {
+        border: 1px solid rgba(229, 230, 236, 1);
+        border-radius: 0;
+        padding-left: 21px;
+    }
+}
+</style>