diff --git a/src/api/role/index.ts b/src/api/role/index.ts index 0e664dc..01c2d77 100644 --- a/src/api/role/index.ts +++ b/src/api/role/index.ts @@ -8,7 +8,7 @@ import { baseUrlHost } from '../baseUrlHost'; * 登录api接口集合 * @method getRoleList 获取分页角色列表 * @method deleteRole 删除角色 - * @method saveRole 保存角色 + * @method addRole 保存角色 * @method updateRole 更新角色 * @method getroleListAll 获取全部角色 * @method getRoleDetail 查询单个角色 @@ -51,7 +51,7 @@ export function roleApi() { }, getroleListAll: () => { return request({ - url: baseUrlHost + `/acGroup/`, + url: baseUrlHost + `/acGroup/all`, method: 'get', }); }, diff --git a/src/api/user/index.ts b/src/api/user/index.ts new file mode 100644 index 0000000..7a9025b --- /dev/null +++ b/src/api/user/index.ts @@ -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', + }); + }, + }; +} diff --git a/src/layout/component/aside.vue b/src/layout/component/aside.vue index 781eb90..e777293 100644 --- a/src/layout/component/aside.vue +++ b/src/layout/component/aside.vue @@ -100,7 +100,8 @@ let Menulist = ref([]); // const defaultOpeneds =reactive([]) const getmenulist = async() =>{ try{ - const res = await useMenuapi.getAdminMenu(1); + const id = localStorage.getItem('acgroup') + const res = await useMenuapi.getAdminMenu(id); // console.log('菜单数据',res); Menulist.value = res.data; isDataReady.value = true diff --git a/src/layout/navMenu/vertical.vue b/src/layout/navMenu/vertical.vue index 65b0388..7bc0567 100644 --- a/src/layout/navMenu/vertical.vue +++ b/src/layout/navMenu/vertical.vue @@ -155,3 +155,11 @@ watch( ); </script> +<style lang="scss" scoped> + +::v-deep .el-menu-item-group__title{ + padding :0px 0px 0px ; +} + +</style> + diff --git a/src/router/route.ts b/src/router/route.ts index d7f7b8b..26cd02e 100644 --- a/src/router/route.ts +++ b/src/router/route.ts @@ -58,7 +58,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: true, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'iconfont icon-shouye', }, }, @@ -73,7 +73,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: true, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'iconfont icon-shouye', }, }, @@ -89,7 +89,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin'], + roles: ['admin', 'user'], icon: 'iconfont icon-gerenzhongxin', }, children: [ @@ -104,7 +104,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin'], + roles: ['admin', 'user'], icon: 'ele-ColdDrink', }, }, @@ -119,7 +119,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin'], + roles: ['admin', 'user'], icon: 'iconfont icon-icon-', }, }, @@ -137,7 +137,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin'], + roles: ['admin', 'user'], icon: 'iconfont icon-xitongshezhi', }, children: [ @@ -152,7 +152,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin'], + roles: ['admin', 'user'], icon: 'iconfont icon-caidan', }, }, @@ -167,7 +167,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin'], + roles: ['admin', 'user'], icon: 'ele-OfficeBuilding', }, }, @@ -182,7 +182,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin'], + roles: ['admin', 'user'], icon: 'ele-SetUp', }, }, @@ -200,7 +200,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'iconfont icon-jiliandongxuanzeqi', }, children: [ @@ -215,7 +215,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: false, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'ele-Document', }, }, @@ -230,7 +230,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: false, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'ele-Document', }, }, @@ -245,7 +245,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: false, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'ele-Document', }, } @@ -270,7 +270,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin'], + roles: ['admin', 'user'], icon: 'iconfont icon-crew_feature', }, }, @@ -286,7 +286,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin'], + roles: ['admin', 'user'], icon: 'ele-Upload', }, }, @@ -307,7 +307,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'ele-DocumentCopy', }, }, @@ -323,7 +323,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'ele-Picture', }, }, @@ -339,7 +339,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'ele-User', }, }, @@ -354,7 +354,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'iconfont icon-fuwenbenkuang', }, }, @@ -369,7 +369,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'iconfont icon-biaodan', }, }, @@ -384,7 +384,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'ele-CollectionTag', }, // children: [ @@ -432,7 +432,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'iconfont icon-shuju', }, }, @@ -447,7 +447,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'iconfont icon-ico_shuju', }, }, @@ -462,7 +462,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'iconfont icon-jiliandongxuanzeqi', }, children: [ @@ -477,7 +477,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: false, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'ele-Document', }, }, @@ -492,7 +492,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: false, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'ele-Document', }, }, @@ -507,7 +507,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: false, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'ele-Document', }, } @@ -524,7 +524,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'iconfont icon-jiliandongxuanzeqi', }, children: [ @@ -539,7 +539,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: false, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'ele-Document', }, }, @@ -554,7 +554,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: false, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'ele-Document', }, }, @@ -569,7 +569,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: false, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'ele-Document', }, } @@ -586,7 +586,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: true, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'iconfont icon-jiliandongxuanzeqi', }, children: [ @@ -601,7 +601,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [ isKeepAlive: false, isAffix: false, isIframe: false, - roles: ['admin', 'common'], + roles: ['admin', 'user'], icon: 'ele-Document', }, }, diff --git a/src/views/usermanage/role/dialog.vue b/src/views/usermanage/role/dialog.vue index 3ee6a1e..9e853f2 100644 --- a/src/views/usermanage/role/dialog.vue +++ b/src/views/usermanage/role/dialog.vue @@ -195,6 +195,8 @@ const onSubmit = async() => { // emit('reset'); roleDialogFormRef.value?.validate( async (valid: boolean) => { if(valid){ + console.log(11111111111); + state.ruleForm.show = state.ruleForm.show ? 1 : 0; state.ruleForm.grouptypeid = 1; 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; - // } - // }) - // } }; // 暴露变量 diff --git a/src/views/usermanage/role/index.vue b/src/views/usermanage/role/index.vue index 81a7344..694df43 100644 --- a/src/views/usermanage/role/index.vue +++ b/src/views/usermanage/role/index.vue @@ -17,7 +17,7 @@ </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 type="index" label="序号" width="100" /> <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="show" label="角色状态" show-overflow-tooltip> @@ -70,7 +70,7 @@ const roletypeapi = roletypeApi(); // 定义变量内容 const roleDialogRef = ref(); -const state = reactive<SysRoleState>({ +const state = reactive({ tableData: { data: [], total: 0, @@ -169,6 +169,7 @@ const reset = (index = 0) =>{ // moduleid:moduleList.value pageNum: index ? state.tableData.param.pageNum : 1, pageSize: 10, + name:'' }, console.log(index,state.tableData.param); getTableData(); diff --git a/src/views/usermanage/user/dialog.vue b/src/views/usermanage/user/dialog.vue index c304389..f4bc2c9 100644 --- a/src/views/usermanage/user/dialog.vue +++ b/src/views/usermanage/user/dialog.vue @@ -1,27 +1,28 @@ <template> <div class="system-user-dialog-container"> <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-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-form-item label="账户名称" prop="username"> + <el-input v-model="state.ruleForm.username" 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 :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-form-item> - </el-col> + </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-form-item label="关联角色" prop="acgroup"> + <el-select v-model="state.ruleForm.acgroup" placeholder="请选择" clearable class="w100"> + <!-- <el-option label="管理员" value="admin"></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-form-item> </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-cascader :options="state.deptData" @@ -37,36 +38,36 @@ </template> </el-cascader> </el-form-item> - </el-col> + </el-col> --> <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-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.email" placeholder="请输入" clearable></el-input> + <el-form-item label="邮箱" prop="mail"> + <el-input v-model="state.ruleForm.mail" 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-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> --> + <!-- <el-form-item label="性别"> + <el-select v-model="state.ruleForm.gender" placeholder="请选择" clearable class="w100"> <el-option label="男" value="男"></el-option> <el-option label="女" value="女"></el-option> </el-select> - </el-form-item> - </el-col> + </el-form-item> --> + <!-- </el-col> --> <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-form-item> </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-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-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> @@ -75,7 +76,7 @@ <el-form-item label="用户描述"> <el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input> </el-form-item> - </el-col> + </el-col> --> </el-row> </el-form> <template #footer> @@ -89,28 +90,44 @@ </template> <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 state = reactive({ ruleForm: { - userName: '', // 账户名称 - userNickname: '', // 用户昵称 - roleSign: '', // 关联角色 - department: [] as string[], // 部门 + username: '', // 账户名称 + // userNickname: '', // 用户昵称 + acgroupName: '', // 关联角色 + // department: [] as string[], // 部门 phone: '', // 手机号 - email: '', // 邮箱 - sex: '', // 性别 + mail: '', // 邮箱 + acgroup:0, + // gender: '', // 性别 password: '', // 账户密码 - overdueTime: '', // 账户过期 - status: true, // 用户状态 - describe: '', // 用户描述 + usertype:1 + // overdueTime: '', // 账户过期 + // 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: { isShowDialog: false, type: '', @@ -120,22 +137,64 @@ const state = reactive({ }); // 打开弹窗 -const openDialog = (type: string, row: RowUserType) => { +const openDialog = (type: string, row: any) => { if (type === 'edit') { state.ruleForm = row; + state.dialog.type = type; state.dialog.title = '修改用户'; state.dialog.submitTxt = '修 改'; + console.log(111111,state.ruleForm); + } else { + resetForm(); state.dialog.title = '新增用户'; state.dialog.submitTxt = '新 增'; + state.dialog.type = type; + userDialogFormRef.value?.resetFields(); // 清空表单,此项需加表单验证才能使用 // nextTick(() => { // userDialogFormRef.value.resetFields(); // }); } 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 = () => { state.dialog.isShowDialog = false; @@ -146,42 +205,87 @@ const onCancel = () => { }; // 提交 const onSubmit = () => { - closeDialog(); - emit('refresh'); - // if (state.dialog.type === 'add') { } + // 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(); + + 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 = () => { - 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 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(), +// }, +// ], +// }); +// }; // 暴露变量 defineExpose({ openDialog, }); +onMounted(async() =>{ + await getroleList() +}) </script> diff --git a/src/views/usermanage/user/index.vue b/src/views/usermanage/user/index.vue index 91dbded..338eaa1 100644 --- a/src/views/usermanage/user/index.vue +++ b/src/views/usermanage/user/index.vue @@ -2,8 +2,8 @@ <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-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" @click="getTableData"> <el-icon> <ele-Search /> </el-icon> @@ -17,27 +17,27 @@ </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 type="index" label="序号" width="100" /> + <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="acgroupName" 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> + <el-table-column prop="mail" 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> --> + <!-- <el-table-column prop="describe" 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"> <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 :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> </el-table-column> </el-table> @@ -47,100 +47,153 @@ class="mt15" :pager-count="5" :page-sizes="[10, 20, 30]" - v-model:current-page="state.tableData.param.pageNum" + v-model:current-page="state.tableData.param.current" background - v-model:page-size="state.tableData.param.pageSize" + v-model:page-size="state.tableData.param.size" layout="total, sizes, prev, pager, next, jumper" :total="state.tableData.total" > </el-pagination> </el-card> - <UserDialog ref="userDialogRef" @refresh="getTableData()" /> + <UserDialog ref="userDialogRef" @reset="getTableData()" /> </div> </template> <script setup lang="ts" name="systemUser"> 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 userapi = userApi(); + // 定义变量内容 const userDialogRef = ref(); -const state = reactive<SysUserState>({ +const state = reactive({ tableData: { data: [], total: 0, loading: false, param: { - pageNum: 1, - pageSize: 10, + username:'', + usertype:1, + current: 1, + size: 10, }, }, }); // 初始化表格数据 -const getTableData = () => { +const getTableData = async() => { 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(() => { + // 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; + 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 || '暂无', + } + }); + // console.log(11111111,state.tableData.data); + + }; + state.tableData.total = res.data.total; + }catch(error){ + console.error(error) + }finally{ + setTimeout(() => { state.tableData.loading = false; - }, 500); + }, 500); + } }; // 打开新增用户弹窗 const onOpenAddUser = (type: string) => { userDialogRef.value.openDialog(type); }; // 打开修改用户弹窗 -const onOpenEditUser = (type: string, row: RowUserType) => { +const onOpenEditUser = (type: string, row: Object) => { 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('删除成功'); + .then(async() => { + try{ + 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) => { - state.tableData.param.pageSize = val; + state.tableData.param.size = val; getTableData(); }; // 分页改变 const onHandleCurrentChange = (val: number) => { - state.tableData.param.pageNum = val; + state.tableData.param.current = val; getTableData(); }; +// 日期格式化 +const dateFormatter = (row: any, column: TableColumnCtx<String>) => { + let date = new Date(row.createtime); + return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`; +}; // 页面加载时 onMounted(() => { getTableData(); }); + </script> <style scoped lang="scss">