优化日报详细信息展示

Yijia-SaaS/yijia-ui/src/views/dataSource/dayReport.vue

@@ -1,102 +1,103 @@
 <template>
-  <div>
+  <el-scrollbar  style='height:100%'>
     <div>
-      <el-form :model="queryParams" style="margin-left: 20px;" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-        <el-form-item>
-          <el-button  size="mini" @click="dayDataSource">今天</el-button>
-          <el-button  size="mini" @click="yesDataSource">昨天</el-button>
-          <el-button  size="mini" @click="workDataSource">本周</el-button>
-          <el-button  size="mini" @click="monthDataSource">本月</el-button>
-          <el-date-picker style="margin: 0px 10px;"
-                          size="mini"
-            v-model="dateRangeCreatedDate"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期">
-          </el-date-picker>
-          <el-button  size="mini" @click="queryDataSource">查询</el-button>
-        </el-form-item>
-      </el-form>
-      <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">数据概览</span>
-      <el-row :gutter="10" class="panel-group">
-        <el-col :xs="12" :sm="12" :lg="6" >
-          <div class="flex xiaoliang">
-            <div style="line-height: 62px;font-size: 44px;">
-              {{ form.zongliters }}L
+      <div>
+        <el-form :model="queryParams" style="margin-left: 20px;" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item>
+            <el-button  size="mini" @click="dayDataSource">今天</el-button>
+            <el-button  size="mini" @click="yesDataSource">昨天</el-button>
+            <el-button  size="mini" @click="workDataSource">本周</el-button>
+            <el-button  size="mini" @click="monthDataSource">本月</el-button>
+            <el-date-picker style="margin: 0px 10px;"
+                            size="mini"
+              v-model="dateRangeCreatedDate"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期">
+            </el-date-picker>
+            <el-button  size="mini" @click="queryDataSource">查询</el-button>
+          </el-form-item>
+        </el-form>
+        <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">数据概览</span>
+        <el-row :gutter="10" class="panel-group">
+          <el-col :xs="12" :sm="12" :lg="6" >
+            <div class="flex xiaoliang">
+              <div style="line-height: 62px;font-size: 44px;">
+                {{ form.zongliters }}L
+              </div>
+              <div style="font-size: 28px;">
+                总销量
+              </div>
             </div>
-            <div style="font-size: 28px;">
-              总销量
+          </el-col>
+          <el-col :xs="12" :sm="12" :lg="6">
+            <div  class="flex xiaoe">
+              <div style="line-height: 62px;font-size: 44px;">
+                {{ form.zongAmt }}元
+              </div>
+              <div style="font-size: 28px;">
+                总金额
+              </div>
             </div>
-          </div>
-        </el-col>
-        <el-col :xs="12" :sm="12" :lg="6">
-          <div  class="flex xiaoe">
-            <div style="line-height: 62px;font-size: 44px;">
-              {{ form.zongAmt }}元
+          </el-col>
+          <el-col :xs="12" :sm="12" :lg="6" >
+            <div class="flex xiaoliang">
+              <div style="line-height: 62px;font-size: 44px;">
+                {{ form.cyamt}}元
+              </div>
+              <div style="font-size: 28px;">
+                柴油
+              </div>
             </div>
-            <div style="font-size: 28px;">
-              总金额
-            </div>
-          </div>
-        </el-col>
-        <el-col :xs="12" :sm="12" :lg="6" >
-          <div class="flex xiaoliang">
-            <div style="line-height: 62px;font-size: 44px;">
-              {{ form.cyamt}}元
-            </div>
-            <div style="font-size: 28px;">
-              柴油
-            </div>
-          </div>
-        </el-col>
+          </el-col>
 
-        <el-col :xs="12" :sm="12" :lg="6" >
-          <div class="flex xiaoliang">
-            <div style="line-height: 62px;font-size: 44px;">
-              {{ form.qyamt }}元
+          <el-col :xs="12" :sm="12" :lg="6" >
+            <div class="flex xiaoliang">
+              <div style="line-height: 62px;font-size: 44px;">
+                {{ form.qyamt }}元
+              </div>
+              <div style="font-size: 28px;">
+                汽油
+              </div>
             </div>
-            <div style="font-size: 28px;">
-              汽油
-            </div>
-          </div>
-        </el-col>
-      </el-row>
-    </div>
-    <div style="width:100%; height: 360px;margin: 0px 30px;background: #FFFFFF;">
-      <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">销售情况</span>
-      <div  ref="myChart"  style="width:100%; height: 350px;" ></div>
-    </div>
-    <div style="width:100%; height: 181px;">
-      <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">详情：</span>
-      <el-table v-loading="loading" :data="dayReportList">
-        <el-table-column label="日期" align="center" prop="payDate" >
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.payDate, '{y}-{m}-{d}') }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="销额" align="center" prop="amt" />
-        <el-table-column label="销量（L）" align="center" prop="orderLiters" v-if="false" />
-        <el-table-column label="汽油" align="center" prop="qyAmt" />
-        <el-table-column label="柴油" align="center" prop="cyAmt" />
-        <el-table-column label="订单数" align="center" prop="orderNo" />
-        <el-table-column label="营销费" align="center" prop="" />
-        <el-table-column label="应收" align="center" prop="menberAmt" />
-        <el-table-column label="到账" align="center" prop="" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleLook(scope.row)"
-              v-hasPermi="['station:gun:list']"
-            >详情</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <el-dialog :title="title" :visible.sync="open"  append-to-body>
+          </el-col>
+        </el-row>
+      </div>
+      <div style="width:100%; height: 360px;margin: 0px 30px;background: #FFFFFF;">
+        <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">销售情况</span>
+        <div  ref="myChart"  style="width:100%; height: 350px;" ></div>
+      </div>
+      <div style="width:100%; height: 181px;">
+        <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">详情：</span>
+        <el-table v-loading="loading" :data="dayReportList">
+          <el-table-column label="日期" align="center" prop="payDate" >
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.payDate, '{y}-{m}-{d}') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="销额" align="center" prop="amt" />
+          <el-table-column label="销量（L）" align="center" prop="orderLiters" v-if="false" />
+          <el-table-column label="汽油" align="center" prop="qyAmt" />
+          <el-table-column label="柴油" align="center" prop="cyAmt" />
+          <el-table-column label="订单数" align="center" prop="orderNo" />
+          <el-table-column label="营销费" align="center" prop="" />
+          <el-table-column label="应收" align="center" prop="menberAmt" />
+          <el-table-column label="到账" align="center" prop="" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleLook(scope.row)"
+                v-hasPermi="['station:gun:list']"
+              >详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-dialog :title="title" :visible.sync="open"  append-to-body>
       <el-table v-loading="loading" :data="dayReportDetailsList" >
         <el-table-column label="油品" align="center" prop="oilName" />
         <el-table-column label="油枪号" align="center" prop="oilGun" />
@@ -112,8 +113,16 @@
         <el-table-column label="积分消费" align="center" prop="" v-if="false"/>
 
       </el-table>
+      <pagination
+        v-show="total1>0"
+        :total="total1"
+        :page.sync="queryInfo.pageNum"
+        :limit.sync="queryInfo.pageSize"
+        @pagination="getLookOrder"
+      />
     </el-dialog>
-  </div>
+    </div>
+  </el-scrollbar>
 </template>
 
 <script>
@@ -138,6 +147,7 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
+      total1: 0,
       // 优惠劵管理表格数据
       couponList: [],
       dayReportDetailsList: [],
@@ -163,6 +173,13 @@ export default {
         endTime:null,
         payDate:null
       },
+      // 查询参数
+      queryInfo: {
+        pageNum: 1,
+        pageSize: 10,
+        payDate: null,
+        likePayDate: null
+      },
       //日报数据
       dayReportList: [],
       // 表单参数
@@ -480,10 +497,15 @@ export default {
     /** 修改按钮操作 */
     handleLook(row) {
       const payDate = row.payDate;
-      getDetails(payDate).then(response => {
+      this.queryInfo.likePayDate=payDate;
+      this.getLookOrder();
+    },
+    getLookOrder(){
+      getDetails(this.queryInfo).then(response => {
         this.dayReportDetailsList = response.rows;
+        this.total1 = response.total;
         this.open = true;
-        this.title = "";
+        this.title = "日报详细信息";
       });
     }
   }