Skip to content

foreign / customer-service

Go to a project
Commit 049a2228 by Sixong.Zhu
Options

eslint

parent a2b13d43
Expand all
Inline Side-by-side
Showing with 304 additions and 82 deletions
chat.vue
......@@ -44,8 +44,10 @@
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import remarkList from "../components/common/remarkList.vue";
import ChatMembers from "./components/chat-members.vue";
import ChatRoom from "./components/chat-room.vue";
import ChatTitle from "./components/chat-title.vue";
......@@ -108,7 +110,7 @@ export default class Chat extends Vue {
this.refreshFlag = true;
this.$nextTick(() => {
this.refreshFlag = false;
})
});
}
@Prop(String) modelName: string;
......
components/chat-container.vue
......@@ -39,9 +39,10 @@
<script lang="ts">
import { Component, Prop, Ref, Vue, Watch } from "vue-property-decorator";
import ChatList from "@/customer-service/components/chat-list.vue";
import ChatListModel from "@/customer-service/components/chat-list-model.vue";
import chat from "@/customer-service/chat.vue";
import ChatListModel from "@/customer-service/components/chat-list-model.vue";
import ChatList from "@/customer-service/components/chat-list.vue";
import { ChatStore, chatStore } from "@/customer-service/store/model";
@Component({
......
components/chat-list-model.vue
......@@ -104,11 +104,13 @@
<script lang="ts">
import { Component, Prop, Ref, Vue } from "vue-property-decorator";
import { parserMessage } from "./controller";
import { EVENTS } from "@/EventConsts";
import { chatStore, ChatStore } from "@/customer-service/store/model";
import { formatTime, TimeFormatRule } from "@/customer-service/utils/time";
import { Chat as ChatType } from "@/customer-service/xim/models/chat";
import { EVENTS } from "@/EventConsts";
import { parserMessage } from "./controller";
interface SelectChatType extends ChatType {
checked?: boolean;
......@@ -222,7 +224,7 @@ export default class ModelChatList extends Vue {
}
onTransportMessage(e: any) {
let index = e.dataUpdates.findIndex(
const index = e.dataUpdates.findIndex(
(it) =>
it.action === "startChat" ||
it.action === "createChat" ||
......@@ -232,7 +234,7 @@ export default class ModelChatList extends Vue {
(it.action === "sendMsg" &&
this.listName === "group_before_handle" &&
this.chatList.findIndex(
(chat) => chat.id == it.selectedList[0]
(chat) => chat.id === it.selectedList[0]
) > -1)
);
if (index > -1) {
......@@ -267,7 +269,7 @@ export default class ModelChatList extends Vue {
}
private async goToChatRoom(data: ChatType) {
const chatInfo = await this._createChat({
await this._createChat({
modelName: data.business_data.model_name,
selectedListId: data.business_data.obj_id,
uids: [],
......@@ -281,7 +283,7 @@ export default class ModelChatList extends Vue {
}
private parseMesage(data: ChatType) {
if (data.last_msg_sender && data.last_msg_sender != "0") {
if (data.last_msg_sender && data.last_msg_sender !== "0") {
if (this.userNames[data.last_msg_sender] === undefined) {
this.updateUserName({ id: data.last_msg_sender, name: "" });
this.sdk
......@@ -311,7 +313,7 @@ export default class ModelChatList extends Vue {
}
private batchStartReception() {
let chats = this.chatRooms.filter((chat) => chat.checked);
const chats = this.chatRooms.filter((chat) => chat.checked);
if (chats.length === 0) {
this.$message.warning("请先勾选要接待的会话");
return;
......
components/chat-list.vue
......@@ -53,11 +53,13 @@
<script lang="ts">
import { Component, Prop, Ref, Vue } from "vue-property-decorator";
import Controller from "./controller/chat-list";
import { EVENTS } from "@/EventConsts";
import avatar from "@/customer-service/components/avatar.vue";
import { ChatStore } from "@/customer-service/store/model";
import { Chat as ChatType } from "@/customer-service/xim/models/chat";
import { EVENTS } from "@/EventConsts";
import Controller from "./controller/chat-list";
@Component({ components: { avatar } })
export default class ChatList extends Controller {
......
components/chat-members.vue
......@@ -37,26 +37,33 @@ export default class ChatMembers extends Vue {
@chatStore.Action(ChatStore.ACTION_CHAT_REMOVE_CS)
private readonly _getoutCs!: ChatStore.ACTION_CHAT_REMOVE_CS;
private async getout(item: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS[number]) {
private async getout(
item: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS[number]
) {
await this.$confirm(`确定要移除${item.name}？`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
});
// xim里的eid等于uniplat里的uid
if (item.type == 25) { // 普通成员
this._getout([item.eid])
} else if (item.type == 92) { // 可否
this._getoutCs([item.eid])
if (item.type === 25) {
// 普通成员
this._getout([item.eid]);
} else if (item.type === 92) {
// 可否
this._getoutCs([item.eid]);
}
}
private memberTypeStr(type: string | number) {
if (type.toString() === "25") {
return ""
} else if (type.toString() === "92") {
return "客服"
} else if (type.toString() === "85") {
return "管理员"
return "";
}
if (type.toString() === "92") {
return "客服";
}
if (type.toString() === "85") {
return "管理员";
}
}
}
......
components/chat-room.vue
......@@ -24,7 +24,7 @@
></div>
<div
ref="bottom"
class="chat-input flex-none overflow-hidden"
class="chat-input flex-none overflow-hidden h-100"
v-if="isChatMember"
>
<message-input @error="onError" />
......@@ -37,10 +37,10 @@
import {
Component,
Prop,
Provide,
Ref,
Watch,
Vue,
Provide,
Watch,
} from "vue-property-decorator";
import MessageInput from "@/customer-service/components/message-input.vue";
......@@ -156,8 +156,9 @@ export default class ChatRoom extends Vue {
}
mounted() {
(this.refBottom as HTMLElement).style.height =
this.chatBox.clientHeight - this.refTop.clientHeight + "px";
this.refBottom &&
((this.refBottom as HTMLElement).style.height =
this.chatBox.clientHeight - this.refTop.clientHeight + "px");
}
}
</script>
......
components/chat-title.vue
......@@ -55,6 +55,7 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import ChatCreator from "@/customer-service/components/create-chat.vue";
import { ChatStore, chatStore } from "@/customer-service/store/model";
......@@ -130,7 +131,7 @@ export default class ChatTitle extends Vue {
private async exitChat() {
try {
if (this.operatorType == "25") {
if (this.operatorType === "25") {
await this._userExitChat();
} else if (+this.operatorType > 25) {
await this._csExitChat();
......
components/create-chat.vue
......@@ -57,12 +57,13 @@
</el-dialog>
</template>
<script lang="ts">
import { ListEasy, ListTypes } from "uniplat-sdk";
import { ListEasy, ListTypes, TagManagerTypes } from "uniplat-sdk";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import GeneralTagSelectForFilter from "@/components/statistic/GeneralTagSelectForFilter.vue"
import buttonThrottle from "../utils/button-throttle";
import GeneralTagSelectForFilter from "@/components/statistic/GeneralTagSelectForFilter.vue";
import avatar from "@/customer-service/components/avatar.vue";
import { TagManagerTypes } from "uniplat-sdk"
import chat from "@/customer-service/xim/index";
type User = {
id: string;
......@@ -103,9 +104,9 @@ export default class ChatCreator extends Vue {
if (this.$refs.generalTagSelect) {
return (
this.$refs.generalTagSelect as GeneralTagSelectForFilter
).getSelectedTags()
).getSelectedTags();
}
return []
return [];
}
private async getUserList(searchText: string | null = null) {
......@@ -127,7 +128,7 @@ export default class ChatCreator extends Vue {
this.getList = getList;
this.userList = this.exactUserList(pageData.rows);
this.loading = false;
this.tagGroups = pageData.tagGroups || []
this.tagGroups = pageData.tagGroups || [];
}
private exactUserList(rows: any[]) {
......
components/msg-shortcut.vue
<template>
<div class="msg-short-cut-wrap">
<div class="btn-group top-btn-group">
<el-button type="text" @click="replyInputVisible = true" v-if="!replyInputVisible">添加</el-button>
<el-button v-show="replyInputVisible" @click="addReply" size="small" type="text">提交</el-button>
<el-button v-show="replyInputVisible" @click="hideReplyInput" size="small" type="text">取消</el-button>
<br>
<el-input class="remark-input" type="textarea" v-show="replyInputVisible" v-model="addReplyStr" maxlength="200" minlength="2" :show-word-limit="true"></el-input>
<el-button
type="text"
@click="replyInputVisible = true"
v-if="!replyInputVisible"
>添加</el-button
>
<el-button
v-show="replyInputVisible"
@click="addReply"
size="small"
type="text"
>提交</el-button
>
<el-button
v-show="replyInputVisible"
@click="hideReplyInput"
size="small"
type="text"
>取消</el-button
>
<br />
<el-input
class="remark-input"
type="textarea"
v-show="replyInputVisible"
v-model="addReplyStr"
maxlength="200"
minlength="2"
:show-word-limit="true"
></el-input>
</div>
<div class="shortcut pointer" v-for="(reply, index) in replyList" :key="reply.id">
<span class="rep-index">{{index + 1}}.</span>
<span class="rep-content" v-if="!editingItem[reply.id]">{{ reply.content }}</span>
<el-input v-if="editingItem[reply.id]" class="remark-input" type="textarea" v-model="editingItemContent[reply.id]" maxlength="200" minlength="2" :show-word-limit="true"></el-input>
<div
class="shortcut pointer"
v-for="(reply, index) in replyList"
:key="reply.id"
>
<span class="rep-index">{{ index + 1 }}.</span>
<span class="rep-content" v-if="!editingItem[reply.id]">{{
reply.content
}}</span>
<el-input
v-if="editingItem[reply.id]"
class="remark-input"
type="textarea"
v-model="editingItemContent[reply.id]"
maxlength="200"
minlength="2"
:show-word-limit="true"
></el-input>
<div class="btn-group">
<el-button type="text" @click="sendMsg(reply)" v-if="!editingItem[reply.id]">发送</el-button>
<el-button type="text" v-if="uid === reply.created_by && !editingItem[reply.id]" @click="editing(reply)">编辑</el-button>
<el-button type="text" v-if="uid === reply.created_by && !editingItem[reply.id]" @click="delReply(reply)">删除</el-button>
<el-button v-if="editingItem[reply.id]" @click="editDone(reply)" type="text">确定</el-button>
<el-button v-if="editingItem[reply.id]" @click="editCancel(reply)" type="text">取消</el-button>
<el-button
type="text"
@click="sendMsg(reply)"
v-if="!editingItem[reply.id]"
>发送</el-button
>
<el-button
type="text"
v-if="uid === reply.created_by && !editingItem[reply.id]"
@click="editing(reply)"
>编辑</el-button
>
<el-button
type="text"
v-if="uid === reply.created_by && !editingItem[reply.id]"
@click="delReply(reply)"
>删除</el-button
>
<el-button
v-if="editingItem[reply.id]"
@click="editDone(reply)"
type="text"
>确定</el-button
>
<el-button
v-if="editingItem[reply.id]"
@click="editCancel(reply)"
type="text"
>取消</el-button
>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { Component, Vue } from "vue-property-decorator";
import { ChatStore, chatStore } from "../store/model";
import buttonThrottle from "../utils/button-throttle";
......@@ -30,8 +95,8 @@ interface Reply {
sort: string;
id: string;
content: string;
uniplat_version: string
created_by: string
uniplat_version: string;
created_by: string;
}
const ReplyModelName = "uniplat_chat_reply";
......@@ -48,15 +113,17 @@ export default class MsgShortCut extends Vue {
private uid = this.sdk.global.uid;
private replyInputVisible = false;
private addReplyStr = "";
private editingItem: {[key: string]: boolean} = {};
private editingItemContent: {[key: string]: string} = {};
private editingItem: { [key: string]: boolean } = {};
private editingItemContent: { [key: string]: string } = {};
async mounted() {
await this.getReplyList();
}
private async getReplyList() {
this.replyList = await this.sdk.domainService("uniplat_base", "chat.chat", "reply").request("get");
this.replyList = await this.sdk
.domainService("uniplat_base", "chat.chat", "reply")
.request("get");
}
@buttonThrottle()
......@@ -73,36 +140,50 @@ export default class MsgShortCut extends Vue {
cancelButtonText: "取消",
type: "warning",
}).then(() => {
this.sdk.model(ReplyModelName).action("delete").updateInitialParams({
selected_list: [{ v: +reply.uniplat_version, id: +reply.id }],
}).execute().then(() => {
const index = this.replyList.findIndex(it => it === reply);
this.replyList.splice(index, 1);
})
})
this.sdk
.model(ReplyModelName)
.action("delete")
.updateInitialParams({
selected_list: [
{ v: +reply.uniplat_version, id: +reply.id },
],
})
.execute()
.then(() => {
const index = this.replyList.findIndex(
(it) => it === reply
);
this.replyList.splice(index, 1);
});
});
}
private hideReplyInput() {
this.replyInputVisible = false;
this.addReplyStr = ""
this.addReplyStr = "";
}
private addReply() {
let addReplyStr = this.addReplyStr.trim()
const addReplyStr = this.addReplyStr.trim();
if (addReplyStr.length < 2 || addReplyStr.length > 200) {
this.$message.warning("回复在2-200个字符之间");
return
return;
}
this.sdk.model(ReplyModelName).action("insert_my").addInputs_parameter({
category: "毕节客服工作台",
org_id: this.sdk.global.initData.orgId,
model: ReplyModelName,
content: addReplyStr,
sort: 0
}).execute().then(() => {
this.getReplyList();
this.hideReplyInput();
});
this.sdk
.model(ReplyModelName)
.action("insert_my")
.addInputs_parameter({
category: "毕节客服工作台",
org_id: this.sdk.global.initData.orgId,
model: ReplyModelName,
content: addReplyStr,
sort: 0,
})
.execute()
.then(() => {
this.getReplyList();
this.hideReplyInput();
});
}
private editing(reply: Reply) {
......@@ -115,12 +196,14 @@ export default class MsgShortCut extends Vue {
}
private editDone(reply: Reply) {
let addReplyStr = this.editingItemContent[reply.id].trim();
const addReplyStr = this.editingItemContent[reply.id].trim();
if (addReplyStr.length < 2 || addReplyStr.length > 200) {
this.$message.warning("回复在2-200个字符之间");
return
return;
}
this.sdk.model(ReplyModelName).action("update")
this.sdk
.model(ReplyModelName)
.action("update")
.updateInitialParams({
selected_list: [{ v: +reply.uniplat_version, id: +reply.id }],
})
......@@ -131,8 +214,10 @@ export default class MsgShortCut extends Vue {
content: addReplyStr,
sort: 0,
is_enabled: 1,
uniplat_uid: this.sdk.global.uid
}).execute().then(() => {
uniplat_uid: this.sdk.global.uid,
})
.execute()
.then(() => {
reply.content = addReplyStr;
reply.uniplat_version = (+reply.uniplat_version + 1).toString();
this.editCancel(reply);
......@@ -143,7 +228,7 @@ export default class MsgShortCut extends Vue {
<style lang="less" scoped>
.shortcut {
position: relative;
padding:10px 10px;
padding: 10px 10px;
font-size: 14px;
white-space: normal;
color: #999;
......
database/index.ts 0 → 100644
import { Chat, Message } from "./../xim/models/chat";
class ChatCacheDatabaseController {
private db: IDBDatabase;
private readonly version = new Date().valueOf();
private readonly chatListKey = "chat-list";
private readonly chatMessageKey = "chat-message";
public setup(uid: string) {
return new Promise<void>((resolve) => {
if (uid && indexedDB) {
const r = indexedDB.open(uid, this.version);
const that = this;
const setupDb = () => {
if (that.db) {
that.buildTables(that.db, that.chatListKey);
that.buildTables(that.db, that.chatMessageKey);
}
resolve();
};
r.onsuccess = function (e) {
that.db = (e.target as any).result;
};
r.onupgradeneeded = function (e) {
that.db = (e.target as any).result;
setupDb();
};
} else {
resolve();
}
});
}
private buildTables(database: IDBDatabase, key: string, path?: string) {
if (!database.objectStoreNames.contains(key)) {
database.createObjectStore(key, { keyPath: path });
}
}
private buildTransaction(key: string) {
return this.db.transaction(key, "readwrite");
}
private buildStore(key: string) {
const transaction = this.buildTransaction(key);
return transaction.objectStore(key);
}
public saveChatList(items: Chat[]) {
if (this.db) {
const store = this.buildStore(this.chatListKey);
for (const item of items) {
store.add(item, item.id);
}
}
}
public getChatList() {
return new Promise<Chat[]>((resolve) => {
if (!this.db) {
return resolve([]);
}
const store = this.buildStore(this.chatListKey);
const r = store.getAll();
r.onsuccess = (o) => {
resolve((o.target as any).result);
};
r.onerror = () => resolve([]);
});
}
public saveChatMessages(chat: number, items: Message[]) {
if (this.db && items) {
const store = this.buildStore(this.chatMessageKey);
store.add(items, chat);
}
}
public getChatMessages(chat: number) {
return new Promise<Message[]>((resolve) => {
if (!this.db) {
return resolve([]);
}
const store = this.buildStore(this.chatMessageKey);
const r = store.get(chat);
r.onsuccess = (o) => {
resolve((o.target as any).result);
};
r.onerror = () => resolve([]);
});
}
public appendMessages(chat: number, items: Message[]) {
return new Promise<void>((resolve) => {
if (!this.db || !items.length) {
return resolve();
}
const store = this.buildStore(this.chatMessageKey);
const r = store.get(chat);
r.onsuccess = (o) => {
const cache = (o.target as any).result as Message[];
for (const item of items) {
if (!cache.find((i) => i.id === item.id)) {
cache.push(item);
}
}
const sort = cache.sort((i) => i.ts);
store.put(sort, chat);
resolve();
};
r.onerror = () => resolve();
});
}
}
export const dbController = new ChatCacheDatabaseController();
store/model.ts
......@@ -246,7 +246,7 @@ export namespace ChatStore {
export const ACTION_GET_MY_CHAT_LIST = "获取我的会话列表";
export type ACTION_GET_MY_CHAT_LIST = (
keyword?: string
) => Promise<ChatStore.STATE_MY_CHAT_ROOM_LIST>;
) => Promise<ChatType[]>;
export const ACTION_JOIN_CHAT = "加入某个会话";
export type ACTION_JOIN_CHAT = (chatId: number) => void;
......
xim/index.ts
......@@ -6,6 +6,7 @@ import { ChatOption, TokenStringGetter } from "./../model";
import { ChatLoggerService } from "./logger";
import tokenManager from "./token";
import xim from "./xim";
import { dbController } from "../database";
class Chat {
private _sdk?: () => UniplatSdk;
......@@ -30,6 +31,8 @@ class Chat {
this._sdk = option.sdk;
this._orgId = option.orgId;
dbController.setup(this._sdk().global.uid);
this.token = async () => option.sdk().global.jwtToken;
tokenManager.save(this.token);
......
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