feat:更新列表

auto-imports.d.ts

@@ -12,6 +12,7 @@ declare global {
   const customRef: typeof import('vue')['customRef']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
+  const deleteUser: typeof import('./src/api/roleApi')['deleteUser']
   const effectScope: typeof import('vue')['effectScope']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']

src/api/roleApi.ts

@@ -15,4 +15,15 @@ export function getUserList(data:UserListQuery):Promise<UserListReturn>{
         method:'POST',
         data
     })
+}
+
+// 删除用户
+export function deleteUser(userId:string){
+    return http({
+        url:'/api/v1/AdminRoleControllers/DelUser',
+        method:'POST',
+        params:{
+            userId
+        }
+    })
 }

src/assets/styles/common.scss

@@ -13,3 +13,15 @@
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   }
 }
+// 弹性盒布局
+.flex-content{
+  display: flex;
+  align-items: center;
+  gap:8px;
+  &.center{
+    justify-content: center;
+  }
+  &.right{
+    justify-content: right;
+  }
+}

src/components/Ls-UI/LsListButton.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="ls-list-button">
+        <n-button strong secondary type="primary" size="small" @click="handleSearch">
+            搜索
+            <template #icon>
+                <n-icon>
+                    <SearchOutline />
+                </n-icon>
+            </template>
+        </n-button>
+        <n-button strong secondary size="small" @click="handleReset">
+            重置
+            <template #icon>
+                <n-icon>
+                    <Refresh />
+                </n-icon>
+            </template>
+        </n-button>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { SearchOutline, Refresh } from '@vicons/ionicons5';
+const emit = defineEmits<{
+    (event: 'search'): void,
+    (event: 'reset'): void
+}>();
+const handleSearch = () => {
+    emit('search');
+};
+const handleReset = () => {
+    emit('reset');
+}
+</script>
+<style scoped lang='scss'>
+.ls-list-button {
+    display: flex;
+    align-items: center;
+    gap: $miniGap;
+}
+</style>

src/views/role/pages/Auth.vue

@@ -1,65 +1,106 @@
 <template>
   <div class="main__container table">
     <header class="table-header">
-      <n-input-group style="width:440px">
+      <div class="table-header__search">
-        <n-input :style="{ width: '50%' }" placeholder="请输入用户名称" v-model:value="roleName" />
+        <n-input placeholder="请输入用户名称" v-model:value="queryInfo.userName" size="small" style="width: 240px;" clearable />
-        <n-button strong secondary type="primary">
+        <n-select placeholder="请选择角色" v-model:value="queryInfo.roleName" :options="options" size="small"
-          搜索
+          style="width: 240px;" clearable/>
-          <template #icon>
+      </div>
-            <n-icon>
+      <ls-list-button @search="init" @reset="resetList"></ls-list-button>
-              <SearchOutline />
-            </n-icon>
-          </template>
-        </n-button>
-      </n-input-group>
     </header>
     <main class="table-main" ref="tableMainRef">
       <n-data-table v-if="height" :columns="columns" :data="data" :max-height="`${height}px`"
-        :min-height="`${height}px`" />
+        :min-height="`${height}px`">
+         <template #empty>
+            <LsEmpty type="no-data" title="暂无数据" description="Not Found 404"></LsEmpty>
+         </template>
+      </n-data-table>
       <div class="table-main__pagination">
         <n-pagination v-model:page="pagination.page" v-model:page-size="pagination.pageSize" :item-count="data.length"
           show-size-picker :page-sizes="[10, 20, 30, 40]">
-          <template #prefix="{ itemCount, startIndex }">
+          <template #prefix="{ itemCount }">
             共 {{ itemCount }} 项
           </template>
         </n-pagination>
       </div>
     </main>
   </div>
+  <!-- 弹窗 -->
+  <n-modal v-model:show="addRoleDialog">
+    <n-card style="width: 450px" title="授权角色" :bordered="false" size="huge" role="dialog" aria-modal="true">
+      <n-input-group>
+        <n-input readonly :style="{ width: '70%' }" placeholder="请从角色库选择角色" />
+        <n-button type="warning" strong secondary :style="{ width: '30%' }">
+          角色库
+          <template #icon>
+            <n-icon>
+              <Server />
+            </n-icon>
+          </template>
+        </n-button>
+      </n-input-group>
+      <template #footer>
+        <div class="flex-content right">
+          <n-button type="primary" size="small">授 权</n-button>
+          <n-button @click="addRoleDialog = false" size="small">关 闭</n-button>
+        </div>
+      </template>
+    </n-card>
+  </n-modal>
 </template>
 
 <script setup lang='ts'>
-import { SearchOutline } from '@vicons/ionicons5';
+import { Server } from '@vicons/ionicons5';
-import { getUserList } from '@/api/roleApi';
+import { getUserList, deleteUser } from '@/api/roleApi';
-import { DataTableColumns, NButton, useMessage } from 'naive-ui';
+import { DataTableColumns, NButton, NTag, useDialog, useMessage } from 'naive-ui';
+import LsEmpty from '@/components/Ls-UI/LsEmpty.vue';
 
 const message = useMessage();
 const tableMainRef = ref<HTMLElement | null>(null);
-const roleName = ref('');
+const queryInfo = reactive({
+  roleName: void 0,
+  userName: ''
+});
 const total = ref(0);
 const pagination = reactive<PageController>({
   pageSize: 10,
   page: 1,
 });
+const options = ref([]);
 const data = ref([]);
 const height = ref(null);
+const dialog = useDialog();
+const addRoleDialog = ref(false);
+const operationUuid = ref('');
 
 // 类似render - 函数式组件渲染
 function createColumns({
-  sendMail
+  handleDelete,
+  handleAuthorize,
+  handleMenuAssign,
+  handleAssignJob
 }: {
-  sendMail: (rowData: UserRaw) => void
+  handleDelete: (rowData: UserRaw) => void,
+  handleAuthorize: (rowData: UserRaw) => void,
+  handleMenuAssign: (rowData: UserRaw) => void,
+  handleAssignJob: (rowData: UserRaw) => void,
 }): DataTableColumns<UserRaw> {
   return [
     {
       title: '用户名',
-      key: 'userName'
+      key: 'userName',
+      align: 'center'
     },
     {
       title: '性别',
       key: 'sex',
+      align: 'center',
       render(row: UserRaw) {
-        return h('span', {}, {
+        return h(NTag, {
+          type: row.sex === '男' ? 'primary' : row.sex === '女' ? 'error' : 'default',
+          bordered: false,
+          class: 'user-table__gender-tag'
+        }, {
           default: () => `${row.sex || '未知'}`
         })
       }
@@ -67,8 +108,9 @@ function createColumns({
     {
       title: '职位',
       key: 'jobCode',
+      align: 'center',
       render(row: UserRaw) {
-        return h('span', {}, {
+        return h('span', { class: 'user-table__job' }, {
           default: () => `${row.jobCode || '无职位'}`
         })
       }
@@ -76,47 +118,117 @@ function createColumns({
     {
       title: '菜单权限',
       key: 'menuName',
+      align: 'center',
       render(row: UserRaw) {
-        return h('span', {}, {
+        return h('span', { class: 'user-table__menu' }, {
           default: () => `${row.menuName || '无权限'}`
         })
       }
     },
+    {
+      title: '电话',
+      key: 'phoneNumber',
+      align: 'center',
+      render(row: UserRaw) {
+        return h('span', { class: 'user-table__phone' }, {
+          default: () => `${row.phoneNumber || '无号码'}`
+        })
+      }
+    },
     {
       title: '操作',
       key: 'actions',
+      align: 'center',
       render(row: UserRaw) {
-        return h(
+        return h('div', { class: 'user-table__actions' }, [
-          NButton,
+          h(NButton, {
-          {
             size: 'small',
-            onClick: () => sendMail(row)
+            type: 'primary',
-          },
+            strong: true,
-          { default: () => '点击用户' }
+            secondary: true,
-        )
+            class: 'user-table__action-btn',
+            onClick: () => handleAuthorize(row)
+          }, { default: () => '授权用户' }),
+          h(NButton, {
+            size: 'small',
+            type: 'error',
+            strong: true,
+            secondary: true,
+            class: 'user-table__action-btn',
+            onClick: () => handleDelete(row)
+          }, { default: () => '删除用户' }),
+          h(NButton, {
+            size: 'small',
+            type: 'info',
+            strong: true,
+            secondary: true,
+            class: 'user-table__action-btn',
+            onClick: () => handleMenuAssign(row)
+          }, { default: () => '菜单分配' }),
+          h(NButton, {
+            size: 'small',
+            type: 'warning',
+            strong: true,
+            secondary: true,
+            class: 'user-table__action-btn',
+            onClick: () => handleAssignJob(row)
+          }, { default: () => '赋予职位' })
+        ])
       }
     }
   ]
 }
 // 生成表格列
 const columns = createColumns({
-  sendMail(rowData) {
+  handleAuthorize(rowData) {
+    addRoleDialog.value = true;
+    operationUuid.value = rowData.id;
+  },
+  handleDelete(rowData) {
+    dialog.warning({
+      title: '警告',
+      content: `你确定删除用户${rowData.userName}？`,
+      positiveText: '确定',
+      negativeText: '不确定',
+      draggable: true,
+      onPositiveClick: () => {
+        deleteUser(rowData.id).then(() => {
+          message.success('删除成功！');
+          init();
+        }).catch((error) => {
+          message.error(error.message);
+        })
+      },
+      onNegativeClick: () => {
+        message.info('取消')
+      }
+    })
+  },
+  handleMenuAssign(rowData) {
+    message.error(`我点击了${rowData.userName}`);
+  },
+  handleAssignJob(rowData) {
     message.error(`我点击了${rowData.userName}`);
   }
 })
-
-
 const init = async () => {
   try {
     const { users, totalCount } = await getUserList({
       ...pagination,
-      roleName: roleName.value
+      ...queryInfo
     });
     total.value = totalCount;
     data.value = users;
   } catch (error) {
     message.error(error.message);
   }
+};
+const resetList = () => {
+  pagination.page = 1;
+  pagination.pageSize = 10;
+  queryInfo.roleName = void 0;
+  queryInfo.userName = '';
+  init();
 }
 onMounted(() => {
   if (tableMainRef.value) {
@@ -133,7 +245,14 @@ onMounted(() => {
   height: 100%;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   padding: 0 $normolGap;
+
+  &__search {
+    display: flex;
+    align-items: center;
+    gap: $miniGap;
+  }
 }
 
 .table-main {
@@ -149,4 +268,32 @@ onMounted(() => {
     justify-content: flex-end;
   }
 }
+
+.user-table {
+
+  // 文本样式
+  :deep() &__job,
+  :deep() &__menu,
+  :deep() &__phone {
+    font-size: 14px;
+    color: var(--n-text-color);
+  }
+
+  // 操作按钮容器
+  :deep() &__actions {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 6px;
+    width: 100%;
+    max-width: 200px;
+    margin: 0 auto;
+  }
+
+  // 操作按钮
+  :deep() &__action-btn.n-button {
+    width: 100%;
+    white-space: nowrap;
+  }
+}
 </style>