Skip to content

foreign / customer-service

Go to a project
Commit c102ba83 by panjiangyi
Options

update ui

parent 2b02de5c
Inline Side-by-side
Showing with 157 additions and 58 deletions
chat-room.vue
<template> <template>
<div class="chat-room-con h-100 pos-rel"> <div class="chat-room-con h-100 pos-rel">
<div class="room-title d-flex justify-content-between align-items-center">
<div class="title">
{{ chatTitle }}
<template v-if="chatMembers.length">
<span class="members-count">（成员{{ chatMembers.length }}人）</span>
</template>
<template v-if="!notOnlyCheck">
<div v-if="currentChat.is_finish" class="chat-status chat-done">
已完成
</div>
<div v-else class="chat-status">接待中</div>
</template>
</div>
<i v-if="close" @click="close" class="title-close el-icon-close" />
</div>
<div class="chat-panel"> <div class="chat-panel">
<div class="chat-area h-100"> <div class="chat-area h-100">
<template v-if="notOnlyCheck"> <template v-if="notOnlyCheck">
...@@ -129,28 +114,7 @@ export default class ChatRoom extends Vue { ...@@ -129,28 +114,7 @@ export default class ChatRoom extends Vue {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.room-title {
font-size: 16px;
padding: 0 20px;
height: 60px;
border-bottom: 1px solid #e1e1e1;
.title {
cursor: pointer;
}
.members-count {
color: #666666;
}
.title-right-arrow {
font-size: 10px;
margin-left: 10px;
vertical-align: middle;
color: #666;
}
.title-close {
color: #8d959d;
cursor: pointer;
}
}
.chat-status { .chat-status {
display: inline-block; display: inline-block;
width: 46px; width: 46px;
...@@ -168,7 +132,7 @@ export default class ChatRoom extends Vue { ...@@ -168,7 +132,7 @@ export default class ChatRoom extends Vue {
} }
.chat-panel { .chat-panel {
height: calc(100% - 60px); height: 100%;
.chat-area, .chat-area,
.chat-info { .chat-info {
display: inline-block; display: inline-block;
......
chat-title.vue 0 → 100644
<template>
<div class="room-title d-flex justify-content-between align-items-center">
<div class="title">
{{ chatTitle }}
<template v-if="chatMembers.length">
<span class="members-count"
>（成员{{ chatMembers.length }}人）</span
>
</template>
<template v-if="!notOnlyCheck">
<div v-if="currentChat.is_finish" class="chat-status chat-done">
已完成
</div>
<div v-else class="chat-status">接待中</div>
</template>
</div>
<div class="title-buttons">
<el-button class="button" round>开始接待</el-button>
<el-button class="button" round>结束接待</el-button>
<el-button class="button" @click="terminate" round
>结束会话</el-button
>
<el-button class="button" @click="showAddMember" round
>转移接待</el-button
>
<i v-if="close" @click="close" class="title-close el-icon-close" />
</div>
<ChatCreator
v-if="visible"
:selected="chatMembersId"
@submit="addMember"
@hide="hideAddMember"
/>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import buttonThrottle from "./utils/button-throttle";
import ChatCreator from "@/customer-service/create-chat.vue";
import { ChatStore, chatStore } from "@/customer-service/store/model";
@Component({ components: { ChatCreator } })
export default class ChatTitle extends Vue {
@chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS;
@chatStore.State(ChatStore.STATE_CURRENT_CHAT_TITLE)
private readonly chatTitle!: ChatStore.STATE_CURRENT_CHAT_TITLE;
@chatStore.Action(ChatStore.ACTION_TERINATE_CHAT)
private readonly _terminate!: ChatStore.ACTION_TERINATE_CHAT;
@chatStore.Action(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 get notOnlyCheck(): boolean {
return true;
}
@Prop({ type: Function })
private close?: () => void;
@buttonThrottle()
private terminate() {
this._terminate();
}
private showAddMember() {
this.visible = true;
}
private hideAddMember() {
this.visible = false;
}
private async addMember(users: string[], done: () => void) {
await this._addMember(users);
done();
}
}
</script>
<style lang="less" scoped>
.room-title {
font-size: 16px;
padding: 0 20px;
height: 60px;
border-bottom: 1px solid #e1e1e1;
.title {
cursor: pointer;
}
.members-count {
color: #666666;
}
.title-right-arrow {
font-size: 10px;
margin-left: 10px;
vertical-align: middle;
color: #666;
}
.title-close {
color: #8d959d;
cursor: pointer;
}
}
</style>
chat.vue
<template> <template>
<div class="chat-con h-100"> <div class="chat-con h-100">
<div v-if="chatId != null" class="h-100 chat-area"> <ChatTitle :close="hide" />
<chat-room :close="hide" /> <div class="chat-area-con">
</div> <div v-if="chatId != null" class="h-100 chat-area">
<div class="chat-panel h-100"> <chat-room />
<!-- <div class="buttons"> </div>
<div class="chat-panel h-100">
<!-- <div class="buttons">
<el-button class="button" @click="terminate" round <el-button class="button" @click="terminate" round
>结束会话</el-button >结束会话</el-button
> >
...@@ -12,19 +14,25 @@ ...@@ -12,19 +14,25 @@
>添加成员</el-button >添加成员</el-button
> >
</div> --> </div> -->
<el-tabs v-model="currentTab"> <el-tabs v-model="currentTab">
<el-tab-pane label="数据" name="one" <el-tab-pane label="数据" name="one"
>model的数据，可配置。</el-tab-pane >model的数据，可配置。</el-tab-pane
> >
<el-tab-pane :label="`成员${chatMembers.length}人`" name="two"> <el-tab-pane
<ChatMembers /> :label="`成员${chatMembers.length}人`"
</el-tab-pane> name="two"
<el-tab-pane label="工作流" name="three">工作流</el-tab-pane> >
<el-tab-pane label="备注" name="four"> <ChatMembers />
<remarkList modelName="user" /> </el-tab-pane>
</el-tab-pane> <el-tab-pane label="工作流" name="three"
<el-tab-pane label="回复" name="five">回复</el-tab-pane> >工作流</el-tab-pane
</el-tabs> >
<el-tab-pane label="备注" name="four">
<remarkList modelName="user" />
</el-tab-pane>
<el-tab-pane label="回复" name="five">回复</el-tab-pane>
</el-tabs>
</div>
</div> </div>
<ChatCreator <ChatCreator
v-if="visible" v-if="visible"
...@@ -40,6 +48,7 @@ import { Component, Vue } from "vue-property-decorator"; ...@@ -40,6 +48,7 @@ import { Component, Vue } from "vue-property-decorator";
import remarkList from "../components/common/remarkList.vue"; import remarkList from "../components/common/remarkList.vue";
import ChatRoom from "./chat-room.vue"; import ChatRoom from "./chat-room.vue";
import ChatTitle from "./chat-title.vue";
import ChatMembers from "./components/chat-members.vue"; import ChatMembers from "./components/chat-members.vue";
import MessageList from "./message-list.vue"; import MessageList from "./message-list.vue";
import buttonThrottle from "./utils/button-throttle"; import buttonThrottle from "./utils/button-throttle";
...@@ -48,7 +57,14 @@ import ChatCreator from "@/customer-service/create-chat.vue"; ...@@ -48,7 +57,14 @@ import ChatCreator from "@/customer-service/create-chat.vue";
import { ChatStore, chatStore } from "@/customer-service/store/model"; import { ChatStore, chatStore } from "@/customer-service/store/model";
@Component({ @Component({
components: { MessageList, ChatRoom, ChatCreator, ChatMembers, remarkList }, components: {
MessageList,
ChatRoom,
ChatCreator,
ChatMembers,
remarkList,
ChatTitle,
},
}) })
export default class Chat extends Vue { export default class Chat extends Vue {
@chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS) @chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
...@@ -93,6 +109,9 @@ export default class Chat extends Vue { ...@@ -93,6 +109,9 @@ export default class Chat extends Vue {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.chat-area-con {
height: calc(100% - 60px);
}
.chat-con { .chat-con {
--chat-panel-width: 350px; --chat-panel-width: 350px;
font-size: 13px; font-size: 13px;
......
create-chat.vue
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
>筛选</el-button >筛选</el-button
> >
</div> </div>
<div v-loading="loading"> <div class="users" v-loading="loading">
<div <div
v-for="user in userList" v-for="user in userList"
:key="user.id" :key="user.id"
...@@ -176,6 +176,9 @@ export default class ChatCreator extends Vue { ...@@ -176,6 +176,9 @@ export default class ChatCreator extends Vue {
padding: 30px 40px; padding: 30px 40px;
} }
} }
.users {
white-space: pre-line;
}
.user-con { .user-con {
display: inline-flex; display: inline-flex;
vertical-align: top; vertical-align: top;
......
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