great_webui/src/views/order/groupBuyingMr/index.vue

<template>
  <div class="app-container app-container-scheduling" :style="{'--q-height':qHeight}">
    <div class="app-container-query" ref="queryFormBox">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        
        <el-form-item v-if="queryShow.id" label="订单号">
          <el-input
            v-model="queryParams.id"
            placeholder="请输入订单号"
            clearable
            style="width: 240px;"
            @keyup.enter.native="handleQuery"
          />
          <span @click="clearQuery('id')" class="query_clear"><i class="el-icon-circle-close"></i></span>
        </el-form-item>
        <el-form-item v-if="queryShow.teamName" label="团队名称" label-width="100px">
          <el-input
            v-model="queryParams.teamName"
            placeholder="请输入团队名称"
            clearable
            style="width: 240px;"
            @keyup.enter.native="handleQuery"
          />
          <span @click="clearQuery('teamName')" class="query_clear"><i class="el-icon-circle-close"></i></span>
        </el-form-item>
        <el-form-item v-if="queryShow.salerPerson" label="销售员" label-width="100px">
          <el-input
            v-model="queryParams.salerPerson"
            placeholder="请输入销售员"
            clearable
            style="width: 240px;"
            @keyup.enter.native="handleQuery"
          />
          <span @click="clearQuery('salerPerson')" class="query_clear"><i class="el-icon-circle-close"></i></span>
        </el-form-item>
        <el-form-item v-if="queryShow.teamTypeId" label="团队类型">
          <el-select
          v-model="queryParams.teamTypeId"
          placeholder="请选择团队类型"
          clearable
          style="width: 240px"
          >
          <el-option
            v-for="dict in dict.type.team_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
          </el-select>
          <span @click="clearQuery('teamTypeId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
        </el-form-item>
        <el-form-item v-if="queryShow.ifSuccessInvoice" label="是否成功开票" label-width="100">
          <el-select
            v-model="queryParams.ifSuccessInvoice"
            placeholder="请选择是否成功开票"
            clearable
            style="width: 100%"
          >
            <el-option label="否" value="0" />
            <el-option label="是" value="1" />
          </el-select>
          <span @click="clearQuery('ifSuccessInvoice')" class="query_clear"><i class="el-icon-circle-close"></i></span>
        </el-form-item>
        <el-form-item v-if="queryShow.status" label="订单状态">
          <el-select
            v-model="queryParams.status"
            placeholder="订单状态"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="dict in dict.type.order_status_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
          <span @click="clearQuery('status')" class="query_clear"><i class="el-icon-circle-close"></i></span>
        </el-form-item>
        <el-form-item v-if="queryShow.payWay" label="支付方式">
          <el-select
            v-model="queryParams.payWay"
            placeholder="支付方式"
            clearable
            style="width: 100%"
          >
              <el-option
                v-for="dict in dict.type.pay_way_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
          </el-select>
          <span @click="clearQuery('payWay')" class="query_clear"><i class="el-icon-circle-close"></i></span>
        </el-form-item>
        <el-form-item v-if="queryShow.time" label="支付时间">
          <el-date-picker
            v-model="queryParams.time"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <span @click="clearQuery('time')" class="query_clear"><i class="el-icon-circle-close"></i></span>
        </el-form-item>
        <el-form-item v-if="queryShow.paymentId" label="支付单号">
          <el-input
            v-model="queryParams.paymentId"
            placeholder="请输入支付单号"
            clearable
            style="width: 240px;"
            @keyup.enter.native="handleQuery"
          />
          <span @click="clearQuery('paymentId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
        </el-form-item>
        <!-- <el-form-item label="场次时间">
          <el-date-picker
            style="width: 230px;"
            v-model="queryParams.performDate"
            @change="pagePerformTimeListFun"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item v-if="queryShow.performDate" label="场次时间" label-width="70px">
          <el-date-picker
            style="width: 250px;"
            v-model="queryParams.performDate"
            @change="pagePerformTimeListFun"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
        </el-form-item>
        <el-form-item label="场次" v-if="!multiPerformDate && queryShow.performDate">
          <el-select
            v-model="queryParams.performTimeId"
            placeholder="场次"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="dict in pagePerformTimeList"
              :key="dict.id"
              :label="dict.timeSnapshot+'('+dict.performTimeStart+'-'+dict.performTimeEnd+')'"
              :value="dict.id"
            />
          </el-select>
          <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
        </el-form-item>
        <el-form-item v-if="queryShow.invoiceTime" label="开票时间">
          <el-date-picker
            style="width: 230px;"
            v-model="queryParams.invoiceTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <span @click="clearQuery('invoiceTime')" class="query_clear"><i class="el-icon-circle-close"></i></span>
        </el-form-item>
        <el-form-item v-if="queryShow.refundPaymentId" label="商户退款单号" label-width="100px">
          <el-input
            v-model="queryParams.refundPaymentId"
            placeholder="请输入商户退款单号"
            clearable
            style="width: 240px;"
            @keyup.enter.native="handleQuery"
          />
          <span @click="clearQuery('refundPaymentId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
        </el-form-item>
        <el-form-item>
          <el-dropdown @command="openQuery">
            <el-button size="mini" type="primary" icon="el-icon-plus"></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="id">订单号</el-dropdown-item>
              <el-dropdown-item command="teamName">团队名称</el-dropdown-item>
              <el-dropdown-item command="salerPerson">销售员</el-dropdown-item>
              <el-dropdown-item command="teamTypeId">团队类型</el-dropdown-item>
              <el-dropdown-item command="ifSuccessInvoice">是否成功开票</el-dropdown-item>
              <el-dropdown-item command="status">订单状态</el-dropdown-item>
              <el-dropdown-item command="payWay">支付方式</el-dropdown-item>
              <el-dropdown-item command="time">支付时间</el-dropdown-item>
              <el-dropdown-item command="paymentId">支付单号</el-dropdown-item>
              <el-dropdown-item command="performDate">场次时间/场次</el-dropdown-item>
              <el-dropdown-item command="invoiceTime">开票时间</el-dropdown-item>
              <el-dropdown-item command="refundPaymentId">商户退款单号</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button style="margin-left: 10px;" 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>
    </div>
    
    <div class="app-container-table-box">
      <el-row :gutter="10" class="mb8">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-download"
          v-hasPermi="['groupBuyingMr:groupBuyingMr:excel']"
          @click="handleExport"
          v-loading.fullscreen.lock="handleExportLoading"
          element-loading-text="正在拼命生成数据中..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)"
        >导出excel</el-button>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <div class="app-container-table-info">
        <el-table ref="tables" v-loading="loading" height="100%" :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="teamName" />
          <el-table-column label="团队类型" align="center" :fixed="fixed" prop="type">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.team_type" :value="scope.row.teamType"/>
            </template>
          </el-table-column>
          <el-table-column label="联系电话" align="center" prop="teamMobile" />
          <el-table-column label="客户负责人" align="center" prop="teamContact" />
          <el-table-column label="销售员" align="center" prop="salerPerson" />
          <el-table-column label="剧目名称" align="center" prop="performName" />
          <el-table-column label="票务名称" align="center" prop="goodsName" />
          <el-table-column label="座位类型" align="center" 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="paymentId" />
          <el-table-column label="订单状态" align="center" prop="status">
            <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="refundPaymentId" />
          <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 && scope.row.refundPriceTotal !=0 ?('-' + 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,'normal')"
                v-hasPermi="['groupBuyingMr:groupBuyingMr:details']"
              >详情</el-button>
              <span v-hasPermi="['groupBuyingMr:groupBuyingMr:details']" style="display: inline-block;">
                <el-button
                  v-if="scope.row.newOrderId"
                  size="mini"
                  type="text"
                  style="margin-left: 10px;"
                  @click="openDetails(scope.row,'new')"
                >新订单</el-button>
              </span>
              <span v-hasPermi="['groupBuyingMr:groupBuyingMr:details']" style="display: inline-block;">
                <el-button
                  v-if="scope.row.orgOrderId"
                  size="mini"
                  type="text"
                  style="margin-left: 10px;"
                  @click="openDetails(scope.row,'old')"
                >原订单</el-button>
              </span>
              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
                <el-dropdown-menu slot="dropdown">
                  <!-- (scope.row.payWay == 'corporate'||scope.row.status === 0) -->
                  <el-dropdown-item 
                  command="1" 
                  v-if="hasPermi('groupBuyingMr:groupBuyingMr:duigong') && (scope.row.status === 0)">代客下单</el-dropdown-item>
                  <el-dropdown-item 
                  command="2" 
                  v-if="hasPermi('groupBuyingMr:groupBuyingMr:cancel') && scope.row.status == 0">关闭订单</el-dropdown-item>
                  <el-dropdown-item 
                  command="3" 
                  v-if="hasPermi('groupBuyingMr:groupBuyingMr:print') && (scope.row.status == 3 || scope.row.status == 7)">打印小票</el-dropdown-item>
                  <el-dropdown-item 
                  command="4" 
                  v-if="hasPermi('groupBuyingMr:groupBuyingMr:reset') && scope.row.status == 0">修改订单</el-dropdown-item>
                  <!-- <el-dropdown-item 
                  command="5" 
                  v-if="hasPermi('groupBuyingMr:groupBuyingMr:place')"
                  >代客下单</el-dropdown-item> -->
                  <el-dropdown-item 
                  command="6" 
                  v-if="hasPermi('groupBuyingMr:groupBuyingMr:rebook') && scope.row.status == 3 && scope.row.allowReSubmit == 1"
                  >改签</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    

    <!-- 详情 -->
    <details-dia ref="detailsDia" :dict="dict" @getList="getList"></details-dia>
    <!-- 重新生成订单  -->
    <resetOrder ref="resetOrder" :dict="dict" @getList="getList" />

    <el-dialog
        title="选择小票机"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="小票机" prop="region">
            <el-select v-model="ruleForm.region" placeholder="选择小票机">
              <el-option :label="item.deviceName" :key="item.id" :value="item.id" v-for="(item) in printList"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" :loading="dialogVisibleLoading" @click="print(viewerList)">{{ dialogVisibleLoading?'打印中...':'打印' }}</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="代客下单"
        :visible.sync="showCorporatePay"
        width="50%"
        @close="handleCorporatePayClose"
        :before-close="handleCorporatePayClose">
        <el-form v-loading="corporatePayLoading" :model="form" :rules="corporatePayRules" ref="ruleForm1" label-width="120px" class="demo-ruleForm">
          <el-form-item v-if="!form.eaitType" label="支付方式" prop="payWay">
            <el-radio-group v-model="form.payWay">
              <el-radio :label="1">对公转账</el-radio>
              <el-radio :label="2">挂账</el-radio>
              <el-radio :label="3">链接支付</el-radio>
              <el-radio :label="4">授信支付</el-radio>
              <el-radio :label="5">储值余额</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.eaitType" label="支付方式" prop="payWay">
            <span>{{ getPayWayText(form.payWay) }}</span>
          </el-form-item>

          <!-- 对公转账和挂账显示原有内容 -->
          <template v-if="form.payWay === 1 || form.payWay === 2">
            <el-form-item v-if="form.payWay === 2" label="账期" prop="rePaymentTime">
              <el-date-picker
                v-model="form.rePaymentTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item :label="form.payWay === 1 ? '凭证上传' : '挂账类型凭证'" prop="photoList">
              <div style="display: flex;flex-wrap: wrap;">
                <div 
                v-for="(item,index) in form.photoList" 
                :key="index"
                style="width: 100px; height: 100px;margin-top: 5px; position: relative;border: 1px solid #999;border-radius: 5px;margin-right: 20px;">
                  <el-image 
                    style="width: 100%; height: 100%"
                    :src="item" 
                    :preview-src-list="form.photoList">
                  </el-image>
                  <span @click="handleRemove(index)" style="position: absolute;top: -15px;right: -15px;color: red;font-size: 24px;z-index: 999;cursor: pointer;">
                    <i class="el-icon-error"></i>
                  </span>
                </div>
                <div 
                style="width: 100px; height: 100px;margin-top: 5px;" 
                v-if="!form.photoList||form.photoList.length<15"
                v-loading="actionUrlLoading"
                element-loading-text="上传中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                >
                  <el-upload
                    class="avatar-uploader"
                    :action="uploadObj.url"
                    :headers="uploadObj.headers"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    :on-success="handleAvatarSuccess"
                    :on-progress="handleAvatarProgress"
                    :disabled="actionUrlLoading"
                    :on-error="handleAvatarError"
                    >
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
          </template>

          <!-- 授信支付显示额度信息 -->
          <template v-if="form.payWay === 4 && balanceInfo">
            <el-form-item label="剩余授信额度">
              <span>￥{{ balanceInfo.grantSurplus }}</span>
            </el-form-item>
            <el-form-item label="实收金额">
              <span>￥{{ currentOrder.realPrice }}</span>
            </el-form-item>
          </template>

          <!-- 储值余额支付显示余额信息 -->
          <template v-if="form.payWay === 5 && balanceInfo">
            <el-form-item label="剩余储值余额">
              <span>￥{{ balanceInfo.balance }}</span>
            </el-form-item>
            <el-form-item label="实收金额">
              <span>￥{{ currentOrder.realPrice }}</span>
            </el-form-item>
          </template>

          <!-- 只有对公转账和挂账显示备注 -->
          <el-form-item label="备注" v-if="form.payWay === 1 || form.payWay === 2">
            <el-input placeholder="请备注" type="textarea" maxlength="300" show-word-limit v-model="form.corporate.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showCorporatePay = false">取 消</el-button>
          <el-button type="primary" :loading="corporatePayLoading" @click="corporatePay">{{ dialogVisibleLoading?'操作中...':'确定' }}</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import auth from '@/plugins/auth'
import { 
  pageList,
  gotoCorporatePay, 
  downOrderListXls,
  teamPayOrderUrlApi,
  balancePay,
  creditPay
 } from '@/api/order/groupBuyingMr';
 import { getSelectById as getBalanceInfo } from '@/api/team/teamMr'
import { orderInfoCancel } from '@/api/windowTicketSales/ticketingSales';
import detailsDia from "./dialog/details.vue";
import resetOrder from "./dialog/resetOrder.vue";

import { printApi } from '@/api/order/orderMr'
import { getSelectById } from '@/api/order/groupBuyingMr'
import { pageList as getPrintListApi } from "@/api/device/pda";
import { pagePerformTimeList } from "@/api/schedulingMr/schedulingMr"
import { exportExcel } from '@/utils/exportexcel'
import moment from "moment"
const https = require('https');
const axios = require('axios');
export default {
  name: "GroupBuyingMr",
  dicts: ['agreement_type', 'team_type','order_status_type','pay_way_type'],
  components: { detailsDia, resetOrder },
  data() {
    return {
      qHeight: '0px',
      resizeObserver: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      dataList: null,
      // 弹出层标题
      title: "",

      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      visibleStatus: false,
      newObj: {},
      visibleType: '',


      viewerList: [],
        printList: [],
        dialogVisible: false,
        ruleForm: {},
        rules: {
          region: [
            { required: true, message: '请选择打印机', trigger: ['change','blur' ]}
          ],
        },
        dialogVisibleLoading: false,
        showCorporatePay:false,
        form:{
          payOrCredit: '',
          orderId:'',
          photoList:[],
          corporate:{
            voucherUrl:'',
            remark:'',
          }
        },
        corporatePayRules: {
          payWay: [{ required: true, message: "请选择支付方式", trigger: ["change","blur"] }],
          rePaymentTime: [{ required: true, message: "请选择账期", trigger: ["change","blur"] }],
          photoList: [{ required: true, message: "请上传凭证", trigger: ["change","blur"] }],
        },
        uploadObj: {
          url: process.env.VUE_APP_UPLOAD_FILE_API + "/upload/single/minio",
          Headers: { Authorization: "Bearer " + getToken() },
        },
        corporatePayLoading:false,

        handleExportLoading: false,
        pagePerformTimeList: [], // 场次列表
        multiPerformDate:false,
        fixed: 'left',
        actionUrlLoading: false,

        queryShow: {
          id: true,
          teamName: true,
          salerPerson: false,
          teamTypeId: false,
          ifSuccessInvoice: false,
          payWay: false,
          status: false,
          time: false,
          paymentId: false,
          performDate: true,
          invoiceTime: false,
          refundPaymentId: false,
        },
        balanceInfo: null, // 余额信息
        currentOrder: null, // 当前操作的订单
    };
  },
  created() {
    this.$set(this.queryParams,'performDate',[moment().format("yyyy-MM-DD"),moment().format("yyyy-MM-DD")])
    this.pagePerformTimeListFun(this.queryParams.performDate)
    this.getList();
  },
  activated(){
    this.getList();
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        const { width, height } = entry.contentRect;
        this.qHeight = height + 'px'
      }
      if(document.body.clientWidth<765) {
        this.fixed = false
      }else {
        this.fixed = 'left'
      }
    });
    this.resizeObserver.observe(this.$refs.queryFormBox);
  },
  methods: {
    moment,
    hasPermi(value){
      return auth.hasPermi(value)
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      let params = {...this.addDateRange(this.queryParams, this.dateRange)};
      if(params.id && params.id.length>19) {
        this.$message({
          type: 'error',
          message: '订单号不存在!!!'
        });
        this.loading = false
        return
      }
      if(params.performDate&&params.performDate.length==2){
        params.performDateStart = params.performDate[0];
        params.performDateEnd = params.performDate[1];
      }else {
        params.performDateStart = null
        params.performDateEnd =null
      }
      delete params.performDate;
      pageList(params)
      .then(response => {
          this.dataList = response.data.rows;
          this.total = response.data.total;
          this.loading = false;
      }).catch(()=>{
        this.dataList = [];
        this.total = 0;
        this.loading = false;
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      if(this.queryParams.time){
        this.queryParams.beginTime = this.queryParams.time[0];
        this.queryParams.endTime = this.queryParams.time[1];
      }else{
        this.queryParams.beginTime = null
        this.queryParams.endTime = null
      }
      if(this.queryParams.invoiceTime&&this.queryParams.invoiceTime.length==2){
       this.queryParams.invoiceBeginTime =this.queryParams.invoiceTime[0];
       this.queryParams.invoiceEndTime =this.queryParams.invoiceTime[1];
      }else {
       this.queryParams.invoiceBeginTime = null
       this.queryParams.invoiceEndTime = null
      }
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.$set(this.queryParams, 'paymentId', '');
      this.$set(this.queryParams, 'id', '');
      this.$set(this.queryParams, 'status', '');
      this.$set(this.queryParams, 'teamTypeId', '');
      this.$set(this.queryParams, 'teamName', '');
      this.$set(this.queryParams, 'performName', '');
      this.$set(this.queryParams, 'beginTime', '');
      this.$set(this.queryParams, 'endTime', '');
      this.$set(this.queryParams, 'time', '');
      this.$set(this.queryParams, 'performDate', '');
      this.$set(this.queryParams, 'performTimeId', '');
      this.$set(this.queryParams, 'payWay', '');
      this.$set(this.queryParams, 'invoiceTime', '');
      this.$set(this.queryParams, 'salerPerson', '');
      this.$set(this.queryParams, 'refundPaymentId', '');
      this.queryParams.pageNum = 1;
      this.handleQuery();
    },
    /** 详情按钮操作 */
    openDetails(row, type) {
      this.$refs["detailsDia"].openDialog("详情", row, type);
    },
    /** 修改订单按钮操作 */
    handleResetOpen(row, type) {
      /** 关闭订单 */
      this.$confirm("原订单以及原订单中已选择的座位将会被一并取消，确认要修改吗?", '修改订单提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        orderInfoCancel({ orderId: row.id}).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.$refs["resetOrder"].openDialog("重新生成订单", row, type);
          }else{
            this.$message({
              type: 'error',
              message: '取消失败!!!'
            });
          }
        });
      }).catch(() => {});
      //this.$refs["resetOrder"].openDialog("重新生成订单", row, type);
    },
    handleOpen(list=[]){
          if(!list||list.length==0) return
          let idList = []
          list.forEach((item,index)=>{
            idList.push(item.id)
          }) 
          this.viewerList = idList
          this.getPrintListApi()
          this.$set(this.ruleForm, 'region', '');
          this.$nextTick(()=>{
            this.$refs.ruleForm.clearValidate('region')
          })
          this.dialogVisible = true
        },
        handleClose(){
          this.dialogVisible = false
        },
        /** 查询打印机列表 */
        getPrintListApi() {
          getPrintListApi({deviceType:5,pageNum: 1,
          pageSize: 999,})
          .then(response => {
              this.printList = response.data.rows;
            }
          );
        },
        /**  选择打印机  */
        selectPrint(){

        },
        // 打印 
        async print(list = []){
          this.$refs.ruleForm.validate(async (valid) => {
            if (valid) {
              this.dialogVisibleLoading = true
              try {
                let res = await printApi({
                  //viewerList:list,
                  orderId: list[0],
                  source: 2,
                  deviceId: this.ruleForm.region
                })
                if(res.code == 200) {
                  let url = res.data.linkIp
                  let printInfo = res.data.printInfo
                  this.connectPrint(url,printInfo)
                }else {
                  throw new Error(res)
                }
              } catch (error) {
                this.dialogVisible = false
                this.dialogVisibleLoading = false
                console.error("error=====",error)
              }
            } else {
              console.log('error submit!!');
              return false;
            }
          });
          
        },
        /**  连接打印机  */
        connectPrint(url,data){
          // let xhr = new XMLHttpRequest();
          // xhr.onreadystatechange = ()=>{
          // if(xhr.readyState == 4){ // 监听请求完成
          //     if((xhr.status >=200 && xhr.status <300) || xhr.status == 304){
          //       console.log(xhr.responseText)
          //       this.dialogVisible = false
          //       this.dialogVisibleLoading = false
          //     }else{
          //       console.log('请求失败')
          //       this.dialogVisible = false
          //       this.dialogVisibleLoading = false
          //     }
          //   }
          // }
          // xhr.open("post", url, true); // 异步请求
          // xhr.send(JSON.stringify(data));

          const ignoreSSL = axios.create({
            httpsAgent: new https.Agent({  
              rejectUnauthorized: false
            }),
            withCredentials: true, // 跨域请求时发送Cookie
            timeout: 60000, // 请求超时
            headers: {
              "Content-Type": "application/json; charset=UTF-8;"
            }
          });
          ignoreSSL.post(url, 
            { ...data }
            ).then(()=>{
            this.dialogVisible = false
            this.dialogVisibleLoading = false
          }).catch(()=>{
            this.dialogVisible = false
            this.dialogVisibleLoading = false
          })
        },
        async handleCorporatePay(row) {
          this.actionUrlLoading = false
          this.showCorporatePay = true
          this.corporatePayLoading = true
          this.currentOrder = row
          
          let res = await getSelectById(row.id)
          this.form.orderId = row.id
          this.$set(this.form,'photoList',[])
          this.form.eaitType = null
          
          // 获取余额信息
          try {
            const balanceRes = await getBalanceInfo(row.memberId)
            if(balanceRes.code === 200) {
              this.balanceInfo = balanceRes.data
            }
          } catch(err) {
            console.error('获取余额信息失败', err)
          }

          if(res.data.corporate && JSON.stringify(res.data.corporate) != '{}'){
            let urlList = res.data.corporate.voucherUrl.split(',')||[]
            this.form.eaitType = 1
            this.$set(this.form,'payWay',1)
            this.$set(this.form,'rePaymentTime','')
            this.$set(this.form,'photoList',urlList)
            this.$set(this.form.corporate,'remark',res.data.corporate.remark)
          }else if(res.data.teamCredit && JSON.stringify(res.data.teamCredit) != '{}'){
            this.form.eaitType = 2
            let urlList = res.data.teamCredit.voucherUrl.split(',')||[]
            this.$set(this.form,'payWay',2)
            this.$set(this.form,'rePaymentTime',res.data.teamCredit.repaymentTime)
            this.$set(this.form,'photoList',urlList)
            this.$set(this.form.corporate,'remark',res.data.teamCredit.remark)
          }else {
            // 移除eaitType的设置,只设置默认支付方式
            this.$set(this.form,'payWay',1)
            this.$set(this.form,'rePaymentTime','')
            this.$set(this.form,'photoList',[])
            this.$set(this.form.corporate,'remark','')
          }
          this.$nextTick(()=>{
            this.$refs.ruleForm1.clearValidate()
          })
          this.corporatePayLoading = false
        },
        handleCorporatePayClose(){
          this.$set(this.form,'photoList',[])
          console.log('1111');
          this.corporatePayLoading = false;
          this.showCorporatePay = false;
        },
        async corporatePay() {
          this.$refs['ruleForm1'].validate(async (valid) => {
            if (valid) {
              if(this.form.payWay === 1 || this.form.payWay === 2) {
                if(this.form.photoList.length<1){
                  this.$message.error('请上传凭证')
                  return
                }
              }
              
              this.corporatePayLoading = true
              try {
                let res = null
                
                // 对公转账和挂账
                if(this.form.payWay === 1 || this.form.payWay === 2) {
                  const voucherUrl = this.form.photoList.map(item => item).join(",")
                  const params = {
                    orderId: this.form.orderId,
                    payWay: this.form.payWay,
                    payOrCredit: this.form.payWay,
                    corporate: {
                      voucherUrl,
                      remark: this.form.corporate.remark
                    }
                  }
                  if(this.form.payWay === 2) {
                    params.rePaymentTime = this.form.rePaymentTime
                  }
                  res = await gotoCorporatePay(params)
                }

                // 链接支付
                if(this.form.payWay === 3) {
                  this.handPlaceAnOrder(this.currentOrder)
                  this.handleCorporatePayClose()
                  return
                }
                
                // 授信支付
                if(this.form.payWay === 4) {
                  if(this.balanceInfo.grantSurplus < this.currentOrder.orderPrice) {
                    this.$message.error('授信额度不足')
                    return
                  }
                  console.log('this.form',this.form);
                  res = await creditPay({
                    orderId: this.form.orderId
                  })
                }
                
                // 储值余额支付
                if(this.form.payWay === 5) {
                  if(this.balanceInfo.balance < this.currentOrder.orderPrice) {
                    this.$message.error('储值余额不足')
                    return
                  }
                  res = await balancePay({
                    orderId: this.form.orderId
                  })
                }

                if(res) {
                  this.$message.success(res.msg)
                  this.corporatePayLoading = false
                  this.handleCorporatePayClose()
                  this.getList()
                }
              } catch(err) {
                this.corporatePayLoading = false
                this.$message.error(err.msg || '操作失败')
              }
            }
          })
        },
      /**
     * 剧目海报上传成功
     * @date 2023-11-22
     * @param {any} res
     * @returns {any}
     */
    handlePhotoListSuccess(res) {
      if (res.code === 200) {
        let photo = {
          imageUrl: res?.data?.url,
          url: res?.data?.url,
          photoType: '2'
        }
        if(!this.form.photoList){
          this.form.photoList = []
        }
        // this.form.photoList.push(photo);
        this.$set(this.form.photoList, this.form.photoList.length, photo);
      }
    },
    // handleRemove(file, fileList) {
    //   this.form.photoList.forEach((item, index) => {
    //     if(item.uid == file.uid){
    //       this.form.photoList.splice(index, 1)
    //     }
    //   })
    // },
    /**
     * 上传文件之前之前
     * @date 2023-11-22
     * @param {any} file
     * @returns {any}
     */
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg" || "image/png";
    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是jpg或png格式!");
    //   }
    //   return isJPG;
    // },
    /**
     * 导出报表
     * @date 2022-10-24
     * @returns {any}
     */
     handleExport() {
      this.$confirm('您确定要导出当前查询的数据吗？', '提示', {
        confirmButtonText: '确定 ',
        cancelButtonText: '取消 ',
        type: 'warning'
      })
        .then(() => {
          this.handleExportLoading = true;
          // const { pageNum, pageSize} = this.params;
          let postMap = {}
          if(this.queryParams.time){
            this.queryParams.beginTime = this.queryParams.time[0];
            this.queryParams.endTime = this.queryParams.time[1];
          }else{
            this.queryParams.beginTime = null
            this.queryParams.endTime = null
          }
          if(this.queryParams.performDate&&this.queryParams.performDate.length==2){
            this.queryParams.performDateStart = this.queryParams.performDate[0];
            this.queryParams.performDateEnd = this.queryParams.performDate[1];
          }else {
            this.queryParams.performDateStart = null
            this.queryParams.performDateEnd =null
          }
          if(this.queryParams.invoiceTime&&this.queryParams.invoiceTime.length==2){
            this.queryParams.invoiceBeginTime =this.queryParams.invoiceTime[0];
            this.queryParams.invoiceEndTime =this.queryParams.invoiceTime[1];
          }else {
            this.queryParams.invoiceBeginTime = null
            this.queryParams.invoiceEndTime = null
          }
          let params = JSON.parse(JSON.stringify(this.queryParams))
          for (let key in params) {
            if(key != 'pageNum' && key != 'pageSize' && key != 'time' && key != 'performDate' && key != 'invoiceTime'){
              postMap[key] = params[key]
            }
          }
          downOrderListXls(postMap)
            .then((res) => {
              exportExcel(res, '团购订单', '.xlsx');
              this.handleExportLoading = false;
            })
            .catch((error) => {
              console.log("error===",error)
              this.handleExportLoading = false;
            });
        })
        .catch(() => {
          this.$message.info('您已取消导出！');
        });
    },
    async pagePerformTimeListFun(value) {
      try {
        this.pagePerformTimeList = []
        this.$set(this.queryParams,'performTimeId',null)
        if(!value){
          return
        }
        if(value.length==2&&value[0]==value[1]){
          this.multiPerformDate = false
        }else{
          this.multiPerformDate = true
          return
        }
        let { data,code } = await pagePerformTimeList({
          performDate: value[0],
          pageNum: 1,
          pageSize: 999
        })
        this.pagePerformTimeList = [].concat(data.rows)
      } catch (error) {
        
      }
    },
    /** 关闭订单 */
    handleCancelOrder(row) {
      this.$confirm("是否关闭" + row.id + "的订单?", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        orderInfoCancel({ orderId: row.id}).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.getList();
          }
        });
      }).catch(() => {});
    },

    /**  上传图片 单张  */
  handleAvatarSuccess(response, file, fileList) {
      console.log("res, file",response, file, fileList)
      this.actionUrlLoading = false
      if(response.code == 200) {
        this.form.photoList.push(response.data.url)
      }
      this.$refs.ruleForm1.validateField('photoList')
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 <= 100;
      let testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
      let typeList = ['png','jepg','jpg','gif']
      const isJPG = typeList.includes(testmsg);
      if (!isJPG) {
        this.$message.error(`上传图片图片只能是 ${typeList} 格式!`);
      }
      if (!isLt2M) {
        this.$message.error('上传图片图片大小不能超过 100MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarProgress(){
      this.actionUrlLoading = true
    },
    handleAvatarError() {
      this.actionUrlLoading = false
    },
    handleRemove(index) {
      this.form.photoList.splice(index,1)
      this.$refs.ruleForm1.validateField('photoList')
    },
    /**  代课下单  */
    handPlaceAnOrder(row) {
      /** 关闭订单 */
      this.$confirm("确认要生成该订单的支付链接吗?温馨提示：请勿随意将链接发送给陌生人", '提示', {
        confirmButtonText: '生成并复制链接',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        teamPayOrderUrlApi({ orderId: row.id }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: res.msg
            });
            this.copyToClipboard(res.data.url)
          }
        });
      }).catch(() => { }).finally(() => {
      });
    },
    /**  复制内容  */
    copyToClipboard(text) {
      // 创建一个临时的textarea元素
      const tempInput = document.createElement('textarea');
      tempInput.value = text;
      document.body.appendChild(tempInput);
      tempInput.select();
      document.execCommand('copy');
      document.body.removeChild(tempInput);
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "1":
          this.handleCorporatePay(row);
          break;
        case "2":
          this.handleCancelOrder(row);
          break;
        case "3":
          this.handleOpen(row);
          break;
        case "4":
          this.handleResetOpen(row);
          break;
        case "5":
          this.handPlaceAnOrder(row);
          break;
        case "6":
          this.handGoRebook(row);
          break;
        default:
          break;
      }
    },
    handGoRebook(row) {
      this.$router.push({path:'/windowTicketSales/rebook',query: { id: row.id }})
    },
    clearQuery(key) {
      this.$set(this.queryShow,key,false)
      this.$set(this.queryParams,key,'')
      if(key == 'performDate') {
        this.$set(this.queryParams,'performTimeId','')
      }
    },
    openQuery(key) {
      this.$set(this.queryShow,key,true)
    },
    getPayWayText(payWay) {
      const payWayMap = {
        1: '对公转账',
        2: '挂账',
        3: '链接支付',
        4: '授信支付',
        5: '储值余额'
      }
      return payWayMap[payWay] || ''
    },
  },
  beforeDestroy() {
    this.resizeObserver.unobserve(this.$refs.queryFormBox);
    this.resizeObserver.disconnect();
  },
};
</script>
<style lang="scss" scoped>

  .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;
  }
.app-container {
  height: calc( 100vh - 110px );
  box-sizing: border-box;
}
.app-container-query {
  
}
.app-container-table-box {
  height: calc( 100% - var(--q-height) );
  .app-container-table-info {
    height: calc( 100% - 100px );
  }
}

.upload-box {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
} 

::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;
  }

  .app-container-scheduling ::v-deep .el-select__tags {
    flex-wrap: inherit !important;
    overflow-x: auto !important;
}
.app-container-scheduling ::v-deep .el-form-item__content {
  position: relative;
}
.app-container-scheduling ::v-deep .el-form-item__content .query_clear{
  position: absolute;
  top: -15px;
  right: -10px;
  display: none;
  cursor: pointer;
  z-index: 99;
}
.app-container-scheduling ::v-deep .el-form-item__content:hover .query_clear {
  display: block;
}
</style>