307b46b213
新增客户管理、项目进度和财务中心相关页面及API接口 添加项目明细页面和启动图资源 重构请求基础URL和更新逻辑 引入uni-badge和uni-list组件 优化工作台首页功能入口布局 更新版本号至5.0.0并修改启动图配置
88 lines
1.9 KiB
Vue
88 lines
1.9 KiB
Vue
<template>
|
||
<span class="username-display">
|
||
<!-- 加载中状态 -->
|
||
<template v-if="isLoading">
|
||
<span class="loading-placeholder">加载中...</span>
|
||
</template>
|
||
|
||
<!-- 已加载完成 -->
|
||
<template v-else>
|
||
<!-- 存在用户信息 -->
|
||
<span v-if="userInfo">{{ userInfo.nickName }}</span>
|
||
|
||
<!-- 不存在用户信息 -->
|
||
<span v-else class="unknown-user">
|
||
{{ userId ? `未知用户(${userId})` : '未指定用户' }}
|
||
</span>
|
||
</template>
|
||
</span>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState, mapActions } from 'vuex'
|
||
|
||
export default {
|
||
name: 'UsernameDisplay',
|
||
props: {
|
||
// 需要展示的用户ID
|
||
userId: {
|
||
type: [String, Number],
|
||
default: null
|
||
},
|
||
// 是否自动加载用户数据（默认自动加载）
|
||
autoLoad: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
userMap: state => state.userMap,
|
||
userList: state => state.userList
|
||
}),
|
||
// 获取当前用户信息
|
||
userInfo() {
|
||
if (!this.userId) return null
|
||
return this.userMap[this.userId]
|
||
},
|
||
// 判断是否处于加载中（用户列表为空且需要加载时）
|
||
isLoading() {
|
||
return this.autoLoad && this.userList.length === 0 && this.userId !== null
|
||
}
|
||
},
|
||
methods: {
|
||
...mapActions(['setUser'])
|
||
},
|
||
mounted() {
|
||
// 自动加载用户数据（如果未加载且需要加载）
|
||
if (this.autoLoad && this.userList.length === 0) {
|
||
this.setUser()
|
||
}
|
||
},
|
||
watch: {
|
||
// 当userId变化时，如果需要自动加载且数据未加载，重新加载
|
||
userId(newVal) {
|
||
if (this.autoLoad && newVal !== null && this.userList.length === 0) {
|
||
this.setUser()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.username-display {
|
||
color: #333;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.loading-placeholder {
|
||
color: #999;
|
||
font-style: italic;
|
||
}
|
||
|
||
.unknown-user {
|
||
color: #f56c6c;
|
||
font-size: 13px;
|
||
}
|
||
</style> |