Thu Nov 23 19:02:00 CST 2023 inscode

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>

src/api/api.ts

 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);
+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;
 }

src/component/humanResources/department.vue

@@ -5,18 +5,20 @@ 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;
   })
@@ -136,9 +138,30 @@ 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>
+ 
+  <div ref="commonLayout" class="root">
     <mains :tableType="tableType" :operation="operation">
       <headers>
         <!-- <headerFmainsorm></headerForm> -->
@@ -165,9 +188,18 @@ provide("cellSetStyle", ({ row, column, rowIndex, columnIndex }) => {
         <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;
 }

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,11 +212,6 @@ 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>
@@ -231,7 +221,7 @@ onMounted(() => {
                     @check-change="treeCheckChange" />
             </el-aside>
             <el-main>
-                <div ref="commonLayout">
+                <div ref="commonLayout" class="commonLayoutCss">
                     <mains :tableType="tableType" :operation="operation">
                         <headers>
                             <forms>
@@ -259,6 +249,12 @@ onMounted(() => {
                                 @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>
@@ -266,4 +262,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
+.commonLayoutCss{
+    position: relative;
+}
 </style>
\ No newline at end of file

src/component/loadingComponents/animation/animation2.vue

+<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

src/component/loadingComponents/animation/animation3.vue

+<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

src/component/loadingComponents/loadingComponents.vue

 <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') {
+        const nameTemp = 'get' + prop.name.charAt(0).toUpperCase() + prop.name.slice(1)
+        if (sendRequestAll[nameTemp]) {
             setTimeout(() => {
-                    Promise.race([sendRequestAll[index](), promiseDelayed]).then((res) => {
+                Promise.race([sendRequestAll[nameTemp](), promiseDelayed]).then((res) => {
                     if (res === 'promiseDelayed') {
                         isShow.value = true;
                         exitMask.value = true;
-                            sendRequestAll[index]().then((res) => {
+                        sendRequestAll[nameTemp]().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);
-
+            }, 100);
+        };
     } catch (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

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