great_service/src/views/windowTicketSales/rebook.vue

<!--
 * @Description: 
 * @Author: gcz
 * @Date: 2025-02-21 14:56:50
 * @LastEditors: gcz
 * @LastEditTime: 2025-02-21 17:37:41
 * @FilePath: \great_webui\src\views\windowTicketSales\rebook.vue
 * @Copyright: Copyright (c) 2016~2025 by gcz, All Rights Reserved. 
-->

<template>
  <div class="app-container app-container-scheduling">
    <div class="app-container_flex_auto">
      <!-- 搜索区域 -->
      <div class="app-container_form">
        <el-form :model="queryParams" size="small" ref="queryForm" :inline="true">
          <el-form-item label="订单号" prop="orderId">
            <el-input v-model="queryParams.orderId" placeholder="请输入订单号" clearable />
          </el-form-item>
          <el-form-item label="购票人手机号" prop="memberMobile">
            <el-input v-model="queryParams.memberMobile" placeholder="请输入手机号" clearable />
          </el-form-item>
          <el-form-item label="身份证号码" prop="idcard">
            <el-input v-model="queryParams.idcard" placeholder="请输入身份证号码" clearable />
          </el-form-item>
          <el-form-item label="票务名称" prop="goodsName">
            <el-input v-model="queryParams.goodsName" placeholder="请输入票务名称" clearable />
          </el-form-item>
          <el-form-item label="订单状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择订单状态" clearable>
              <el-option
                v-for="dict in dict.type.order_status_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <div class="app-container_table" :class="showSearch ? 'mt15' : ''">
        <el-row :gutter="10" class="mb8" style="margin-left: 0;">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <div class="app-container_table_main">
          <!-- 数据列表 -->
          <el-table v-loading="loading" :data="rebookList" height="100%">
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="姓名" align="center" prop="memberName" />
            <el-table-column label="身份证号码" align="center" prop="idcard" />
            <el-table-column label="购票人手机号" align="center" prop="mobile" />
            <el-table-column label="订单号" align="center" prop="orderId" />
            <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="seatTypeName1" /> -->
            <el-table-column label="日期" align="center" prop="performDate" />
            <el-table-column label="场次" align="center" prop="performInterval" />
            <el-table-column label="下单时间" align="center" prop="createTime" />
            <el-table-column label="支付金额" align="center" prop="realPrice" />
            <el-table-column label="购票渠道" align="center" prop="channelType">
              <template slot-scope="scope">
                  <dict-tag :options="dict.type.channel_type" :value="scope.row.channelType" />
              </template>
            </el-table-column>
            <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" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button 
                type="primary" 
                @click="handleRebook(scope.row)"
                v-if="scope.row.allowReSubmit == 1"
                >改签</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
      </div>
      <div class="app-container_table_page">
        <!-- 分页组件 -->
        <pagination
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <!-- 改签 -->
     <rebookBox ref="rebookBox" @getList="getList" />
  </div>
</template>

<script>
import { reSubmitPageList } from '@/api/windowTicketSales/rebook'
import rebookBox from './model/rebookBox.vue';
export default {
  name: 'Rebook',
  dicts: ['order_status_type', 'channel_type'],
  components: { rebookBox },
  data() {
    return {
      loading: false,
      showSearch: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 改签列表数据
      rebookList: [],
      // 总条数
      total: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      reSubmitPageList(this.queryParams).then(response => {
        this.rebookList = response.data.rows
        this.total = response.data.total
        this.loading = false
      })
    },
    handleQuery() {
      this.getList()
    },
    resetQuery() {
      this.$refs.queryForm.resetFields()
      this.queryParams = {
        pageNum: 1,
        pageSize: this.queryParams.pageSize
      }  // 重置时将页码重置为1
      this.handleQuery()
    },
    handleRebook(row){
      if (row.status !== 3) {  // 检查订单状态是否为3
        this.$modal.msgError('该票禁止改签请知悉')
        return
      }
      this.$refs.rebookBox.initData(row)
    }
  }
}
</script>

<style scoped>
.tip-box {
  padding: 10px;
  background-color: #f8f8f8;
  margin-bottom: 20px;
}
.tip-box p {
  color: #E6A23C;
  margin: 0;
}
.pay-status {
  text-align: center;
  font-size: 16px;
}
.success-info {
  text-align: center;
  font-size: 16px;
}
.interval-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.interval-list .el-button {
  margin: 0;
}
</style>