From fa1bdd7e3b5c15ed53fef66c89532b494072c820 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Fri, 26 May 2023 20:06:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=90=84=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomDatePicker/index.vue    | 31 +++++---
 src/components/CustomMonthPicker/index.vue   | 25 ++++++
 src/components/CustomPopoverSearch/index.vue |  2 +-
 src/components/TreeWithLine/index.vue        | 48 +++++++++--
 src/main.js                                  |  2 +
 src/style.less                               | 36 ++++++---
 src/utils/request.js                         | 14 ++--
 src/views/logManage/index.vue                | 40 +++++-----
 src/views/system/Scheduling.vue              | 83 +++++++++++++++-----
 src/views/system/UserList.vue                |  5 +-
 10 files changed, 207 insertions(+), 79 deletions(-)
 create mode 100644 src/components/CustomMonthPicker/index.vue

diff --git a/src/components/CustomDatePicker/index.vue b/src/components/CustomDatePicker/index.vue
index 36cc78f..89e25a8 100644
--- a/src/components/CustomDatePicker/index.vue
+++ b/src/components/CustomDatePicker/index.vue
@@ -1,20 +1,25 @@
 <template>
-    <a-date-picker v-bind="$attrs">
-        <img src="@/assets/images/global/calendar.png" slot="suffixIcon" alt="" srcset="">
-    </a-date-picker>
+  <a-date-picker v-bind="$attrs" v-model="innerValue">
+    <img src="@/assets/images/global/calendar.png" slot="suffixIcon" alt="" srcset="" />
+  </a-date-picker>
 </template>
 <script>
 export default {
-    props: {
-        value: {
-            type: [String, Object]
-        }
-    },
-    methods: {
-
+  props: {
+    value: {
+      type: [String, Object]
     }
+  },
+  computed: {
+    innerValue: {
+        get() {
+            return this.value
+        },
+        set(val) {
+            this.$emit('input', val)
+        }
+    }
+  }
 }
 </script>
-<style lang="">
-    
-</style>
\ No newline at end of file
+<style lang=""></style>
diff --git a/src/components/CustomMonthPicker/index.vue b/src/components/CustomMonthPicker/index.vue
new file mode 100644
index 0000000..b1f43c7
--- /dev/null
+++ b/src/components/CustomMonthPicker/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <a-month-picker v-bind="$attrs" v-model="innerValue">
+    <img src="@/assets/images/global/calendar.png" slot="suffixIcon" alt="" srcset="" />
+  </a-month-picker>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: [String, Object]
+    }
+  },
+  computed: {
+    innerValue: {
+        get() {
+            return this.value
+        },
+        set(val) {
+            this.$emit('input', val)
+        }
+    }
+  }
+}
+</script>
+<style lang=""></style>
diff --git a/src/components/CustomPopoverSearch/index.vue b/src/components/CustomPopoverSearch/index.vue
index 12e983e..078c160 100644
--- a/src/components/CustomPopoverSearch/index.vue
+++ b/src/components/CustomPopoverSearch/index.vue
@@ -7,7 +7,7 @@
       placement="bottom"
       :overlayStyle="{ width: width + 'px' }"
     >
-      <a-input ref="inputRef" :placeholder="placeholder" v-model="innerKeyWord" @click.stop="">
+      <a-input ref="inputRef" :placeholder="placeholder" v-model="innerKeyWord" @click.stop="" @keypress.enter="onSearch">
         <template slot="suffix">
           <img class="popover-search-btn" src="@/assets/images/global/search-blue.png" @click.stop="onSearch" />
         </template>
diff --git a/src/components/TreeWithLine/index.vue b/src/components/TreeWithLine/index.vue
index 24412db..29b843e 100644
--- a/src/components/TreeWithLine/index.vue
+++ b/src/components/TreeWithLine/index.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="tree-with-line">
-    <a-tree v-bind="$attrs" :selected-keys="selectedKeys" :expandedKeys="expandedKeys" @select="onSelect" @expand="onExpand">
+    <a-tree
+      v-bind="$attrs"
+      :selected-keys="selectedKeys"
+      :expandedKeys="expandedKeys"
+      @select="onSelect"
+      @expand="onExpand"
+    >
       <template slot="switcherIcon">
         <div></div>
       </template>
@@ -36,6 +42,22 @@ export default {
   @bgColor: #022024;
   ::v-deep .ant-tree {
     border-left: 1px dotted @borderColor;
+    font-size: 18px;
+    padding-top: 21px;
+    &-node-content-wrapper {
+      background-color: transparent !important;
+      height: 32px !important;
+      line-height: 32px !important;
+      padding-right: 0;
+    }
+
+    &-node-selected {
+      color: #0cebc9 !important;
+      .ant-tree-title {
+        padding-left: 10px;
+      }
+    }
+
     &-switcher {
       background: transparent !important;
       width: 17px;
@@ -44,7 +66,7 @@ export default {
         display: none;
       }
       &-icon {
-        margin-top: 3px;
+        margin-top: 7px;
         background: url(~@/assets/images/global/switcher.png) center center no-repeat;
         position: relative;
         z-index: 1;
@@ -82,20 +104,23 @@ export default {
         content: '';
         position: absolute;
         border-left: 1px dotted @borderColor;
-        top: -14px;
+        top: -17px;
         height: 100%;
         z-index: 0;
       }
-      li {
+      > li {
+        &:first-child {
+          padding-top: 0;
+        }
         &:last-child {
           position: relative;
-          padding-top: 4px;
+          padding-top: 0;
           &::after {
             content: '';
             background-color: @bgColor;
             position: absolute;
             top: 16px;
-            left: -1;
+            left: -1px;
             height: calc(100% - 14px);
             width: 3px;
             z-index: 1;
@@ -104,6 +129,10 @@ export default {
       }
     }
 
+    li {
+      padding: 0;
+    }
+
     > li:last-child {
       position: relative;
       &::after {
@@ -118,10 +147,15 @@ export default {
       }
     }
 
-    &-node-content-wrapper {
+    .ant-tree-switcher-noop + .ant-tree-node-content-wrapper {
       display: inline-block;
       width: calc(100% - 20px);
     }
+
+    .ant-tree-node-content-wrapper {
+      width: calc(100% - 36px);
+    }
+
     &-node-selected {
       .ant-tree-title {
         display: block;
diff --git a/src/main.js b/src/main.js
index b1991b3..c4dd546 100644
--- a/src/main.js
+++ b/src/main.js
@@ -55,6 +55,7 @@ import CustomSelect from '@/components/CustomSelect'
 import CustomTable from '@/components/CustomTable'
 import CustomModal from '@/components/CustomModal'
 import CustomDatePicker from '@/components/CustomDatePicker'
+import CustomMonthPicker from '@/components/CustomMonthPicker'
 
 
 Vue.prototype.rules = rules
@@ -75,6 +76,7 @@ Vue.component('custom-select', CustomSelect)
 Vue.component('custom-table', CustomTable)
 Vue.component('custom-modal', CustomModal)
 Vue.component('custom-date-picker', CustomDatePicker)
+Vue.component('custom-month-picker', CustomMonthPicker)
 
 SSO.init(() => {
   main()
diff --git a/src/style.less b/src/style.less
index e528eeb..743f634 100644
--- a/src/style.less
+++ b/src/style.less
@@ -18,12 +18,12 @@
 
 @modal-footer-border-color-split: @formInputBorderColor;
 
-.ant-btn:hover, .ant-btn:active {
+.ant-btn:hover,
+.ant-btn:active {
   color: #fff !important;
   border-color: transparent;
 }
 
-
 @font-face {
   font-family: MicrogrammaD-MediExte;
   src: url(~@/assets/fonts/MicrogrammaDMedExt.ttf);
@@ -60,6 +60,7 @@ body {
 // 表格样式
 .ant-table {
   color: #ade6ee;
+  font-size: 16px;
   &-thead {
     > tr {
       th {
@@ -285,6 +286,10 @@ body {
     }
   }
 
+  &-table {
+    background-color: #06282A !important;
+  }
+
   &-tbody {
     border-bottom: 1px solid #25454e;
   }
@@ -521,10 +526,21 @@ body {
 
 // 树形结构
 .ant-tree {
+  &-checkbox {
+    &-checked {
+      .ant-tree-checkbox-inner {
+        background-color: #00e9fe !important;
+        border-color: #00e9fe !important;
+      }
+    }
+  }
   &-checkbox-inner {
     background-color: #03353f !important;
     border-color: #0a544e !important;
     border-radius: 0;
+    &::after {
+      border-color: #000 !important;
+    }
   }
   &-node-content-wrapper {
     background-color: transparent !important;
@@ -535,24 +551,22 @@ body {
       border-color: #0a544e !important;
     }
     .ant-tree-checkbox-disabled {
-        .ant-tree-checkbox-inner {
-          &::after {
-            border-color: rgba(255, 255, 255, .2) !important;
-          }
+      .ant-tree-checkbox-inner {
+        &::after {
+          border-color: rgba(0, 0, 0, 0.3) !important;
         }
-    }
-    .ant-tree-title {
-      color: #fff !important;
+      }
     }
   }
   &-node-selected {
     .ant-tree-title {
-      color: #0cebc9;
+      color: #0cebc9 !important;
     }
   }
 
   &-title {
     user-select: none;
+    color: #ade6ee !important;
   }
 }
 
@@ -814,7 +828,7 @@ body {
 
 .ant-spin {
   &-blur::after {
-    opacity: .1;
+    opacity: 0.1;
   }
 }
 
diff --git a/src/utils/request.js b/src/utils/request.js
index adaae74..4d1ace7 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -28,7 +28,7 @@ const err = (error) => {
     console.log("------异常响应------",error.response.status)
     switch (error.response.status) {
       case 403:
-        Vue.prototype.$Jnotification.error({ message: '系统提示', description: '拒绝访问',duration: 4})
+        Vue.prototype.$Jnotification.error({ message: 'System Prompt', description: 'Access Deny',duration: 4})
         break
       case 500:
         console.log("------error.response------",error.response)
@@ -69,13 +69,13 @@ const err = (error) => {
         }
         break
       case 404:
-          Vue.prototype.$Jnotification.error({ message: '系统提示', description:'很抱歉，资源未找到!',duration: 4})
+          Vue.prototype.$Jnotification.error({ message: 'System Prompt', description:'Not Found',duration: 4})
         break
       case 504:
-        Vue.prototype.$Jnotification.error({ message: '系统提示', description: '网络超时'})
+        Vue.prototype.$Jnotification.error({ message: 'System Prompt', description: 'Network Timeout'})
         break
       case 401:
-        Vue.prototype.$Jnotification.error({ message: '系统提示', description:'很抱歉，登录已过期，请重新登录',duration: 4})
+        Vue.prototype.$Jnotification.error({ message: 'System Prompt', description:'Login Expired',duration: 4})
         if (token) {
           store.dispatch('Logout').then(() => {
             setTimeout(() => {
@@ -86,7 +86,7 @@ const err = (error) => {
         break
       default:
         Vue.prototype.$Jnotification.error({
-          message: '系统提示',
+          message: 'System Prompt',
           description: data.message,
           duration: 4
         })
@@ -94,9 +94,9 @@ const err = (error) => {
     }
   } else if (error.message) {
     if (error.message.includes('timeout')) {
-      Vue.prototype.$Jnotification.error({message: '系统提示', description: '网络超时'})
+      Vue.prototype.$Jnotification.error({message: 'System Prompt', description: 'Network Timeout'})
     } else {
-      Vue.prototype.$Jnotification.error({message: '系统提示', description: error.message})
+      Vue.prototype.$Jnotification.error({message: 'System Prompt', description: error.message})
     }
   }
   return Promise.reject(error)
diff --git a/src/views/logManage/index.vue b/src/views/logManage/index.vue
index 7e5e6fa..7a5aa09 100644
--- a/src/views/logManage/index.vue
+++ b/src/views/logManage/index.vue
@@ -17,15 +17,15 @@
       </template>
       <!-- 标题结束 -->
       <!-- 内容 -->
-      <a-spin :spinning="isGettingTreeData" style="min-height: 200px">
-        <tree-with-line
-          :treeData="treeData"
-          :selected-keys.sync="selectedKeys"
-          :expanded-keys.sync="expandedKeys"
-          @select="onSelect"
-        >
-        </tree-with-line>
-      </a-spin>
+      <a-spin :spinning="isGettingTreeData" style="margin-top: 80px; width: 100%; text-align: center;"> </a-spin>
+      <tree-with-line
+        v-if="treeData.length"
+        :treeData="treeData"
+        :selected-keys.sync="selectedKeys"
+        :expanded-keys.sync="expandedKeys"
+        @select="onSelect"
+      >
+      </tree-with-line>
       <!-- 内容结束 -->
     </a-card>
     <!-- 日志列表 -->
@@ -55,13 +55,8 @@
       </custom-table>
     </div>
     <!-- 日志列表结束 -->
-    <custom-modal
-      title="Log"
-      :width="620"
-      v-model="visible"
-      :show-footer="false"
-    >
-      <a-spin :spinning="isGettingDetail" style="min-height: 100px; max-height: 520px; overflow: auto; white-space: nowrap; padding: 10px;">
+    <custom-modal title="Log" :width="950" v-model="visible" :show-footer="false">
+      <a-spin class="log-detail" :spinning="isGettingDetail">
         <div v-for="(logItem, index) in logInfo" :key="index">
           {{ logItem }}
         </div>
@@ -204,7 +199,6 @@ export default {
       try {
         this.isGettingDetail = true
         const res = await postAction('/logManage/downloadFile', formData)
-        console.log('%c [ res ]-206', 'font-size:13px; background:pink; color:#bf2c9f;', res.split('\r\n'))
         this.logInfo = res.split('\r\n')
       } catch (error) {
         console.error(error)
@@ -253,7 +247,7 @@ export default {
           }
         }
         &-body {
-          padding: 0 20px;
+          padding-left: 20px;
           height: calc(100% - 50px);
           overflow: auto;
         }
@@ -305,8 +299,16 @@ export default {
       }
     }
   }
+}
 
-  &-list {
+.log-detail {
+  ::v-deep {
+    .ant-spin-container {
+      min-height: 100px;
+      max-height: 520px;
+      overflow: auto;
+      padding: 10px;
+    }
   }
 }
 </style>
diff --git a/src/views/system/Scheduling.vue b/src/views/system/Scheduling.vue
index 11c0961..3a2cfa0 100644
--- a/src/views/system/Scheduling.vue
+++ b/src/views/system/Scheduling.vue
@@ -4,7 +4,9 @@
     <a-card class="scheduling-list">
       <!-- 标题 -->
       <template slot="title">
-        Scheduling
+        <div class="card-title">
+          Scheduling
+        </div>
         <div class="line"></div>
       </template>
       <!-- 标题结束 -->
@@ -36,9 +38,8 @@
                   draggable
                   @dragstart="onDragStart(station, item.userId)"
                 >
-                  {{ station.stationName }}
+                  {{ station.stationName + (index == item.stationList.length - 1 ? '' : '、') }}
                 </span>
-                {{ index == item.stationList.length - 1 ? '' : '、' }}
               </template>
             </div>
             <!-- 右侧边框 -->
@@ -63,7 +64,7 @@
               <a-col :span="6">
                 <a-form-model class="search-form-form">
                   <a-form-model-item label="Month" style="marign-bottom: 0">
-                    <a-month-picker v-model="currentMonth" :allow-clear="false"></a-month-picker>
+                    <custom-month-picker v-model="currentMonth" :allow-clear="false"></custom-month-picker>
                   </a-form-model-item>
                 </a-form-model>
               </a-col>
@@ -76,11 +77,17 @@
                   <img src="@/assets/images/global/edit.png" alt="" />
                   Edit
                 </a-button>
-                <a-button type="primary">
-                  <img src="@/assets/images/global/import.png" alt="" />
-                  Import
+                <a-button type="primary" @click="onDownloadTpl">
+                  <img src="@/assets/images/global/export.png" alt="" />
+                  Download Template
                 </a-button>
-                <a-button type="primary">
+                <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-upload>
+                <a-button type="primary" @click="onExport">
                   <img src="@/assets/images/global/export.png" alt="" />
                   Export
                 </a-button>
@@ -145,9 +152,9 @@
                 v-if="direction === 'right'"
                 blockNode
                 checkStrictly
-                defaultExpandAll
                 :treeData="accountTreeData"
                 :selectedKeys.sync="rightAccountChildSelectedKeys"
+                :expandedKeys.sync="rightAccountChildExpandedKeys"
                 @select="
                   (_, props) => {
                     onSelectAccount(_, props, itemSelect)
@@ -181,7 +188,7 @@ import moment from 'moment'
 import { cloneDeep } from 'lodash'
 import { getAction } from '@/api/manage'
 import CustomPopoverSearch from '@/components/CustomPopoverSearch'
-import { deleteAction, postAction, putAction } from '../../api/manage'
+import { deleteAction, downloadFile, postAction, putAction } from '../../api/manage'
 
 const dateFormat = 'YYYY-MM-DD'
 const monthFormat = 'YYYY-MM'
@@ -222,6 +229,7 @@ export default {
       accountTreeData: [], // 用户列表树状结构
       checkedAccount: '', // 右侧穿梭框选中的账号
       rightAccountChildSelectedKeys: [], // 右侧穿梭框选中的值
+      rightAccountChildExpandedKeys: [], // 右侧穿梭框中展开的父元素
 
       isChanging: false,
       dragItem: null,
@@ -378,6 +386,8 @@ export default {
       this.targetKeys = []
       this.accountTreeData = []
       this.rightAccountChildSelectedKeys = []
+      this.rightAccountChildExpandedKeys = []
+
       this.checkedAccount = ''
     },
 
@@ -390,16 +400,34 @@ export default {
       this.visible = true
 
       this.rightAccountChildSelectedKeys = []
+      this.rightAccountChildExpandedKeys = []
+
       this.checkedAccount = ''
+      this.keyword = ''
       this.getScheduleDetail()
     },
 
-    onImport() {
-      console.log('%c [ 新增 ]-88', 'font-size:13px; background:pink; color:#bf2c9f;')
+    async onImport({ file }) {
+      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.getList()
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    onDownloadTpl() {
+      downloadFile('/sysTask/exportImportTemplate', 'Schedule Template.xlsx')
     },
 
     onExport() {
-      console.log('%c [ 新增 ]-88', 'font-size:13px; background:pink; color:#bf2c9f;')
+      const currentMonth = this.currentMonth.format('YYYY-MM')
+      const formData = new FormData()
+      formData.append('yearMonth', currentMonth)
+      downloadFile('/sysTask/exportExcel', 'Schedule-' + currentMonth + '.xlsx', formData, 'post')
     },
 
     // 开始拖拽
@@ -578,10 +606,10 @@ export default {
             }
           })
           findAccount.children.push(...children)
+          this.rightAccountChildExpandedKeys = [findAccount.key]
         }
       } else {
         const moveKey = moveKeys[0]
-        console.log('%c [ moveKey ]-577', 'font-size:13px; background:pink; color:#bf2c9f;', moveKey)
         let parentIndex = -1,
           childIndex = -1
         for (const pIndex in this.accountTreeData) {
@@ -621,7 +649,7 @@ export default {
   &-list {
     flex-shrink: 0;
     width: 350px;
-    height: 100%;
+    height: calc(100% - 2px);
     background-color: #022024;
     border-color: rgb(12, 106, 102, 0.9);
     border-radius: 0;
@@ -634,15 +662,23 @@ export default {
           padding-left: 15px;
           background-color: #022024;
           border-bottom-color: rgba(12, 235, 201, 0.3);
+          position: relative;
           &-title {
             padding-top: 22px;
             padding-bottom: 0;
           }
+          .card-title {
+            height: 18px;
+            line-height: 18px;
+            margin-bottom: 11px;
+          }
           .line {
             width: 70px;
             height: 3px;
             background-color: #0cebc9;
             margin-top: 10px;
+            position: absolute;
+            bottom: -1px;
           }
         }
         &-body {
@@ -703,7 +739,7 @@ export default {
               border: 1px solid @borderColor;
               background-color: @bgColor;
               position: absolute;
-              top: 25px;
+              top: 28px;
               left: 2px;
               width: 9px;
               height: 9px;
@@ -713,7 +749,7 @@ export default {
             }
           }
           .left-bottom-border {
-            height: calc(100% - 30px);
+            height: calc(100% - 33px);
             position: absolute;
             left: 0;
             bottom: 0;
@@ -751,14 +787,17 @@ export default {
         }
       }
       &-content {
-        min-height: 62px;
+        min-height: 63px;
         border-top: 1px solid @borderColor;
         border-left: 1px solid @borderColor;
-        padding: 6px;
+        padding: 5px 6px 5px 18px;
         background-color: @bgColor;
         line-height: 26px;
         flex: 1;
         color: #6ebad0;
+        > span {
+          margin-left: -6px;
+        }
       }
     }
   }
@@ -778,6 +817,12 @@ export default {
           overflow: auto;
           padding-right: 5px;
         }
+        .ant-fullcalendar-date {
+          height: 127px !important;
+        }
+        .ant-fullcalendar-content {
+          height: 60px !important;
+        }
       }
     }
     .search-form {
diff --git a/src/views/system/UserList.vue b/src/views/system/UserList.vue
index 97ef264..926a368 100644
--- a/src/views/system/UserList.vue
+++ b/src/views/system/UserList.vue
@@ -146,7 +146,7 @@ export default {
       ],
       url: {
         list: '/sys/user/list',
-        delete: '/sys/user/delete'
+        delete: '/sys/user/deleteById'
       },
       roleOptions: [],
       visible: false,
@@ -226,7 +226,8 @@ export default {
     onDel() {
       if (this.selectedRowKeys && this.selectedRowKeys.length) {
         this.$confirm({
-          title: 'Do You Want To Delete This Item?',
+          title: 'Do You Want To Delete This Account?',
+          content: 'Will Delete All Data Related To This Account, Are You Sure?',
           okText: 'OK',
           cancelText: 'Cancel',
           onOk: () => {