mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-11 18:42:54 +00:00
perf: 优化头像
This commit is contained in:
parent
689d842d58
commit
fe4cba61e2
2
resources/assets/js/app.js
vendored
2
resources/assets/js/app.js
vendored
@ -39,7 +39,7 @@ import AutoTip from './components/AutoTip.vue'
|
||||
import TagInput from './components/TagInput.vue'
|
||||
import TableAction from './components/TableAction.vue'
|
||||
import QuickEdit from './components/QuickEdit.vue'
|
||||
import UserAvatar from './components/UserAvatar.vue'
|
||||
import UserAvatar from './components/UserAvatar'
|
||||
import ImgView from './components/ImgView.vue'
|
||||
import Scrollbar from './components/Scrollbar'
|
||||
|
||||
|
||||
@ -1,316 +0,0 @@
|
||||
<template>
|
||||
<ETooltip
|
||||
v-if="user"
|
||||
class="common-avatar"
|
||||
:open-delay="openDelay"
|
||||
:disabled="$isEEUiApp || windowTouch || tooltipDisabled || isBot"
|
||||
:placement="tooltipPlacement">
|
||||
<div slot="content" class="common-avatar-transfer">
|
||||
<slot/>
|
||||
<p>{{$L('昵称')}}: {{user.nickname}}<em v-if="user.delete_at" class="deleted no-dark-content">{{$L('已删除')}}</em><em v-else-if="user.disable_at" class="disabled no-dark-content">{{$L('已离职')}}</em></p>
|
||||
<p class="department-name" :title="user.department_name || ''">{{$L('部门')}}: {{user.department_name || '-'}}</p>
|
||||
<p>{{$L('职位/职称')}}: {{user.profession || '-'}}</p>
|
||||
<p v-if="user.delete_at"><strong>{{$L('删除时间')}}: {{user.delete_at}}</strong></p>
|
||||
<p v-else-if="user.disable_at"><strong>{{$L('离职时间')}}: {{user.disable_at}}</strong></p>
|
||||
<slot name="end"/>
|
||||
<div v-if="showMenu" class="avatar-icons">
|
||||
<Icon type="ios-chatbubbles" @click="openDialog"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar-wrapper" :class="{'avatar-pointer': clickOpenDialog}" @click="onClickOpen">
|
||||
<div v-if="showIcon" :class="boxClass" :style="boxStyle">
|
||||
<em :style="spotStyle"></em>
|
||||
<EAvatar v-if="showImg" ref="avatar" :class="{'avatar-default':isDefault}" :src="user.userimg" :size="avatarSize" :error="onError">
|
||||
<span class="avatar-char" :style="spotStyle">{{nickname}}</span>
|
||||
</EAvatar>
|
||||
<EAvatar v-else :size="avatarSize" class="avatar-text">
|
||||
<span class="avatar-char" :style="spotStyle">{{nickname}}</span>
|
||||
</EAvatar>
|
||||
</div>
|
||||
<div v-if="showName" class="avatar-name" :style="nameStyle">
|
||||
<div v-if="user.bot" class="taskfont bot"></div>
|
||||
<span>{{nameText || user.nickname}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</ETooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import {Store} from 'le5le-store';
|
||||
|
||||
export default {
|
||||
name: 'UserAvatar',
|
||||
props: {
|
||||
userid: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: 'default'
|
||||
},
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showName: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
nameText: {
|
||||
type: String,
|
||||
default: null // showName = true 时有效,留空就显示会员昵称
|
||||
},
|
||||
tooltipDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showIconMenu: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clickOpenDialog: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tooltipPlacement: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
borderWitdh: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
openDelay: {
|
||||
type: Number,
|
||||
default: 600
|
||||
},
|
||||
userResult: {
|
||||
type: Function,
|
||||
default: () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: null,
|
||||
subscribe: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
//
|
||||
this.subscribe = Store.subscribe('cacheUserActive', (data) => {
|
||||
if (data.userid == this.userid) {
|
||||
this.setUser(data)
|
||||
}
|
||||
});
|
||||
this.$store.state.userAvatar[this._uid] = this.$props;
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.subscribe) {
|
||||
this.subscribe.unsubscribe();
|
||||
this.subscribe = null;
|
||||
}
|
||||
if (this.$store.state.userAvatar[this._uid] !== undefined) {
|
||||
delete this.$store.state.userAvatar[this._uid];
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo', 'userOnline', 'cacheUserBasic']),
|
||||
|
||||
boxClass() {
|
||||
return {
|
||||
'avatar-box': true,
|
||||
'online': this.userId === this.userid || this.user.online || this.isBot,
|
||||
'disabled': this.user.disable_at,
|
||||
'deleted': this.user.delete_at
|
||||
}
|
||||
},
|
||||
|
||||
boxStyle() {
|
||||
const style = {};
|
||||
const {borderWitdh, borderColor} = this
|
||||
if (borderWitdh > 0) {
|
||||
style.border = borderWitdh + "px solid " + (borderColor || "#ffffff");
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
||||
spotStyle() {
|
||||
let {borderWitdh, size} = this
|
||||
if (size === 'default') size = 32;
|
||||
if (borderWitdh > 0) size-= borderWitdh;
|
||||
if (size == 32) {
|
||||
return {}
|
||||
}
|
||||
return {
|
||||
'transform': 'scale(' + Math.min(1.25, size / 32) + ')',
|
||||
}
|
||||
},
|
||||
|
||||
nameStyle() {
|
||||
const {showIcon} = this;
|
||||
const {delete_at, disable_at} = this.user
|
||||
const styles = {}
|
||||
if (!showIcon) {
|
||||
styles.marginLeft = 0
|
||||
}
|
||||
if (delete_at || disable_at) {
|
||||
styles.opacity = 0.8
|
||||
styles.textDecoration = "line-through"
|
||||
}
|
||||
return styles
|
||||
},
|
||||
|
||||
avatarSize() {
|
||||
let {borderWitdh, size} = this
|
||||
if (size === 'default') size = 32;
|
||||
if (borderWitdh > 0) {
|
||||
return size - borderWitdh * 2;
|
||||
} else {
|
||||
return size;
|
||||
}
|
||||
},
|
||||
|
||||
showImg() {
|
||||
const {userimg} = this.user
|
||||
if (!userimg) {
|
||||
return false;
|
||||
}
|
||||
return !$A.rightExists(userimg, '/avatar.png');
|
||||
},
|
||||
|
||||
showMenu() {
|
||||
if (this.userId == this.userid) {
|
||||
return false
|
||||
}
|
||||
if (this.user.delete_at || this.user.disable_at) {
|
||||
return false
|
||||
}
|
||||
return this.showIconMenu
|
||||
},
|
||||
|
||||
isDefault() {
|
||||
const {userimg} = this.user
|
||||
return $A.strExists(userimg, '/avatar');
|
||||
},
|
||||
|
||||
isBot() {
|
||||
return !!(this.user && this.user.bot);
|
||||
},
|
||||
|
||||
nickname() {
|
||||
const {nickname} = this.user;
|
||||
if (!nickname) {
|
||||
return "D";
|
||||
}
|
||||
let value = nickname.substring(0, 2);
|
||||
if (/^[\u4e00-\u9fa5]+$/.test(value)) {
|
||||
value = value.substring(0, 1);
|
||||
}
|
||||
return value || 'D';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
userid() {
|
||||
this.getData()
|
||||
},
|
||||
|
||||
userInfo(info) {
|
||||
if (info.userid == this.userid) {
|
||||
this.setUser(info);
|
||||
}
|
||||
},
|
||||
|
||||
userOnline(data) {
|
||||
if (this.user && typeof data[this.user.userid] !== "undefined") {
|
||||
this.$set(this.user, 'online', data[this.user.userid]);
|
||||
}
|
||||
},
|
||||
|
||||
'user.online'(val) {
|
||||
if (val || this.userId === this.userid) {
|
||||
this.$emit('update:online', true)
|
||||
} else {
|
||||
const now = $A.Time()
|
||||
const line = $A.Time(this.user.line_at)
|
||||
const seconds = now - line
|
||||
let stats = '最后在线于很久以前';
|
||||
if (seconds < 60) {
|
||||
stats = `最后在线于刚刚`
|
||||
} else if (seconds < 3600) {
|
||||
stats = `最后在线于 ${Math.floor(seconds / 60)} 分钟前`
|
||||
} else if (seconds < 3600 * 6) {
|
||||
stats = `最后在线于 ${Math.floor(seconds / 3600)} 小时前`
|
||||
} else {
|
||||
const nowYmd = $A.formatDate('Y-m-d', now)
|
||||
const lineYmd = $A.formatDate('Y-m-d', line)
|
||||
const lineHi = $A.formatDate('H:i', line)
|
||||
if (nowYmd === lineYmd) {
|
||||
stats = `最后在线于今天 ${lineHi}`
|
||||
} else if ($A.formatDate('Y-m-d', now - 86400) === lineYmd) {
|
||||
stats = `最后在线于昨天 ${lineHi}`
|
||||
} else if (seconds < 3600 * 24 * 365) {
|
||||
stats = `最后在线于 ${lineYmd}`
|
||||
}
|
||||
}
|
||||
this.$emit('update:online', this.$L(stats))
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
if (!this.userid) {
|
||||
return;
|
||||
}
|
||||
if (this.userid == this.userInfo.userid) {
|
||||
this.setUser(this.userInfo);
|
||||
return;
|
||||
}
|
||||
const tempUser = this.cacheUserBasic.find(({userid}) => userid == this.userid);
|
||||
if (tempUser) {
|
||||
this.setUser(tempUser);
|
||||
}
|
||||
this.$store.dispatch("getUserBasic", {userid: this.userid});
|
||||
},
|
||||
|
||||
setUser(info) {
|
||||
try {
|
||||
if (this.user && this.user.userimg != info.userimg && this.$refs.avatar) {
|
||||
this.$refs.avatar.$data.isImageExist = true;
|
||||
}
|
||||
} catch (e) {
|
||||
//
|
||||
}
|
||||
this.user = info;
|
||||
this.userResult(info);
|
||||
},
|
||||
|
||||
onClickOpen() {
|
||||
if (this.clickOpenDialog) {
|
||||
this.openDialog()
|
||||
} else {
|
||||
this.$emit('open-dialog', this.userid)
|
||||
}
|
||||
},
|
||||
|
||||
openDialog() {
|
||||
this.$store.dispatch("openDialogUserid", this.userid).then(_ => {
|
||||
this.goForward({name: 'manage-messenger'})
|
||||
}).catch(({msg}) => {
|
||||
$A.modalError(msg)
|
||||
});
|
||||
},
|
||||
|
||||
onError() {
|
||||
return true
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
184
resources/assets/js/components/UserAvatar/index.vue
Executable file
184
resources/assets/js/components/UserAvatar/index.vue
Executable file
@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="user"
|
||||
class="avatar-wrapper common-avatar"
|
||||
:class="{'avatar-pointer': clickOpenDialog}"
|
||||
@click="onClickOpen">
|
||||
<div v-if="showIcon" :class="boxClass" :style="boxStyle">
|
||||
<em :style="spotStyle"></em>
|
||||
<EAvatar v-if="showImg" ref="avatar" :class="{'avatar-default':isDefault}" :src="user.userimg" :size="avatarSize" :error="onError">
|
||||
<span class="avatar-char" :style="spotStyle">{{nickname}}</span>
|
||||
</EAvatar>
|
||||
<EAvatar v-else :size="avatarSize" class="avatar-text">
|
||||
<span class="avatar-char" :style="spotStyle">{{nickname}}</span>
|
||||
</EAvatar>
|
||||
</div>
|
||||
<div v-if="showName" class="avatar-name" :style="nameStyle">
|
||||
<div v-if="user.bot" class="taskfont bot"></div>
|
||||
<span>{{nameText || user.nickname}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Store} from "le5le-store";
|
||||
import mixin from './mixin';
|
||||
|
||||
export default {
|
||||
name: 'UserAvatar',
|
||||
mixins: [ mixin ],
|
||||
data() {
|
||||
return {
|
||||
user: null,
|
||||
subscribe: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
//
|
||||
this.subscribe = Store.subscribe('cacheUserActive', (data) => {
|
||||
if (data.userid == this.userid) {
|
||||
this.setUser(data)
|
||||
}
|
||||
});
|
||||
this.$store.state.userAvatar[this._uid] = this.$props;
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.subscribe) {
|
||||
this.subscribe.unsubscribe();
|
||||
this.subscribe = null;
|
||||
}
|
||||
if (this.$store.state.userAvatar[this._uid] !== undefined) {
|
||||
delete this.$store.state.userAvatar[this._uid];
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
boxClass() {
|
||||
return {
|
||||
'avatar-box': true,
|
||||
'online': this.$store.state.userId === this.userid || this.user.online || this.isBot,
|
||||
'disabled': this.user.disable_at,
|
||||
'deleted': this.user.delete_at
|
||||
}
|
||||
},
|
||||
|
||||
boxStyle() {
|
||||
const style = {};
|
||||
const {borderWitdh, borderColor} = this
|
||||
if (borderWitdh > 0) {
|
||||
style.border = borderWitdh + "px solid " + (borderColor || "#ffffff");
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
||||
spotStyle() {
|
||||
let {borderWitdh, size} = this
|
||||
if (size === 'default') size = 32;
|
||||
if (borderWitdh > 0) size-= borderWitdh;
|
||||
if (size == 32) {
|
||||
return {}
|
||||
}
|
||||
return {
|
||||
'transform': 'scale(' + Math.min(1.25, size / 32) + ')',
|
||||
}
|
||||
},
|
||||
|
||||
nameStyle() {
|
||||
const {showIcon} = this;
|
||||
const {delete_at, disable_at} = this.user
|
||||
const styles = {}
|
||||
if (!showIcon) {
|
||||
styles.marginLeft = 0
|
||||
}
|
||||
if (delete_at || disable_at) {
|
||||
styles.opacity = 0.8
|
||||
styles.textDecoration = "line-through"
|
||||
}
|
||||
return styles
|
||||
},
|
||||
|
||||
avatarSize() {
|
||||
let {borderWitdh, size} = this
|
||||
if (size === 'default') size = 32;
|
||||
if (borderWitdh > 0) {
|
||||
return size - borderWitdh * 2;
|
||||
} else {
|
||||
return size;
|
||||
}
|
||||
},
|
||||
|
||||
showImg() {
|
||||
const {userimg} = this.user
|
||||
if (!userimg) {
|
||||
return false;
|
||||
}
|
||||
return !$A.rightExists(userimg, '/avatar.png');
|
||||
},
|
||||
|
||||
isDefault() {
|
||||
const {userimg} = this.user
|
||||
return $A.strExists(userimg, '/avatar');
|
||||
},
|
||||
|
||||
isBot() {
|
||||
return !!(this.user && this.user.bot);
|
||||
},
|
||||
|
||||
nickname() {
|
||||
const {nickname} = this.user;
|
||||
if (!nickname) {
|
||||
return "D";
|
||||
}
|
||||
let value = nickname.substring(0, 2);
|
||||
if (/^[\u4e00-\u9fa5]+$/.test(value)) {
|
||||
value = value.substring(0, 1);
|
||||
}
|
||||
return value || 'D';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
if (!this.$store.state.userId) {
|
||||
return;
|
||||
}
|
||||
if (this.userid == this.$store.state.userId) {
|
||||
this.setUser(this.$store.state.userInfo);
|
||||
return;
|
||||
}
|
||||
const tempUser = this.$store.state.cacheUserBasic.find(({userid}) => userid == this.userid);
|
||||
if (tempUser) {
|
||||
this.setUser(tempUser);
|
||||
}
|
||||
this.$store.dispatch("getUserBasic", {userid: this.userid});
|
||||
},
|
||||
|
||||
setUser(info) {
|
||||
this.user = info;
|
||||
|
||||
if (typeof this.userResult === "function") {
|
||||
this.userResult(info);
|
||||
}
|
||||
},
|
||||
|
||||
onClickOpen() {
|
||||
if (this.clickOpenDialog) {
|
||||
this.openDialog()
|
||||
} else {
|
||||
this.$emit('open-dialog', this.userid)
|
||||
}
|
||||
},
|
||||
|
||||
openDialog() {
|
||||
this.$store.dispatch("openDialogUserid", this.userid).then(_ => {
|
||||
this.goForward({name: 'manage-messenger'})
|
||||
}).catch(({msg}) => {
|
||||
$A.modalError(msg)
|
||||
});
|
||||
},
|
||||
|
||||
onError() {
|
||||
return true
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
39
resources/assets/js/components/UserAvatar/mixin.js
vendored
Normal file
39
resources/assets/js/components/UserAvatar/mixin.js
vendored
Normal file
@ -0,0 +1,39 @@
|
||||
export default {
|
||||
props: {
|
||||
userid: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: 'default'
|
||||
},
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showName: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
nameText: {
|
||||
type: String,
|
||||
default: null // showName = true 时有效,留空就显示会员昵称
|
||||
},
|
||||
borderWitdh: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
clickOpenDialog: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
userResult: {
|
||||
default: null
|
||||
}
|
||||
}
|
||||
}
|
||||
94
resources/assets/js/components/UserAvatar/tip.vue
Executable file
94
resources/assets/js/components/UserAvatar/tip.vue
Executable file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<ETooltip
|
||||
:open-delay="openDelay"
|
||||
:disabled="$isEEUiApp || windowTouch || tooltipDisabled || isBot"
|
||||
:placement="tooltipPlacement">
|
||||
<div v-if="user" slot="content" class="common-avatar-transfer">
|
||||
<slot/>
|
||||
<p>{{$L('昵称')}}: {{user.nickname}}<em v-if="user.delete_at" class="deleted no-dark-content">{{$L('已删除')}}</em><em v-else-if="user.disable_at" class="disabled no-dark-content">{{$L('已离职')}}</em></p>
|
||||
<p class="department-name" :title="user.department_name || ''">{{$L('部门')}}: {{user.department_name || '-'}}</p>
|
||||
<p>{{$L('职位/职称')}}: {{user.profession || '-'}}</p>
|
||||
<p v-if="user.delete_at"><strong>{{$L('删除时间')}}: {{user.delete_at}}</strong></p>
|
||||
<p v-else-if="user.disable_at"><strong>{{$L('离职时间')}}: {{user.disable_at}}</strong></p>
|
||||
<slot name="end"/>
|
||||
<div v-if="showMenu" class="avatar-icons">
|
||||
<Icon type="ios-chatbubbles" @click="onOpenDialog"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<UserAvatar
|
||||
ref="avatar"
|
||||
:userid="userid"
|
||||
:size="size"
|
||||
:showIcon="showIcon"
|
||||
:showName="showName"
|
||||
:nameText="nameText"
|
||||
:borderWitdh="borderWitdh"
|
||||
:borderColor="borderColor"
|
||||
:clickOpenDialog="clickOpenDialog"
|
||||
:userResult="onUserResult"/>
|
||||
</div>
|
||||
</ETooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixin from './mixin';
|
||||
|
||||
export default {
|
||||
name: 'UserAvatarTip',
|
||||
mixins: [mixin],
|
||||
props: {
|
||||
tooltipDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showIconMenu: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tooltipPlacement: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
openDelay: {
|
||||
type: Number,
|
||||
default: 600
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
user: null,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
showMenu() {
|
||||
if (this.userId == this.userid) {
|
||||
return false
|
||||
}
|
||||
if (this.user.delete_at || this.user.disable_at) {
|
||||
return false
|
||||
}
|
||||
return this.showIconMenu
|
||||
},
|
||||
|
||||
isBot() {
|
||||
return !!(this.user && this.user.bot);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onOpenDialog() {
|
||||
this.$refs.avatar.openDialog();
|
||||
},
|
||||
|
||||
onUserResult(info) {
|
||||
if (typeof this.userResult === "function") {
|
||||
this.userResult(info);
|
||||
}
|
||||
this.user = info;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="common-user-select" :class="warpClass">
|
||||
<ul v-if="!module">
|
||||
<li v-for="userid in values" v-if="userid" @click="onSelection">
|
||||
<UserAvatar :userid="userid" :size="avatarSize" :show-icon="avatarIcon" :show-name="avatarName" tooltip-disabled/>
|
||||
<UserAvatar :userid="userid" :size="avatarSize" :show-icon="avatarIcon" :show-name="avatarName"/>
|
||||
</li>
|
||||
<li v-if="addIcon || values.length === 0" class="add-icon" :style="addStyle" @click="onSelection"></li>
|
||||
</ul>
|
||||
@ -48,7 +48,7 @@
|
||||
<i v-else-if="item.group_type=='okr'" class="taskfont icon-avatar task"></i>
|
||||
<Icon v-else class="icon-avatar" type="ios-people" />
|
||||
</template>
|
||||
<UserAvatar v-else :userid="item.userid" tooltip-disabled/>
|
||||
<UserAvatar v-else :userid="item.userid"/>
|
||||
</li>
|
||||
</ul>
|
||||
</Scrollbar>
|
||||
@ -119,7 +119,7 @@
|
||||
<span>{{item.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<UserAvatar v-else class="user-modal-avatar" :userid="item.userid" :size="40" show-name tooltip-disabled/>
|
||||
<UserAvatar v-else class="user-modal-avatar" :userid="item.userid" :size="40" show-name/>
|
||||
</li>
|
||||
</ul>
|
||||
</Scrollbar>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
@on-visible-change="menuVisibleChange">
|
||||
<div :class="['manage-box-title', visibleMenu ? 'menu-visible' : '']">
|
||||
<div class="manage-box-avatar">
|
||||
<UserAvatar :userid="userId" :size="36" tooltipDisabled/>
|
||||
<UserAvatar :userid="userId" :size="36"/>
|
||||
</div>
|
||||
<span>{{userInfo.nickname}}</span>
|
||||
<Badge v-if="!!clientNewVersion" class="manage-box-top-report" dot/>
|
||||
@ -786,8 +786,8 @@ export default {
|
||||
return;
|
||||
case 'okrManage':
|
||||
case 'okrAnalyze':
|
||||
this.goForward({
|
||||
path:'/manage/apps/' + ( path == 'okrManage' ? '/#/list' : '/#/analysis'),
|
||||
this.goForward({
|
||||
path:'/manage/apps/' + ( path == 'okrManage' ? '/#/list' : '/#/analysis'),
|
||||
});
|
||||
return;
|
||||
case 'logout':
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
<!-- 回复、修改 -->
|
||||
<div v-if="quoteData" class="chat-quote">
|
||||
<div v-if="quoteUpdate" class="quote-label">{{$L('编辑消息')}}</div>
|
||||
<UserAvatar v-else :userid="quoteData.userid" :show-icon="false" :show-name="true" :tooltip-disabled="true"/>
|
||||
<UserAvatar v-else :userid="quoteData.userid" :show-icon="false" :show-name="true"/>
|
||||
<div class="quote-desc">{{$A.getMsgSimpleDesc(quoteData)}}</div>
|
||||
<i class="taskfont" @click.stop="cancelQuote"></i>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<div class="group-info-user">
|
||||
<ul>
|
||||
<li v-for="(item, index) in userList" :key="index" @click="openUser(item.userid)">
|
||||
<UserAvatar :userid="item.userid" :size="32" showName tooltipDisabled/>
|
||||
<UserAvatar :userid="item.userid" :size="32" showName/>
|
||||
<div v-if="item.userid === dialogData.owner_id" class="user-tag">{{ $L("群主") }}</div>
|
||||
<div v-else-if="operableExit(item)" class="user-exit" @click.stop="onExit(item)"><Icon type="md-exit"/></div>
|
||||
</li>
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div :class="classArray">
|
||||
<div v-if="source.type === 'tag'" class="dialog-tag" @click="onViewTag">
|
||||
<div class="tag-user"><UserAvatar :userid="source.userid" :tooltipDisabled="source.userid == userId" :show-name="true" :show-icon="false"/></div>
|
||||
<div class="tag-user"><UserAvatar :userid="source.userid" :show-name="true" :show-icon="false"/></div>
|
||||
{{$L(source.msg.action === 'remove' ? '取消标注' : '标注了')}}
|
||||
"{{$A.getMsgSimpleDesc(source.msg.data)}}"
|
||||
</div>
|
||||
<div v-else-if="source.type === 'todo'" class="dialog-todo" @click="onViewTodo">
|
||||
<div class="todo-user"><UserAvatar :userid="source.userid" :tooltipDisabled="source.userid == userId" :show-name="true" :show-icon="false"/></div>
|
||||
<div class="todo-user"><UserAvatar :userid="source.userid" :show-name="true" :show-icon="false"/></div>
|
||||
{{$L(source.msg.action === 'remove' ? '取消待办' : (source.msg.action === 'done' ? '完成' : '设待办'))}}
|
||||
"{{$A.getMsgSimpleDesc(source.msg.data)}}"
|
||||
<div v-if="formatTodoUser(source.msg.data).length > 0" class="todo-users">
|
||||
<span>{{$L('给')}}</span>
|
||||
<template v-for="(item, index) in formatTodoUser(source.msg.data)">
|
||||
<div v-if="index < 3" class="todo-user"><UserAvatar :userid="item" :tooltipDisabled="item == userId" :show-name="true" :show-icon="false"/></div>
|
||||
<div v-if="index < 3" class="todo-user"><UserAvatar :userid="item" :show-name="true" :show-icon="false"/></div>
|
||||
<div v-else-if="index == 3" class="todo-user">+{{formatTodoUser(source.msg.data).length - 3}}</div>
|
||||
</template>
|
||||
</div>
|
||||
@ -26,8 +26,7 @@
|
||||
v-longpress="{callback: onMention, delay: 300}"
|
||||
@open-dialog="onOpenDialog"
|
||||
:userid="source.userid"
|
||||
:size="30"
|
||||
tooltip-disabled/>
|
||||
:size="30"/>
|
||||
</div>
|
||||
<DialogView
|
||||
:msg-data="source"
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="respond-user">
|
||||
<ul>
|
||||
<li v-for="(userid, index) in respondData.userids" :key="index" @click="openUser(userid)">
|
||||
<UserAvatar :userid="userid" :size="32" showName tooltipDisabled/>
|
||||
<UserAvatar :userid="userid" :size="32" showName/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
v-longpress="{callback: handleLongpress, delay: 300}">
|
||||
<!--回复-->
|
||||
<div v-if="!hideReply && msgData.reply_data" class="dialog-reply no-dark-content" @click="viewReply">
|
||||
<UserAvatar :userid="msgData.reply_data.userid" :show-icon="false" :show-name="true" :tooltip-disabled="true"/>
|
||||
<UserAvatar :userid="msgData.reply_data.userid" :show-icon="false" :show-name="true"/>
|
||||
<div class="reply-desc" v-html="$A.getMsgSimpleDesc(msgData.reply_data, 'image-preview')"></div>
|
||||
</div>
|
||||
<!--详情-->
|
||||
@ -50,7 +50,7 @@
|
||||
</li>
|
||||
<li>
|
||||
<em>{{$L('会议创建人')}}</em>
|
||||
<UserAvatar :userid="msgData.msg.userid" :show-icon="false" :show-name="true" tooltip-disabled/>
|
||||
<UserAvatar :userid="msgData.msg.userid" :show-icon="false" :show-name="true"/>
|
||||
</li>
|
||||
<li>
|
||||
<em>{{$L('频道ID')}}</em>
|
||||
@ -80,7 +80,7 @@
|
||||
<div class="emoji-users" @click="onShowEmojiUser(item)">
|
||||
<ul>
|
||||
<template v-for="(uitem, uindex) in item.userids">
|
||||
<li v-if="uindex < emojiUsersNum" :class="{bold:uitem==userId}"><UserAvatar :userid="uitem" tooltip-disabled show-name :show-icon="false"/></li>
|
||||
<li v-if="uindex < emojiUsersNum" :class="{bold:uitem==userId}"><UserAvatar :userid="uitem" show-name :show-icon="false"/></li>
|
||||
<li v-else-if="uindex == emojiUsersNum">+{{item.userids.length - emojiUsersNum}}位</li>
|
||||
</template>
|
||||
</ul>
|
||||
@ -111,7 +111,7 @@
|
||||
<div class="read-title"><em>{{ todoDoneList.length }}</em>{{ $L('完成') }}</div>
|
||||
<ul>
|
||||
<li v-for="item in todoDoneList">
|
||||
<UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
|
||||
<UserAvatar :userid="item.userid" :size="26" showName/>
|
||||
</li>
|
||||
</ul>
|
||||
</Scrollbar>
|
||||
@ -119,7 +119,7 @@
|
||||
<div class="read-title"><em>{{ todoUndoneList.length }}</em>{{ $L('待办') }}</div>
|
||||
<ul>
|
||||
<li v-for="item in todoUndoneList">
|
||||
<UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
|
||||
<UserAvatar :userid="item.userid" :size="26" showName/>
|
||||
</li>
|
||||
</ul>
|
||||
</Scrollbar>
|
||||
@ -155,7 +155,7 @@
|
||||
<div class="read-title"><em>{{ readList.length }}</em>{{ $L('已读') }}</div>
|
||||
<ul>
|
||||
<li v-for="item in readList">
|
||||
<UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
|
||||
<UserAvatar :userid="item.userid" :size="26" showName/>
|
||||
</li>
|
||||
</ul>
|
||||
</Scrollbar>
|
||||
@ -163,7 +163,7 @@
|
||||
<div class="read-title"><em>{{ unreadList.length }}</em>{{ $L('未读') }}</div>
|
||||
<ul>
|
||||
<li v-for="item in unreadList">
|
||||
<UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
|
||||
<UserAvatar :userid="item.userid" :size="26" showName/>
|
||||
</li>
|
||||
</ul>
|
||||
</Scrollbar>
|
||||
|
||||
@ -28,11 +28,11 @@
|
||||
<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">
|
||||
<UserAvatarTip :online.sync="dialogData.online_state" :userid="dialogData.dialog_user.userid" :size="42">
|
||||
<p v-if="dialogData.type === 'user' && dialogData.online_state !== true" slot="end">
|
||||
{{$L(dialogData.online_state)}}
|
||||
</p>
|
||||
</UserAvatar>
|
||||
</UserAvatarTip>
|
||||
</div>
|
||||
<Icon v-else class="icon-avatar" type="md-person" />
|
||||
</div>
|
||||
@ -530,10 +530,12 @@ import {choiceEmojiOne} from "./ChatInput/one";
|
||||
|
||||
import ApproveDetails from "../../../pages/manage/approve/details.vue";
|
||||
import UserSelect from "../../../components/UserSelect.vue";
|
||||
import UserAvatarTip from "../../../components/UserAvatar/tip.vue";
|
||||
|
||||
export default {
|
||||
name: "DialogWrapper",
|
||||
components: {
|
||||
UserAvatarTip,
|
||||
UserSelect,
|
||||
ImgUpload,
|
||||
DialogRespond,
|
||||
|
||||
@ -13,9 +13,9 @@
|
||||
<li class="project-avatar" :class="{'cursor-default': projectData.owner_userid !== userId}" @click="projectDropdown('user')">
|
||||
<ul>
|
||||
<li>
|
||||
<UserAvatar :userid="projectData.owner_userid" :size="36" :borderWitdh="2" :openDelay="0">
|
||||
<UserAvatarTip :userid="projectData.owner_userid" :size="36" :borderWitdh="2" :openDelay="0">
|
||||
<p>{{$L('项目负责人')}}</p>
|
||||
</UserAvatar>
|
||||
</UserAvatarTip>
|
||||
<Badge v-if="(windowWidth <= 980 || projectData.cacheParameter.chat) && projectUser.length > 0" type="normal" :overflow-count="999" :count="projectData.project_user.length"/>
|
||||
</li>
|
||||
<template v-if="!(windowWidth <= 980 || projectData.cacheParameter.chat) && projectUser.length > 0" v-for="item in projectUser">
|
||||
@ -25,7 +25,7 @@
|
||||
</ETooltip>
|
||||
</li>
|
||||
<li v-else>
|
||||
<UserAvatar :userid="item.userid" :size="36" :borderWitdh="2" :openDelay="0"/>
|
||||
<UserAvatarTip :userid="item.userid" :size="36" :borderWitdh="2" :openDelay="0"/>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
@ -369,7 +369,7 @@
|
||||
<ul class="project-panel-wait-remove">
|
||||
<li>{{$L('即将移除')}}:</li>
|
||||
<li v-for="id in userWaitRemove" :key="id">
|
||||
<UserAvatar :userid="id" :size="20" showName tooltipDisabled/>
|
||||
<UserAvatar :userid="id" :size="20" showName/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -477,10 +477,12 @@ import TaskDeleted from "./TaskDeleted";
|
||||
import ProjectGantt from "./ProjectGantt";
|
||||
import MarkdownPreviewNostyle from "../../../components/MDEditor/components/preview/nostyle.vue";
|
||||
import UserSelect from "../../../components/UserSelect.vue";
|
||||
import UserAvatarTip from "../../../components/UserAvatar/tip.vue";
|
||||
|
||||
export default {
|
||||
name: "ProjectPanel",
|
||||
components: {
|
||||
UserAvatarTip,
|
||||
UserSelect,
|
||||
MarkdownPreviewNostyle,
|
||||
TaskMenu,
|
||||
|
||||
@ -90,7 +90,7 @@
|
||||
<EDropdownMenu slot="dropdown" class="taskflow-config-more-dropdown-menu">
|
||||
<EDropdownItem v-if="item.userids.length > 0" command="user">
|
||||
<div class="users">
|
||||
<UserAvatar v-for="(uid, ukey) in item.userids" :key="ukey" :userid="uid" :size="28" :borderWitdh="1" :showName="item.userids.length === 1" tooltipDisabled/>
|
||||
<UserAvatar v-for="(uid, ukey) in item.userids" :key="ukey" :userid="uid" :size="28" :borderWitdh="1" :showName="item.userids.length === 1"/>
|
||||
</div>
|
||||
</EDropdownItem>
|
||||
<EDropdownItem command="user">
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<List :split="false" size="small">
|
||||
<ListItem v-for="(items, userid) in tipsTask" :key="userid">
|
||||
<div class="list-content">
|
||||
<UserAvatar :userid="userid" :size="28" :show-icon="true" :show-name="true" tooltipDisabled />
|
||||
<UserAvatar :userid="userid" :size="28" :show-icon="true" :show-name="true"/>
|
||||
<div class="list-task" v-for="(item, key) in items" :key="key">
|
||||
<div class="list-task-info">
|
||||
<span>[{{ item.project_name }}] </span>
|
||||
|
||||
@ -33,9 +33,9 @@
|
||||
:key="item.id"
|
||||
:class="[`level-${item.level}`, departmentSelect === item.id ? 'active' : '']"
|
||||
@click="onSelectDepartment(item.id)">
|
||||
<UserAvatar :userid="item.owner_userid" :size="20" class="department-icon">
|
||||
<UserAvatarTip :userid="item.owner_userid" :size="20" class="department-icon">
|
||||
<p><strong>{{$L('部门负责人')}}</strong></p>
|
||||
</UserAvatar>
|
||||
</UserAvatarTip>
|
||||
<div class="department-title">{{item.name}}</div>
|
||||
<EDropdown
|
||||
size="medium"
|
||||
@ -299,10 +299,11 @@
|
||||
|
||||
<script>
|
||||
import UserSelect from "../../../components/UserSelect.vue";
|
||||
import UserAvatarTip from "../../../components/UserAvatar/tip.vue";
|
||||
|
||||
export default {
|
||||
name: "TeamManagement",
|
||||
components: {UserSelect},
|
||||
components: {UserAvatarTip, UserSelect},
|
||||
props: {
|
||||
checkinMac: {
|
||||
type: Boolean,
|
||||
|
||||
@ -125,18 +125,18 @@
|
||||
</div>
|
||||
<div :class="`no-dark-before file-icon ${item.type}${item.share ? ' share' : ''}`">
|
||||
<template v-if="item.share">
|
||||
<UserAvatar v-if="item.userid != userId" :userid="item.userid" class="share-avatar" :size="20">
|
||||
<UserAvatarTip v-if="item.userid != userId" :userid="item.userid" class="share-avatar" :size="20">
|
||||
<p>{{$L('共享权限')}}: {{$L(item.permission == 1 ? '读/写' : '只读')}}</p>
|
||||
</UserAvatar>
|
||||
</UserAvatarTip>
|
||||
<div v-else class="share-icon no-dark-content">
|
||||
<i class="taskfont"></i>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="isParentShare">
|
||||
<UserAvatar :userid="item.created_id" class="share-avatar" :size="20">
|
||||
<UserAvatarTip :userid="item.created_id" class="share-avatar" :size="20">
|
||||
<p v-if="item.created_id != item.userid"><strong>{{$L('成员创建于')}}: {{item.created_at}}</strong></p>
|
||||
<p v-else>{{$L('所有者创建于')}}: {{item.created_at}}</p>
|
||||
</UserAvatar>
|
||||
</UserAvatarTip>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="item._edit" class="file-input">
|
||||
@ -345,7 +345,7 @@
|
||||
<EAvatar class="avatar-text" icon="el-icon-s-custom"/>
|
||||
<span class="avatar-name">{{$L('所有人')}}</span>
|
||||
</div>
|
||||
<UserAvatar v-else :size="32" :userid="item.userid" showName tooltipDisabled/>
|
||||
<UserAvatar v-else :size="32" :userid="item.userid" showName/>
|
||||
<Select v-model="item.permission" :placeholder="$L('权限')" @on-change="upShare(item)">
|
||||
<Option :value="1">{{ $L('读/写') }}</Option>
|
||||
<Option :value="0">{{ $L('只读') }}</Option>
|
||||
@ -439,13 +439,14 @@ import DrawerOverlay from "../../components/DrawerOverlay";
|
||||
import PreviewImage from "../../components/PreviewImage";
|
||||
import longpress from "../../directives/longpress";
|
||||
import UserSelect from "../../components/UserSelect.vue";
|
||||
import UserAvatarTip from "../../components/UserAvatar/tip.vue";
|
||||
|
||||
const FilePreview = () => import('./components/FilePreview');
|
||||
const FileContent = () => import('./components/FileContent');
|
||||
const FileObject = {sort: null, mode: null, shared: null};
|
||||
|
||||
export default {
|
||||
components: {UserSelect, PreviewImage, FilePreview, DrawerOverlay, FileContent},
|
||||
components: {UserAvatarTip, UserSelect, PreviewImage, FilePreview, DrawerOverlay, FileContent},
|
||||
directives: {longpress},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
<template v-else>
|
||||
<template v-if="dialog.type=='group' && dialog.last_msg && dialog.last_msg.userid">
|
||||
<div v-if="dialog.last_msg.userid == userId" class="last-self">{{$L('你')}}</div>
|
||||
<UserAvatar v-else :userid="dialog.last_msg.userid" :show-name="true" :show-icon="false" tooltip-disabled/>
|
||||
<UserAvatar v-else :userid="dialog.last_msg.userid" :show-name="true" :show-icon="false"/>
|
||||
</template>
|
||||
<div class="last-text">
|
||||
<em v-if="formatMsgEmojiDesc(dialog.last_msg)">{{formatMsgEmojiDesc(dialog.last_msg)}}</em>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user