任务需求添加样式变更记录

src/views/projectManage/components/export.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 排期导出 -->
   <div align="left" class="Scheduling" @click="saveFile()"><div class="el-icon-download" /> 导出排期</div>
 </template>
 

src/views/projectManage/components/record.vue

@@ -0,0 +1,59 @@
+<template>
+  <!-- 变更记录 -->
+  <div>
+    <div v-for="(item,index) in changeRecord" :key="index" class="Layout_space_between sign-record">
+      <span>
+        <span class="operatorName">{{ item.operator }} : </span>
+        <!-- <el-tooltip
+          v-if="item.remark.length > 50"
+          class="item"
+          effect="dark"
+          :content="item.remark"
+          placement="top-start"
+          popper-class="tip-style"
+        > -->
+        <span class="remark">{{ item.remark }}</span>
+        <!-- </el-tooltip>
+        <span v-else class="remark">{{ item.remark.length > 50 ? item.remark.substring(0, 50) + '...' : item.remark }}</span> -->
+      </span>
+      <span class="createTime">{{ item.createTime }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import '@/styles/PublicStyle/index.scss'
+export default {
+  data() {
+    return {
+      changeRecord: [{ 'operator': '余霖', 'createTime': '2020-07-09 17:34:26', 'remark': 'bug标题：由【需求详情页的任务列表，期望任务进度宽度保持不变，任务名称随着屏幕拉长而长】改为【需求详情页的任务列表，期望任务进度宽度保持不反对你把成绩单发到彼此导出的 cdcidcdcidicdicdi i地is你淑女哦滴v的你v的】' }, { 'operator': '余霖', 'createTime': '2020-07-09 17:34:06', 'remark': 'bug标题：由【需求详情页的任务列表，期望任务进度宽度保持不变，任务名称随着屏幕拉长而拉长】改为【需求详情页的任务列表，期望任务进度宽度保持不变，任务名称随着屏幕拉长而长】' }, { 'operator': '秦志鹏', 'createTime': '2020-07-09 15:33:14', 'remark': 'bug状态：由【待修复】改为【待测试】' }, { 'operator': '秦志鹏', 'createTime': '2020-07-09 15:33:14', 'remark': '修复结果：由【】改为【已修复】' }, { 'operator': '秦志鹏', 'createTime': '2020-07-09 15:33:14', 'remark': '缺陷原因：由【】改为【代码错误】' }, { 'operator': '朱晓菲', 'createTime': '2020-07-09 01:37:55', 'remark': '创建了缺陷BUG-6034' }]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.sign-record {
+  margin: 20px 0;
+  font-size:14px;
+  line-height:20px;
+  opacity:1;
+  font-family:PingFangSC-Regular;
+
+.createTime {
+  min-width:150px;
+  color:rgba(68,68,68,1);
+}
+
+.remark {
+  min-width:500px;
+  text-align: left;
+  color:#444444;
+}
+.operatorName {
+  min-width: 60px;
+  color:rgba(51,59,74,1);
+  margin-right: 10px;
+}
+}
+</style>

src/views/projectManage/requirement/requirementDetail.vue

@@ -162,29 +162,37 @@
         <section class="main-section">
           <div class="el-main-title">
             <div class="title-left-icon" />
-            <div class="title-left-name">评论</div>
-          </div>
-          <div class="detail-info">
-            <ul class="comment-main">
-              <li v-for="(item,index) in comments" :key="'comment'+index">
-                <span class="comment-name">{{ item.commentInfo.name }}</span>
-                <span class="comment-gmtCreater">{{ item.commentInfo.gmtCreater }}</span><br>
-                <span class="comment-content">{{ item.commentInfo.content }}</span>
-              </li>
-            </ul>
-            <el-input
-              v-model="commentContent"
-              type="textarea"
-              placeholder="请输入评论内容"
-              maxlength="300"
-              show-word-limit
-              :autosize="{ minRows: 3, maxRows: 5}"
-              style="margin-bottom: 20px"
-            />
-            <el-row>
-              <el-col :span="2" :offset="22"><el-button type="primary" size="small" @click="addComment">发表评论</el-button></el-col>
-            </el-row>
+            <div class="title-left-name">动态</div>
           </div>
+          <el-tabs v-model="optionName" class="sign-tabs" @tab-click="handleClick">
+            <el-tab-pane label="评论" name="first">
+              <div class="detail-info">
+                <ul class="comment-main">
+                  <li v-for="(item,index) in comments" :key="'comment'+index">
+                    <span class="comment-name">{{ item.commentInfo.name }}</span>
+                    <span class="comment-gmtCreater">{{ item.commentInfo.gmtCreater }}</span><br>
+                    <span class="comment-content">{{ item.commentInfo.content }}</span>
+                  </li>
+                </ul>
+                <el-input
+                  v-model="commentContent"
+                  type="textarea"
+                  placeholder="请输入评论内容"
+                  maxlength="300"
+                  show-word-limit
+                  :autosize="{ minRows: 3, maxRows: 5}"
+                  style="margin-bottom: 20px"
+                />
+                <el-row>
+                  <el-col :span="2" :offset="22"><el-button type="primary" size="small" @click="addComment">发表评论</el-button></el-col>
+                </el-row>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="变更记录" name="second">
+              <record />
+            </el-tab-pane>
+          </el-tabs>
+
         </section>
       </el-container>
       <!-- 概览 -->
@@ -284,6 +292,7 @@ import schedule from '@/views/projectManage/schedule' // 排期锁定弹窗
 import urgent from '@/assets/urgent.png'
 import download from '@/views/projectManage/components/export.vue'
 import '@/styles/PublicStyle/index.scss'
+import record from '@/views/projectManage/components/record.vue'
 export default {
   components: {
     searchPeople,
@@ -297,7 +306,8 @@ export default {
     scheduleList,
     bugTableDialog,
     schedule,
-    download
+    download,
+    record
   },
   filters: {
     ellipsis(value, num) {
@@ -312,6 +322,7 @@ export default {
     return {
       urgent: urgent,
       showunlock: true,
+      optionName: 'first',
       ScheduId: '', // 排期ID
       BackToTheLatest: false, // 回到最新
       LockState: {}, // 锁定状态
@@ -366,6 +377,9 @@ export default {
     this.$store.state.data.bizId = false
   },
   methods: {
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
     async GetRequireScheduleHistory() {
       this.scheduleVisble = false
       const res = await scheduleGetRequireScheduleHistory(this.requirementId)
@@ -646,4 +660,7 @@ export default {
 .paddingLeft {
   padding-left: 0px;
 }
+.sign-tabs {
+  padding: 0 30px;
+}
 </style>

src/views/projectManage/taskList/taskViewDetail.vue

@@ -183,29 +183,37 @@
         <section class="main-section">
           <div class="el-main-title">
             <div class="title-left-icon" />
-            <div class="title-left-name">评论</div>
-          </div>
-          <div class="detail-info">
-            <ul class="comment-main">
-              <li v-for="(item,index) in comments" :key="'comment'+index">
-                <span class="comment-name">{{ item.commentInfo.name }}</span>
-                <span class="comment-gmtCreater">{{ item.commentInfo.gmtCreater }}</span><br>
-                <span class="comment-content">{{ item.commentInfo.content }}</span>
-              </li>
-            </ul>
-            <el-input
-              v-model="commentContent"
-              type="textarea"
-              placeholder="请输入评论内容"
-              maxlength="300"
-              show-word-limit
-              :autosize="{ minRows: 3, maxRows: 5}"
-              style="margin-bottom: 20px"
-            />
-            <el-row>
-              <el-col :span="2" :offset="22"><el-button type="primary" size="small" @click="addComment">发表评论</el-button></el-col>
-            </el-row>
+            <div class="title-left-name">动态</div>
           </div>
+          <el-tabs v-model="tabPosition" class="sign-tabs" @tab-click="handleClick">
+            <el-tab-pane label="评论" name="first">
+              <div class="detail-info">
+                <ul class="comment-main">
+                  <li v-for="(item,index) in comments" :key="'comment'+index">
+                    <span class="comment-name">{{ item.commentInfo.name }}</span>
+                    <span class="comment-gmtCreater">{{ item.commentInfo.gmtCreater }}</span><br>
+                    <span class="comment-content">{{ item.commentInfo.content }}</span>
+                  </li>
+                </ul>
+                <el-input
+                  v-model="commentContent"
+                  type="textarea"
+                  placeholder="请输入评论内容"
+                  maxlength="300"
+                  show-word-limit
+                  :autosize="{ minRows: 3, maxRows: 5}"
+                  style="margin-bottom: 20px"
+                />
+                <el-row>
+                  <el-col :span="2" :offset="22"><el-button type="primary" size="small" @click="addComment">发表评论</el-button></el-col>
+                </el-row>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="变更记录" name="second">
+              <record />
+            </el-tab-pane>
+          </el-tabs>
+
         </section>
       </el-container>
       <!-- 概览 -->
@@ -316,6 +324,7 @@ import bugTableDialog from '@/views/projectManage/bugList/details/bugTableDialog
 import '@/styles/PublicStyle/index.scss'
 import schedule from '@/views/projectManage/schedule' // 排期锁定弹窗
 import download from '@/views/projectManage/components/export.vue'
+import record from '@/views/projectManage/components/record.vue'
 export default {
   components: {
     searchPeople,
@@ -335,7 +344,8 @@ export default {
     taskDialog,
     bugTableDialog,
     schedule,
-    download
+    download,
+    record
   },
   filters: {
     ellipsis(value, num) {
@@ -348,6 +358,7 @@ export default {
   },
   data() {
     return {
+      tabPosition: 'first',
       showunlock: true,
       ScheduId: '', // 排期ID
       LockState: {}, // 锁定状态
@@ -410,6 +421,9 @@ export default {
     this.$store.state.data.bizId = false
   },
   methods: {
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
     async getScheduleGetTaskScheduleHistory() {
       this.scheduleVisble = false
       const res = await scheduleGetTaskScheduleHistory(this.taskId)
@@ -773,4 +787,7 @@ export default {
    border:1px solid #409EFF !important;
    color:#409EFF !important;
 }
+.sign-tabs {
+  padding: 0 30px;
+}
 </style>