youhua

src/views/projectManage/components/onlineTime.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="bottom-detail">
+    <el-row>交付日期：{{ scheduleDetail.endTime }}</el-row>
+    <el-row class="date-laout">排期：{{ scheduleDetail.startTime | handlerDate }} ~ {{ scheduleDetail.endTime | handlerDate }} <span style="color: #999999; font-size: 14px;">{{ '(' + scheduleDetail.scheduleTimeAnnotation ? scheduleDetail.scheduleTimeAnnotation.所有 : '' + ')' }}</span></el-row>
+    <el-row>预计上线版本：
+      <span v-if="scheduleDetail.preOnlineVersion && scheduleDetail.preOnlineVersion.length > 0">
+        <span v-for="item in scheduleDetail.preOnlineVersion" :key="item">{{ item }}</span>
+      </span>
+      <el-popover placement="top" title="版本时间轴" width="200" trigger="click">
+        <el-timeline>
+          <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon" :type="activity.type" :color="activity.color" :size="activity.size">
+            {{ activity.content }}
+          </el-timeline-item>
+        </el-timeline>
+        <span slot="reference"> 猜猜猜 </span>
+      </el-popover>
+      <el-tooltip class="item" effect="dark" content="版本有问题？点击触发重新计算！" placement="right">
+        <svg-icon :icon-class="icon_problem ? 'problem1' : 'problem'" style="cursor: pointer;" @mouseenter="icon_problem = true" @mouseleave="icon_problem = false" @click="taskUpdatePreOnlineVersion" />
+      </el-tooltip>
+    </el-row>
+    <div class="border-top">
+      <el-divider />
+      <el-form ref="scheduleDetail" :inline="true" :model="form_query" class="Layout_space_start" label-position="left" label-width="110px">
+        <el-form-item label="实际提测时间">
+          <el-date-picker v-model="form_query.launchTestRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy-MM-dd" style="width: 100%;" size="small" @change="setChangeArea(2)" />
+        </el-form-item>
+        <el-form-item label="实际准出时间：">
+          <el-date-picker v-model="form_query.testFinishRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy-MM-dd" style="width: 100%;" size="small" @change="setChangeArea(2)" />
+        </el-form-item>
+        <el-form-item label="实际上线时间：">
+          <el-date-picker v-model="form_query.onlineRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy-MM-dd" style="width: 100%;" size="small" @change="setChangeArea(2)" />
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { taskUpdatePreOnlineVersion } from '@/api/taskIndex.js'
+import { analysisBizId_id } from '@/utils/crypto-js.js'
+import moment from 'moment'
+import { taskGet } from '@/api/taskIndex'
+export default {
+  filters: {
+    handlerDate(val) {
+      return val ? moment(val).format('YYYY-MM-DD') : ''
+    }
+  },
+  props: {
+    data: { type: Object, required: true }
+  },
+  data() {
+    return {
+      scheduleDetail: this.data,
+      icon_problem: false,
+      form_query: {
+        launchTestRealTime: '',
+        testFinishRealTime: '',
+        onlineRealTime: ''
+      },
+      activities: [{
+        content: '支持使用图标 2018-04-03',
+        size: 'large',
+        type: 'primary',
+        icon: 'el-icon-more'
+      }, {
+        content: '支持自定义颜色 2018-04-03',
+        color: '#0bbd87'
+      }, {
+        content: '支持自定义尺寸 2018-04-03',
+        size: 'large'
+      }, {
+        content: '默认样式的节点 2018-04-03'
+      }]
+    }
+  },
+  watch: {
+    data: {
+      handler(newV) {
+        this.scheduleDetail = newV
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.getQueryData()
+  },
+  methods: {
+    async getQueryData() {
+      const bizId_id = analysisBizId_id(this.$route.query.bizId_id)
+      const res = await taskGet(bizId_id[1])
+      if (res.code === 200) {
+        this.form_query = res.data
+        // this.form_query.testFinishRealTime = '2021.01.19'
+      }
+    },
+    async taskUpdatePreOnlineVersion() {
+      const bizId_id = analysisBizId_id(this.$route.query.bizId_id)
+      const res = await taskUpdatePreOnlineVersion(bizId_id[0])
+      if (res.code === 200) {
+        this.$emit('update')
+        this.$message({ message: '预计上线版本重新计算中，请稍后刷新页面查看！', type: 'success', offset: 150 })
+      }
+    },
+    setChangeArea(e) {
+      console.log(e, 'cs')
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.Layout_space_start {
+  display: flex;
+  justify-content: flex-start;
+}
+.bottom-detail {
+  font-size: 14px;
+  width: calc(100% - 40px);
+  padding-top: 20px;
+}
+.el-timeline {
+  margin: 0;
+  font-size: 14px;
+  list-style: none;
+  padding: 0px;
+}
+.border-top {
+  >>>.el-form-item {
+    margin: 0 30px  10px 0;
+  }
+  >>>.el-divider--horizontal {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 10px 0;
+  }
+}
+.date-laout {
+  margin: 15px 0;
+}
+</style>

src/views/projectManage/taskList/components/scheduleList.vue

@@ -102,32 +102,9 @@
       </el-table-column>
 
     </el-table>
-    <div class="bottom-detail">
-      <el-row>交付日期：{{ scheduleDetail.endTime }}</el-row>
-      <el-row>排期：{{ scheduleDetail.startTime | handlerDate }} ~ {{ scheduleDetail.endTime | handlerDate }} <span style="color: #999999; font-size: 14px;">{{ '(' + scheduleDetail.scheduleTimeAnnotation ? '' : scheduleDetail.scheduleTimeAnnotation.所有 + ')' }}</span></el-row>
-      <el-row>预计上线版本：
-        <span v-if="scheduleDetail.preOnlineVersion && scheduleDetail.preOnlineVersion.length > 0">
-          <span v-for="item in scheduleDetail.preOnlineVersion" :key="item">{{ item }}</span>
-        </span>
-        <el-tooltip class="item" effect="dark" content="版本有问题？点击触发重新计算！" placement="right">
-          <svg-icon :icon-class="icon_problem ? 'problem1' : 'problem'" style="cursor: pointer;" @mouseenter="icon_problem = true" @mouseleave="icon_problem = false" @click="taskUpdatePreOnlineVersion" />
-        </el-tooltip>
-      </el-row>
-      <div class="detail-info border-top">
-        <el-divider />
-        <el-form ref="form_query" :inline="true" :model="form_query" class="Layout_space_start" label-position="left" label-width="140px">
-          <el-form-item v-if="brdPassRealTime" label="实际提测时间">
-            <el-date-picker v-model="form_query.brdPassRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy.MM.dd" style="width: 100%;" size="small" @change="setChangeArea(2)" />
-          </el-form-item>
-          <el-form-item v-if="prdPassRealTime" label="实际准出时间：">
-            <el-date-picker v-model="form_query.prdPassRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy.MM.dd" style="width: 100%;" size="small" @change="setChangeArea(2)" />
-          </el-form-item>
-          <el-form-item v-if="techInRealTime" label="实际上线时间：">
-            <el-date-picker v-model="form_query.techInRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy.MM.dd" style="width: 100%;" size="small" @change="setChangeArea(2)" />
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
+    <!-- 交付日期 排期 预计上线版本 -->
+    <online-date :data="scheduleDetail" @update="listByTask(taskId)" />
+    <!-- 交付日期 排期 预计上线版本 -->
     <modify-schedule
       v-if="visibleSchedule"
       :visible.sync="visibleSchedule"
@@ -140,23 +117,18 @@
   </div>
 </template>
 <script>
-import { taskUpdatePreOnlineVersion } from '@/api/taskIndex.js'
 import { EncryptId } from '@/utils/crypto-js.js'
 import { mapGetters } from 'vuex'
 import Sortable from 'sortablejs'
-import moment from 'moment'
 import 'moment/locale/zh-cn'
 import { listByTask, sortForTask } from '@/api/projectViewDetails'
 import modifySchedule from '@/views/projectManage/projectList/components/modifySchedule'
 import move from '@/assets/麻将@2x.png'
+import onlineDate from '@/views/projectManage/components/onlineTime.vue'
 export default {
   components: {
-    modifySchedule
-  },
-  filters: {
-    handlerDate(val) {
-      return val ? moment(val).format('YYYY-MM-DD') : ''
-    }
+    modifySchedule,
+    onlineDate
   },
   props: {
     id: {
@@ -184,7 +156,6 @@ export default {
     return {
       taskId: '',
       move: move,
-      icon_problem: false,
       scheduleList: [],
       scheduleDetail: {},
       visibleSchedule: false,
@@ -236,17 +207,6 @@ export default {
         this.$message({ message: '移动成功', type: 'success', duration: 1000, offset: 150 })
       }
     },
-    async taskUpdatePreOnlineVersion() {
-      const res = await taskUpdatePreOnlineVersion(this.taskId)
-      if (res.code === 200) {
-        this.listByTask(this.taskId)
-        this.$message({ message: '预计上线版本重新计算中，请稍后刷新页面查看！', type: 'success', offset: 150 })
-      }
-    },
-    // getType(value) {
-    //   const res = this.taskScheduleEvent.find(item => item.code === value) || {}
-    //   return res.msg
-    // },
     async listByTask(id) { // 获取排期列表
       this.taskId = id
       const res = await listByTask(id)
@@ -316,15 +276,6 @@ export default {
     background: #ffffff !important;
   }
 }
-.bottom-detail {
-  font-size: 14px;
-  width: calc(100% - 40px);
-  margin: 0 20px;
-  padding: 20px 0;
-  :nth-child(2) {
-    margin: 10px 0;
-  }
-}
 .sortable-tip {
   height: 26px;
   width: 15px;

src/views/projectManage/taskList/taskViewDetail.vue

@@ -977,7 +977,7 @@ export default {
   .task-help-tips {
     display: flex;
     flex-direction: column;
-    margin: 0 20px;
+    margin: 0 10px;
     padding: 20px 13px;
     border-radius: 4px;
     background-color: rgba(64, 158, 255,0.1);