duxingchen/KCGL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

进入界面的调整

Browse Source
This commit is contained in:
dxc
2026-02-04 15:55:20 +08:00
parent c1c525b699
commit 596f366fc4
5 changed files with 170 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
inventory-web/src/views/system/UserCreate.vue
View File

@ -38,8 +38,17 @@
</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<el-table-column label="操作" width="180" fixed="right">
<template #default="scope">
<el-button
link
type="primary"
size="small"
@click="handleEdit(scope.row)"
>
编辑
</el-button>
<el-popconfirm
title="确定要删除该用户吗？此操作无法撤销。"
@confirm="handleDelete(scope.row)"
@ -55,7 +64,7 @@
<el-dialog
v-model="dialogVisible"
title="新增员工账号"
:title="isEdit ? '编辑员工账号' : '新增员工账号'"
width="500px"
@close="resetForm"
>
@ -66,15 +75,22 @@
label-width="100px"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="登录账号 (英文)" />
<el-input
v-model="form.username"
placeholder="登录账号 (英文)"
:disabled="isEdit"
/>
</el-form-item>
<el-form-item label="初始密码" prop="password">
<el-form-item
label="密码"
prop="password"
>
<el-input
v-model="form.password"
type="password"
show-password
placeholder="设置初始密码"
:placeholder="isEdit ? '不修改请留空' : '设置初始密码'"
/>
</el-form-item>
@ -117,7 +133,7 @@
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="onSubmit" :loading="submitLoading">
确认创建
{{ isEdit ? '确认修改' : '确认创建' }}
</el-button>
</div>
</template>
@ -126,8 +142,8 @@
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { createUser, getUserList, deleteUser } from '@/api/auth'
import { reactive, ref, onMounted, computed } from 'vue'
import { createUser, updateUser, getUserList, deleteUser } from '@/api/auth'
import { ElMessage } from 'element-plus'
// --- 状态定义 ---
@ -135,9 +151,13 @@ const tableLoading = ref(false)
const submitLoading = ref(false)
const dialogVisible = ref(false)
const tableData = ref<any[]>([])
const departmentOptions = ref<string[]>([]) // 部门下拉选项
const departmentOptions = ref<string[]>([])
const formRef = ref()
// [新增] 区分编辑/创建模式
const isEdit = ref(false)
const currentId = ref<number | null>(null)
const form = reactive({
username: '',
password: '',
@ -146,28 +166,42 @@ const form = reactive({
email: ''
})
const rules = {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码至少6位', trigger: 'blur' }
],
role: [{ required: true, message: '请选择角色', trigger: 'change' }],
department: [{ required: true, message: '请输入或选择部门', trigger: ['blur', 'change'] }]
}
// [关键] 动态规则：编辑模式下密码不是必填项
const rules = computed(() => {
const commonRules = {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
role: [{ required: true, message: '请选择角色', trigger: 'change' }],
department: [{ required: true, message: '请输入或选择部门', trigger: ['blur', 'change'] }]
}
// 如果是创建模式，密码必填
if (!isEdit.value) {
return {
...commonRules,
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码至少6位', trigger: 'blur' }
]
}
} else {
// 如果是编辑模式，密码选填（只有输入了才校验长度）
return {
...commonRules,
password: [
{ min: 6, message: '密码至少6位', trigger: 'blur' }
]
}
}
})
// --- 逻辑方法 ---
// 1. 获取用户列表
const getList = async () => {
tableLoading.value = true
try {
const res = await getUserList()
tableData.value = res.data || []
// 获取数据后，提取已有的部门作为选项
extractDepartments(tableData.value)
} catch (error) {
console.error('Fetch users failed:', error)
} finally {
@ -175,31 +209,42 @@ const getList = async () => {
}
}
// 【关键修改】提取部门：没有任何预设值，完全依赖数据库
const extractDepartments = (data: any[]) => {
// 1. 创建一个空的 Set，不放任何默认值
const deptSet = new Set<string>()
// 2. 遍历数据库返回的数据，收集已有的部门
if (data && data.length > 0) {
data.forEach(user => {
// 只有当部门字段不为空时才添加
if (user.department && user.department.trim() !== '') {
deptSet.add(user.department)
}
})
}
// 3. 转为数组供下拉框使用
departmentOptions.value = Array.from(deptSet)
}
// 2. 打开新增弹窗
const handleCreate = () => {
isEdit.value = false
currentId.value = null
resetFormState() // 清空数据
dialogVisible.value = true
}
// 3. 提交创建
// [新增] 打开编辑弹窗
const handleEdit = (row: any) => {
isEdit.value = true
currentId.value = row.id
// 回填数据
form.username = row.username
form.department = row.department
form.role = row.role
form.email = row.email || ''
form.password = '' // 编辑时不回显密码，留空表示不修改
dialogVisible.value = true
}
// 3. 提交 (兼容创建和修改)
const onSubmit = async () => {
if (!formRef.value) return
@ -207,10 +252,18 @@ const onSubmit = async () => {
if (valid) {
submitLoading.value = true
try {
await createUser(form)
ElMessage.success(`用户 ${form.username} 创建成功！`)
dialogVisible.value = false // 关闭弹窗
getList() // 刷新列表，如果你刚才输入了新部门，刷新后它就会出现在下拉框里
if (isEdit.value && currentId.value) {
// 编辑逻辑
await updateUser(currentId.value, form)
ElMessage.success(`用户 ${form.username} 修改成功！`)
} else {
// 创建逻辑
await createUser(form)
ElMessage.success(`用户 ${form.username} 创建成功！`)
}
dialogVisible.value = false
getList()
} catch (error) {
// 错误已处理
} finally {
@ -224,6 +277,15 @@ const onSubmit = async () => {
const resetForm = () => {
if (!formRef.value) return
formRef.value.resetFields()
resetFormState()
}
const resetFormState = () => {
form.username = ''
form.password = ''
form.department = ''
form.role = ''
form.email = ''
}
// 5. 删除用户
@ -244,7 +306,6 @@ const formatDate = (dateStr: string) => {
return dateStr.replace('T', ' ').substring(0, 19)
}
// 角色保留翻译（因为后端通常存英文代码 code）
const formatRole = (val: string) => {
const map: Record<string, string> = {
'supervisor': '主管',