From bded5fccc429e23517f844ec0a21efabdef315e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= <peiyu_ren@163.com>
Date: Mon, 29 Jan 2024 10:35:52 +0800
Subject: [PATCH] =?UTF-8?q?1.=E8=AF=B7=E6=B1=82=E6=97=A5=E5=8E=86=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=8E=A5=E5=8F=A3=EF=BC=8C=E7=AD=89=E5=BE=85=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E8=BF=94=E5=9B=9E=E6=95=B0=E6=8D=AE=E7=9A=84=E6=97=B6?=
 =?UTF-8?q?=E5=80=99=E5=85=A8=E5=B1=8F=E5=A2=9E=E5=8A=A0loading...=202.=20?=
 =?UTF-8?q?=E5=AF=BC=E5=85=A5excel=E6=97=B6=E7=AD=89=E5=BE=85=E4=B9=9F?=
 =?UTF-8?q?=E9=9C=80=E8=A6=81=E5=A2=9E=E5=8A=A0loading...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/Scheduling.vue | 222 +++++++++++++++++---------------
 1 file changed, 118 insertions(+), 104 deletions(-)

diff --git a/src/views/system/Scheduling.vue b/src/views/system/Scheduling.vue
index e571a17..d233dec 100644
--- a/src/views/system/Scheduling.vue
+++ b/src/views/system/Scheduling.vue
@@ -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;