添加分配角色功能.

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

@@ -20,7 +20,7 @@ export interface UserCreateRequest {
  */
 export interface UserUpdateRequest extends UserCreateRequest {
   id: number;
-  roles?: Array<number>;
+  roleIdList?: Array<number>;
   password?: string;
 }
 
@@ -106,6 +106,13 @@ export function getUserList() {
   return axios.get<UserQueryResponse[]>('/infra/system-user/list');
 }
 
+/**
+ * 查询用户的 roleId
+ */
+export function getUserRoleIdList(userId: number) {
+  return axios.get<Array<number>>('/infra/system-user/get-roles', { params: { userId } });
+}
+
 /**
  * 分页查询用户
  */

orion-ops-ui/src/components/user/role/user-role-selector.vue

@@ -0,0 +1,60 @@
+<template>
+  <a-select v-model:model-value="value"
+            :options="optionData()"
+            :allow-search="true"
+            :multiple="multiple"
+            :loading="loading"
+            :filter-option="filterOption"
+            placeholder="请选择角色" />
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'user-role-selector'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useCacheStore } from '@/store';
+  import { SelectOptionData } from '@arco-design/web-vue';
+  import { RoleStatusEnum } from '@/views/user/role/types/enum.types';
+
+  const props = defineProps({
+    modelValue: Object,
+    loading: Boolean,
+    multiple: Boolean,
+  });
+
+  const emits = defineEmits(['update:modelValue']);
+
+  const value = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(e) {
+      emits('update:modelValue', e);
+    }
+  });
+
+  // 选项数据
+  const cacheStore = useCacheStore();
+  const optionData = (): SelectOptionData[] => {
+    return cacheStore.roles.map(s => {
+      return {
+        label: `${s.name} (${s.code})`,
+        disabled: s.status === RoleStatusEnum.DISABLED.value,
+        value: s.id,
+      };
+    });
+  };
+
+  // 搜索
+  const filterOption = (searchValue: string, option: { label: string; }) => {
+    return option.label.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+  };
+</script>
+
+<style scoped>
+
+</style>

orion-ops-ui/src/store/modules/app/index.ts

@@ -110,7 +110,7 @@ const useAppStore = defineStore('app', {
         // 未配置菜单
         if (this.serverMenu.length === 0) {
           Notification.error({
-            content: '该用户未配置菜单, 请先配置',
+            content: '该用户未配置菜单, 请先联系管理员配置',
             closable: true,
           });
         }

orion-ops-ui/src/store/modules/cache/index.ts

@@ -1,10 +1,12 @@
 import { defineStore } from 'pinia';
 import { CacheState } from './types';
 import { MenuQueryResponse } from '@/api/system/menu';
+import { RoleQueryResponse } from '@/api/user/role';
 
 const useCacheStore = defineStore('cache', {
   state: (): CacheState => ({
-    menus: []
+    menus: [],
+    roles: [],
   }),
 
   getters: {},
@@ -13,16 +15,30 @@ const useCacheStore = defineStore('cache', {
     /**
      * 更新菜单
      */
-    updateMenu(menus: MenuQueryResponse[]) {
+    updateMenus(menus: MenuQueryResponse[]) {
       this.menus = menus;
     },
 
     /**
      * 清空菜单
      */
-    resetMenu() {
+    resetMenus() {
       this.menus = [];
     },
+
+    /**
+     * 更新角色
+     */
+    updateRoles(roles: RoleQueryResponse[]) {
+      this.roles = roles;
+    },
+
+    /**
+     * 清空角色
+     */
+    resetRoles() {
+      this.roles = [];
+    },
   },
 });
 

orion-ops-ui/src/store/modules/cache/types.ts

@@ -1,7 +1,9 @@
 import { MenuQueryResponse } from '@/api/system/menu';
+import { RoleQueryResponse } from '@/api/user/role';
 
 export interface CacheState {
   menus: MenuQueryResponse[],
+  roles: RoleQueryResponse[],
 
   [key: string]: unknown;
 }

orion-ops-ui/src/views/exception/forbidden/index.vue

@@ -2,7 +2,7 @@
   <div class="content">
     <a-result class="result" status="403" subtitle="您没有访问该资源的权限" />
     <div class="operation-row">
-      <a-button class="mr8" key="back" type="primary" @click="to('login')">重新登录</a-button>
+      <a-button class="mr8" key="back" type="primary" @click="logout">重新登录</a-button>
       <a-button key="back" type="primary" @click="to('workplace')">返回工作台</a-button>
     </div>
   </div>
@@ -10,11 +10,19 @@
 
 <script lang="ts" setup>
   import { useRouter } from 'vue-router';
+  import { useUserStore } from '@/store';
 
   const router = useRouter();
   const to = (name: string) => {
     router.push({ name: name });
   };
+
+  // 重新登录
+  const logout = () => {
+    const userStore = useUserStore();
+    userStore.logout();
+    to('login');
+  };
 </script>
 
 <script lang="ts">

orion-ops-ui/src/views/exception/not-found/index.vue

@@ -2,7 +2,7 @@
   <div class="content">
     <a-result class="result" status="404" subtitle="糟糕! 页面不见了!" />
     <div class="operation-row">
-      <a-button class="mr8" key="back" type="primary" @click="to('login')">重新登录</a-button>
+      <a-button class="mr8" key="back" type="primary" @click="logout">重新登录</a-button>
       <a-button key="back" type="primary" @click="to('workplace')">返回工作台</a-button>
     </div>
   </div>
@@ -10,11 +10,19 @@
 
 <script lang="ts" setup>
   import { useRouter } from 'vue-router';
+  import { useUserStore } from '@/store';
 
   const router = useRouter();
   const to = (name: string) => {
     router.push({ name: name });
   };
+
+  // 重新登录
+  const logout = () => {
+    const userStore = useUserStore();
+    userStore.logout();
+    to('login');
+  };
 </script>
 
 <script lang="ts">

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

@@ -260,7 +260,7 @@
       setFetchLoading(true);
       const { data } = await getMenuList(formModel);
       tableRenderData.value = data as MenuQueryResponse[];
-      cacheStore.updateMenu(tableRenderData.value);
+      cacheStore.updateMenus(tableRenderData.value);
     } finally {
       setFetchLoading(false);
     }
@@ -303,7 +303,7 @@
 
   // 卸载时清除 menu cache
   onUnmounted(() => {
-    cacheStore.resetMenu();
+    cacheStore.resetMenus();
   });
 
 </script>

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

@@ -74,7 +74,7 @@
       if (!cacheStore.menus?.length) {
         // 加载菜单
         const { data: menuData } = await getMenuList({});
-        cacheStore.updateMenu(menuData);
+        cacheStore.updateMenus(menuData);
       }
       // 获取角色菜单
       const { data: roleMenuIdList } = await getRoleMenuId(record.id);

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

@@ -83,7 +83,7 @@
             </a-button>
           </a-popconfirm>
           <!-- 绑定菜单 -->
-          <a-button v-permission="['infra:system-menu:bind']"
+          <a-button v-permission="['infra:system-role:bind-menu']"
                     :disabled="record.code === 'admin'"
                     type="text"
                     size="mini"

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

@@ -34,7 +34,7 @@
   // 卸载时清除 menu cache
   onUnmounted(() => {
     const cacheStore = useCacheStore();
-    cacheStore.resetMenu();
+    cacheStore.resetMenus();
   });
 
 </script>

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

@@ -24,16 +24,16 @@
         <a-form-item field="username" label="用户名">
           <a-input v-model="formModel.username" :disabled="!isAddHandle" placeholder="请输入用户名" />
         </a-form-item>
+        <!-- 花名 -->
+        <a-form-item field="nickname" label="花名">
+          <a-input v-model="formModel.nickname" placeholder="请输入花名" />
+        </a-form-item>
         <!-- 密码 -->
         <a-form-item v-if="isAddHandle"
                      field="password"
                      label="密码">
           <a-input-password v-model="formModel.password" placeholder="请输入密码" />
         </a-form-item>
-        <!-- 花名 -->
-        <a-form-item field="nickname" label="花名">
-          <a-input v-model="formModel.nickname" placeholder="请输入花名" />
-        </a-form-item>
         <!-- 手机号 -->
         <a-form-item field="mobile" label="手机号">
           <a-input v-model="formModel.mobile" placeholder="请输入手机号" />

orion-ops-ui/src/views/user/user/components/user-reset-password-form-modal.vue

@@ -0,0 +1,123 @@
+<template>
+  <a-modal v-model:visible="visible"
+           body-class="modal-form"
+           title-align="start"
+           title="重置密码"
+           :top="120"
+           :align-center="false"
+           :draggable="true"
+           :mask-closable="false"
+           :unmount-on-close="true"
+           :ok-button-props="{ disabled: loading }"
+           :cancel-button-props="{ disabled: loading }"
+           :on-before-ok="handlerOk"
+           @close="handleClose">
+    <a-spin :loading="loading">
+      <a-form :model="formModel"
+              ref="formRef"
+              label-align="right"
+              :style="{ width: '460px' }"
+              :label-col-props="{ span: 6 }"
+              :wrapper-col-props="{ span: 18 }">
+        <!-- 用户名 -->
+        <a-form-item field="username" label="用户名">
+          <a-input v-model="formModel.username" :disabled="true" />
+        </a-form-item>
+        <!-- 花名 -->
+        <a-form-item field="nickname" label="花名">
+          <a-input v-model="formModel.nickname" :disabled="true" />
+        </a-form-item>
+        <!-- 密码 -->
+        <a-form-item field="password" label="新密码" :rules="password">
+          <a-input-password v-model="formModel.password" placeholder="请输入新密码" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'user-user-reset-password-form-modal'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import { password } from '../types/form.rules';
+  import { resetUserPassword } from '@/api/user/user';
+  import { Message } from '@arco-design/web-vue';
+  import { md5 } from '@/utils';
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+
+  const defaultForm = () => {
+    return {
+      id: undefined,
+      username: undefined,
+      nickname: undefined,
+      password: undefined,
+    };
+  };
+
+  const formRef = ref<any>();
+  const formModel = reactive<Record<string, any>>(defaultForm());
+
+  // 打开
+  const open = (record: any) => {
+    renderForm({ ...defaultForm(), ...record });
+    setVisible(true);
+  };
+
+  // 渲染表单
+  const renderForm = (record: any) => {
+    Object.keys(formModel).forEach(k => {
+      formModel[k] = record[k];
+    });
+  };
+
+  defineExpose({ open });
+
+  // 确定
+  const handlerOk = async () => {
+    setLoading(true);
+    try {
+      // 验证参数
+      const error = await formRef.value.validate();
+      if (error) {
+        return false;
+      }
+      // 修改
+      await resetUserPassword({
+        id: formModel.id,
+        password: md5(formModel.password)
+      } as any);
+      Message.success('修改成功');
+      // 清空
+      handlerClear();
+    } catch (e) {
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+    setVisible(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -107,6 +107,7 @@
           <!-- 重置密码 -->
           <a-button type="text"
                     size="mini"
+                    :disabled="record.id === userStore.id"
                     v-permission="['infra:system-user:reset-password']"
                     @click="emits('openResetPassword', record)">
             重置密码

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

@@ -0,0 +1,141 @@
+<template>
+  <a-modal v-model:visible="visible"
+           body-class="modal-form"
+           title-align="start"
+           title="分配角色"
+           :top="120"
+           :align-center="false"
+           :draggable="true"
+           :mask-closable="false"
+           :unmount-on-close="true"
+           :ok-button-props="{ disabled: saveLoading }"
+           :cancel-button-props="{ disabled: saveLoading }"
+           :on-before-ok="handlerOk"
+           @close="handleClose">
+    <a-spin :loading="saveLoading">
+      <a-form :model="formModel"
+              ref="formRef"
+              label-align="right"
+              :style="{ width: '460px' }"
+              :label-col-props="{ span: 6 }"
+              :wrapper-col-props="{ span: 18 }">
+        <!-- 用户名 -->
+        <a-form-item field="username" label="用户名">
+          <a-input v-model="formModel.username" :disabled="true" />
+        </a-form-item>
+        <!-- 花名 -->
+        <a-form-item field="nickname" label="花名">
+          <a-input v-model="formModel.nickname" :disabled="true" />
+        </a-form-item>
+        <!-- 角色 -->
+        <a-form-item field="roles" label="角色">
+          <user-role-selector v-model="formModel.roleIdList"
+                              :loading="roleLoading"
+                              :multiple="true" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'user-user-update-roles-form-modal'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import { Message } from '@arco-design/web-vue';
+  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';
+
+  const { visible, setVisible } = useVisible();
+  const { loading: saveLoading, setLoading: setSaveLoading } = useLoading();
+  const { loading: roleLoading, setLoading: setRoleLoading } = useLoading();
+
+  const defaultForm = () => {
+    return {
+      id: undefined,
+      username: undefined,
+      nickname: undefined,
+      roleIdList: undefined,
+    };
+  };
+
+  const formRef = ref<any>();
+  const formModel = reactive<Record<string, any>>(defaultForm());
+  const cacheStore = useCacheStore();
+
+  // 打开
+  const open = (record: any) => {
+    renderForm({ ...defaultForm(), ...record });
+    setVisible(true);
+    loadRoles();
+  };
+
+  // 渲染表单
+  const renderForm = (record: any) => {
+    Object.keys(formModel).forEach(k => {
+      formModel[k] = record[k];
+    });
+  };
+
+  // 加载角色
+  const loadRoles = async () => {
+    try {
+      setRoleLoading(true);
+      // 获取全部角色
+      if (!cacheStore.roles?.length) {
+        const { data } = await getRoleList();
+        cacheStore.updateRoles(data);
+      }
+      // 加载用户角色
+      const { data: roleIdList } = await getUserRoleIdList(formModel.id);
+      formModel.roleIdList = roleIdList;
+    } finally {
+      setRoleLoading(false);
+    }
+  };
+
+  defineExpose({ open });
+
+  // 确定
+  const handlerOk = async () => {
+    setSaveLoading(true);
+    try {
+      await updateUserRole({
+        id: formModel.id,
+        roleIdList: formModel.roleIdList
+      });
+      Message.success('修改成功');
+      // 清空
+      handlerClear();
+    } catch (e) {
+      return false;
+    } finally {
+      setSaveLoading(false);
+    }
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setSaveLoading(false);
+    setRoleLoading(false);
+    setVisible(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -3,11 +3,17 @@
     <!-- 表格 -->
     <user-table ref="table"
                 @openAdd="() => modal.openAdd()"
-                @openUpdate="(e) => modal.openUpdate(e)" />
+                @openUpdate="(e) => modal.openUpdate(e)"
+                @openResetPassword="(e) => resetModal.open(e)"
+                @openUpdateRole="(e) => updateRoleModal.open(e)" />
     <!-- 添加修改模态框 -->
     <user-form-modal ref="modal"
                      @added="() => table.addedCallback()"
                      @updated="() => table.updatedCallback()" />
+    <!-- 重置密码模态框 -->
+    <user-reset-password-form-modal ref="resetModal" />
+    <!-- 分配角色模态框 -->
+    <user-update-roles-form-modal ref="updateRoleModal" />
   </div>
 </template>
 
@@ -20,10 +26,21 @@
 <script lang="ts" setup>
   import UserTable from './components/user-table.vue';
   import UserFormModal from './components/user-form-modal.vue';
-  import { ref } from 'vue';
+  import UserResetPasswordFormModal from './components/user-reset-password-form-modal.vue';
+  import UserUpdateRolesFormModal from './components/user-update-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();
+
+  // 卸载时清除 role cache
+  onUnmounted(() => {
+    const cacheStore = useCacheStore();
+    cacheStore.resetRoles();
+  });
 
 </script>