From 4f022b28fac05f9084e3437ccd499b14c9474da2 Mon Sep 17 00:00:00 2001
From: "chen.home" <1147347984@qq.com>
Date: Sat, 27 Aug 2022 00:48:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(hooks):=20=E5=A2=9E=E5=8A=A0=E5=B8=83?=
 =?UTF-8?q?=E5=B0=94=EF=BC=8Cloading=E7=9B=B8=E5=85=B3hooks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hook/index.ts                   |  2 ++
 src/hook/useBoolean.ts              | 30 +++++++++++++++++++++++++++++
 src/hook/useLoading.ts              | 11 +++++++++++
 src/views/list/commonList/index.vue | 23 ++++++++++++++--------
 4 files changed, 58 insertions(+), 8 deletions(-)
 create mode 100644 src/hook/useBoolean.ts
 create mode 100644 src/hook/useLoading.ts

diff --git a/src/hook/index.ts b/src/hook/index.ts
index 2bb5a6f..8a6054a 100644
--- a/src/hook/index.ts
+++ b/src/hook/index.ts
@@ -1 +1,3 @@
 export * from './useAppRouter';
+export * from './useBoolean';
+export * from './useLoading';
diff --git a/src/hook/useBoolean.ts b/src/hook/useBoolean.ts
new file mode 100644
index 0000000..5be3a36
--- /dev/null
+++ b/src/hook/useBoolean.ts
@@ -0,0 +1,30 @@
+import { ref } from 'vue';
+
+/**
+ * boolean组合式函数
+ * @param initValue 初始值
+ */
+export function useBoolean(initValue = false) {
+  const bool = ref(initValue);
+
+  function setBool(value: boolean) {
+    bool.value = value;
+  }
+  function setTrue() {
+    setBool(true);
+  }
+  function setFalse() {
+    setBool(false);
+  }
+  function toggle() {
+    setBool(!bool.value);
+  }
+
+  return {
+    bool,
+    setBool,
+    setTrue,
+    setFalse,
+    toggle,
+  };
+}
diff --git a/src/hook/useLoading.ts b/src/hook/useLoading.ts
new file mode 100644
index 0000000..d3e80d8
--- /dev/null
+++ b/src/hook/useLoading.ts
@@ -0,0 +1,11 @@
+import { useBoolean } from './useBoolean';
+
+export function useLoading(initValue = false) {
+  const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean();
+
+  return {
+    loading,
+    startLoading,
+    endLoading,
+  };
+}
diff --git a/src/views/list/commonList/index.vue b/src/views/list/commonList/index.vue
index 4e8ef10..eb7bb3a 100644
--- a/src/views/list/commonList/index.vue
+++ b/src/views/list/commonList/index.vue
@@ -4,25 +4,25 @@
       <n-grid :x-gap="24" :cols="23">
         <n-gi :span="5">
           <n-grid :cols="5">
-            <n-grid-item :span="1" class="flex-center justify-start">条件1</n-grid-item>
+            <n-grid-item :span="1" class="flex-center justify-start">姓名</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>
         <n-gi :span="5">
           <n-grid :cols="5">
-            <n-grid-item :span="1" class="flex-center">条件2</n-grid-item>
+            <n-grid-item :span="1" class="flex-center">年龄</n-grid-item>
             <n-grid-item :span="4"><n-input v-model:value="model.condition_2" placeholder="Input" /></n-grid-item>
           </n-grid>
         </n-gi>
         <n-gi :span="5">
           <n-grid :cols="5">
-            <n-grid-item :span="1" class="flex-center">条件3</n-grid-item>
+            <n-grid-item :span="1" class="flex-center">性别</n-grid-item>
             <n-grid-item :span="4"><n-input v-model:value="model.condition_3" placeholder="Input" /></n-grid-item>
           </n-grid>
         </n-gi>
         <n-gi :span="5">
           <n-grid :cols="5">
-            <n-grid-item :span="1" class="flex-center">条件4</n-grid-item>
+            <n-grid-item :span="1" class="flex-center">地址</n-grid-item>
             <n-grid-item :span="4"><n-input v-model:value="model.condition_4" placeholder="Input" /></n-grid-item>
           </n-grid>
         </n-gi>
@@ -56,8 +56,8 @@
             下载
           </n-button>
         </div>
-        <n-data-table :bordered="false" :columns="columns" :data="listData" />
-        <Pagination :count="0" @change="changePage" />
+        <n-data-table :columns="columns" :data="listData" :loading="loading" />
+        <Pagination :count="100" @change="changePage" />
       </n-space>
     </n-card>
   </n-space>
@@ -68,7 +68,9 @@ import { onMounted, ref, h } from 'vue';
 import { fetchUserList } from '~/src/service/api/mock';
 import type { DataTableColumns } from 'naive-ui';
 import { NButton, NPopconfirm, NSpace, NSwitch, NTag } from 'naive-ui';
+import { useLoading } from '@/hook';
 
+const { loading, startLoading, endLoading } = useLoading(false);
 const model = ref({
   condition_1: '',
   condition_2: '',
@@ -164,10 +166,15 @@ interface UserList {
 const listData = ref<UserList[]>([]);
 
 onMounted(() => {
-  fetchUserList().then((res) => {
+  getUserList();
+});
+async function getUserList() {
+  startLoading();
+  await fetchUserList().then((res) => {
     listData.value = res.data;
+    endLoading();
   });
-});
+}
 function changePage(page: number, size: number) {
   window.$message.success(`分页器:${page},${size}`);
 }