manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改交互逻辑.

Browse Source
This commit is contained in:
lijiahang
2023-09-14 17:24:18 +08:00
parent f8b694c16a
commit a210fb93fd
15 changed files with 67 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
orion-ops-ui/src/api/user/role.ts
View File

@@ -18,9 +18,9 @@ export interface RoleUpdateRequest extends RoleCreateRequest {
}
/**
* 角色 菜单绑定请求
* 角色 分配绑定请求
*/
export interface RoleMenuBindRequest extends RoleCreateRequest {
export interface RoleGrantMenuRequest extends RoleCreateRequest {
roleId: number;
menuIdList: Array<number>;
}
@@ -99,10 +99,10 @@ export function deleteRole(id: number) {
}
/**
* 绑定角色菜单
* 分配角色菜单
*/
export function bindRoleMenu(request: RoleMenuBindRequest) {
return axios.put('/infra/system-role/bind', request);
export function grantRoleMenu(request: RoleGrantMenuRequest) {
return axios.put('/infra/system-role/grant-menu', request);
}
/**

4
orion-ops-ui/src/api/user/user.ts
View File

@@ -81,8 +81,8 @@ export function updateUserStatus(request: UserUpdateRequest) {
/**
* 修改用户角色
*/
export function updateUserRole(request: UserUpdateRequest) {
return axios.put('/infra/system-user/update-role', request);
export function grantUserRole(request: UserUpdateRequest) {
return axios.put('/infra/system-user/grant-role', request);
}
/**

3
orion-ops-ui/src/views/asset/host/components/host-form-modal.vue
View File

@@ -93,7 +93,8 @@
const openUpdate = (record: any) => {
title.value = '修改主机';
isAddHandle.value = false;
renderForm({ ...defaultForm(), ...record });
const tags = record?.tags?.map((s: { id: any; }) => s.id);
renderForm({ ...defaultForm(), ...record, tags });
setVisible(true);
};

8
orion-ops-ui/src/views/asset/host/types/const.ts
View File

@@ -1,4 +1,10 @@
/**
* tag 颜色
*/
export const tagColor = ['#FF5E5E', '#0FC6C2', '#CE36FF', '#14C93E', '#168CFF'];
export const tagColor = [
'#52C41A',
'#13C2C2',
'#1890FF',
'#9254de',
'#F759AB'
];

4
orion-ops-ui/src/views/asset/host/types/table.columns.ts
View File

@@ -31,8 +31,8 @@ const columns = [
}, {
title: '操作',
slotName: 'handle',
width: 130,
align: 'center',
width: 170,
align: 'right',
fixed: 'right',
},
] as TableColumnData[];

2
orion-ops-ui/src/views/dashboard/workplace/index.vue
View File

@@ -107,7 +107,7 @@
&:hover {
.icon {
color: rgb(var(--arcoblue-6));
background-color: #e8f3ff;
background-color: #E8F3FF;
}
.text {

5
orion-ops-ui/src/views/system/menu/components/menu-form-modal.vue
View File

@@ -111,6 +111,7 @@
import useLoading from '@/hooks/loading';
import useVisible from '@/hooks/visible';
import formRules from '../types/form.rules';
import { sortStep } from '../types/const';
import { MenuTypeEnum, MenuVisibleEnum, MenuCacheEnum } from '../types/enum.types';
import { toOptions } from '@/utils/enum';
import IconPicker from '@sanqi377/arco-vue-icon-picker';
@@ -131,7 +132,7 @@
name: undefined,
type: MenuTypeEnum.PARENT_MENU.value,
permission: undefined,
sort: 10,
sort: undefined,
visible: MenuVisibleEnum.SHOW.value,
cache: MenuCacheEnum.SHOW.value,
icon: undefined,
@@ -156,7 +157,7 @@
const openAdd = (record: any) => {
title.value = '添加菜单';
isAddHandle.value = true;
renderForm({ ...defaultForm(), parentId: record.parentId });
renderForm({ ...defaultForm(), parentId: record.parentId, sort: (record.sort || 0) + sortStep });
// 如果是父菜单默认选中子菜单 如果是子菜单默认选中功能
if (record.type === 1 || record.type === 2) {
formModel.type = record.type + 1;

13
orion-ops-ui/src/views/system/menu/components/menu-table.vue
View File

@@ -34,7 +34,7 @@
<a-space>
<!-- 新增 -->
<a-button type="primary"
@click="emits('openAdd',{ parentId: 0 })"
@click="emits('openAdd',{ parentId: 0, sort: getMaxSort(tableRenderData) })"
v-permission="['infra:system-menu:create']">
新增
<template #icon>
@@ -136,7 +136,7 @@
size="mini"
v-if="record.type !== MenuTypeEnum.FUNCTION.value"
v-permission="['infra:system-menu:create']"
@click="emits('openAdd', { parentId: record.id, type: record.type })">
@click="emits('openAdd', { parentId: record.id, type: record.type, sort: getMaxSort(record.children) })">
新增
</a-button>
<!-- 修改 -->
@@ -301,6 +301,15 @@
await loadMenuData();
};
// 获取最大排序
const getMaxSort = (array: MenuQueryResponse[]) => {
if (array?.length) {
return array[array.length - 1].sort;
} else {
return 0;
}
};
</script>
<style lang="less" scoped>

1
orion-ops-ui/src/views/system/menu/types/const.ts Normal file
View File

@@ -0,0 +1 @@
export const sortStep = 10;

12
orion-ops-ui/src/views/user/role/components/role-menu-bind-modal.vue → orion-ops-ui/src/views/user/role/components/role-menu-grant-modal.vue
View File

@@ -2,7 +2,7 @@
<a-modal v-model:visible="visible"
body-class="modal-form"
title-align="start"
title="绑定菜单"
title="分配菜单"
:top="80"
:width="480"
:body-style="{padding: '16px 16px 0 16px'}"
@@ -38,7 +38,7 @@
<script lang="ts">
export default {
name: 'role-menu-bind-modal'
name: 'role-menu-grant-modal'
};
</script>
@@ -48,7 +48,7 @@
import { reactive, ref } from 'vue';
import useLoading from '@/hooks/loading';
import useVisible from '@/hooks/visible';
import { getRoleMenuId, bindRoleMenu, RoleMenuBindRequest } from '@/api/user/role';
import { getRoleMenuId, grantRoleMenu, RoleGrantMenuRequest } from '@/api/user/role';
import { Message } from '@arco-design/web-vue';
import { useCacheStore } from '@/store';
import { getMenuList } from '@/api/system/menu';
@@ -98,11 +98,11 @@
setLoading(true);
try {
// 修改
await bindRoleMenu({
await grantRoleMenu({
roleId: roleRecord.id,
menuIdList: [...tree.value.getValue()]
} as RoleMenuBindRequest);
Message.success('绑定成功');
} as RoleGrantMenuRequest);
Message.success('分配成功');
// 清空
handlerClear();
} catch (e) {

10
orion-ops-ui/src/views/user/role/components/role-table.vue
View File

@@ -82,13 +82,13 @@
{{ toggleEnumValue(record.status, RoleStatusEnum, 'label') }}
</a-button>
</a-popconfirm>
<!-- 绑定菜单 -->
<a-button v-permission="['infra:system-role:bind-menu']"
<!-- 分配菜单 -->
<a-button v-permission="['infra:system-role:grant-menu']"
:disabled="record.code === 'admin'"
type="text"
size="mini"
@click="emits('openBind', record)">
绑定菜单
@click="emits('openGrant', record)">
分配菜单
</a-button>
<!-- 修改 -->
<a-button v-permission="['infra:system-role:update']"
@@ -134,7 +134,7 @@
const tableRenderData = ref<RoleQueryResponse[]>();
const { loading, setLoading } = useLoading();
const emits = defineEmits(['openAdd', 'openUpdate', 'openBind']);
const emits = defineEmits(['openAdd', 'openUpdate', 'openGrant']);
const pagination = reactive(defaultPagination());

10
orion-ops-ui/src/views/user/role/index.vue
View File

@@ -4,13 +4,13 @@
<role-table ref="table"
@openAdd="() => modal.openAdd()"
@openUpdate="(e) => modal.openUpdate(e)"
@openBind="(e) => bindModal.open(e)" />
@openGrant="(e) => grantModal.open(e)" />
<!-- 添加修改模态框 -->
<role-form-modal ref="modal"
@added="() => table.addedCallback()"
@updated="() => table.updatedCallback()" />
<!-- 角色菜单绑定模态框 -->
<role-menu-bind-modal ref="bindModal" />
<!-- 分配角色菜单模态框 -->
<role-menu-grant-modal ref="grantModal" />
</div>
</template>
@@ -23,13 +23,13 @@
<script lang="ts" setup>
import RoleTable from './components/role-table.vue';
import RoleFormModal from './components/role-form-modal.vue';
import RoleMenuBindModal from '@/views/user/role/components/role-menu-bind-modal.vue';
import RoleMenuGrantModal from '@/views/user/role/components/role-menu-grant-modal.vue';
import { onUnmounted, ref } from 'vue';
import { useCacheStore } from '@/store';
const table = ref();
const modal = ref();
const bindModal = ref();
const grantModal = ref();
// 卸载时清除 menu cache
onUnmounted(() => {

6
orion-ops-ui/src/views/user/user/components/user-update-roles-form-modal.vue → orion-ops-ui/src/views/user/user/components/user-grant-roles-form-modal.vue
View File

@@ -40,7 +40,7 @@
<script lang="ts">
export default {
name: 'user-user-update-roles-form-modal'
name: 'user-user-grant-roles-form-modal'
};
</script>
@@ -52,7 +52,7 @@
import UserRoleSelector from '@/components/user/role/user-role-selector.vue';
import { getRoleList } from '@/api/user/role';
import { useCacheStore } from '@/store';
import { getUserRoleIdList, updateUserRole } from '@/api/user/user';
import { getUserRoleIdList, grantUserRole } from '@/api/user/user';
const { visible, setVisible } = useVisible();
const { loading: saveLoading, setLoading: setSaveLoading } = useLoading();
@@ -108,7 +108,7 @@
const handlerOk = async () => {
setSaveLoading(true);
try {
await updateUserRole({
await grantUserRole({
id: formModel.id,
roleIdList: formModel.roleIdList
});

14
orion-ops-ui/src/views/user/user/components/user-table.vue
View File

@@ -70,6 +70,10 @@
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size) => fetchTableData(pagination.current, size)"
:bordered="false">
<!-- 用户名 -->
<template #username="{ record }">
<span class="username-text">{{ record.username }}</span>
</template>
<!-- 状态 -->
<template #status="{ record }">
<a-tag :color="getEnumValue(record.status, UserStatusEnum,'color')">
@@ -115,8 +119,8 @@
<!-- 分配角色 -->
<a-button type="text"
size="mini"
v-permission="['infra:system-user:update-role']"
@click="emits('openUpdateRole', record)">
v-permission="['infra:system-user:grant-role']"
@click="emits('openGrantRole', record)">
分配角色
</a-button>
<!-- 删除 -->
@@ -156,7 +160,7 @@
const tableRenderData = ref<UserQueryResponse[]>();
const { loading, setLoading } = useLoading();
const emits = defineEmits(['openAdd', 'openUpdate', 'openResetPassword', 'openUpdateRole']);
const emits = defineEmits(['openAdd', 'openUpdate', 'openResetPassword', 'openGrantRole']);
const pagination = reactive(defaultPagination());
@@ -244,5 +248,7 @@
</script>
<style lang="less" scoped>
.username-text {
color: rgb(var(--arcoblue-6));
}
</style>

8
orion-ops-ui/src/views/user/user/index.vue
View File

@@ -5,7 +5,7 @@
@openAdd="() => modal.openAdd()"
@openUpdate="(e) => modal.openUpdate(e)"
@openResetPassword="(e) => resetModal.open(e)"
@openUpdateRole="(e) => updateRoleModal.open(e)" />
@openGrantRole="(e) => grantRoleModal.open(e)" />
<!-- 添加修改模态框 -->
<user-form-modal ref="modal"
@added="() => table.addedCallback()"
@@ -13,7 +13,7 @@
<!-- 重置密码模态框 -->
<user-reset-password-form-modal ref="resetModal" />
<!-- 分配角色模态框 -->
<user-update-roles-form-modal ref="updateRoleModal" />
<user-grant-roles-form-modal ref="grantRoleModal" />
</div>
</template>
@@ -27,14 +27,14 @@
import UserTable from './components/user-table.vue';
import UserFormModal from './components/user-form-modal.vue';
import UserResetPasswordFormModal from './components/user-reset-password-form-modal.vue';
import UserUpdateRolesFormModal from './components/user-update-roles-form-modal.vue';
import UserGrantRolesFormModal from './components/user-grant-roles-form-modal.vue';
import { ref, onUnmounted } from 'vue';
import { useCacheStore } from '@/store';
const table = ref();
const modal = ref();
const resetModal = ref();
const updateRoleModal = ref();
const grantRoleModal = ref();
// 卸载时清除 role cache
onUnmounted(() => {