Skip to content

foreign / customer-service

Go to a project
Commit edc9171d by panjiangyi
Options

成员ui

parent 7a06251d
Inline Side-by-side
Showing with 39 additions and 24 deletions
chat-room.vue
<template> <template>
<div class="chat-room-con h-100"> <div class="chat-room-con h-100 pos-rel">
<div class="room-title d-flex justify-content-between align-items-center"> <div class="room-title d-flex justify-content-between align-items-center">
<div class="title" @click="showMembers"> <div class="title" @click="showMembers">
{{ chatTitle }} {{ chatTitle }}
...@@ -219,7 +219,9 @@ export default class ChatRoom extends Vue { ...@@ -219,7 +219,9 @@ export default class ChatRoom extends Vue {
} }
.chat-members { .chat-members {
position: absolute; position: absolute;
width: calc(100% - 350px); // width: calc(100% - 350px);
left:0;
right:0;
padding: 30px; padding: 30px;
padding-bottom: 0; padding-bottom: 0;
background: #fff; background: #fff;
......
chat.vue
...@@ -22,7 +22,12 @@ ...@@ -22,7 +22,12 @@
> >
</div> </div>
</div> </div>
<ChatCreator v-show="visible" @submit="addMember" @hide="hideAddMember" /> <ChatCreator
v-if="visible"
:selected="chatMembersId"
@submit="addMember"
@hide="hideAddMember"
/>
</div> </div>
<!-- </el-dialog> --> <!-- </el-dialog> -->
</template> </template>
...@@ -39,6 +44,9 @@ import { ChatStore, chatStore } from "@/customer-service/store/model"; ...@@ -39,6 +44,9 @@ import { ChatStore, chatStore } from "@/customer-service/store/model";
@Component({ components: { MessageList, ChatRoom, ChatList, ChatCreator } }) @Component({ components: { MessageList, ChatRoom, ChatList, ChatCreator } })
export default class Chat extends Vue { export default class Chat extends Vue {
@chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS;
@chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID) @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID; private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
...@@ -48,8 +56,12 @@ export default class Chat extends Vue { ...@@ -48,8 +56,12 @@ export default class Chat extends Vue {
@chatStore.Action(ChatStore.ACTION_TERINATE_CHAT) @chatStore.Action(ChatStore.ACTION_TERINATE_CHAT)
private readonly _terminate!: ChatStore.ACTION_TERINATE_CHAT; private readonly _terminate!: ChatStore.ACTION_TERINATE_CHAT;
@chatStore.Action(ChatStore.ACTION_CHAT_ADD_MEMBERS) @chatStore.Action(ChatStore.ACTION_CHAT_ADD_MEMBERS)
private readonly _addMember!: ChatStore.ACTION_CHAT_ADD_MEMBERS; private readonly _addMember!: ChatStore.ACTION_CHAT_ADD_MEMBERS;
private get chatMembersId() {
return this.chatMembers.map(k => +k.eid);
}
private visible = false; private visible = false;
@buttonThrottle() @buttonThrottle()
......
create-chat.vue
...@@ -21,11 +21,14 @@ ...@@ -21,11 +21,14 @@
v-for="user in userList" v-for="user in userList"
:key="user.id" :key="user.id"
class="user-con" class="user-con"
:class="{ isChoosed: isChoosed(user.id) }"
@click="onClickUser(user.id)" @click="onClickUser(user.id)"
> >
<avatar /> <avatar />
<span class="user-name">{{ user.name }}</span> <span
class="user-name"
:class="{ isChoosed: isChoosed(user.id) }"
>{{ user.name }}</span
>
</div> </div>
</div> </div>
<el-pagination <el-pagination
...@@ -37,13 +40,13 @@ ...@@ -37,13 +40,13 @@
></el-pagination> ></el-pagination>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="hide">取 消</el-button> <el-button @click="hide">取 消</el-button>
<el-button type="primary" @click="createChat">确 定</el-button> <el-button type="primary" @click="createChat">确1 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ListEasy, ListTypes } from "uniplat-sdk"; import { ListEasy, ListTypes } from "uniplat-sdk";
import { Component, Vue, Watch } from "vue-property-decorator"; import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import buttonThrottle from "./utils/button-throttle"; import buttonThrottle from "./utils/button-throttle";
...@@ -57,24 +60,20 @@ type User = { ...@@ -57,24 +60,20 @@ type User = {
type ThenArg<T> = T extends PromiseLike<infer U> ? U : T; type ThenArg<T> = T extends PromiseLike<infer U> ? U : T;
@Component({ components: { avatar } }) @Component({ components: { avatar } })
export default class ChatCreator extends Vue { export default class ChatCreator extends Vue {
@chatStore.State(ChatStore.STATE_CHAT_CREATOR_VISIBLE)
private readonly visible!: ChatStore.STATE_CHAT_CREATOR_VISIBLE;
@chatStore.Action(ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN) @chatStore.Action(ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN)
private readonly _createChat!: ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN; private readonly _createChat!: ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN;
@Prop({
type: Array,
default: () => [],
})
private selected!: number[];
@Watch("currentPage") @Watch("currentPage")
private pageChange() { private pageChange() {
this.nextPage(); this.nextPage();
} }
@Watch("visible")
private onvisibleChange() {
if (this.visible) {
this.selectedUsers = [];
}
}
private searchText = ""; private searchText = "";
private currentPage = 1; private currentPage = 1;
private total = 0; private total = 0;
...@@ -87,8 +86,9 @@ export default class ChatCreator extends Vue { ...@@ -87,8 +86,9 @@ export default class ChatCreator extends Vue {
private getList!: ThenArg<ReturnType<ListEasy["query"]>>["getList"]; private getList!: ThenArg<ReturnType<ListEasy["query"]>>["getList"];
public created() { public async created() {
this.getUserList(); await this.getUserList();
this.selectedUsers = this.selected;
} }
private async getUserList(searchText: string | null = null) { private async getUserList(searchText: string | null = null) {
...@@ -183,9 +183,6 @@ export default class ChatCreator extends Vue { ...@@ -183,9 +183,6 @@ export default class ChatCreator extends Vue {
align-items: center; align-items: center;
margin-bottom: 40px; margin-bottom: 40px;
cursor: pointer; cursor: pointer;
&.isChoosed {
outline: 1px solid #3285ff;
}
} }
.user-name { .user-name {
height: 15px; height: 15px;
...@@ -193,6 +190,9 @@ export default class ChatCreator extends Vue { ...@@ -193,6 +190,9 @@ export default class ChatCreator extends Vue {
color: #000000; color: #000000;
line-height: 15px; line-height: 15px;
margin-left: 20px; margin-left: 20px;
&.isChoosed {
color: #3285ff;
}
} }
.search-bar { .search-bar {
display: flex; display: flex;
......
store/index.ts
...@@ -621,6 +621,7 @@ export default { ...@@ -621,6 +621,7 @@ export default {
}); });
detailManager.done(); detailManager.done();
await action.execute(); await action.execute();
await new Promise(resolve => setTimeout(resolve, 500));
await dispatch(ChatStore.ACTION_GET_CHAT_MEMBERS); await dispatch(ChatStore.ACTION_GET_CHAT_MEMBERS);
}, },
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment