mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 19:35:50 +00:00
283 lines
10 KiB
Vue
Executable File
283 lines
10 KiB
Vue
Executable File
<template>
|
|
<ModalAlive
|
|
v-model="showModal"
|
|
class-name="common-user-detail-modal"
|
|
:fullscreen="isFullscreen"
|
|
:mask-closable="false"
|
|
:footer-hide="true"
|
|
width="600">
|
|
<div class="user-detail-body">
|
|
<UserAvatar
|
|
:userid="userData.userid"
|
|
:size="120"
|
|
:show-state-dot="false"
|
|
@on-click="onOpenAvatar"/>
|
|
<ul class="user-select-auto">
|
|
<li class="user-name">
|
|
<h1>{{userData.nickname}}</h1>
|
|
<em v-if="userData.delete_at" class="deleted no-dark-content">{{$L('已删除')}}</em>
|
|
<em v-else-if="userData.disable_at" class="disabled no-dark-content">{{$L('已离职')}}</em>
|
|
</li>
|
|
<li v-if="userData.userid != userId && commonDialog.total !== null">
|
|
<span>{{$L('共同群聊')}}: </span>
|
|
<a href="javascript:void(0)" @click="commonDialogShow=true">{{ $L('(*)个', commonDialog.total) }}</a>
|
|
</li>
|
|
<template v-if="!userData.bot">
|
|
<li>
|
|
<span>{{$L('部门')}}: </span>
|
|
{{userData.department_name || '-'}}
|
|
</li>
|
|
<li>
|
|
<span>{{$L('职位/职称')}}: </span>
|
|
{{userData.profession || '-'}}
|
|
</li>
|
|
<li>
|
|
<span>{{$L('最后在线')}}: </span>
|
|
{{$A.newDateString(userData.line_at, 'YYYY-MM-DD HH:mm') || '-'}}
|
|
</li>
|
|
<li v-if="userData.delete_at">
|
|
<strong><span>{{$L('删除时间')}}: </span>{{$A.newDateString(userData.delete_at, 'YYYY-MM-DD HH:mm')}}</strong>
|
|
</li>
|
|
<li v-else-if="userData.disable_at">
|
|
<strong><span>{{$L('离职时间')}}: </span>{{$A.newDateString(userData.disable_at, 'YYYY-MM-DD HH:mm')}}</strong>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
<Button icon="md-chatbubbles" :disabled="!!userData.delete_at" @click="onOpenDialog">{{ $L('开始聊天') }}</Button>
|
|
</div>
|
|
|
|
<!-- 共同群组 -->
|
|
<Modal v-model="commonDialogShow" :title="$L('共同群组') + ' (' + $L('(*)个', commonDialog.total) + ')'" :footer-hide="true" width="500">
|
|
<div class="common-dialog-content">
|
|
<div v-if="commonDialogLoading > 0 && commonDialog.list.length === 0" class="loading-wrapper">
|
|
<Loading/>
|
|
</div>
|
|
<div v-else-if="commonDialogList.length === 0" class="empty-wrapper">
|
|
<div class="empty-content">
|
|
<Icon type="ios-people-outline" size="48"/>
|
|
<p>{{$L('暂无共同群组')}}</p>
|
|
</div>
|
|
</div>
|
|
<div v-else class="dialog-list">
|
|
<div
|
|
v-for="dialog in commonDialogList"
|
|
:key="dialog.id"
|
|
class="dialog-item"
|
|
@click="onOpenCommonDialogChat(dialog)">
|
|
<div class="dialog-avatar">
|
|
<EAvatar v-if="dialog.avatar" :src="dialog.avatar" :size="42"></EAvatar>
|
|
<i v-else-if="dialog.group_type=='department'" class="taskfont icon-avatar department"></i>
|
|
<i v-else-if="dialog.group_type=='project'" class="taskfont icon-avatar project"></i>
|
|
<i v-else-if="dialog.group_type=='task'" class="taskfont icon-avatar task"></i>
|
|
<i v-else-if="dialog.group_type=='okr'" class="taskfont icon-avatar task"></i>
|
|
<Icon v-else class="icon-avatar" type="ios-people" />
|
|
</div>
|
|
<div class="dialog-info">
|
|
<div class="dialog-name" v-html="transformEmojiToHtml(dialog.name)"></div>
|
|
<div class="dialog-meta">
|
|
<span class="member-count">{{$L('(*)人', dialog.people || 0)}}</span>
|
|
<span v-if="dialog.last_at" class="last-time">{{$A.timeFormat(dialog.last_at)}}</span>
|
|
</div>
|
|
</div>
|
|
<Icon class="enter-icon" type="ios-arrow-forward" />
|
|
</div>
|
|
<div v-if="commonDialog.has_more" class="load-more-wrapper">
|
|
<Button type="primary" @click="loadCommonDialogList(true)" :loading="commonDialogLoading > 0">{{$L('加载更多')}}</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</ModalAlive>
|
|
</template>
|
|
|
|
<script>
|
|
import emitter from "../../../store/events";
|
|
import transformEmojiToHtml from "../../../utils/emoji";
|
|
import {mapState} from "vuex";
|
|
|
|
export default {
|
|
name: 'UserDetail',
|
|
|
|
data() {
|
|
return {
|
|
userData: {
|
|
userid: 0
|
|
},
|
|
|
|
showModal: false,
|
|
|
|
commonDialog: {
|
|
userid: null,
|
|
total: null,
|
|
list: [],
|
|
page: 1,
|
|
has_more: false,
|
|
},
|
|
commonDialogShow: false,
|
|
commonDialogLoading: 0,
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
emitter.on('openUser', this.onShow);
|
|
},
|
|
|
|
beforeDestroy() {
|
|
emitter.off('openUser', this.onShow);
|
|
},
|
|
|
|
watch: {
|
|
...mapState(['cacheUserBasic']),
|
|
|
|
commonDialogShow() {
|
|
if (!this.commonDialogShow || this.commonDialog.list.length > 0) {
|
|
return;
|
|
}
|
|
this.loadCommonDialogList(false);
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
isFullscreen({windowWidth}) {
|
|
return windowWidth < 576
|
|
},
|
|
|
|
commonDialogList() {
|
|
return this.commonDialog.list || [];
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
transformEmojiToHtml,
|
|
|
|
onShow(userid) {
|
|
if (!/^\d+$/.test(userid)) {
|
|
return
|
|
}
|
|
this.$store.dispatch("showSpinner", 600)
|
|
this.$store.dispatch('getUserData', userid).then(user => {
|
|
this.userData = user;
|
|
this.showModal = true;
|
|
this.loadCommonDialogCount()
|
|
}).finally(_ => {
|
|
this.$store.dispatch("hiddenSpinner")
|
|
});
|
|
},
|
|
|
|
onHide() {
|
|
this.commonDialogShow = false;
|
|
this.showModal = false
|
|
},
|
|
|
|
onOpenAvatar() {
|
|
this.$store.dispatch("previewImage", this.userData.userimg)
|
|
},
|
|
|
|
onOpenDialog() {
|
|
this.$store.dispatch("openDialogUserid", this.userData.userid).then(_ => {
|
|
this.onHide()
|
|
}).catch(({msg}) => {
|
|
$A.modalError(msg)
|
|
});
|
|
},
|
|
|
|
loadCommonDialogCount() {
|
|
const target_userid = this.userData.userid;
|
|
const previousUserId = this.commonDialog.userid;
|
|
if (!target_userid) {
|
|
this.commonDialog = {
|
|
...this.commonDialog,
|
|
userid: target_userid || null,
|
|
total: null,
|
|
list: [],
|
|
page: 1,
|
|
has_more: false,
|
|
};
|
|
return;
|
|
}
|
|
|
|
if (previousUserId !== target_userid) {
|
|
this.commonDialog = {
|
|
...this.commonDialog,
|
|
userid: target_userid,
|
|
total: null,
|
|
list: [],
|
|
page: 1,
|
|
has_more: false,
|
|
};
|
|
}
|
|
|
|
const cacheMap = this.$store.state.dialogCommonCountCache || {};
|
|
const cached = cacheMap[String(target_userid)];
|
|
if (cached && typeof cached.total !== 'undefined') {
|
|
this.commonDialog = {
|
|
...this.commonDialog,
|
|
total: cached.total,
|
|
};
|
|
}
|
|
|
|
this.$store.dispatch('call', {
|
|
url: 'dialog/common/list',
|
|
data: {
|
|
target_userid,
|
|
only_count: 'yes'
|
|
}
|
|
}).then(({data}) => {
|
|
if (target_userid !== this.userData.userid) {
|
|
return
|
|
}
|
|
const parsedTotal = Number(data.total);
|
|
const total = Number.isNaN(parsedTotal) ? 0 : parsedTotal;
|
|
this.commonDialog = {
|
|
...this.commonDialog,
|
|
userid: target_userid,
|
|
total,
|
|
list: [],
|
|
page: 1,
|
|
has_more: false,
|
|
};
|
|
this.$store.commit('common/dialog/count/save', {
|
|
userid: target_userid,
|
|
total,
|
|
});
|
|
});
|
|
},
|
|
|
|
loadCommonDialogList(loadMore = false) {
|
|
this.commonDialogLoading++;
|
|
const target_userid = this.userData.userid;
|
|
this.$store.dispatch('call', {
|
|
url: 'dialog/common/list',
|
|
data: {
|
|
target_userid,
|
|
page: loadMore ? this.commonDialog.page + 1 : 1
|
|
}
|
|
}).then(({data}) => {
|
|
if (target_userid !== this.userData.userid) {
|
|
return;
|
|
}
|
|
this.commonDialog = {
|
|
...this.commonDialog,
|
|
list: loadMore ? [...this.commonDialog.list, ...data.data] : data.data,
|
|
total: data.total,
|
|
page: data.current_page,
|
|
has_more: !!data.next_page_url
|
|
}
|
|
}).catch(({msg}) => {
|
|
$A.modalError(msg || this.$L('加载失败'));
|
|
}).finally(() => {
|
|
this.commonDialogLoading--;
|
|
});
|
|
},
|
|
|
|
onOpenCommonDialogChat(dialog) {
|
|
this.$store.dispatch("openDialog", dialog.id).then(() => {
|
|
this.onHide();
|
|
}).catch(({msg}) => {
|
|
$A.modalError(msg);
|
|
});
|
|
},
|
|
}
|
|
};
|
|
</script>
|