修改登录,实现中文名称显示,以及修改登录逻辑
This commit is contained in:
@ -16,23 +16,22 @@
|
||||
border
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="username" label="用户名" width="150" />
|
||||
<el-table-column prop="username" label="用户标识" min-width="180" />
|
||||
|
||||
<el-table-column prop="department" label="所属部门" width="150">
|
||||
<template #default="scope">
|
||||
<el-tag>{{ scope.row.department }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="role" label="系统角色" width="180">
|
||||
<template #default="scope">
|
||||
{{ formatRole(scope.row.role) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="email" label="邮箱" min-width="200" />
|
||||
<el-table-column prop="created_at" label="创建时间" width="180">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.created_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="180" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
@ -58,12 +57,25 @@
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-form-item label="真实姓名" prop="cn_name">
|
||||
<el-input
|
||||
v-model="form.cn_name"
|
||||
placeholder="请输入中文姓名 (如: 张三)"
|
||||
:disabled="isEdit"
|
||||
@input="handleNameInput"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="登录账号" prop="username">
|
||||
<el-input
|
||||
v-model="form.username"
|
||||
placeholder="登录账号 (英文)"
|
||||
placeholder="自动生成,可修改 (如: zhangsan)"
|
||||
:disabled="isEdit"
|
||||
/>
|
||||
>
|
||||
<template #append>
|
||||
<span v-if="!isEdit" style="font-size: 12px; color: #999;">重复自动+1</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="密码" prop="password">
|
||||
@ -121,8 +133,8 @@ import { reactive, ref, onMounted, computed } from 'vue'
|
||||
import { createUser, updateUser, getUserList, deleteUser } from '@/api/auth'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { pinyin } from 'pinyin-pro' // ★ 务必安装: npm install pinyin-pro
|
||||
|
||||
// --- 状态定义 ---
|
||||
const userStore = useUserStore()
|
||||
const tableLoading = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
@ -135,14 +147,32 @@ const isEdit = ref(false)
|
||||
const currentId = ref<number | null>(null)
|
||||
|
||||
const form = reactive({
|
||||
username: '',
|
||||
cn_name: '', // 真实姓名 (前端输入)
|
||||
username: '', // 登录账号 (拼音)
|
||||
password: '',
|
||||
department: '',
|
||||
role: '',
|
||||
email: ''
|
||||
})
|
||||
|
||||
// [核心逻辑] 角色选项列表 (保留了之前的强力判断逻辑,但去除了 debug 变量)
|
||||
// ★ 监听中文输入,自动转拼音
|
||||
const handleNameInput = (val: string) => {
|
||||
if (isEdit.value) return // 编辑模式下不联动
|
||||
if (!val) {
|
||||
form.username = ''
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// toneType: 'none' 去除声调, type: 'array' 转数组后拼接
|
||||
const pinyinStr = pinyin(val, { toneType: 'none', type: 'array' }).join('')
|
||||
// 将拼音转小写
|
||||
form.username = pinyinStr.toLowerCase()
|
||||
} catch (e) {
|
||||
// 如果转换失败(比如输入符号),不做处理
|
||||
}
|
||||
}
|
||||
|
||||
const roleOptions = computed(() => {
|
||||
const options = [
|
||||
{ label: '主管', value: 'SUPERVISOR' },
|
||||
@ -154,19 +184,15 @@ const roleOptions = computed(() => {
|
||||
{ label: '销售', value: 'SALES' }
|
||||
]
|
||||
|
||||
// 1. 尝试从 Pinia Store 获取信息
|
||||
let role = userStore.user?.role || userStore.role
|
||||
let username = userStore.user?.username || userStore.name
|
||||
|
||||
// 2. 如果 Store 没数据,尝试从 LocalStorage 补救
|
||||
if (!role) role = localStorage.getItem('role')
|
||||
if (!username) username = localStorage.getItem('username')
|
||||
|
||||
// 3. 统一转大写
|
||||
const safeRole = role ? String(role).toUpperCase() : ''
|
||||
const safeUsername = username ? String(username).toUpperCase() : ''
|
||||
|
||||
// 4. [关键] 只要是 IRIS 或者 角色包含 ADMIN,就开启上帝模式
|
||||
const isSuperAdmin = (safeRole === 'SUPER_ADMIN') || (safeUsername === 'IRIS')
|
||||
|
||||
if (isSuperAdmin) {
|
||||
@ -176,10 +202,10 @@ const roleOptions = computed(() => {
|
||||
return options
|
||||
})
|
||||
|
||||
// 验证规则
|
||||
const rules = computed(() => {
|
||||
const commonRules: any = {
|
||||
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
||||
cn_name: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
|
||||
username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
|
||||
role: [{ required: true, message: '请选择角色', trigger: 'change' }],
|
||||
department: [{ required: true, message: '请输入或选择部门', trigger: ['blur', 'change'] }],
|
||||
email: [
|
||||
@ -236,6 +262,8 @@ const extractDepartments = (data: any[]) => {
|
||||
const handleCreate = () => {
|
||||
isEdit.value = false
|
||||
currentId.value = null
|
||||
// 重置表单
|
||||
form.cn_name = ''
|
||||
form.username = ''
|
||||
form.password = ''
|
||||
form.department = ''
|
||||
@ -248,7 +276,21 @@ const handleCreate = () => {
|
||||
const handleEdit = (row: any) => {
|
||||
isEdit.value = true
|
||||
currentId.value = row.id
|
||||
form.username = row.username
|
||||
|
||||
// 回显数据
|
||||
// 注意:后端返回的 row.username 已经是 "张三(zhangsan01)" 格式
|
||||
const displayStr = row.username || ''
|
||||
|
||||
if (displayStr.includes('(') && displayStr.includes(')')) {
|
||||
const parts = displayStr.split('(')
|
||||
form.cn_name = parts[0]
|
||||
form.username = parts[1].replace(')', '')
|
||||
} else {
|
||||
// 兼容旧数据
|
||||
form.cn_name = displayStr
|
||||
form.username = displayStr
|
||||
}
|
||||
|
||||
form.department = row.department
|
||||
form.role = row.role
|
||||
form.email = row.email || ''
|
||||
@ -265,10 +307,12 @@ const onSubmit = async () => {
|
||||
try {
|
||||
if (isEdit.value && currentId.value) {
|
||||
await updateUser(currentId.value, form)
|
||||
ElMessage.success(`用户 ${form.username} 修改成功!`)
|
||||
ElMessage.success(`用户 ${form.cn_name} 修改成功!`)
|
||||
} else {
|
||||
await createUser(form)
|
||||
ElMessage.success(`用户 ${form.username} 创建成功!`)
|
||||
// 创建时,后端会自动处理重复逻辑
|
||||
const res: any = await createUser(form)
|
||||
// 这里的 res.data.account_id 会返回最终生成的账号 (如 zhangsan1)
|
||||
ElMessage.success(`创建成功!登录账号为: ${res.data.account_id} (已自动防重)`)
|
||||
}
|
||||
dialogVisible.value = false
|
||||
getList()
|
||||
@ -284,6 +328,7 @@ const onSubmit = async () => {
|
||||
const resetForm = () => {
|
||||
if (!formRef.value) return
|
||||
formRef.value.resetFields()
|
||||
form.cn_name = ''
|
||||
form.username = ''
|
||||
form.password = ''
|
||||
form.department = ''
|
||||
@ -300,11 +345,6 @@ const handleDelete = async (row: any) => {
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr) return '-'
|
||||
return dateStr.replace('T', ' ').substring(0, 19)
|
||||
}
|
||||
|
||||
const formatRole = (val: string) => {
|
||||
const map: Record<string, string> = {
|
||||
'SUPER_ADMIN': '超级管理员',
|
||||
|
||||
Reference in New Issue
Block a user