feat: 增加空状态组件，修改全局空状态；优化scheduling日期字体大小，修复穿梭框中存在的问题

src/App.vue

@@ -3,6 +3,9 @@
     <div id="app">
       <router-view/>
     </div>
+    <template #renderEmpty>
+      <custom-empty></custom-empty>
+    </template>
   </a-config-provider>
 </template>
 <script>

src/components/CustomEmpty/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <a-empty :image="emptyImg"></a-empty>
+</template>
+<script>
+import emptyImg from '@/assets/images/global/no-data.png'
+
+export default {
+  data() {
+    return {
+      emptyImg
+    }
+  }
+}
+</script>

src/components/CustomPopoverSearch/index.vue

@@ -35,7 +35,7 @@
           </template>
           <template v-else>
             <div style="padding: 20px 0">
-              <a-empty></a-empty>
+              <custom-empty></custom-empty>
             </div>
           </template>
         </template>

src/components/jeecg/JSuperQuery.vue

@@ -47,13 +47,13 @@
       <a-row>
         <a-col :sm="24" :md="24-5">
 
-          <a-empty v-if="queryParamsModel.length === 0" style="margin-bottom: 12px;">
+          <custom-empty v-if="queryParamsModel.length === 0" style="margin-bottom: 12px;">
             <div slot="description">
               <span>没有任何查询条件</span>
               <a-divider type="vertical"/>
               <a @click="handleAdd">点击新增</a>
             </div>
-          </a-empty>
+          </custom-empty>
 
           <a-form v-else layout="inline">
 
@@ -194,7 +194,7 @@
               保存的查询
             </div>
 
-            <a-empty v-if="saveTreeData.length === 0" class="j-super-query-history-empty" description="没有保存任何查询"/>
+            <custom-empty v-if="saveTreeData.length === 0" class="j-super-query-history-empty" description="没有保存任何查询"/>
             <a-tree
               v-else
               class="j-super-query-history-tree"

src/components/jeecgbiz/modal/JSelectDepartModal.vue

@@ -11,7 +11,7 @@
     switchFullscreen>
     <a-spin tip="Loading..." :spinning="false">
       <a-input-search v-model="searchValue" style="margin-bottom: 1px" placeholder="Enter Department Name To Search" />
-      <a-empty v-if="filterTreeData.length===0"></a-empty>
+      <custom-empty v-if="filterTreeData.length===0"></custom-empty>
       <a-tree
         v-else
         checkable

src/main.js

@@ -56,6 +56,7 @@ import CustomTable from '@/components/CustomTable'
 import CustomModal from '@/components/CustomModal'
 import CustomDatePicker from '@/components/CustomDatePicker'
 import CustomMonthPicker from '@/components/CustomMonthPicker'
+import CustomEmpty from '@/components/CustomEmpty'
 
 
 Vue.prototype.rules = rules
@@ -77,6 +78,7 @@ Vue.component('custom-table', CustomTable)
 Vue.component('custom-modal', CustomModal)
 Vue.component('custom-date-picker', CustomDatePicker)
 Vue.component('custom-month-picker', CustomMonthPicker)
+Vue.component('custom-empty', CustomEmpty)
 
 SSO.init(() => {
   main()

src/style.less

@@ -255,7 +255,6 @@ body {
   }
 
   &-date {
-    padding: 20px 10px 10px !important;
     margin: 0 !important;
     height: 159px !important;
     border-top: none !important;
@@ -603,7 +602,7 @@ body {
 // 空状态
 .ant-empty {
   background-color: transparent;
-  color: #fff;
+  color: #145b5c;
 }
 
 // 分页器样式

src/views/system/DepartList.vue

@@ -132,9 +132,9 @@
             </div>
           </a-card>
           <a-card v-else >
-            <a-empty>
+            <custom-empty>
               <span slot="description"> 请先选择一个部门! </span>
-            </a-empty>
+            </custom-empty>
           </a-card>
         </a-tab-pane>
         <a-tab-pane tab="部门权限" key="2" forceRender>

src/views/system/DepartListSync.vue

@@ -24,7 +24,7 @@
           <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
           <!-- 树-->
           <div>
-            <a-empty v-if="departTree.length===0" description="暂无部门" style="margin-top: 8px;"/>
+            <custom-empty v-if="departTree.length===0" description="暂无部门" style="margin-top: 8px;"/>
             <template v-else>
               <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
                <span style="user-select: none">
@@ -127,9 +127,9 @@
             </div>
           </a-card>
           <a-card v-else >
-            <a-empty>
+            <custom-empty>
               <span slot="description"> 请先选择一个部门! </span>
-            </a-empty>
+            </custom-empty>
           </a-card>
         </a-tab-pane>
         <a-tab-pane tab="部门权限" key="2" forceRender>

src/views/system/Scheduling.vue

@@ -50,7 +50,7 @@
             <!-- 右侧边框结束 -->
           </div>
         </div>
-        <a-empty v-if="!schedulingInfo || !schedulingInfo.length" style="margin-top: 40px;"></a-empty>
+        <custom-empty v-if="!schedulingInfo || !schedulingInfo.length" style="margin-top: 40px;"></custom-empty>
       </div>
       <!-- 内容结束 -->
     </a-card>
@@ -117,16 +117,18 @@
       <a-spin :spinning="isGettingDetail">
         <div class="account-assign">
           <a-transfer
-            :selectedKeys="selectedStationKeys"
+            :selected-keys.sync="selectedStationKeys"
             :target-keys="targetKeys"
             :render="item => item.title"
             :operations="['Assign', 'Remove']"
             :titles="['Particulate Station', 'Roster personnel']"
             :show-select-all="false"
             @change="onChange"
-            @selectChange="handleSelectChange"
           >
-            <template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }">
+            <template
+              slot="children"
+              slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect, itemSelectAll } }"
+            >
               <!-- 左侧穿梭框中的树 -->
               <a-tree
                 v-if="direction === 'left'"
@@ -146,7 +148,9 @@
                     onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
                   }
                 "
-              />
+              >
+                <a-icon slot="switcherIcon" type="down" />
+              </a-tree>
               <!-- 右侧穿梭框中的树 -->
               <a-tree
                 v-if="direction === 'right'"
@@ -157,10 +161,12 @@
                 :expandedKeys.sync="rightAccountChildExpandedKeys"
                 @select="
                   (_, props) => {
-                    onSelectAccount(_, props, itemSelect)
+                    onSelectAccount(_, props, itemSelect, itemSelectAll)
                   }
                 "
-              />
+              >
+                <a-icon slot="switcherIcon" type="down" />
+              </a-tree>
             </template>
           </a-transfer>
 
@@ -522,10 +528,6 @@ export default {
       itemSelect(eventKey, !this.isChecked(checkedKeys, eventKey))
     },
 
-    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
-      this.selectedStationKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
-    },
-
     // 处理station列表
     handleTreeData(data, targetKeys = [], level) {
       data.forEach(item => {
@@ -557,34 +559,23 @@ export default {
     },
 
     // 选中了穿梭框右侧的树节点
-    onSelectAccount(_, e, itemSelect) {
+    onSelectAccount(_, e, itemSelect, itemSelectAll) {
-      const { eventKey, isLeaf, selected } = e.node
+      const { eventKey, isLeaf, selected } = e.node // selected 是前一个状态，也就是selected 为false时，其实是选中了
-      // selected 是前一个状态，也就是selected 为false时，其实是选中了
+      this.rightAccountChildSelectedKeys = [eventKey]
+
+      // 将所有右侧的穿梭状态重置
+      const allChildKeys = this.accountTreeData.reduce(
+        (prev, curr) => prev.concat(curr.children.map(child => child.key)),
+        []
+      )
+      itemSelectAll(allChildKeys, false)
+
       if (isLeaf) {
         // 选中了子节点，也就是站点
         this.checkedAccount = ''
-
+        itemSelect(eventKey, true) // 选中该栏
-        if (selected) {
-          // 取消选中
-          itemSelect(eventKey, false)
-        } else {
-          this.accountTreeData.forEach(account => {
-            // 将所有右侧的穿梭状态重置
-            account.children.forEach(child => {
-              itemSelect(child.key, false)
-            })
-          })
-          itemSelect(eventKey, true) // 选中该栏
-        }
       } else {
         this.checkedAccount = selected ? '' : eventKey
-        // 将所有右侧的穿梭状态重置
-        this.accountTreeData.forEach(account => {
-          // 将所有右侧的穿梭状态重置
-          account.children.forEach(child => {
-            itemSelect(child.key, false)
-          })
-        })
       }
     },
 
@@ -606,9 +597,10 @@ export default {
             }
           })
           findAccount.children.push(...children)
-          this.rightAccountChildExpandedKeys = [findAccount.key]
+          this.rightAccountChildExpandedKeys = [findAccount.key] // 展开右侧树
         }
       } else {
+        // 移除右侧穿梭框内容
         const moveKey = moveKeys[0]
         let parentIndex = -1,
           childIndex = -1
@@ -623,7 +615,6 @@ export default {
           }
         }
         this.accountTreeData[parentIndex].children.splice(childIndex, 1)
-        console.log('%c [ childIndex ]-591', 'font-size:13px; background:pink; color:#bf2c9f;', childIndex)
       }
       this.targetKeys = targetKeys
     }
@@ -649,7 +640,6 @@ export default {
   &-list {
     flex-shrink: 0;
     width: 350px;
-    height: calc(100% - 2px);
     background-color: #022024;
     border-color: rgb(12, 106, 102, 0.9);
     border-radius: 0;
@@ -806,7 +796,6 @@ export default {
   &-calendar {
     height: 100%;
     margin-left: 20px;
-    padding-right: 10px;
     .ant-fullcalendar-fullscreen {
       height: 100%;
       overflow: auto;
@@ -818,10 +807,15 @@ export default {
           padding-right: 5px;
         }
         .ant-fullcalendar-date {
-          height: 127px !important;
+          height: calc((100vh - 315px) / 6) !important;
+          padding: 10px !important;
         }
         .ant-fullcalendar-content {
-          height: 60px !important;
+          height: calc(100% - 28px) !important;
+          margin-top: 5px;
+        }
+        .ant-fullcalendar-value {
+          font-size: 20px;
         }
       }
     }

src/views/system/modules/DepartAuthModal.vue

@@ -43,9 +43,9 @@
       </div>
     </template>
     <a-card v-else :bordered="false" style="height:200px">
-      <a-empty>
+      <custom-empty>
         <span slot="description"> 请先选择一个部门! </span>
-      </a-empty>
+      </custom-empty>
     </a-card>
     <depart-datarule-modal ref="datarule"/>
   </a-card>