添加值班选择框

frontend_web/src/views/duty/components/dutyEdit.vue

@@ -10,7 +10,7 @@
                         label-width="120px">
             <el-select placeholder="请选择学年"
                        style="width:100%"
-                       v-model="edit.year">
+                       v-model="year">
               <el-option v-for="item in years"
                          :key="item.value"
                          :label="item.label"
@@ -31,7 +31,6 @@
                         label-width="120px">
             <!-- <el-checkbox v-model="selectcites"
                          @change="handleCheckAllChange(selectcites,cities)">全选</el-checkbox> -->
-
             <div style="margin: 15px 0;"></div>
             <el-checkbox-group v-model="selectcites">
               <el-checkbox v-for="city in cities"
@@ -47,20 +46,17 @@
             <el-tag @click="personClick(2)">人员2</el-tag>
           </el-form-item>
         </el-col>
-        <el-col :span="8">
-          <el-form-item label="时间"
-                        label-width="120px">
-            <!-- <el-checkbox v-model="checkAlltimes"
-                         @change="handleCheckAllChange(selecttimes,times)">全选</el-checkbox> -->
 
-            <div style="margin: 15px 0;"></div>
-            <el-checkbox-group v-model="selecttimes">
-              <el-checkbox v-for="city in times"
-                           :label="city.label"
-                           :key="city.value">{{city.label}}</el-checkbox>
-            </el-checkbox-group>
-          </el-form-item>
-        </el-col>
+        <el-checkbox :indeterminate="isIndeterminateTime"
+                     v-model="timeAll"
+                     @change="handleCheckChange">时间</el-checkbox>
+        <div style="margin: 15px 0;"></div>
+        <el-checkbox-group v-model="checkedTime"
+                           @change="handleCheckedChange">
+          <el-checkbox v-for="city in schoolclass"
+                       :label="city"
+                       :key="city">{{city}}</el-checkbox>
+        </el-checkbox-group>
       </el-row>
     </el-form>
     <el-table :data="list"
@@ -136,8 +132,9 @@
     </span>
   </el-dialog>
 </template>
-
 <script>
+const cityOptions = ['计算机楼', '主楼', '科技楼']
+const classTime = ['8：00-10：00', '13：00-15：00', '18：00-20：00']
 // 总列数
 const columnNum = 9
 // 固定列数
@@ -164,8 +161,15 @@ export default {
       times: [{ label: '8:00-12:00', value: 0 }, { label: '12:00-15:00', value: 1 }],
       persons: [{ label: '人员1', value: 1 }, { label: '人员2', value: 2 }],
       checkAll: false,
-      selectcites: [0, 1],
-      selecttimes: [0, 1],
+ // 地点选择
+      isIndeterminate: true,
+      cities: cityOptions,
+      checkedCities: [],
+      // 时间选择
+      isIndeterminateTime: true,
+      schoolclass: classTime,
+      timeAll: false,
+      checkedTime: [],
       years: [],
       dialogvisible: false,
       // 刷新标志 刷新表格样式
@@ -210,6 +214,16 @@ export default {
       this.isIndeterminate = false
     },
 
+    // 时间多选框
+    handleCheckChange (val) {
+      this.timeAll = val ? classTime : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedChange (value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.schoolclass.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.schoolclass.length;
+    },
     initSelectYear (year) {
       this.years = []
       for (let i = 0; i < 5; i++) {