mirror of
https://github.com/kuaifan/dootask.git
synced 2026-01-15 03:08:11 +00:00
1145 lines
40 KiB
Vue
1145 lines
40 KiB
Vue
<template>
|
|
<div
|
|
v-if="isReady"
|
|
class="dialog-wrapper"
|
|
:class="wrapperClass"
|
|
@drop.prevent="chatPasteDrag($event, 'drag')"
|
|
@dragover.prevent="chatDragOver(true, $event)"
|
|
@dragleave.prevent="chatDragOver(false, $event)"
|
|
@touchstart="onTouchStart"
|
|
@touchmove="onTouchMove">
|
|
<!--顶部导航-->
|
|
<div class="dialog-nav" :style="navStyle">
|
|
<slot name="head">
|
|
<div class="nav-wrapper" :class="{completed:$A.dialogCompleted(dialogData)}">
|
|
<div class="dialog-back" @click="onBack">
|
|
<i class="taskfont"></i>
|
|
<div v-if="msgUnreadOnly" class="back-num">{{msgUnreadOnly}}</div>
|
|
</div>
|
|
|
|
<div class="dialog-block">
|
|
<div class="dialog-avatar">
|
|
<template v-if="dialogData.type=='group'">
|
|
<i v-if="dialogData.group_type=='project'" class="taskfont icon-avatar project"></i>
|
|
<i v-else-if="dialogData.group_type=='task'" class="taskfont icon-avatar task"></i>
|
|
<Icon v-else class="icon-avatar" type="ios-people" />
|
|
</template>
|
|
<div v-else-if="dialogData.dialog_user" class="user-avatar">
|
|
<UserAvatar :online.sync="dialogData.online_state" :userid="dialogData.dialog_user.userid" :size="42"/>
|
|
</div>
|
|
<Icon v-else class="icon-avatar" type="md-person" />
|
|
</div>
|
|
<div class="dialog-title">
|
|
<div class="main-title">
|
|
<template v-for="tag in $A.dialogTags(dialogData)" v-if="tag.color != 'success'">
|
|
<Tag :color="tag.color" :fade="false">{{$L(tag.text)}}</Tag>
|
|
</template>
|
|
<h2>{{dialogData.name}}</h2>
|
|
<em v-if="peopleNum > 0">({{peopleNum}})</em>
|
|
</div>
|
|
<template v-if="dialogData.type === 'group'">
|
|
<div v-if="dialogData.group_type === 'project'" class="sub-title pointer" @click="openProject">
|
|
{{$L('项目聊天室')}} {{$L('打开项目管理')}}
|
|
</div>
|
|
<div v-else-if="dialogData.group_type === 'task'" class="sub-title pointer" @click="openTask">
|
|
{{$L('任务聊天室')}} {{$L('查看任务详情')}}
|
|
</div>
|
|
</template>
|
|
<div v-else-if="dialogData.type === 'user'" :class="['sub-title', dialogData.online_state === true ? 'online' : 'offline']">
|
|
{{$L(dialogData.online_state === true ? '在线' : dialogData.online_state)}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template v-if="dialogData.type === 'group'">
|
|
<ETooltip
|
|
v-if="dialogData.group_type === 'user'"
|
|
placement="top"
|
|
:disabled="windowSmall"
|
|
:openDelay="600"
|
|
:content="$L('群设置')">
|
|
<i class="taskfont dialog-create" @click="groupInfoShow = true"></i>
|
|
</ETooltip>
|
|
</template>
|
|
<ETooltip v-else-if="dialogData.type === 'user' && !isMyDialog" placement="top" :disabled="windowSmall" :content="$L('创建群组')">
|
|
<i class="taskfont dialog-create" @click="openCreateGroup"></i>
|
|
</ETooltip>
|
|
</div>
|
|
</slot>
|
|
</div>
|
|
|
|
<!--消息列表-->
|
|
<VirtualList
|
|
ref="scroller"
|
|
class="dialog-scroller scrollbar-overlay"
|
|
:data-key="'id'"
|
|
:data-sources="allMsgs"
|
|
:data-component="msgItem"
|
|
|
|
:extra-props="{dialogData, isMyDialog, operateVisible, operateItem}"
|
|
:estimate-size="78"
|
|
:keeps="80"
|
|
@scroll="onScroll"
|
|
@totop="loadNextPage"
|
|
|
|
@on-longpress="onLongpress"
|
|
@on-view-text="onViewText"
|
|
@on-view-file="onViewFile"
|
|
@on-emoji="onEmoji">
|
|
<template slot="header">
|
|
<div v-if="(allMsgs.length === 0 && dialogData.loading > 0) || dialogData.hasMorePages" class="dialog-item loading"><Loading/></div>
|
|
<div v-else-if="allMsgs.length > 0" class="dialog-item loaded">{{$L('已加载全部消息')}}</div>
|
|
<div v-else class="dialog-item nothing">{{$L('暂无消息')}}</div>
|
|
</template>
|
|
</VirtualList>
|
|
|
|
<!--底部输入-->
|
|
<div class="dialog-footer" :class="{newmsg: msgNew > 0 && allMsgs.length > 0}" @click="onActive">
|
|
<div class="dialog-newmsg" @click="onToBottom">{{$L(`有${msgNew}条新消息`)}}</div>
|
|
<DialogUpload
|
|
ref="chatUpload"
|
|
class="chat-upload"
|
|
:dialog-id="dialogId"
|
|
:reply-id="replyId"
|
|
@on-progress="chatFile('progress', $event)"
|
|
@on-success="chatFile('success', $event)"
|
|
@on-error="chatFile('error', $event)"/>
|
|
<ChatInput
|
|
ref="input"
|
|
v-model="msgText"
|
|
:dialog-id="dialogId"
|
|
:reply-id="replyId"
|
|
:emoji-bottom="windowSmall"
|
|
:maxlength="200000"
|
|
@on-focus="onEventFocus"
|
|
@on-blur="onEventBlur"
|
|
@on-more="onEventMore"
|
|
@on-file="sendFileMsg"
|
|
@on-send="sendMsg"
|
|
@on-record="sendRecord"
|
|
@on-record-state="onRecordState"
|
|
@on-emoji-visible-change="onEventEmojiVisibleChange"
|
|
@on-cancel-reply="onCancelReply"
|
|
:placeholder="$L('输入消息...')"/>
|
|
</div>
|
|
|
|
<!--长按、右键-->
|
|
<div class="operate-position" :style="operateStyles">
|
|
<Dropdown
|
|
trigger="custom"
|
|
placement="top"
|
|
:visible="operateVisible"
|
|
@on-clickoutside="operateVisible = false"
|
|
transferClassName="dialog-wrapper-operate"
|
|
transfer>
|
|
<div :style="{userSelect:operateVisible ? 'none' : 'auto', height: operateStyles.height}"></div>
|
|
<DropdownMenu slot="list">
|
|
<DropdownItem name="action">
|
|
<ul class="operate-action">
|
|
<li @click="onOperate('reply')">
|
|
<i class="taskfont"></i>
|
|
<span>{{ $L('回复') }}</span>
|
|
</li>
|
|
<li @click="onOperate('forward')">
|
|
<i class="taskfont"></i>
|
|
<span>{{ $L('转发') }}</span>
|
|
</li>
|
|
<template v-if="operateHasText">
|
|
<li @click="onOperate('copy')">
|
|
<i class="taskfont"></i>
|
|
<span>{{ $L('复制') }}</span>
|
|
</li>
|
|
<li @click="onOperate('newTask')">
|
|
<i class="taskfont"></i>
|
|
<span>{{ $L('新任务') }}</span>
|
|
</li>
|
|
</template>
|
|
<template v-if="operateItem.userid == userId">
|
|
<li @click="onOperate('withdraw')">
|
|
<i class="taskfont"></i>
|
|
<span>{{ $L('撤回') }}</span>
|
|
</li>
|
|
</template>
|
|
<template v-if="operateItem.type === 'file'">
|
|
<li @click="onOperate('view')">
|
|
<i class="taskfont"></i>
|
|
<span>{{ $L('查看') }}</span>
|
|
</li>
|
|
<li @click="onOperate('down')">
|
|
<i class="taskfont"></i>
|
|
<span>{{ $L('下载') }}</span>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</DropdownItem>
|
|
<DropdownItem name="emoji" class="dropdown-emoji">
|
|
<ul class="operate-emoji scrollbar-hidden">
|
|
<li
|
|
v-for="(emoji, key) in operateEmojis"
|
|
:key="key"
|
|
v-html="emoji"
|
|
class="no-dark-content"
|
|
@click="onOperate('emoji', emoji)"></li>
|
|
</ul>
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
</div>
|
|
|
|
<!--拖动提示-->
|
|
<div v-if="dialogDrag" class="drag-over" @click="dialogDrag=false">
|
|
<div class="drag-text">{{$L('拖动到这里发送')}}</div>
|
|
</div>
|
|
|
|
<!--拖动发送提示-->
|
|
<Modal
|
|
v-model="pasteShow"
|
|
:title="$L(pasteTitle)"
|
|
:cancel-text="$L('取消')"
|
|
:ok-text="$L('发送')"
|
|
:enter-ok="true"
|
|
@on-ok="pasteSend">
|
|
<ul class="dialog-wrapper-paste" :class="pasteWrapperClass">
|
|
<li v-for="item in pasteItem">
|
|
<img v-if="item.type == 'image'" :src="item.result"/>
|
|
<div v-else>{{$L('文件')}}: {{item.name}} ({{$A.bytesToSize(item.size)}})</div>
|
|
</li>
|
|
</ul>
|
|
</Modal>
|
|
|
|
<!--创建群组-->
|
|
<Modal
|
|
v-model="createGroupShow"
|
|
:title="$L('创建群组')"
|
|
:mask-closable="false">
|
|
<Form :model="createGroupData" label-width="auto" @submit.native.prevent>
|
|
<FormItem prop="userids" :label="$L('群成员')">
|
|
<UserInput v-model="createGroupData.userids" :uncancelable="createGroupData.uncancelable" :multiple-max="100" :placeholder="$L('选择项目成员')"/>
|
|
</FormItem>
|
|
<FormItem prop="chat_name" :label="$L('群名称')">
|
|
<Input v-model="createGroupData.chat_name" :placeholder="$L('输入群名称（选填）')"/>
|
|
</FormItem>
|
|
</Form>
|
|
<div slot="footer" class="adaption">
|
|
<Button type="default" @click="createGroupShow=false">{{$L('取消')}}</Button>
|
|
<Button type="primary" :loading="createGroupLoad > 0" @click="onCreateGroup">{{$L('创建')}}</Button>
|
|
</div>
|
|
</Modal>
|
|
|
|
<!-- 转发 -->
|
|
<Modal
|
|
v-model="forwardShow"
|
|
:title="$L('转发')"
|
|
:mask-closable="false">
|
|
<Form ref="forwardForm" :model="forwardData" label-width="auto" @submit.native.prevent>
|
|
<FormItem prop="userids" :label="$L('转发给')">
|
|
<UserInput v-model="forwardData.userids" :multiple-max="20" :placeholder="$L('选择转发成员')"/>
|
|
</FormItem>
|
|
</Form>
|
|
<div slot="footer" class="adaption">
|
|
<Button type="default" @click="forwardShow=false">{{$L('取消')}}</Button>
|
|
<Button type="primary" :loading="forwardLoad" @click="onForward('submit')">{{$L('转发')}}</Button>
|
|
</div>
|
|
</Modal>
|
|
|
|
<!--群设置-->
|
|
<DrawerOverlay
|
|
v-model="groupInfoShow"
|
|
placement="right"
|
|
:size="380">
|
|
<DialogGroupInfo v-if="groupInfoShow" :dialogId="dialogId"/>
|
|
</DrawerOverlay>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
import DialogItem from "./DialogItem";
|
|
import DialogUpload from "./DialogUpload";
|
|
import UserInput from "../../../components/UserInput";
|
|
import DrawerOverlay from "../../../components/DrawerOverlay";
|
|
import DialogGroupInfo from "./DialogGroupInfo";
|
|
import ChatInput from "./ChatInput";
|
|
|
|
import VirtualList from 'vue-virtual-scroll-list'
|
|
import {Store} from "le5le-store";
|
|
import {textImagesInfo} from "../../../functions/utils";
|
|
|
|
export default {
|
|
name: "DialogWrapper",
|
|
components: {
|
|
VirtualList,
|
|
ChatInput,
|
|
DialogGroupInfo,
|
|
DrawerOverlay,
|
|
UserInput,
|
|
DialogUpload
|
|
},
|
|
|
|
props: {
|
|
dialogId: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
autoFocus: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
beforeBack: Function
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
msgItem: DialogItem,
|
|
msgText: '',
|
|
msgNew: 0,
|
|
|
|
allMsgs: [],
|
|
tempMsgs: [],
|
|
|
|
pasteShow: false,
|
|
pasteFile: [],
|
|
pasteItem: [],
|
|
|
|
createGroupShow: false,
|
|
createGroupData: {},
|
|
createGroupLoad: 0,
|
|
|
|
forwardShow: false,
|
|
forwardLoad: false,
|
|
forwardData: {
|
|
userids: [],
|
|
},
|
|
|
|
dialogDrag: false,
|
|
groupInfoShow: false,
|
|
|
|
navStyle: {},
|
|
|
|
operateVisible: false,
|
|
operateHasText: false,
|
|
operateStyles: {},
|
|
operateItem: {},
|
|
operateEmojis: ['👌', '🤝', '🤔', '👍', '👎', '👏', '✋', '✅', '❌', '❤️', '❓'],
|
|
|
|
recordState: '',
|
|
wrapperStart: 0,
|
|
|
|
replyId: 0,
|
|
}
|
|
},
|
|
|
|
beforeDestroy() {
|
|
this.$store.dispatch('forgetInDialog', this._uid)
|
|
},
|
|
|
|
computed: {
|
|
...mapState([
|
|
'taskId',
|
|
'dialogMsgs',
|
|
'dialogMsgTransfer',
|
|
'cacheDialogs',
|
|
'wsOpenNum',
|
|
'touchBackInProgress',
|
|
'windowActive',
|
|
]),
|
|
|
|
isReady() {
|
|
return this.dialogId > 0 && this.dialogData.id > 0
|
|
},
|
|
|
|
dialogData() {
|
|
return this.cacheDialogs.find(({id}) => id == this.dialogId) || {};
|
|
},
|
|
|
|
dialogMsgList() {
|
|
if (!this.isReady) {
|
|
return [];
|
|
}
|
|
return this.dialogMsgs.filter(({dialog_id}) => {
|
|
return dialog_id == this.dialogId;
|
|
}).sort((a, b) => {
|
|
return a.id - b.id;
|
|
});
|
|
},
|
|
|
|
tempMsgList() {
|
|
if (!this.isReady) {
|
|
return [];
|
|
}
|
|
return this.tempMsgs.filter(({dialog_id}) => {
|
|
return dialog_id == this.dialogId;
|
|
});
|
|
},
|
|
|
|
allMsgList() {
|
|
const {dialogMsgList, tempMsgList} = this;
|
|
if (tempMsgList.length > 0) {
|
|
const array = [];
|
|
array.push(...dialogMsgList);
|
|
array.push(...tempMsgList)
|
|
return array;
|
|
}
|
|
return dialogMsgList;
|
|
},
|
|
|
|
peopleNum() {
|
|
return this.dialogData.type === 'group' ? $A.runNum(this.dialogData.people) : 0;
|
|
},
|
|
|
|
pasteTitle() {
|
|
const {pasteItem} = this;
|
|
let hasImage = pasteItem.find(({type}) => type == 'image')
|
|
let hasFile = pasteItem.find(({type}) => type != 'image')
|
|
if (hasImage && hasFile) {
|
|
return '发送文件/图片'
|
|
} else if (hasImage) {
|
|
return '发送图片'
|
|
}
|
|
return '发送文件'
|
|
},
|
|
|
|
wrapperClass() {
|
|
if (['ready', 'ing'].includes(this.recordState)) {
|
|
return ['record-ready']
|
|
}
|
|
return null
|
|
},
|
|
|
|
pasteWrapperClass() {
|
|
if (this.pasteItem.find(({type}) => type !== 'image')) {
|
|
return ['multiple'];
|
|
}
|
|
return [];
|
|
},
|
|
|
|
msgUnreadOnly() {
|
|
let num = 0;
|
|
this.cacheDialogs.some(dialog => {
|
|
num += $A.getDialogUnread(dialog);
|
|
})
|
|
if (num <= 0) {
|
|
return '';
|
|
}
|
|
if (num > 99) {
|
|
num = "99+"
|
|
}
|
|
return String(num);
|
|
},
|
|
|
|
isMyDialog() {
|
|
const {dialogData, userId} = this;
|
|
return dialogData.dialog_user && dialogData.dialog_user.userid == userId
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
dialogId: {
|
|
handler(id) {
|
|
if (id) {
|
|
this.msgNew = 0;
|
|
//
|
|
if (this.allMsgList.length > 0) {
|
|
this.allMsgs = this.allMsgList;
|
|
requestAnimationFrame(this.onToBottom);
|
|
}
|
|
this.$store.dispatch("getDialogMsgs", id).catch(_ => {});
|
|
//
|
|
this.$store.dispatch('saveInDialog', {
|
|
uid: this._uid,
|
|
dialog_id: id,
|
|
})
|
|
//
|
|
if (this.autoFocus) {
|
|
this.inputFocus()
|
|
}
|
|
}
|
|
},
|
|
immediate: true
|
|
},
|
|
|
|
dialogMsgTransfer: {
|
|
handler({time, msgFile, msgRecord, msgText}) {
|
|
if (time > $A.Time()) {
|
|
this.$store.state.dialogMsgTransfer.time = 0;
|
|
this.$nextTick(() => {
|
|
if ($A.isArray(msgFile) && msgFile.length > 0) {
|
|
this.sendFileMsg(msgFile);
|
|
} else if ($A.isJson(msgRecord) && msgRecord.duration > 0) {
|
|
this.sendRecord(msgRecord);
|
|
} else if (msgText) {
|
|
this.sendMsg(msgText);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
immediate: true
|
|
},
|
|
|
|
wsOpenNum(num) {
|
|
if (num <= 1) return
|
|
this.$store.dispatch("getDialogMsgs", this.dialogId).catch(_ => {});
|
|
},
|
|
|
|
allMsgList(newList, oldList) {
|
|
const {balance} = this.scrollInfo();
|
|
this.allMsgs = newList;
|
|
//
|
|
if (!this.windowActive || (balance > 10 && oldList.length > 0)) {
|
|
const lastId = oldList[oldList.length - 1].id
|
|
const tmpList = newList.filter(item => item.id && item.id > lastId)
|
|
this.msgNew += tmpList.length
|
|
} else {
|
|
requestAnimationFrame(this.onToBottom)
|
|
}
|
|
},
|
|
|
|
windowScrollY(val) {
|
|
if ($A.isIos()) {
|
|
const {balance} = this.scrollInfo();
|
|
this.navStyle = {
|
|
marginTop: val + 'px'
|
|
}
|
|
if (balance <= 10) {
|
|
requestAnimationFrame(this.onToBottom)
|
|
}
|
|
}
|
|
},
|
|
|
|
dialogDrag(val) {
|
|
if (val) {
|
|
this.operateVisible = false;
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* 发送消息
|
|
* @param text
|
|
*/
|
|
sendMsg(text) {
|
|
let msgText;
|
|
if (typeof text === "string" && text) {
|
|
msgText = text;
|
|
} else {
|
|
msgText = this.msgText;
|
|
this.msgText = '';
|
|
}
|
|
if (msgText == '') {
|
|
this.inputFocus();
|
|
return;
|
|
}
|
|
msgText = msgText.replace(/<\/span> <\/p>$/, "</span></p>")
|
|
//
|
|
this.onToBottom();
|
|
this.onActive();
|
|
//
|
|
let tempId = $A.randomString(16);
|
|
let tempMsg = {
|
|
id: tempId,
|
|
dialog_id: this.dialogData.id,
|
|
reply_id: this.replyId,
|
|
type: 'text',
|
|
userid: this.userId,
|
|
msg: {
|
|
text: $A.stringLength(msgText) > 2000 ? '' : msgText,
|
|
},
|
|
};
|
|
if (msgText.length > 2000) {
|
|
tempMsg.type = 'loading';
|
|
tempMsg.msg = { };
|
|
}
|
|
this.tempMsgs.push(tempMsg);
|
|
//
|
|
this.$store.dispatch("call", {
|
|
url: 'dialog/msg/sendtext',
|
|
data: {
|
|
dialog_id: this.dialogId,
|
|
reply_id: this.replyId,
|
|
text: msgText,
|
|
},
|
|
method: 'post'
|
|
}).then(({data}) => {
|
|
this.tempMsgs = this.tempMsgs.filter(({id}) => id != tempId)
|
|
this.sendSuccess(data);
|
|
}).catch(({msg}) => {
|
|
$A.modalError(msg);
|
|
this.tempMsgs = this.tempMsgs.filter(({id}) => id != tempId)
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 发送录音
|
|
* @param msg {base64, duration}
|
|
*/
|
|
sendRecord(msg) {
|
|
this.onToBottom();
|
|
this.onActive();
|
|
//
|
|
let tempId = $A.randomString(16);
|
|
this.tempMsgs.push({
|
|
id: tempId,
|
|
dialog_id: this.dialogData.id,
|
|
reply_id: this.replyId,
|
|
type: 'loading',
|
|
userid: this.userId,
|
|
msg,
|
|
});
|
|
//
|
|
this.$store.dispatch("call", {
|
|
url: 'dialog/msg/sendrecord',
|
|
data: Object.assign(msg, {
|
|
dialog_id: this.dialogId,
|
|
reply_id: this.replyId,
|
|
}),
|
|
method: 'post'
|
|
}).then(({data}) => {
|
|
this.tempMsgs = this.tempMsgs.filter(({id}) => id != tempId)
|
|
this.sendSuccess(data);
|
|
}).catch(({msg}) => {
|
|
$A.modalError(msg);
|
|
this.tempMsgs = this.tempMsgs.filter(({id}) => id != tempId)
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 发送文件
|
|
* @param row
|
|
*/
|
|
sendFileMsg(row) {
|
|
const files = $A.isArray(row) ? row : [row];
|
|
if (files.length > 0) {
|
|
this.pasteFile = [];
|
|
this.pasteItem = [];
|
|
files.some(file => {
|
|
let reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onload = ({target}) => {
|
|
this.pasteFile.push(file)
|
|
this.pasteItem.push({
|
|
type: $A.getMiddle(file.type, null, '/'),
|
|
name: file.name,
|
|
size: file.size,
|
|
result: target.result
|
|
})
|
|
this.pasteShow = true
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
inputFocus() {
|
|
this.$nextTick(_ => {
|
|
this.$refs.input.focus()
|
|
})
|
|
},
|
|
|
|
onRecordState(state) {
|
|
this.recordState = state;
|
|
},
|
|
|
|
chatPasteDrag(e, type) {
|
|
this.dialogDrag = false;
|
|
const files = type === 'drag' ? e.dataTransfer.files : e.clipboardData.files;
|
|
const postFiles = Array.prototype.slice.call(files);
|
|
if (postFiles.length > 0) {
|
|
e.preventDefault();
|
|
this.sendFileMsg(postFiles);
|
|
}
|
|
},
|
|
|
|
chatDragOver(show, e) {
|
|
let random = (this.__dialogDrag = $A.randomString(8));
|
|
if (!show) {
|
|
setTimeout(() => {
|
|
if (random === this.__dialogDrag) {
|
|
this.dialogDrag = show;
|
|
}
|
|
}, 150);
|
|
} else {
|
|
if (e.dataTransfer.effectAllowed === 'move') {
|
|
return;
|
|
}
|
|
this.dialogDrag = true;
|
|
}
|
|
},
|
|
|
|
onTouchStart(e) {
|
|
this.wrapperStart = Object.assign(this.scrollInfo(), {
|
|
clientY: e.touches[0].clientY,
|
|
exclud: !this.$refs.scroller.$el.contains(e.target),
|
|
});
|
|
},
|
|
|
|
onTouchMove(e) {
|
|
if (this.windowSmall && this.windowScrollY > 0) {
|
|
if (this.wrapperStart.exclud) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
if (this.wrapperStart.clientY > e.touches[0].clientY) {
|
|
// 向上滑动
|
|
if (this.wrapperStart.balance === 0) {
|
|
e.preventDefault();
|
|
}
|
|
} else {
|
|
// 向下滑动
|
|
if (this.wrapperStart.offset === 0) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
pasteSend() {
|
|
this.pasteFile.some(file => {
|
|
this.$refs.chatUpload.upload(file)
|
|
});
|
|
},
|
|
|
|
chatFile(type, file) {
|
|
switch (type) {
|
|
case 'progress':
|
|
this.onToBottom();
|
|
this.onActive();
|
|
//
|
|
this.tempMsgs.push({
|
|
id: file.tempId,
|
|
dialog_id: this.dialogData.id,
|
|
reply_id: this.replyId,
|
|
type: 'loading',
|
|
userid: this.userId,
|
|
msg: { },
|
|
});
|
|
break;
|
|
|
|
case 'error':
|
|
this.tempMsgs = this.tempMsgs.filter(({id}) => id != file.tempId)
|
|
break;
|
|
|
|
case 'success':
|
|
this.tempMsgs = this.tempMsgs.filter(({id}) => id != file.tempId)
|
|
this.sendSuccess(file.data)
|
|
break;
|
|
}
|
|
},
|
|
|
|
sendSuccess(data) {
|
|
if ($A.isArray(data)) {
|
|
data.some(item => {
|
|
this.sendSuccess(item)
|
|
})
|
|
return;
|
|
}
|
|
this.$store.dispatch("saveDialogMsg", data);
|
|
this.$store.dispatch("increaseTaskMsgNum", this.dialogId);
|
|
this.$store.dispatch("updateDialogLastMsg", data);
|
|
this.onCancelReply();
|
|
this.onActive();
|
|
},
|
|
|
|
onEventFocus() {
|
|
this.$emit("on-focus")
|
|
},
|
|
|
|
onEventBlur() {
|
|
this.$emit("on-blur")
|
|
},
|
|
|
|
onEventMore(e) {
|
|
if (['image', 'file'].includes(e)) {
|
|
this.$refs.chatUpload.handleClick()
|
|
}
|
|
},
|
|
|
|
onEventEmojiVisibleChange(val) {
|
|
if (val && this.windowSmall) {
|
|
this.onToBottom();
|
|
}
|
|
},
|
|
|
|
onActive() {
|
|
this.$emit("on-active");
|
|
},
|
|
|
|
onToBottom() {
|
|
this.msgNew = 0;
|
|
if (this.isReady) {
|
|
this.$refs.scroller?.scrollToBottom();
|
|
}
|
|
},
|
|
|
|
openProject() {
|
|
if (!this.dialogData.group_info) {
|
|
return;
|
|
}
|
|
if (this.windowSmall) {
|
|
this.$store.dispatch("openDialog", 0);
|
|
}
|
|
this.goForward({name: 'manage-project', params: {projectId:this.dialogData.group_info.id}});
|
|
},
|
|
|
|
openTask() {
|
|
if (!this.dialogData.group_info) {
|
|
return;
|
|
}
|
|
if (this.taskId > 0) {
|
|
// 如果当前打开着任务窗口则关闭对话窗口
|
|
this.$store.dispatch("openDialog", 0);
|
|
}
|
|
this.$store.dispatch("openTask", this.dialogData.group_info.id);
|
|
},
|
|
|
|
loadNextPage() {
|
|
this.$store.dispatch('getDialogMoreMsgs', this.dialogId).then(result => {
|
|
const resData = result.data;
|
|
const ids = resData.data.map(item => item.id)
|
|
this.$nextTick(() => {
|
|
const scroller = this.$refs.scroller
|
|
const offset = ids.reduce((previousValue, currentId) => {
|
|
const previousSize = typeof previousValue === "object" ? previousValue.size : scroller.getSize(previousValue)
|
|
return {size: previousSize + scroller.getSize(currentId)}
|
|
})
|
|
scroller.scrollToOffset(offset.size);
|
|
});
|
|
}).catch(() => {})
|
|
},
|
|
|
|
openCreateGroup() {
|
|
this.createGroupData = {
|
|
userids: this.dialogData.dialog_user ? [this.userId, this.dialogData.dialog_user.userid] : [this.userId],
|
|
uncancelable: [this.userId]
|
|
};
|
|
this.createGroupShow = true;
|
|
},
|
|
|
|
onCreateGroup() {
|
|
this.createGroupLoad++;
|
|
this.$store.dispatch("call", {
|
|
url: 'dialog/group/add',
|
|
data: this.createGroupData
|
|
}).then(({data, msg}) => {
|
|
$A.messageSuccess(msg);
|
|
this.createGroupShow = false;
|
|
this.createGroupData = {};
|
|
this.$store.dispatch("saveDialog", data);
|
|
this.$store.dispatch('openDialog', data.id)
|
|
}).catch(({msg}) => {
|
|
$A.modalError(msg);
|
|
}).finally(_ => {
|
|
this.createGroupLoad--;
|
|
});
|
|
},
|
|
|
|
onForward(type) {
|
|
if (type === 'open') {
|
|
this.forwardData = {
|
|
userids: [],
|
|
msg_id: this.operateItem.id
|
|
};
|
|
this.forwardShow = true;
|
|
} else if (type === 'submit') {
|
|
if ($A.arrayLength(this.forwardData.userids) === 0) {
|
|
$A.messageWarning("请选择转发成员");
|
|
return
|
|
}
|
|
this.forwardLoad = true;
|
|
this.$store.dispatch("call", {
|
|
url: 'dialog/msg/forward',
|
|
data: this.forwardData
|
|
}).then(({data, msg}) => {
|
|
this.forwardShow = false;
|
|
this.$store.dispatch("saveDialogMsg", data.msgs);
|
|
this.$store.dispatch("updateDialogLastMsg", data.msgs);
|
|
$A.messageSuccess(msg);
|
|
}).catch(({msg}) => {
|
|
$A.modalError(msg);
|
|
}).finally(_ => {
|
|
this.forwardLoad = false;
|
|
});
|
|
}
|
|
},
|
|
|
|
scrollInfo() {
|
|
const scroller = this.$refs.scroller
|
|
if (!scroller) {
|
|
return {
|
|
scale: 0, //已滚动比例
|
|
offset: 0, //滚动的距离
|
|
balance: 0, //与底部距离
|
|
}
|
|
}
|
|
let clientSize = scroller.getClientSize();
|
|
let offset = scroller.getOffset();
|
|
let scrollSize = scroller.getScrollSize();
|
|
return {
|
|
scale: offset / (scrollSize - clientSize),
|
|
offset: offset,
|
|
balance: scrollSize - clientSize - offset,
|
|
}
|
|
},
|
|
|
|
onScroll() {
|
|
this.operateVisible = false;
|
|
this.__onScroll && clearTimeout(this.__onScroll);
|
|
this.__onScroll = setTimeout(_ => {
|
|
const {balance} = this.scrollInfo();
|
|
if (balance <= 10) {
|
|
this.msgNew = 0;
|
|
}
|
|
}, 100)
|
|
},
|
|
|
|
onBack() {
|
|
if (!this.beforeBack) {
|
|
return this.handleBack();
|
|
}
|
|
const before = this.beforeBack();
|
|
if (before && before.then) {
|
|
before.then(() => {
|
|
this.handleBack();
|
|
});
|
|
} else {
|
|
this.handleBack();
|
|
}
|
|
},
|
|
|
|
handleBack() {
|
|
const {name, params} = this.$store.state.routeHistoryLast;
|
|
if (name === this.$route.name && /\d+/.test(params.dialogId)) {
|
|
this.goForward({name: this.$route.name});
|
|
} else {
|
|
this.goBack();
|
|
}
|
|
},
|
|
|
|
onLongpress({event, el, msgData}) {
|
|
this.operateVisible = this.operateItem.id === msgData.id;
|
|
this.operateItem = $A.isJson(msgData) ? msgData : {};
|
|
this.operateHasText = msgData.type === 'text' && msgData.msg.text.replace(/<[^>]+>/g,"").length > 0
|
|
this.$nextTick(() => {
|
|
const projectRect = el.getBoundingClientRect();
|
|
const wrapRect = this.$el.getBoundingClientRect();
|
|
this.operateStyles = {
|
|
left: `${event.clientX - wrapRect.left}px`,
|
|
top: `${projectRect.top}px`,
|
|
height: projectRect.height + 'px',
|
|
}
|
|
this.operateVisible = true;
|
|
})
|
|
},
|
|
|
|
onOperate(action, value = null) {
|
|
this.operateVisible = false;
|
|
this.$nextTick(_ => {
|
|
switch (action) {
|
|
case "copy":
|
|
if (this.operateHasText) {
|
|
this.$copyText(this.operateItem.msg.text.replace(/<[^>]+>/g, "")).then(_ => {
|
|
$A.messageSuccess('复制成功');
|
|
}).catch(_ => {
|
|
$A.messageError('复制失败');
|
|
});
|
|
} else {
|
|
$A.messageWarning('不可复制的内容');
|
|
}
|
|
break;
|
|
|
|
case "newTask":
|
|
if (this.operateHasText) {
|
|
Store.set('addTask', {
|
|
owner: [this.userId],
|
|
name: this.operateItem.msg.text.replace(/<[^>]+>/g, "")
|
|
});
|
|
}
|
|
break;
|
|
|
|
case "reply":
|
|
this.onReply()
|
|
break;
|
|
|
|
case "forward":
|
|
this.onForward('open')
|
|
break;
|
|
|
|
case "withdraw":
|
|
this.onWithdraw()
|
|
break;
|
|
|
|
case "view":
|
|
this.onViewFile()
|
|
break;
|
|
|
|
case "down":
|
|
this.onDownFile()
|
|
break;
|
|
|
|
case "emoji":
|
|
this.onEmoji(value)
|
|
break;
|
|
}
|
|
})
|
|
},
|
|
|
|
onReply() {
|
|
this.replyId = this.operateItem.id;
|
|
this.inputFocus()
|
|
},
|
|
|
|
onCancelReply() {
|
|
this.replyId = 0;
|
|
},
|
|
|
|
onWithdraw() {
|
|
$A.modalConfirm({
|
|
content: `确定撤回此信息吗？`,
|
|
okText: '撤回',
|
|
loading: true,
|
|
onOk: () => {
|
|
this.$store.dispatch("call", {
|
|
url: 'dialog/msg/withdraw',
|
|
data: {
|
|
msg_id: this.operateItem.id
|
|
},
|
|
}).then(() => {
|
|
$A.messageSuccess("消息已撤回");
|
|
this.$store.dispatch("forgetDialogMsg", this.operateItem.id);
|
|
}).catch(({msg}) => {
|
|
$A.messageError(msg, 301);
|
|
}).finally(_ => {
|
|
this.$Modal.remove();
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
onViewText({target}) {
|
|
if (this.operateVisible) {
|
|
return
|
|
}
|
|
switch (target.nodeName) {
|
|
case "IMG":
|
|
if (target.classList.contains('browse')) {
|
|
this.onViewPicture(target.currentSrc);
|
|
} else {
|
|
this.$store.state.previewImageIndex = 0;
|
|
this.$store.state.previewImageList = textImagesInfo(target.outerHTML);
|
|
}
|
|
break;
|
|
|
|
case "SPAN":
|
|
if (target.classList.contains('mention') && target.classList.contains('task')) {
|
|
this.$store.dispatch("openTask", $A.runNum(target.getAttribute("data-id")));
|
|
}
|
|
break;
|
|
}
|
|
},
|
|
|
|
onViewFile() {
|
|
if (this.operateVisible) {
|
|
return
|
|
}
|
|
const {msg} = this.operateItem;
|
|
if (['jpg', 'jpeg', 'gif', 'png'].includes(msg.ext)) {
|
|
this.onViewPicture(msg.path);
|
|
return
|
|
}
|
|
const path = `/single/file/msg/${this.operateItem.id}`;
|
|
if (this.$Electron) {
|
|
this.$Electron.sendMessage('windowRouter', {
|
|
name: `file-msg-${this.operateItem.id}`,
|
|
path: path,
|
|
userAgent: "/hideenOfficeTitle/",
|
|
force: false,
|
|
config: {
|
|
title: `${msg.name} (${$A.bytesToSize(msg.size)})`,
|
|
titleFixed: true,
|
|
parent: null,
|
|
width: Math.min(window.screen.availWidth, 1440),
|
|
height: Math.min(window.screen.availHeight, 900),
|
|
},
|
|
webPreferences: {
|
|
nodeIntegrationInSubFrames: msg.ext === 'drawio'
|
|
},
|
|
});
|
|
} else if (this.$isEEUiApp) {
|
|
$A.eeuiAppOpenPage({
|
|
pageType: 'app',
|
|
pageTitle: `${msg.name} (${$A.bytesToSize(msg.size)})`,
|
|
url: 'web.js',
|
|
params: {
|
|
titleFixed: true,
|
|
url: $A.rightDelete(window.location.href, window.location.hash) + `#${path}`
|
|
},
|
|
});
|
|
} else {
|
|
window.open($A.apiUrl(`..${path}`))
|
|
}
|
|
},
|
|
|
|
onViewPicture(currentUrl) {
|
|
const data = $A.cloneJSON(this.dialogMsgs.filter(item => {
|
|
if (item.dialog_id === this.dialogId) {
|
|
if (item.type === 'file') {
|
|
return ['jpg', 'jpeg', 'gif', 'png'].includes(item.msg.ext);
|
|
} else if (item.type === 'text') {
|
|
return item.msg.text.match(/<img\s+class="browse"[^>]*?>/);
|
|
}
|
|
}
|
|
return false;
|
|
})).sort((a, b) => {
|
|
return a.id - b.id;
|
|
});
|
|
//
|
|
const list = [];
|
|
data.some(({type, msg}) => {
|
|
if (type === 'file') {
|
|
list.push({
|
|
src: msg.path,
|
|
width: msg.width,
|
|
height: msg.height,
|
|
})
|
|
} else if (type === 'text') {
|
|
list.push(...textImagesInfo(msg.text))
|
|
}
|
|
})
|
|
//
|
|
const index = list.findIndex(({src}) => src === currentUrl);
|
|
if (index > -1) {
|
|
this.$store.state.previewImageIndex = index;
|
|
this.$store.state.previewImageList = list;
|
|
} else {
|
|
this.$store.state.previewImageIndex = 0;
|
|
this.$store.state.previewImageList = [currentUrl];
|
|
}
|
|
},
|
|
|
|
onDownFile() {
|
|
$A.modalConfirm({
|
|
title: '下载文件',
|
|
content: `${this.operateItem.msg.name} (${$A.bytesToSize(this.operateItem.msg.size)})`,
|
|
okText: '立即下载',
|
|
onOk: () => {
|
|
this.$store.dispatch('downUrl', $A.apiUrl(`dialog/msg/download?msg_id=${this.operateItem.id}`))
|
|
}
|
|
});
|
|
},
|
|
|
|
onEmoji(emoji) {
|
|
this.$store.dispatch("call", {
|
|
url: 'dialog/msg/emoji',
|
|
data: {
|
|
msg_id: this.operateItem.id,
|
|
emoji,
|
|
},
|
|
}).then(({data}) => {
|
|
this.$store.dispatch("saveDialogMsg", data);
|
|
}).catch(({msg}) => {
|
|
$A.messageError(msg);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|