1.请求日历数据接口,等待接口返回数据的时候全屏增加loading...

2. 导入excel时等待也需要增加loading...
This commit is contained in:
任珮宇 2024-01-29 10:35:52 +08:00
parent e3324ae28a
commit bded5fccc4

View File

@ -1,5 +1,6 @@
<template> <template>
<div class="scheduling"> <div class="scheduling">
<a-spin :spinning="spinningMain">
<!-- 左侧日程列表 --> <!-- 左侧日程列表 -->
<a-card class="scheduling-list"> <a-card class="scheduling-list">
<!-- 标题 --> <!-- 标题 -->
@ -80,7 +81,7 @@
Download Template Download Template
</a-button> </a-button>
<a-upload :custom-request="onImport" accept=".xlsx, .xls" :show-upload-list="false"> <a-upload :custom-request="onImport" accept=".xlsx, .xls" :show-upload-list="false">
<a-button type="primary"> <a-button :loading="isImport" type="primary">
<img src="@/assets/images/global/import.png" alt="" /> <img src="@/assets/images/global/import.png" alt="" />
Import Import
</a-button> </a-button>
@ -109,6 +110,7 @@
</a-calendar> </a-calendar>
<!-- 日历结束 --> <!-- 日历结束 -->
</div> </div>
</a-spin>
<!-- 增加/编辑排班弹窗 --> <!-- 增加/编辑排班弹窗 -->
<custom-modal :title="isAdd ? 'Add' : 'Edit'" :width="845" v-model="visible" :okHandler="submit" destroy-on-close> <custom-modal :title="isAdd ? 'Add' : 'Edit'" :width="845" v-model="visible" :okHandler="submit" destroy-on-close>
@ -217,6 +219,8 @@ export default {
data() { data() {
this.dateFormat = dateFormat this.dateFormat = dateFormat
return { return {
isImport: false,
spinningMain: false,
currentMonth: moment(), // currentMonth: moment(), //
currentDate: moment(), // currentDate: moment(), //
@ -255,6 +259,7 @@ export default {
methods: { methods: {
// //
async getList() { async getList() {
this.spinningMain = true
try { try {
this.isGettingList = true this.isGettingList = true
const { result } = await getAction(`/sysTask/findList?yearMonth=${this.currentMonth.format('YYYY-MM')}`) const { result } = await getAction(`/sysTask/findList?yearMonth=${this.currentMonth.format('YYYY-MM')}`)
@ -262,8 +267,10 @@ export default {
this.schedulingInfo = this.scheduleList[this.currentDate.format(dateFormat)] this.schedulingInfo = this.scheduleList[this.currentDate.format(dateFormat)]
} catch (error) { } catch (error) {
console.error(error) console.error(error)
this.spinningMain = false
} finally { } finally {
this.isGettingList = false this.isGettingList = false
this.spinningMain = false
} }
}, },
@ -407,14 +414,17 @@ export default {
}, },
async onImport({ file }) { async onImport({ file }) {
this.isImport = true
try { try {
const formData = new FormData() const formData = new FormData()
formData.append('file', file) formData.append('file', file)
const { success, failure } = await postAction('/sysTask/importExcel', formData) const { success, failure } = await postAction('/sysTask/importExcel', formData)
this.$message.success(`${success} Success, ${failure} Fail`) this.$message.success(`${success} Success, ${failure} Fail`)
this.isImport = false
this.getList() this.getList()
} catch (error) { } catch (error) {
console.error(error) console.error(error)
this.isImport = false
} }
}, },
@ -645,7 +655,11 @@ export default {
.scheduling { .scheduling {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
//display: flex;
/deep/.ant-spin-container {
height: 100%;
display: flex; display: flex;
}
&-list { &-list {
flex-shrink: 0; flex-shrink: 0;
width: 350px; width: 350px;