⚡ 优化用户状态交互逻辑.

2024-04-16 12:01:44 +08:00
parent e3fd75e570
commit a3e354cea9
19 changed files with 78 additions and 133 deletions
--- a/orion-ops-ui/src/views/user/role/components/role-table.vue
+++ b/orion-ops-ui/src/views/user/role/components/role-table.vue
@@ -68,27 +68,27 @@
      </template>
      <!-- 状态 -->
      <template #status="{ record }">
-        <span class="circle" :style="{
-          background: getDictValue(roleStatusKey, record.status, 'color')
-        }" />
-        {{ getDictValue(roleStatusKey, record.status) }}
+        <!-- 有修改权限 -->
+        <a-switch v-if="hasPermission('infra:system-role:update-status')"
+                  type="round"
+                  v-model="record.status"
+                  :disabled="record.code === AdminRoleCode"
+                  :checked-text="getDictValue(roleStatusKey, RoleStatus.ENABLED)"
+                  :unchecked-text="getDictValue(roleStatusKey, RoleStatus.DISABLED)"
+                  :checked-value="RoleStatus.ENABLED"
+                  :unchecked-value="RoleStatus.DISABLED"
+                  :before-change="(s) => updateStatus(record.id, s as number)" />
+        <!-- 无修改权限 -->
+        <span v-else>
+          <span class="circle" :style="{
+            background: getDictValue(roleStatusKey, record.status, 'color')
+          }" />
+          {{ getDictValue(roleStatusKey, record.status) }}
+        </span>
      </template>
      <!-- 操作 -->
      <template #handle="{ record }">
        <div class="table-handle-wrapper">
-          <!-- 修改状态 -->
-          <a-popconfirm :content="`确定要${toggleDictValue(roleStatusKey, record.status, 'label')}当前角色吗?`"
-                        position="left"
-                        type="warning"
-                        @ok="toggleRoleStatus(record)">
-            <a-button v-permission="['infra:system-role:delete']"
-                      :disabled="record.code === AdminRoleCode"
-                      :status="toggleDictValue(roleStatusKey, record.status, 'status')"
-                      type="text"
-                      size="mini">
-              {{ toggleDictValue(roleStatusKey, record.status, 'label') }}
-            </a-button>
-          </a-popconfirm>
          <!-- 分配菜单 -->
          <a-button v-permission="['infra:system-role:grant-menu']"
                    :disabled="record.code === AdminRoleCode"
@@ -136,8 +136,9 @@
  import { Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import columns from '../types/table.columns';
-  import { roleStatusKey } from '../types/const';
+  import { RoleStatus, roleStatusKey } from '../types/const';
  import { usePagination } from '@/types/table';
+  import usePermission from '@/hooks/permission';
  import { useDictStore } from '@/store';
  import { AdminRoleCode } from '@/types/const';

@@ -146,8 +147,9 @@
  const tableRenderData = ref<RoleQueryResponse[]>([]);

  const pagination = usePagination();
+  const { hasPermission } = usePermission();
  const { loading, setLoading } = useLoading();
-  const { toOptions, getDictValue, toggleDictValue, toggleDict } = useDictStore();
+  const { toOptions, getDictValue } = useDictStore();

  const formModel = reactive<RoleQueryRequest>({
    id: undefined,
@@ -156,23 +158,13 @@
    status: undefined,
  });

-  // 修改状态
-  const toggleRoleStatus = async (record: any) => {
-    try {
-      setLoading(true);
-      const toggleStatus = toggleDict(roleStatusKey, record.status);
-      // 调用修改接口
-      await updateRoleStatus({
-        id: record.id,
-        status: toggleStatus.value as number
-      });
-      Message.success(`${toggleStatus.label}成功`);
-      // 修改行状态
-      record.status = toggleStatus.value;
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
+  // 更新状态
+  const updateStatus = (id: number, status: number) => {
+    return updateRoleStatus({
+      id, status
+    }).then(() => {
+      Message.success('已' + getDictValue(roleStatusKey, status, 'label'));
+    });
  };

  // 删除当前行
--- a/orion-ops-ui/src/views/user/role/types/table.columns.ts
+++ b/orion-ops-ui/src/views/user/role/types/table.columns.ts
@@ -18,11 +18,11 @@ const columns = [
    dataIndex: 'code',
    slotName: 'code',
  }, {
-    title: '状态',
+    title: '角色状态',
    dataIndex: 'status',
    slotName: 'status',
    align: 'center',
-    width: 84,
+    width: 128,
  }, {
    title: '创建时间',
    dataIndex: 'createTime',
@@ -35,7 +35,7 @@ const columns = [
  }, {
    title: '操作',
    slotName: 'handle',
-    width: 240,
+    width: 198,
    align: 'center',
    fixed: 'right',
  },
--- a/orion-ops-ui/src/views/user/user/components/user-table.vue
+++ b/orion-ops-ui/src/views/user/user/components/user-table.vue
@@ -77,37 +77,32 @@
      <template #username="{ record }">
        <span class="span-blue text-copy"
              @click="copy(record.username)">
-          {{ record.username }}`
+          {{ record.username }}
        </span>
      </template>
      <!-- 状态 -->
      <template #status="{ record }">
-        <span class="circle" :style="{
-          background: getDictValue(userStatusKey, record.status, 'color')
-        }" />
-        {{ getDictValue(userStatusKey, record.status) }}
+        <!-- 有修改权限 -->
+        <a-switch v-if="hasPermission('infra:system-user:update-status')"
+                  type="round"
+                  v-model="record.status"
+                  :disabled="record.id === userStore.id"
+                  :checked-text="getDictValue(userStatusKey, UserStatus.ENABLED)"
+                  :unchecked-text="getDictValue(userStatusKey, UserStatus.DISABLED)"
+                  :checked-value="UserStatus.ENABLED"
+                  :unchecked-value="UserStatus.DISABLED"
+                  :before-change="(s) => updateStatus(record.id, s as number)" />
+        <!-- 无修改权限 -->
+        <span v-else>
+          <span class="circle" :style="{
+            background: getDictValue(userStatusKey, record.status, 'color')
+          }" />
+          {{ getDictValue(userStatusKey, record.status) }}
+        </span>
      </template>
      <!-- 操作 -->
      <template #handle="{ record }">
        <div class="table-handle-wrapper">
-          <!-- 启用/停用 -->
-          <a-popconfirm :content="`确定要${UserStatus.ENABLED === record.status
-                        ? getDictValue(userStatusKey, UserStatus.DISABLED)
-                        : getDictValue(userStatusKey, UserStatus.ENABLED)}当前用户?`"
-                        position="left"
-                        type="warning"
-                        @ok="updateStatus(record)">
-            <a-button v-permission="['infra:system-user:update-status']"
-                      type="text"
-                      size="mini"
-                      :disabled="record.id === userStore.id">
-              {{
-                UserStatus.ENABLED === record.status
-                  ? getDictValue(userStatusKey, UserStatus.DISABLED)
-                  : getDictValue(userStatusKey, UserStatus.ENABLED)
-              }}
-            </a-button>
-          </a-popconfirm>
          <!-- 修改 -->
          <a-button type="text"
                    size="mini"
@@ -167,12 +162,13 @@
  import { reactive, ref, onMounted } from 'vue';
  import { deleteUser, getUserPage, updateUserStatus } from '@/api/user/user';
  import { Message } from '@arco-design/web-vue';
-  import useLoading from '@/hooks/loading';
  import columns from '../types/table.columns';
  import { userStatusKey, UserStatus } from '../types/const';
+  import useLoading from '@/hooks/loading';
  import { usePagination } from '@/types/table';
-  import { useDictStore, useUserStore } from '@/store';
+  import usePermission from '@/hooks/permission';
  import { useRouter } from 'vue-router';
+  import { useDictStore, useUserStore } from '@/store';
  import { copy } from '@/hooks/copy';

  const emits = defineEmits(['openAdd', 'openUpdate', 'openResetPassword', 'openGrantRole']);
@@ -180,8 +176,9 @@
  const tableRenderData = ref<UserQueryResponse[]>([]);

  const pagination = usePagination();
+  const { hasPermission } = usePermission();
  const { loading, setLoading } = useLoading();
-  const { toOptions, getDictValue, getDict } = useDictStore();
+  const { toOptions, getDictValue } = useDictStore();

  const formModel = reactive<UserQueryRequest>({
    id: undefined,
@@ -216,23 +213,12 @@
  };

  // 更新状态
-  const updateStatus = async (record: any) => {
-    try {
-      setLoading(true);
-      // 更新状态
-      const newStatus = UserStatus.ENABLED === record.status
-        ? getDict(userStatusKey, UserStatus.DISABLED)
-        : getDict(userStatusKey, UserStatus.ENABLED);
-      await updateUserStatus({
-        id: record.id,
-        status: newStatus.value as number
-      });
-      Message.success(`${newStatus.label}成功`);
-      record.status = newStatus.value;
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
+  const updateStatus = (id: number, status: number) => {
+    return updateUserStatus({
+      id, status
+    }).then(() => {
+      Message.success('已' + getDictValue(userStatusKey, status, 'label'));
+    });
  };

  // 打开详情
--- a/orion-ops-ui/src/views/user/user/types/const.ts
+++ b/orion-ops-ui/src/views/user/user/types/const.ts
@@ -4,8 +4,6 @@ export const UserStatus = {
  DISABLED: 0,
  // 启用
  ENABLED: 1,
-  // 锁定
-  LOCKED: 2,
 };

 // 菜单配置值类型 字典项
--- a/orion-ops-ui/src/views/user/user/types/table.columns.ts
+++ b/orion-ops-ui/src/views/user/user/types/table.columns.ts
@@ -34,11 +34,11 @@ const columns = [
    ellipsis: true,
    tooltip: true,
  }, {
-    title: '状态',
+    title: '用户状态',
    dataIndex: 'status',
    slotName: 'status',
    align: 'center',
-    width: 84
+    width: 128,
  }, {
    title: '最后登录时间',
    dataIndex: 'lastLoginTime',
@@ -51,7 +51,7 @@ const columns = [
  }, {
    title: '操作',
    slotName: 'handle',
-    width: 340,
+    width: 298,
    align: 'center',
    fixed: 'right',
  },