great_service/src/views/team/teamMr/dialog/orderAllBox.vue

<!--
 * @Description: 新增/编辑弹框
 * @Author: Sugar.
 * @Date: 2023-11-24 13:55:00
 * @LastEditors: Sugar.
 * @LastEditTime: 22023-11-24 13:55:00
 * @FilePath: \cattle_webui\src\views\team\teamMr\AddOrEditDialog.vue
 * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
-->
<template>
    <el-dialog
      :visible.sync="open"
      width="95%"
      append-to-body
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="dialog">
        <div class="app-container-table-box">
            <div style="width: 100%;display: flex;justify-content: center;font-size: 20px;"><span>{{ teamName + '团队订单' }}</span></div>
            <div class="app-container-table-info">
                <el-table ref="tables" height="calc( 80vh - 90px )" v-loading="loading" :data="dataList" border>
                  <el-table-column label="序号" align="center" :fixed="fixed" type="index" width="60"></el-table-column>
                  <el-table-column label="订单号" align="center" :fixed="fixed" prop="id" />
                  <el-table-column label="票务名称" align="center" :fixed="fixed" prop="goodsName" />
                  <el-table-column label="座位类型" align="center" :fixed="fixed" prop="seatTypeName" />
                  <el-table-column label="场次时间" align="center" prop="performDate" />
                  <el-table-column label="场次" width="120" align="center" prop="timeSnapshot">
                    <template slot-scope="scope">
                      <span>{{ scope.row.timeSnapshot }} <br /> ({{ scope.row.performTimeStart + '-' + scope.row.performTimeEnd }})</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="团购数量" align="center" prop="quantity" />
                  <!-- <el-table-column label="支付总额" align="center" prop="orderPrice">
                    <template slot-scope="scope">
                      <span>￥{{ scope.row.orderPrice }}</span>
                    </template>
                  </el-table-column> -->
                  <el-table-column label="应收金额" align="center" prop="orderPrice">
                    <template slot-scope="scope">
                      <span>￥{{ scope.row.orderPrice }}</span>
                    </template>
                  </el-table-column>
                  <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="type">
                    <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="payTime" width="160" >
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.payTime) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="订单状态" align="center" prop="type">
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.order_status_type" :value="scope.row.status"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="已核销票数" align="center" prop="usedTotal">
                    <template slot-scope="scope">
                      <span>{{ scope.row.usedTotal }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="已核销金额" align="center" prop="usedPriceTotal">
                    <template slot-scope="scope">
                      <span>{{ scope.row.usedPriceTotal }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="退票数量" align="center" prop="refundTotal">
                    <template slot-scope="scope">
                      <span>{{ scope.row.refundTotal }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="退票金额" align="center" prop="refundPriceTotal">
                    <template slot-scope="scope">
                      <span>{{ scope.row.refundPriceTotal }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="是否成功开票" align="center">
                    <template slot-scope="scope">
                      <el-tag type="danger" v-if="scope.row.ifSuccessInvoice  == '0'">否</el-tag>
                      <el-tag type="success" v-else-if="scope.row.ifSuccessInvoice  == '1'">是</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="开票时间" align="center" prop="invoiceTime">
                    <template slot-scope="scope">
                      <span>{{ scope.row.invoiceTime }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="openDetails(scope.row)"
                      >详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </div>
            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getSelectByIdApi"
            />
        </div>
      </div>
      <!-- 详情 -->
    <details-dia ref="detailsDia"></details-dia>

    </el-dialog>
  </template>
  
  <script>
  import { pageList } from '@/api/order/groupBuyingMr';
  import detailsDia from "./details";
  export default {
    name: "addAndEdit",
    components: {
      detailsDia
    },
    dicts: ['order_form_type','order_status_type','pay_way_type'],
    data() {
      return {
        title: "编辑",
        model: "EDIT",
        activeName: '01',
        open: false,

        loading: false,
        // 用户表格数据
        dataList: [],
        total: 0,
        // 查询参数
        queryParams: {
            pageNum: 1,
            pageSize: 10,
        },
        fixed: 'left',
        teamName: null,
      };
    },
    methods: {
      /**
       * 打开弹框
       * @date 2023-11-22
       * @param {any} obj
       * @returns {any}
       */
      openDialog(title, obj) {
        this.open = true;
        this.title = title;
        this.reset();
        if (obj){
          this.queryParams = {
            pageNum: 1,
            pageSize: 10,
            teamId: obj.id,
          }
          this.teamName = obj.name
          this.getSelectByIdApi(obj);
        }else{
          this.$nextTick(() => {
            this.$refs["form"].clearValidate();
          });
        }
      },
      /** 获取详情 */
      getSelectByIdApi() {
        this.loading = true;
        let params = {...this.addDateRange(this.queryParams)};
        pageList(params)
        .then(response => {
            this.dataList = response.data.rows;
            this.total = response.data.total;
            this.loading = false;
        });
      },
      reset() {
        this.form = {}
        if(this.$refs["form"]) {
          this.$refs["form"].clearValidate();
        }
      },
      /**
       * 关闭弹框
       * @date 2023-11-22
       * @returns {any}
       */
      cancel() {
        this.reset();
        this.open = false;
      },
       /** 详情按钮操作 */
        openDetails(row, type) {
            this.$refs["detailsDia"].openDialog("详情", row, type);
        },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .dialog {
    height: 80vh;
    overflow-y: auto;
  }
  .dialog {
    padding: 0 30px;
    .upload-btn {
      width: 100px;
      height: 100px;
      background-color: #fbfdff;
      border: dashed 1px #c0ccda;
      border-radius: 5px;
      i {
        font-size: 30px;
        margin-top: 20px;
      }
      &-text {
        margin-top: -10px;
      }
    }
    .avatar {
      cursor: pointer;
    }
  }
  ::v-deep .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    ::v-deep .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    ::v-deep .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    ::v-deep .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  </style>