Skip to content

foreign / customer-service

Go to a project
Commit a2b13d43 by Sixong.Zhu
Options

update style

parent 3fa9d734
Inline Side-by-side
Showing with 119 additions and 94 deletions
components/chat-room.vue
...@@ -22,7 +22,11 @@ ...@@ -22,7 +22,11 @@
@mousedown="dragControllerDiv" @mousedown="dragControllerDiv"
v-if="isChatMember" v-if="isChatMember"
></div> ></div>
<div ref="bottom" class="chat-input" v-if="isChatMember"> <div
ref="bottom"
class="chat-input flex-none overflow-hidden"
v-if="isChatMember"
>
<message-input @error="onError" /> <message-input @error="onError" />
</div> </div>
</div> </div>
...@@ -33,10 +37,10 @@ ...@@ -33,10 +37,10 @@
import { import {
Component, Component,
Prop, Prop,
Provide,
Vue,
Watch,
Ref, Ref,
Watch,
Vue,
Provide,
} from "vue-property-decorator"; } from "vue-property-decorator";
import MessageInput from "@/customer-service/components/message-input.vue"; import MessageInput from "@/customer-service/components/message-input.vue";
...@@ -118,46 +122,43 @@ export default class ChatRoom extends Vue { ...@@ -118,46 +122,43 @@ export default class ChatRoom extends Vue {
} }
private onError(msg: string) { private onError(msg: string) {
// eslint-disable-next-line no-console
console.error(msg);
this.$message.error(msg); this.$message.error(msg);
} }
private dragControllerDiv(e: MouseEvent) { private dragControllerDiv(e: MouseEvent) {
let resize = this.refResize as any; const resize = this.refResize as any;
let top = this.refTop as HTMLElement; const top = this.refTop as HTMLElement;
let bottom = this.refBottom as HTMLElement; const bottom = this.refBottom as HTMLElement;
let box = this.chatBox as HTMLElement; const box = this.chatBox as HTMLElement;
//颜色改变提醒 const startY = e.clientY;
// resize.style.background = '#ccc'; const originTop = resize.offsetTop;
let startY = e.clientY;
let originTop = resize.offsetTop;
// 鼠标拖动事件
document.onmousemove = function (e) { document.onmousemove = function (e) {
let endY = e.clientY; const endY = e.clientY;
let moveLen = originTop + (endY - startY); // (endY-startY) = 移动的距离。originTop + 移动的距离 = 顶部区域最后的高度 let moveLen = originTop + (endY - startY); // (endY-startY) = 移动的距离。originTop + 移动的距离 = 顶部区域最后的高度
if (moveLen < 300) moveLen = 300; // 上部区域的最小高度为300px if (moveLen < 300) moveLen = 300; // 上部区域的最小高度为300px
if (box.clientHeight - moveLen < 150) { if (box.clientHeight - moveLen < 150) {
moveLen = box.clientHeight - 150; moveLen = box.clientHeight - 150;
} }
let bottomHeight = box.clientHeight - moveLen; const bottomHeight = box.clientHeight - moveLen;
resize.style.top = moveLen + "px"; // 设置左侧区域的宽度 resize.style.top = moveLen + "px"; // 设置左侧区域的宽度
top.style.height = moveLen + "px"; top.style.height = moveLen + "px";
bottom.style.height = bottomHeight + "px"; bottom.style.height = bottomHeight + "px";
}; };
// 鼠标松开事件 document.onmouseup = function () {
document.onmouseup = function (evt) {
//颜色恢复
// resize.style.background = 'transparent';
document.onmousemove = null; document.onmousemove = null;
document.onmouseup = null; document.onmouseup = null;
resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉 resize.releaseCapture && resize.releaseCapture();
}; };
resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获 resize.setCapture && resize.setCapture();
return false; return false;
} }
mounted() {
(this.refBottom as HTMLElement).style.height =
this.chatBox.clientHeight - this.refTop.clientHeight + "px";
}
} }
</script> </script>
...@@ -229,9 +230,6 @@ export default class ChatRoom extends Vue { ...@@ -229,9 +230,6 @@ export default class ChatRoom extends Vue {
height: 6px; height: 6px;
width: 100%; width: 100%;
} }
.chat-input {
height: var(--input-height);
}
} }
.order-info-con { .order-info-con {
height: calc(100% - 40px); height: calc(100% - 40px);
......
components/message-input.vue
<template> <template>
<div class="h-100"> <chat-input
<chat-input ref="chat-input"
ref="chat-input" @input="onInput"
@input="onInput" @send="sendMessage"
@send="sendMessage" @error="onError"
@error="onError" />
/>
</div>
</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";
......
components/message.vue
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
:src="messageRealUrl" :src="messageRealUrl"
:title="messageBody.msg.name" :title="messageBody.msg.name"
:alt="messageBody.msg.name" :alt="messageBody.msg.name"
@error="onImageError"
/> />
<file-icon <file-icon
v-else-if="fileFailed2Load" v-else-if="fileFailed2Load"
...@@ -425,6 +426,11 @@ export default class Message extends Mixins(Filters) { ...@@ -425,6 +426,11 @@ export default class Message extends Mixins(Filters) {
private format2Link(text: string) { private format2Link(text: string) {
return replaceText2Link(text); return replaceText2Link(text);
} }
private onImageError() {
this.fileFailed2Load = true;
this.messageRealUrl = "";
}
} }
</script> </script>
......
components/model-detail.vue
...@@ -2,25 +2,37 @@ ...@@ -2,25 +2,37 @@
<div class="h-100 pos-rel"> <div class="h-100 pos-rel">
<div class="scroll-wrap"> <div class="scroll-wrap">
<el-scrollbar class="h-100"> <el-scrollbar class="h-100">
<div class="data-row" v-for="item in detailData" :key="item.label"> <div
<span class="data-key">{{ item.label }}{{ item.label? ":" : "" }} </span class="data-row"
v-for="item in detailData"
:key="item.label"
>
<span class="data-key"
>{{ item.label }}{{ item.label ? ":" : "" }} </span
><span class="data-value" v-html="item.template"></span> ><span class="data-value" v-html="item.template"></span>
<span class="operation_field" v-if="item.actions && item.actions.length > 0"> <span
<el-button v-for="action in item.actions" class="operation_field"
v-if="item.actions && item.actions.length > 0"
>
<el-button
v-for="action in item.actions"
:key="action.name" :key="action.name"
@click="execute_action(action)" @click="execute_action(action)"
type="text" type="text"
size="small" size="small"
>{{ action.label }}</el-button> >{{ action.label }}</el-button
>
</span> </span>
</div> </div>
<div class="top-actions"> <div class="top-actions">
<el-button v-for="action in actions" <el-button
v-for="action in actions"
:key="action.name" :key="action.name"
@click="execute_action(action)" @click="execute_action(action)"
type="text" type="text"
size="small" size="small"
>{{ action.label }}</el-button> >{{ action.label }}</el-button
>
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
...@@ -32,38 +44,38 @@ ...@@ -32,38 +44,38 @@
<script lang="ts"> <script lang="ts">
import { DetailTypes } from "uniplat-sdk"; import { DetailTypes } from "uniplat-sdk";
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import { EVENTS } from "@/EventConsts"
import { ChatStore, chatStore } from "../store/model"; import { ChatStore, chatStore } from "../store/model";
import Chat from "../xim"; import Chat from "../xim";
import { goForward } from "@/utils/go-forward"
import { EVENTS } from "@/EventConsts";
import { goForward } from "@/utils/go-forward";
@Component({ components: {} }) @Component({ components: {} })
export default class ChatModelDetail extends Vue { export default class ChatModelDetail extends Vue {
@chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT) @chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT)
private readonly hideChat: ChatStore.MUTATION_HIDE_CHAT; private readonly hideChat: ChatStore.MUTATION_HIDE_CHAT;
@Prop({ @Prop({ type: String, required: true })
type: String,
required: true,
})
private readonly model_name!: string; private readonly model_name!: string;
@Prop({ @Prop({ type: String, required: true })
type: String,
required: true,
})
private readonly id!: string; private readonly id!: string;
@Prop({ @Prop({ type: String, default: null })
type: String,
default: null,
})
private readonly name!: string; private readonly name!: string;
private sseMessageRefreshData = false; private sseMessageRefreshData = false;
private detailData: DetailTypes.getDetailRequestResult["meta"]["header"]["field_groups"] | null = null
private detailRow: DetailTypes.getDetailRequestResult["row"] | null = null private detailData:
private keyField = "" | DetailTypes.getDetailRequestResult["meta"]["header"]["field_groups"]
private actions: DetailTypes.getDetailRequestResult["meta"]["actions"] | null = null | null = null;
private detailRow: DetailTypes.getDetailRequestResult["row"] | null = null;
private keyField = "";
private actions:
| DetailTypes.getDetailRequestResult["meta"]["actions"]
| null = null;
public async created() { public async created() {
await this.init(); await this.init();
...@@ -95,11 +107,14 @@ export default class ChatModelDetail extends Vue { ...@@ -95,11 +107,14 @@ export default class ChatModelDetail extends Vue {
confirm_caption, confirm_caption,
open_in_new_tab, open_in_new_tab,
authed, authed,
} = actionParams } = actionParams;
let x = this.detailRow const x = this.detailRow;
let r: { v: number } = { v: 0 } const r: { v: number; id: number } = { v: 0, id: 0 };
r["id"] = x[this.keyField].value r.id = x[this.keyField].value as number;
if (x["uniplat_version"]) r.v = x["uniplat_version"].value
if (x.uniplat_version) {
r.v = x.uniplat_version.value as number;
}
if (!authed) { if (!authed) {
this.$eventHub.$emit(EVENTS.ShowModalDialog, { this.$eventHub.$emit(EVENTS.ShowModalDialog, {
...@@ -108,8 +123,8 @@ export default class ChatModelDetail extends Vue { ...@@ -108,8 +123,8 @@ export default class ChatModelDetail extends Vue {
actionName: actionParams.action_name, actionName: actionParams.action_name,
modelName: this.model_name, modelName: this.model_name,
}, },
}) });
return return;
} }
if (container === "page") { if (container === "page") {
...@@ -125,14 +140,14 @@ export default class ChatModelDetail extends Vue { ...@@ -125,14 +140,14 @@ export default class ChatModelDetail extends Vue {
prefilters: JSON.stringify([]), prefilters: JSON.stringify([]),
options: { confirm_caption }, options: { confirm_caption },
callWhenSuccess: (data) => { callWhenSuccess: (data) => {
let forward = data.forward const forward = data.forward;
this.init(); this.init();
if (!!forward && forward != "") { if (!!forward && forward !== "") {
goForward.call(this, forward, this.init) goForward.call(this, forward, this.init);
} }
}, },
}, },
}) });
} else if (container === "batch") { } else if (container === "batch") {
this.$eventHub.$emit(EVENTS.ShowModalDialog, { this.$eventHub.$emit(EVENTS.ShowModalDialog, {
dialogName: "general_execute_batch", dialogName: "general_execute_batch",
...@@ -143,14 +158,14 @@ export default class ChatModelDetail extends Vue { ...@@ -143,14 +158,14 @@ export default class ChatModelDetail extends Vue {
prefilters: [], prefilters: [],
onSuccessed: this.init, onSuccessed: this.init,
}, },
}) });
} else if (container === "detail_dialog") { } else if (container === "detail_dialog") {
this.$eventHub.$emit(EVENTS.ShowModalDialog, { this.$eventHub.$emit(EVENTS.ShowModalDialog, {
dialogName: "general_detail_dialog", dialogName: "general_detail_dialog",
params: { params: {
forward: forward, forward: forward,
}, },
}) });
} else if (container === "iframe") { } else if (container === "iframe") {
if ( if (
forward.indexOf("http://") !== 0 && forward.indexOf("http://") !== 0 &&
...@@ -160,7 +175,7 @@ export default class ChatModelDetail extends Vue { ...@@ -160,7 +175,7 @@ export default class ChatModelDetail extends Vue {
forward = forward =
"/" + "/" +
this.global.$vapperRootPath + this.global.$vapperRootPath +
forward.replace(/^\//, "") forward.replace(/^\//, "");
} }
} }
this.$eventHub.$emit(EVENTS.ShowModalDialog, { this.$eventHub.$emit(EVENTS.ShowModalDialog, {
...@@ -171,7 +186,7 @@ export default class ChatModelDetail extends Vue { ...@@ -171,7 +186,7 @@ export default class ChatModelDetail extends Vue {
width: "70%", width: "70%",
height: 500, height: 500,
}, },
}) });
} else if (container === "startProcess") { } else if (container === "startProcess") {
this.$eventHub.$emit(EVENTS.ShowModalDialog, { this.$eventHub.$emit(EVENTS.ShowModalDialog, {
dialogName: "start_process_dialog", dialogName: "start_process_dialog",
...@@ -183,28 +198,28 @@ export default class ChatModelDetail extends Vue { ...@@ -183,28 +198,28 @@ export default class ChatModelDetail extends Vue {
prefilters: {}, prefilters: {},
filters: {}, filters: {},
options: { confirm_caption }, options: { confirm_caption },
callWhenSuccess: (data) => { callWhenSuccess: () => {
this.$emit("datachange") this.$emit("datachange");
}, },
}, },
}) });
} else { } else {
if ( if (
forward.indexOf("http://") == 0 || forward.indexOf("http://") === 0 ||
forward.indexOf("https://") == 0 forward.indexOf("https://") === 0
) { ) {
window.open(forward, "_blank") window.open(forward, "_blank");
} else { } else {
if (this.global.$ssr && this.global.$vapperRootPath) { if (this.global.$ssr && this.global.$vapperRootPath) {
forward = forward =
"/" + "/" +
this.global.$vapperRootPath + this.global.$vapperRootPath +
forward.replace(/^\//, "") forward.replace(/^\//, "");
} }
if (open_in_new_tab) { if (open_in_new_tab) {
window.open(`${forward}`, "_blank") window.open(`${forward}`, "_blank");
} else { } else {
this.$router.push(forward) this.$router.push(forward);
} }
} }
} }
...@@ -244,7 +259,7 @@ export default class ChatModelDetail extends Vue { ...@@ -244,7 +259,7 @@ export default class ChatModelDetail extends Vue {
margin-top: 10px; margin-top: 10px;
padding: 0 20px; padding: 0 20px;
white-space: normal; white-space: normal;
.el-button+.el-button { .el-button + .el-button {
margin-left: 0; margin-left: 0;
} }
.el-button { .el-button {
......
components/who-read-list.vue
...@@ -6,11 +6,18 @@ ...@@ -6,11 +6,18 @@
class="who-read-list pos-rel" class="who-read-list pos-rel"
> >
<template> <template>
<div class="d-flex tabs"> <div
class="d-flex tabs"
:class="{
'justify-content-center':
!readlist.length || !unreadlist.length,
}"
>
<div <div
class="tab text-nowrap" class="tab text-nowrap"
:class="{ selected: tab === 1 }" :class="{ selected: tab === 1 }"
@click="tab = 1" @click="tab = 1"
v-if="readlist.length"
> >
<span>{{ readlist.length }}</span> <span>{{ readlist.length }}</span>
<span>已读</span> <span>已读</span>
...@@ -19,6 +26,7 @@ ...@@ -19,6 +26,7 @@
class="tab text-nowrap" class="tab text-nowrap"
:class="{ selected: tab === 2 }" :class="{ selected: tab === 2 }"
@click="tab = 2" @click="tab = 2"
v-if="unreadlist.length"
> >
<span>{{ unreadlist.length }}</span> <span>{{ unreadlist.length }}</span>
<span>未读</span> <span>未读</span>
...@@ -167,6 +175,7 @@ export default class WhoReadList extends Vue { ...@@ -167,6 +175,7 @@ export default class WhoReadList extends Vue {
color: #000; color: #000;
z-index: 2; z-index: 2;
margin-left: -100px; margin-left: -100px;
width: 125px;
.number-count { .number-count {
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
......
hybrid-input/index.vue
<template> <template>
<div class="input-wrap h-100"> <div class="input-wrap h-100 overflow-hidden">
<div class="tool-bar"> <div class="tool-bar">
<img <img
class="tool-bar-icon" class="tool-bar-icon"
...@@ -273,11 +273,11 @@ export default class Input extends Vue { ...@@ -273,11 +273,11 @@ export default class Input extends Vue {
private handleReturn(e: KeyboardEvent) { private handleReturn(e: KeyboardEvent) {
if (e.altKey || e.ctrlKey) { if (e.altKey || e.ctrlKey) {
let el = this.messageInputBox; const el = this.messageInputBox;
let range = document.createRange(); const range = document.createRange();
let sel = window.getSelection(); const sel = window.getSelection();
let offset = sel.focusOffset; const offset = sel.focusOffset;
let content = el.innerHTML; const content = el.innerHTML;
el.innerHTML = el.innerHTML =
content.slice(0, offset) + content.slice(0, offset) +
"\n" + "\n" +
...@@ -290,7 +290,6 @@ export default class Input extends Vue { ...@@ -290,7 +290,6 @@ export default class Input extends Vue {
} }
if (e.shiftKey) { if (e.shiftKey) {
e.preventDefault(); e.preventDefault();
return;
} }
} }
...@@ -563,7 +562,7 @@ export default class Input extends Vue { ...@@ -563,7 +562,7 @@ export default class Input extends Vue {
> .input-container { > .input-container {
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
padding: 10px 20px 10px 0; padding: 10px 20px 20px 0;
outline: 0; outline: 0;
white-space: pre-wrap; white-space: pre-wrap;
user-select: text; user-select: text;
......
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