From a9a72999aa8ec59254932e3d826dacb39ef26dbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B4=E6=99=B6=E5=9C=9F=E8=B1=86?= <水晶土豆@devide>
Date: Thu, 23 Nov 2023 19:02:00 +0800
Subject: [PATCH] Thu Nov 23 19:02:00 CST 2023 inscode

---
 src/App.vue                                   |  8 +-
 src/api/api.ts                                | 32 +++++--
 src/component/humanResources/department.vue   | 90 ++++++++++++------
 src/component/humanResources/emp.vue          | 95 +++++++++----------
 .../animation/animation2.vue                  | 47 +++++++++
 .../animation/animation3.vue                  | 28 ++++++
 .../loadingComponents/loadingComponents.vue   | 87 ++++++-----------
 src/storage/promiseStorage.js                 | 17 +++-
 8 files changed, 250 insertions(+), 154 deletions(-)
 create mode 100644 src/component/loadingComponents/animation/animation2.vue
 create mode 100644 src/component/loadingComponents/animation/animation3.vue

diff --git a/src/App.vue b/src/App.vue
index 7c66782..cdbb54a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,10 +11,10 @@ import verticalTable from './component/main/verticalTable/verticalTable.vue';
 </script>
 
 <template>
-  <!-- <contractCategory></contractCategory>
-      <contract-list></contract-list>
-      <announcementType></announcementType>
-      <departments></departments> -->
+  <!-- <contractCategory></contractCategory> -->
+      <!-- <contract-list></contract-list> -->
+      <!-- <announcementType></announcementType> -->
+      <departments></departments>
   <empss></empss>
   <!-- <job-title></job-title> -->
   <verticalTable></verticalTable>
diff --git a/src/api/api.ts b/src/api/api.ts
index fbb94a6..76ba43c 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -1,8 +1,8 @@
 import request from "./index";
 import type { IParams } from './index';
-import { CONTRACT_CATEGORY, CONTRACT_LIST, CONTRACT_LIST_Type, DEPT_MENU, HUMAN_RESOURCES_DEPARTMENT, JOB_TITLE, LOGIN, TABLE_ANNOUNCEMENT,EMP_LISIT } from "./path";
+import { CONTRACT_CATEGORY, CONTRACT_LIST, CONTRACT_LIST_Type, DEPT_MENU, HUMAN_RESOURCES_DEPARTMENT, JOB_TITLE, LOGIN, TABLE_ANNOUNCEMENT, EMP_LISIT } from "./path";
 import type { AxiosResponse } from "axios";
-
+import { usePromiseStore } from '../storage/promiseStorage'
 
 interface ILoginForm {
     username: string;
@@ -43,18 +43,30 @@ export function getContractList(body: IParams): Promise<AxiosResponse<IContractC
     return request.get(CONTRACT_LIST, body);
 }
 
-export function getContractListType(): Promise<AxiosResponse<any>>{
+export function getContractListType(): Promise<AxiosResponse<any>> {
     return request.get(CONTRACT_LIST_Type, {});
 }
 
-export function getHumanResourcesDepartment(): Promise<AxiosResponse<any>>{
-    return request.get(HUMAN_RESOURCES_DEPARTMENT, {});
+export function getHumanResourcesDepartment(): Promise<AxiosResponse<any>> {
+    const send = usePromiseStore();
+    const requestPromise = request.get(HUMAN_RESOURCES_DEPARTMENT, {});
+    send.setDepartment(requestPromise);
+    send.setDepartment(new Promise((resolve, reject) => {
+        setTimeout(resolve, 5000, "延时测试");
+    }))
+    return requestPromise;
 }
 
-export function getJobTiTle() : Promise<AxiosResponse<any>>{
-    return request.get(JOB_TITLE,{});
+export function getJobTiTle(): Promise<AxiosResponse<any>> {
+    return request.get(JOB_TITLE, {});
 }
 
-export function getEmpList(body:IParams) :Promise<AxiosResponse<any>>{
-    return request.get(EMP_LISIT,body);
-}
\ No newline at end of file
+export function getEmpList(body: IParams): Promise<AxiosResponse<any>> {
+    const send = usePromiseStore();
+    const requestPromise = request.get(EMP_LISIT, body);
+    send.setEmp(requestPromise);
+    send.setEmp(new Promise((resolve, reject) => {
+        setTimeout(resolve, 3000, "延时测试");
+    }))
+    return requestPromise;
+}
diff --git a/src/component/humanResources/department.vue b/src/component/humanResources/department.vue
index f9a7005..23fe8fe 100644
--- a/src/component/humanResources/department.vue
+++ b/src/component/humanResources/department.vue
@@ -5,24 +5,26 @@ import addDownload from '@/component/main/header/add_download/addDownload.vue';
 import buttoner from '@/component/main/header/add_download/button.vue';
 import downloadItem from '@/component/main/header/add_download/downloadItem.vue';
 import ejectDialog from '@/component/main/ejectDialog.vue';
-import { ref, provide, onMounted } from 'vue';
+import { ref, provide, onMounted, watch } from 'vue';
 import { getHumanResourcesDepartment } from '@/api/api';
 import { FlatToTree } from '@/util/toTree';
 import { deepClone } from '@/util/deepCode';
 import { computed } from '@vue/reactivity';
+import loadingComponents from '@/component/loadingComponents/loadingComponents.vue';
+import animation2 from '@/component/loadingComponents/animation/animation2.vue'
 const addText = ref('添加部门');
 
 let tableData = ref([
 ])
 let respData = ref();
 const getData = () => {
-  getHumanResourcesDepartment().then((res)=>{
+  getHumanResourcesDepartment().then((res) => {
     respData.value = res.data.data.data;
     tableData.value = FlatToTree(deepClone(res.data.data.data)).tree;
   })
 }
 onMounted(async () => {
-  getData();  
+  getData();
 })
 
 let tableType = ref([
@@ -136,38 +138,68 @@ provide("cellSetStyle", ({ row, column, rowIndex, columnIndex }) => {
   }
   return;
 });
+
+
+const size = ref({
+  offsetWidth: 1,
+  offsetHeight: 1,
+  offsetLeft: 1,
+  offsetTop: 1
+});
+const commonLayout = ref();
+onMounted(() => {
+  watch(() => tableData.value, (res) => {
+    setTimeout(() => {
+      size.value.offsetWidth = commonLayout.value.offsetWidth;
+      size.value.offsetHeight = commonLayout.value.offsetHeight;
+      size.value.offsetLeft = commonLayout.value.offsetLeft;
+      size.value.offsetTop = commonLayout.value.offsetTop;
+    }, 100)
+  })
+})
 </script>
 
 <template>
-  <mains :tableType="tableType" :operation="operation">
-    <headers>
-      <!-- <headerFmainsorm></headerForm> -->
-      <addDownload>
-        <buttoner class="left" @openDialog="addDialog = true">
-          {{ addText }}
-        </buttoner>
-        <downloadItem></downloadItem>
-      </addDownload>
-    </headers>
-    <ejectDialog v-model:openDialog="addDialog">
-      <template #header>添加部门</template>
-      <el-input v-model="addDept"></el-input>
-    </ejectDialog>
-    <ejectDialog v-model:openDialog="addSubcategoriesDialog">
-      <template #header>添加子部门</template>
-      <el-input v-model="addSubDept"></el-input>
-    </ejectDialog>
-    <ejectDialog v-model:openDialog="editDialog">
-      <template #header>编辑部门名称</template>
-      <el-input v-model="editDept"></el-input>
-    </ejectDialog>
-    <ejectDialog v-model:openDialog="deleteDialog">
-      <template #header>删除</template>
-    </ejectDialog>
-  </mains>
+ 
+  <div ref="commonLayout" class="root">
+    <mains :tableType="tableType" :operation="operation">
+      <headers>
+        <!-- <headerFmainsorm></headerForm> -->
+        <addDownload>
+          <buttoner class="left" @openDialog="addDialog = true">
+            {{ addText }}
+          </buttoner>
+          <downloadItem></downloadItem>
+        </addDownload>
+      </headers>
+      <ejectDialog v-model:openDialog="addDialog">
+        <template #header>添加部门</template>
+        <el-input v-model="addDept"></el-input>
+      </ejectDialog>
+      <ejectDialog v-model:openDialog="addSubcategoriesDialog">
+        <template #header>添加子部门</template>
+        <el-input v-model="addSubDept"></el-input>
+      </ejectDialog>
+      <ejectDialog v-model:openDialog="editDialog">
+        <template #header>编辑部门名称</template>
+        <el-input v-model="editDept"></el-input>
+      </ejectDialog>
+      <ejectDialog v-model:openDialog="deleteDialog">
+        <template #header>删除</template>
+      </ejectDialog>
+    </mains>
+    <loadingComponents :width="size.offsetWidth" :height="size.offsetHeight" :top="size.offsetTop" :left="size.offsetLeft" name="department">
+      <template #animation>
+        <animation2></animation2>
+      </template>
+    </loadingComponents>
+  </div>
 </template>
 
 <style scoped>
+.root{
+  position: relative;
+}
 .left {
   margin-right: auto;
 }
diff --git a/src/component/humanResources/emp.vue b/src/component/humanResources/emp.vue
index 97aa60d..b5bf173 100644
--- a/src/component/humanResources/emp.vue
+++ b/src/component/humanResources/emp.vue
@@ -4,7 +4,7 @@ import { deepClone } from '@/util/deepCode'
 import { TreeToFlat, FlatToTree } from '@/util/toTree'
 import { computed } from '@vue/reactivity';
 import { getHumanResourcesDepartment, getContractCategory, getEmpList } from '@/api/api';
-import { usePromiseStore } from '@/storage/promiseStorage'
+
 
 import mains from '@/component/main/main.vue';
 import ejectDialog from '@/component/main/ejectDialog.vue';
@@ -16,6 +16,7 @@ import empSelectForm from './empSelectForm.vue';
 import loadingComponents from '@/component/loadingComponents/loadingComponents.vue';
 import animation1 from '@/component/loadingComponents/animation/animation1.vue'
 
+
 //树形列表
 onMounted(() => {
     getHumanResourcesDepartment().then((res) => {
@@ -52,12 +53,10 @@ const tablePagination = reactive({
     pageSize: 10,
     total: 1
 });
-const sendRequestFirst = usePromiseStore();
 const getData = () => {
     empSelect.value.page = tablePagination.currentPage;
     empSelect.value.limit = tablePagination.pageSize;
-    sendRequestFirst.setSendRequestFirst( getEmpList({ page: tablePagination.currentPage, limit: tablePagination.pageSize, deptName: JSON.stringify(treeValue.value) }));
-    sendRequestFirst.getSendRequestFirst().then((res) => {
+    getEmpList({ page: tablePagination.currentPage, limit: tablePagination.pageSize, deptName: JSON.stringify(treeValue.value) }).then((res) => {
         if (res.data.data.code === 10000) {
             tableData.value = res.data.data.data;
             tablePagination.total = res.data.data.count;
@@ -65,10 +64,6 @@ const getData = () => {
             console.log(res.data.data.msg);
         }
     })
-    sendRequestFirst.setSendRequestFirst(new Promise((resolve,reject)=>{
-        setTimeout(resolve,5000,"延时测试");
-    }))
-    
 }
 onMounted(() => {
     getData();
@@ -217,53 +212,57 @@ onMounted(() => {
 </script>
 
 <template>
-    <loadingComponents :width="size.offsetWidth" :height="size.offsetHeight" :top="size.offsetTop" :left="size.offsetLeft">
-        <template #animation>
-            <animation1></animation1>
-        </template>
-    </loadingComponents>
     <div class="common-layout">
         <el-container>
-                <el-aside>
-                    <h2>企业组织架构</h2>
-                    <el-tree ref="treeInstance" :data="treeData" show-checkbox node-key="title"
-                        :default-expanded-keys="defExpandedKey" :default-checked-keys="defExpandedKey" :props="defaultProps"
-                        @check-change="treeCheckChange" />
-                </el-aside>
+            <el-aside>
+                <h2>企业组织架构</h2>
+                <el-tree ref="treeInstance" :data="treeData" show-checkbox node-key="title"
+                    :default-expanded-keys="defExpandedKey" :default-checked-keys="defExpandedKey" :props="defaultProps"
+                    @check-change="treeCheckChange" />
+            </el-aside>
             <el-main>
-                <div ref="commonLayout">
-                <mains :tableType="tableType" :operation="operation">
-                    <headers>
-                        <forms>
-                            <empSelectForm></empSelectForm>
-                        </forms>
-                        <addDownload>
-                            <addButton @openDialog="addDialog = true">添加合同</addButton>
-                        </addDownload>
-                    </headers>
-                    <ejectDialog v-model:openDialog="addDialog" :confirm="sendRequest">
-                        <template #header>新增类别</template>
-                        <el-input v-model="inputDialog" />
-                    </ejectDialog>
-                    <ejectDialog v-model:openDialog="editDialog" :confirm="sendRequest">
-                        <template #header>编辑类别</template>
-                        <el-input v-model="inputEditDialog" />
-                    </ejectDialog>
-                    <ejectDialog v-model:openDialog="deleteDialog">
-                        <template #header>fdsafs</template>
-                    </ejectDialog>
-                    <template #foot>
-                        <el-pagination v-model:current-page="tablePagination.currentPage"
-                            v-model:page-size="tablePagination.pageSize" :page-sizes="[10, 20, 30]" small="small"
-                            layout=" prev, pager, next,jumper, total,sizes," :total="tablePagination.total"
-                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-                    </template>
-                </mains>
-            </div>
+                <div ref="commonLayout" class="commonLayoutCss">
+                    <mains :tableType="tableType" :operation="operation">
+                        <headers>
+                            <forms>
+                                <empSelectForm></empSelectForm>
+                            </forms>
+                            <addDownload>
+                                <addButton @openDialog="addDialog = true">添加合同</addButton>
+                            </addDownload>
+                        </headers>
+                        <ejectDialog v-model:openDialog="addDialog" :confirm="sendRequest">
+                            <template #header>新增类别</template>
+                            <el-input v-model="inputDialog" />
+                        </ejectDialog>
+                        <ejectDialog v-model:openDialog="editDialog" :confirm="sendRequest">
+                            <template #header>编辑类别</template>
+                            <el-input v-model="inputEditDialog" />
+                        </ejectDialog>
+                        <ejectDialog v-model:openDialog="deleteDialog">
+                            <template #header>fdsafs</template>
+                        </ejectDialog>
+                        <template #foot>
+                            <el-pagination v-model:current-page="tablePagination.currentPage"
+                                v-model:page-size="tablePagination.pageSize" :page-sizes="[10, 20, 30]" small="small"
+                                layout=" prev, pager, next,jumper, total,sizes," :total="tablePagination.total"
+                                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+                        </template>
+                    </mains>
+                    <loadingComponents :width="size.offsetWidth" :height="size.offsetHeight" :top="size.offsetTop"
+                        :left="size.offsetLeft" name="emp">
+                        <template #animation>
+                            <animation1></animation1>
+                        </template>
+                    </loadingComponents>
+                </div>
             </el-main>
         </el-container>
     </div>
 </template>
 
 <style scoped>
+.commonLayoutCss{
+    position: relative;
+}
 </style>
\ No newline at end of file
diff --git a/src/component/loadingComponents/animation/animation2.vue b/src/component/loadingComponents/animation/animation2.vue
new file mode 100644
index 0000000..b93409d
--- /dev/null
+++ b/src/component/loadingComponents/animation/animation2.vue
@@ -0,0 +1,47 @@
+<script setup></script>
+<template>
+    <div class="loading"></div>
+</template>
+		
+<style scoped>
+.loading {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    border: 2px solid #000;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    border-radius: 100%;
+
+    animation: arrow-circle infinite 0.75s linear;
+}
+
+.loading:before,
+.loading:after {
+    position: absolute;
+    top: 24px;
+    left: -2px;
+    border-top: 5px solid #000;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    content: "";
+    transform: rotate(-30deg);
+}
+
+.loading:after {
+    top: 0;
+    left: 20.5px;
+
+    transform: rotate(150deg);
+}
+
+@keyframes arrow-circle {
+    0% {
+        transform: rotate(360deg);
+    }
+
+    100% {
+        transform: rotate(0);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/component/loadingComponents/animation/animation3.vue b/src/component/loadingComponents/animation/animation3.vue
new file mode 100644
index 0000000..bcb5f74
--- /dev/null
+++ b/src/component/loadingComponents/animation/animation3.vue
@@ -0,0 +1,28 @@
+<script></script>
+
+<template>
+    <div class="loading"></div>
+</template>
+
+<style scoped>
+.loading {
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
+    background-color: #000;
+
+    animation: ball-scale infinite linear 0.75s;
+}
+
+@keyframes ball-scale {
+    0% {
+        transform: scale(0.1);
+        opacity: 1;
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 0;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/component/loadingComponents/loadingComponents.vue b/src/component/loadingComponents/loadingComponents.vue
index 90d8c5d..78b2a47 100644
--- a/src/component/loadingComponents/loadingComponents.vue
+++ b/src/component/loadingComponents/loadingComponents.vue
@@ -1,69 +1,39 @@
 <script setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { usePromiseStore } from '@/storage/promiseStorage';
-import animation1 from './animation/animation1.vue';
 
 const prop = defineProps([
-    'width', 'height', 'top', 'left'
+    'width', 'height', 'top', 'left', 'name'
 ]);
+
 const isShow = ref(false);
 const exitMask = ref(false);
-// const promise1 = new Promise((resolve, reject) => {
-//     setTimeout(resolve, 1000, 'promise 1 resolved');
-// });
-// const promise2 = new Promise((resolve, reject) => {
-//     setTimeout(resolve, 3000, 'promise 2 rejected');
-// });
 
 const promiseDelayed = new Promise((resolve, reject) => {
     setTimeout(resolve, 1000, 'promiseDelayed')
 });
 const sendRequestAll = usePromiseStore();
-(async () => {
+onMounted(async () => {
     try {
-        for (let index in sendRequestAll) {
-            if (index.slice(0, 1) === '_' || index.slice(0, 1) === '$') {
-                continue;
-            } else if (typeof (sendRequestAll[index]) === 'string') {
-                continue;
-            } else if (index.slice(0, 3) === 'set') {
-
-            } else if (index.slice(0, 3) === 'get') {
-                setTimeout(() => {
-                    Promise.race([sendRequestAll[index](), promiseDelayed]).then((res) => {
-                        if (res === 'promiseDelayed') {
-                            isShow.value = true;
-                            exitMask.value = true;
-                            sendRequestAll[index]().then((res) => {
-                                isShow.value = false;
-                                exitMask.value = false;
-                            })
-                        }
-                    });
-                }, 1000);
-            }
-            console.log(index);
-        }
-        // let result = await Promise.race([promise1, promise2, promiseDelayed]);
-        // if (result === 'promise 1 resolved') {
-        //     for(let index in prop){
-        //         console.log(prop[index]);
-        //     }
-        //     isShow.value = true;
-        //     exitMask.value = true;
-        //     console.log("please wait...")
-        // }
-        // promise2.then((res) => {
-        //     isShow.value = false;
-        //     exitMask.value = false;
-        //     console.log(res);
-        // })
-        // console.log(result);
-
+        const nameTemp = 'get' + prop.name.charAt(0).toUpperCase() + prop.name.slice(1)
+        if (sendRequestAll[nameTemp]) {
+            setTimeout(() => {
+                Promise.race([sendRequestAll[nameTemp](), promiseDelayed]).then((res) => {
+                    if (res === 'promiseDelayed') {
+                        isShow.value = true;
+                        exitMask.value = true;
+                        sendRequestAll[nameTemp]().then((res) => {
+                            isShow.value = false;
+                            exitMask.value = false;
+                        })
+                    }
+                });
+            }, 100);
+        };
     } catch (err) {
-        console.error(err);
-    }
-})();
+    console.error(err);
+}
+});
 </script>
 
 <template>
@@ -78,12 +48,11 @@ const sendRequestAll = usePromiseStore();
 
 
 <style scoped>
-
 .loading {
     position: absolute;
     display: none;
-    left: calc(var(--var-left-main) + var(--var-width-main)/2 - 15px);
-    top: calc(var(--var-top-main) + var(--var-height-main)/2 - 15px);
+    left: calc(var(--var-width-main)/2 - 15px);
+    top: calc(var(--var-height-main)/2 - 15px);
     z-index: calc(var(--var-index-main) + 1);
 }
 
@@ -94,8 +63,8 @@ const sendRequestAll = usePromiseStore();
 .mask {
     z-index: var(--var-index-main);
     position: absolute;
-    left: var(--var-left-main);
-    top: var(--var-top-main);
+    left: 0;
+    top: 0;
     width: var(--var-width-main);
     height: var(--var-height-main);
     font-size: 16px;
@@ -106,6 +75,8 @@ const sendRequestAll = usePromiseStore();
 }
 
 .test {
-    position: relative;
+    position: absolute;
+    left: 0;
+    top: 0;
 }
 </style>
\ No newline at end of file
diff --git a/src/storage/promiseStorage.js b/src/storage/promiseStorage.js
index 31c9b04..aef2c6e 100644
--- a/src/storage/promiseStorage.js
+++ b/src/storage/promiseStorage.js
@@ -3,15 +3,22 @@ import { defineStore } from "pinia";
 export const usePromiseStore = defineStore('promise', {
     state() {
         return {
-            sendRequestFirst:''
+            emp: '',
+            department: ''
         };
     },
     actions: {
-        setSendRequestFirst(sendRequestFirst){
-            this.sendRequestFirst = sendRequestFirst;
+        setEmp(emp) {
+            this.emp = emp;
         },
-        getSendRequestFirst(){
-            return this.sendRequestFirst;
+        getEmp() {
+            return this.emp;
+        },
+        setDepartment(department) {
+            this.department = department;
+        },
+        getDepartment() {
+            return this.department;
         }
     }
 });
\ No newline at end of file
-- 
GitLab