修改

src/components/picker/SelDatePicker.vue

@@ -10,7 +10,6 @@
     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">
@@ -20,7 +19,9 @@
             nowDates.find(item=>item === current.format('YYYY.MM.DD'))?'is-rang-picker-active':'',
           ]"
           @click.stop="setSelect(current)"
-        ><span /></div>
+        >
+          <span><i v-if="nowDates.find(item=>item === current.format('YYYY.MM.DD'))" class="el-icon-check" /></span>
+        </div>
         <template v-if="moment().format('YYYY.MM.DD') !== current.format('YYYY.MM.DD')">{{ current.date() }}</template>
         <template v-else><div class="rang-today">今天</div></template>
         <div v-if="holiday.find(item=>item === current.format('YYYY.MM.DD'))" class="is-rang-picker-holiday">休</div>
@@ -36,7 +37,7 @@ const _ = require('lodash')
 import moment from 'moment'
 import 'moment/locale/zh-cn'
 import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
-import { getSeprateDayInfo, getHolidayDayInfo } from '@/api/projectViewDetails'
+import { getHolidayDayInfo } from '@/api/projectViewDetails'
 export default {
   props: {
     startEnd: {
@@ -53,8 +54,7 @@ export default {
       locale,
       nowDates: [],
       momentDate: [],
-      holiday: [],
-      finally: {}
+      holiday: []
     }
   },
   watch: {
@@ -72,22 +72,12 @@ export default {
     this.getHolidayDayInfo(startTime, endTime)
   },
   methods: {
-    panelChange(value, mode) { // 日历面板发生变化时的回调
-      // console.log(value, mode)
-    },
     async getHolidayDayInfo(startTime, endTime) { // 获取节假日时间
       const res = await getHolidayDayInfo({ startTime: startTime, endTime: endTime })
       if (res.code === 200) {
         this.holiday = res.data
       }
     },
-    async getSeprateDayInfo(dataArr) { // 获取选中时间中的工作日时间
-      const res = await getSeprateDayInfo(dataArr)
-      if (res.code === 200) {
-        this.finally = res.data
-      }
-      this.change()
-    },
     changeRange(dates) { // 获取开始结束日期
       this.nowDates = []
       const [start, end] = dates
@@ -120,11 +110,14 @@ export default {
       }
     },
     confirmDate(e) {
-      this.getSeprateDayInfo(this.nowDates)
-    },
-    change() {
-      this.$emit('update:startEnd', this.momentDate)
-      this.$emit('getDetailDay', this.finally)
+      const min = moment.min(this.nowDates.map(item => {
+        return moment(item)
+      }))
+      const max = moment.max(this.nowDates.map(item => {
+        return moment(item)
+      }))
+      this.$emit('update:startEnd', [min.format('YYYY.MM.DD'), max.format('YYYY.MM.DD')])
+      this.$emit('getDetailDay', this.nowDates)
     }
   }
 }
@@ -202,19 +195,26 @@ export default {
       right: -5px;
       height: 10px;
       width: 10px;
-      border: 1px solid #999999;
+      border: 1px solid #BFBFBF;
       border-radius: 2px;
     }
   }
 }
 .is-rang-picker-active {
-  padding: 1px;
   span {
     display: block;
     height: 100%;
     width: 100%;
-    background-color: red;
-    border-radius: 2px;
+    background-color: #409EFF;
+    font-size: 10px;
+    position: relative;
+    color: #FFFFFF;
+  }
+  i {
+    position: absolute;
+    left: -2px;
+    top: 50%;
+    transform: translateY(-50%);
   }
 }
 </style>

src/views/projectManage/projectList/component/modifySchedule.vue

@@ -1,40 +1,46 @@
 <template>
   <normal-dialog :show-dialog.sync="show" :title="title" @confirm="confirmForm()" @cancel="cancel()">
-    <el-form ref="form" :model="form" :rules="form_rules" label-width="100px">
-      <el-form-item label="排期类型" prop="type">
-        <el-select v-model="form.type" clearable placeholder="请选择" style="width: 100%">
-          <el-option v-for="item in taskScheduleEvent" :key="item.code" :label="item.msg" :value="item.code" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="参与人员">
-        <search-people :value.sync="form.peoples" :multiple="true" @change="changePeoples" />
-      </el-form-item>
-      <el-form-item label="排期" prop="date_start">
-        <sel-date-picker :start-end.sync="form.date_start" @getDetailDay="getDetailDay" />
-      </el-form-item>
-      <el-form-item label="问题描述">
-        <el-input v-model="form.desc" autocomplete="off" placeholder="请输入问题描述内容..." />
-      </el-form-item>
-      <el-form-item label="关联任务">
-        <el-select
-          v-model="form.taskList"
-          multiple
-          filterable
-          remote
-          reserve-keyword
-          placeholder="请输入关键词"
-          :remote-method="remoteMethod"
-          :loading="loading"
-        >
-          <el-option
-            v-for="item in tasksOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-    </el-form>
+    <article>
+      <el-form ref="form" :model="form" :rules="form_rules" label-width="100px" :label-position="'left'">
+        <el-form-item label="排期类型" prop="type">
+          <el-select v-model="form.type" clearable placeholder="请选择" style="width: 100%">
+            <el-option v-for="item in taskScheduleEvent" :key="item.code" :label="item.msg" :value="item.code" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="参与人员" prop="peoples">
+          <search-people :value.sync="form.peoples" :multiple="true" @change="changePeoples" />
+        </el-form-item>
+        <el-form-item label="排期" prop="date_start">
+          <div v-show="form.date_start.length > 0 ">{{ form.schedule }}</div>
+          <div v-show="form.date_start.length <= 0 " class="empty-schedule">添加排期</div>
+          <div class="picker-hidden">
+            <sel-date-picker :start-end.sync="form.date_start" @getDetailDay="getDetailDay" />
+          </div>
+        </el-form-item>
+        <el-form-item label="问题描述">
+          <el-input v-model="form.desc" autocomplete="off" placeholder="请输入问题描述内容..." />
+        </el-form-item>
+        <el-form-item label="关联任务">
+          <el-select
+            v-model="form.taskList"
+            multiple
+            filterable
+            remote
+            reserve-keyword
+            placeholder="请输入关键词"
+            :remote-method="remoteMethod"
+            :loading="loading"
+          >
+            <el-option
+              v-for="item in tasksOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </article>
   </normal-dialog>
 </template>
 <script>
@@ -43,7 +49,8 @@ import normalDialog from '@/components/dialog/normalDialog'
 import selDatePicker from '@/components/picker/SelDatePicker'
 import {
   configShowTaskEnum
-} from '@/api/taskIndex' // ajax
+} from '@/api/taskIndex'
+import { getSeprateDayInfo } from '@/api/projectViewDetails'
 export default {
   components: {
     searchPeople,
@@ -66,6 +73,7 @@ export default {
     return {
       form_rules: {
         type: [{ required: true, message: '事件类型不能为空', trigger: 'blur' }],
+        peoples: [{ required: true, message: '参与人员不能为空', trigger: 'blur' }],
         date_start: [{ required: true, message: '排期不能为空', trigger: 'blur' }]
       },
       show: this.visible,
@@ -75,7 +83,8 @@ export default {
         type: '',
         peoples: ['wzqwangziqian_v', 'qinzhipeng_v'],
         desc: '',
-        date_start: []
+        date_start: [],
+        schedule: ''
       },
       tasksOptions: [],
       loading: false
@@ -109,6 +118,13 @@ export default {
     getDetailDay(e) { // 获取详细排期日期
       console.log('e', e)
       console.log('this.form.date_start', this.form.date_start)
+      this.getSeprateDayInfo(e)
+    },
+    async getSeprateDayInfo(dataArr) { // 获取选中时间中的工作日时间
+      const res = await getSeprateDayInfo(dataArr)
+      if (res.code === 200) {
+        this.form.schedule = res.data.seperateDaysNoHoliday
+      }
     },
     confirmForm() {
       this.cancel()
@@ -121,5 +137,16 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-
+/deep/.el-form {
+  padding: 0 60px;
+}
+.picker-hidden {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+}
+.empty-schedule {
+  cursor: pointer;
+  color:rgba(51,51,51,0.45);
+}
 </style>