休息时段增加查看按钮

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

@@ -17,15 +17,23 @@
       <el-table-column label="休息结束时间" align="center" prop="breakEndTime" width="100">
       </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">
+      <el-table-column label="操作" align="center" width="70" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row, scope.$index)"
+            v-if="optType !='view'" 
             v-hasPermi="['mes:cal:calplan:edit']"
           >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            v-else
+            @click="handleUpdate(scope.row, scope.$index, true)"
+          >查看</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -44,6 +52,7 @@
                   <el-select
                     v-model="form.shiftName"
                     clearable
+                    :disabled="onlyread"
                     placeholder="请选择班次"
                   >
                     <el-option
@@ -62,6 +71,7 @@
                 <el-form-item label="工作开始时间" prop="startTime">
                 <el-time-picker
                 v-model="form.startTime"
+                :disabled="onlyread"
                 placeholder="请选择工作开始时间"
                 format ="HH:mm"
                 value-format="HH:mm"
@@ -73,6 +83,7 @@
                 <el-form-item label="工作结束时间" prop="endTime">
                 <el-time-picker
                 v-model="form.endTime"
+                :disabled="onlyread"
                 placeholder="请选择工作结束时间"
                 format ="HH:mm"
                 value-format="HH:mm"
@@ -84,17 +95,18 @@
           <el-row>
             <el-col :span="24">
                 <el-form-item label="备注" prop="remark">
-                  <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
+                  <el-input v-model="form.remark" type="textarea" :disabled="onlyread" placeholder="请输入备注" />
                 </el-form-item>
             </el-col>
           </el-row>
-          <div class="box">
+          <div class="box" :class="{'onlyread': onlyread}">
             <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"
+                  :disabled="onlyread"
                   placeholder="请选择休息开始时间"
                   format ="HH:mm"
                   value-format="HH:mm"
@@ -106,6 +118,7 @@
                     <el-form-item label="休息结束时间" prop="breakEndTime">
                     <el-time-picker
                     v-model="item.breakEndTime"
+                    :disabled="onlyread"
                     placeholder="请选择休息结束时间"
                     format ="HH:mm"
                     value-format="HH:mm"
@@ -114,7 +127,7 @@
                     </el-form-item>
                 </el-col>
               </el-col>
-              <el-col :span="1">
+              <el-col :span="1" v-if="!onlyread">
                 <i class="el-icon-plus" @click="addlist" />
                 <i class="el-icon-minus" @click="removelist(index)" />
               </el-col>
@@ -193,6 +206,7 @@ export default {
       queryParams: {
         shiftType: this.shiftType,
       },
+      onlyread: false,
       // 表单参数
       form: {},
       // 表单校验
@@ -266,7 +280,7 @@ export default {
       this.handleQuery();
     },
     /** 修改按钮操作 */
-    handleUpdate(row, index) {
+    handleUpdate(row, index, onlyread = false) {
       this.reset();
       this.currentIndex = index
       this.currentRow = row
@@ -275,6 +289,7 @@ export default {
       if(this.breakTimeList.length === 0){
         this.breakTimeList.push({breakStartTime: null, breakEndTime: null, orderNum: this.breakTimeList.length + 1})
       }
+      this.onlyread = onlyread
       this.open = true;
       this.title = "修改计划班次";
     },
@@ -311,6 +326,7 @@ export default {
   padding-top: 10px;
   border: 1px solid #dcdfe6;
   position: relative;
+  
   &::after {
     height: 100%;
     width: 1px;
@@ -321,6 +337,9 @@ export default {
     content: '';
     background: #dcdfe6;
   }
+  &.onlyread::after {
+    display: none;
+  }
   .el-icon-plus, .el-icon-minus {
     line-height: 36px;
     width: 13px;