great_service/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.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="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)"
                v-hasPermi="['groupBuyingMr:groupBuyingMr:details']"
              >详情</el-button>
              <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">
                  <el-dropdown-item 
                  command="1" 
                  
                  v-if="hasPermi('groupBuyingMr:groupBuyingMr:details') && (scope.row.payWay == 'corporate'||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-menu>
              </el-dropdown>
              <!-- <span v-hasPermi="['groupBuyingMr:groupBuyingMr:details']" style="display: inline-block;">
                <el-button
                v-if="scope.row.payWay == 'corporate'||scope.row.status === 0"
                  size="mini"
                  type="text"
                  style="margin-left: 10px;"
                  @click="handleCorporatePay(scope.row)"
                
                >对公转账</el-button>
              </span>
              <span v-hasPermi="['groupBuyingMr:groupBuyingMr:cancel']" style="display: inline-block;">
                <el-button
                  v-if="scope.row.status == 0"
                  size="mini"
                  type="text"
                  style="margin-left: 10px;"
                  @click="handleCancelOrder(scope.row)"
                >关闭订单</el-button>
              </span>
              <span v-hasPermi="['groupBuyingMr:groupBuyingMr:print']" style="display: inline-block;">
                <el-button
                  v-if="scope.row.status == 3 || scope.row.status == 7"
                  size="mini"
                  type="text"
                  style="margin-left: 10px;"
                  @click="handleOpen([scope.row])"
                >打印小票</el-button>
              </span>
              <span v-hasPermi="['groupBuyingMr:groupBuyingMr:reset']" style="display: inline-block;">
                <el-button
                  v-if="scope.row.status == 0"
                  size="mini"
                  type="text"
                  style="margin-left: 10px;"
                  @click="handleResetOpen(scope.row)"
                >修改订单</el-button>
              </span> -->
            </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,index) 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="ruleForm" :rules="corporatePayRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <!-- <el-form-item label="凭证上传" prop="photoList" required>
            <el-upload
                ref="upload"
                :class="form.photoList && form.photoList.length>=15 ? 'upload-box':''"
                :action="uploadObj.url"
                :headers="uploadObj.headers"
                accept=".jpg,.png"
                :on-success="handlePhotoListSuccess"
                :before-upload="beforeAvatarUpload"
                list-type="picture-card"
                :file-list="form.photoList"
                :on-remove="handleRemove"
                :limit="15"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
          </el-form-item> -->
          <el-form-item label="凭证上传" 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>
          <el-form-item label="备注">
            <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 } from '@/api/order/groupBuyingMr';
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,
      },
      statusList: {
        0: '待支付',
        2: '超时取消',
        3: '待使用',
        4: '退款中',
        5: '己退款',
        6: '退款失败',
        7: '己使用',
        8: '己超期',
        9: '关闭',
      },
      statusMapList: [
        {id: 1, name: '待支付', value: 0},
        {id: 2, name: '超时取消', value: 2},
        {id: 3, name: '待使用', value: 3},
        {id: 4, name: '退款中', value: 4},
        {id: 5, name: '己退款', value: 5},
        {id: 6, name: '退款失败', value: 6},
        {id: 7, name: '己使用', value: 7},
        {id: 8, name: '己超期', value: 8},
        {id: 9, name: '关闭', value: 9},
      ],
      payList: {
        0: '未支付',
        1: '已支付',
        2: '支付中',
        3: '支付失败',
        4: '支付退款',
      },
      payWayList: {
        'cahsh': '现金',
        'wecaht.applet': '微信小程序支付',
        'alipay': '支付宝OTA',
        'wecaht.h5': '微信公众号支付',
        'meituan': '美团支付',
        'corporate': '对公支付',
      },
      sourceList: {
        1: '小程序',
        2: '公众号',
        3: '美团',
        4: '携程',
        5: '团购',
      },
      sourceMapList: [
        {id: 1, name: '小程序', value: 1},
        {id: 2, name: '公众号', value: 2},
        {id: 3, name: '美团', value: 3},
        {id: 4, name: '携程', value: 4},
        {id: 5, name: '团购', value: 5},
      ],
      visibleStatus: false,
      newObj: {},
      visibleType: '',


      viewerList: [],
        printList: [],
        dialogVisible: false,
        ruleForm: {},
        rules: {
          region: [
            { required: true, message: '请选择打印机', trigger: ['change','blur' ]}
          ],
        },
        dialogVisibleLoading: false,
        showCorporatePay:false,
        form:{
          orderId:'',
          photoList:[],
          corporate:{
            voucherUrl:'',
            remark:'',
          }
        },
        corporatePayRules: {
          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,
        status: false,
        time: false,
        paymentId: false,
        performDate: true,
        invoiceTime: false,
        refundPaymentId: false,
      },
    };
  },
  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: {
    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, '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
          console.log('corporatePay',row);
          this.showCorporatePay = true;
          this.corporatePayLoading = true;
          let res = await getSelectById(row.id)
          this.form.orderId = row.id;
          this.$set(this.form,'photoList',[])
          if(res.data.corporate){
            let urlList = res.data.corporate.voucherUrl.split(',')||[]
            // let urlListObj = []
            // urlList.forEach((item,index)=>{
            //   urlListObj.push({
            //     name: 'url_'+index,
            //     url: item
            //   })
            // })
            this.$set(this.form,'photoList',urlList)
            this.$set(this.form.corporate,'remark',res.data.corporate.remark)
          }else {
            this.$set(this.form,'photoList',[])
            this.$set(this.form.corporate,'remark','')
          }
          this.corporatePayLoading = false;

        },
        handleCorporatePayClose(){
          this.$set(this.form,'photoList',[])
          console.log('1111');
          this.corporatePayLoading = false;
          this.showCorporatePay = false;
        },
        corporatePay(){
          console.log('form',this.form);
          if(this.form.photoList.length<1){
            this.$message.error('请上传凭证');
            return
          }
          this.corporatePayLoading = true;
          const voucherUrl = this.form.photoList.map(item => item).join(",");
          this.form.corporate.voucherUrl = voucherUrl;
          gotoCorporatePay(this.form).then((res)=>{
            this.$message.success(res.msg);
            this.corporatePayLoading = false;
            this.handleCorporatePayClose();
          }).catch((err)=>{
            this.corporatePayLoading = false;
            this.$message.error(err.msg);
            console.log('corporatePay err',err);
          })
        },
      /**
     * 剧目海报上传成功
     * @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)
      }
    },
    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)
    },
    // 更多操作触发
    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;
        default:
          break;
      }
    },
    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)
    }
  },
  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>