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 {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.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;
}
.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-form-item label="会议名称：">
                    <el-input
                        placeholder="请输入会议名称"
                        v-model="form.name"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="10">
                        <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="12" :offset="2">
                        <el-form-item label="会议时间：">
                            <el-date-picker
                                v-model="form.time"
                                type="daterange"
                                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.city"
                                :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.introduce" :rows="3" 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">
                      <el-form-item label='报名需提交信息：'>
                        <el-checkbox-group v-model='form.signup_fields'>
                            <el-checkbox v-for='(item,index) in form.signup_fields' :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
                        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-form-item label=''>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="会议详情" name="first">
                            <fuEditor></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"
                                                action="/api/admin/uploadfile"
                                                :show-file-list="false"
                                                :on-success="handleAvatarSuccess"
                                                :before-upload="beforeAvatarUpload">
                                                <img v-if="imageUrl" :src="imageUrl" 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:20px;right:60px;">
                    <el-button type='primary'>预览</el-button>
                    <el-button type='success'>发布</el-button>
                    <el-button type='default'>保存并新增</el-button>
                    <el-button type='default'>保存</el-button>
                    <el-button type="danger" plain>删除</el-button>
                </el-form-item>
            </el-form>
        </div>
    </section>
</template>
<script>
import fuEditor from '../../components/fuEditor'
export default {
    components: {
        fuEditor,
    },
    data() {
        return {
            form: {
                is_signup:0,
                is_popular:0,
                is_recommend:0,
                city:[],
                signup_fields:[
                    { name: "姓名", id: "1" },
                    { name: "性别", id: "2" },
                    { name: "年龄", id: "3" },
                    { name: "职务", id: "4" },
                    { name: "职称", id: "5" },
                    { name: "职称", id: "5" },
                ],
                speaker:[
                    {name:'',intruduce:''}
                ],
                hotel:{
                    type:[
                        {}
                    ]
                }
            },
            optionList: [
                { name: "成都交通", id: "1" },
                { name: "成都交通", id: "1" },
            ],
            
            organizerList:[],
            cityList:[],
            activeName:'first',
            imageUrl:""
        };
    },
    methods: {
        handleAvatarSuccess(){

        },
        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() {
            var parm = this.form;
            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()
    },
};
</script>