创建会话

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>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="hide">取 消</el-button>
-      <el-button type="primary" @click="createChat">确 定</el-button>
-    </span>
-  </el-dialog>
+        <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>
+        </span>
+    </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 = {
-  id: string;
-  name: string;
+    id: string;
+    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;
-
-  @chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT_CREATOR)
-  private readonly hide!: ChatStore.MUTATION_HIDE_CHAT_CREATOR;
-
-  @chatStore.Action(ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN)
-  private readonly _createChat!: ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN;
-
-  private currentPage = 1;
-  private userList: {
-    id: any;
-    name: any;
-}[] = [];
-
-  private getList!: ThenArg<ReturnType<ListEasy["query"]>>["getList"];
-
-  public async created() {
-    const list = chat.getSdk().model("user").list();
-    const { pageData, getList } = await list.query({
-      pageIndex: this.currentPage,
-      item_size: 50,
-    });
-    this.getList = getList;
-    this.userList = this.exactUserList(pageData.rows);
-  }
-
-  private exactUserList(rows: any[]) {
-    return rows.map((k) => {
-      return {
-        id: k.id.value,
-        name: k.first_name.value,
-      };
-    });
-  }
-
-  private loading = false;
-  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)];
-  }
-
-  private selectedRows: string[] = [];
-  private handleSelectionChange(selectedRows: User[]) {
-    this.selectedRows = selectedRows.map((k) => String(k.id));
-  }
-
-  private createChat() {
-    const { keyvalue, model_name } = this.$route.params;
-    this._createChat({
-      modelName: model_name,
-      selectedListId: keyvalue,
-      uids: this.selectedRows,
-    });
-  }
+    @chatStore.State(ChatStore.STATE_CHAT_CREATOR_VISIBLE)
+    private readonly visible!: ChatStore.STATE_CHAT_CREATOR_VISIBLE;
+
+    @chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT_CREATOR)
+    private readonly hide!: ChatStore.MUTATION_HIDE_CHAT_CREATOR;
+
+    @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 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: this.pageSize,
+        });
+        this.total = pageData.record_count;
+        this.getList = getList;
+        this.userList = this.exactUserList(pageData.rows);
+        this.loading = false;
+    }
+
+    private exactUserList(rows: any[]) {
+        return rows.map((k) => {
+            return {
+                id: k.id.value,
+                name: k.first_name.value,
+            };
+        });
+    }
+
+    private search() {
+        this.currentPage = 1;
+        this.getUserList(this.searchText);
+    }
+
+    private loading = false;
+    @buttonThrottle()
+    private async nextPage() {
+        this.loading = true;
+        const data = await this.getList(this.currentPage);
+        this.loading = false;
+        this.userList = this.exactUserList(data.rows);
+    }
+
+    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.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>