排期日期选择组件修改

src/components/picker/SelDatePicker.vue

@@ -1,11 +1,16 @@
 <template>
   <a-range-picker
+    v-model="momentDate"
+    :size="'large'"
+    :locale="locale"
     :show-time="{
       hideDisabledOptions: true,
       defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
     }"
+    format="YYYY-MM-DD"
     @ok="confirmDate"
     @change="changeRange"
+    @panelChange="panelChange"
   >
     <template slot="dateRender" slot-scope="current">
       <div :id="current.format('YYYY:MM:DD')" class="ant-calendar-date">
@@ -17,22 +22,51 @@
         {{ current.date() }}
       </div>
     </template>
+    <template slot="renderExtraFooter">
+      <span @click="cancel">footer</span>
+    </template>
   </a-range-picker>
 </template>
 <script>
 const _ = require('lodash')
 import moment from 'moment'
 import 'moment/locale/zh-cn'
+import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
 export default {
+  props: {
+    startEnd: {
+      type: Array,
+      default() {
+        return []
+      },
+      required: false
+    }
+  },
   data() {
     return {
       moment,
-      nowDates: []
+      locale,
+      nowDates: [],
+      momentDate: []
     }
   },
+  watch: {
+    startEnd: {
+      handler(newName, oldName) {
+        newName.length > 0 ? this.momentDate = [moment(newName[0]), moment(newName[1])] : this.momentDate = []
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  created() {
+  },
   methods: {
     confirmDate(e) {
-      console.log(e)
+      this.$emit('getRangeDate', this.nowDates)
+    },
+    panelChange(value, mode) { // 日历面板发生变化时的回调
+      // console.log(value, mode)
     },
     changeRange(dates) { // 获取开始结束日期
       this.nowDates = []
@@ -46,8 +80,14 @@ export default {
       }
       console.log(this.nowDates)
     },
-    setSelect(current) {
-      console.log(current)
+    setSelect(current) { // 选择详细日期
+      const isExist = this.nowDates.find(item => item === current.format('YYYY:MM:DD'))
+      if (isExist) {
+        this.nowDates = this.nowDates.filter(item => item !== isExist)
+      } else {
+        this.nowDates.push(current.format('YYYY:MM:DD'))
+      }
+      console.log(this.nowDates)
     }
   }
 }
@@ -66,6 +106,21 @@ export default {
   top: 2px;
   bottom: 2px;
 }
+.ant-calendar-selected-start-date,.ant-calendar-selected-end-date{
+  position: relative;
+}
+.ant-calendar-selected-start-date::before,.ant-calendar-selected-end-date::before{
+  position: absolute;
+    top: 2px;
+    right: 0;
+    bottom: 2px;
+    left: 0;
+    display: block;
+    background: #e6f7ff;
+    border: 0;
+    border-radius: 0;
+    content: '';
+}
 .more-select {
   display: none;
 }
@@ -80,6 +135,7 @@ export default {
       height: 12px;
       width: 12px;
       border: 1px solid #999999;
+      border-radius: 2px;
     }
   }
 }
@@ -90,6 +146,7 @@ export default {
     height: 100%;
     width: 100%;
     background-color: red;
+    border-radius: 2px;
   }
 }
 </style>

src/views/projectManage/taskList/taskViewDetails.vue

@@ -355,8 +355,8 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="排期">
-            <Sel-date-picker />
+          <el-form-item label="排期" prop="date_start">
+            <sel-date-picker :start-end="form.date_start" />
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -446,7 +446,7 @@
 </template>
 
 <script>
-import SelDatePicker from '@/components/picker/SelDatePicker'
+import selDatePicker from '@/components/picker/SelDatePicker'
 import BugDetails from '@/views/projectManage/bugList/details/index.vue'
 import {
   taskGet,
@@ -486,7 +486,7 @@ export default {
     BugDetails,
     DailyReport,
     ClientReport,
-    SelDatePicker
+    selDatePicker
   },
   filters: {
     ellipsis(value) {
@@ -584,7 +584,8 @@ export default {
         delivery: false,
         type: [],
         resource: '',
-        desc: ''
+        desc: '',
+        date_start: []
       },
       tasktId: '',
       echarts_name: [], // echarts_name
@@ -996,6 +997,7 @@ export default {
         item.id === e ? (eventID = item) : ''
       })
       this.dialogFormVisible = true
+      console.log(eventID)
       var start1 = eventID.startTime !== null ? eventID.startTime.split(/\s+/) : ''
       var start2 = eventID.endTime !== null ? eventID.endTime.split(/\s+/) : ''
 
@@ -1003,7 +1005,7 @@ export default {
       if (eventID.startTime !== null) {
         this.$set(this.form, 'date_start', [start1[0] + 'T' + start1[1] + '.000Z', start2[0] + 'T' + start2[1] + '.000Z'])
       } else {
-        this.$set(this.form, 'date_start', '')
+        this.$set(this.form, 'date_start', [])
       }
       this.options = this.form.peopleObject
       if (this.form.peopleObject !== null && this.form.peopleObject !== '') {