style: 优化操作列图标

src/typings/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
     BooleanTag: typeof import('./../components/custom/boolean-tag.vue')['default']
     ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
+    ButtonPopconfirm: typeof import('./../components/custom/button-popconfirm.vue')['default']
     CodeMirror: typeof import('./../components/custom/code-mirror.vue')['default']
     copy: typeof import('./../components/custom/role-select copy.vue')['default']
     CountTo: typeof import('./../components/custom/count-to.vue')['default']

src/views/system/user/index.vue

@@ -1,13 +1,16 @@
 <script setup lang="tsx">
 import { ref } from 'vue';
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NButton } from 'naive-ui';
 import { useLoading } from '@sa/hooks';
 import { fetchBatchDeleteUser, fetchGetDeptTree, fetchGetUserList } from '@/service/api/system';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { useDict } from '@/hooks/business/dict';
+import { useAuth } from '@/hooks/business/auth';
+import ButtonIcon from '@/components/custom/button-icon.vue';
 import DictTag from '@/components/custom/dict-tag.vue';
 import { $t } from '@/locales';
+import ButtonPopconfirm from '@/components/custom/button-popconfirm.vue';
 import UserOperateDrawer from './modules/user-operate-drawer.vue';
 import UserSearch from './modules/user-search.vue';
 
@@ -18,6 +21,7 @@ defineOptions({
 useDict('sys_user_sex');
 useDict('sys_normal_disable');
 
+const { hasAuth } = useAuth();
 const appStore = useAppStore();
 
 const {
@@ -104,23 +108,44 @@ const {
       title: $t('common.operate'),
       align: 'center',
       width: 130,
-      render: row => (
+      render: row => {
-        <div class="flex-center gap-8px">
+        const editBtn = () => {
-          <NButton type="primary" ghost size="small" onClick={() => edit(row.userId!)}>
+          if (!hasAuth('system:user:edit')) {
-            {$t('common.edit')}
+            return null;
-          </NButton>
+          }
-          <NPopconfirm onPositiveClick={() => handleDelete(row.userId!)}>
+          return (
-            {{
+            <ButtonIcon
-              default: () => $t('common.confirmDelete'),
+              text
-              trigger: () => (
+              type="primary"
-                <NButton type="error" ghost size="small">
+              icon="material-symbols:drive-file-rename-outline-outline"
-                  {$t('common.delete')}
+              tooltipContent={$t('common.edit')}
-                </NButton>
+              onClick={() => edit(row.userId!)}
-              )
+            />
-            }}
+          );
-          </NPopconfirm>
+        };
-        </div>
+
-      )
+        const deleteBtn = () => {
+          if (!hasAuth('system:user:remove')) {
+            return null;
+          }
+          return (
+            <ButtonPopconfirm
+              text
+              type="error"
+              icon="material-symbols:delete-outline"
+              popconfirmContent={$t('common.confirmDelete')}
+              onPositiveClick={() => handleDelete(row.userId!)}
+            />
+          );
+        };
+
+        return (
+          <div class="flex-center gap-16px">
+            {editBtn()}
+            {deleteBtn()}
+          </div>
+        );
+      }
     }
   ]
 });
@@ -214,6 +239,9 @@ function handleResetTreeData() {
             v-model:columns="columnChecks"
             :disabled-delete="checkedRowKeys.length === 0"
             :loading="loading"
+            :show-add="hasAuth('system:user:add')"
+            :show-delete="hasAuth('system:user:remove')"
+            :show-export="hasAuth('system:user:export')"
             @add="handleAdd"
             @delete="handleBatchDelete"
             @refresh="getData"
@@ -237,6 +265,7 @@ function handleResetTreeData() {
           :operate-type="operateType"
           :row-data="editingData"
           :dept-data="deptData"
+          :dept-id="searchParams.deptId"
           @submitted="getDataByPage"
         />
       </NCard>

src/views/system/user/modules/user-operate-drawer.vue

@@ -16,6 +16,8 @@ interface Props {
   rowData?: Api.System.User | null;
   /** the dept tree data */
   deptData?: Api.Common.CommonTreeRecord;
+  /** the dept id */
+  deptId?: CommonType.IdType | null;
 }
 
 const props = defineProps<Props>();
@@ -86,6 +88,7 @@ async function getUserInfo() {
 function handleUpdateModelWhenEdit() {
   if (props.operateType === 'add') {
     Object.assign(model, createDefaultModel());
+    model.deptId = props.deptId;
     return;
   }