子任务初步完成

src/components/select/selectPeople.vue

@@ -85,6 +85,7 @@ export default {
       this.inputValue = val.name
       this.peopleImg = val.phoneUrl
       this.$emit('update:value', val.idap)
+      this.$emit('change')
     }
   }
 }

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

@@ -3,11 +3,17 @@
     <label v-if="isTitle">子任务<i class="el-icon-circle-plus child-add" @click="addChild()" /></label>
     <div class="children-list">
       <div v-for="(item,index) in childrenList" :id="'child' + id + index" :key="'child' + index" class="children-item">
-        <el-select v-model="item.status" placeholder="请选择" size="medium" class="child-status" :class="'status'+ item.status">
+        <el-select
+          v-model="item.status"
+          placeholder="请选择"
+          size="medium"
+          class="child-status"
+          :class="{'status0':item.status === 0,'status1':item.status === 10,'status2':item.status === 20}"
+          @change="update()"
+        >
           <el-option
             v-for="val in allStatus"
             :key="val.code"
-            :class="{'status0':item.status===0,'status1':item.status > 0 && item.status <100,'status2':item.status===100,}"
             :label="val.msg"
             :value="val.code"
           />
@@ -16,7 +22,7 @@
           <span v-if="!item.edit">{{ item.name }}</span>
           <el-input v-if="item.edit" v-model="item.name" placeholder="请输入任务名称（必填）" size="medium" clearable="" />
           <div v-if="item.edit" class="footer">
-            <el-button size="mini" @click="cancelChild(index)">取消</el-button>
+            <el-button size="mini" @click="cancelChild(index,item.newNode)">取消</el-button>
             <el-button type="primary" size="mini" @click="confirmChild(index,item.name)">确定</el-button>
           </div>
         </div>
@@ -30,10 +36,11 @@
             default-time="23:59:59"
             size="small"
             :class="[item.endTime?'all':'icon']"
+            @change="update()"
           />
         </div>
         <div class="select-people">
-          <select-people :value.sync="item.owner" :init="!item.edit" />
+          <select-people :value.sync="item.owner" :init="!item.edit" @change="update()" />
         </div>
         <div class="child-control">
           <el-popover
@@ -105,6 +112,13 @@ export default {
       immediate: true,
       deep: true
     },
+    allStatus: {
+      handler(newV) {
+        this.allStatus = newV
+      },
+      immediate: true,
+      deep: true
+    },
     isTitle: {
       handler(newV) {
         this.isTitle = newV
@@ -122,7 +136,8 @@ export default {
         endTime: null,
         owner: '',
         status: 0,
-        edit: true
+        edit: true,
+        newNode: true
       })
       this.scroll(`child` + this.id + (this.childrenList.length - 1))
     },
@@ -131,9 +146,13 @@ export default {
         document.getElementById(id).scrollIntoView({ block: 'start', behavior: 'smooth' })
       })
     },
-    cancelChild(index) { // 取消添加子任务
-      this.childrenList.splice(index, 1)
-      this.$emit('list:update', this.childrenList)
+    cancelChild(index, newNode) { // 取消添加子任务
+      if (newNode) {
+        this.childrenList.splice(index, 1)
+        this.$emit('list:update', this.childrenList)
+      } else {
+        this.$set(this.childrenList[index], 'edit', false)
+      }
     },
     confirmChild(index, name) { // 确认添加子任务
       const value = name && name.replace(/\s*/, '')
@@ -142,11 +161,14 @@ export default {
         return false
       }
       this.childrenList[index].edit = false
-      this.$emit('list:update', this.childrenList)
-      this.$emit('change')
+      this.update()
     },
     editChild(index, item) { // 编辑子任务
-      item.edit = true
+      this.$set(this.childrenList[index], 'edit', true)
+    },
+    update() {
+      this.$emit('list:update', this.childrenList)
+      this.$emit('change')
     }
   }
 }
@@ -182,7 +204,7 @@ export default {
 		margin: 20px 0;
 	}
 	.child-status {
-		width: 64px;
+		width: 70px;
 		padding-top: 5px;
 		>>> input{
 			height: 20px;
@@ -205,7 +227,7 @@ export default {
 		}
 	}
 	.input-name {
-		width: calc(70% - 64px);
+		width: calc(70% - 70px);
 		padding-left: 14px;
 		line-height: 24px;
 		color: #333333;
@@ -222,7 +244,7 @@ export default {
 		}
 	}
 	.child-endTime {
-		width: 30%;
+		max-width: 30%;
 		height: 36px;
 		padding-left: 20px;
 		display: flex;

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

@@ -37,7 +37,7 @@
           <div class="detail-info">
             <el-form :inline="true" :model="formData" class="demo-form-inline" label-position="right" label-width="100px">
               <el-form-item label="所属父任务：" class="module">{{ formData.parentName }}</el-form-item>
-              <el-form-item label="业务线：" class="module">{{ formData.bizId }}</el-form-item>
+              <el-form-item label="业务线：" class="module">{{ formData.bizIdString }}</el-form-item>
               <el-form-item label="负责人：">
                 <search-people :value.sync="formData.owner" @change="changeArea('owner')" />
               </el-form-item>
@@ -67,7 +67,7 @@
                 />
               </el-form-item>
               <el-form-item label="其他参与人：">
-                <search-people :value.sync="formData.participants" @change="changeArea('participants')" />
+                <search-people :value.sync="formData.participants" :multiple="true" @change="changeArea('participants')" />
               </el-form-item>
             </el-form>
             <el-form :inline="true" :model="formData" class="demo-form-all" label-position="right" label-width="100px">
@@ -92,9 +92,9 @@
         <section class="main-section">
           <div class="el-main-title">
             <div class="title-left-icon" />
-            <div class="title-left-name">子任务</div>
+            <div class="title-left-name">子任务<i class="el-icon-circle-plus child-add" @click="addChild()" /></div>
           </div>
-          <div>
+          <div class="children-list">
             <add-children-list
               ref="add-children-list"
               :list.sync="formData.childSubTaskInfos"
@@ -166,6 +166,7 @@ export default {
     this.$store.state.data.status = true
     this.$store.state.data.bizId = true
     this.getTaskStatus()
+    this.getById()
   },
   destroyed() {
     this.$store.state.data.status = false
@@ -207,14 +208,26 @@ export default {
       const res = await getById(this.taskId)
       if (res.code === 200) {
         this.formData = res.data
-        this.formData.participants = this.formData.participants.split(',')
+        this.formData.participants = this.formData.participants ? this.formData.participants.split(',') : []
       }
     },
+    addChild() {
+      this.formData.childSubTaskInfos.push({
+        name: null,
+        bizId: this.formData.parentId,
+        endTime: null,
+        owner: '',
+        status: 0,
+        edit: true,
+        newNode: true
+      })
+      this.$refs['add-children-list'].scroll(`childadd` + (this.formData.childSubTaskInfos.length - 1))
+    },
     async subTaskDelete() { // 删除任务
       const res = await subTaskDelete(this.formData.id)
       if (res.code === 200) {
         this.$message({ message: '删除成功', type: 'success', duration: 1000, offset: 150 })
-        this.$route.go(-1)
+        this.$router.go(-1)
       }
     }
   }
@@ -267,6 +280,9 @@ export default {
         visibility: visible;
       }
     }
+    /deep/.el-slider__button-wrapper {
+      z-index: 2;
+    }
   }
   .demo-form-inline {
 		.el-form-item {
@@ -293,6 +309,26 @@ export default {
     color:#409EFF;
     margin-left: 10px;
   }
+  .children-list {
+    min-height: 15vh;
+  }
+}
+.danger-img {
+  width: 100%;
+  padding: 0 60px 50px 60px;
+  margin-bottom: 50px;
+  position: relative;
+  img {
+    height: 50px;
+    width: 50px;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%,0);
+  }
+}
+.danger-title {
+	text-align: center;
+	padding-bottom: 50px;
 }
 </style>
 <style>

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

@@ -41,7 +41,7 @@
         <div class="detail-info">
           <el-form :inline="true" :model="formData" class="demo-form-inline" label-position="right" label-width="100px">
             <el-form-item label="所属父任务：" class="module">{{ formData.parentName }}</el-form-item>
-            <el-form-item label="业务线：" class="module">{{ formData.bizId }}</el-form-item>
+            <el-form-item label="业务线：" class="module">{{ formData.bizIdString }}</el-form-item>
           </el-form>
           <el-form :inline="true" :model="formData" class="demo-form-inline" label-position="right" label-width="100px">
             <el-form-item label="开始日期：">
@@ -106,7 +106,7 @@
       <section class="main-section">
         <div class="el-main-title">
           <div class="title-left-icon" />
-          <div class="title-left-name">子任务</div>
+          <div class="title-left-name">子任务<i class="el-icon-circle-plus child-add" @click="addChild()" /></div>
         </div>
         <div>
           <add-children-list
@@ -237,7 +237,7 @@ export default {
       const res = await getById(this.taskId)
       if (res.code === 200) {
         this.formData = res.data
-        this.formData.participants = this.formData.participants.split(',')
+        this.formData.participants = this.formData.participants ? this.formData.participants.split(',') : []
       }
     },
     async subTaskDelete() { // 删除任务
@@ -247,6 +247,18 @@ export default {
         this.close()
       }
     },
+    addChild() {
+      this.formData.childSubTaskInfos.push({
+        name: null,
+        bizId: this.formData.parentId,
+        endTime: null,
+        owner: '',
+        status: 0,
+        edit: true,
+        newNode: true
+      })
+      this.$refs['add-children-list'].scroll(`childadd` + (this.formData.childSubTaskInfos.length - 1))
+    },
     close() {
       this.$emit('close')
     },

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

@@ -93,7 +93,7 @@ export default {
       if (res.code === 200) {
         this.$message({ message: '修改成功', type: 'success', offset: 150 })
       }
-      this.getTaskStatus()
+      this.getSubTasksList()
     },
     showChild(obj) { // 展示子任务
       this.taskObj = obj

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

@@ -219,6 +219,7 @@ export default {
           params.process > 100 ? params.process = 100 : params.process
           params.childSubTaskInfos = this.childrenList.map(item => {
             delete item.edit
+            delete item.newNode
             return { ...item }
           })
           params.participants = params.participants.join()