更新会话路由

This commit is contained in:
kuaifan 2022-06-06 11:08:51 +08:00
parent 34a1c97e6b
commit 2c373c388c
15 changed files with 194 additions and 196 deletions

View File

@ -98,14 +98,6 @@ Vue.prototype.goForward = function(location, isReplace) {
if (typeof location === 'string') {
location = {name: location};
}
// 打开聊天窗口(移动端)
if (app.$store.state.windowSmall
&& location.name === 'manage-messenger'
&& /\d+/.test(location.params.dialogId)) {
app.$store.state.dialogModalId = location.params.dialogId;
return
}
//
if (app.$store.state.routeHistorys.length === 0) {
app.$store.state.routeHistorys.push(app.$route)
}

View File

@ -122,7 +122,7 @@ export default {
return 'project';
}
if (this.routeName === 'manage-messenger') {
if (this.$route.params.dialogId === 'contacts') {
if (this.$route.params.dialogAction === 'contacts') {
return 'contacts'
} else {
return 'dialog'
@ -167,11 +167,11 @@ export default {
break;
case 'dialog':
location = {name: 'manage-messenger', params: {dialogId: 'dialog'}};
location = {name: 'manage-messenger', params: {dialogAction: 'dialog'}};
break;
case 'contacts':
location = {name: 'manage-messenger', params: {dialogId: 'contacts'}};
location = {name: 'manage-messenger', params: {dialogAction: 'contacts'}};
break;
default:

View File

@ -251,15 +251,13 @@
this.userResult(info);
},
openDialog() {
this.$store.dispatch("openDialogUserid", this.userid);
},
onError() {
return true
},
openDialog() {
this.$store.dispatch("openDialogUserid", this.userid).then(({data}) => {
this.goForward({name: 'manage-messenger', params: {dialogId: data.id}});
});
}
}
};
</script>

View File

@ -516,7 +516,7 @@ export default {
'clientNewVersion',
'cacheTaskBrowse',
'dialogModalId',
'dialogIns',
]),
...mapGetters(['taskData', 'dashboardTask']),
@ -654,10 +654,7 @@ export default {
if (this.routeName === 'manage-project' && !/^\d+$/.test(this.$route.params.projectId)) {
return true;
}
if (this.routeName === 'manage-messenger' && !/^\d+$/.test(this.$route.params.dialogId)) {
return true;
}
return ['manage-dashboard', 'manage-calendar', 'manage-file', 'manage-setting'].includes(this.routeName)
return ['manage-dashboard', 'manage-calendar', 'manage-messenger', 'manage-file', 'manage-setting'].includes(this.routeName)
},
},
@ -751,9 +748,6 @@ export default {
if (path === 'file' && $A.getStorageInt("file::folderId") > 0) {
location.params.folderId = $A.getStorageInt("file::folderId")
}
if (path === 'messenger' && $A.getStorageInt("messenger::dialogId") > 0) {
location.params.dialogId = $A.getStorageInt("messenger::dialogId")
}
this.goForward(location);
},
@ -927,10 +921,8 @@ export default {
if (!this.natificationReady && !this.$isEEUiApp) {
return; //
}
if (!this.natificationHidden
&& this.routeName === 'manage-messenger'
&& (this.$route.params.dialogId == data.dialog_id || this.dialogModalId === data.dialog_id)) {
return; //
if ($A.last(this.dialogIns)?.dialog_id === data.dialog_id) {
return; //
}
//
const {id, dialog_id, type, msg, userid} = data;
@ -956,7 +948,8 @@ export default {
userid: userid,
desc: body,
callback: () => {
this.goForward({name: 'manage-messenger', params: {dialogId: dialog_id}});
this.goForward({name: 'manage-messenger'});
this.$store.dispatch('openDialog', dialog_id)
}
})
} else {
@ -1087,11 +1080,8 @@ export default {
if (!$A.isJson(data)) {
return;
}
if (data.dialog_id) {
this.goForward({name: 'manage-messenger', params: {dialogId: data.dialog_id}});
} else {
this.goForward({name: 'manage-messenger'});
}
this.goForward({name: 'manage-messenger'});
this.$store.dispatch('openDialog', data.dialog_id)
}
},
});

View File

@ -8,7 +8,7 @@
:beforeClose="onBeforeClose"
class-name="dialog-modal"
fullscreen>
<DialogWrapper v-if="dialogModalId > 0" :dialogId="dialogModalId" :beforeBack="onBeforeClose"/>
<DialogWrapper v-if="windowSmall && dialogId > 0" :dialogId="dialogId" :beforeBack="onBeforeClose"/>
</Modal>
</template>
@ -55,30 +55,25 @@ export default {
},
computed: {
...mapState(['dialogModalId'])
...mapState(['dialogId'])
},
watch: {
dialogModalId: {
dialogId: {
handler(id) {
this.show = id > 0;
},
immediate: true
},
windowLarge: {
handler(is) {
if (is && this.dialogModalId > 0) {
this.$store.state.dialogModalId = 0;
}
this.show = id > 0 && this.windowSmall;
},
immediate: true
},
windowSmall(small) {
this.show = this.dialogId > 0 && small;
}
},
methods: {
onBeforeClose() {
return new Promise(_ => {
this.$store.state.dialogModalId = 0;
this.$store.state.dialogId = 0;
})
},
}

View File

@ -294,7 +294,7 @@ export default {
type: Number,
default: 0
},
desktopAutoFocus: {
autoFocus: {
type: Boolean,
default: false
},
@ -339,6 +339,26 @@ export default {
}
},
mounted() {
if (this.$store.state.dialogMsgTransfer.time > $A.Time()) {
this.$store.state.dialogMsgTransfer.time = 0;
const {msgFile, msgRecord, msgText} = this.$store.state.dialogMsgTransfer;
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);
}
});
}
},
beforeDestroy() {
this.$store.dispatch('forgetInDialog', this._uid)
},
computed: {
...mapState([
'cacheDialogs',
@ -434,35 +454,12 @@ export default {
},
watch: {
'$route': {
handler (route) {
if (this.$store.state.dialogMsgTransfer.time > $A.Time()) {
this.$store.state.dialogMsgTransfer.time = 0;
const {msgFile, msgRecord, msgText} = this.$store.state.dialogMsgTransfer;
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);
}
});
}
if (route.query && route.query._) {
let query = $A.cloneJSON(route.query);
delete query._;
this.goForward({query}, true);
}
},
immediate: true
},
dialogId: {
handler(id) {
if (id) {
this.msgNew = 0;
this.topId = -1;
//
let cacheTimer = null;
if (this.allMsgList.length > 0) {
cacheTimer = setTimeout(_ => {
@ -476,7 +473,12 @@ export default {
setTimeout(this.onToBottom, Math.max(0, 100 - (new Date().getTime() - startTime)));
}).catch(_ => {});
//
if (this.windowLarge && this.desktopAutoFocus) {
this.$store.dispatch('saveInDialog', {
uid: this._uid,
dialog_id: id,
})
//
if (this.autoFocus) {
this.$nextTick(_ => {
this.$refs.input.focus()
})
@ -741,7 +743,7 @@ export default {
onToBottom() {
this.msgNew = 0;
if (this.isReady) {
this.$refs.scroller.scrollToBottom();
this.$refs.scroller?.scrollToBottom();
}
},
@ -790,7 +792,7 @@ export default {
this.createGroupShow = false;
this.createGroupData = {};
this.$store.dispatch("saveDialog", data);
this.goForward({name: 'manage-messenger', params: {dialogId: data.id}});
this.$store.dispatch('openDialog', data.id)
}).catch(({msg}) => {
$A.modalError(msg);
}).finally(_ => {

View File

@ -1,33 +1,30 @@
<template>
<div class="project-dialog">
<DialogWrapper :dialog-id="projectData.dialog_id" class="project-dialog-wrapper">
<div slot="head">
<div class="dialog-user">
<div class="member-head">
<div class="member-title">{{$L('项目成员')}}<span @click="memberShowAll=!memberShowAll">({{projectData.project_user.length}})</span></div>
<div class="member-close" @click="onClose">
<Icon type="ios-close"/>
</div>
<DialogWrapper v-if="projectData.cacheParameter.chat" :dialog-id="projectData.dialog_id" class="project-dialog">
<template slot="head">
<div class="dialog-user">
<div class="member-head">
<div class="member-title">{{$L('项目成员')}}<span @click="memberShowAll=!memberShowAll">({{projectData.project_user.length}})</span></div>
<div class="member-close" @click="onClose">
<Icon type="ios-close"/>
</div>
<ul :class="['member-list', memberShowAll ? 'member-all' : '']">
<li v-for="item in projectData.project_user">
<UserAvatar :userid="item.userid" :size="36"/>
</li>
</ul>
</div>
<div class="dialog-nav">
<div class="dialog-title">
<h2>{{$L('群聊')}}</h2>
</div>
<ul :class="['member-list', memberShowAll ? 'member-all' : '']">
<li v-for="item in projectData.project_user">
<UserAvatar :userid="item.userid" :size="36"/>
</li>
</ul>
</div>
<div class="dialog-nav">
<div class="dialog-title">
<h2>{{$L('群聊')}}</h2>
</div>
</div>
</DialogWrapper>
</div>
</template>
</DialogWrapper>
</template>
<script>
import {mapGetters} from "vuex";
import {Store} from 'le5le-store';
import DialogWrapper from "./DialogWrapper";
export default {

View File

@ -1420,11 +1420,6 @@ export default {
toggleParameter(data) {
if (data === 'completedTask') {
this.$store.dispatch("forgetTaskCompleteTemp", true);
} else if (data === 'chat') {
if (this.windowSmall) {
this.goForward({name: 'manage-messenger', params: {dialogId: this.projectData.dialog_id}});
return;
}
}
this.$store.dispatch('toggleProjectParameter', data);
},

View File

@ -1111,7 +1111,7 @@ export default {
this.msgRecord = {};
this.msgFile = [];
this.msgText = "";
this.goForward({name: 'manage-messenger', params: {dialogId: data.dialog_id}, query: {_: $A.randomString(6)}});
this.$store.dispatch('openDialog', data.dialog_id)
} else {
this.sendDialogMsg();
}

View File

@ -90,7 +90,7 @@
<li v-for="items in contactsList">
<div class="label">{{items.az}}</div>
<ul>
<li v-for="(user, index) in items.list" :key="index" @click="openContacts(user)">
<li v-for="(user, index) in items.list" :key="index" @click="openContacts(user.userid)">
<div class="avatar"><UserAvatar :userid="user.userid" :size="30"/></div>
<div class="nickname">{{user.nickname}}</div>
</li>
@ -132,12 +132,12 @@
</div>
</div>
<div class="messenger-msg">
<div v-if="routeName === 'manage-messenger'" class="messenger-msg">
<div class="msg-dialog-bg">
<div class="msg-dialog-bg-icon"><Icon type="ios-chatbubbles" /></div>
<div class="msg-dialog-bg-text">{{$L('选择一个会话开始聊天')}}</div>
</div>
<DialogWrapper v-if="dialogId > 0" :dialogId="dialogId" @on-active="scrollIntoActive" desktop-auto-focus/>
<DialogWrapper v-if="windowLarge && dialogId > 0" :dialogId="dialogId" @on-active="scrollIntoActive" auto-focus/>
</div>
</div>
</div>
@ -186,14 +186,10 @@ export default {
},
computed: {
...mapState(['cacheDialogs', 'loadDialogs']),
...mapState(['cacheDialogs', 'loadDialogs', 'dialogId']),
dialogId() {
const {dialogId} = this.$route.params;
if (['dialog', 'contacts'].includes(dialogId)) {
this.tabActive = dialogId
}
return parseInt(/^\d+$/.test(dialogId) ? dialogId : 0);
routeName() {
return this.$route.name
},
dialogList() {
@ -309,6 +305,12 @@ export default {
},
watch: {
'$route' ({params}) {
if (['dialog', 'contacts'].includes(params.dialogAction)) {
this.tabActive = params.dialogAction
}
},
dialogKey(val) {
switch (val) {
case 'log.open':
@ -350,20 +352,11 @@ export default {
dialogId: {
handler(id) {
if (id > 0) {
$A.setStorage("messenger::dialogId", id);
this.scrollIntoActive()
}
},
immediate: true
},
windowSmall: {
handler(is) {
if (is && this.dialogId > 0) {
this.goForward({name: 'manage-messenger', params: {dialogId: 'dialog'}}, true);
}
},
immediate: true
},
},
methods: {
@ -397,20 +390,14 @@ export default {
if (this.operateVisible) {
return
}
if (dialogId > 0) {
this.goForward({name: 'manage-messenger', params: {dialogId}});
} else {
this.goForward({name: 'manage-messenger'});
}
this.$store.dispatch("openDialog", dialogId)
},
openContacts(user) {
openContacts(userid) {
if (this.windowLarge) {
this.tabActive = 'dialog';
}
this.$store.dispatch("openDialogUserid", user.userid).then(({data}) => {
this.openDialog(data.id)
});
this.$store.dispatch("openDialogUserid", userid);
},
filterDialog(dialog) {

View File

@ -2,14 +2,14 @@
<div class="page-project">
<template v-if="projectId > 0">
<ProjectPanel/>
<ProjectDialog v-if="projectData.cacheParameter.chat"/>
<ProjectDialog/>
</template>
<ProjectList v-if="windowSmall" v-show="projectId === 0"/>
</div>
</template>
<script>
import {mapState, mapGetters} from "vuex";
import {mapState} from "vuex";
import ProjectPanel from "./components/ProjectPanel";
import ProjectDialog from "./components/ProjectDialog";
import ProjectList from "./components/ProjectList";
@ -22,7 +22,6 @@ export default {
computed: {
...mapState(['cacheProjects', 'wsOpenNum']),
...mapGetters(['projectData']),
projectId() {
const {projectId} = this.$route.params;

View File

@ -21,7 +21,7 @@ export default [
},
{
name: 'manage-messenger',
path: 'messenger/:dialogId?',
path: 'messenger/:dialogAction?',
component: () => import('./pages/manage/messenger.vue'),
},
{

View File

@ -2017,6 +2017,16 @@ export default {
});
},
/**
* 打开会话
* @param state
* @param dispatch
* @param dialog_id
*/
openDialog({state, dispatch}, dialog_id) {
state.dialogId = /\d+/.test(dialog_id) ? dialog_id : 0;
},
/**
* 打开个人会话
* @param state
@ -2032,6 +2042,7 @@ export default {
},
}).then(result => {
dispatch("saveDialog", result.data);
dispatch("openDialog", result.data.id);
resolve(result);
}).catch(e => {
console.warn(e);
@ -2055,8 +2066,8 @@ export default {
state.cacheDialogs.splice(index, 1);
}
})
if (ids.includes($A.getStorageInt("messenger::dialogId"))) {
$A.setStorage("messenger::dialogId", 0)
if (ids.includes(state.dialogId)) {
state.dialogId = 0
}
//
setTimeout(() => {
@ -2064,6 +2075,38 @@ export default {
})
},
/**
* 保存正在会话
* @param state
* @param dispatch
* @param data {uid, dialog_id}
*/
saveInDialog({state, dispatch}, data) {
$A.execMainDispatch("saveInDialog", data)
//
const index = state.dialogIns.findIndex(item => item.uid == data.uid);
if (index > -1) {
state.dialogIns.splice(index, 1, Object.assign({}, state.dialogIns[index], data));
} else {
state.dialogIns.push(data);
}
},
/**
* 忘记正在会话
* @param state
* @param dispatch
* @param uid
*/
forgetInDialog({state, dispatch}, uid) {
$A.execMainDispatch("forgetInDialog", uid)
//
const index = state.dialogIns.findIndex(item => item.uid == uid);
if (index > -1) {
state.dialogIns.splice(index, 1);
}
},
/** *****************************************************************************************/
/** ************************************** 消息 **********************************************/
/** *****************************************************************************************/

View File

@ -66,10 +66,11 @@ const stateData = {
userAvatar: {},
// 会话聊天
dialogId: 0,
dialogIns: [],
dialogMsgs: [],
dialogInputCache: $A.getStorageArray("cacheDialogInput"),
dialogMsgTransfer: {time: 0},
dialogModalId: 0,
// 文件
files: [],

View File

@ -5,82 +5,81 @@
border-left: 1px solid #f4f5f5;
z-index: 1;
position: relative;
.project-dialog-wrapper {
.dialog-user {
margin-top: 26px;
padding: 0 22px;
.member-head {
display: flex;
align-items: center;
.member-title {
flex: 1;
font-size: 18px;
font-weight: 600;
> span {
padding-left: 6px;
color: $primary-color;
cursor: pointer;
}
}
.member-close {
.dialog-user {
margin-top: 26px;
padding: 0 22px;
.member-head {
display: flex;
align-items: center;
.member-title {
flex: 1;
font-size: 18px;
font-weight: 600;
> span {
padding-left: 6px;
color: $primary-color;
cursor: pointer;
}
}
.member-close {
cursor: pointer;
.ivu-icon-ios-close {
font-size: 38px;
top: 3px;
right: 2px;
transition: all 0.2s;
}
&:hover {
.ivu-icon-ios-close {
font-size: 38px;
top: 3px;
right: 2px;
transition: all 0.2s;
}
&:hover {
.ivu-icon-ios-close {
transform: rotate(-90deg);
}
transform: rotate(-90deg);
}
}
}
.member-list {
display: flex;
align-items: center;
margin-top: 12px;
overflow: auto;
}
.member-list {
display: flex;
align-items: center;
margin-top: 12px;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
&::-webkit-scrollbar {
display: none;
}
> li {
position: relative;
list-style: none;
margin-right: 10px;
margin-bottom: 8px;
}
&.member-all {
display: block;
> li {
position: relative;
list-style: none;
margin-right: 10px;
margin-bottom: 8px;
}
&.member-all {
display: block;
> li {
display: inline-block;
overflow: hidden;
}
display: inline-block;
overflow: hidden;
}
}
}
.dialog-nav {
padding: 0 20px;
}
}
.dialog-nav {
padding: 0 20px;
}
}
@media (max-width: 768px) {
.project-dialog {
.project-dialog-wrapper {
.dialog-user {
margin-top: 16px;
padding: 0 12px;
}
.dialog-nav {
padding: 0 12px;
height: 64px;
.dialog-user {
margin-top: 16px;
padding: 0 12px;
.member-list {
display: none;
}
}
.dialog-nav {
padding: 0 12px;
height: 64px;
}
}
}