当前用户组件

概述

CurrentUser 是一个自动填充当前登录用户信息的只读组件，常用于表单中的"创建人"、"负责人"等字段，支持显示用户名、真实姓名、头像等信息。

组件路径：web/apps/web-ele/src/components/zq-form/current-user/

组件名称：CurrentUser

功能特性

• 自动获取当前登录用户信息
• 支持显示用户名、昵称、真实姓名
• 支持存储用户 ID、用户名或真实姓名
• 可选显示用户头像
• 支持多种填充模式

Props

属性	类型	默认值	说明
modelValue	string	-	用户值
displayField	'name' | 'nickname' | 'username'	'nickname'	显示字段
valueField	'id' | 'realName' | 'username'	'realName'	值字段
showAvatar	boolean	false	是否显示头像
disabled	boolean	true	是否禁用（始终为只读）
placeholder	string	'当前用户'	占位符
fillMode	'onCreate' | 'always'	'onCreate'	填充模式

字段说明

displayField（显示字段）

值	说明
name / nickname	显示真实姓名，无则显示用户名
username	显示用户名

valueField（值字段）

值	说明
id	存储用户 ID
realName	存储真实姓名
username	存储用户名

fillMode（填充模式）

值	说明	使用场景
onCreate	仅在值为空时填充	创建人字段
always	始终填充当前用户	当前操作人字段

Events

事件	参数	说明
update:modelValue	string	值更新
change	string	值变化

使用示例

创建人字段

<template>
  <CurrentUser
    v-model="createdBy"
    display-field="nickname"
    value-field="id"
    fill-mode="onCreate"
  />
</template>

<script setup>
import { ref } from 'vue';

const createdBy = ref('');
</script>

显示头像

<template>
  <CurrentUser
    v-model="userId"
    :show-avatar="true"
    display-field="nickname"
    value-field="id"
  />
</template>

<script setup>
import { ref } from 'vue';

const userId = ref('');
</script>

存储用户名

<template>
  <CurrentUser
    v-model="username"
    display-field="username"
    value-field="username"
  />
</template>

<script setup>
import { ref } from 'vue';

const username = ref('');
</script>

始终更新模式

<template>
  <CurrentUser
    v-model="operatorId"
    value-field="id"
    fill-mode="always"
  />
</template>

<script setup>
import { ref } from 'vue';

const operatorId = ref('');
</script>

与表单设计器集成

在表单设计器中，该组件作为 current-user 类型的表单项使用：

{
  "type": "current-user",
  "field": "sys_create_user_id",
  "label": "创建人",
  "props": {
    "displayField": "nickname",
    "valueField": "id",
    "fillMode": "onCreate",
    "showAvatar": false
  }
}

典型应用场景

• 创建人：fillMode="onCreate" + valueField="id"，记录数据创建者
• 更新人：fillMode="always" + valueField="id"，记录最后修改者
• 负责人：fillMode="onCreate" + valueField="realName"，显示负责人姓名
• 操作人：fillMode="always" + valueField="username"，记录操作人用户名

技术实现

• 通过 useUserStore 获取当前登录用户信息
• 用户信息包含：userId、username、realName、avatar 等字段
• 组件始终为只读状态，防止用户手动修改