zky-admin/src/views/activity/AddActivity.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-form-item label="发布单位：">
                    <el-select placeholder="请选择发布单位" v-model="form.journal_id" filterable>
                        <el-option
                            v-for="(item, index) in journalList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动名称：">
                    <el-input
                        placeholder="请输入活动名称"
                        v-model="form.name"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="主办方：">
                            <el-input
                                placeholder="请输入主办方"
                                v-model="form.the_host"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="承办方：">
                            <el-input
                                placeholder="请输入承办方"
                                v-model="form.to_undertake"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                        <el-form-item label="会议时间：">
                            <el-date-picker
                                v-model="form.time"
                                type="daterange" value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <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-row>
                <el-row>
                    
                    <el-col :span="24" >
                        <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-row>
                  
                    <el-col :span="8">
                        <el-form-item label='是否热门：'>
                            <el-switch
                                v-model="form.is_hot"
                                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-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</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-tabs>
                </el-form-item>
                <el-form-item style="position:fixed;bottom:20px;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" },
                    { name: "邮箱", id: "email" }
            ],
            form: {
                is_signup:0,
                is_popular:0,
                is_recommend:0,
                citys:[],
                signup_fields:[],
                speaker:[
                    {name:'',intruduce:''}
                ],
                img:''
            },
            optionList: [
                { name: "成都交通", id: "1" },
                { name: "成都交通", id: "1" },
            ],
            
            journalList:[],
            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]
            }
            let type = this.$route.query.type;
            form.type = type;
            // form.organizer_name=this.organizerList.filter(item=>item.id==form.organizer_id)[0].name
            console.log(form)
            if(this.id){
                this.$api.updateActivity(form).then(res=>{
                    if(res.data.code == 0){
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                        this.$router.push({path:'/learning/activity'})
                    }else{
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        })
                    }
                })
            }else{
                this.$api.addActivity(form).then(res=>{
                    if(res.data.code == 0){
                        this.$message({
                            message: '发布成功',
                            type: 'success'
                        })
                        this.$router.push({path:'/learning/activity'})
                    }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.searchJournalList().then((res) => {
                this.journalList = res.data.data;
            });
            this.$api.getCityList().then((res) => {
                this.cityList = res.data.data;
            });
        },
    },
    created() {
        this.getData()
        console.log(this.$route)
        if(this.$route.query.id){
            this.id=this.$route.query.id;
            this.$api.getActivity({id:this.id}).then(res=>{
                this.form=res.data.data
                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.form.time=[this.form.begin_time,this.form.end_time]
                if(!this.form.speaker){
                    this.form.speaker=[{}]
                }
            })
        }
    },
};
</script>