修改交互逻辑.

orion-ops-ui/src/api/user/role.ts

@@ -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) {
+export function grantRoleMenu(request: RoleGrantMenuRequest) {
-  return axios.put('/infra/system-role/bind', request);
+  return axios.put('/infra/system-role/grant-menu', request);
 }
 
 /**

orion-ops-ui/src/api/user/user.ts

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

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

@@ -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);
   };
 

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

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

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

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

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

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

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

@@ -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;

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

@@ -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>

orion-ops-ui/src/views/system/menu/types/const.ts

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

orion-ops-ui/src/views/user/role/components/role-menu-grant-modal.vue

@@ -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);
+      } as RoleGrantMenuRequest);
-      Message.success('绑定成功');
+      Message.success('分配成功');
       // 清空
       handlerClear();
     } catch (e) {

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

@@ -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());
 

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

@@ -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(() => {

orion-ops-ui/src/views/user/user/components/user-grant-roles-form-modal.vue

@@ -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
       });

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

@@ -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']"
+                    v-permission="['infra:system-user:grant-role']"
-                    @click="emits('openUpdateRole', record)">
+                    @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>

orion-ops-ui/src/views/user/user/index.vue

@@ -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(() => {