feat(list): 增加表格示例

mock/module/list.ts

@@ -0,0 +1,28 @@
+import Mock from 'mockjs';
+import { resultSuccess } from '../utils';
+
+const userList = Mock.mock({
+  'list|10': [
+    {
+      id: '@id',
+      name: '@cname',
+      'age|20-36': 36,
+      'gender|1': ['0', '1', null],
+      email: '@email("qq.com")',
+      address: '@county(true)	',
+      'role|1': ['super', 'admin', 'user'],
+      'disabled|1': true,
+    },
+  ],
+});
+
+export default [
+  {
+    url: '/mock/userList',
+    timeout: 1000,
+    method: 'get',
+    response: () => {
+      return resultSuccess(userList.list);
+    },
+  },
+];

src/service/api/mock.ts

@@ -0,0 +1,5 @@
+import { mockRequest } from '../http';
+
+export function fetchUserList() {
+  return mockRequest.get('/userList');
+}

src/views/list/commonList/index.vue

@@ -27,7 +27,7 @@
           </n-grid>
         </n-gi>
         <n-gi :span="3">
-          <n-space justify="space-between">
+          <n-space justify="end">
             <n-button type="primary">
               <template #icon><i-icon-park-outline-search /></template>
               搜索
@@ -41,32 +41,122 @@
       </n-grid>
     </n-card>
     <n-card>
-      <div class="flex gap-4">
+      <n-space vertical size="large">
-        <n-button type="primary">
+        <div class="flex gap-4">
-          <template #icon><i-icon-park-outline-add-one /></template>
+          <n-button type="primary">
-          新建
+            <template #icon><i-icon-park-outline-add-one /></template>
-        </n-button>
+            新建
-        <n-button strong secondary>
+          </n-button>
-          <template #icon><i-icon-park-outline-afferent /></template>
+          <n-button strong secondary>
-          批量导入
+            <template #icon><i-icon-park-outline-afferent /></template>
-        </n-button>
+            批量导入
-        <n-button strong secondary class="ml-a">
+          </n-button>
-          <template #icon><i-icon-park-outline-download /></template>
+          <n-button strong secondary class="ml-a">
-          下载
+            <template #icon><i-icon-park-outline-download /></template>
-        </n-button>
+            下载
-      </div>
+          </n-button>
+        </div>
+        <n-data-table :bordered="false" :columns="columns" :data="listData" :pagination="pagination" />
+      </n-space>
     </n-card>
   </n-space>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
-import { ref } from 'vue';
+import { onMounted, ref, h } from 'vue';
+import { fetchUserList } from '~/src/service/api/mock';
+import type { DataTableColumns, PaginationProps } from 'naive-ui';
+import { NButton, NPopconfirm, NSpace, NSwitch, NTag } from 'naive-ui';
+
 const model = ref({
   condition_1: '',
   condition_2: '',
   condition_3: '',
   condition_4: '',
 });
+
+const columns: DataTableColumns = [
+  {
+    title: '姓名',
+    align: 'center',
+    key: 'name',
+  },
+  {
+    title: '年龄',
+    align: 'center',
+    key: 'age',
+  },
+  {
+    title: '性别',
+    align: 'center',
+    key: 'gender',
+  },
+  {
+    title: '邮箱',
+    align: 'center',
+    key: 'email',
+  },
+  {
+    title: '地址',
+    align: 'center',
+    key: 'address',
+  },
+  {
+    title: '角色',
+    align: 'center',
+    key: 'role',
+  },
+  {
+    title: '状态',
+    align: 'center',
+    key: 'disabled',
+    render: (row) => {
+      return (
+        <NSwitch value={row.disabled} onUpdateValue={(disabled) => handleUpdateDisabled(disabled, row.id)}>
+          {{ checked: () => '启用', unchecked: () => '禁用' }}
+        </NSwitch>
+      );
+    },
+  },
+  {
+    title: '操作',
+    align: 'center',
+    key: 'actions',
+    render: (row) => {
+      // const rowData = row as unknown as UserManagement.UserTable;
+      return (
+        <NSpace justify={'center'}>
+          <NButton size={'small'} onClick={() => sendMail(row.id)}>
+            编辑
+          </NButton>
+          <NPopconfirm onPositiveClick={() => sendMail(row.id)}>
+            {{
+              default: () => '确认删除',
+              trigger: () => <NButton size={'small'}>删除</NButton>,
+            }}
+          </NPopconfirm>
+        </NSpace>
+      );
+    },
+  },
+];
+const sendMail = (id) => {
+  console.log('%c 🚀 ~ [row]-122', 'font-size:13px; background:pink; color:#bf2c9f;', id);
+};
+const handleUpdateDisabled = (disabled, id) => {
+  const index = listData.value.findIndex((item) => item.id === id);
+  if (index > -1) {
+    listData.value[index].disabled = disabled;
+  }
+};
+const listData = ref();
+const pagination = {};
+
+onMounted(() => {
+  fetchUserList().then((res) => {
+    listData.value = res.data;
+  });
+});
 </script>
 
 <style scoped></style>