yrxzy/src/views/conference/Hotel.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;
                }
            }
        }
    }
    #map {
            overflow: hidden;
            width: 300px;
            height: 300px;
        }
</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-select v-model="form.conference_id" clearable placeholder="请选择会议">
                                <el-option
                                    v-for="(item, index) in conference_list"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item label="">
                            <el-input  clearable placeholder="请输入酒店名称" v-model="form.name">
                            </el-input>
                    </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="dialogVisible=true,dialogTitle='添加酒店',status='add'"  icon="el-icon-plud" type="primary">添加酒店</el-button>
                        <el-button plain icon="el-icon-download" type="primary">导出Excel</el-button>
                    </el-form-item>
                </el-form>
            </div>
             <el-table
                    class="table"
                    :data="list"
                    height='59vh'
                    border  v-loading="loading"
                    default-expand-all row-key="id"
                    style="width: 100%">
                    <el-table-column
                    prop="name"  
                    label="酒店名称">
                    </el-table-column>
                    <el-table-column
                    prop="username"  
                    label="入住人数">
                    </el-table-column>
                    <el-table-column
                    prop="username"  
                    label="入住率">
                    </el-table-column>
                    <el-table-column
                    prop=""  
                    label="已举办会议">
                    </el-table-column>
                    <el-table-column
                    prop=""  
                    label="创建时间">
                    </el-table-column>
                    <el-table-column  
                    prop="zip"  width="200" fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button  @click="dialogVisible=true,dialogTitle='酒店信息',status='view',cur_id=scope.row.id" class="edit"  type="text" >查看</el-button>
                        <el-button @click="dialogVisible=true,dialogTitle='编辑酒店',status='edit',cur_id=scope.row.id"  type="text">编辑</el-button>
                        <el-button @click="del(scope.row.id)"  class="del" 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 width="80%" class="hotel"
        :title="dialogTitle" :close-on-click-modal='false' 
        :visible.sync="dialogVisible">
            <Hotel @view='viewUser' :status='status' :cur_id='cur_id' @addSuccess='add'/>
        </el-dialog>
        <el-dialog width="80%" class="hotel"
        title="报名列表" :close-on-click-modal='false'
        :visible.sync="dialogVisible1">
            <el-table
                    class="table"
                    :data="user_list" height="400"
                    default-expand-all 
                    style="width: 100%;margin-top:10px;">
                    <el-table-column prop="name"  label="真实姓名">
                    </el-table-column>
                    <el-table-column prop="username"    label="昵称">
                    </el-table-column>
                    <el-table-column prop=""    label="头像">
                    </el-table-column>
                    <el-table-column prop="ctime"    label="性别">
                         <template slot-scope="scope">
                            {{scope.row.sex==0?'男':'女'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone"    label="手机号">
                    </el-table-column>
           </el-table>
        </el-dialog>
    </section>
</template>
<script>
import Page from '../../components/Page';
import Hotel from '../../components/hotel';
export default {
    components:{
        Page,Hotel
    },
    data(){
        return{
            form:{},
            order_status:'-3',
            list:[{}],
            reason:[],
            invoice:{},
            total:0,
            loading:false,
            dialogTitle:'添加酒店',
            dialogVisible:false,
            dialogVisible1:false,
            status:'add',
            cur_id:'',
            conference_list:[],
            user_list:[]
        }
    },
    methods:{
        viewUser(data){
            this.dialogVisible1=true
            this.$api.getSignupList(data).then(res=>{
                this.user_list=res.data.data.list;
            })
        },
        add(){
            this.dialogVisible=false;
            this.getData();
        },
        del(id){
            this.$confirm("确定删除吗", "提示", {
                type: "warning",
            }).then(() => {
                this.$api.delHotel({ id: id }).then((res) => {
                this.$message({
                    message: "删除成功",
                    type: "success",
                });
                this.getData();
                });
            });
        },
        gopage(size){
            if(size){
                this.form.page_size=size
            }
            this.form.page=this.$refs.pageButton.page
            this.getData()
        },
        tabClick(){

        },
        getData(){
            var parm=this.form;        
            this.loading=true
            this.$api.getHotelList(parm).then(res=>{
                this.list=res.data.data.list;
                this.total=res.data.data.total
                this.loading=false
            })
        },
    },
    created(){
        this.getData()
        this.$api.getConferenceList().then(res=>{
                this.conference_list=res.data.data.list;
        })
    }
}
</script>