一个班次有两个休息时段

src/views/mes/cal/plan/shift.vue

@@ -12,10 +12,10 @@
       </el-table-column>
       <el-table-column label="工作结束时间" align="center" prop="endTime" width="100">
       </el-table-column>
-      <el-table-column label="休息开始时间" align="center" prop="breakStartTime" width="100">
+      <!-- <el-table-column label="休息开始时间" align="center" prop="breakStartTime" width="100">
       </el-table-column>
       <el-table-column label="休息结束时间" align="center" prop="breakEndTime" width="100">
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" width="70" v-if="optType !='view'" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -80,34 +80,46 @@
                 </el-time-picker>
                 </el-form-item>
             </el-col>
-            <el-col :span="12">
-                <el-form-item label="休息开始时间" prop="breakStartTime">
-                <el-time-picker
-                v-model="form.breakStartTime"
-                placeholder="请选择休息开始时间"
-                format ="HH:mm"
-                value-format="HH:mm"
-                >
-                </el-time-picker>
-                </el-form-item>
-            </el-col>
-            <el-col :span="12">
-                <el-form-item label="休息结束时间" prop="breakEndTime">
-                <el-time-picker
-                v-model="form.breakEndTime"
-                placeholder="请选择休息结束时间"
-                format ="HH:mm"
-                value-format="HH:mm"
-                >
-                </el-time-picker>
-                </el-form-item>
-            </el-col>
+          </el-row>
+          <el-row>
             <el-col :span="24">
                 <el-form-item label="备注" prop="remark">
                   <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
                 </el-form-item>
             </el-col>
-        </el-row>
+          </el-row>
+          <div class="box">
+            <el-row class="row" v-for="(item, index) in breakTimeList" :key="index">
+              <el-col class="td" :span="22">
+                <el-col :span="11">
+                  <el-form-item label="休息开始时间" prop="breakStartTime">
+                  <el-time-picker
+                  v-model="item.breakStartTime"
+                  placeholder="请选择休息开始时间"
+                  format ="HH:mm"
+                  value-format="HH:mm"
+                  >
+                  </el-time-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="11">
+                    <el-form-item label="休息结束时间" prop="breakEndTime">
+                    <el-time-picker
+                    v-model="item.breakEndTime"
+                    placeholder="请选择休息结束时间"
+                    format ="HH:mm"
+                    value-format="HH:mm"
+                    >
+                    </el-time-picker>
+                    </el-form-item>
+                </el-col>
+              </el-col>
+              <el-col :span="1">
+                <i class="el-icon-plus" @click="addlist" />
+                <i class="el-icon-minus" @click="removelist(index)" />
+              </el-col>
+            </el-row>
+          </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -171,6 +183,8 @@ export default {
       showSearch: true,
       // 计划班次表格数据
       shiftList: [],
+      // 休息时间list
+      breakTimeList: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -199,6 +213,18 @@ export default {
 
   },
   methods: {
+    removelist(index) {
+      if(this.breakTimeList.length <= 1) {
+        return this.$message.warning('最少需要一个休息时段')
+      }
+      this.breakTimeList.splice(index, 1)
+    },
+    addlist(){
+      if(this.breakTimeList.length >= 2) {
+        return this.$message.warning('最多只能增加两个休息时段')
+      }
+      this.breakTimeList.push({breakStartTime: null, breakEndTime: null})
+    },
     /** 查询计划班次列表 */
     getList() {
       this.loading = true;
@@ -242,6 +268,9 @@ export default {
       this.currentIndex = index
       this.currentRow = row
       this.form = Object.assign({}, row);
+      // this.breakTimeList = row.breakTimeList
+      this.breakTimeList = []
+      this.breakTimeList.push({breakStartTime: row.breakStartTime, breakEndTime: row.breakEndTime})
       this.open = true;
       this.title = "修改计划班次";
     },
@@ -256,6 +285,7 @@ export default {
           this.currentRow.breakEndTime = this.form.breakEndTime
           this.currentRow.breakStartTime = this.form.breakStartTime
           this.currentRow.remark = this.form.remark
+          this.currentRow.breakTimeList = this.breakTimeList
           this.open = false;
           // this.$set(this.shiftList, this.currentIndex, this.form)
         }
@@ -264,3 +294,33 @@ export default {
   }
 };
 </script>
+<style lang="scss" scoped>
+.box {
+  // height: 36px;
+  width: 100%;
+  padding-top: 10px;
+  border: 1px solid #dcdfe6;
+  position: relative;
+  &::after {
+    height: 100%;
+    width: 1px;
+    position: absolute;
+    top: 0;
+    right: 79px;
+    display: inline-block;
+    content: '';
+    background: #dcdfe6;
+  }
+  .el-icon-plus, .el-icon-minus {
+    line-height: 36px;
+    width: 13px;
+    display: inline-block;
+    height: 36px;
+    padding-left: 15px;
+    cursor: pointer;
+  }
+  .el-icon-plus {
+    padding-left: 0;
+  }
+}
+</style>