0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 角色管理用户管理改造

This commit is contained in:
leiqiaochu 2023-09-11 14:34:26 +08:00
parent 99533a38be
commit 69e4599337
12 changed files with 205 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/api/system/user.ts
View File

@ -15,6 +15,9 @@ export const validateField_api = (type: 'username' | 'password', name: string) =
// 获取角色列表
export const getRoleList_api = () => server.get(`/role/_query/no-paging?paging=false`);
//获取角色列表
export const getRoleList = () => server.post('/role/group/detail/_query/tree')
// 获取组织列表
export const getDepartmentList_api = () => server.get(`/organization/_all/tree?paging=false`);

42
src/views/system/Role/RoleRight/Detail/Permiss/index.vue → src/views/system/Role/Detail/Permiss/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="role-permiss-container">
<section class="card">
<!-- <section class="card">
<h5>基本信息</h5>
<j-form
ref="formRef"
@ -30,7 +30,7 @@
/>
</j-form-item>
</j-form>
</section>
</section> -->
<section class="card">
<h5>权限分配</h5>
@ -38,7 +38,7 @@
<j-button
type="primary"
:disabled="form.loading"
:confirm-loading="form.loading"
@click="form.clickSave"
style="margin-top: 24px"
>保存</j-button
@ -70,33 +70,33 @@ const roleId = route.params.id as string;
const formRef = ref<FormInstance>();
const form = reactive({
loading: false,
data: {
name: '',
description: '',
},
// data: {
// name: '',
// description: '',
// },
menus: [], // USER_CENTER_MENU_DATA
getForm: () => {
getRoleDetails_api(roleId).then((resp) => {
if (resp.status) {
form.data = resp.result;
}
});
},
clickSave: () => {
formRef.value?.validate().then(() => {
const updateRole = editRole_api(roleId, form.data);
// getForm: () => {
// getRoleDetails_api(roleId).then((resp) => {
// if (resp.status) {
// form.data = resp.result;
// }
// });
// },
clickSave: () => {
// formRef.value?.validate().then(() => {
// const updateRole = editRole_api(roleId, form.data);
const updateTree = updatePrimissTree_api(roleId, {
menus: form.menus,
});
Promise.all([updateRole, updateTree]).then((resp) => {
Promise.all([ updateTree]).then((resp) => {
onlyMessage('操作成功');
// jumpPage(`system/Role`);
});
});
})
// });
},
});
form.getForm();
// form.getForm();
</script>
<style lang="less" scoped>

0
src/views/system/Role/RoleRight/Detail/User/index.d.ts → src/views/system/Role/Detail/User/index.d.ts vendored
View File

0
src/views/system/Role/RoleRight/Detail/User/index.vue → src/views/system/Role/Detail/User/index.vue
View File

0
src/views/system/Role/RoleRight/Detail/components/AddUserDialog.vue → src/views/system/Role/Detail/components/AddUserDialog.vue
View File

0
src/views/system/Role/RoleRight/Detail/components/PermissTree.vue → src/views/system/Role/Detail/components/PermissTree.vue
View File

0
src/views/system/Role/RoleRight/Detail/components/util.ts → src/views/system/Role/Detail/components/util.ts
View File

0
src/views/system/Role/RoleRight/Detail/index.vue → src/views/system/Role/Detail/index.vue
View File

3
src/views/system/Role/RoleLeft/index.vue
View File

@ -44,7 +44,7 @@
</div>
</div>
<div v-else>
<j-input v-model:value="addName" @blur="()=>saveGroup(item.data)" ref="inputRef"></j-input>
<j-input v-model:value="addName" @blur="()=>saveGroup(item.data)" ref="inputRef" :maxlength="64"></j-input>
<div style="color: red;" v-if="validateTip">分组名称不能为空</div>
</div>
</template>
@ -76,6 +76,7 @@ const queryGroup = async(select?:Boolean,searchName?:string) =>{
}
}
const addGroup = () =>{
addName.value = ''
listData.value.push({
name:'',
edit:true,

61
src/views/system/Role/RoleRight/components/AddDialog.vue
View File

@ -1,7 +1,7 @@
<template>
<j-modal
visible
title="新增"
:title="modalType ==='add' ? '新增' : '编辑'"
width="670px"
@cancel="emits('update:visible', false)"
@ok="confirm"
@ -50,20 +50,31 @@
<script setup lang="ts">
import { FormInstance } from 'ant-design-vue';
import { saveRole_api , queryRoleGroup} from '@/api/system/role';
import { saveRole_api , queryRoleGroup , updateRole_api} from '@/api/system/role';
import { useMenuStore } from '@/store/menu';
import { onlyMessage } from '@/utils/comm';
const route = useRoute();
const { jumpPage } = useMenuStore();
const emits = defineEmits(['update:visible']);
const props = defineProps<{
visible: boolean;
const props = defineProps({
visible: {
type:Boolean,
default:false
},
groupId:{
type:String,
default:""
},
modalType:{
type:String,
default:'add'
},
current:{
type:Object,
default:{}
}
}>();
})
// 弹窗相关
const loading = ref(false);
const form = ref<any>({
@ -73,26 +84,35 @@ const form = ref<any>({
});
const formRef = ref<FormInstance>();
const groupOptions = ref<any>([])
const confirm = () => {
const confirm = async() => {
loading.value = true;
formRef.value
?.validate()
.then(() => saveRole_api(form.value))
.then((resp) => {
if (resp.status === 200) {
onlyMessage('操作成功');
emits('update:visible', false);
if (route.query.save) {
// @ts-ignore
if((window as any).onTabSaveSuccess){
(window as any).onTabSaveSuccess(resp.result.id);
setTimeout(() => window.close(), 300);
}
.then(() => {
if(props.modalType === 'add'){
saveRole_api(form.value).then((resp:any)=>{
if (resp.status === 200) {
onlyMessage('操作成功');
emits('update:visible', false);
if (route.query.save) {
// @ts-ignore
if((window as any).onTabSaveSuccess){
(window as any).onTabSaveSuccess(resp.result.id);
setTimeout(() => window.close(), 300);
}
} else jumpPage(`system/Role/Detail`, { id: resp.result.id });
}
}).catch(() => (loading.value = false));
}else{
updateRole_api(form.value).then((resp:any)=>{
if (resp.status === 200) {
onlyMessage('操作成功');
emits('update:visible', false);
}
}).catch(() => (loading.value = false));
}
})
.finally(() => (loading.value = false));
.catch(() => (loading.value = false));
};
// 表单相关
const getGroupOptions = ()=>{
@ -110,6 +130,9 @@ const getGroupOptions = ()=>{
onMounted(()=>{
getGroupOptions()
form.value.groupId = props.groupId
if(props.modalType === 'edit'){
form.value = props.current
}
})
</script>

185
src/views/system/Role/RoleRight/index.vue
View File

@ -1,77 +1,36 @@
<template>
<page-container>
<div class="role-container">
<pro-search
:columns="columns"
target="system-role"
@search="(params:any)=>queryParams = {...params}"
/>
<pro-search :columns="columns" target="system-role" @search="handelSearch" />
<FullPage>
<j-pro-table
ref="tableRef"
:columns="columns"
:request="getRoleList_api"
model="TABLE"
:params="queryParams"
:defaultParams="{
sorts: [
{ name: 'createTime', order: 'desc' },
{ name: 'id', order: 'desc' },
],
terms:[
{
terms:[{
value: groupId,
termType:'eq',
column:'groupId'
}]
}
]
}"
>
<j-pro-table ref="tableRef" :columns="columns" :request="getRoleList_api" model="TABLE"
:params="queryParams" :defaultParams="defaultParams">
<template #headerTitle>
<PermissionButton
type="primary"
:hasPermission="`${permission}:add`"
@click="dialogVisible = true"
>
<PermissionButton type="primary" :hasPermission="`${permission}:add`" @click="addRole">
<AIcon type="PlusOutlined" />新增
</PermissionButton>
</template>
<template #action="slotProps">
<j-space :size="16">
<PermissionButton
:hasPermission="`${permission}:update`"
type="link"
:tooltip="{
title: '编辑',
}"
@click="
jumpPage(`system/Role/Detail`, {
id: slotProps.id,
})
"
>
<AIcon type="EditOutlined" />
</PermissionButton>
<PermissionButton
type="link"
:hasPermission="`${permission}:delete`"
:tooltip="{ title: '删除' }"
:popConfirm="{
title: `确定要删除吗`,
onConfirm: () => clickDel(slotProps),
}"
>
<AIcon type="DeleteOutlined" />
</PermissionButton>
<j-space>
<template v-for="i in getActions(slotProps, 'table')" :key="i.key">
<PermissionButton :disabled="i.disabled" :popConfirm="i.popConfirm" :tooltip="{
...i.tooltip,
}" @click="i.onClick" type="link" style="padding: 0 5px"
:danger="i.key === 'delete'" :hasPermission="'system/Role:' + i.key
">
<template #icon>
<AIcon :type="i.icon" />
</template>
</PermissionButton>
</template>
</j-space>
</template>
</j-pro-table>
</FullPage>
<AddDialog v-if="dialogVisible" v-model:visible="dialogVisible" :groupId="groupId"/>
<AddDialog v-if="dialogVisible" v-model:visible="dialogVisible" :groupId="groupId" :modalType="modalType"
:current="current" />
</div>
</page-container>
</template>
@ -80,19 +39,39 @@
import PermissionButton from '@/components/PermissionButton/index.vue';
import AddDialog from './components/AddDialog.vue';
import { getRoleList_api, delRole_api } from '@/api/system/role';
import type { ActionsType } from './typings';
import { useMenuStore } from '@/store/menu';
import { onlyMessage } from '@/utils/comm';
const props = defineProps({
groupId:{
type:String,
default:''
groupId: {
type: String,
default: ''
}
})
const permission = 'system/Role';
const { jumpPage } = useMenuStore();
const modalType = ref('add')
const current = ref()
const isSave = !!useRoute().query.save;
const queryParams = ref({});
const defaultParams = ref({
sorts: [
{ name: 'createTime', order: 'desc' },
{ name: 'id', order: 'desc' },
],
terms: [
{
terms: [{
value: props.groupId,
termType: 'eq',
column: 'groupId'
}]
}
]
})
// 表格
const tableRef = ref<Record<string, any>>();
const dialogVisible = ref(isSave);
const columns = [
{
title: '标识',
@ -131,19 +110,73 @@ const columns = [
scopedSlots: true,
},
];
const queryParams = ref({});
// 表格
const tableRef = ref<Record<string, any>>();
const clickDel = (row: any) => {
delRole_api(row.id).then((resp: any) => {
if (resp.status === 200) {
tableRef.value?.reload();
onlyMessage('操作成功!');
}
});
const getActions = (
data: Partial<Record<string, any>>,
type: 'card' | 'table',
): ActionsType[] => {
if (!data) return [];
const actions = [
{
key: 'update',
text: '编辑',
tooltip: {
title: '编辑',
},
icon: 'EditOutlined',
onClick: () => {
dialogVisible.value = true;
modalType.value = 'edit';
current.value = data
},
},
{
key: 'update',
text: '权限配置',
tooltip: {
title: '权限配置'
},
onClick: () => {
jumpPage(`system/Role/Detail`, {
id: data.id,
})
},
icon: 'FormOutlined'
},
{
key: 'delete',
text: '删除',
tooltip: {
title: '删除',
},
popConfirm: {
title: '确认删除?',
onConfirm: async () => {
const res = await delRole_api(data.id)
if (res.status === 200) {
onlyMessage('操作成功!')
tableRef.value?.reload()
} else {
onlyMessage('操作失败!', 'error')
}
},
},
icon: 'DeleteOutlined',
},
];
if (type === 'card')
return actions.filter((i: ActionsType) => i.key !== 'view');
return actions;
};
const dialogVisible = ref(isSave);
watch(()=>props.groupId,()=>{
const addRole = () =>{
dialogVisible.value = true
modalType.value = 'add'
}
const handelSearch = (search: any) => {
queryParams.value = search
}
watch(() => props.groupId, () => {
defaultParams.value.terms[0].terms[0].value = props.groupId
tableRef.value?.reload()
})
</script>

44
src/views/system/User/components/EditUserDialog.vue
View File

@ -99,14 +99,15 @@
{ required: form.data.username !== 'admin', message: '请选择角色' },
]"
>
<j-select
<j-tree-select
v-model:value="form.data.roleIdList"
mode="multiple"
multiple
style="width: calc(100% - 40px)"
placeholder="请选择角色"
:options="_roleOptions"
:tree-data="form.roleOptions"
:fieldNames="{ label: 'name', value: 'id', children:'children' }"
:disabled="form.data.username === 'admin'"
></j-select>
></j-tree-select>
<PermissionButton
:hasPermission="`${rolePermission}:add`"
@ -199,6 +200,7 @@ import {
updateUser_api,
updatePassword_api,
getUser_api,
getRoleList
} from '@/api/system/user';
import { Rule } from 'ant-design-vue/es/form';
import { DefaultOptionType } from 'ant-design-vue/es/vc-tree-select/TreeSelect';
@ -277,10 +279,9 @@ const form = reactive({
},
},
roleOptions: [] as optionType[],
roleOptions: [],
departmentOptions: [] as DefaultOptionType[],
_roleOptions: [] as optionType[],
_departmentOptions: [] as DefaultOptionType[],
init: () => {
@ -304,8 +305,8 @@ const form = reactive({
(item: dictType) => item.id,
),
};
form._roleOptions = resp.result?.roleList?.map((i: any) => {
return {label: i.name, value: i.id}
form.data.roleIdList = resp.result?.roleList?.map((i: any) => {
return i.id
});
form._departmentOptions = resp.result?.orgList
nextTick(() => {
@ -343,11 +344,10 @@ const form = reactive({
return api(params);
},
getRoleList: () => {
getRoleList_api().then((resp: any) => {
form.roleOptions = resp.result.map((item: dictType) => ({
label: item.name,
value: item.id,
}));
getRoleList().then((resp: any) => {
if(resp.status === 200){
form.roleOptions = dealRoleList(resp.result)
}
});
},
getDepartmentList: () => {
@ -366,9 +366,21 @@ const form = reactive({
},
});
const _roleOptions = computed(() => {
return uniqBy([...form.roleOptions, ...form._roleOptions], 'value')
})
const dealRoleList = (data:any) =>{
return data.map((item:any)=>{
return {
name: item.groupName,
id: item.groupId,
disabled: true,
children: item?.roles ? item.roles.map((i:any)=>{
return {
name:i.name,
id:i.id
}
}) : []
}
})
}
const _departmentOptions = computed(() => {
return uniqBy([...form.departmentOptions, ...form._departmentOptions], 'id')