样式改动

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

@@ -36,8 +36,8 @@
           </div>
           <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.bizIdString }}</el-form-item>
+              <el-form-item label="所属父任务："><span class="module">{{ formData.parentName }}</span></el-form-item>
+              <el-form-item label="业务线："><span class="module">{{ formData.bizIdString }}</span></el-form-item>
               <el-form-item label="负责人：">
                 <search-people :value.sync="formData.owner" @change="changeArea('owner')" />
               </el-form-item>
@@ -51,6 +51,7 @@
                   value-format="yyyy.MM.dd"
                   size="medium"
                   style="width: 100%"
+                  prefix-icon="null"
                   @change="changeArea('startTime')"
                 />
               </el-form-item>
@@ -62,6 +63,7 @@
                   value-format="yyyy.MM.dd"
                   size="medium"
                   style="width: 100%"
+                  prefix-icon="null"
                   @change="changeArea('endTime')"
                 />
               </el-form-item>
@@ -72,11 +74,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" @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">
+                <el-input v-model.number="formData.process" class="input-process" @change="changeProgres">
                   <template slot="append">%</template>
                 </el-input>
               </el-form-item>
@@ -93,13 +95,14 @@
           </div>
         </section>
         <!-- 子任务 -->
-        <section class="main-section" v-if="formData.level <= 2">
+        <section class="main-section">
           <div class="el-main-title">
             <div class="title-left-icon" />
-            <div class="title-left-name">子任务<i class="el-icon-circle-plus child-add" @click="addChild()" /></div>
+            <div class="title-left-name">子任务<i v-if="formData.level <= 2" class="el-icon-circle-plus child-add" @click="addChild()" /></div>
           </div>
           <div class="children-list">
             <add-children-list
+              v-if="formData.level <= 2"
               ref="add-children-list"
               :list.sync="formData.childSubTaskInfos"
               :data="formData"
@@ -176,6 +179,12 @@ export default {
     '$route'(to, from) {
       this.taskId = Number(this.$route.query.id)
       this.getById()
+    },
+    'formData.process': {
+      handler(newV) {
+        const val = `${newV}`.replace(/[^\d\.\d]/g, '')
+        this.formData.process = Number(val)
+      }
     }
   },
   created() {
@@ -194,7 +203,7 @@ export default {
     },
     changeProgres: _.debounce(function() { // 修改进度
       this.changeArea('process')
-    }, 1500),
+    }, 1000),
     updateStatus(e) { // 变更状态
       this.formData.status = e.value
       if (this.formData.status === 20) {
@@ -297,7 +306,8 @@ export default {
   .detail-info {
     padding: 0 34px 20px 34px;
     /deep/.el-input__inner{
-      border: 1px solid rgba(220,223,230,0)
+      border: 1px solid rgba(220,223,230,0);
+      padding-left: 10px;
     }
     /deep/.el-input__inner:hover{
       border: 1px solid rgba(220,223,230,1)
@@ -328,7 +338,10 @@ export default {
 		.el-form-item {
 			width: 33%;
       margin-right: 0;
-		}
+    }
+    .module {
+      margin-left: 10px;
+    }
   }
   .demo-form-all {
 		.el-form-item {
@@ -338,15 +351,17 @@ export default {
         width: calc(100% - 100px)
       }
       /deep/.el-input__inner{
-        border: 1px solid rgba(220,223,230,1)
+        border: 1px solid rgba(220,223,230,1);
+        padding-left: 10px;
       }
       /deep/.el-input-group__append {
         padding: 0 10px;
       }
 		}
 	}
-	.form-progress {
-		display: flex;
+	.input-progress {
+    width: 90px;
+    margin-left: 10px;
   }
   .child-add {
     color:#409EFF;

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

@@ -44,8 +44,8 @@
         </div>
         <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.bizIdString }}</el-form-item>
+            <el-form-item label="所属父任务："><span class="module">{{ formData.parentName }}</span></el-form-item>
+            <el-form-item label="业务线："><span class="module">{{ formData.bizIdString }}</span></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="开始日期：">
@@ -56,6 +56,7 @@
                 value-format="yyyy.MM.dd"
                 size="medium"
                 style="width: 100%"
+                prefix-icon="null"
                 @change="changeArea('startTime')"
               />
             </el-form-item>
@@ -67,6 +68,7 @@
                 value-format="yyyy.MM.dd"
                 size="medium"
                 style="width: 100%"
+                prefix-icon="null"
                 @change="changeArea('endTime')"
               />
             </el-form-item>
@@ -78,7 +80,7 @@
               </div>
             </el-form-item>
             <el-form-item>
-              <el-input v-model.number="formData.process" style="width: 90px" @change="changeProgres">
+              <el-input v-model.number="formData.process" class="input-progress" @change="changeProgres">
                 <template slot="append">%</template>
               </el-input>
             </el-form-item>
@@ -204,6 +206,12 @@ export default {
         this.getById()
       },
       immediate: true
+    },
+    'formData.process': {
+      handler(newV) {
+        const val = `${newV}`.replace(/[^\d\.\d]/g, '')
+        this.formData.process = Number(val)
+      }
     }
   },
   created() {
@@ -221,7 +229,7 @@ export default {
     },
     changeProgres: _.debounce(function() { // 修改进度
       this.changeArea('process')
-    }, 1500),
+    }, 1000),
     updateStatus(e) { // 变更状态
       this.formData.status = e.value
       if (this.formData.status === 20) {
@@ -379,7 +387,8 @@ export default {
   .detail-info {
     padding: 0 34px 20px 34px;
     /deep/.el-input__inner{
-      border: 1px solid rgba(220,223,230,0)
+      border: 1px solid rgba(220,223,230,0);
+      padding-left: 10px;
     }
     /deep/.el-input__inner:hover{
       border: 1px solid rgba(220,223,230,1)
@@ -402,7 +411,13 @@ export default {
 		.el-form-item {
 			width: 48%;
       margin-right: 0;
-		}
+      /deep/.el-select{
+        width: 100%;
+      }
+    }
+    .module {
+      margin-left: 10px;
+    }
   }
   .demo-form-all {
 		.el-form-item {
@@ -412,15 +427,17 @@ export default {
         width: calc(100% - 100px)
       }
       /deep/.el-input__inner{
-        border: 1px solid rgba(220,223,230,1)
+        border: 1px solid rgba(220,223,230,1);
+        padding-left: 10px;
       }
       /deep/.el-input-group__append {
         padding: 0 10px;
       }
 		}
 	}
-	.form-progress {
-		display: flex;
+	.input-progress {
+    width: 90px;
+    margin-left: 10px;
   }
   .child-add {
     color:#409EFF;