zky-admin/src/views/conference/Apply.vue

<style lang='scss'>
    .signup_mannage{
        .bh{
            font-size: 14px;
            color: #666;
            line-height: 27px;
            margin-bottom: 10px;
            label{
                color:#333;
                font-size: 16px;
                display: inline-block;
                padding-right: 10px;
            }
        }
        .hotel{
            .el-dialog{
                margin-top: 30px !important;
                .el-form-item{
                    margin-bottom: 10px;
                }
            }
        }
    }
</style>
<template>
    <section class="signup_mannage">
        <p><span>会议管理></span>报名管理</p>
        <div class="content">
            <div class="filter">
                <el-form size="small" label-width="70px" :inline="true"  label-position="left">
                    <el-form-item label="">
                            <el-input clearable placeholder="请输入姓名" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                            <el-select v-model="form.conference_id" clearable placeholder="请选择会议">
                                <el-option
                                    v-for="(item, index) in conferenceList"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item label="">
                            <el-select v-model="form.hotel_id" clearable placeholder="请选择酒店">
                                <el-option
                                    v-for="(item, index) in hotelList"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="getData" type="primary">搜索</el-button>
                    </el-form-item>
                    <el-form-item style="float:right" >
                        <el-button @click="download" plain icon="el-icon-download" type="primary">导出Excel</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-tabs v-model="form.order_status" @tab-click="tabClick">
                <el-tab-pane name="-2" label="全部"></el-tab-pane>
                <el-tab-pane name="0" label="待上传凭证"></el-tab-pane>
                <el-tab-pane name="1" label="待审核"></el-tab-pane>
                <el-tab-pane name="2" label="待选酒店"></el-tab-pane>
                <el-tab-pane name="3" label="待核销"></el-tab-pane>
                <el-tab-pane name="4" label="已核销"></el-tab-pane>
                <el-tab-pane name="-1" label="已驳回"></el-tab-pane>
            </el-tabs>
             <el-table
                    class="table"
                    :data="list"
                    height='52vh'
                    border  v-loading="loading"
                    default-expand-all row-key="id"
                    style="width: 100%">
                    <el-table-column width="200"
                    prop="conference_name"  
                    label="会议名称">
                    </el-table-column>
                    <el-table-column
                    prop="name"  
                    label="真实姓名">
                    </el-table-column>
                    <el-table-column
                    prop=""  width="130"
                    label="状态">
                    <template slot-scope="scope">
                        <span v-if='scope.row.signup_status==0'><el-tag type="danger">待上传凭证</el-tag></span>
                        <span v-if='scope.row.signup_status==1'><el-tag type="warning">待审核</el-tag></span>
                        <span v-if='scope.row.signup_status==2'><el-tag >待选酒店</el-tag></span>
                        <span v-if='scope.row.signup_status==3'><el-tag >待核销</el-tag></span>
                        <span v-if='scope.row.signup_status==4'><el-tag type="success">已核销</el-tag></span>
                        <span v-if='scope.row.signup_status==-1'><el-tag type="info">已驳回</el-tag></span>
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="user_nickname"  
                    label="昵称">
                    </el-table-column>
                    <el-table-column
                    prop="user_avatar"  
                    label="头像">
                        <template slot-scope="scope">
                            <img :src="scope.row.user_avatar" alt="" width="80">
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop=""  
                    label="性别">
                    <template slot-scope="scope">
                        {{scope.row.sex==0?'男':'女'}}
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="phone"  width="120"
                    label="手机号">
                    </el-table-column>
                    <el-table-column
                    prop="email"  width="120"
                    label="邮箱">
                    </el-table-column>
                    <el-table-column width="250"
                    prop="organizer_unit"  
                    label="单位">
                    </el-table-column>
                    <el-table-column
                    prop="hotel_name"  
                    label="已选酒店">
                    </el-table-column>
                    <el-table-column
                    prop="room_name"  
                    label="已选房型">
                    </el-table-column>
                    <el-table-column
                    prop="live_days"  
                    label="入住天数">
                    </el-table-column>
                    <el-table-column
                    prop="room_stime"  width="120"
                    label="入住时间">
                    </el-table-column>
                    <el-table-column
                    prop="room_etime"   width="120"
                    label="离开时间">
                    </el-table-column>
                    <el-table-column  
                    prop="zip"  width="260" fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button  @click="invoice=scope.row,dialogVisible2=true,invoice.reject_reason=''" class="edit"  type="text" 
                            :disabled="form.order_status==2||form.order_status==3||form.order_status==4">审核</el-button>
                        <el-button @click="invoice=scope.row,dialogVisible=true"  type="text">发票详情</el-button>
                        <el-button @click="proof_img=scope.row.proof_img,dialogVisible3=true"    type="text" >入住凭证</el-button>
                        <el-button @click="dialogVisible1=true,getReason(scope.row)"   type="text" >驳回原因</el-button>
                    </template>
                    </el-table-column>
            </el-table>
            <Page  ref="pageButton" :current='form.page' :page_size='form.page_size' :total='total' @pageChange='gopage'/>
        </div>
        <el-dialog class="hotel"
        title="发票详情" :close-on-click-modal='false'
        :visible.sync="dialogVisible">
           <el-form>
                    <el-form-item label="用户姓名：">
                        {{invoice.name}}
                    </el-form-item>
                    <el-form-item label="手机号：">
                        {{invoice.billphone}}
                    </el-form-item>
                    <el-form-item label="支付方式：">
                        {{invoice.paytype==1?'汇款':'支票'}}
                    </el-form-item>
                    <el-form-item label="发票种类：">
                        {{invoice.billtype==1?'增值税普通发票':'增值税专用发票'}}
                    </el-form-item>
                    <el-form-item label="纳税人识别号：">
                        {{invoice.billno}}
                    </el-form-item>
                    <el-form-item label="注册地址">
                        {{invoice.billaddress}}
                    </el-form-item>
                    <el-form-item label="注册电话：">
                        {{invoice.billphone}}
                    </el-form-item>
                    <el-form-item label="开户行：">
                        {{invoice.billbank}}
                    </el-form-item>
                    <el-form-item label="银行帐号：">
                        {{invoice.billbankno}}
                    </el-form-item>
           </el-form>
        </el-dialog>
        <el-dialog width="70%"
        title="驳回原因" :close-on-click-modal='false'
        :visible.sync="dialogVisible1">
           <div class="bh">
               <label>会议名称</label>
                {{reason.conference_name}}
                <br>
                <label>用户姓名</label>{{reason.name}}
           </div>
           <el-table
                    class="table"
                    :data="reason.reject_reason"
                    default-expand-all height="300"
                    style="width: 100%">
                    <el-table-column
                    prop="ctime"  
                    label="驳回时间">
                    </el-table-column>
                    <el-table-column
                    prop="cname"  
                    label="驳回人">
                    </el-table-column>
                    <el-table-column
                    prop="reason"  
                    label="驳回原因">
                    </el-table-column>
           </el-table>
        </el-dialog>
        <el-dialog class="hotel"
        title="审核" :close-on-click-modal='false'
        :visible.sync="dialogVisible2">
           <el-form label-width="80px" size='small'>
                    <el-form-item label="会议名称">
                        {{invoice.conference_name}}
                    </el-form-item>
                    <el-form-item label="用户姓名">
                        {{invoice.name}}
                    </el-form-item>
                    <el-form-item label="手机号">
                        {{invoice.phone}}
                    </el-form-item>
                    <el-form-item label="所在城市">
                        <!-- {{invoice.name}} -->
                    </el-form-item>
                    <el-form-item label="所属单位">
                        {{invoice.organizer_unit}}
                    </el-form-item>
                    <el-form-item label="入住天数">
                        <!-- {{invoice.room_stime}} -->
                    </el-form-item>
                    <el-form-item label="入住时间">
                        {{invoice.room_stime}}
                    </el-form-item>
                    <el-form-item label="离开时间">
                        {{invoice.room_etime}}
                    </el-form-item>
                    <el-form-item label="报名时间">
                        {{invoice.ctime}}
                    </el-form-item>
                    <el-form-item label="入住凭证">
                        <!-- {{invoice.name}} -->
                    </el-form-item>
                    <el-form-item label="驳回原因">
                        <el-input  type="textarea" v-model="invoice.reject_reason"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button @click="check(2)" type="primary">通过</el-button>
                        <el-button @click="check(-1)"  type="danger">驳回</el-button>
                    </el-form-item>
           </el-form>
        </el-dialog>
        <el-dialog class="hotel"
        title="入住凭证" :close-on-click-modal='false'
        :visible.sync="dialogVisible3">
           <img width="100%" :src="proof_img" alt="">
        </el-dialog>
    </section>
</template>
<script>
import Page from '../../components/Page';
export default {
    components:{
        Page
    },
    data(){
        return{
            form:{order_status:'-2',type:'conference'},
            conferenceList:[],
            hotelList:[],
            list:[{}],
            reason:{},
            invoice:{},
            total:0,
            loading:false,
            dialogVisible:false,
            dialogVisible1:false,
            dialogVisible2:false,
            dialogVisible3:false,
            proof_img:''
        }
    },
    methods:{
        download(){
            this.$api.getSignupData().then(res=>{
                var elink = document.createElement("a");
                let blob = new Blob([res.data], {
                    type: "application/vnd.ms-excel,charset=UTF-8",
                });
                let objUrl = URL.createObjectURL(blob);
                let file_name = decodeURIComponent(
                    res.headers["content-disposition"].split("=")[1]
                );
                console.log(file_name);
                elink.download = file_name;
                elink.style.display = "none";
                elink.href = objUrl;
                document.body.appendChild(elink);
                elink.click();
                document.body.removeChild(elink);
            })
        },
        gopage(size){
            if(size){
                this.form.page_size=size
            }
            this.form.page=this.$refs.pageButton.page
            this.getData()
        },
        tabClick(){
            this.getData()
        },
        getReason(data){
            if(data.reject_reason){
                data.reject_reason=JSON.parse(data.reject_reason);
            }else{
               data.reject_reason=[] 
            }
            this.reason=data
        },
        getData(){
            var parm={...this.form};        
            if(parm.order_status==-2){parm.order_status=''}
            this.loading=true
            this.$api.getSignupList(parm).then(res=>{
                this.list=res.data.data.list;
                this.total=res.data.data.total
                this.loading=false;
            })

            this.$api.getConferenceList().then(res=>{
                this.conferenceList=res.data.data.list;
            })
             this.$api.getHotelList().then(res=>{
                this.hotelList=res.data.data.list;
            })
        },
        check(status){
            this.$api.putSignup({signup_status:status,reject_reason:this.invoice.reject_reason,id:this.invoice.id}).then(res=>{
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            })
                            this.dialogVisible2=false
                            this.getData()
            })
        }
    },
    created(){
        this.getData();
    }
}



</script>