hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

角色和用户的管理更改

Browse Source
This commit is contained in:
夕阳微笑1 2025-01-06 12:21:01 +08:00
parent b979b3315a
commit 39fcb48ee1
9 changed files with 387 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/role/index.ts
View File

@ -8,7 +8,7 @@ import { baseUrlHost } from '../baseUrlHost';
* 登录api接口集合 * 登录api接口集合
* @method getRoleList 获取分页角色列表 * @method getRoleList 获取分页角色列表
* @method deleteRole 删除角色 * @method deleteRole 删除角色
* @method saveRole 保存角色 * @method addRole 保存角色
* @method updateRole 更新角色 * @method updateRole 更新角色
* @method getroleListAll 获取全部角色 * @method getroleListAll 获取全部角色
* @method getRoleDetail 查询单个角色 * @method getRoleDetail 查询单个角色
@ -51,7 +51,7 @@ export function roleApi() {
}, },
getroleListAll: () => { getroleListAll: () => {
return request({ return request({
url: baseUrlHost + `/acGroup/`, url: baseUrlHost + `/acGroup/all`,
method: 'get', method: 'get',
}); });
}, },

59
src/api/user/index.ts Normal file
View File

@ -0,0 +1,59 @@
import request from '/@/utils/request';
import { baseUrlHost } from '../baseUrlHost';
/**
* （不建议写成 request.post(xxx)，因为这样 post 时，无法 params 与 data 同时传参）
* 注意在写get请求时，参数是params，而不是data，要标注好
*
* 登录api接口集合
* @method getUserList 获取分页用户列表
* @method deleteUser 删除用户
* @method addUser 保存用户
* @method updateUser 更新用户
* @method getuserListAll 获取全部用户
* @method getUserDetail 查询单个用户
*/
export function userApi() {
return {
getUserList: (params:object) => {
return request({
url: baseUrlHost + '/acUser',
method: 'get',
params,
});
},
addUser:(data:object) => {
return request({
url:baseUrlHost + '/acUser',
method:'post',
data,
})
},
updateUser: (data: object) => {
return request({
url: baseUrlHost + '/acUser',
method: 'put',
data,
})
},
getUserDetail: (id: Number) => {
return request({
url: baseUrlHost + `/acUser/${id}`,
method: 'get',
});
},
deleteUser: (id: Number) => {
return request({
url: baseUrlHost + `/acUser/${id}`,
method: 'delete',
});
},
getuserListAll: () => {
return request({
url: baseUrlHost + `/acUser/all`,
method: 'get',
});
},
};
}

3
src/layout/component/aside.vue
View File

@ -100,7 +100,8 @@ let Menulist = ref([]);
// const defaultOpeneds =reactive([]) // const defaultOpeneds =reactive([])
const getmenulist = async() =>{ const getmenulist = async() =>{
try{ try{
const res = await useMenuapi.getAdminMenu(1); const id = localStorage.getItem('acgroup')
const res = await useMenuapi.getAdminMenu(id);
// console.log('菜单数据',res); // console.log('菜单数据',res);
Menulist.value = res.data; Menulist.value = res.data;
isDataReady.value = true isDataReady.value = true

8
src/layout/navMenu/vertical.vue
View File

@ -155,3 +155,11 @@ watch(
); );
</script> </script>
<style lang="scss" scoped>
::v-deep .el-menu-item-group__title{
padding :0px 0px 0px ;
}
</style>

66
src/router/route.ts
View File

@ -58,7 +58,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: true, isAffix: true,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'iconfont icon-shouye', icon: 'iconfont icon-shouye',
}, },
}, },
@ -73,7 +73,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: true, isAffix: true,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'iconfont icon-shouye', icon: 'iconfont icon-shouye',
}, },
}, },
@ -89,7 +89,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin'], roles: ['admin', 'user'],
icon: 'iconfont icon-gerenzhongxin', icon: 'iconfont icon-gerenzhongxin',
}, },
children: [ children: [
@ -104,7 +104,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin'], roles: ['admin', 'user'],
icon: 'ele-ColdDrink', icon: 'ele-ColdDrink',
}, },
}, },
@ -119,7 +119,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin'], roles: ['admin', 'user'],
icon: 'iconfont icon-icon-', icon: 'iconfont icon-icon-',
}, },
}, },
@ -137,7 +137,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin'], roles: ['admin', 'user'],
icon: 'iconfont icon-xitongshezhi', icon: 'iconfont icon-xitongshezhi',
}, },
children: [ children: [
@ -152,7 +152,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin'], roles: ['admin', 'user'],
icon: 'iconfont icon-caidan', icon: 'iconfont icon-caidan',
}, },
}, },
@ -167,7 +167,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin'], roles: ['admin', 'user'],
icon: 'ele-OfficeBuilding', icon: 'ele-OfficeBuilding',
}, },
}, },
@ -182,7 +182,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin'], roles: ['admin', 'user'],
icon: 'ele-SetUp', icon: 'ele-SetUp',
}, },
}, },
@ -200,7 +200,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'iconfont icon-jiliandongxuanzeqi', icon: 'iconfont icon-jiliandongxuanzeqi',
}, },
children: [ children: [
@ -215,7 +215,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: false, isKeepAlive: false,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'ele-Document', icon: 'ele-Document',
}, },
}, },
@ -230,7 +230,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: false, isKeepAlive: false,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'ele-Document', icon: 'ele-Document',
}, },
}, },
@ -245,7 +245,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: false, isKeepAlive: false,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'ele-Document', icon: 'ele-Document',
}, },
} }
@ -270,7 +270,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin'], roles: ['admin', 'user'],
icon: 'iconfont icon-crew_feature', icon: 'iconfont icon-crew_feature',
}, },
}, },
@ -286,7 +286,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin'], roles: ['admin', 'user'],
icon: 'ele-Upload', icon: 'ele-Upload',
}, },
}, },
@ -307,7 +307,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'ele-DocumentCopy', icon: 'ele-DocumentCopy',
}, },
}, },
@ -323,7 +323,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'ele-Picture', icon: 'ele-Picture',
}, },
}, },
@ -339,7 +339,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'ele-User', icon: 'ele-User',
}, },
}, },
@ -354,7 +354,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'iconfont icon-fuwenbenkuang', icon: 'iconfont icon-fuwenbenkuang',
}, },
}, },
@ -369,7 +369,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'iconfont icon-biaodan', icon: 'iconfont icon-biaodan',
}, },
}, },
@ -384,7 +384,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'ele-CollectionTag', icon: 'ele-CollectionTag',
}, },
// children: [ // children: [
@ -432,7 +432,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'iconfont icon-shuju', icon: 'iconfont icon-shuju',
}, },
}, },
@ -447,7 +447,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'iconfont icon-ico_shuju', icon: 'iconfont icon-ico_shuju',
}, },
}, },
@ -462,7 +462,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'iconfont icon-jiliandongxuanzeqi', icon: 'iconfont icon-jiliandongxuanzeqi',
}, },
children: [ children: [
@ -477,7 +477,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: false, isKeepAlive: false,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'ele-Document', icon: 'ele-Document',
}, },
}, },
@ -492,7 +492,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: false, isKeepAlive: false,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'ele-Document', icon: 'ele-Document',
}, },
}, },
@ -507,7 +507,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: false, isKeepAlive: false,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'ele-Document', icon: 'ele-Document',
}, },
} }
@ -524,7 +524,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'iconfont icon-jiliandongxuanzeqi', icon: 'iconfont icon-jiliandongxuanzeqi',
}, },
children: [ children: [
@ -539,7 +539,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: false, isKeepAlive: false,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'ele-Document', icon: 'ele-Document',
}, },
}, },
@ -554,7 +554,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: false, isKeepAlive: false,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'ele-Document', icon: 'ele-Document',
}, },
}, },
@ -569,7 +569,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: false, isKeepAlive: false,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'ele-Document', icon: 'ele-Document',
}, },
} }
@ -586,7 +586,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'iconfont icon-jiliandongxuanzeqi', icon: 'iconfont icon-jiliandongxuanzeqi',
}, },
children: [ children: [
@ -601,7 +601,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
isKeepAlive: false, isKeepAlive: false,
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'common'], roles: ['admin', 'user'],
icon: 'ele-Document', icon: 'ele-Document',
}, },
}, },

24
src/views/usermanage/role/dialog.vue
View File

@ -195,6 +195,8 @@ const onSubmit = async() => {
// emit('reset'); // emit('reset');
roleDialogFormRef.value?.validate( async (valid: boolean) => { roleDialogFormRef.value?.validate( async (valid: boolean) => {
if(valid){ if(valid){
console.log(11111111111);
state.ruleForm.show = state.ruleForm.show ? 1 : 0; state.ruleForm.show = state.ruleForm.show ? 1 : 0;
state.ruleForm.grouptypeid = 1; state.ruleForm.grouptypeid = 1;
if (state.dialog.type === 'add') { if (state.dialog.type === 'add') {
@ -251,28 +253,6 @@ const onSubmit = async() => {
} }
} }
}) })
// if (state.dialog.type === 'add') {
// roleDialogFormRef.value?.validate((valid: boolean) => {
// if (valid) {
// closeDialog();
// emit('reset');
// } else {
// ElMessage.error('请填写完整的表单信息');
// return false;
// }
// });
// }
// else{
// roleDialogFormRef.value?.validate((valid:boolean) => {
// if (valid) {
// closeDialog();
// emit('reset');
// } else {
// ElMessage.error('请修改完整的表单信息');
// return false;
// }
// })
// }
}; };
// 暴露变量 // 暴露变量

5
src/views/usermanage/role/index.vue
View File

@ -17,7 +17,7 @@
</el-button> </el-button>
</div> </div>
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> <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 type="index" label="序号" width="100" />
<el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column> <el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="acgroup" label="角色标识" show-overflow-tooltip></el-table-column> <el-table-column prop="acgroup" label="角色标识" show-overflow-tooltip></el-table-column>
<el-table-column prop="show" label="角色状态" show-overflow-tooltip> <el-table-column prop="show" label="角色状态" show-overflow-tooltip>
@ -70,7 +70,7 @@ const roletypeapi = roletypeApi();
// 定义变量内容 // 定义变量内容
const roleDialogRef = ref(); const roleDialogRef = ref();
const state = reactive<SysRoleState>({ const state = reactive({
tableData: { tableData: {
data: [], data: [],
total: 0, total: 0,
@ -169,6 +169,7 @@ const reset = (index = 0) =>{
// moduleid:moduleList.value // moduleid:moduleList.value
pageNum: index ? state.tableData.param.pageNum : 1, pageNum: index ? state.tableData.param.pageNum : 1,
pageSize: 10, pageSize: 10,
name:''
}, },
console.log(index,state.tableData.param); console.log(index,state.tableData.param);
getTableData(); getTableData();

240
src/views/usermanage/user/dialog.vue
View File

@ -1,27 +1,28 @@
<template> <template>
<div class="system-user-dialog-container"> <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="769px">
<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px"> <el-form ref="userDialogFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="90px">
<el-row :gutter="35"> <el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="账户名称"> <el-form-item label="账户名称" prop="username">
<el-input v-model="state.ruleForm.userName" placeholder="请输入账户名称" clearable></el-input> <el-input v-model="state.ruleForm.username" placeholder="请输入账户名称" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="用户昵称"> <el-form-item label="用户昵称">
<el-input v-model="state.ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input> <el-input v-model="state.ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col> -->
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="关联角色"> <el-form-item label="关联角色" prop="acgroup">
<el-select v-model="state.ruleForm.roleSign" placeholder="请选择" clearable class="w100"> <el-select v-model="state.ruleForm.acgroup" placeholder="请选择" clearable class="w100">
<el-option label="超级管理员" value="admin"></el-option> <!-- <el-option label="管理员" value="admin"></el-option>
<el-option label="普通用户" value="common"></el-option> <el-option label="普通用户" value="common"></el-option> -->
<el-option :data-op="item.id" v-for="(item,index) in roleList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="部门"> <el-form-item label="部门">
<el-cascader <el-cascader
:options="state.deptData" :options="state.deptData"
@ -37,36 +38,36 @@
</template> </template>
</el-cascader> </el-cascader>
</el-form-item> </el-form-item>
</el-col> </el-col> -->
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="手机号"> <el-form-item label="手机号" prop="phone">
<el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input> <el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="邮箱"> <el-form-item label="邮箱" prop="mail">
<el-input v-model="state.ruleForm.email" placeholder="请输入" clearable></el-input> <el-input v-model="state.ruleForm.mail" placeholder="请输入" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> -->
<el-form-item label="性别"> <!-- <el-form-item label="性别">
<el-select v-model="state.ruleForm.sex" placeholder="请选择" clearable class="w100"> <el-select v-model="state.ruleForm.gender" placeholder="请选择" clearable class="w100">
<el-option label="男" value="男"></el-option> <el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option> <el-option label="女" value="女"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item> -->
</el-col> <!-- </el-col> -->
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="账户密码"> <el-form-item label="账户密码" prop="password">
<el-input v-model="state.ruleForm.password" placeholder="请输入" type="password" clearable></el-input> <el-input v-model="state.ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="账户过期"> <el-form-item label="账户过期">
<el-date-picker v-model="state.ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker> <el-date-picker v-model="state.ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col> -->
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="用户状态"> <el-form-item label="用户状态">
<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch> <el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
</el-form-item> </el-form-item>
@ -75,7 +76,7 @@
<el-form-item label="用户描述"> <el-form-item label="用户描述">
<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input> <el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col> -->
</el-row> </el-row>
</el-form> </el-form>
<template #footer> <template #footer>
@ -89,28 +90,44 @@
</template> </template>
<script setup lang="ts" name="systemUserDialog"> <script setup lang="ts" name="systemUserDialog">
import { reactive, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';
import { roleApi } from '/@/api/role';
import { ElMessage } from 'element-plus';
import { userApi } from '/@/api/user';
// 定义子组件向父组件传值/事件 // 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']); const emit = defineEmits(['reset']);
const roleapi = roleApi()
const userapi = userApi()
// 定义变量内容 // 定义变量内容
const userDialogFormRef = ref(); const userDialogFormRef = ref();
const state = reactive({ const state = reactive({
ruleForm: { ruleForm: {
userName: '', // 账户名称 username: '', // 账户名称
userNickname: '', // 用户昵称 // userNickname: '', // 用户昵称
roleSign: '', // 关联角色 acgroupName: '', // 关联角色
department: [] as string[], // 部门 // department: [] as string[], // 部门
phone: '', // 手机号 phone: '', // 手机号
email: '', // 邮箱 mail: '', // 邮箱
sex: '', // 性别 acgroup:0,
// gender: '', // 性别
password: '', // 账户密码 password: '', // 账户密码
overdueTime: '', // 账户过期 usertype:1
status: true, // 用户状态 // overdueTime: '', // 账户过期
describe: '', // 用户描述 // status: true, // 用户状态
// describe: '', // 用户描述
}, },
deptData: [] as DeptTreeType[], // 部门数据 rules:{
username:{ required: true, message: '请输入账户名称', trigger:'blur'},
acgroup:{ required: true, message: '请选择关联角色', trigger:'change'},
phone:{ required: true, message: '请输入手机号', trigger:'blur'},
mail:{ required: true, message: '请输入邮箱', trigger:'blur'},
password:{ required: true, message: '请输入账户密码', trigger:'blur'},
},
// deptData: [] as DeptTreeType[], // 部门数据
dialog: { dialog: {
isShowDialog: false, isShowDialog: false,
type: '', type: '',
@ -120,22 +137,64 @@ const state = reactive({
}); });
// 打开弹窗 // 打开弹窗
const openDialog = (type: string, row: RowUserType) => { const openDialog = (type: string, row: any) => {
if (type === 'edit') { if (type === 'edit') {
state.ruleForm = row; state.ruleForm = row;
state.dialog.type = type;
state.dialog.title = '修改用户'; state.dialog.title = '修改用户';
state.dialog.submitTxt = '修 改'; state.dialog.submitTxt = '修 改';
console.log(111111,state.ruleForm);
} else { } else {
resetForm();
state.dialog.title = '新增用户'; state.dialog.title = '新增用户';
state.dialog.submitTxt = '新 增'; state.dialog.submitTxt = '新 增';
state.dialog.type = type;
userDialogFormRef.value?.resetFields();
// 清空表单，此项需加表单验证才能使用 // 清空表单，此项需加表单验证才能使用
// nextTick(() => { // nextTick(() => {
// userDialogFormRef.value.resetFields(); // userDialogFormRef.value.resetFields();
// }); // });
} }
state.dialog.isShowDialog = true; state.dialog.isShowDialog = true;
getMenuData(); // getMenuData();
}; };
//角色列表
const roleList = ref([]);
//获取角色列表
const getroleList = async() => {
try{
let param = {
current:1,
size:10
}
const res = await roleapi.getRoleList(param);
if(res?.success){
roleList.value = res.data.records;
// console.log(roleList.value);
};
}catch(error){
console.error(error);
ElMessage.error('请求失败!')
}
}
//重置表单
const resetForm = () =>{
state.ruleForm ={
username:'',
usertype:1,
acgroupName:'',
// acgroup:,
phone:'',
mail:'',
password:''
}
};
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
state.dialog.isShowDialog = false; state.dialog.isShowDialog = false;
@ -146,42 +205,87 @@ const onCancel = () => {
}; };
// 提交 // 提交
const onSubmit = () => { const onSubmit = () => {
// closeDialog();
// emit('reset');
userDialogFormRef.value?.validate( async(valid:boolean) => {
if(valid){
if(state.dialog.type === 'add'){
// state.ruleForm.acgroup
try{
const res = await userapi.addUser(state.ruleForm);
if(res?.success){
emit('reset');
closeDialog(); closeDialog();
emit('refresh');
// if (state.dialog.type === 'add') { } ElMessage.success('用户创建成功！');
Object.assign(state.ruleForm,{
username:'',
usertype:1,
usertypeName:'',
phone:'',
mail:'',
password:''
})
}
}catch(error){
console.error(error);
ElMessage.error('用户创建失败！');
}
}else{
try{
const res = await userapi.updateUser(state.ruleForm);
if(res?.success){
emit('reset');
ElMessage.success('用户修改成功！');
closeDialog();
}
}catch(error){
console.error(error);
ElMessage.error('用户修改失败！')
}
}
}
})
}; };
// 初始化部门数据 // 初始化部门数据
const getMenuData = () => { // const getMenuData = () => {
state.deptData.push({ // state.deptData.push({
deptName: 'vueNextAdmin', // deptName: 'vueNextAdmin',
createTime: new Date().toLocaleString(), // createTime: new Date().toLocaleString(),
status: true, // status: true,
sort: Math.random(), // sort: Math.random(),
describe: '顶级部门', // describe: '顶级部门',
id: Math.random(), // id: Math.random(),
children: [ // children: [
{ // {
deptName: 'IT外包服务', // deptName: 'IT外包服务',
createTime: new Date().toLocaleString(), // createTime: new Date().toLocaleString(),
status: true, // status: true,
sort: Math.random(), // sort: Math.random(),
describe: '总部', // describe: '总部',
id: Math.random(), // id: Math.random(),
}, // },
{ // {
deptName: '资本控股', // deptName: '资本控股',
createTime: new Date().toLocaleString(), // createTime: new Date().toLocaleString(),
status: true, // status: true,
sort: Math.random(), // sort: Math.random(),
describe: '分部', // describe: '分部',
id: Math.random(), // id: Math.random(),
}, // },
], // ],
}); // });
}; // };
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog, openDialog,
}); });
onMounted(async() =>{
await getroleList()
})
</script> </script>

151
src/views/usermanage/user/index.vue
View File

@ -2,8 +2,8 @@
<div class="system-user-container layout-padding"> <div class="system-user-container layout-padding">
<el-card shadow="hover" class="layout-padding-auto"> <el-card shadow="hover" class="layout-padding-auto">
<div class="system-user-search mb15"> <div class="system-user-search mb15">
<el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input> <el-input v-model="state.tableData.param.username" size="default" placeholder="请输入用户名称" style="max-width: 180px" clearable> </el-input>
<el-button size="default" type="primary" class="ml10"> <el-button size="default" type="primary" class="ml10" @click="getTableData">
<el-icon> <el-icon>
<ele-Search /> <ele-Search />
</el-icon> </el-icon>
@ -17,27 +17,27 @@
</el-button> </el-button>
</div> </div>
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> <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 type="index" label="序号" width="100" />
<el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column> <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="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column> -->
<el-table-column prop="roleSign" label="关联角色" show-overflow-tooltip></el-table-column> <el-table-column prop="acgroupName" label="关联角色" show-overflow-tooltip></el-table-column>
<el-table-column prop="department" 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="phone" label="手机号" show-overflow-tooltip></el-table-column>
<el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column> <el-table-column prop="mail" label="邮箱" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="用户状态" show-overflow-tooltip> <!-- <el-table-column prop="status" label="用户状态" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<el-tag type="success" v-if="scope.row.status">启用</el-tag> <el-tag type="success" v-if="scope.row.status">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag> <el-tag type="info" v-else>禁用</el-tag>
</template> </template>
</el-table-column> </el-table-column> -->
<el-table-column prop="describe" label="用户描述" show-overflow-tooltip></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 prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="100"> <el-table-column label="操作" width="100">
<template #default="scope"> <template #default="scope">
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser('edit', scope.row)" <el-button size="small" text type="primary" @click="onOpenEditUser('edit', scope.row)"
>修改</el-button >修改</el-button
> >
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button> <el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -47,100 +47,153 @@
class="mt15" class="mt15"
:pager-count="5" :pager-count="5"
:page-sizes="[10, 20, 30]" :page-sizes="[10, 20, 30]"
v-model:current-page="state.tableData.param.pageNum" v-model:current-page="state.tableData.param.current"
background background
v-model:page-size="state.tableData.param.pageSize" v-model:page-size="state.tableData.param.size"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total" :total="state.tableData.total"
> >
</el-pagination> </el-pagination>
</el-card> </el-card>
<UserDialog ref="userDialogRef" @refresh="getTableData()" /> <UserDialog ref="userDialogRef" @reset="getTableData()" />
</div> </div>
</template> </template>
<script setup lang="ts" name="systemUser"> <script setup lang="ts" name="systemUser">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue'; import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus'; import { ElMessageBox, ElMessage,TableColumnCtx } from 'element-plus';
import { userApi } from '/@/api/user'
// 引入组件 // 引入组件
const UserDialog = defineAsyncComponent(() => import('/@/views/usermanage/user/dialog.vue')); const UserDialog = defineAsyncComponent(() => import('/@/views/usermanage/user/dialog.vue'));
const userapi = userApi();
// 定义变量内容 // 定义变量内容
const userDialogRef = ref(); const userDialogRef = ref();
const state = reactive<SysUserState>({ const state = reactive({
tableData: { tableData: {
data: [], data: [],
total: 0, total: 0,
loading: false, loading: false,
param: { param: {
pageNum: 1, username:'',
pageSize: 10, usertype:1,
current: 1,
size: 10,
}, },
}, },
}); });
// 初始化表格数据 // 初始化表格数据
const getTableData = () => { const getTableData = async() => {
state.tableData.loading = true; state.tableData.loading = true;
const data = []; // const data = [];
for (let i = 0; i < 2; i++) { // for (let i = 0; i < 2; i++) {
data.push({ // data.push({
userName: i === 0 ? 'admin' : 'test', // userName: i === 0 ? 'admin' : 'test',
userNickname: i === 0 ? '我是管理员' : '我是普通用户', // userNickname: i === 0 ? '我是管理员' : '我是普通用户',
roleSign: i === 0 ? 'admin' : 'common', // roleSign: i === 0 ? 'admin' : 'common',
department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'], // department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'],
phone: '12345678910', // phone: '12345678910',
email: 'vueNextAdmin@123.com', // email: 'vueNextAdmin@123.com',
sex: '女', // sex: '女',
password: '123456', // password: '123456',
overdueTime: new Date(), // overdueTime: new Date(),
status: true, // status: true,
describe: i === 0 ? '不可删除' : '测试用户', // describe: i === 0 ? '不可删除' : '测试用户',
createTime: new Date().toLocaleString(), // createTime: new Date().toLocaleString(),
}); // });
// }
// state.tableData.data = data;
// state.tableData.total = state.tableData.data.length;
try{
const res = await userapi.getUserList(state.tableData.param);
if(res?.success){
state.tableData.data = res.data.records.map((item:any) => {
return{
...item,
phone:item.phone || '暂无',
mail:item.mail || '暂无',
} }
state.tableData.data = data; });
state.tableData.total = state.tableData.data.length; // console.log(11111111,state.tableData.data);
};
state.tableData.total = res.data.total;
}catch(error){
console.error(error)
}finally{
setTimeout(() => { setTimeout(() => {
state.tableData.loading = false; state.tableData.loading = false;
}, 500); }, 500);
}
}; };
// 打开新增用户弹窗 // 打开新增用户弹窗
const onOpenAddUser = (type: string) => { const onOpenAddUser = (type: string) => {
userDialogRef.value.openDialog(type); userDialogRef.value.openDialog(type);
}; };
// 打开修改用户弹窗 // 打开修改用户弹窗
const onOpenEditUser = (type: string, row: RowUserType) => { const onOpenEditUser = (type: string, row: Object) => {
userDialogRef.value.openDialog(type, row); userDialogRef.value.openDialog(type, row);
}; };
// 删除用户 // 删除用户
const onRowDel = (row: RowUserType) => { const onRowDel = (row: any) => {
ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', { ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.username}”，是否继续?`, '提示', {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
}) })
.then(() => { .then(async() => {
getTableData(); try{
ElMessage.success('删除成功'); state.tableData.loading = true;
const res = await userapi.deleteUser(row.id)
if(res?.success){
reset();
ElMessage.success('用户删除成功！');
}else{
ElMessage.error('用户删除失败！');
}
}catch(error){
ElMessage.error('处理失败！');
console.error(error);
}finally{
state.tableData.loading = false
}
}) })
.catch(() => {}); };
//重置
const reset = (index = 0) =>{
state.tableData.param = {
// moduleid:moduleList.value
current: index ? state.tableData.param.current : 1,
usertype:1,
size: 10,
username:''
},
console.log(index,state.tableData.param);
getTableData();
}; };
// 分页改变 // 分页改变
const onHandleSizeChange = (val: number) => { const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val; state.tableData.param.size = val;
getTableData(); getTableData();
}; };
// 分页改变 // 分页改变
const onHandleCurrentChange = (val: number) => { const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val; state.tableData.param.current = val;
getTableData(); getTableData();
}; };
// 日期格式化
const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
let date = new Date(row.createtime);
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
};
// 页面加载时 // 页面加载时
onMounted(() => { onMounted(() => {
getTableData(); getTableData();
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">