1.请求日历数据接口，等待接口返回数据的时候全屏增加loading...
2. 导入excel时等待也需要增加loading...
This commit is contained in:
parent
e3324ae28a
commit
bded5fccc4
|
|
@ -1,114 +1,116 @@
|
|||
<template>
|
||||
<div class="scheduling">
|
||||
<!-- 左侧日程列表 -->
|
||||
<a-card class="scheduling-list">
|
||||
<!-- 标题 -->
|
||||
<template slot="title">
|
||||
<div class="card-title">Scheduling</div>
|
||||
<div class="line"></div>
|
||||
</template>
|
||||
<!-- 标题结束 -->
|
||||
<!-- 内容 -->
|
||||
<div class="scheduling-list-content">
|
||||
<div class="scheduling-list-item" v-for="item of schedulingInfo" :key="item.id">
|
||||
<h4 class="title">
|
||||
<span>
|
||||
{{ item.username }}
|
||||
</span>
|
||||
<a-popconfirm title="Do You Want To Delete This Item?" placement="bottom" @confirm="onDel(item)">
|
||||
<a class="del"></a>
|
||||
</a-popconfirm>
|
||||
</h4>
|
||||
<div class="scheduling-list-item-container" @dragover.prevent @drop="onDrop(item)">
|
||||
<!-- 左侧边框 -->
|
||||
<div class="left-border">
|
||||
<div class="left-top-border">
|
||||
<div class="left-top-corner"></div>
|
||||
<a-spin :spinning="spinningMain">
|
||||
<!-- 左侧日程列表 -->
|
||||
<a-card class="scheduling-list">
|
||||
<!-- 标题 -->
|
||||
<template slot="title">
|
||||
<div class="card-title">Scheduling</div>
|
||||
<div class="line"></div>
|
||||
</template>
|
||||
<!-- 标题结束 -->
|
||||
<!-- 内容 -->
|
||||
<div class="scheduling-list-content">
|
||||
<div class="scheduling-list-item" v-for="item of schedulingInfo" :key="item.id">
|
||||
<h4 class="title">
|
||||
<span>
|
||||
{{ item.username }}
|
||||
</span>
|
||||
<a-popconfirm title="Do You Want To Delete This Item?" placement="bottom" @confirm="onDel(item)">
|
||||
<a class="del"></a>
|
||||
</a-popconfirm>
|
||||
</h4>
|
||||
<div class="scheduling-list-item-container" @dragover.prevent @drop="onDrop(item)">
|
||||
<!-- 左侧边框 -->
|
||||
<div class="left-border">
|
||||
<div class="left-top-border">
|
||||
<div class="left-top-corner"></div>
|
||||
</div>
|
||||
<div class="left-bottom-border"></div>
|
||||
</div>
|
||||
<div class="left-bottom-border"></div>
|
||||
<!-- 左侧边框结束 -->
|
||||
<div class="scheduling-list-item-content">
|
||||
<template v-for="(station, index) in item.stationList">
|
||||
<span
|
||||
:key="station.stationId"
|
||||
class="draggable"
|
||||
draggable
|
||||
@dragstart="onDragStart(station, item.userId)"
|
||||
>
|
||||
{{ station.stationName + (index == item.stationList.length - 1 ? '' : '、') }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 右侧边框 -->
|
||||
<div class="right-border">
|
||||
<div class="right-top-border"></div>
|
||||
<div class="right-bottom-border"></div>
|
||||
</div>
|
||||
<!-- 右侧边框结束 -->
|
||||
</div>
|
||||
<!-- 左侧边框结束 -->
|
||||
<div class="scheduling-list-item-content">
|
||||
<template v-for="(station, index) in item.stationList">
|
||||
<span
|
||||
:key="station.stationId"
|
||||
class="draggable"
|
||||
draggable
|
||||
@dragstart="onDragStart(station, item.userId)"
|
||||
>
|
||||
{{ station.stationName + (index == item.stationList.length - 1 ? '' : '、') }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 右侧边框 -->
|
||||
<div class="right-border">
|
||||
<div class="right-top-border"></div>
|
||||
<div class="right-bottom-border"></div>
|
||||
</div>
|
||||
<!-- 右侧边框结束 -->
|
||||
</div>
|
||||
<custom-empty v-if="!schedulingInfo || !schedulingInfo.length" style="margin-top: 40px"></custom-empty>
|
||||
</div>
|
||||
<custom-empty v-if="!schedulingInfo || !schedulingInfo.length" style="margin-top: 40px"></custom-empty>
|
||||
</div>
|
||||
<!-- 内容结束 -->
|
||||
</a-card>
|
||||
<div class="scheduling-calendar">
|
||||
<!-- 日历 -->
|
||||
<a-calendar v-model="currentDate" @select="onSelectDate">
|
||||
<template slot="headerRender">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-form">
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-model class="search-form-form">
|
||||
<a-form-model-item label="Month" style="marign-bottom: 0">
|
||||
<custom-month-picker v-model="currentMonth" :allow-clear="false"></custom-month-picker>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-col>
|
||||
<a-space class="btn-group">
|
||||
<a-button @click="onAdd" type="primary">
|
||||
<img src="@/assets/images/global/add.png" alt="" />
|
||||
Add
|
||||
</a-button>
|
||||
<a-button @click="onEdit" type="primary">
|
||||
<img src="@/assets/images/global/edit.png" alt="" />
|
||||
Edit
|
||||
</a-button>
|
||||
<a-button type="primary" @click="onDownloadTpl">
|
||||
<img src="@/assets/images/global/export.png" alt="" />
|
||||
Download Template
|
||||
</a-button>
|
||||
<a-upload :custom-request="onImport" accept=".xlsx, .xls" :show-upload-list="false">
|
||||
<a-button type="primary">
|
||||
<img src="@/assets/images/global/import.png" alt="" />
|
||||
Import
|
||||
<!-- 内容结束 -->
|
||||
</a-card>
|
||||
<div class="scheduling-calendar">
|
||||
<!-- 日历 -->
|
||||
<a-calendar v-model="currentDate" @select="onSelectDate">
|
||||
<template slot="headerRender">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-form">
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-model class="search-form-form">
|
||||
<a-form-model-item label="Month" style="marign-bottom: 0">
|
||||
<custom-month-picker v-model="currentMonth" :allow-clear="false"></custom-month-picker>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-col>
|
||||
<a-space class="btn-group">
|
||||
<a-button @click="onAdd" type="primary">
|
||||
<img src="@/assets/images/global/add.png" alt="" />
|
||||
Add
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<a-button type="primary" @click="onExport">
|
||||
<img src="@/assets/images/global/export.png" alt="" />
|
||||
Export
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-row>
|
||||
</div>
|
||||
<!-- 搜索栏结束 -->
|
||||
</template>
|
||||
<!-- 日历内部内容 -->
|
||||
<template slot="dateCellRender" slot-scope="value">
|
||||
<div
|
||||
class="scheduling-calendar-content"
|
||||
v-if="scheduleList[value.format(dateFormat)] && scheduleList[value.format(dateFormat)].length"
|
||||
>
|
||||
<div class="item" v-for="item in scheduleList[value.format(dateFormat)]" :key="item.id">
|
||||
{{ `${item.username}(${item.stationList.length})` }}
|
||||
<a-button @click="onEdit" type="primary">
|
||||
<img src="@/assets/images/global/edit.png" alt="" />
|
||||
Edit
|
||||
</a-button>
|
||||
<a-button type="primary" @click="onDownloadTpl">
|
||||
<img src="@/assets/images/global/export.png" alt="" />
|
||||
Download Template
|
||||
</a-button>
|
||||
<a-upload :custom-request="onImport" accept=".xlsx, .xls" :show-upload-list="false">
|
||||
<a-button :loading="isImport" type="primary">
|
||||
<img src="@/assets/images/global/import.png" alt="" />
|
||||
Import
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<a-button type="primary" @click="onExport">
|
||||
<img src="@/assets/images/global/export.png" alt="" />
|
||||
Export
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 日历内部内容 -->
|
||||
</a-calendar>
|
||||
<!-- 日历结束 -->
|
||||
</div>
|
||||
<!-- 搜索栏结束 -->
|
||||
</template>
|
||||
<!-- 日历内部内容 -->
|
||||
<template slot="dateCellRender" slot-scope="value">
|
||||
<div
|
||||
class="scheduling-calendar-content"
|
||||
v-if="scheduleList[value.format(dateFormat)] && scheduleList[value.format(dateFormat)].length"
|
||||
>
|
||||
<div class="item" v-for="item in scheduleList[value.format(dateFormat)]" :key="item.id">
|
||||
{{ `${item.username}(${item.stationList.length})` }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 日历内部内容 -->
|
||||
</a-calendar>
|
||||
<!-- 日历结束 -->
|
||||
</div>
|
||||
</a-spin>
|
||||
|
||||
<!-- 增加/编辑排班弹窗 -->
|
||||
<custom-modal :title="isAdd ? 'Add' : 'Edit'" :width="845" v-model="visible" :okHandler="submit" destroy-on-close>
|
||||
|
|
@ -217,6 +219,8 @@ export default {
|
|||
data() {
|
||||
this.dateFormat = dateFormat
|
||||
return {
|
||||
isImport: false,
|
||||
spinningMain: false,
|
||||
currentMonth: moment(), // 当前月份
|
||||
|
||||
currentDate: moment(), // 当前日期
|
||||
|
|
@ -255,6 +259,7 @@ export default {
|
|||
methods: {
|
||||
// 获取该月日程列表
|
||||
async getList() {
|
||||
this.spinningMain = true
|
||||
try {
|
||||
this.isGettingList = true
|
||||
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)]
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
this.spinningMain = false
|
||||
} finally {
|
||||
this.isGettingList = false
|
||||
this.spinningMain = false
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -407,14 +414,17 @@ export default {
|
|||
},
|
||||
|
||||
async onImport({ file }) {
|
||||
this.isImport = true
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const { success, failure } = await postAction('/sysTask/importExcel', formData)
|
||||
this.$message.success(`${success} Success, ${failure} Fail`)
|
||||
this.isImport = false
|
||||
this.getList()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
this.isImport = false
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -645,7 +655,11 @@ export default {
|
|||
.scheduling {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
//display: flex;
|
||||
/deep/.ant-spin-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
&-list {
|
||||
flex-shrink: 0;
|
||||
width: 350px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user