Skip to content

foreign / customer-service

Go to a project
Commit 474ad190 by Sixong.Zhu
Options

cs

parent 9e5832f9
Inline Side-by-side
Showing with 61 additions and 61 deletions
components/message-input.vue
...@@ -7,21 +7,20 @@ ...@@ -7,21 +7,20 @@
/> />
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Ref, Vue, Watch } from "vue-property-decorator"; import { Component, Ref, Vue, Watch } from "vue-property-decorator";
import ChatInput, { import ChatInput, {
FILE_INFO_CLASS, FILE_INFO_CLASS,
isImageOrFile, isImageOrFile,
} from "../hybrid-input/index.vue"; } from "../hybrid-input/index.vue";
import { Message, MessageType } from "../model"; import { Message, MessageType } from "../model";
import { uploadFile } from "../service/upload"; import { uploadFile } from "../service/upload";
import { ChatLoggerService } from "../xim/logger"; import xim from "../xim/xim";
import xim from "../xim/xim"; import { ChatStore, chatStore } from "@/customer-service/store/model";
import { ChatStore, chatStore } from "@/customer-service/store/model";
let sendingMessageIndex = 1; let sendingMessageIndex = 1;
@Component({ components: { ChatInput } }) @Component({ components: { ChatInput } })
export default class MessageInput extends Vue { export default class MessageInput extends Vue {
@chatStore.State(ChatStore.STATE_CHAT_DIALOG_VISIBLE) @chatStore.State(ChatStore.STATE_CHAT_DIALOG_VISIBLE)
private readonly chatRoomVisible!: ChatStore.STATE_CHAT_DIALOG_VISIBLE; private readonly chatRoomVisible!: ChatStore.STATE_CHAT_DIALOG_VISIBLE;
...@@ -58,26 +57,30 @@ export default class MessageInput extends Vue { ...@@ -58,26 +57,30 @@ export default class MessageInput extends Vue {
this.chatInput.focus(); this.chatInput.focus();
} }
private async sendMessage(msg: ChildNode[], done: () => void) { private async sendMessage(msg: ChildNode[]) {
if (this.chatIniting) { if (this.chatIniting) {
return; return;
} }
for (const item of msg) { for (const item of msg) {
if (isImageOrFile(item)) { if (isImageOrFile(item)) {
if ((item as Element).classList.contains(FILE_INFO_CLASS)) { if ((item as Element).classList.contains(FILE_INFO_CLASS)) {
await this.sendFile(item, MessageType.File); await this.sendFile(item, MessageType.File).catch((e) =>
this.onError(e)
);
} else { } else {
await this.sendFile(item, MessageType.Image); await this.sendFile(item, MessageType.Image).catch((e) =>
this.onError(e)
);
} }
continue; continue;
} }
if (item.textContent) { if (item.textContent) {
await this.sendText(item.textContent); await this.sendText(item.textContent).catch((e) =>
this.onError(e)
);
} }
} }
ChatLoggerService.logger?.debug("all messages sent");
done();
this.$emit("sent"); this.$emit("sent");
} }
...@@ -92,11 +95,17 @@ export default class MessageInput extends Vue { ...@@ -92,11 +95,17 @@ export default class MessageInput extends Vue {
if (this.source) { if (this.source) {
Object.assign(msg, { source: this.source }); Object.assign(msg, { source: this.source });
} }
return this.sendMsg({ msgType: MessageType.Text, msg: JSON.stringify(msg) }); return this.sendMsg({
msgType: MessageType.Text,
msg: JSON.stringify(msg),
});
} }
} }
private async sendFile(file: any, type: MessageType.Image | MessageType.File) { private async sendFile(
file: any,
type: MessageType.Image | MessageType.File
) {
const src = JSON.parse( const src = JSON.parse(
file.attributes[`data-${type}`]?.value || "" file.attributes[`data-${type}`]?.value || ""
) as { ) as {
...@@ -186,5 +195,5 @@ export default class MessageInput extends Vue { ...@@ -186,5 +195,5 @@ export default class MessageInput extends Vue {
private onError(e: any) { private onError(e: any) {
this.$emit("error", e.message || e); this.$emit("error", e.message || e);
} }
} }
</script> </script>
hybrid-input/index.vue
...@@ -60,9 +60,9 @@ ...@@ -60,9 +60,9 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Ref, Vue, Watch } from "vue-property-decorator"; import { Component, Ref, Vue, Watch } from "vue-property-decorator";
import { namespace } from "vuex-class"; import { namespace } from "vuex-class";
import { import {
getFileType, getFileType,
getSvg, getSvg,
MAX_FILE_SIZE, MAX_FILE_SIZE,
...@@ -72,48 +72,48 @@ import { ...@@ -72,48 +72,48 @@ import {
MESSAGE_FILE_EMPTY, MESSAGE_FILE_EMPTY,
MESSAGE_FILE_TOO_LARGE, MESSAGE_FILE_TOO_LARGE,
MESSAGE_IMAGE_TOO_LARGE, MESSAGE_IMAGE_TOO_LARGE,
} from "../components/message-item/file-controller"; } from "../components/message-item/file-controller";
import { EmojiItem, EmojiService } from "../service/emoji"; import { EmojiItem, EmojiService } from "../service/emoji";
import { ChatStore } from "../store/model"; import { ChatStore } from "../store/model";
import { formatFileSize } from "../utils"; import { formatFileSize } from "../utils";
export const enum InputMessageType { export const enum InputMessageType {
Text = "text", Text = "text",
Image = "image", Image = "image",
File = "file", File = "file",
} }
export interface InputMessageBody { export interface InputMessageBody {
text?: string; text?: string;
url?: string; url?: string;
name?: string; name?: string;
size?: number; size?: number;
} }
export interface InputMessage { export interface InputMessage {
type: InputMessageType; type: InputMessageType;
body: InputMessageBody; body: InputMessageBody;
file?: File | null; file?: File | null;
} }
const chatStore = namespace("chatStore"); const chatStore = namespace("chatStore");
const chatCache: { [key: number]: any } = {}; const chatCache: { [key: number]: any } = {};
export const IMAGE_INFO_CLASS = "img-info"; export const IMAGE_INFO_CLASS = "img-info";
export const FILE_INFO_CLASS = "file-info"; export const FILE_INFO_CLASS = "file-info";
export function isImageOrFile(node: ChildNode) { export function isImageOrFile(node: ChildNode) {
const e = node as HTMLElement; const e = node as HTMLElement;
return ( return (
e.classList && e.classList &&
(e.classList.contains(IMAGE_INFO_CLASS) || (e.classList.contains(IMAGE_INFO_CLASS) ||
e.classList.contains(FILE_INFO_CLASS)) e.classList.contains(FILE_INFO_CLASS))
); );
} }
@Component({ components: {} }) @Component({ components: {} })
export default class Input extends Vue { export default class Input extends Vue {
@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;
...@@ -300,22 +300,13 @@ export default class Input extends Vue { ...@@ -300,22 +300,13 @@ export default class Input extends Vue {
if (e.shiftKey || e.ctrlKey || e.altKey) { if (e.shiftKey || e.ctrlKey || e.altKey) {
return; return;
} }
return new Promise((resolve, reject) => {
try {
const data = this.getNodeListFromInputBox(); const data = this.getNodeListFromInputBox();
this.$emit("send", data, resolve); this.$emit("send", data);
} catch (e) {
this.$emit("error", e);
reject(e);
}
})
.then(() => {
this.clearInput(); this.clearInput();
if (this.chatId) { if (this.chatId) {
chatCache[this.chatId] = []; chatCache[this.chatId] = [];
} }
}) setTimeout(() => this.getMyChatList(), 120);
.finally(() => setTimeout(() => this.getMyChatList(), 120));
} }
/** /**
...@@ -543,11 +534,11 @@ export default class Input extends Vue { ...@@ -543,11 +534,11 @@ export default class Input extends Vue {
}); });
}); });
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.input-wrap { .input-wrap {
position: relative; position: relative;
padding-left: 20px; padding-left: 20px;
...@@ -619,9 +610,9 @@ export default class Input extends Vue { ...@@ -619,9 +610,9 @@ export default class Input extends Vue {
top: -225px; top: -225px;
outline: 0; outline: 0;
} }
} }
.tool-bar { .tool-bar {
padding-top: 10px; padding-top: 10px;
user-select: none; user-select: none;
...@@ -634,9 +625,9 @@ export default class Input extends Vue { ...@@ -634,9 +625,9 @@ export default class Input extends Vue {
.offset { .offset {
margin: 0 22px; margin: 0 22px;
} }
} }
.emoji-picker { .emoji-picker {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: -232px; top: -232px;
...@@ -664,10 +655,10 @@ export default class Input extends Vue { ...@@ -664,10 +655,10 @@ export default class Input extends Vue {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
} }
#chat-upload-file { #chat-upload-file {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
} }
</style> </style>
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