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>
<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-area h-100">
<template v-if="notOnlyCheck">
......@@ -129,28 +114,7 @@ export default class ChatRoom extends Vue {
</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;
}
}
.chat-status {
display: inline-block;
width: 46px;
......@@ -168,7 +132,7 @@ export default class ChatRoom extends Vue {
}
.chat-panel {
height: calc(100% - 60px);
height: 100%;
.chat-area,
.chat-info {
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>
<div class="chat-con h-100">
<div v-if="chatId != null" class="h-100 chat-area">
<chat-room :close="hide" />
</div>
<div class="chat-panel h-100">
<!-- <div class="buttons">
<ChatTitle :close="hide" />
<div class="chat-area-con">
<div v-if="chatId != null" class="h-100 chat-area">
<chat-room />
</div>
<div class="chat-panel h-100">
<!-- <div class="buttons">
<el-button class="button" @click="terminate" round
>结束会话</el-button
>
......@@ -12,19 +14,25 @@
>添加成员</el-button
>
</div> -->
<el-tabs v-model="currentTab">
<el-tab-pane label="数据" name="one"
>model的数据，可配置。</el-tab-pane
>
<el-tab-pane :label="`成员${chatMembers.length}人`" name="two">
<ChatMembers />
</el-tab-pane>
<el-tab-pane label="工作流" name="three">工作流</el-tab-pane>
<el-tab-pane label="备注" name="four">
<remarkList modelName="user" />
</el-tab-pane>
<el-tab-pane label="回复" name="five">回复</el-tab-pane>
</el-tabs>
<el-tabs v-model="currentTab">
<el-tab-pane label="数据" name="one"
>model的数据，可配置。</el-tab-pane
>
<el-tab-pane
:label="`成员${chatMembers.length}人`"
name="two"
>
<ChatMembers />
</el-tab-pane>
<el-tab-pane label="工作流" name="three"
>工作流</el-tab-pane
>
<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>
<ChatCreator
v-if="visible"
......@@ -40,6 +48,7 @@ import { Component, Vue } from "vue-property-decorator";
import remarkList from "../components/common/remarkList.vue";
import ChatRoom from "./chat-room.vue";
import ChatTitle from "./chat-title.vue";
import ChatMembers from "./components/chat-members.vue";
import MessageList from "./message-list.vue";
import buttonThrottle from "./utils/button-throttle";
......@@ -48,7 +57,14 @@ import ChatCreator from "@/customer-service/create-chat.vue";
import { ChatStore, chatStore } from "@/customer-service/store/model";
@Component({
components: { MessageList, ChatRoom, ChatCreator, ChatMembers, remarkList },
components: {
MessageList,
ChatRoom,
ChatCreator,
ChatMembers,
remarkList,
ChatTitle,
},
})
export default class Chat extends Vue {
@chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
......@@ -93,6 +109,9 @@ export default class Chat extends Vue {
}
</script>
<style lang="less" scoped>
.chat-area-con {
height: calc(100% - 60px);
}
.chat-con {
--chat-panel-width: 350px;
font-size: 13px;
......
create-chat.vue
......@@ -16,7 +16,7 @@
>筛选</el-button
>
</div>
<div v-loading="loading">
<div class="users" v-loading="loading">
<div
v-for="user in userList"
:key="user.id"
......@@ -176,6 +176,9 @@ export default class ChatCreator extends Vue {
padding: 30px 40px;
}
}
.users {
white-space: pre-line;
}
.user-con {
display: inline-flex;
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