feat: scheduling对接接口，完成增删改和拖拽交换任务功能，优化其他页面样式

src/components/CustomPopoverSearch/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="popover-search">
-    <a-popover v-model="visible" trigger="click" placement="bottom" :overlayStyle="{ width: width + 'px' }">
+    <a-popover
-      <a-input ref="inputRef" v-model="keyword" @click.stop="">
+      overlayClassName="search-popover"
+      v-model="visible"
+      trigger="click"
+      placement="bottom"
+      :overlayStyle="{ width: width + 'px' }"
+    >
+      <a-input ref="inputRef" :placeholder="placeholder" v-model="innerKeyWord" @click.stop="">
         <template slot="suffix">
           <img class="popover-search-btn" src="@/assets/images/global/search-blue.png" @click.stop="onSearch" />
         </template>
@@ -11,15 +17,27 @@
           <a-spin :spinning="isLoading"></a-spin>
         </template>
         <template v-else>
+          <template v-if="innerOptions.length">
+            <div style="max-height: 200px; overflow: auto">
               <div
                 class="popover-search-item"
                 v-for="option in innerOptions"
                 :key="option.value"
-            @click="option.checked = !option.checked"
+                @click="onSelect(option)"
               >
                 <a-checkbox v-model="option.checked"></a-checkbox>
                 <span class="popover-search-item-inner">{{ option.label }}</span>
               </div>
+            </div>
+            <div class="btn-group" @click="onAdd">
+              <span>Add</span>
+            </div>
+          </template>
+          <template v-else>
+            <div style="padding: 20px 0">
+              <a-empty></a-empty>
+            </div>
+          </template>
         </template>
       </template>
     </a-popover>
@@ -39,11 +57,16 @@ export default {
     },
     value: {
       type: Array
+    },
+    keyword: {
+      type: String
+    },
+    placeholder: {
+      type: String
     }
   },
   data() {
     return {
-      keyword: '',
       visible: false,
       width: 0,
       isLoading: true,
@@ -60,6 +83,15 @@ export default {
         await this.remoteMethod()
         this.isLoading = false
       }
+    },
+    onSelect(option) {
+      option.checked = !option.checked
+    },
+    onAdd() {
+      const selectedOptions = this.innerOptions.filter(option => option.checked).map(option => option.value)
+      this.$emit('add', selectedOptions)
+      this.visible = false
+      this.innerKeyWord = ''
     }
   },
   watch: {
@@ -71,6 +103,16 @@ export default {
         this.innerOptions = options
       }
     }
+  },
+  computed: {
+    innerKeyWord: {
+      set(val) {
+        this.$emit('update:keyword', val)
+      },
+      get() {
+        return this.keyword
+      }
+    }
   }
 }
 </script>
@@ -92,4 +134,28 @@ export default {
     }
   }
 }
+.ant-spin {
+  height: 150px;
+  line-height: 150px;
+  width: 100%;
+  text-align: center;
+}
+.btn-group {
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  cursor: pointer;
+  border-top: 1px solid #0da397;
+}
+</style>
+<style lang="less">
+.search-popover {
+  .ant-popover {
+    &-inner {
+      &-content {
+        padding: 0;
+      }
+    }
+  }
+}
 </style>

src/components/SearchForm/index.vue

@@ -78,6 +78,7 @@ export default {
   .ant-form-item-label,
   .ant-form-item-control {
     line-height: 32px;
+    height: 32px;
   }
   .ant-form-item-label {
     flex-shrink: 0;

src/style.less

@@ -176,6 +176,24 @@ body {
       }
     }
   }
+
+  &-date {
+    &:hover {
+      background-color: @primary-color;
+      color: #fff;
+    }
+  }
+
+  &-selected-day {
+    .ant-calendar-date {
+      background-color: @primary-color;
+    }
+  }
+  &-today {
+    .ant-calendar-date {
+      color: #fff;
+    }
+  }
 }
 
 // 日历
@@ -193,8 +211,7 @@ body {
 
   &-content {
     margin-top: 10px;
-    height: 98px;
+    height: 98px !important;
-    background-color: rgba(140, 255, 229, 0.1);
     &::-webkit-scrollbar {
       width: 4px !important;
     }
@@ -647,6 +664,9 @@ body {
     &-message {
       color: #fff;
     }
+    &-close {
+      color: #fff !important;
+    }
   }
 }
 
@@ -680,9 +700,6 @@ body {
 .ant-popover {
   &-inner {
     background-color: #03353f;
-    &-content {
-      padding: 0;
-    }
   }
   &-arrow {
     border-left-color: #03353f !important;

src/views/system/DataBase.vue

@@ -43,7 +43,7 @@ const columns = [
     title: 'SITE DET CODE',
     align: 'center',
     dataIndex: 'siteDetCode',
-    width: 120
+    width: 130
   },
   {
     title: 'SAMPLE ID',
@@ -120,7 +120,7 @@ const columns = [
   {
     title: 'ACQ.REAL(S)',
     align: 'center',
-    width: 100,
+    width: 120,
     dataIndex: 'acquisitionRealSec'
   },
   {

src/views/system/Scheduling.vue

@@ -10,12 +10,16 @@
       <!-- 标题结束 -->
       <!-- 内容 -->
       <div class="scheduling-list-content">
-        <div class="scheduling-list-item" v-for="item of [1, 2, 3, 4]" :key="item">
+        <div class="scheduling-list-item" v-for="item of schedulingInfo" :key="item.id">
           <h4 class="title">
-            fanyq
+            <span>
-            <a class="del" @click="onDel(item)"></a>
+              {{ 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">
+          <div class="scheduling-list-item-container" @dragover.prevent @drop="onDrop(item)">
             <!-- 左侧边框 -->
             <div class="left-border">
               <div class="left-top-border">
@@ -25,7 +29,17 @@
             </div>
             <!-- 左侧边框结束 -->
             <div class="scheduling-list-item-content">
-              ARP01、ARP02、ARP03、ARP04、ARP05、 ARP06、ARP07、ARP08
+              <template v-for="(station, index) in item.stationList">
+                <span
+                  :key="station.stationId"
+                  class="draggable"
+                  draggable
+                  @dragstart="onDragStart(station, item.userId)"
+                >
+                  {{ station.stationName }}
+                </span>
+                {{ index == item.stationList.length - 1 ? '' : '、' }}
+              </template>
             </div>
             <!-- 右侧边框 -->
             <div class="right-border">
@@ -35,12 +49,13 @@
             <!-- 右侧边框结束 -->
           </div>
         </div>
+        <a-empty v-if="!schedulingInfo || !schedulingInfo.length" style="margin-top: 40px;"></a-empty>
       </div>
       <!-- 内容结束 -->
     </a-card>
     <div class="scheduling-calendar">
       <!-- 日历 -->
-      <a-calendar v-model="currentMonth">
+      <a-calendar v-model="currentDate" @select="onSelectDate">
         <template slot="headerRender">
           <!-- 搜索栏 -->
           <div class="search-form">
@@ -75,10 +90,13 @@
           <!-- 搜索栏结束 -->
         </template>
         <!-- 日历内部内容 -->
-        <template slot="dateCellRender">
+        <template slot="dateCellRender" slot-scope="value">
-          <div class="scheduling-calendar-content">
+          <div
-            <div class="item" v-for="item in [1, 2, 3, 4, 5]" :key="item">
+            class="scheduling-calendar-content"
-              liq (5)
+            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>
@@ -89,15 +107,17 @@
 
     <!-- 增加/编辑排班弹窗 -->
     <custom-modal :title="isAdd ? 'Add' : 'Edit'" :width="845" v-model="visible" :okHandler="submit">
+      <a-spin :spinning="isGettingDetail">
         <div class="account-assign">
           <a-transfer
-          :data-source="stationList"
+            :selectedKeys="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 } }">
               <!-- 左侧穿梭框中的树 -->
@@ -140,28 +160,17 @@
           <!-- 穿梭框右上方搜索 -->
           <div class="account-search">
             <label>User Name</label>
-          <!-- <a-select
+            <custom-popover-search
+              placeholder="Enter User Name"
               :options="accountList"
-            mode="multiple"
+              :keyword.sync="keyword"
-            show-search
+              :remote-method="getAccountList"
-            :filter-option="filterOption"
+              @add="onAddToList"
-            style="width: 190px"
+            ></custom-popover-search>
-            v-model="selectedAccount"
-          >
-            <div slot="dropdownRender" slot-scope="menu">
-              <v-nodes :vnodes="menu" />
-              <div class="account-add" @click="onAddToList()">
-                <a>Add</a>
-              </div>
-            </div>
-            <a-select-option v-for="(account, index) of accountList" :key="index" :value="index">
-              {{ account.title }}
-            </a-select-option>
-          </a-select> -->
-          <custom-popover-search :options="accountList" :remote-method="getAccountList"></custom-popover-search>
           </div>
           <!-- 穿梭框右上方搜索结束 -->
         </div>
+      </a-spin>
     </custom-modal>
     <!-- 增加/编辑排班弹窗结束 -->
   </div>
@@ -172,6 +181,10 @@ 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'
+
+const dateFormat = 'YYYY-MM-DD'
+const monthFormat = 'YYYY-MM'
 export default {
   mixins: [FormMixin],
   components: {
@@ -182,31 +195,57 @@ export default {
     CustomPopoverSearch
   },
   data() {
+    this.dateFormat = dateFormat
     return {
-      currentMonth: moment(),
+      currentMonth: moment(), // 当前月份
-      form: {},
-      visible: true,
 
-      originalTreeData: [],
+      currentDate: moment(), // 当前日期
+      schedulingInfo: [], // 当前选中的日程详情，用于 scheduling 左侧展示
+
+      isGettingList: false,
+      scheduleList: [], // 该月的日程列表
+
+      visible: false, // 新增/编辑弹窗是否显示
+
+      isGettingDetail: false, // 编辑时正在获取详情
+
+      originalTreeData: [], // 站点的树状结构
+      selectedStationKeys: [], // 穿梭框左侧选中的站点列表
       targetKeys: [],
 
       isGettingStationList: false,
-      isGettingAccountList: false,
+      keyword: '', // 穿梭框右上角搜索用户的关键词
-      stationList: [],
+
-      accountList: [],
+      stationList: [], // 站点列表（原始数据）
-      selectedAccount: [], // 右上方User Name选中的账号
+      accountList: [], // 搜索出来的用户列表
-      accountTreeData: [],
+
+      accountTreeData: [], // 用户列表树状结构
       checkedAccount: '', // 右侧穿梭框选中的账号
-      rightAccountChildSelectedKeys: [] // 右侧穿梭框选中的值
+      rightAccountChildSelectedKeys: [], // 右侧穿梭框选中的值
+
+      isChanging: false,
+      dragItem: null,
+      fromUserId: ''
     }
   },
   created() {
+    this.getList()
     this.getStationList()
-    this.getAccountList()
   },
   methods: {
     // 获取该月日程列表
-    async getList() {},
+    async getList() {
+      try {
+        this.isGettingList = true
+        const { result } = await getAction(`/sysTask/findList?yearMonth=${this.currentMonth.format('YYYY-MM')}`)
+        this.scheduleList = result
+        this.schedulingInfo = this.scheduleList[this.currentDate.format(dateFormat)]
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isGettingList = false
+      }
+    },
 
     async getStationList() {
       try {
@@ -226,10 +265,7 @@ export default {
             }
           })
 
-          this.stationList = records.map(item => ({
+          this.stationList = records
-            title: item.stationCode,
-            key: item.stationId.toString()
-          }))
         } else {
           this.$message.error(message)
         }
@@ -242,12 +278,13 @@ export default {
 
     async getAccountList() {
       try {
-        this.isGettingAccountList = true
+        const { success, result, message } = await getAction(
-        const { success, result, message } = await getAction('/sys/user/list?pageIndex=1&pageSize=1000')
+          `/sys/user/list?pageIndex=1&pageSize=1000&username=${this.keyword}`
+        )
         if (success) {
           const records = result.records
           this.accountList = records.map(item => ({
-            label: item.realname,
+            label: item.username,
             value: item.id
           }))
         } else {
@@ -255,24 +292,106 @@ export default {
         }
       } catch (error) {
         console.error(error)
-      } finally {
-        this.isGettingAccountList = false
       }
     },
 
-    // 左侧删除某一天的安排
+    // 选中某一个日期
-    onDel(item) {
+    onSelectDate(date) {
-      console.log('%c [ 删除 ]-51', 'font-size:13px; background:pink; color:#bf2c9f;', item)
+      this.currentDate = date
+      if (this.currentDate.format(monthFormat) !== this.currentMonth.format(monthFormat)) {
+        this.currentMonth = this.currentDate.clone()
+      }
+      if (this.isGettingList) {
+        this.$message.info('Is Getting Schedule,Waitting...')
+        return
+      }
+      this.schedulingInfo = this.scheduleList[date.format(dateFormat)]
+    },
+
+    // 获取详情
+    async getScheduleDetail() {
+      try {
+        this.isGettingDetail = true
+        const { success, result, message } = await getAction(
+          `/sysTask/findInfo?day=${this.currentDate.format(dateFormat)}`
+        )
+        if (success) {
+          const selectedStations = [] // 找出已经被选中的站点
+          const accountTree = [] // 构建右侧的树
+          result.forEach(item => {
+            const accountItem = {
+              title: item.userName,
+              key: item.userId,
+              children: []
+            }
+            accountTree.push(accountItem)
+
+            item.stationList.forEach(station => {
+              selectedStations.push(station.stationId)
+              accountItem.children.push({
+                title: station.stationName,
+                key: station.stationId,
+                isLeaf: true
+              })
+            })
+          })
+          this.targetKeys = selectedStations
+          this.accountTreeData = accountTree
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isGettingDetail = false
+      }
+    },
+
+    // 左侧删除某一天的日程
+    async onDel({ id: taskId, userId }) {
+      try {
+        const { success } = await deleteAction('/sysTask/deleteById', {
+          taskId,
+          userId
+        })
+        if (success) {
+          this.$message.success('Delete Success')
+          this.getList()
+        } else {
+          this.$message.success('Delete Fail')
+        }
+      } catch (error) {
+        console.error(error)
+      }
     },
 
     onAdd() {
+      if (this.schedulingInfo.length) {
+        this.$message.warn('Has Schedule, Only Can Edit')
+        return
+      }
+
       this.isAdd = true
       this.visible = true
+
+      this.selectedStationKeys = []
+      this.targetKeys = []
+      this.accountTreeData = []
+      this.rightAccountChildSelectedKeys = []
+      this.checkedAccount = ''
     },
 
     onEdit() {
+      if (!this.schedulingInfo.length) {
+        this.$message.warn('Has No Schedule, Add It First')
+        return
+      }
       this.isAdd = false
       this.visible = true
+
+      this.rightAccountChildSelectedKeys = []
+      this.checkedAccount = ''
+      this.getScheduleDetail()
     },
 
     onImport() {
@@ -283,6 +402,86 @@ export default {
       console.log('%c [ 新增 ]-88', 'font-size:13px; background:pink; color:#bf2c9f;')
     },
 
+    // 开始拖拽
+    onDragStart(item, fromUserId) {
+      this.dragItem = item
+      this.fromUserId = fromUserId
+    },
+    // 拖拽结束
+    async onDrop(item) {
+      const toUserId = item.userId
+      if (this.fromUserId != toUserId) {
+        try {
+          this.isChanging = true
+          const { success } = await putAction('/sysTask/changeScheduling', {
+            day: this.currentDate.format('YYYY-MM-DD'),
+            fromUserId: this.fromUserId,
+            toUserId,
+            stationIds: [this.dragItem.stationId]
+          })
+          if(success) {
+            this.$message.success('Change Success')
+            this.getList()
+          }
+          else {
+            this.$message.error('Change Fail')
+          }
+        } catch (error) {
+          console.error()
+        } finally {
+          this.isChanging = false
+        }
+      }
+    },
+
+    // 提交日程
+    async submit() {
+      if (!this.accountTreeData.length) {
+        this.$message.warn('Person List Is Empty')
+        return Promise.reject()
+      }
+      if (!this.accountTreeData.some(accountTreeItem => accountTreeItem.children.length)) {
+        this.$message.warn('Every Person Has No Station Assigned')
+        return Promise.reject()
+      }
+      try {
+        let method = putAction
+        let url = '/sysTask/update'
+        let successMsg = 'Edit Success'
+        let failMsg = 'Edit Fail'
+        if (this.isAdd) {
+          method = postAction
+          url = '/sysTask/create'
+          successMsg = 'Add Success'
+          failMsg = 'Add Fail'
+        }
+        const params = []
+        this.accountTreeData.forEach(accountTreeItem => {
+          if (accountTreeItem.children.length) {
+            params.push({
+              schedulingDate: this.currentDate.format('YYYY-MM-DD HH:mm:ss'),
+              stationList: accountTreeItem.children.map(child => {
+                return {
+                  stationId: child.key
+                }
+              }),
+              userId: accountTreeItem.key
+            })
+          }
+        })
+        const { success } = await method(url, params)
+        if (success) {
+          this.$message.success(successMsg)
+          this.getList()
+        } else {
+          this.$message.error(failMsg)
+          return Promise.reject()
+        }
+      } catch (error) {
+        return Promise.reject()
+      }
+    },
+
     /**
      * 以下是对穿梭框的处理
      */
@@ -296,6 +495,10 @@ export default {
       itemSelect(eventKey, !this.isChecked(checkedKeys, eventKey))
     },
 
+    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
+      this.selectedStationKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
+    },
+
     // 处理station列表
     handleTreeData(data, targetKeys = [], level) {
       data.forEach(item => {
@@ -309,13 +512,11 @@ export default {
       return data
     },
 
-    filterOption(input, option) {
-      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-    },
-
     // 将选中的账号加入到右侧穿梭框
-    onAddToList() {
+    onAddToList(selectedAccount) {
-      this.accountTreeData = this.selectedAccount.map(id => {
+      const addedAccounts = selectedAccount
+        .filter(id => !this.accountTreeData.find(account => account.key == id)) // 如果之前没有加过，才加进去
+        .map(id => {
           const find = this.accountList.find(account => account.value == id)
           return {
             title: find.label,
@@ -323,6 +524,8 @@ export default {
             children: []
           }
         })
+      this.accountTreeData.push(...addedAccounts)
+      this.rightAccountChildSelectedKeys = []
       this.checkedAccount = ''
     },
 
@@ -332,6 +535,8 @@ export default {
       // selected 是前一个状态，也就是selected 为false时，其实是选中了
       if (isLeaf) {
         // 选中了子节点，也就是站点
+        this.checkedAccount = ''
+
         if (selected) {
           // 取消选中
           itemSelect(eventKey, false)
@@ -359,10 +564,11 @@ export default {
         const findAccount = this.accountTreeData.find(account => account.key == this.checkedAccount)
         if (findAccount) {
           const children = moveKeys.map(key => {
-            const findStation = this.stationList.find(station => station.key == key)
+            const findStation = this.stationList.find(station => station.stationId == key)
             return {
               isLeaf: true,
-              ...cloneDeep(findStation)
+              title: findStation.stationCode,
+              key
             }
           })
           findAccount.children.push(...children)
@@ -386,15 +592,16 @@ export default {
       this.targetKeys = targetKeys
     }
   },
-  watch: {
-    currentMonth() {
-      this.getList()
-    }
-  },
   computed: {
     treeData() {
       return this.handleTreeData(cloneDeep(this.originalTreeData), this.targetKeys, 0)
     }
+  },
+  watch: {
+    currentMonth() {
+      this.currentDate = this.currentMonth.clone()
+      this.getList()
+    }
   }
 }
 </script>
@@ -442,16 +649,25 @@ export default {
     &-item {
       margin-top: 15px;
       .title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
         font-family: Aria;
         font-size: 14px;
         color: #fff;
         font-weight: bold;
         margin-bottom: 4px;
         position: relative;
+        padding-left: 8px;
+        span {
+          flex: 1;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
         .del {
-          position: absolute;
+          margin-left: 15px;
-          top: 5px;
+          margin-right: 10px;
-          right: 16px;
           width: 14px;
           height: 14px;
           background: url(~@/assets/images/system/del-normal.png);
@@ -527,6 +743,7 @@ export default {
         }
       }
       &-content {
+        min-height: 62px;
         border-top: 1px solid @borderColor;
         border-left: 1px solid @borderColor;
         padding: 6px;
@@ -540,9 +757,21 @@ export default {
 
   // 右侧日历
   &-calendar {
-    overflow: auto;
+    height: 100%;
     margin-left: 20px;
     padding-right: 10px;
+    .ant-fullcalendar-fullscreen {
+      height: 100%;
+      overflow: auto;
+      padding-right: 5px;
+      ::v-deep {
+        .ant-fullcalendar-full {
+          height: calc(100% - 61px);
+          overflow: auto;
+          padding-right: 5px;
+        }
+      }
+    }
     .search-form {
       padding: 10px;
       border: 1px solid #416f7f;
@@ -564,6 +793,12 @@ export default {
 
     &-content {
       padding: 10px;
+      height: 100%;
+      overflow: hidden auto;
+      background-color: rgba(140, 255, 229, 0.1);
+      &::-webkit-scrollbar {
+        width: 4px !important;
+      }
       .item {
         font-family: Arial;
         font-size: 14px;
@@ -682,4 +917,8 @@ export default {
     color: #0cebc9;
   }
 }
+
+.draggable {
+  cursor: pointer;
+}
 </style>

src/views/system/UserList.vue

@@ -264,7 +264,7 @@ export default {
         {
           type: 'custom-select',
           label: 'Role',
-          name: 'role',
+          name: 'roleId',
           span: 4,
           props: {
             options: this.roleOptions

src/views/user/Login.vue

@@ -21,6 +21,7 @@
       </a-form-item>
 
     </a-form-model>
+    <login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
   </div>
 </template>