弹框

src/views/projectManage/taskList/childrenTask/addChildrenList.vue

@@ -169,6 +169,9 @@ export default {
     update() {
       this.$emit('list:update', this.childrenList)
       this.$emit('change')
+    },
+    toDetail(id) {
+      this.$emit('toDetail', id)
     }
   }
 }
@@ -227,24 +230,28 @@ export default {
 		}
 	}
 	.input-name {
-		width: calc(70% - 70px);
+		min-width: calc(60% - 70px);
 		padding-left: 14px;
 		line-height: 24px;
 		color: #333333;
 		display: flex;
 		flex-wrap: wrap;
 		flex-direction: column;
+    cursor: pointer;
 		span {
 			padding-top: 5px;
 			font-size: 14px;
 		}
+    span:hover {
+      color:#409EFF;
+    }
 		.footer{
 			margin-top: 10px;
 			align-self: flex-end;
 		}
 	}
 	.child-endTime {
-		max-width: 30%;
+		max-width: 40%;
 		height: 36px;
 		padding-left: 20px;
 		display: flex;

src/views/projectManage/taskList/childrenTask/changeStatus.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="dialog-main">
+    <el-dialog
+      title="提示"
+      :visible.sync="visible"
+      width="50%"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      top="15vh"
+      @close="cancel()"
+    >
+      <slot />
+      <span slot="footer" class="dialog-footer">
+        <div class="confirm" @click="confirm()">
+          <span>强制变更状态</span>
+          <span>当前任务及其所有子任务</span>
+        </div>
+        <div class="cancel" @click="cancel()">我知道了，关闭</div>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    showDialog: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
+  data() {
+    return {
+      visible: this.showDialog
+    }
+  },
+  watch: {
+    showDialog() {
+      this.visible = this.showDialog
+    }
+  },
+  methods: {
+    confirm() {
+      this.visible = !this.isDefaultClose
+      this.$emit('update:showDialog', this.visible)
+      this.$emit('confirm', true)
+    },
+    cancel() {
+      this.visible = false
+      this.$emit('update:showDialog', this.visible)
+      this.$emit('cancel', false)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+>>>.el-dialog__header {
+  padding: 20px !important;
+}
+>>>.el-dialog__title{
+  padding-left: 10px;
+  position: relative;
+}
+>>>.el-dialog__title::before {
+  content:" ";
+  display: inline-block;
+  position: absolute;
+  top: 2px;
+  left: 0;
+  width: 5px;
+  height: 20px;
+  background-color: rgb(64, 158, 255);;
+}
+.dialog-footer {
+	width: 100%;
+	.confirm {
+		width: 150px;
+		height: 45px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		align-items: center;
+		background-color: #CB2B29;
+		border-radius: 4px;
+		color: #ffffff;
+	}
+	.cancel {
+		width: 150px;
+		height: 45px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: #333333;
+		border:1px solid #D1D0D0;
+		border-radius: 4px;
+	}
+}
+</style>

src/views/projectManage/taskList/childrenTask/childDetail.vue

@@ -73,8 +73,11 @@
             <el-form :inline="true" :model="formData" class="demo-form-all" label-position="right" label-width="100px">
               <el-form-item label="任务进度：">
                 <div class="block">
-                  <el-slider v-model="formData.process" show-input @change="changeProgres" />
+                  <el-slider v-model="formData.process" @change="changeProgres" />
                 </div>
+                <el-input v-model="formData.process" @input="changeProgres">
+                  <template slot="append">%</template>
+                </el-input>
               </el-form-item>
             </el-form>
           </div>

src/views/projectManage/taskList/childrenTask/childDrawer.vue

@@ -7,6 +7,9 @@
   >
     <el-container class="is-vertical">
       <section class="top-control">
+        <div v-show="formData.parentId > 0" class="back">
+          <i class="el-icon-arrow-left" @click="backParent(formData.parentId)" />
+        </div>
         <div class="bug-id-status">
           <span>BUG-{{ formData.id }}</span>
           <el-dropdown placement="bottom" @command="updateStatus">
@@ -71,9 +74,14 @@
           <el-form :inline="true" :model="formData" class="demo-form-all" label-position="right" label-width="100px">
             <el-form-item label="任务进度：">
               <div class="block">
-                <el-slider v-model="formData.process" show-input @change="changeProgres" />
+                <el-slider v-model.number="formData.process" @change="changeProgres" />
               </div>
             </el-form-item>
+            <el-form-item>
+              <el-input v-model.number="formData.process" style="width: 90px" @change="changeProgres">
+                <template slot="append">%</template>
+              </el-input>
+            </el-form-item>
           </el-form>
         </div>
       </section>
@@ -114,6 +122,7 @@
             :list.sync="formData.childSubTaskInfos"
             :data="formData"
             :all-status="allStatus"
+            @toDetail="toChild"
             @change="changeArea('childSubTaskInfos')"
           />
         </div>
@@ -259,11 +268,19 @@ export default {
       })
       this.$refs['add-children-list'].scroll(`childadd` + (this.formData.childSubTaskInfos.length - 1))
     },
-    close() {
+    close() { // 关闭
       this.$emit('close')
     },
-    toDetail() {
+    toDetail() { // 前往详情页
       this.$router.push({ name: '子任务详情', query: { id: this.formData.id }})
+    },
+    backParent(id) { // 返回父任务
+      this.taskId = id
+      this.getById()
+    },
+    toChild(id) { // 前往子任务
+      this.taskId = id
+      this.getById()
     }
   }
 }
@@ -275,6 +292,14 @@ export default {
 }
 .top-control {
 	padding: 30px;
+  position: relative;
+  .back {
+    position: absolute;
+    left: 10px;
+    font-size: 18px;
+    top: 33px;
+    cursor: pointer;
+  }
 	.bug-id-status {
 		font-size: 18px;
 		color: #333333;
@@ -356,13 +381,16 @@ export default {
   }
   .demo-form-all {
 		.el-form-item {
-			width: 60%;
+			width: 35%;
       margin-right: 0;
       /deep/.el-form-item__content {
         width: calc(100% - 100px)
       }
       /deep/.el-input__inner{
         border: 1px solid rgba(220,223,230,1)
+      }
+      /deep/.el-input-group__append {
+        padding: 0 10px;
       }
 		}
 	}

src/views/projectManage/taskList/childrenTask/childrenList.vue

@@ -42,16 +42,19 @@
         </template>
       </el-table-column>
     </el-table>
+    <change-status :show-dialog="statusDialog" />
     <child-drawer v-if="drawer" :child-id="taskObj.id" @close="drawer = false;getSubTasksList()" />
   </div>
 </template>
 <script>
 import { getSubTaskList, subTaskUpdate, showIterationEnum } from '@/api/taskChild'
 import childDrawer from './childDrawer'
+import changeStatus from './changeStatus'
 
 export default {
   components: {
-    childDrawer
+    childDrawer,
+    changeStatus
   },
   data() {
     return {
@@ -63,7 +66,8 @@ export default {
       ], // 任务所有状态
       showTaskDialog: false, // 更改状态弹框
       taskObj: { id: 0 }, // 当前任务
-      drawer: false
+      drawer: false,
+      statusDialog: false // 状态弹框
     }
   },
   created() {