<!-- 用户管理 -->
|
<template>
|
<div class="app-container">
|
<el-row :gutter="20">
|
<!-- 用户列表 -->
|
<el-col :lg="24" :xs="24">
|
<el-card shadow="never">
|
<div class="flex-x-between mb-10px">
|
<div>
|
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
|
<el-button
|
v-hasPerm="['sys:user:upload']"
|
type="success"
|
icon="plus"
|
@click="handleOpenDialog()"
|
>
|
新增
|
</el-button>
|
</div>
|
</div>
|
<el-table v-loading="loading" :data="pageData" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="50" align="center" />
|
<el-table-column label="用户名" width="100" prop="name" align="center" />
|
<el-table-column label="性别" width="100" align="center">
|
<template #default="scope">
|
<el-tag :type="scope.row.sex === 1 ? 'success' : 'primary'">
|
{{ scope.row.sex === 1 ? "男" : "女" }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="角色" width="100" align="center">
|
<template #default="scope">
|
<el-tag :type="scope.row.roleId === 1 ? 'success' : 'primary'">
|
{{ scope.row.roleId === 1 ? "客户" : "后台管理" }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="手机号码" align="center" prop="phoneNumber" />
|
<el-table-column label="邮箱" align="center" prop="email" />
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180" />
|
<el-table-column label="操作" align="center" fixed="right" width="220">
|
<template #default="{ row }">
|
<el-button
|
v-hasPerm="'sys:user:edit'"
|
type="primary"
|
icon="edit"
|
link
|
size="small"
|
@click="handleOpenEditDialog(row)"
|
>
|
编辑
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-if="total > 0"
|
v-model:total="total"
|
v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize"
|
@pagination="handleQuery"
|
/>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<!-- 用户表单 -->
|
<el-drawer
|
v-model="dialog.visible"
|
:title="dialog.title"
|
append-to-body
|
@close="handleCloseDialog"
|
>
|
<el-form ref="userFormRef" :model="formData" :rules="rules" label-width="80px">
|
<el-form-item label="用户名" prop="username">
|
<el-input
|
v-model="formData.username"
|
:readonly="!!formData.id"
|
placeholder="请输入用户名"
|
/>
|
</el-form-item>
|
|
<el-form-item label="用户昵称" prop="nickname">
|
<el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
|
</el-form-item>
|
|
<el-form-item label="所属部门" prop="deptId">
|
<el-tree-select
|
v-model="formData.deptId"
|
placeholder="请选择所属部门"
|
:data="deptOptions"
|
filterable
|
check-strictly
|
:render-after-expand="false"
|
/>
|
</el-form-item>
|
|
<el-form-item label="性别" prop="gender">
|
<Dict v-model="formData.gender" code="gender" />
|
</el-form-item>
|
|
<el-form-item label="角色" prop="roleIds">
|
<el-select v-model="formData.roleIds" multiple placeholder="请选择">
|
<el-option
|
v-for="item in roleOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="手机号码" prop="mobile">
|
<el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
|
</el-form-item>
|
|
<el-form-item label="邮箱" prop="email">
|
<el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
|
</el-form-item>
|
|
<el-form-item label="状态" prop="status">
|
<el-switch
|
v-model="formData.status"
|
inline-prompt
|
active-text="正常"
|
inactive-text="禁用"
|
:active-value="1"
|
:inactive-value="0"
|
/>
|
</el-form-item>
|
</el-form>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
<el-button @click="handleCloseDialog">取 消</el-button>
|
</div>
|
</template>
|
</el-drawer>
|
|
<el-dialog v-model="addDialog" draggable title="添加用户信息" align-center width="auto">
|
<add-user v-if="addDialog" v-model:close="addDialog" @success="handleQuery"></add-user>
|
</el-dialog>
|
<el-dialog v-model="editDialog" draggable title="编辑用户信息" align-center width="auto">
|
<edit-user
|
v-if="editDialog"
|
v-model:close="editDialog"
|
:data="rowRef"
|
@success="handleQuery"
|
></edit-user>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import UserAPI, { UserForm, UserPageQuery } from "@/api/system/user.api";
|
import UserApi, { UserInfo } from "@/api/user";
|
import AddUser from "@/views/system/user/components/addUser.vue";
|
import EditUser from "@/views/system/user/components/editUser.vue";
|
|
defineOptions({
|
name: "User",
|
inheritAttrs: false,
|
});
|
const queryFormRef = ref();
|
const userFormRef = ref();
|
|
const queryParams = reactive<UserPageQuery>({
|
pageNum: 1,
|
pageSize: 20,
|
});
|
|
const pageData = ref<UserInfo[]>();
|
const total = ref(0);
|
const loading = ref(false);
|
|
const dialog = reactive({
|
visible: false,
|
title: "新增用户",
|
});
|
|
const formData = reactive<UserForm>({
|
status: 1,
|
});
|
|
const rules = reactive({
|
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
|
deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
|
roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
|
email: [
|
{
|
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
|
message: "请输入正确的邮箱地址",
|
trigger: "blur",
|
},
|
],
|
mobile: [
|
{
|
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
message: "请输入正确的手机号码",
|
trigger: "blur",
|
},
|
],
|
});
|
|
// 选中的用户ID
|
const selectIds = ref<number[]>([]);
|
// 部门下拉数据源
|
const deptOptions = ref<OptionType[]>();
|
// 角色下拉数据源
|
const roleOptions = ref<OptionType[]>();
|
|
// 查询
|
function handleQuery() {
|
loading.value = true;
|
UserApi.search(queryParams.pageNum, queryParams.pageSize)
|
.then((result) => {
|
const { data } = result;
|
if (data.code == 1) {
|
const rs = data.data;
|
pageData.value = rs.list;
|
total.value = rs.total;
|
} else {
|
total.value = 0;
|
queryParams.pageNum = 0;
|
queryParams.pageSize = 20;
|
}
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
}
|
|
// 重置查询
|
function handleResetQuery() {
|
queryFormRef.value.resetFields();
|
queryParams.pageNum = 1;
|
queryParams.deptId = undefined;
|
queryParams.createTime = undefined;
|
handleQuery();
|
}
|
|
// 选中项发生变化
|
function handleSelectionChange(selection: any[]) {
|
selectIds.value = selection.map((item) => item.id);
|
}
|
|
|
|
// 关闭弹窗
|
function handleCloseDialog() {
|
dialog.visible = false;
|
userFormRef.value.resetFields();
|
userFormRef.value.clearValidate();
|
|
formData.id = undefined;
|
formData.status = 1;
|
}
|
|
// 提交用户表单（防抖）
|
const handleSubmit = useDebounceFn(() => {
|
userFormRef.value.validate((valid: boolean) => {
|
if (valid) {
|
const userId = formData.id;
|
loading.value = true;
|
if (userId) {
|
UserAPI.update(userId, formData)
|
.then(() => {
|
ElMessage.success("修改用户成功");
|
handleCloseDialog();
|
handleResetQuery();
|
})
|
.finally(() => (loading.value = false));
|
} else {
|
UserAPI.create(formData)
|
.then(() => {
|
ElMessage.success("新增用户成功");
|
handleCloseDialog();
|
handleResetQuery();
|
})
|
.finally(() => (loading.value = false));
|
}
|
}
|
});
|
}, 1000);
|
|
const addDialog = ref(false);
|
function handleOpenDialog() {
|
addDialog.value = true;
|
}
|
|
const editDialog = ref(false);
|
const rowRef = ref<UserInfo>();
|
function handleOpenEditDialog(data: UserInfo) {
|
rowRef.value = data;
|
editDialog.value = true;
|
}
|
onMounted(() => {
|
handleQuery();
|
});
|
</script>
|
