mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-23 13:43:51 +08:00
✨ Introducing new features. 完成用户管理的增删改查
This commit is contained in:
aeizzz
parent
69c1c847ab
commit
066f5a54e9
9
src/api/admin/dept.ts
Normal file
9
src/api/admin/dept.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import request from "/@/utils/request";
|
||||
|
||||
export const depttree = (params?: Object) => {
|
||||
return request({
|
||||
url: '/admin/dept/tree',
|
||||
method: "get",
|
||||
params
|
||||
})
|
||||
}
|
||||
40
src/api/admin/menu.ts
Normal file
40
src/api/admin/menu.ts
Normal file
@ -0,0 +1,40 @@
|
||||
import request from "/@/utils/request";
|
||||
|
||||
export const pageList = (params?: Object) => {
|
||||
return request({
|
||||
url: '/admin/menu/tree',
|
||||
method: "get",
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export const info = (id: String) => {
|
||||
return request({
|
||||
url: `/admin/menu/${id}`,
|
||||
method: "get",
|
||||
})
|
||||
}
|
||||
|
||||
export const save = (data: Object) => {
|
||||
return request({
|
||||
url: '/admin/menu',
|
||||
method: "post",
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export const update = (data: Object) => {
|
||||
return request({
|
||||
url: '/admin/menu',
|
||||
method: "put",
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export const addObj = (data: Object) => {
|
||||
return request({
|
||||
url: '/admin/menu',
|
||||
method: "post",
|
||||
data: data
|
||||
})
|
||||
}
|
||||
10
src/api/admin/post.ts
Normal file
10
src/api/admin/post.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import request from "/@/utils/request";
|
||||
|
||||
|
||||
export const list = (params?: Object) => {
|
||||
return request({
|
||||
url: '/admin/post/list',
|
||||
method: "get",
|
||||
params
|
||||
})
|
||||
}
|
||||
10
src/api/admin/role.ts
Normal file
10
src/api/admin/role.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import request from "/@/utils/request";
|
||||
|
||||
|
||||
export const list = (params?: Object) => {
|
||||
return request({
|
||||
url: '/admin/role/list',
|
||||
method: "get",
|
||||
params
|
||||
})
|
||||
}
|
||||
39
src/api/admin/user.ts
Normal file
39
src/api/admin/user.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import request from "/@/utils/request";
|
||||
|
||||
export const pageList = (params?: Object) => {
|
||||
return request({
|
||||
url: '/admin/user/page',
|
||||
method: "get",
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export const addObj = (obj: Object) => {
|
||||
return request({
|
||||
url: '/admin/user',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export const getObj = (id: String) => {
|
||||
return request({
|
||||
url: '/admin/user/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export const delObj = (id: String) => {
|
||||
return request({
|
||||
url: '/admin/user/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export const putObj = (obj: Object) => {
|
||||
return request({
|
||||
url: '/admin/user',
|
||||
method: 'put',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
@ -29,33 +29,4 @@ export function useMenuApi() {
|
||||
};
|
||||
}
|
||||
|
||||
export const pageList = (params?: Object) => {
|
||||
return request({
|
||||
url: '/admin/menu/tree',
|
||||
method: "get",
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export const info = (id: String) => {
|
||||
return request({
|
||||
url: `/admin/menu/${id}`,
|
||||
method: "get",
|
||||
})
|
||||
}
|
||||
|
||||
export const save = (data: Object) => {
|
||||
return request({
|
||||
url: '/admin/menu',
|
||||
method: "post",
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export const update = (data: Object) => {
|
||||
return request({
|
||||
url: '/admin/menu',
|
||||
method: "put",
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<el-row :gutter="35">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="菜单类型">
|
||||
<el-radio-group v-model="state.ruleForm.menuType">
|
||||
<el-radio-group v-model="state.ruleForm.menType">
|
||||
<el-radio-button label="0">左菜单</el-radio-button>
|
||||
<el-radio-button label="1">按钮</el-radio-button>
|
||||
<el-radio-button label="2">顶菜单</el-radio-button>
|
||||
@ -66,10 +66,8 @@
|
||||
|
||||
<script setup lang="ts" name="systemMenuDialog">
|
||||
import {defineAsyncComponent, nextTick, onMounted, reactive, ref} from 'vue';
|
||||
import {storeToRefs} from 'pinia';
|
||||
import {useRoutesList} from '/@/stores/routesList';
|
||||
import {i18n} from '/@/i18n/index';
|
||||
import {info, pageList, update} from "/@/api/menu";
|
||||
import {info, pageList, update, addObj} from "/@/api/admin/menu";
|
||||
import type {menuData} from './menu'
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
@ -80,11 +78,8 @@ const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelect
|
||||
|
||||
// 定义变量内容
|
||||
const menuDialogFormRef = ref();
|
||||
const stores = useRoutesList();
|
||||
const { routesList } = storeToRefs(stores);
|
||||
// 定义需要的数据
|
||||
const state = reactive({
|
||||
// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
|
||||
ruleForm: {
|
||||
menuId: '',
|
||||
name: '',
|
||||
@ -106,7 +101,7 @@ const state = reactive({
|
||||
},
|
||||
});
|
||||
|
||||
// 从后端获取路由信息
|
||||
// 从后端获取菜单信息
|
||||
const getMenuData = async () => {
|
||||
pageList().then(res => {
|
||||
let menu: menuData;
|
||||
@ -135,7 +130,6 @@ const openDialog = (type: string, row?: any) => {
|
||||
if (type === 'edit') {
|
||||
// 模拟数据，实际请走接口
|
||||
info(row.id).then(res => {
|
||||
console.log(res.data, 'res.data')
|
||||
state.ruleForm = (res.data as menuData)
|
||||
})
|
||||
state.dialog.title = '修改菜单';
|
||||
@ -150,6 +144,7 @@ const openDialog = (type: string, row?: any) => {
|
||||
}
|
||||
state.dialog.type = type;
|
||||
state.dialog.isShowDialog = true;
|
||||
getMenuData();
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
@ -168,13 +163,15 @@ const onSubmit = () => {
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
})
|
||||
}else{
|
||||
addObj(state.ruleForm).then(() => {
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
})
|
||||
}
|
||||
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getMenuData();
|
||||
});
|
||||
|
||||
// 暴露变量 只有暴漏出来的变量 父组件才能使用
|
||||
defineExpose({
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
import { defineAsyncComponent, ref, onMounted, reactive } from 'vue';
|
||||
import { RouteRecordRaw } from 'vue-router';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import { pageList } from '/@/api/menu'
|
||||
import { pageList } from '/@/api/admin/menu'
|
||||
import type { menuData } from './menu'
|
||||
// 引入组件
|
||||
const MenuDialog = defineAsyncComponent(() => import('/@/views/system/menu/dialog.vue'));
|
||||
|
||||
@ -1,79 +1,83 @@
|
||||
<template>
|
||||
<div class="system-user-dialog-container">
|
||||
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
|
||||
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="60%">
|
||||
<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="账户名称">
|
||||
<el-input v-model="state.ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="state.ruleForm.username" placeholder="请输入用户名" :disabled="state.dialog.type === 'edit'"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="用户昵称">
|
||||
<el-input v-model="state.ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="密码">
|
||||
<el-input v-model="state.ruleForm.password" type="password" placeholder="请输入密码" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="关联角色">
|
||||
<el-select v-model="state.ruleForm.roleSign" placeholder="请选择" clearable class="w100">
|
||||
<el-option label="超级管理员" value="admin"></el-option>
|
||||
<el-option label="普通用户" value="common"></el-option>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="state.ruleForm.name" placeholder="请输入姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="手机号">
|
||||
<el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="角色">
|
||||
<el-select v-model="state.role" placeholder="请选择" clearable class="w100" multiple>
|
||||
<el-option
|
||||
v-for="item in state.roleData"
|
||||
:key="item.roleId"
|
||||
:label="item.roleName"
|
||||
:value="item.roleId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="岗位">
|
||||
<el-select v-model="state.post" placeholder="请选择" clearable class="w100" multiple>
|
||||
<el-option
|
||||
v-for="item in state.postData"
|
||||
:key="item.postId"
|
||||
:label="item.postName"
|
||||
:value="item.postId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="部门">
|
||||
<el-cascader
|
||||
:options="state.deptData"
|
||||
:props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
|
||||
placeholder="请选择部门"
|
||||
clearable
|
||||
class="w100"
|
||||
v-model="state.ruleForm.department"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.deptName }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
<el-tree-select
|
||||
v-model="state.ruleForm.deptId"
|
||||
:data="state.deptData"
|
||||
:props="{ value: 'id', label: 'name', children: 'children' }"
|
||||
class="w100"
|
||||
clearable
|
||||
check-strictly
|
||||
placeholder="请选择所属部门"
|
||||
>
|
||||
</el-tree-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="手机号">
|
||||
<el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="state.ruleForm.email" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="state.ruleForm.sex" placeholder="请选择" clearable class="w100">
|
||||
<el-option label="男" value="男"></el-option>
|
||||
<el-option label="女" value="女"></el-option>
|
||||
</el-select>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="昵称">
|
||||
<el-input v-model="state.ruleForm.nickname" placeholder="请输入昵称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="账户密码">
|
||||
<el-input v-model="state.ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="账户过期">
|
||||
<el-date-picker v-model="state.ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="用户状态">
|
||||
<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="用户描述">
|
||||
<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="状态">
|
||||
<el-radio-group v-model="state.ruleForm.lockFlag">
|
||||
<el-radio label="0" border>有效</el-radio>
|
||||
<el-radio label="9" border>禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -89,8 +93,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemUserDialog">
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
import {nextTick, reactive, ref, watchEffect} from 'vue';
|
||||
import { getObj,addObj, putObj } from '/@/api/admin/user'
|
||||
import { list as roleList } from '/@/api/admin/role'
|
||||
import { list as postList } from '/@/api/admin/post'
|
||||
import { depttree } from '/@/api/admin/dept'
|
||||
import { ElMessage } from 'element-plus';
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
@ -98,19 +106,28 @@ const emit = defineEmits(['refresh']);
|
||||
const userDialogFormRef = ref();
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
userName: '', // 账户名称
|
||||
userNickname: '', // 用户昵称
|
||||
roleSign: '', // 关联角色
|
||||
department: [] as string[], // 部门
|
||||
phone: '', // 手机号
|
||||
email: '', // 邮箱
|
||||
sex: '', // 性别
|
||||
password: '', // 账户密码
|
||||
overdueTime: '', // 账户过期
|
||||
status: true, // 用户状态
|
||||
describe: '', // 用户描述
|
||||
userId: '',
|
||||
username: '',
|
||||
password: '' as String | undefined,
|
||||
salt: '',
|
||||
wxOpenid: '',
|
||||
qqOpenid: '',
|
||||
lockFlag: '',
|
||||
phone: '' as String | undefined,
|
||||
deptId: '',
|
||||
roleList: [],
|
||||
postList: [],
|
||||
nickname: '',
|
||||
name: '',
|
||||
email: '',
|
||||
post: [] as String[],
|
||||
role: [] as String[],
|
||||
},
|
||||
deptData: [] as DeptTreeType[], // 部门数据
|
||||
post: [] as String[],
|
||||
role: [] as String[],
|
||||
deptData: [], // 部门数据
|
||||
postData: [], //岗位数据
|
||||
roleData: [], //角色数据
|
||||
dialog: {
|
||||
isShowDialog: false,
|
||||
type: '',
|
||||
@ -120,21 +137,36 @@ const state = reactive({
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (type: string, row: RowUserType) => {
|
||||
const openDialog = (type: string, row: any) => {
|
||||
if (type === 'edit') {
|
||||
state.ruleForm = row;
|
||||
state.dialog.title = '修改用户';
|
||||
state.dialog.submitTxt = '修 改';
|
||||
|
||||
state.ruleForm = Object.assign(state.ruleForm,row)
|
||||
row.roleList.map((item: any) => {
|
||||
state.role.push(item.roleId)
|
||||
})
|
||||
row.postList.map((item: any) => {
|
||||
state.post.push(item.postId)
|
||||
})
|
||||
state.ruleForm.password = "******"
|
||||
} else {
|
||||
state.dialog.title = '新增用户';
|
||||
state.dialog.submitTxt = '新 增';
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
// nextTick(() => {
|
||||
// userDialogFormRef.value.resetFields();
|
||||
// });
|
||||
nextTick(() => {
|
||||
userDialogFormRef.value.resetFields();
|
||||
state.ruleForm = Object.assign({})
|
||||
state.role = []
|
||||
state.post = []
|
||||
});
|
||||
}
|
||||
state.dialog.type = type;
|
||||
state.dialog.isShowDialog = true;
|
||||
getMenuData();
|
||||
// 加载使用的数据
|
||||
getDeptData();
|
||||
getPostData();
|
||||
getRoleData();
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
@ -148,37 +180,57 @@ const onCancel = () => {
|
||||
const onSubmit = () => {
|
||||
closeDialog();
|
||||
emit('refresh');
|
||||
// if (state.dialog.type === 'add') { }
|
||||
if (state.dialog.type === 'edit') {
|
||||
// 处理数据
|
||||
if (state.ruleForm.phone && state.ruleForm.phone.indexOf("*") >= 0) {
|
||||
state.ruleForm.phone = undefined;
|
||||
}
|
||||
if (state.ruleForm.password && state.ruleForm.password.indexOf("******") >= 0) {
|
||||
state.ruleForm.password = undefined;
|
||||
}
|
||||
putObj(state.ruleForm).then(() => {
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
ElMessage.error(err.msg)
|
||||
})
|
||||
}else{
|
||||
if (state.ruleForm.phone && state.ruleForm.phone.indexOf("*") > 0) {
|
||||
state.ruleForm.phone = undefined;
|
||||
}
|
||||
addObj(state.ruleForm).then(() => {
|
||||
ElMessage.success("保存成功")
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
ElMessage.error(err.msg)
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
state.ruleForm.post = state.post;
|
||||
state.ruleForm.role = state.role
|
||||
})
|
||||
// 初始化部门数据
|
||||
const getMenuData = () => {
|
||||
state.deptData.push({
|
||||
deptName: 'vueNextAdmin',
|
||||
createTime: new Date().toLocaleString(),
|
||||
status: true,
|
||||
sort: Math.random(),
|
||||
describe: '顶级部门',
|
||||
id: Math.random(),
|
||||
children: [
|
||||
{
|
||||
deptName: 'IT外包服务',
|
||||
createTime: new Date().toLocaleString(),
|
||||
status: true,
|
||||
sort: Math.random(),
|
||||
describe: '总部',
|
||||
id: Math.random(),
|
||||
},
|
||||
{
|
||||
deptName: '资本控股',
|
||||
createTime: new Date().toLocaleString(),
|
||||
status: true,
|
||||
sort: Math.random(),
|
||||
describe: '分部',
|
||||
id: Math.random(),
|
||||
},
|
||||
],
|
||||
});
|
||||
const getDeptData = () => {
|
||||
// 获取部门数据
|
||||
depttree().then(res => {
|
||||
state.deptData = res.data
|
||||
})
|
||||
};
|
||||
// 岗位数据
|
||||
const getPostData =() => {
|
||||
postList().then(res => {
|
||||
state.postData = res.data
|
||||
})
|
||||
}
|
||||
// 角色数据
|
||||
const getRoleData =() => {
|
||||
roleList().then(res => {
|
||||
state.roleData = res.data
|
||||
})
|
||||
}
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
|
||||
@ -1,60 +1,98 @@
|
||||
<template>
|
||||
<div class="system-user-container layout-padding">
|
||||
<el-card shadow="hover" class="layout-padding-auto">
|
||||
<div class="system-user-search mb15">
|
||||
<el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
|
||||
<el-button size="default" type="primary" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddUser('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增用户
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="roleSign" label="关联角色" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="department" label="部门" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="status" label="用户状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="describe" label="用户描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser('edit', scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4" :xs="24">
|
||||
<el-card shadow="hover" class="layout-padding-auto">
|
||||
<div class="head-container">
|
||||
<el-input
|
||||
v-model="deptData.search.deptName"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
prefix-icon="Search"
|
||||
style="margin-bottom: 20px"
|
||||
@change="getDeptTree"
|
||||
/>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-tree
|
||||
:data="deptData.deptList"
|
||||
:props="{ label: 'name', children: 'children',value: 'id' }"
|
||||
:expand-on-click-node="false"
|
||||
ref="deptTreeRef"
|
||||
:loading="deptData.loading"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="20" :xs="24">
|
||||
<el-card shadow="hover" class="layout-padding-auto">
|
||||
<div class="system-user-search mb15">
|
||||
<el-input size="default" placeholder="请输入用户名称" style="max-width: 180px" v-model="state.search.username"> </el-input>
|
||||
<el-button size="default" type="primary" class="ml10" @click="getTableData">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddUser('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增用户
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column prop="username" label="用户名" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="岗位" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag v-for="(item,index) in scope.row.postList" type="success">{{item.postName}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="角色" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag v-for="(item,index) in scope.row.roleList" type="success">{{item.roleName}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.lockFlag === '0'" type="success">有效</el-tag>
|
||||
<el-tag v-if="scope.row.lockFlag === '9'" type="success">锁定</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser('edit', scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<UserDialog ref="userDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
@ -62,13 +100,15 @@
|
||||
<script setup lang="ts" name="systemUser">
|
||||
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import { pageList, delObj } from '/@/api/admin/user'
|
||||
import { depttree } from '/@/api/admin/dept'
|
||||
|
||||
// 引入组件
|
||||
const UserDialog = defineAsyncComponent(() => import('/@/views/system/user/dialog.vue'));
|
||||
|
||||
// 定义变量内容
|
||||
const userDialogRef = ref();
|
||||
const state = reactive<SysUserState>({
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
@ -78,54 +118,81 @@ const state = reactive<SysUserState>({
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
search: {
|
||||
deptId: '',
|
||||
username: ''
|
||||
}
|
||||
});
|
||||
|
||||
const search = reactive({
|
||||
deptName: ''
|
||||
})
|
||||
const deptData = reactive({
|
||||
deptList: [],
|
||||
search: {
|
||||
deptName: ''
|
||||
},
|
||||
loading: false
|
||||
})
|
||||
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 2; i++) {
|
||||
data.push({
|
||||
userName: i === 0 ? 'admin' : 'test',
|
||||
userNickname: i === 0 ? '我是管理员' : '我是普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'],
|
||||
phone: '12345678910',
|
||||
email: 'vueNextAdmin@123.com',
|
||||
sex: '女',
|
||||
password: '123456',
|
||||
overdueTime: new Date(),
|
||||
status: true,
|
||||
describe: i === 0 ? '不可删除' : '测试用户',
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
pageList(state.search).then(res => {
|
||||
state.tableData.data = res.data.records;
|
||||
state.tableData.total = res.data.total;
|
||||
state.tableData.loading = false;
|
||||
}).catch(err => {
|
||||
ElMessage.error(err.msg)
|
||||
state.tableData.loading = false;
|
||||
})
|
||||
};
|
||||
|
||||
// 获取部门数据
|
||||
|
||||
const getDeptTree = () => {
|
||||
deptData.loading = true
|
||||
depttree(deptData.search).then(res => {
|
||||
deptData.deptList = res.data
|
||||
}).catch(err => {
|
||||
ElMessage.error(err.msg)
|
||||
}).finally(() => {
|
||||
deptData.loading = false
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// 点击数
|
||||
const handleNodeClick = (e: any) => {
|
||||
state.search.deptId = e.id
|
||||
getTableData()
|
||||
}
|
||||
|
||||
|
||||
// 打开新增用户弹窗
|
||||
const onOpenAddUser = (type: string) => {
|
||||
userDialogRef.value.openDialog(type);
|
||||
};
|
||||
// 打开修改用户弹窗
|
||||
const onOpenEditUser = (type: string, row: RowUserType) => {
|
||||
const onOpenEditUser = (type: string, row: any) => {
|
||||
userDialogRef.value.openDialog(type, row);
|
||||
};
|
||||
// 删除用户
|
||||
const onRowDel = (row: RowUserType) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
|
||||
const onRowDel = (row: any) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.username}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
// 删除用户的接口
|
||||
delObj(row.userId).then(res => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
}).catch(err => {
|
||||
ElMessage.error(err.msg)
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
@ -140,6 +207,7 @@ const onHandleCurrentChange = (val: number) => {
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
getDeptTree();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user