点击日期出现弹层

jsowell-ui/src/views/pile/merchant/components/revenue.vue

@@ -1,18 +1,36 @@
 <template>
   <div class="app-container">
     <h2>营收总报</h2>
-     <el-card shadow="hover" style="margin-bottom:10px;padding:10px" >
+    <el-card shadow="hover" style="margin-bottom: 10px; padding: 10px">
       <el-descriptions v-if="merchantOrderReport !== null">
-    <el-descriptions-item label="用电度数">{{merchantOrderReport.useElectricity}}度</el-descriptions-item>
+        <el-descriptions-item label="用电度数"
-    <el-descriptions-item label="充电次数">{{merchantOrderReport.chargeNum}}次</el-descriptions-item>
+          >{{ merchantOrderReport.useElectricity }}度</el-descriptions-item
-    <el-descriptions-item label="充电时长">{{merchantOrderReport.chargeTime}}分钟</el-descriptions-item>
+        >
-      <el-descriptions-item label="收入金额">{{merchantOrderReport.totalAmount}}元</el-descriptions-item>
+        <el-descriptions-item label="充电次数"
-    <el-descriptions-item label="电费金额">{{merchantOrderReport.electricityAmount}}元</el-descriptions-item>
+          >{{ merchantOrderReport.chargeNum }}次</el-descriptions-item
-    <el-descriptions-item label="服务费金额">{{merchantOrderReport.serviceAmount}}元</el-descriptions-item>
+        >
-    <el-descriptions-item label="交易金额">{{merchantOrderReport.tradeAmount}}元</el-descriptions-item>
+        <el-descriptions-item label="充电时长"
-    <el-descriptions-item label="交易手续费">{{merchantOrderReport.tradeFee}}元</el-descriptions-item>
+          >{{ merchantOrderReport.chargeTime }}分钟</el-descriptions-item
-    <el-descriptions-item label="虚拟金额">{{merchantOrderReport.virtualAmount}}元</el-descriptions-item>
+        >
-</el-descriptions>
+        <el-descriptions-item label="收入金额"
+          >{{ merchantOrderReport.totalAmount }}元</el-descriptions-item
+        >
+        <el-descriptions-item label="电费金额"
+          >{{ merchantOrderReport.electricityAmount }}元</el-descriptions-item
+        >
+        <el-descriptions-item label="服务费金额"
+          >{{ merchantOrderReport.serviceAmount }}元</el-descriptions-item
+        >
+        <el-descriptions-item label="交易金额"
+          >{{ merchantOrderReport.tradeAmount }}元</el-descriptions-item
+        >
+        <el-descriptions-item label="交易手续费"
+          >{{ merchantOrderReport.tradeFee }}元</el-descriptions-item
+        >
+        <el-descriptions-item label="虚拟金额"
+          >{{ merchantOrderReport.virtualAmount }}元</el-descriptions-item
+        >
+      </el-descriptions>
       <h3 v-else>暂无数据</h3>
     </el-card>
     <h2>营收日报</h2>
@@ -44,65 +62,76 @@
           @click="handleQuery"
           >搜索</el-button
         >
-                <el-button
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-                    icon="el-icon-refresh"
-                    size="mini"
-                    @click="resetQuery"
           >重置</el-button
         >
       </el-form-item>
     </el-form>
     <el-table :data="reportList">
-            <el-table-column label="交易日期" align="center" prop="tradeDate" />
+      <el-table-column label="交易日期" align="center" prop="tradeDate">
-            <el-table-column label="站点名称" align="center" prop="stationName" >
         <template slot-scope="scope">
-                    <span class="link-type" @click="goStationOrder(scope)">{{ scope.row.stationName }}</span>
+          <span class="link-type" @click="goTradeDate(scope)">{{
+            scope.row.tradeDate
+          }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="站点名称" align="center" prop="stationName">
+        <template slot-scope="scope">
+          <span class="link-type" @click="goStationOrder(scope)">{{
+            scope.row.stationName
+          }}</span>
         </template>
       </el-table-column>
 
-            <el-table-column
+      <el-table-column label="用电度数" align="center" prop="useElectricity" />
-                label="用电度数"
-                align="center"
-                prop="useElectricity"
-            />
       <el-table-column label="充电次数" align="center" prop="chargeNum" />
-            <el-table-column
+      <el-table-column label="充电时长" align="center" prop="chargeTime" />
-                label="充电时长"
-                align="center"
-                prop="chargeTime"
-            />
       <el-table-column
         label="电费金额"
         align="center"
         prop="electricityAmount"
       />
-            <el-table-column
+      <el-table-column label="服务费金额" align="center" prop="serviceAmount" />
-                label="服务费金额"
+      <el-table-column label="收入金额" align="center" prop="totalAmount" />
-                align="center"
+      <el-table-column label="虚拟金额" align="center" prop="virtualAmount" />
-                prop="serviceAmount"
+      <el-table-column label="交易金额" align="center" prop="tradeAmount" />
-            />
+      <el-table-column label="交易手续费" align="center" prop="tradeFee" />
-            <el-table-column
-                label="收入金额"
-                align="center"
-                prop="totalAmount"
-            />
-            <el-table-column
-                label="虚拟金额"
-                align="center"
-                prop="virtualAmount"
-            />
-            <el-table-column
-                label="交易金额"
-                align="center"
-                prop="tradeAmount"
-            />
-            <el-table-column
-                label="交易手续费"
-                align="center"
-                prop="tradeFee"
-            />
     </el-table>
+    <el-dialog title="订单流水" :visible.sync="dialogTableVisible">
+      <span
+        >站点id：{{ getOrderId }} --- 交易日期：{{ getOrderTradeDate }}</span
+      >
+      <el-table :data="getOrderList">
+        <el-table-column
+          property="date"
+          label="日期"
+          width="150"
+        ></el-table-column>
+        <el-table-column
+          property="name"
+          label="姓名"
+          width="200"
+        ></el-table-column>
+        <el-table-column property="address" label="地址"></el-table-column>
+      </el-table>
+      <pagination
+        v-show="getOrderParams.orderTotal > 0"
+        :total="getOrderParams.orderTotal"
+        :page.sync="getOrderParams.currentPage"
+        :limit.sync="getOrderParams.pageSize"
+        @pagination="getOrderList"
+      />
 
+      <!-- <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="getOrderParams.currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="getOrderParams.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="getOrderList.length"
+      /> -->
+    </el-dialog>
     <pagination
       v-show="total > 0"
       :total="total"
@@ -120,59 +149,99 @@ export default {
   props: ["merchantId"],
   data() {
     return {
+      getOrderId: null,
+      getOrderTradeDate: null,
+      getOrderParams: {
+        currentPage: 1,
+        pageSize: 10,
+        orderTotal: 2,
+      },
+      getOrderList: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+      ],
+      dialogTableVisible: false,
       createTimeRange: [],
       reportList: [],
       merchantOrderReport: {},
-            total:0,
+      total: 0,
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         merchantId: this.merchantId,
-                startTime:'',
+        startTime: "",
-                endTime:''
+        endTime: "",
       },
     };
   },
   methods: {
+    handleSizeChange(val) {
+      this.getOrderParams.pageSize = val;
+    },
+    handleCurrentChange() {
+      this.getOrderParams.currentPage = 1;
+    },
+    goTradeDate(scope) {
+      this.dialogTableVisible = true;
+      //   console.log("点击日期出现弹层", scope.row.tradeDate);
+      this.getOrderId = scope.row.id;
+      this.getOrderTradeDate = scope.row.tradeDate;
+    },
     getList() {
-            console.log('queryParams',this.queryParams)
+      console.log("queryParams", this.queryParams);
-            getMerchantOrderReport(this.queryParams).then(
+      getMerchantOrderReport(this.queryParams).then((response) => {
-                (response) => {
         // console.log("查询报表", reportList, merchantOrderReport);
-                    console.log('getMerchantOrderReport',response)
+        console.log("getMerchantOrderReport", response);
-                   if(response.data){
+        if (response.data) {
           this.reportList = response.data.pageResponse.list;
           this.merchantOrderReport = response.data.merchantOrderReport;
-                    this.total = response.data.pageResponse.total
+          this.total = response.data.pageResponse.total;
-                   } else{
+        } else {
-                    this.reportList =[]
+          this.reportList = [];
-                    this.merchantOrderReport= null
+          this.merchantOrderReport = null;
-                   }
-                }
-            );
-        },
-        goStationOrder(scope) {
-            this.$router.push({
-                name: 'stationDetail',
-                params: {
-                    id: scope.row.stationId,
-                    stationName: scope.row.stationName,
         }
       });
     },
+    goStationOrder(scope) {
+      this.$router.push({
+        name: "stationDetail",
+        params: {
+          id: scope.row.stationId,
+          stationName: scope.row.stationName,
+        },
+      });
+    },
     handleQuery() {
-            let arr = this.createTimeRange[0]
+      let arr = this.createTimeRange[0];
-            let str = this.createTimeRange[1]
+      let str = this.createTimeRange[1];
-            this.queryParams.startTime = arr
+      this.queryParams.startTime = arr;
-            this.queryParams.endTime = str
+      this.queryParams.endTime = str;
       this.queryParams.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
-            this.createTimeRange = []
+      this.createTimeRange = [];
-             this.queryParams.startTime = ''
+      this.queryParams.startTime = "";
-            this.queryParams.endTime =''
+      this.queryParams.endTime = "";
       this.resetForm("queryForm");
       this.getList();
     },
@@ -182,13 +251,12 @@ export default {
       let end = getDay(0); //当天
       this.createTimeRange = [beg, end]; //将值设置给插件绑定的数据
       // return this.createTimeRange;
-            this.queryParams.startTime = beg
+      this.queryParams.startTime = beg;
-            this.queryParams.endTime = end
+      this.queryParams.endTime = end;
     },
-
   },
   async created() {
-        await this.defaultDate()
+    await this.defaultDate();
     this.getList();
   },
 };