修改交互逻辑.

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);
-      Message.success('绑定成功');
+      } as RoleGrantMenuRequest);
+      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']"
-                    @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>

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