great_webui/src/views/finance/reconciliation/dialog/orderInfo.vue

<!--
 * @Description: 新增/编辑弹框
-->
<template>
  <el-dialog
    :title="subTitle"
    v-if="isShow"
    :visible.sync="isShow"
    width="90%"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="dialog">
      <!-- 表格 -->
      <el-button type="primary" style="margin-bottom: 10px;" @click="handleExport">导出</el-button>
      <div class="app-container-table-info">
        <el-table ref="tables" v-loading="isLoading" height="500px" :data="orderList" border>
          <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
          <el-table-column label="业务订单号" align="center" prop="orderId" width="170" />
          <el-table-column label="演出日期" align="center" prop="performDate" />
          <el-table-column label="演出时段" align="center" prop="performInterval" />
          <el-table-column label="实收金额" align="center" prop="realPrice">
            <template slot-scope="scope">
              <span>￥{{ scope.row.realPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="核销金额" align="center" prop="usedPrice">
            <template slot-scope="scope">
              <span>￥{{ scope.row.usedPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="退款金额" align="center" prop="refundPrice	">
            <template slot-scope="scope">
              <span>￥{{ scope.row.refundPrice	 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" align="center" prop="createTime" width="150" >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="支付时间" align="center" prop="payTime" width="150" >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.payTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="支付方式" align="center" prop="payWay">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.pay_way_type" :value="scope.row.payWay"/>
            </template>
          </el-table-column>
          <el-table-column label="是否其他团队代付" align="center" prop="ifRepay">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.ifRepay  == '0'">否</el-tag>
              <el-tag type="success" v-else-if="scope.row.ifRepay  == '1'">是</el-tag>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="是否有子订单" align="center" prop="hasChildOrder">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.hasChildOrder  == '0'">否</el-tag>
              <el-tag type="success" v-else-if="scope.row.hasChildOrder  == '1'">是</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        <div class="cal-info">
          查询结果：订单笔数<span class="text-price">{{ statInfo.orderNum }}</span>笔，
          实收金额总额：<span class="text-price">￥{{ statInfo.realTotalPrice }}</span>，
          核销金额总额：<span class="text-price">￥{{ statInfo.usedTotalPrice }}</span>，
          退款金额总额：<span class="text-price">￥{{ statInfo.refundTotalPrice }}</span>，
        </div>

      </div>
      
    </div>
  </el-dialog>
</template>

<script>
import { 
  orderInfoList, 
  downOrderListXls
} from '@/api/financeMr/reconciliation'
import { exportExcel } from '@/utils/exportexcel'

export default {
  name: "OrderInfo",
  dicts: ['order_status_type','pay_way_type'],
  data() {
    return {
      model: "ORDER",
      isShow: false,
      loading: false,
      isLoading: false,
      subTitle: "订单详情",
      orderList: [],
      handleExportLoading: false,
      statInfo: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        teamId: '',
      },
      total:0,
      
    };
  },
  methods: {
    // 打开弹框
    openDialog(title, obj, queryForm) {
      console.log(queryForm,'queryForm');
      this.isShow = true;
      this.subTitle = title;
      this.queryParams.teamId = obj.teamId;
      this.queryParams.startDate = queryForm.startDate || '';
      this.queryParams.endDate = queryForm.endDate || '';
      this.getList();
    },
    /** 获取子订单 */
    getList() {
      this.loading = true;
      orderInfoList(this.queryParams).then(res => {
        this.orderList = res.data.pageList.rows;
        this.total = res.data.pageList.total;
        this.statInfo = res.data.statInfo;
        this.isLoading = false;
      }).catch(()=>{
        this.orderList = [];
        this.statInfo = {};
        this.isLoading = false;
      })
    },
    // 导出报表
    handleExport() {
      this.$confirm('您确定要导出当前查询的数据吗？', '提示', {
        confirmButtonText: '确定 ',
        cancelButtonText: '取消 ',
        type: 'warning'
      })
        .then(() => {
          this.handleExportLoading = true;
          downOrderListXls({ 
            teamId: this.queryParams.teamId,
            startDate: this.queryParams.startDate,
            endDate: this.queryParams.endDate,
           })
            .then((res) => {
              exportExcel(res, '对公对账', '.xlsx');
              this.handleExportLoading = false;
            })
            .catch((error) => {
              // console.log("error===",error)
              this.handleExportLoading = false;
            });
        })
        .catch(() => {
          this.$message.info('您已取消导出！');
        });
    },
    
    // 关闭弹框
    cancel() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.isShow = false;
    },
    
    
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  padding: 0 10px;
  max-height: 85vh;
  overflow-y: auto;
  .cal-info {
    font-size: 16px;
    margin-top: 15px;
    .text-price {
      color: blue;
    }

  }
  
  
}

</style>