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%;
    }
}
.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;
}
</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">
                                <el-option
                                    v-for="(item, index) in optionList"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="4">
                        <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-select placeholder="请选择城市" v-model="form.city">
                                <el-option
                                    v-for="(item, index) in optionList"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="4">
                        <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="12">
                      <el-form-item label='是否报名：'>
                        <el-radio-group v-model='form.isEnable'>
                            <el-radio :label='1'>可报名</el-radio>
                            <el-radio :label='0'>不可报名</el-radio>
                        </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label='报名需提交信息：'>
                        <el-checkbox-group v-model='form.info'>
                            <el-checkbox v-for='(item,index) in InfoList' :key='index' :label='item.id'>{{item.name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label='是否热门：'>
                            <el-radio-group v-model='form.isEnable'>
                                <el-radio :label='1'>热门</el-radio>
                                <el-radio :label='0'>不热门</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label='是否推荐：'>
                            <el-radio-group v-model='form.isEnable'>
                                <el-radio :label='1'>推荐</el-radio>
                                <el-radio :label='0'>不推荐</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                
                
                <el-form-item label='封面图：'>
                    <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                        <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">
                            <fuEditor></fuEditor>
                        </el-tab-pane>
                        <el-tab-pane label="酒店信息" name="third">
                            <fuEditor></fuEditor>
                        </el-tab-pane>
                    </el-tabs>
                </el-form-item>
                <el-form-item>
                    <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: {info:[]},
            optionList: [
                { name: "成都交通", id: "1" },
                { name: "成都交通", id: "1" },
            ],
            InfoList:[
                { name: "姓名", id: "1" },
                { name: "性别", id: "2" },
                { name: "年龄", id: "3" },
                { name: "职务", id: "4" },
                { name: "职称", id: "5" },
                { name: "职称", id: "5" },
            ],
            activeName:'first',
        };
    },
    methods: {
        handleClick(){

        },
        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.loading = true;
            this.$api.getEnterpriseList(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.deleteEnterprise({ id: id }).then((res) => {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    });
                    this.getData();
                });
            });
        },
    },
    created() {
        //   this.getPermissions()
        //   this.getData()
    },
};
</script>