1

src/components/busManagement/HPTripPlan.vue

@@ -3,11 +3,11 @@
     <div class="query-box" style="border-bottom: none;">
       <ul>
         <li><span><em>{{$t('pub.date')}}</em>
-            <el-date-picker v-model="msg.MonthStr" type="month" placeholder="选择月" format="yyyy-MM" value-format="yyyy-MM">
+            <el-date-picker v-model="msg.MonthStr" type="month" placeholder="选择月" format="yyyy-MM"
+              value-format="yyyy-MM">
             </el-date-picker>
           </span>
         </li>
- 
         <li>
           <input type="button" class="normalBtn" :value="$t('pub.searchBtn')" @click="getList()" />
         </li>
@@ -15,9 +15,31 @@
     </div>
 
     <div style="width: 100%;  overflow-x: auto;padding-bottom: 10px; margin-top: 10px; " class="ownScrollbarStyle">
-
+      <table v-loading="loading" class="">
+        <thead>
+          <tr>
+            <th style="text-align:center;">
+              {{msg.MonthStr}}
+            </th>
+            <template v-if="headerList&&headerList.length>0">
+              <template v-for="(hItem,hIndex) in headerList">
+                <th :key="`h_`+hIndex" style="width:50px;text-align:center;">
+                  {{hItem.DayStr}}
+                </th>
+              </template>
+            </template>
+          </tr>
+        </thead>
+        <tbody v-for="(item,index) in dataList" :key="`d_`+index">
+          <tr>
+            <td style="text-align:center;">
+              {{item.CarName}}<br />
+              {{item.CarNo}}
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-
   </div>
 </template>
 <script>
@@ -27,8 +49,8 @@
         loading: false,
         msg: {
           MonthStr: "",
-
         },
+        headerList: [], //表头
         dataList: [],
       }
     },
@@ -38,12 +60,16 @@
     methods: {
       getList() {
         this.loading = true;
+        this.dataList = [];
+        this.headerList = [];
         this.apipost('travel_post_GetTripCarPlanList', this.msg, res => {
           this.loading = false;
           console.log("travel_post_GetTripCarPlanList", res)
           if (res.data.resultCode == 1) {
-
-
+            this.dataList = res.data.data;
+            if (this.dataList && this.dataList.length > 0) {
+              this.headerList = this.dataList[0].SubList;
+            }
           } else {
             this.Error(res.data.message);
           }
@@ -52,17 +78,15 @@
     },
     mounted() {
       let myDate = new Date();
-      let nowDate =
-        myDate.getFullYear() +
-        "-" +
-        parseInt(myDate.getMonth() + 1);
-      this.msg.MonthStr = nowDate;
+      let yearStr = myDate.getFullYear();
+      let monthStr = parseInt(myDate.getMonth() + 1);
+      this.msg.MonthStr = yearStr + "-" + (monthStr < 10 ? '0' + monthStr : monthStr);
       this.getList();
     },
   }
 
 </script>
 <style>
-  
+
 
 </style>