feat(用户审核): 增加用户审核弹窗及驳回状态处理
- 在用户管理页面添加审核弹窗，支持通过/驳回操作 - 新增驳回状态(3)及相关状态显示处理 - 修改查询参数username为userName以保持一致性 - 调整时间范围选择器的日期格式为YYYY-MM-DD - 将审批按钮点击事件改为打开弹窗方式
This commit is contained in:
parent
37747116ed
commit
06b10364fa
|
|
@ -129,6 +129,7 @@ const statusMap = {
|
|||
'0': '已生效',
|
||||
'1': '已停用',
|
||||
'2': '待审核',
|
||||
'3': '已驳回',
|
||||
}
|
||||
|
||||
const dialogShow = ref(false); // 新增账户弹窗显示状态
|
||||
|
|
@ -293,6 +294,7 @@ const getStatusTagType = (status) => {
|
|||
if (status === '0') return 'success'
|
||||
if (status === '1') return 'info'
|
||||
if (status === '2') return 'primary'
|
||||
if (status === '3') return 'danger'
|
||||
return 'info'
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<div class="MainBox">
|
||||
<div class="FormBox card-box">
|
||||
<el-form :model="queryData" inline ref="formRef">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="queryData.username" placeholder="请输入用户名"></el-input>
|
||||
<el-form-item label="用户名" prop="userName">
|
||||
<el-input v-model="queryData.userName" placeholder="请输入用户名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围" prop="timeRange">
|
||||
<el-date-picker v-model="queryData.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="结束日期" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
<el-table-column prop="operation" label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<div class="FlexBox">
|
||||
<el-button type="text" size="mini" @click="handleApprove(scope.row)">审批</el-button>
|
||||
<el-button type="text" size="mini" @click="openApproveDialog(scope.row)">审批</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -50,22 +50,42 @@
|
|||
@current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="approveDialogVisible" title="用户审批" width="500px" :close-on-click-modal="false">
|
||||
<el-form :model="approveForm" :rules="approveRules" ref="approveFormRef" label-width="100px">
|
||||
<el-form-item label="审核状态" prop="auditStatus">
|
||||
<el-radio-group v-model="approveForm.auditStatus">
|
||||
<el-radio label="1">通过</el-radio>
|
||||
<el-radio label="2">驳回</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="审核意见" prop="auditOpinion">
|
||||
<el-input v-model="approveForm.auditOpinion" type="textarea" :rows="4" placeholder="请输入审核意见" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="closeApproveDialog">取消</el-button>
|
||||
<el-button type="primary" @click="submitApprove">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import { ref, onBeforeMount } from "vue";
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { listUser, FetchUserReview } from "@/api/system/user";
|
||||
// 状态映射
|
||||
const statusMap = {
|
||||
'0': '已生效',
|
||||
'1': '已停用',
|
||||
'2': '待审核',
|
||||
'3': '已驳回',
|
||||
}
|
||||
|
||||
// 查询表单
|
||||
const queryData = ref({
|
||||
username: "",
|
||||
userName: "",
|
||||
timeRange: [],
|
||||
});
|
||||
|
||||
|
|
@ -85,6 +105,35 @@ const tableData = ref([]);
|
|||
// 当前审批的用户
|
||||
const currentUser = ref();
|
||||
|
||||
// 审批弹窗
|
||||
const approveDialogVisible = ref(false);
|
||||
const approveFormRef = ref();
|
||||
const approveForm = ref({
|
||||
auditStatus: '1',
|
||||
auditOpinion: ''
|
||||
});
|
||||
|
||||
// 审批表单验证规则
|
||||
const approveRules = ref({
|
||||
auditStatus: [
|
||||
{ required: true, message: '请选择审核状态', trigger: 'change' }
|
||||
],
|
||||
auditOpinion: [
|
||||
{
|
||||
required: true,
|
||||
message: '驳回时审核意见为必填项',
|
||||
trigger: 'blur',
|
||||
validator: (rule, value, callback) => {
|
||||
if (approveForm.value.auditStatus === '0' && !value) {
|
||||
callback(new Error('驳回时审核意见为必填项'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 分页切换
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.value.pageNum = val;
|
||||
|
|
@ -104,7 +153,7 @@ const handleSearch = () => {
|
|||
// 重置查询表单
|
||||
const handleReset = () => {
|
||||
queryData.value = {
|
||||
username: "",
|
||||
userName: "",
|
||||
timeRange: [],
|
||||
};
|
||||
pageInfo.value.pageNum = 1;
|
||||
|
|
@ -113,8 +162,9 @@ const handleReset = () => {
|
|||
|
||||
// 初始化查询用户列表
|
||||
const getinit = async () => {
|
||||
console.log(queryData.value.timeRange,'时间范围');
|
||||
let query = {
|
||||
username: queryData.value.username,
|
||||
userName: queryData.value.userName,
|
||||
startTime: queryData.value.timeRange[0] ? dayjs(queryData.value.timeRange[0]).format('YYYY-MM-DD') : '',
|
||||
endTime: queryData.value.timeRange[1] ? dayjs(queryData.value.timeRange[1]).format('YYYY-MM-DD') : '',
|
||||
pageNum: pageInfo.value.pageNum,
|
||||
|
|
@ -131,19 +181,43 @@ const getinit = async () => {
|
|||
};
|
||||
|
||||
|
||||
// 审批用户
|
||||
const handleApprove = async (row) => {
|
||||
let params = {
|
||||
userId: row.userId,
|
||||
status: row.status === 2 ? 0 : 2,
|
||||
// 打开审批弹窗
|
||||
const openApproveDialog = (row) => {
|
||||
currentUser.value = row;
|
||||
approveForm.value = {
|
||||
auditStatus: '1',
|
||||
auditOpinion: ''
|
||||
};
|
||||
approveDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 关闭审批弹窗
|
||||
const closeApproveDialog = () => {
|
||||
approveDialogVisible.value = false;
|
||||
currentUser.value = null;
|
||||
getinit();
|
||||
}
|
||||
|
||||
// 提交审批
|
||||
const submitApprove = async () => {
|
||||
await approveFormRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
let params = {
|
||||
userId: currentUser.value.userId,
|
||||
auditStatus: approveForm.value.auditStatus,
|
||||
auditOpinion: approveForm.value.auditOpinion,
|
||||
status: approveForm.value.auditStatus === '1' ? 0 : 3
|
||||
};
|
||||
|
||||
let res = await FetchUserReview(params);
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('操作成功');
|
||||
getinit();
|
||||
closeApproveDialog();
|
||||
} else {
|
||||
ElMessage.error(res.msg || '操作失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ const dialogShow = ref(false); // 弹窗显示状态
|
|||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const pageNum = ref(1); // 当前页码
|
||||
const pageSize = ref(5); // 每页显示条数
|
||||
const pageSize = ref(10); // 每页显示条数
|
||||
const total = ref(20); // 总记录数
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue