Skip to content

C
Component

weixin_43301624 / Component
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 0
Fork 0
C
Component
提交 a9a72999 编写于 作者: 水 水晶土豆
浏览文件
操作

Thu Nov 23 19:02:00 CST 2023 inscode

上级 b829dd15
隐藏空白更改
内联 并排
Showing with 250 addition and 154 deletion
src/App.vue
浏览文件 @ a9a72999
......@@ -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
浏览文件 @ a9a72999
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;
}
src/component/humanResources/department.vue
浏览文件 @ a9a72999
......@@ -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;
}
......
src/component/humanResources/emp.vue
浏览文件 @ a9a72999
......@@ -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
src/component/loadingComponents/animation/animation2.vue 0 → 100644
浏览文件 @ a9a72999
<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 0 → 100644
浏览文件 @ a9a72999
<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
浏览文件 @ a9a72999
<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
src/storage/promiseStorage.js
浏览文件 @ a9a72999
......@@ -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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或