refactor(用户管理): 优化用户管理和审核功能
- 在用户管理模块中移除未使用的导入并优化用户对话框逻辑 - 在用户审核模块中重构查询表单和状态显示,添加重置功能 - 完善用户对话框的编辑功能,包括树形选择器高亮和表单验证
This commit is contained in:
parent
f56c7923df
commit
37747116ed
|
|
@ -18,7 +18,8 @@
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="初始密码">
|
<el-form-item label="初始密码">
|
||||||
<el-input v-model="formData.password" type="password" placeholder="请输入密码" show-password />
|
<el-input v-model="formData.password" type="password" placeholder="请输入密码" show-password
|
||||||
|
:disabled="!!props.userId" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
|
|
@ -35,10 +36,10 @@
|
||||||
|
|
||||||
<el-form-item label="所属单位">
|
<el-form-item label="所属单位">
|
||||||
<div class="TreeBox">
|
<div class="TreeBox">
|
||||||
<el-tree :data="unitTreeData" :props="treeProps" show-line highlight-current default-expand-all
|
<el-tree ref="treeRef" :current-node-key="formData.deptId" :data="unitTreeData"
|
||||||
|
:props="treeProps" node-key="id" show-line highlight-current default-expand-all
|
||||||
@current-change="handleUnitChange" :expand-on-click-node="false" class="unit-tree" />
|
@current-change="handleUnitChange" :expand-on-click-node="false" class="unit-tree" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="角色">
|
<el-form-item label="角色">
|
||||||
|
|
@ -63,11 +64,11 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { getUser, deptTreeSelect, addUser } from '@/api/system/user.js'
|
import { getUser, deptTreeSelect, addUser, updateUser } from '@/api/system/user.js'
|
||||||
import { listRole } from '@/api/system/role.js'
|
import { listRole } from '@/api/system/role.js'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
import { ref, onBeforeMount } from 'vue'
|
import { ref, onBeforeMount, onMounted, watch, nextTick } from 'vue'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
userId: {
|
userId: {
|
||||||
type: Number || String,
|
type: Number || String,
|
||||||
|
|
@ -103,6 +104,9 @@ const roleList = ref([])
|
||||||
// 所属单位树形数据
|
// 所属单位树形数据
|
||||||
const unitTreeData = ref([])
|
const unitTreeData = ref([])
|
||||||
|
|
||||||
|
// 树组件引用
|
||||||
|
const treeRef = ref(null)
|
||||||
|
|
||||||
// 树形结构配置
|
// 树形结构配置
|
||||||
const treeProps = {
|
const treeProps = {
|
||||||
children: 'children',
|
children: 'children',
|
||||||
|
|
@ -113,6 +117,12 @@ onBeforeMount(() => {
|
||||||
getUnitTree()
|
getUnitTree()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (props.userId) {
|
||||||
|
getUserDetail()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
// 查询角色
|
// 查询角色
|
||||||
const getRoleList = async () => {
|
const getRoleList = async () => {
|
||||||
let res = await listRole()
|
let res = await listRole()
|
||||||
|
|
@ -133,14 +143,33 @@ const getUnitTree = async () => {
|
||||||
// 查询用户详情
|
// 查询用户详情
|
||||||
|
|
||||||
const getUserDetail = async () => {
|
const getUserDetail = async () => {
|
||||||
let res = await getUser({
|
let res = await getUser(props.userId)
|
||||||
account: formData.value.account
|
|
||||||
})
|
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
formData.value = res.data
|
console.log('用户详情:', res.data)
|
||||||
|
formData.value.userName = res.data.userName // 账户名
|
||||||
|
formData.value.nickName = res.data.nickName // 姓名
|
||||||
|
formData.value.password = res.data.password // 初始密码
|
||||||
|
formData.value.phonenumber = res.data.phonenumber // 联系电话
|
||||||
|
formData.value.email = res.data.email // 邮箱
|
||||||
|
// 角色
|
||||||
|
formData.value.roleId = res.data.roleId
|
||||||
|
formData.value.roleName = res.data.roleName
|
||||||
|
// 选中所属单位
|
||||||
|
formData.value.deptId = res.data.dept.deptId
|
||||||
|
formData.value.deptName = res.data.dept.deptName
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 监听 deptId 变化,手动设置树节点高亮
|
||||||
|
watch(() => formData.value.deptId, (newVal) => {
|
||||||
|
if (newVal && treeRef.value) {
|
||||||
|
nextTick(() => {
|
||||||
|
treeRef.value.setCurrentKey(newVal)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, { immediate: true })
|
||||||
|
|
||||||
// 角色选择事件
|
// 角色选择事件
|
||||||
const handleRoleChange = (roleId) => {
|
const handleRoleChange = (roleId) => {
|
||||||
console.log('Selected roleId:', roleId)
|
console.log('Selected roleId:', roleId)
|
||||||
|
|
@ -164,13 +193,17 @@ const handleClose = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 提交表单
|
// 提交表单
|
||||||
const handleSubmit = () => {
|
const handleSubmit = async () => {
|
||||||
console.log('提交数据:', formData.value)
|
console.log('提交数据:', formData.value)
|
||||||
// 校验表单
|
// 校验表单
|
||||||
if (!formData.value.roleId) {
|
if (!formData.value.roleId) {
|
||||||
ElMessage.warning('请选择角色')
|
ElMessage.warning('请选择角色')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
if (!formData.value.password && !props.userId) {
|
||||||
|
ElMessage.warning('请输入初始密码')
|
||||||
|
return
|
||||||
|
}
|
||||||
if (!formData.value.deptId) {
|
if (!formData.value.deptId) {
|
||||||
ElMessage.warning('请选择所属单位')
|
ElMessage.warning('请选择所属单位')
|
||||||
return
|
return
|
||||||
|
|
@ -188,15 +221,32 @@ const handleSubmit = () => {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const isEditMode = !!props.userId
|
||||||
|
const fetchFunc = isEditMode ? updateUser : addUser
|
||||||
|
const successMsg = isEditMode ? '更新成功' : '添加成功'
|
||||||
|
const errorMsg = isEditMode ? '更新失败' : '添加失败'
|
||||||
|
|
||||||
addUser(formData.value).then(res => {
|
const params = {
|
||||||
|
...formData.value,
|
||||||
|
userId: props.userId
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isEditMode) {
|
||||||
|
delete params.password
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetchFunc(params)
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
ElMessage.success('添加成功')
|
ElMessage.success(successMsg)
|
||||||
props.CloseDialog()
|
props.CloseDialog()
|
||||||
} else {
|
} else {
|
||||||
ElMessage.error(res.msg || '添加失败')
|
ElMessage.error(res.msg || errorMsg)
|
||||||
}
|
}
|
||||||
})
|
} catch (error) {
|
||||||
|
ElMessage.error(errorMsg)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 提交逻辑
|
// 提交逻辑
|
||||||
|
|
|
||||||
|
|
@ -117,7 +117,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
|
import { ref, onMounted, getCurrentInstance, reactive } from 'vue'
|
||||||
import { listDept } from '@/api/treeRatingManagement'
|
import { listDept } from '@/api/treeRatingManagement'
|
||||||
import { listUser, delUser } from '@/api/system/user.js'
|
import { listUser, delUser } from '@/api/system/user.js'
|
||||||
import UserDialog from "./UserDialog.vue";
|
import UserDialog from "./UserDialog.vue";
|
||||||
|
|
|
||||||
|
|
@ -2,18 +2,18 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="MainBox">
|
<div class="MainBox">
|
||||||
<div class="FormBox card-box">
|
<div class="FormBox card-box">
|
||||||
<el-form :model="formData" inline ref="formRef">
|
<el-form :model="queryData" inline ref="formRef">
|
||||||
<el-form-item label="用户名" prop="username">
|
<el-form-item label="用户名" prop="username">
|
||||||
<el-input v-model="formData.username" placeholder="请输入用户名"></el-input>
|
<el-input v-model="queryData.username" placeholder="请输入用户名"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="时间范围" prop="timeRange">
|
<el-form-item label="时间范围" prop="timeRange">
|
||||||
<el-date-picker v-model="formData.timeRange" type="daterange" value-format="yyyy-MM-dd"
|
<el-date-picker v-model="queryData.timeRange" type="daterange" value-format="yyyy-MM-dd"
|
||||||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div class="ButtonBox">
|
<div class="ButtonBox">
|
||||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||||
<el-button type="primary" @click="handleSearch">重置</el-button>
|
<el-button type="primary" @click="handleReset">重置</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-box">
|
<div class="card-box">
|
||||||
|
|
@ -28,7 +28,13 @@
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="phonenumber" label="联系电话" />
|
<el-table-column prop="phonenumber" label="联系电话" />
|
||||||
<el-table-column prop="remark" label="角色" />
|
<el-table-column prop="remark" label="角色" />
|
||||||
<el-table-column prop="status" label="状态" />
|
<el-table-column prop="status" label="状态">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag type="primary">
|
||||||
|
{{ statusMap[row.status] || '-' }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
<el-table-column prop="operation" label="操作" width="100">
|
<el-table-column prop="operation" label="操作" width="100">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<div class="FlexBox">
|
<div class="FlexBox">
|
||||||
|
|
@ -44,17 +50,21 @@
|
||||||
@current-change="handleCurrentChange" />
|
@current-change="handleCurrentChange" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import { ref, onBeforeMount } from "vue";
|
import { ref, onBeforeMount } from "vue";
|
||||||
import { listUser } from "@/api/system/user";
|
import { listUser, FetchUserReview } from "@/api/system/user";
|
||||||
|
// 状态映射
|
||||||
|
const statusMap = {
|
||||||
|
'0': '已生效',
|
||||||
|
'1': '已停用',
|
||||||
|
'2': '待审核',
|
||||||
|
}
|
||||||
|
|
||||||
// 查询表单
|
// 查询表单
|
||||||
const formData = ref({
|
const queryData = ref({
|
||||||
username: "",
|
username: "",
|
||||||
timeRange: [],
|
timeRange: [],
|
||||||
});
|
});
|
||||||
|
|
@ -72,19 +82,44 @@ const pageInfo = ref({
|
||||||
// 表格数据
|
// 表格数据
|
||||||
const tableData = ref([]);
|
const tableData = ref([]);
|
||||||
|
|
||||||
|
// 当前审批的用户
|
||||||
|
const currentUser = ref();
|
||||||
|
|
||||||
|
// 分页切换
|
||||||
|
const handleCurrentChange = (val) => {
|
||||||
|
pageInfo.value.pageNum = val;
|
||||||
|
getinit();
|
||||||
|
}
|
||||||
|
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
getinit();
|
getinit();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 查询用户列表
|
||||||
|
const handleSearch = () => {
|
||||||
|
pageInfo.value.pageNum = 1;
|
||||||
|
getinit();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置查询表单
|
||||||
|
const handleReset = () => {
|
||||||
|
queryData.value = {
|
||||||
|
username: "",
|
||||||
|
timeRange: [],
|
||||||
|
};
|
||||||
|
pageInfo.value.pageNum = 1;
|
||||||
|
getinit();
|
||||||
|
}
|
||||||
|
|
||||||
// 初始化查询用户列表
|
// 初始化查询用户列表
|
||||||
const getinit = async () => {
|
const getinit = async () => {
|
||||||
let query = {
|
let query = {
|
||||||
username: formData.value.username,
|
username: queryData.value.username,
|
||||||
startTime: formData.value.timeRange[0] ? dayjs(formData.value.timeRange[0]).format('YYYY-MM-DD') : '',
|
startTime: queryData.value.timeRange[0] ? dayjs(queryData.value.timeRange[0]).format('YYYY-MM-DD') : '',
|
||||||
endTime: formData.value.timeRange[1] ? dayjs(formData.value.timeRange[1]).format('YYYY-MM-DD') : '',
|
endTime: queryData.value.timeRange[1] ? dayjs(queryData.value.timeRange[1]).format('YYYY-MM-DD') : '',
|
||||||
pageNum: pageInfo.value.pageNum,
|
pageNum: pageInfo.value.pageNum,
|
||||||
pageSize: pageInfo.value.pageSize,
|
pageSize: pageInfo.value.pageSize,
|
||||||
|
status: 2
|
||||||
};
|
};
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
let res = await listUser(query);
|
let res = await listUser(query);
|
||||||
|
|
@ -95,6 +130,22 @@ const getinit = async () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// 审批用户
|
||||||
|
const handleApprove = async (row) => {
|
||||||
|
let params = {
|
||||||
|
userId: row.userId,
|
||||||
|
status: row.status === 2 ? 0 : 2,
|
||||||
|
};
|
||||||
|
let res = await FetchUserReview(params);
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage.success('操作成功');
|
||||||
|
getinit();
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.msg || '操作失败');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.MainBox {
|
.MainBox {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue