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

<style lang="scss" scoped>
.preview {
    .el-form-item {
        margin-bottom: 15px;
    }
    label,
    p {
        line-height: 25px !important;
    }
}
.content .title {
    height: 32px;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 25px;
}
.el-form{
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    .el-select,.el-range-editor--small.el-input__inner{
        width:100%;
    }
}
/deep/.el-tabs__header{
    margin:0;
    .el-tabs__active-bar{
        height:0px;
    }
    .el-tabs__item{
        width: 160px;
        height: 40px;
        text-align: center;
        border-radius: 8px 8px 0px 0px;
        color:#333333;
        background: #ECECEC;
        margin-right:10px;
    }
    .el-tabs__item.is-active{
        background: #3895FE;
        
        color:#ffffff;
        
    }
}
.el-button{
    width:120px;
    height:36px;
}
// 上传

/deep/.avatar-uploader .el-upload {
    width: 148px;
    height: 148px;
    line-height: 148px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    .avatar{
        width: 100%;
        height: auto;
    }
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 68px;
    height: 68px;
    line-height: 68px;
    text-align: center;
}
.avatar {
    width: 68px;
    height: 68px;
    display: block;
}
/deep/.speaker_avatar .el-upload{
    width: 80px;
    height: 80px;
    line-height: 80px;
}
.hotel_imgs {
    /deep/.el-upload--picture-card{
    width:79px;
    height: 79px;
    line-height: 79px;
    }   
}

</style>
<template>
    <section>
        <p><span>会议管理></span>新增会议</p>
        <div class="content">
            <!-- <div class="title">新增会议</div> -->
            <el-form size="small" label-width="140px" class='over_y'>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="会议名称：">
                            <el-input
                                placeholder="请输入会议名称"
                                v-model="form.name"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="会议类型：">
                            <el-select v-model="form.contype" placeholder="">
                                <el-option
                                    key="offline"
                                    label="线下会议"
                                    value="offline">
                                </el-option>
                                <el-option
                                    key="online"
                                    label="线上会议"
                                    value="online">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="主办方：">
                            <el-select placeholder="请选择主办方" v-model="form.organizer_id" filterable>
                                <el-option
                                    v-for="(item, index) in organizerList"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="2">
                        <el-form-item label="会议时间：">
                            <el-date-picker
                                v-model="form.time"
                                type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="城市：">
                            <el-cascader style="width:100%;"
                                v-model="form.citys" :props='props'
                                :options="cityList"
                                @change="handleChangeCity">
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="2">
                        <el-form-item label="地址">
                            <el-input placeholder="请输入详细地址" v-model="form.address"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-form-item label='会议简介：'>
                    <el-input type='textarea' v-model="form.desc" :rows="3" placeholder="请输入会议介绍"></el-input>
                </el-form-item>
                <el-form-item label='报名须知：'>
                    <el-input type='textarea' v-model="form.sign_note" :rows="8" placeholder="请输入报名须知"></el-input>
                </el-form-item>
                <el-row>
                  <el-col :span="8">
                      <el-form-item label='是否报名：'>
                        <el-switch
                            v-model="form.is_signup"
                            active-text="可报名"
                            inactive-text="不可报名">
                        </el-switch>
                    </el-form-item>
                  </el-col>
                  
                    <el-col :span="8">
                        <el-form-item label='是否热门：'>
                            <el-switch
                                v-model="form.is_popular"
                                active-text="热门"
                                inactive-text="不热门">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label='是否推荐：'>
                            <el-switch
                                v-model="form.is_recommend"
                                active-text="推荐"
                                inactive-text="不推荐">
                            </el-switch>
                            <!-- <el-radio-group v-model='form.is_recommend'>
                                <el-radio :label='0'>不推荐</el-radio>
                                <el-radio :label='1'>推荐</el-radio>
                            </el-radio-group> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if='form.is_signup'>
                      <el-form-item label='报名需提交信息：'>
                        <el-checkbox-group v-model='form.signup_fields'>
                            <el-checkbox v-for='(item,index) in signup_fields'   :disabled='item.disabled' :key='index' :label='item.id'>{{item.name}}</el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label='封面图：'>
                    <el-upload
                        class="avatar-uploader"
                        action="/api/admin/uploadfile"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="form.img" :src="form.img" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span style='font-size:12px;color:#999999;'>建议图片尺寸比例为：210*160,单张图片小于10M,格式要求jpg,jpeg,png</span>
                </el-form-item>
                <el-form-item label=''>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="会议详情" name="first">
                            <fuEditor :value='form.content' ref="editor"></fuEditor>
                        </el-tab-pane>
                        <el-tab-pane label="主讲人" name="second">
                            <section style="height:544px;padding:10px 0px;border:1px solid #ccc;">
                                <div v-for='(item,index) in form.speaker' :key='index' class='speaker'>  
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="主讲人姓名">
                                            <el-input placeholder="请输入主讲人姓名" v-model="item.name"></el-input>
                                        </el-form-item>
                                        <el-form-item label="主讲人简介">
                                            <el-input type="textarea" placeholder="请输入主讲人简介" v-model="item.intruduce"></el-input>
                                        </el-form-item>
                                    </el-col>
                                  
                                    <el-col :span="8">
                                        <el-form-item label="主讲人头像">
                                            <el-upload
                                                class="avatar-uploader speaker_avatar"
                                                action="/api/admin/uploadfile"
                                                :show-file-list="false"
                                                :on-success="(res,file)=>{handleAvatarSuccess1(index,res,file)}">
                                                <img v-if="item.img" :src="item.img" class="avatar">
                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                            </el-upload>
                                        </el-form-item>
                                    </el-col>
                                    
                                    <el-col :span="4">
                                        <el-button v-if='index==0' size="mini" type="primary" plain @click='addSpeaker' icon="el-icon-plus">添加主讲人</el-button>
                                        <el-button v-else type="danger" size="mini" plain @click='clearSpeaker(index)'>删除</el-button>
                                    </el-col>
                                </el-row>
                                </div>
                            </section>
                        </el-tab-pane>
                        <!-- <el-tab-pane label="酒店信息" name="third">
                            <section class="hotel" style="padding:10px 0px;border:1px solid #ccc;">
                                <el-row>
                                    <el-col :span="16">
                                        <el-form-item label="选择历史酒店">
                                            <el-select placeholder="请选择酒店" v-model="form.sponsor" filterable>
                                            <el-option
                                                v-for="(item, index) in organizerList"
                                                :key="index"
                                                :label="item.name"
                                                :value="item.id"
                                            ></el-option>
                                        </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="4" :offset='1'>
                                        <el-form-item>
                                            <el-button icon="el-icon-plus">添加酒店</el-button>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-form-item label="填写酒店信息"></el-form-item>
                                    <el-col :span="8">
                                        <el-form-item label="酒店名称">
                                            <el-input placeholder="请输入主讲人姓名" v-model="form.address"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="酒店地址">
                                            <el-input placeholder="请输入主讲人姓名" v-model="form.address"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="酒店电话">
                                            <el-input placeholder="请输入主讲人姓名" v-model="form.address"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="酒店图片" class="hotel_imgs">
                                            <el-upload
                                                action="/api/admin/uploadfile"
                                                list-type="picture-card">
                                                <i class="el-icon-plus"></i>
                                            </el-upload>
                                            <span style='font-size:12px;color:#999999;'>建议图片尺寸为：210*160</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-form-item label="填写房型信息"></el-form-item>
                                </el-row>
                                <div class='hotel-type' v-for='(item,index) in form.hotel.type' :key='index'>
                                <el-row>
                                    <el-col :span="5">
                                        <el-form-item label="房型名称">
                                            <el-input placeholder="请输入房型名称" v-model="item.name"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item label="可住人数">
                                            <el-input placeholder="请输入可住人数" v-model="item.number"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item label="房型数量">
                                            <el-input placeholder="请输入房型数量" v-model="form.amount"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item label="面积">
                                            <el-input placeholder="请输入面积" v-model="item.area"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item label="楼层">
                                            <el-input placeholder="请输入楼层" v-model="item.floor"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="5">
                                        <el-form-item label="床型">
                                            <el-input placeholder="请输入床型" v-model="item.mattess"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item label="餐食">
                                            <el-input placeholder="请输入餐食" v-model="item.meal"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item label="窗户">
                                            <el-input placeholder="请输入窗户" v-model="item.window"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item label="房型">
                                            <el-input placeholder="请输入房型" v-model="item.type"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item label="房价">
                                            <el-input placeholder="请输入房价" v-model="item.price"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                </div>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="酒店图片" class="hotel_imgs">
                                            <el-upload
                                                action="/api/admin/uploadfile"
                                                list-type="picture-card" >
                                                <i class="el-icon-plus"></i>
                                            </el-upload>
                                            <span style='font-size:12px;color:#999999;'>建议图片尺寸为：210*160</span>
                                        </el-form-item>
                                    </el-col>
                                 </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label=' '>
                                            <el-button type="normal" icon="el-icon-plus" @click='addHotelType'>添加房型</el-button>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </section>
                        </el-tab-pane> -->
                    </el-tabs>
                </el-form-item>
                <el-form-item style="position:fixed;bottom:10px;right:60px;">
                    <!-- <el-button type='primary'>预览</el-button> -->
                    <el-button @click="save" type='success'>发布</el-button>
                    <!-- <el-button type='default'>保存并新增</el-button> -->
                    <!-- <el-button v-if='id' type="danger" plain>删除</el-button> -->
                     <el-button type='info' plain @click="$router.go(-1)">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </section>
</template>
<script>
import fuEditor from '../../components/fuEditor'
export default {
    components: {
        fuEditor,
    },
    data() {
        return {
            signup_fields:[
                    { name: "姓名", id: "name" },
                    { name: "性别", id: "sex" },
                    { name: "年龄", id: "age" },
                    { name: "职务", id: "job" },
                    { name: "职称", id: "title" },
                    { name: "公司", id: "company" },
                    { name: "电话", id: "phone" ,disabled:true},
                    { name: "邮箱", id: "email" }
            ],
            form: {
                is_signup:0,
                is_popular:0,
                is_recommend:0,
                citys:[],
                signup_fields:['name','sex','age','job','title','company','phone','email'],
                speaker:[
                    {name:'',intruduce:''}
                ],
                img:'',
                contype:"offline"
            },
            optionList: [
                { name: "成都交通", id: "1" },
                { name: "成都交通", id: "1" },
            ],
            
            organizerList:[],
            cityList:[],
            activeName:'first',
            imageUrl:"",
            props:{
                value:'name'
            }
        };
    },
    methods: {
        save(){
            var content=this.$refs.editor.getEditor()
            var form=this.form;
            form.content=content;
            form.city=form.citys.join(' ');
            if(form.time){
                form.begin_time=form.time[0]
                form.end_time=form.time[1]
            }
            console.log(form)
            if(!form.name){
                this.$message({
                    message: '请输入会议名称',
                    type: 'error'
                })
                return
            }
            if(!form.organizer_id){
                this.$message({
                    message: '请选择主办方',
                    type: 'error'
                })
                return
            }
            if(!form.time){
                this.$message({
                    message: '请选择会议时间',
                    type: 'error'
                })
                return
            }
            if(!form.address){
                this.$message({
                    message: '请输入会议地址',
                    type: 'error'
                })
                return
            }
            if(!form.img){
                this.$message({
                    message: '请上传封面图',
                    type: 'error'
                })
                return
            }
            if(!form.desc){
                this.$message({
                    message: '请输入会议简介',
                    type: 'error'
                })
                return
            }
            if(form.speaker.length<=0){
                this.$message({
                    message: '请添加主讲人',
                    type: 'error'
                })
                return
            }else{
                if(!form.speaker[0].name){
                    this.$message({
                        message: '请输入主讲人姓名',
                        type: 'error'
                    })
                    return
                }
                if(!form.speaker[0].img){
                    this.$message({
                        message: '请上传主讲人头像',
                        type: 'error'
                    })
                    return
                }
            }
            // form.organizer_name=this.organizerList.filter(item=>item.id==form.organizer_id)[0].name
            
            if(this.id){
                this.$api.putConference(form).then(res=>{
                    if(res.data.code == 0){
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                        this.$router.push({path:'/conference/conference'})
                    }else{
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        })
                    }
                })
            }else{
                this.$api.addConference(form).then(res=>{
                    if(res.data.code == 0){
                        this.$message({
                            message: '发布成功',
                            type: 'success'
                        })
                        this.$router.push({path:'/conference/conference'})
                    }else{
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        })
                    }
                })
            }
            
        },
        //封面
        handleAvatarSuccess(res, file) {
            this.form.img = file.response.data;
            console.log(this.form.img)
        },
        //主讲人
        handleAvatarSuccess1(index,res, file) {
            var speaker=this.form.speaker[index];
            speaker.img = file.response.data;
            this.$set(this.form.speaker,index,speaker)
            // console.log(this.form.img)
        },
        beforeAvatarUpload(){

        },
        handleClick(){

        },
        addSpeaker(){
            this.form.speaker.push({name:'',intruduce:''})
        },
        clearSpeaker(index){
            this.form.speaker.splice(index,1)
        },
        addHotelType(){
            this.form.hotel.type.push({})
        },
        handleChangeCity(value){
            console.log(value,222222222)
        },
        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;
            });
        },
        getData() {
            this.$api.getAllOrganizer().then((res) => {
                this.organizerList = res.data.data;
            });
            this.$api.getCityList().then((res) => {
                this.cityList = res.data.data;
            });
        },
        del(id) {
            this.$confirm("确定删除吗", "提示", {
                type: "warning",
            }).then(() => {
                this.$api.deleteEnterprise({ id: id }).then((res) => {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    });
                    this.getData();
                });
            });
        },
    },
    created() {
        this.getData()
        console.log(this.$route)
        if(this.$route.query.id){
            this.id=this.$route.query.id;
            this.$api.getConference({id:this.id}).then(res=>{
                this.form=res.data.data
                this.form.is_signup=Boolean(this.form.is_signup)
                this.form.is_popular=Boolean(this.form.is_popular)
                this.form.is_recommend=Boolean(this.form.is_recommend)
                this.form.citys=this.form.city.split(' ')
                this.$set(this.form,'time',[res.data.data.begin_time,res.data.data.end_time])
                // this.form.time=[res.data.data.begin_time,res.data.data.end_time]
            })
        }
    },
};
</script>