点击日期出现弹层

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

@@ -1,196 +1,264 @@
 <template>
-    <div class="app-container">
-         <h2>营收总报</h2>
-     <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="充电次数">{{merchantOrderReport.chargeNum}}次</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="电费金额">{{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>
-        <el-form
-            :model="queryParams"
-            ref="queryForm"
-            size="small"
-            inline
-            label-width="68px"
+  <div class="app-container">
+    <h2>营收总报</h2>
+    <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-form-item label="日期" prop="tradeDate">
-                <el-date-picker
-                    v-model="createTimeRange"
-                    style="width: 240px"
-                    value-format="yyyy-MM-dd"
-                    :default-time="['00:00:00', '23:59:59']"
-                    type="daterange"
-                    range-separator="至"
-                    start-placeholder="开始日期"
-                    end-placeholder="结束日期"
-                    :clearable="false"
-                ></el-date-picker>
-            </el-form-item>
-            <el-form-item>
-                <el-button
-                    type="primary"
-                    icon="el-icon-search"
-                    size="mini"
-                    @click="handleQuery"
-                    >搜索</el-button
-                >
-                <el-button
-                    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="stationName" >
-                <template slot-scope="scope">
-                    <span class="link-type" @click="goStationOrder(scope)">{{ scope.row.stationName }}</span>
-                </template>
-            </el-table-column>
+        <el-descriptions-item label="充电次数"
+          >{{ merchantOrderReport.chargeNum }}次</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="电费金额"
+          >{{ 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>
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      inline
+      label-width="68px"
+    >
+      <el-form-item label="日期" prop="tradeDate">
+        <el-date-picker
+          v-model="createTimeRange"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          :default-time="['00:00:00', '23:59:59']"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :clearable="false"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button 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">
+        <template slot-scope="scope">
+          <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
-                label="用电度数"
-                align="center"
-                prop="useElectricity"
-            />
-            <el-table-column label="充电次数" align="center" prop="chargeNum" />
-            <el-table-column
-                label="充电时长"
-                align="center"
-                prop="chargeTime"
-            />
-            <el-table-column
-                label="电费金额"
-                align="center"
-                prop="electricityAmount"
-            />
-            <el-table-column
-                label="服务费金额"
-                align="center"
-                prop="serviceAmount"
-            />
-            <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-table-column label="用电度数" align="center" prop="useElectricity" />
+      <el-table-column label="充电次数" align="center" prop="chargeNum" />
+      <el-table-column label="充电时长" align="center" prop="chargeTime" />
+      <el-table-column
+        label="电费金额"
+        align="center"
+        prop="electricityAmount"
+      />
+      <el-table-column label="服务费金额" align="center" prop="serviceAmount" />
+      <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"
+      />
 
-        <pagination
-            v-show="total > 0"
-            :total="total"
-            :page.sync="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize"
-            @pagination="getList"
-        />
-    </div>
+      <!-- <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"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
 </template>
 
 <script>
 import { getMerchantOrderReport } from "@/api/adapayMember/adapayMember";
 import { getDay } from "@/utils/common";
 export default {
-    props: ["merchantId"],
-    data() {
-        return {
-            createTimeRange: [],
-            reportList: [],
-            merchantOrderReport: {},
-            total:0,
-            queryParams: {
-                pageNum: 1,
-                pageSize: 10,
-                merchantId: this.merchantId,
-                startTime:'',
-                endTime:''
-            },
-        };
+  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,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        merchantId: this.merchantId,
+        startTime: "",
+        endTime: "",
+      },
+    };
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.getOrderParams.pageSize = val;
     },
-    methods: {
-        getList() {
-            console.log('queryParams',this.queryParams)
-            getMerchantOrderReport(this.queryParams).then(
-                (response) => {
-                    // console.log("查询报表", reportList, merchantOrderReport);
-                    console.log('getMerchantOrderReport',response)
-                   if(response.data){
-                     this.reportList = response.data.pageResponse.list;
-                    this.merchantOrderReport = response.data.merchantOrderReport;
-                    this.total = response.data.pageResponse.total
-                   } else{
-                    this.reportList =[]
-                    this.merchantOrderReport= null
-                   }
-                }
-            );
-        },
-        goStationOrder(scope) {
-            this.$router.push({
-                name: 'stationDetail',
-                params: {
-                    id: scope.row.stationId,
-                    stationName: scope.row.stationName,
-                }
-            });
-        },
-        handleQuery() {
-            let arr = this.createTimeRange[0]
-            let str = this.createTimeRange[1]
-            this.queryParams.startTime = arr
-            this.queryParams.endTime = str
-            this.queryParams.pageNum = 1;
-            this.getList();
-        },
-        /** 重置按钮操作 */
-        resetQuery() {
-            this.createTimeRange = []
-             this.queryParams.startTime = ''
-            this.queryParams.endTime =''
-            this.resetForm("queryForm");
-             this.getList();
-        },
-          defaultDate() {
-            //字符串拼接，开始时间，结束时间
-            let beg = getDay(-7); //当月第一天
-            let end = getDay(0); //当天
-            this.createTimeRange = [beg, end]; //将值设置给插件绑定的数据
-            // return this.createTimeRange;
-            this.queryParams.startTime = beg
-            this.queryParams.endTime = end
-        },
-
+    handleCurrentChange() {
+      this.getOrderParams.currentPage = 1;
     },
-    async created() {
-        await this.defaultDate()
-        this.getList();
+    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);
+      getMerchantOrderReport(this.queryParams).then((response) => {
+        // console.log("查询报表", reportList, merchantOrderReport);
+        console.log("getMerchantOrderReport", response);
+        if (response.data) {
+          this.reportList = response.data.pageResponse.list;
+          this.merchantOrderReport = response.data.merchantOrderReport;
+          this.total = response.data.pageResponse.total;
+        } else {
+          this.reportList = [];
+          this.merchantOrderReport = null;
+        }
+      });
+    },
+    goStationOrder(scope) {
+      this.$router.push({
+        name: "stationDetail",
+        params: {
+          id: scope.row.stationId,
+          stationName: scope.row.stationName,
+        },
+      });
+    },
+    handleQuery() {
+      let arr = this.createTimeRange[0];
+      let str = this.createTimeRange[1];
+      this.queryParams.startTime = arr;
+      this.queryParams.endTime = str;
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.createTimeRange = [];
+      this.queryParams.startTime = "";
+      this.queryParams.endTime = "";
+      this.resetForm("queryForm");
+      this.getList();
+    },
+    defaultDate() {
+      //字符串拼接，开始时间，结束时间
+      let beg = getDay(-7); //当月第一天
+      let end = getDay(0); //当天
+      this.createTimeRange = [beg, end]; //将值设置给插件绑定的数据
+      // return this.createTimeRange;
+      this.queryParams.startTime = beg;
+      this.queryParams.endTime = end;
+    },
+  },
+  async created() {
+    await this.defaultDate();
+    this.getList();
+  },
 };
 </script>