From c6dd8dbc948097260355958540ef93a482d1608c Mon Sep 17 00:00:00 2001
From: "chen.home" <1147347984@qq.com>
Date: Sat, 27 Aug 2022 00:12:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(component):=20=E5=B0=81=E8=A3=85=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/module/list.ts                           |  2 +-
 src/components/{ => common}/NaiveProvider.vue |  0
 src/components/{ => custom}/EIcon.vue         |  0
 src/components/custom/Pagination.vue          | 51 +++++++++++++++++++
 src/components/{ => custom}/SvgIcon.vue       |  0
 src/views/list/commonList/index.vue           | 42 ++++++++++-----
 6 files changed, 80 insertions(+), 15 deletions(-)
 rename src/components/{ => common}/NaiveProvider.vue (100%)
 rename src/components/{ => custom}/EIcon.vue (100%)
 create mode 100644 src/components/custom/Pagination.vue
 rename src/components/{ => custom}/SvgIcon.vue (100%)

diff --git a/mock/module/list.ts b/mock/module/list.ts
index 3d02a96..0224086 100644
--- a/mock/module/list.ts
+++ b/mock/module/list.ts
@@ -2,7 +2,7 @@ import Mock from 'mockjs';
 import { resultSuccess } from '../utils';
 
 const userList = Mock.mock({
-  'list|20': [
+  'list|10': [
     {
       id: '@id',
       name: '@cname',
diff --git a/src/components/NaiveProvider.vue b/src/components/common/NaiveProvider.vue
similarity index 100%
rename from src/components/NaiveProvider.vue
rename to src/components/common/NaiveProvider.vue
diff --git a/src/components/EIcon.vue b/src/components/custom/EIcon.vue
similarity index 100%
rename from src/components/EIcon.vue
rename to src/components/custom/EIcon.vue
diff --git a/src/components/custom/Pagination.vue b/src/components/custom/Pagination.vue
new file mode 100644
index 0000000..7b01276
--- /dev/null
+++ b/src/components/custom/Pagination.vue
@@ -0,0 +1,51 @@
+<template>
+  <n-pagination
+    v-if="props.count > 0"
+    v-model:page="page"
+    v-model:page-size="pageSize"
+    :item-count="props.count"
+    :display-order="displayOrder"
+    show-size-picker
+    :page-sizes="pageSizes"
+    @update-page="changePage"
+    @update-page-size="changePage"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const emit = defineEmits(['change']);
+const props = defineProps({
+  count: {
+    type: Number,
+    default: 0,
+  },
+});
+const page = ref(1);
+const pageSize = ref(10);
+const displayOrder: Array<'pages' | 'size-picker' | 'quick-jumper'> = ['size-picker', 'pages'];
+const pageSizes = [
+  {
+    label: '10 每页',
+    value: 10,
+  },
+  {
+    label: '20 每页',
+    value: 20,
+  },
+  {
+    label: '30 每页',
+    value: 30,
+  },
+  {
+    label: '50 每页',
+    value: 50,
+  },
+];
+
+function changePage() {
+  emit('change', page.value, pageSize.value);
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/SvgIcon.vue b/src/components/custom/SvgIcon.vue
similarity index 100%
rename from src/components/SvgIcon.vue
rename to src/components/custom/SvgIcon.vue
diff --git a/src/views/list/commonList/index.vue b/src/views/list/commonList/index.vue
index d0c3f79..4e8ef10 100644
--- a/src/views/list/commonList/index.vue
+++ b/src/views/list/commonList/index.vue
@@ -1,10 +1,10 @@
 <template>
   <n-space vertical size="large">
     <n-card>
-      <n-grid :x-gap="12" :y-gap="8" :cols="23">
+      <n-grid :x-gap="24" :cols="23">
         <n-gi :span="5">
           <n-grid :cols="5">
-            <n-grid-item :span="1" class="flex-center">条件1</n-grid-item>
+            <n-grid-item :span="1" class="flex-center justify-start">条件1</n-grid-item>
             <n-grid-item :span="4"><n-input v-model:value="model.condition_1" placeholder="Input" /></n-grid-item>
           </n-grid>
         </n-gi>
@@ -56,7 +56,8 @@
             下载
           </n-button>
         </div>
-        <n-data-table :bordered="false" :columns="columns" :data="listData" :pagination="pagination" />
+        <n-data-table :bordered="false" :columns="columns" :data="listData" />
+        <Pagination :count="0" @change="changePage" />
       </n-space>
     </n-card>
   </n-space>
@@ -65,7 +66,7 @@
 <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 type { DataTableColumns } from 'naive-ui';
 import { NButton, NPopconfirm, NSpace, NSwitch, NTag } from 'naive-ui';
 
 const model = ref({
@@ -111,8 +112,9 @@ const columns: DataTableColumns = [
     align: 'center',
     key: 'disabled',
     render: (row) => {
+      const rowData = row as unknown as UserList;
       return (
-        <NSwitch value={row.disabled} onUpdateValue={(disabled) => handleUpdateDisabled(disabled, row.id)}>
+        <NSwitch value={rowData.disabled} onUpdateValue={(disabled) => handleUpdateDisabled(disabled, rowData.id)}>
           {{ checked: () => '启用', unchecked: () => '禁用' }}
         </NSwitch>
       );
@@ -123,13 +125,13 @@ const columns: DataTableColumns = [
     align: 'center',
     key: 'actions',
     render: (row) => {
-      // const rowData = row as unknown as UserManagement.UserTable;
+      const rowData = row as unknown as UserList;
       return (
         <NSpace justify={'center'}>
-          <NButton size={'small'} onClick={() => sendMail(row.id)}>
+          <NButton size={'small'} onClick={() => sendMail(rowData.id)}>
             编辑
           </NButton>
-          <NPopconfirm onPositiveClick={() => sendMail(row.id)}>
+          <NPopconfirm onPositiveClick={() => sendMail(rowData.id)}>
             {{
               default: () => '确认删除',
               trigger: () => <NButton size={'small'}>删除</NButton>,
@@ -140,23 +142,35 @@ const columns: DataTableColumns = [
     },
   },
 ];
-const sendMail = (id) => {
-  console.log('%c 🚀 ~ [row]-122', 'font-size:13px; background:pink; color:#bf2c9f;', id);
+const sendMail = (id: number) => {
+  window.$message.success(`用户id:${id}`);
 };
-const handleUpdateDisabled = (disabled, id) => {
+function handleUpdateDisabled(disabled: boolean, id: number) {
   const index = listData.value.findIndex((item) => item.id === id);
   if (index > -1) {
     listData.value[index].disabled = disabled;
   }
-};
-const listData = ref();
-const pagination = {};
+}
+interface UserList {
+  id: number;
+  name: string;
+  age: number;
+  gender: string;
+  email: string;
+  address: string;
+  role: string;
+  disabled: boolean;
+}
+const listData = ref<UserList[]>([]);
 
 onMounted(() => {
   fetchUserList().then((res) => {
     listData.value = res.data;
   });
 });
+function changePage(page: number, size: number) {
+  window.$message.success(`分页器:${page},${size}`);
+}
 </script>
 
 <style scoped></style>