great_webui/src/views/windowTicketSales/ticketingCollection.vue

<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
        <el-form-item label="取票码" label-width="100px">
          <el-input
            v-model="queryParams.qrcodeNo"
            placeholder="请输入取票码"
            clearable
            style="width: 240px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="手机号:" prop="mobile">
          <el-input
            v-model="queryParams.mobile"
            placeholder="请输入手机号"
            clearable
            style="width: 240px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="身份证号:" label-width="120px" prop="idcard">
          <el-input
            v-model="queryParams.idcard"
            placeholder="请输入身份证号"
            clearable
            style="width: 240px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select
            v-model="queryParams.orderStatus"
            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>
        </el-form-item>
        <el-form-item>
          <el-button 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>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
                :disabled="multipleSelection.length == 0"
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="print(multipleSelection)"
                v-hasPermi="['windowTicketSales:ticketingCollection:print']"
              >批量打印名票</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table 
      ref="tables" 
      v-loading="loading" 
      :data="dataList" 
      
      @selection-change="handleSelectionChange"
      border>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
        <el-table-column label="姓名" align="center" prop="name" />
        <el-table-column label="身份证号" align="center" prop="qrcodeNo" />
        <el-table-column label="取票码" align="center" prop="qrcodeNo" />
        <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="seatName" />
        <el-table-column label="座位类型" align="center" prop="seatTypeName" />
        <el-table-column label="节目播出日期" align="center" prop="performDate" />
        <el-table-column label="下单时间" align="center" prop="createTime" />
        <el-table-column label="购票渠道" align="center" prop="source">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.order_form_type" :value="scope.row.source"/>
          </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" fixed="right" width="80" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="print([scope.row])"
              v-hasPermi="['windowTicketSales:ticketingCollection:print']"
            >打印门票</el-button>
          </template>
        </el-table-column>
        <template slot="empty">
            <div>
                <span>未查询到相关订单，请重新输入！</span>
            </div>
        </template>
      </el-table>
    </div>
  </template>
  
  <script>
  
  import { pageList,printApi } from '@/api/windowTicketSales/ticketingCollection'
  export default {
    name: "distributionapplication",
    dicts: ['order_form_type','order_status_type'],
    data() {
      return {
        // 遮罩层
        loading: false,
        // 选中数组
        multipleSelection: [],
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 用户表格数据
        dataList: null,
        // 查询参数
        queryParams: {
          // pageNum: 1,
          // pageSize: 10,
          // type: undefined
          orderStatus: 3
        },
        visibleStatus: false,
        visibleStatusLoading: false,
        ruleForm: {},
        rules: {
          remark: [
            { required: true, message: '请输入备注', trigger: ['blur','change'] },
            { min: 0, max: 50, message: '长度在 0 到 50 个字符', trigger: ['blur','change'] }
          ]
        }
      };
    },
    created() {
      //this.getList();
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true;
        pageList(this.queryParams,)
        .then(response => {
            this.dataList = response.data.list;
            //this.total = response.data.total;
            this.loading = false;
          }
        );
      },
      
      // 取消按钮
      cancel() {
        this.open = false;
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.$set(this.queryParams, 'qrcodeNo', '');
        this.$set(this.queryParams, 'idcard', '');
        this.$set(this.queryParams, 'mobile', '');
        this.$set(this.queryParams, 'orderStatus', '');
        this.handleQuery();
      },
      setRemark(data) {
        this.visibleStatus = true
        this.resetForm.id = data.id
      },
      submitForm(formName) {
          this.$refs[formName].validate(async (valid) => {
            if (valid) {
              try { 
                this.visibleStatusLoading = true
                let res = await setRemark({
                  id: this.resetForm.id,
                  "remark": this.ruleForm.remark
                })
                this.visibleStatus = false
                this.visibleStatusLoading = false
                this.resetForm('ruleForm')
                this.queryParams.pageNum = 1;
                this.getList()
              } catch (error) {
                this.visibleStatusLoading = false
              }
              
            } else {
              this.visibleStatusLoading = false
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        handleSelectionChange(val) {
          console.log("val====",val)
          this.multipleSelection = val;
        },
        // 打印 
        async print(list = []){
          if(!list||list.length==0) return
          let idList = []
          list.forEach((item,index)=>{
            idList.push(item.id)
          }) 
          console.log("isList===",idList)
          return
          try {
            let res = await printApi({viewerList:idList})
            if(res.code == 200) {

            }else {
              throw new Error(res)
            }
          } catch (error) {
            console.error("error=====",error)
          }
        },
    }
  };
  </script>