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

<style lang="scss">
    .preview{
        .el-form-item{
            margin-bottom:15px;
        }
        label,p{
            line-height: 25px !important;
        }
    }
    .hotel{
        .el-dialog{
            margin-top: 30px !important;
        }
    }
    .desc{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        white-space: normal;
    }
</style>
<template>
    <section>
        <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>
                        <el-button @click="getData"  type="primary">搜索</el-button>
                    </el-form-item>
                    <el-form-item style="float:right" >
                        <el-button @click="addConference" type="primary">新增会议</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"   width="200"
                    label="会议名称">
                    </el-table-column>
                    <el-table-column
                    prop="username" 
                    label="会议海报">
                    <template slot-scope="scope"><img width="100" :src="scope.row.img" alt=""></template>
                    </el-table-column>
                    <el-table-column
                    prop="username"  
                    label="主办方">
                    </el-table-column>
                    <el-table-column
                    prop=""  
                    label="主讲人">
                    </el-table-column>
                    <el-table-column
                    width="350"
                    label="会议时间">
                    <template slot-scope="scope">
                        {{scope.row.begin_time}}-{{scope.row.end_time}}
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="desc"   width="300"
                    label="会议简介">
                    <template slot-scope="scope">
                        <div class="desc">{{scope.row.desc}}</div>
                    </template>
                    </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="220" fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button  @click="dialogVisible1=true,cur_id=scope.row.id,name=scope.row.name,getHotel(scope.row.id)"  type="text" >管理酒店</el-button>
                        <!-- <el-button  @click="dialogVisible=true,status='bind',cur_id=scope.row.id,name=scope.row.name"  type="text" >添加酒店</el-button> -->
                        <el-button @click="$router.push({path:'/conference/conference/add',query:{id:scope.row.id}})" class="edit" type="text">编辑会议</el-button>
                        <el-button @click="del(scope.row.id)" type="text" class="del">删除会议</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="酒店列表" :close-on-click-modal='false'
        :visible.sync="dialogVisible1">
            会议名称：{{name}}
            <el-button size="small" @click="dialogVisible=true,status='bind'" type="primary">添加酒店</el-button>
            <el-table
                    class="table"
                    :data="hotel_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="telephone"    label="电话">
                    </el-table-column>
                    <el-table-column prop="address"    label="地址">
                    </el-table-column>
                    <el-table-column prop="ctime"    label="创建时间">
                    </el-table-column>
                    <el-table-column  
                    prop="zip"  width="220" 
                    label="操作">
                    <template slot-scope="scope">
                        <el-button @click="dialogVisible=true,dialogTitle='编辑酒店',status='edit',h_id=scope.row.id" class="edit" type="text">编辑</el-button>
                        <el-button @click="delHotel(scope.row.id)" type="text" class="del">删除</el-button>
                    </template>
                    </el-table-column>
           </el-table>
        </el-dialog>
        <el-dialog width="80%" class="hotel"
        :title="dialogTitle" :close-on-click-modal='false'
        :visible.sync="dialogVisible">
            <Hotel :status='status' :huiyi_name='name' :huiyi_id='cur_id' :cur_id='h_id' @addSuccess='add'/>
        </el-dialog>
    </section>
</template>
<script>

import Page from '../../components/Page';
import Hotel from '../../components/hotel';
export default {
  components:{
        Page,Hotel
  },
  data(){
    return{
      edit:0,
      cur_id:'',
      h_id:'',
      name:'',
      status:'',
      form:{name:'',page:1,page_size:20},
      form1:{},
      total:1,
      list:[{name:'2333'}],
      loading:false,
      input:'',
      dialogVisible:false,
      dialogVisible1:false,
      dialogTitle:"添加酒店",
      defaultProps:{},
      data: [],
      hotel_list:[]
    }
  },
  methods:{
      addConference(){
          this.$router.push({path:'/conference/conference/add'})
      },
      //添加酒店
      add(){
           this.dialogVisible=false;
           this.getHotel(this.cur_id)
      },
      gopage(size){
            if(size){
                this.form.page_size=size
            }
            this.form.page=this.$refs.pageButton.page
            this.getData()
        },
        getPermissions(){
            this.$api.getUserPermissions().then(res=>{
                this.data = res.data.data
            })
        },
        getHotel(id){
            this.$api.getConferenceHotel({conference_id:id}).then(res=>{
                console.log(res.data)
                this.hotel_list=res.data.data;
            })
        },
        getData(){
            var parm=this.form;        
            this.loading=true
            this.$api.getConferenceList(parm).then(res=>{
                this.list=res.data.data.list;
                this.total=res.data.data.total
                this.loading=false
            })
        },
        del(id){
                this.$confirm('确定删除吗', '提示', {
                        type: 'warning'
                    }).then(() => {
                    this.$api.deleteConference({id:id}).then((res)=>{
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.getData()
                    })
                })
        },
        delHotel(id){
                this.$confirm('确定删除吗', '提示', {
                        type: 'warning'
                    }).then(() => {
                    this.$api.deleteConferenceHotel({hotel_id:id,conference_id:this.cur_id}).then((res)=>{
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.getHotel(this.cur_id)
                    })
                })
        },
  },
  created(){
    //   this.getPermissions()
      this.getData()
  }
}
</script>