页面修改

src/components/course/class-form.vue

@@ -255,23 +255,51 @@
         <div class="row wrap" style="margin:20px 0;">
           <div class="col-6">
             学习时段
-            <q-btn style="margin-left:30px;" size="10px" @click="addPlanTime()" round color="primary"
+            <q-btn style="margin-left:30px;" size="10px" @click="addPlan()" round color="primary"
               icon="iconfont icon-img_haha" />
           </div>
         </div>
         <template v-if="DefaultPlanTimeList&&DefaultPlanTimeList.length>0">
-          <div class="row wrap" v-for="(nItem,nIndex) in DefaultPlanTimeList" :key="nIndex+10000">
-            <div class="col-6">
-              <q-input filled stack-label maxlength="20" v-model="nItem.StartTime" placeholder="08:30" :dense="false"
-                class="col-6 q-pr-lg q-pb-lg" label="开始时间" />
-            </div>
-            <div class="col-6" style="position:relative;">
-              <q-input filled stack-label maxlength="20" v-model="nItem.EndTime" placeholder="09:30" :dense="false"
+          <table>
+            <thead>
+              <tr>
+                <th>
+                  日期/周
+                </th>
+                <th colspan="2">
+                  时间
+                </th>
+                <th>
+                  操作
+                </th>
+              </tr>
+            </thead>
+            <tbody v-for="(nItem,nIndex) in DefaultPlanTimeList" :key="nIndex+10000">
+              <tr v-for="(sItem,sIndex) in nItem.TimeList">
+                <td :rowspan="nItem.TimeList.length" v-if="sIndex==0">
+                  <q-select filled stack-label multiple v-model="nItem.DateList" ref="ClassStyle" :options="checkedDays"
+                    label="选择日期" :dense="false" class="col-6 q-pr-lg q-pr-lg" emit-value map-options>
+                  </q-select>
+                  <a @click="deletePlan(nIndex)" style="color:blue;cursor:pointer;">删除</a>
+                </td>
+                <td>
+                  <q-input filled stack-label maxlength="20" v-model="sItem.StartTime" placeholder="08:30"
+                    :dense="false" class="col-6 q-pr-lg q-pb-lg" label="开始时间" />
+                </td>
+                <td>
+                  <q-input filled stack-label maxlength="20" v-model="sItem.EndTime" placeholder="09:30" :dense="false"
                     class="col-6 q-pr-lg q-pb-lg" label="结束时间" />
-              <q-btn style="position:absolute;right:-5px;top:20px;" size="6px" @click="deletePlanTime(nIndex)" round
-                color="red" icon="iconfont icon-guanbi1" />
-            </div>
-          </div>
+                </td>
+                <td>
+                  <q-btn size="10px" v-if="sIndex==0" @click="addPlanTime(nItem)" round color="primary"
+                    icon="iconfont icon-img_haha" />
+                  <q-btn v-if="sIndex>0" size="10px" @click="deletePlanTime(nItem,sIndex)" round color="red"
+                    icon="iconfont icon-guanbi1" />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
         </template>
         <div class="row wrap" style="margin-top:30px;">
           <div class="col-6">
@@ -414,7 +442,10 @@
         //选中日期/星期
         checkedDays: [],
         //默认上课时间数组
-        DefaultPlanTimeList: [],
+        DefaultPlanTimeList: [{
+          DateList: [],
+          TimeList: [],
+        }],
       }
     },
     created() {
@@ -630,17 +661,54 @@
       delStepPrice(index) {
         this.ladderPriceList.splice(index, 1);
       },
+      //添加学习时间
+      addPlan() {
+        var planObj = {
+          DateList: [],
+          TimeList: [{
+            StartTime: "",
+            EndTime: "",
+          }],
+        }
+        this.DefaultPlanTimeList.push(planObj);
+      },
+      //删除学习时间
+      deletePlan(index) {
+        this.$q.dialog({
+          title: '提示信息',
+          message: "是否要删除",
+          cancel: true,
+          persistent: true,
+          ok: "确定",
+          cancel: "取消",
+        }).onOk(() => {
+          this.DefaultPlanTimeList.splice(index, 1);
+        }).onCancel(() => {
+
+        });
+      },
       //添加学习时段
-      addPlanTime() {
+      addPlanTime(item) {
         var obj = {
           StartTime: "",
           EndTime: "",
         }
-        this.DefaultPlanTimeList.push(obj);
+        item.TimeList.push(obj);
       },
       //删除学习时段
-      deletePlanTime(index) {
-        this.DefaultPlanTimeList.splice(index, 1);
+      deletePlanTime(item, index) {
+        this.$q.dialog({
+          title: '提示信息',
+          message: "是否要删除此学习时间段",
+          cancel: true,
+          persistent: true,
+          ok: "确定",
+          cancel: "取消",
+        }).onOk(() => {
+          item.TimeList.splice(index, 1);
+        }).onCancel(() => {
+
+        });
       },
       //获取班级类型下拉
       GetClassTypeList() {