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-10-09 15:22:48 +08:00
parent 09c0cee3bb
commit acb7826d91
4 changed files with 139 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/api/initHome.ts
View File

@ -4,7 +4,8 @@ import server from '@/utils/request';
export const updateMenus = (data: any) => server.patch(`/menu/iot/_all`, data) export const updateMenus = (data: any) => server.patch(`/menu/iot/_all`, data)
// 添加角色 // 添加角色
export const addRole = (data: any) => server.post(`/role`, data) export const addRole = (data: any) => server.post(`/role`, data)
//添加角色分组
export const addRoleGroup = (data:any) => server.post('/role/group',data)
//更新权限菜单 //更新权限菜单
export const getRoleMenu = (id: string) => server.get(`/menu/role/${id}/_grant/tree`) export const getRoleMenu = (id: string) => server.get(`/menu/role/${id}/_grant/tree`)

164
src/views/init-home/Role/index.vue
View File

@ -3,28 +3,29 @@
<div class="built_in_group"> <div class="built_in_group">
<div>平台角色内置分组</div> <div>平台角色内置分组</div>
<div class="group"> <div class="group">
<div v-for="(item,index) in group" class="group_item" @mouseover="()=>showButton(item)" @mouseleave="()=>hiddenButton(item)"> <div v-for="(item, index) in group" class="group_item" @mouseover="() => showButton(item)"
<div class="group_name" :class="{group_selected: item.selected}" :type="item.selected ? 'primary' : 'default'"> @mouseleave="() => hiddenButton(item)">
<j-ellipsis style="max-width: 100%;"><span>{{ item.name }}</span><AIcon type="CloseOutlined" class="closeIcon" v-if="item.closeIcon" @click="group.splice(index,1)"></AIcon></j-ellipsis> <div class="group_name" :class="{ group_selected: item.selected }"
:type="item.selected ? 'primary' : 'default'">
<j-ellipsis style="max-width: 100%;"><span>{{ item.name }}</span>
<AIcon type="CloseOutlined" class="closeIcon" v-if="item.closeIcon"
@click="group.splice(index, 1)"></AIcon>
</j-ellipsis>
</div> </div>
<div v-if="item.show"> <div v-if="item.show">
<j-button block @click="()=>selectGroup(item)">{{ item.selected ? '取消选中' : '选中' }}</j-button> <j-button block @click="() => selectGroup(item)">{{ item.selected ? '取消选中' : '选中' }}</j-button>
<j-button block @click="()=>showEditGroup(item)">编辑</j-button> <j-button block @click="() => showEditGroup(item, index)">编辑</j-button>
</div> </div>
</div> </div>
<j-button type="text" @click="showAddGroup" :disabled="group.length >=10">+ 自定义分组</j-button> <j-button type="text" @click="showAddGroup" :disabled="group.length >= 10">+ 自定义分组</j-button>
</div> </div>
</div> </div>
<j-checkbox-group @change="getCheckValue"> <j-checkbox-group @change="getCheckValue">
<div class="init-home-role-content"> <div class="init-home-role-content">
<div <div class="role-item role-item-1" :style="keys.includes('device')
class="role-item role-item-1"
:style="
keys.includes('device')
? 'background-color: #f5f5f5;' ? 'background-color: #f5f5f5;'
: '' : ''
" ">
>
<div class="role-item-title"> <div class="role-item-title">
<j-checkbox :value="ROLEKEYS.device"></j-checkbox> <j-checkbox :value="ROLEKEYS.device"></j-checkbox>
<div class="role-title">设备接入岗</div> <div class="role-title">设备接入岗</div>
@ -34,14 +35,10 @@
该角色负责设备接入模块的维护管理 该角色负责设备接入模块的维护管理
</div> </div>
</div> </div>
<div <div class="role-item role-item-2" :style="keys.includes('link')
class="role-item role-item-2"
:style="
keys.includes('link')
? 'background-color: #f5f5f5;' ? 'background-color: #f5f5f5;'
: '' : ''
" ">
>
<div class="role-item-title"> <div class="role-item-title">
<j-checkbox :value="ROLEKEYS.link"></j-checkbox> <j-checkbox :value="ROLEKEYS.link"></j-checkbox>
<div class="role-title">运维管理岗</div> <div class="role-title">运维管理岗</div>
@ -51,14 +48,10 @@
该角色负责系统运维模块的维护管理 该角色负责系统运维模块的维护管理
</div> </div>
</div> </div>
<div <div class="role-item role-item-3" :style="keys.includes('complex')
class="role-item role-item-3"
:style="
keys.includes('complex')
? 'background-color: #f5f5f5;' ? 'background-color: #f5f5f5;'
: '' : ''
" ">
>
<div class="role-item-title"> <div class="role-item-title">
<j-checkbox :value="ROLEKEYS.complex"></j-checkbox> <j-checkbox :value="ROLEKEYS.complex"></j-checkbox>
<div class="role-title">综合管理岗</div> <div class="role-title">综合管理岗</div>
@ -73,10 +66,7 @@
</div> </div>
<j-modal :visible="showAdd" title="自定义分组" @cancel="showAdd = false" @ok="addGroup"> <j-modal :visible="showAdd" title="自定义分组" @cancel="showAdd = false" @ok="addGroup">
<j-form layout="vertical" ref="formRef" :model="formData"> <j-form layout="vertical" ref="formRef" :model="formData">
<j-form-item <j-form-item name="name" label="名称" :rules="[
name="name"
label="名称"
:rules="[
{ {
required: true, required: true,
message: '请输入名称', message: '请输入名称',
@ -94,7 +84,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import RoleMenuData, { ROLEKEYS, RoleData } from '../data/RoleData'; import RoleMenuData, { ROLEKEYS, RoleData } from '../data/RoleData';
import { updateRoleMenu, addRole, getRoleMenu } from '@/api/initHome'; import { updateRoleMenu, addRole, getRoleMenu, addRoleGroup } from '@/api/initHome';
import { randomString } from '@/utils/utils';
/** /**
* 角色勾选数据 * 角色勾选数据
*/ */
@ -109,23 +100,27 @@ const getCheckValue = (val: any) => {
* 获取分组数据 * 获取分组数据
*/ */
const group = ref<any[]>([{ const group = ref<any[]>([{
name:'默认', name: '默认',
show:false, show: false,
selected:true selected: true,
},{ id: 'default_group'
name:'岗位', }, {
show:false, name: '岗位',
selected:false show: false,
},{ selected: false,
name:'职位', id: randomString()
show:false, }, {
selected:false name: '职位',
show: false,
selected: false,
id: randomString()
}]) }])
const showAdd = ref(false) const showAdd = ref(false)
const groupStatue = ref('add')
const selectedGroup = ref()
const formData = ref({ const formData = ref({
name:'' name: ''
}) })
const formRef = ref() const formRef = ref()
@ -214,63 +209,92 @@ const addRoleData = async () => {
}); });
}; };
const showButton = (item:any) =>{ const showButton = (item: any) => {
if(item.name != '默认'){ if (item.name != '默认') {
item.show = true item.show = true
} }
} }
const hiddenButton = (item:any)=>{ const hiddenButton = (item: any) => {
item.show = false item.show = false
} }
const selectGroup = (item:any)=>{ const selectGroup = (item: any) => {
item.selected = !item.selected item.selected = !item.selected
} }
/** /**
* 新增分组 * 新增分组
*/ */
const showAddGroup = ()=>{ const showAddGroup = () => {
formData.value.name = '' formData.value.name = ''
showAdd.value = true showAdd.value = true
groupStatue.value = 'add'
} }
/** /**
* 分组编辑 * 分组编辑
*/ */
const showEditGroup = (item:any) =>{ const showEditGroup = (item: any, index: number) => {
formData.value.name = item.name formData.value.name = item.name
showAdd.value = true showAdd.value = true
groupStatue.value = 'edit'
selectedGroup.value = index
} }
const addGroup = () =>{ const addGroup = () => {
formRef.value?.validate().then(()=>{ formRef.value?.validate().then(() => {
group.value.push({ groupStatue.value === 'add' ? group.value.push({
name:formData.value.name, name: formData.value.name,
selected:true, selected: true,
show:false, show: false,
closeIcon:true closeIcon: true,
}) id: randomString()
}) : group.value[selectedGroup.value].name = formData.value.name
showAdd.value = false showAdd.value = false
}) })
} }
/**
* 保存角色分组
*/
const saveGroup = async () => {
const roleGroup = group.value.filter((item: any) => {
return item.selected
})
return new Promise((resolve) => {
const allPromise = roleGroup.map(async (item) => {
return await addRoleGroup({ id: item.id, name: item.name });
});
Promise.all(allPromise).then((item) => {
resolve(
item.every((i) => {
return i;
}),
);
});
})
}
defineExpose({ defineExpose({
submitRole: addRoleData, submitRole: addRoleData,
submitRoleGroup: saveGroup
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.init-home-role { .init-home-role {
.built_in_group{ .built_in_group {
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
.group{
.group {
display: flex; display: flex;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
.group_item{
.group_item {
width: 100px; width: 100px;
margin-right: 20px; margin-right: 20px;
.button{
.button {
display: block; display: block;
} }
.group_name{
.group_name {
border: .2px solid rgb(217, 217, 217); border: .2px solid rgb(217, 217, 217);
text-align: center; text-align: center;
height: 32px; height: 32px;
@ -278,34 +302,41 @@ defineExpose({
border-radius: 12%; border-radius: 12%;
padding: 0 10px; padding: 0 10px;
position: relative; position: relative;
.closeIcon{
.closeIcon {
font-size: 12px; font-size: 12px;
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 4px; right: 4px;
} }
} }
.group_selected{
.group_selected {
background-color: rgb(190, 232, 251); background-color: rgb(190, 232, 251);
} }
} }
} }
} }
.init-home-role-content { .init-home-role-content {
display: flex; display: flex;
grid-gap: 24px; grid-gap: 24px;
gap: 24px; gap: 24px;
margin-top: 40px; margin-top: 40px;
} }
.role-item-1 { .role-item-1 {
background-image: url(/images/init-home/role1.png); background-image: url(/images/init-home/role1.png);
} }
.role-item-2 { .role-item-2 {
background-image: url(/images/init-home/role2.png); background-image: url(/images/init-home/role2.png);
} }
.role-item-3 { .role-item-3 {
background-image: url(/images/init-home/role3.png); background-image: url(/images/init-home/role3.png);
} }
.role-item { .role-item {
position: relative; position: relative;
display: flex; display: flex;
@ -317,8 +348,10 @@ defineExpose({
background-position: 50%; background-position: 50%;
background-size: 370px; background-size: 370px;
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
.role-item-title { .role-item-title {
display: flex; display: flex;
.role-title { .role-title {
flex: 1 1 auto; flex: 1 1 auto;
font-weight: 700; font-weight: 700;
@ -326,11 +359,13 @@ defineExpose({
text-align: center; text-align: center;
} }
} }
.role-item-content { .role-item-content {
width: 250px; width: 250px;
height: 260px; height: 260px;
margin-top: 24px; margin-top: 24px;
} }
.role-item-footer { .role-item-footer {
position: absolute; position: absolute;
bottom: -30px; bottom: -30px;
@ -341,5 +376,4 @@ defineExpose({
text-align: center; text-align: center;
} }
} }
} }</style>
</style>

3
src/views/init-home/data/RoleData.ts
View File

@ -13,15 +13,18 @@ export const RoleData = {
[ROLEKEYS.device]: { [ROLEKEYS.device]: {
name: '设备接入岗', name: '设备接入岗',
description: '该角色负责设备接入模块的维护管理', description: '该角色负责设备接入模块的维护管理',
groupId:'default_group',
state: { text: '正常', value: 'enabled' }, state: { text: '正常', value: 'enabled' },
}, },
[ROLEKEYS.link]: { [ROLEKEYS.link]: {
name: '运维管理岗', name: '运维管理岗',
groupId:'default_group',
description: '该角色负责系统运维模块的维护管理', description: '该角色负责系统运维模块的维护管理',
state: { text: '正常', value: 'enabled' }, state: { text: '正常', value: 'enabled' },
}, },
[ROLEKEYS.complex]: { [ROLEKEYS.complex]: {
name: '综合管理岗', name: '综合管理岗',
groupId:'default_group',
description: '该角色负责系统运维和设备接入模块的维护管理', description: '该角色负责系统运维和设备接入模块的维护管理',
state: { text: '正常', value: 'enabled' }, state: { text: '正常', value: 'enabled' },
}, },

7
src/views/init-home/index.vue
View File

@ -112,6 +112,11 @@ const submitData = async () => {
loading.value = false; loading.value = false;
return; return;
} }
const roleGroupRes = await roleRef.value.submitRole();
if (!roleGroupRes) {
loading.value = false;
return;
}
const initDataRes = await initDataRef.value.save(); const initDataRes = await initDataRef.value.save();
if (!initDataRes) { if (!initDataRes) {
loading.value = false; loading.value = false;
@ -119,7 +124,7 @@ const submitData = async () => {
} }
loading.value = false; loading.value = false;
// 当前数据是否成功提交 // 当前数据是否成功提交
if (basicRes && menuRes && roleRes && initDataRes) { if (basicRes && menuRes && roleRes && roleGroupRes && initDataRes) {
onlyMessage('保存成功'); onlyMessage('保存成功');
// // 记录初始化数据，跳转首页 // // 记录初始化数据，跳转首页
const res = await saveInit(); const res = await saveInit();