1.请求日历数据接口，等待接口返回数据的时候全屏增加loading...
2. 导入excel时等待也需要增加loading...
This commit is contained in:
parent
e3324ae28a
commit
bded5fccc4
|
|
@ -1,114 +1,116 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="scheduling">
|
<div class="scheduling">
|
||||||
<!-- 左侧日程列表 -->
|
<a-spin :spinning="spinningMain">
|
||||||
<a-card class="scheduling-list">
|
<!-- 左侧日程列表 -->
|
||||||
<!-- 标题 -->
|
<a-card class="scheduling-list">
|
||||||
<template slot="title">
|
<!-- 标题 -->
|
||||||
<div class="card-title">Scheduling</div>
|
<template slot="title">
|
||||||
<div class="line"></div>
|
<div class="card-title">Scheduling</div>
|
||||||
</template>
|
<div class="line"></div>
|
||||||
<!-- 标题结束 -->
|
</template>
|
||||||
<!-- 内容 -->
|
<!-- 标题结束 -->
|
||||||
<div class="scheduling-list-content">
|
<!-- 内容 -->
|
||||||
<div class="scheduling-list-item" v-for="item of schedulingInfo" :key="item.id">
|
<div class="scheduling-list-content">
|
||||||
<h4 class="title">
|
<div class="scheduling-list-item" v-for="item of schedulingInfo" :key="item.id">
|
||||||
<span>
|
<h4 class="title">
|
||||||
{{ item.username }}
|
<span>
|
||||||
</span>
|
{{ item.username }}
|
||||||
<a-popconfirm title="Do You Want To Delete This Item?" placement="bottom" @confirm="onDel(item)">
|
</span>
|
||||||
<a class="del"></a>
|
<a-popconfirm title="Do You Want To Delete This Item?" placement="bottom" @confirm="onDel(item)">
|
||||||
</a-popconfirm>
|
<a class="del"></a>
|
||||||
</h4>
|
</a-popconfirm>
|
||||||
<div class="scheduling-list-item-container" @dragover.prevent @drop="onDrop(item)">
|
</h4>
|
||||||
<!-- 左侧边框 -->
|
<div class="scheduling-list-item-container" @dragover.prevent @drop="onDrop(item)">
|
||||||
<div class="left-border">
|
<!-- 左侧边框 -->
|
||||||
<div class="left-top-border">
|
<div class="left-border">
|
||||||
<div class="left-top-corner"></div>
|
<div class="left-top-border">
|
||||||
|
<div class="left-top-corner"></div>
|
||||||
|
</div>
|
||||||
|
<div class="left-bottom-border"></div>
|
||||||
</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>
|
||||||
<!-- 左侧边框结束 -->
|
|
||||||
<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>
|
||||||
|
<custom-empty v-if="!schedulingInfo || !schedulingInfo.length" style="margin-top: 40px"></custom-empty>
|
||||||
</div>
|
</div>
|
||||||
<custom-empty v-if="!schedulingInfo || !schedulingInfo.length" style="margin-top: 40px"></custom-empty>
|
<!-- 内容结束 -->
|
||||||
</div>
|
</a-card>
|
||||||
<!-- 内容结束 -->
|
<div class="scheduling-calendar">
|
||||||
</a-card>
|
<!-- 日历 -->
|
||||||
<div class="scheduling-calendar">
|
<a-calendar v-model="currentDate" @select="onSelectDate">
|
||||||
<!-- 日历 -->
|
<template slot="headerRender">
|
||||||
<a-calendar v-model="currentDate" @select="onSelectDate">
|
<!-- 搜索栏 -->
|
||||||
<template slot="headerRender">
|
<div class="search-form">
|
||||||
<!-- 搜索栏 -->
|
<a-row>
|
||||||
<div class="search-form">
|
<a-col :span="6">
|
||||||
<a-row>
|
<a-form-model class="search-form-form">
|
||||||
<a-col :span="6">
|
<a-form-model-item label="Month" style="marign-bottom: 0">
|
||||||
<a-form-model class="search-form-form">
|
<custom-month-picker v-model="currentMonth" :allow-clear="false"></custom-month-picker>
|
||||||
<a-form-model-item label="Month" style="marign-bottom: 0">
|
</a-form-model-item>
|
||||||
<custom-month-picker v-model="currentMonth" :allow-clear="false"></custom-month-picker>
|
</a-form-model>
|
||||||
</a-form-model-item>
|
</a-col>
|
||||||
</a-form-model>
|
<a-space class="btn-group">
|
||||||
</a-col>
|
<a-button @click="onAdd" type="primary">
|
||||||
<a-space class="btn-group">
|
<img src="@/assets/images/global/add.png" alt="" />
|
||||||
<a-button @click="onAdd" type="primary">
|
Add
|
||||||
<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-button>
|
</a-button>
|
||||||
</a-upload>
|
<a-button @click="onEdit" type="primary">
|
||||||
<a-button type="primary" @click="onExport">
|
<img src="@/assets/images/global/edit.png" alt="" />
|
||||||
<img src="@/assets/images/global/export.png" alt="" />
|
Edit
|
||||||
Export
|
</a-button>
|
||||||
</a-button>
|
<a-button type="primary" @click="onDownloadTpl">
|
||||||
</a-space>
|
<img src="@/assets/images/global/export.png" alt="" />
|
||||||
</a-row>
|
Download Template
|
||||||
</div>
|
</a-button>
|
||||||
<!-- 搜索栏结束 -->
|
<a-upload :custom-request="onImport" accept=".xlsx, .xls" :show-upload-list="false">
|
||||||
</template>
|
<a-button :loading="isImport" type="primary">
|
||||||
<!-- 日历内部内容 -->
|
<img src="@/assets/images/global/import.png" alt="" />
|
||||||
<template slot="dateCellRender" slot-scope="value">
|
Import
|
||||||
<div
|
</a-button>
|
||||||
class="scheduling-calendar-content"
|
</a-upload>
|
||||||
v-if="scheduleList[value.format(dateFormat)] && scheduleList[value.format(dateFormat)].length"
|
<a-button type="primary" @click="onExport">
|
||||||
>
|
<img src="@/assets/images/global/export.png" alt="" />
|
||||||
<div class="item" v-for="item in scheduleList[value.format(dateFormat)]" :key="item.id">
|
Export
|
||||||
{{ `${item.username}(${item.stationList.length})` }}
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-row>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- 搜索栏结束 -->
|
||||||
</template>
|
</template>
|
||||||
<!-- 日历内部内容 -->
|
<!-- 日历内部内容 -->
|
||||||
</a-calendar>
|
<template slot="dateCellRender" slot-scope="value">
|
||||||
<!-- 日历结束 -->
|
<div
|
||||||
</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>
|
<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;
|
//display: flex;
|
||||||
|
/deep/.ant-spin-container {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
&-list {
|
&-list {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 350px;
|
width: 350px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user