From 894347c7107fe5f328601c8b23baab8fbfc3aae1 Mon Sep 17 00:00:00 2001
From: "chen.home" <1147347984@qq.com>
Date: Thu, 25 Aug 2022 00:06:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(list):=20=E5=A2=9E=E5=8A=A0=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/module/list.ts                 |  28 +++++++
 src/service/api/mock.ts             |   5 ++
 src/views/list/commonList/index.vue | 124 ++++++++++++++++++++++++----
 3 files changed, 140 insertions(+), 17 deletions(-)
 create mode 100644 mock/module/list.ts
 create mode 100644 src/service/api/mock.ts

diff --git a/mock/module/list.ts b/mock/module/list.ts
new file mode 100644
index 0000000..0224086
--- /dev/null
+++ b/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);
+    },
+  },
+];
diff --git a/src/service/api/mock.ts b/src/service/api/mock.ts
new file mode 100644
index 0000000..b20ac78
--- /dev/null
+++ b/src/service/api/mock.ts
@@ -0,0 +1,5 @@
+import { mockRequest } from '../http';
+
+export function fetchUserList() {
+  return mockRequest.get('/userList');
+}
diff --git a/src/views/list/commonList/index.vue b/src/views/list/commonList/index.vue
index 65f87cb..d0c3f79 100644
--- a/src/views/list/commonList/index.vue
+++ b/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-button type="primary">
-          <template #icon><i-icon-park-outline-add-one /></template>
-          新建
-        </n-button>
-        <n-button strong secondary>
-          <template #icon><i-icon-park-outline-afferent /></template>
-          批量导入
-        </n-button>
-        <n-button strong secondary class="ml-a">
-          <template #icon><i-icon-park-outline-download /></template>
-          下载
-        </n-button>
-      </div>
+      <n-space vertical size="large">
+        <div class="flex gap-4">
+          <n-button type="primary">
+            <template #icon><i-icon-park-outline-add-one /></template>
+            新建
+          </n-button>
+          <n-button strong secondary>
+            <template #icon><i-icon-park-outline-afferent /></template>
+            批量导入
+          </n-button>
+          <n-button strong secondary class="ml-a">
+            <template #icon><i-icon-park-outline-download /></template>
+            下载
+          </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">
-import { ref } from 'vue';
+<script setup lang="tsx">
+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>