Merge branch 'master' of http://gitlab.oytour.com/luochao/confucius

src/pages/stuMan/components/consumptionCourseList.vue

@@ -34,7 +34,7 @@
         :style="{'width':dataList.length>20?'1900px':'auto'}"
       class="tableBox" border="1px">
         <tr>
-          <td class="cancelClassList-left">
+          <td class="cancelClassList-left" style="width: 70px;">
             报名课程
           </td>
           <template v-for="(item,index) in dataList">

src/pages/stuMan/components/stuAppointmentList.vue

@@ -2,39 +2,40 @@
   <!--学员预约统计-->
   <div style="padding: 20px 0;height: 700px;overflow-y: scroll;">
     <div class="page-content">
-      <q-table :loading="loading" :pagination="pageMsg" no-data-label="暂无相关数据" flat
-        class="sticky-column-table sticky-right-column-table" :data="tableData" :columns="columns" row-key="name"
-        hide-bottom>
-        <template v-slot:body="props">
-          <q-tr :props="props">
-            <q-td auto-width key="DateStr">
-              {{props.row.DateStr}}
-              <br />
-              {{props.row.WeekStr}}
-            </q-td>
-            <q-td key="TimeList" :props="props">
-              <div style="display: flex;">
-                <div class="border-bottom" v-for="item in props.row.TimeList" 
-                style="display: flex;">
-                  {{item.StartTime}}-{{item.EndTime}}
-                  <div class="border-bottom num-text"
-                    @click="ShowStuAppoint(item)">
-                    {{item.StuAppointNum}}人
-                  </div> 
+      <div class="list-box">
+        <div class="list-haeder">
+          <div>日期</div>
+          <div>上课学生</div>
+        </div>
+        <div v-for="item in tableData" class="listbox">
+          <div class="list-content">
+            <div class="content-week">
+              <p>{{item.DateStr}}</p>
+              <p>{{item.WeekStr}}</p>
+            </div>
+            <div class="content-right">
+              <div v-for="i in item.TimeList" class="right-box">
+                <div class="content-class">
+                  <div v-if="i.StartTime=='09:30'">第一节课</div>
+                  <div v-if="i.StartTime=='11:10'">第二节课</div>
+                  <div v-if="i.StartTime=='13:30'">第三节课</div>
+                  <div v-if="i.StartTime=='15:10'">第四节课</div>
+                  <div v-if="i.StartTime=='16:50'">第五节课</div>
+                  <div v-if="i.StartTime=='19:00'">第六节课</div>
                 </div>
-              </div>
-            </q-td>
-            <!-- <q-td key="Num" :props="props">
-              <div v-for="item in props.row.TimeList">
-                <div class="border-bottom" style="cursor:pointer;color:blue;text-decoration:underline"
-                  @click="ShowStuAppoint(item)">
-                  {{item.StuAppointNum}}
+                <div class="content-name">
+                  <div v-for="S in i.StuList">
+                    <q-badge color="blue">
+                      {{S.StuName}}
+                    </q-badge>
+                  </div>
                 </div>
               </div>
-            </q-td> -->
-          </q-tr>
-        </template>
-      </q-table>
+            </div>
+          </div>
+          <div class="height10"></div>
+        </div>
+      </div>
     </div>
     <appointmentDetails v-if="isShowDetails" :showItem="showItem" @refreshpage="refreshpage"></appointmentDetails>
   </div>
@@ -73,14 +74,7 @@
             field: "TimeList",
             align: "left",
             field: row => row.TimeList
-          },
-          // {
-          //   name: "Num",
-          //   label: "预约人数",
-          //   field: "Num",
-          //   align: "left",
-          //   field: row => row.TimeList
-          // },
+          }
         ],
         pageMsg: {
           rowsPerPage: 1000
@@ -107,6 +101,84 @@
   };
 </script>
 <style>
+  .list-haeder div:first-child{
+    width: 270px;
+    flex-shrink: 0;
+    text-align: center;
+    border-right: 1px solid #eeeeee;
+  }
+  .list-haeder div:last-child{
+    padding: 0 0 0 10px;
+  }
+  .list-haeder{
+    line-height: 40px;
+    display: flex;
+    border-bottom: 1px solid #eeeeee;
+    background: #F2F4F7;
+  }
+  .content-name div{
+    margin-left: 5px;
+  }
+  .content-name{
+    height: 40px;
+    overflow: hidden;
+    flex-grow: 1;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    border-bottom: 1px solid #eeeeee;
+    background: #ffffff;
+  }
+  .right-box:last-child .content-name{
+    border-bottom: 0;
+  }
+  .content-class{
+    width: 150px;
+    line-height: 40px;
+    overflow: hidden;
+    flex-shrink: 0;
+    text-align: center;
+    color: #ffffff;
+    background: #305496;
+  }
+  .right-box{
+    display: flex;
+    align-items: center;
+  }
+  .content-right{
+    flex-grow: 1;
+  }
+  .content-week{
+    width: 120px;
+    flex-shrink: 0;
+    text-align: center;
+    
+  }
+  .list-content{
+    display: flex;
+    align-items: center;
+  }
+  .listbox{
+    display: flex;
+    flex-direction: column;
+  }
+  .list-box{
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #eeeeee;
+  }
+  .list-box .listbox:last-child .height10{
+    height: 0;
+    border: 0;
+  }
+  .height10{
+    width: 100%;
+    height: 20px;
+    background: #F2F4F7;
+    border-top: 1px solid #eeeeee;
+    border-bottom: 1px solid #eeeeee;
+  }
   .num-text{
     cursor:pointer;
     color:blue;