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