优化

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

@@ -12,28 +12,18 @@
           <search-people :value.sync="form.peopleList" :multiple="true" style="width: 100%" :size="'medium'" :disabled="disabled" />
         </el-form-item>
         <el-form-item label="排期" prop="dayList" class="">
-          <div v-show="form.dayList.length > 0 ">{{ schedule }}（用时<span class="blue">{{ detailDayList.length }}</span>天）<i class="el-icon-mobile-phone" /></div>
+          <div v-show="form.dayList.length > 0 ">
+            <span>{{ schedule }}（用时<span class="blue">{{ detailDayList.length }}</span>天）</span>
+            <el-tooltip class="item" effect="dark" content="检查设置的人员在设置时间内是否存在其他排期！" placement="top">
+              <svg-icon :icon-class="icon_problem ? 'problem1' : 'problem'" style="cursor: pointer;" @mouseenter="icon_problem = true" @mouseleave="icon_problem = false" @click="checkSchedule" />
+            </el-tooltip>
+          </div>
           <div v-show="form.dayList.length <= 0 " class="empty-schedule">添加排期</div>
           <div v-if="!disabled" class="picker-hidden">
-            <sel-date-picker :start-end.sync="form.dayList" :detail-day-list="detailDayList" @getDetailDay="getDetailDay" />
+            <sel-date-picker :start-end.sync="form.dayList" :detail-day-list="detailDayList" style="width: 100%;" @getDetailDay="getDetailDay" />
           </div>
         </el-form-item>
-        <div class="projected-code">
-          <div class="projected-lineHeight">
-            <i :class="[true ? 'el-icon-warning' : 'el-icon-info' ]" />
-            <span>{{ tip[0] }}</span>
-          </div>
-          <div v-for="(item, index) in ScheduleTip" :key="index">
-            <el-row>
-              <el-col :span="4"> <span class="projected-title">{{ item.name }}</span></el-col>
-              <el-col :span="20">
-                <span v-for="(i, k) in item.data" :key="k">
-                 <div> 类型：<span>{{ i.type }}</span>时间：<span>{{ i.date }}</span>任务：<span>{{ i.task }}</span></div>
-                </span>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
+        <scheduledMember :data="ScheduleTip" />
         <el-form-item label="描述" class="item-desc">
           <el-input v-model="form.desc" autocomplete="off" placeholder="请输入问题描述内容..." :disabled="disabled" size="medium" />
         </el-form-item>
@@ -161,6 +151,7 @@
 const _ = require('lodash')
 import { analysisBizId_id } from '@/utils/crypto-js.js'
 import { mapGetters } from 'vuex'
+import scheduledMember from './scheduledMember'
 import searchPeople from '@/components/select/searchPeople'
 import normalDialog from '@/components/dialog/normalDialog'
 import selDatePicker from '@/components/picker/SelDatePicker'
@@ -172,7 +163,8 @@ export default {
   components: {
     searchPeople,
     normalDialog,
-    selDatePicker
+    selDatePicker,
+    scheduledMember
   },
   props: {
     visible: {
@@ -216,17 +208,18 @@ export default {
       tip: ['排期提醒！参与人员在设置的排期时间同时存在如下排期（此排期仅供参考）。', '排期提醒！参与人员在设置的排期时间不存在其他的排期。', '请先设置好参与人员和排期时间再进行排期检查！'],
       ScheduleTip: [
         { name: '廖子君', data: [
-          { type: '开发', date: '2021.01.04-2021.02.05', task: '你读翠色，那次单词的色彩，你催ID是那次u收到，吹牛的悲催的是，bicbdsiuc' },
+          { type: '测试中', date: '2021.01.04-2021.02.05', task: '你读翠色，那次单词的色彩，你催ID是那次u收到，吹牛的悲催的是，bicbdsiuc' },
           { type: '开发', date: '2021.01.04-2021.02.05', task: '你读翠色，那次单词的色彩，你催ID是那次u收到，吹牛的悲催的是，bicbdsiuc' },
           { type: '开发', date: '2021.01.04-2021.02.05', task: '你读翠色，那次单词的色彩，你催ID是那次u收到，吹牛的悲催的是，bicbdsiuc' }
         ] },
-        { name: '廖子君', data: [{ type: '开发', date: '2021.01.04-2021.02.05', task: '你读翠色，那次单词的色彩，你催ID是那次u收到，吹牛的悲催的是，bicbdsiuc' }] },
+        { name: '王杨', data: [{ type: '方案设计', date: '2021.01.04-2021.02.05', task: '你读翠' }] },
         { name: '廖子君', data: [{ type: '开发', date: '2021.01.04-2021.02.05', task: '你读翠色，那次单词的色彩，你催ID是那次u收到，吹牛的悲催的是，bicbdsiuc' }] },
         { name: '廖子君', data: [{ type: '开发', date: '2021.01.04-2021.02.05', task: '你读翠色，那次单词的色彩，你催ID是那次u收到，吹牛的悲催的是，bicbdsiuc' }] },
         { name: '廖子君', data: [{ type: '开发', date: '2021.01.04-2021.02.05', task: '你读翠色，那次单词的色彩，你催ID是那次u收到，吹牛的悲催的是，bicbdsiuc' }] },
         { name: '廖子君', data: [{ type: '开发', date: '2021.01.04-2021.02.05', task: '你读翠色，那次单词的色彩，你催ID是那次u收到，吹牛的悲催的是，bicbdsiuc' }] },
         { name: '廖子君', data: [{ type: '开发', date: '2021.01.04-2021.02.05', task: '你读翠色，那次单词的色彩，你催ID是那次u收到，吹牛的悲催的是，bicbdsiuc' }] }
       ],
+      icon_problem: false,
       dangerImg: danger,
       form_rules: {
         type: [{ required: true, message: '事件类型不能为空', trigger: 'blur' }],
@@ -327,6 +320,12 @@ export default {
     if (this.observer) this.observer.disconnect()
   },
   methods: {
+    checkSchedule() {
+      if (!this.form.dayList[0] || !this.form.peopleList[0]) {
+        this.ScheduleTip = null
+      }
+      console.log(this.form.dayList, this.form.peopleList, 'cdmnocn')
+    },
     loadObserve() { // load-more滚动监视
       this.$nextTick(() => {
         this.observer = new IntersectionObserver(entries => {
@@ -583,6 +582,7 @@ export default {
 .pro_pro_com_modifySchedule {
   max-height: 480px;
   overflow: scroll;
+  padding: 0 60px;
   .blue {
     color: #409EFF;
   }
@@ -596,12 +596,7 @@ export default {
     margin-bottom: 10px;
   }
 }
-/deep/.el-dialog__body {
-  padding: 10px 20px;
-}
-/deep/.el-form {
-  padding: 0 156px 0 60px;
-}
+
 .item-desc {
   /deep/.el-form-item__label {
     padding-left: 10px;
@@ -664,6 +659,7 @@ export default {
   opacity: 0;
   position: absolute;
   top: 0;
+  width: 222px;
 }
 .empty-schedule {
   color:rgba(51,51,51,0.45);
@@ -726,18 +722,4 @@ export default {
     color: #333333;
   }
 }
-.projected-code {
-  background: #FAFAFA;
-  border: 1px solid #F4F4F4;
-  padding: 10px;
-  overflow-x: scroll;
-  white-space: nowrap;
-  .projected-lineHeight {
-    margin-bottom: 10px;
-  }
-  .projected-title {
-    display: inline-block;
-    min-width: 100px;
-  }
-}
 </style>

src/views/projectManage/projectList/components/scheduledMember.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="projected-code">
+    <div class="projected-scroll">
+      <div class="projected-lineHeight">
+        <i style="color: #FAAD14;" :class="[true ? 'el-icon-warning' : 'el-icon-info']" />
+          <span> {{ tip }}</span>
+        </div>
+        <el-row v-for="(item, index) in data" :key="index" style="margin-bottom: 15px;">
+          <el-col :span="4"> <span class="projected-title">{{ item.name }}</span></el-col>
+          <el-col :span="20">
+            <span v-for="(i, k) in item.data" :key="k" style="margin-bottom: 5px;">
+              <div class="projected-type">类型：<span>{{ i.type }}</span> 时间：<span>{{ i.date }}</span> 任务：<span>{{ i.task }}</span></div>
+            </span>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: { type: Array, default: null }
+  },
+  data() {
+    return {
+      tip: '',
+      tips: ['排期提醒！参与人员在设置的排期时间同时存在如下排期（此排期仅供参考）。', '排期提醒！参与人员在设置的排期时间不存在其他的排期。', '请先设置好参与人员和排期时间再进行排期检查！']
+    }
+  },
+  watch: {
+    data: {
+      handler(newV) {
+        if (newV) {
+          console.log(newV, '就这个')
+        } else {
+          this.tip = this.tips[2]
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.projected-code {
+  color: #333333;
+  background: #FAFAFA;
+  border: 1px solid #F4F4F4;
+  margin-bottom: 20px;
+  .projected-scroll {
+    padding: 10px;
+    overflow-x: scroll;
+    white-space: nowrap;
+  }
+  .projected-lineHeight {
+    color: #666666;
+    font-size: 12px;
+    margin-bottom: 10px;
+  }
+  .projected-icon {
+    color: #FAAD14;
+  }
+  .projected-title {
+    display: inline-block;
+    min-width: 100px;
+  }
+  .projected-type {
+    color: #666666;
+    span {
+      color: #333333;
+      margin-right: 20px;
+      display: inline-block;
+      min-width: 60px;
+    }
+  }
+}
+</style>