qimall/addons/Course/backend/views/recommend/edit.php

<style>
    .form-body {
        padding: 20px 0;
        background-color: #fff;
        margin-bottom: 20px;
        padding-right: 50%;
    }

    .form-button {
        margin: 0!important;
    }

    .form-button .el-form-item__content {
        margin-left: 0!important;
    }

    .button-item {
        padding: 9px 25px;
    }
    .text {
        cursor: pointer;
        color: #419EFB;
    }
</style>
<section id="app" v-cloak>
    <el-card class="box-card" shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header" class="clearfix">
            <div flex="cross:center box:first">
                <div><span @click="$navigate({r:'plugin/course/admin/group/index'})" class="text">分组管理</span>/分组编辑</div>
                
            </div>
        </div>
        <div class="form-body" >
            <el-form :model="ruleForm"  label-width="80px" v-loading="loading" :rules="formRules" ref="ruleForm">
                <el-form-item label="分组名称" size="small" prop="gname">
                    <el-input v-model="ruleForm.gname" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" size="small" prop="sort">
                    <el-input v-model="ruleForm.sort" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" prop="status">
                    <el-switch
                        v-model="ruleForm.status"
                        :active-value="1"
                        :inactive-value="0"
                        inactive-text="不启用"
                        active-text="启用"
                        >
                    </el-switch>
                </el-form-item>
                <el-form-item label="选择课程" prop="cid">
                    <el-select 
                    v-model="ruleForm.cid" 
                    multiple 
                    style="margin-left: 20px;width: 100%" placeholder="请选择">
                        <el-option 
                        v-for="item in course_info" 
                        :key="item.id" 
                        :label="item.name" 
                        :value="item.id"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="logo">
                    <label slot="label">
                        <span>LOGO</span>
                        <el-tooltip effect="dark" content="分组 logo 图片" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </label>
                    <com-attachment v-model="ruleForm.logo" :multiple="false" :max="1">
                        <el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" placement="top">
                            <el-button size="mini">选择图片</el-button>
                        </el-tooltip>
                    </com-attachment>
                    <div class="customize-share-title">
                        <com-image mode="aspectFill" width='80px' height='80px'
                                    :src="ruleForm.logo ? ruleForm.logo : ''"></com-image>
                        <el-button v-if="ruleForm.logo" class="del-btn" size="mini"
                                    type="danger" icon="el-icon-close" circle
                                    @click="ruleForm.logo = ''"></el-button>
                    </div>
                
                <div flex="dir:right">
                    <div>
                        <el-button class="button-item" type="primary" size="small" :loading=btnLoading @click="submit('ruleForm')">提交</el-button>
                    </div>
                </div>
            </el-form>
        </div>
        
    </el-card>
</section>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                form: {},
                loading: false,
                btnLoading: false,
                course_info: {
                    id: '',
                    name:''
                },
                ruleForm: {
                    gname:'',
                    sort:'',
                    is_navicat:'',
                    status:0,
                    logo:'',
                },
                formRules: {
                    gname: [
                        { required: true, pattern:/\S/, message: '分组名称不能为空', trigger: 'blur' },
                        { min: 2, max: 6, message: "分组名称长度在2-6个字符内" }
                    ],
                    sort: [
                        { required: true, pattern: /^[0-9]\d{0,8}$/, message: '排序必须在9位整数内' }
                    ],
                    is_use: [{ required: true, message: '请选择分组是否展示在导航', trigger: 'blur' }],
                    // logo:  [
                    //     { required: true, message: '请上传分组LOGO' }
                    // ],
                    cid: [{required: true, message: '请选择该分组下的课程', trigger: 'blur'}],
                },
            };
        },
        methods: {
            submit(formName) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        this.ruleForm.cid = this.ruleForm.cid.toString();
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'course/recommend/edit',
                            },
                            data:  this.ruleForm,
                            method: 'post'
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                const h = this.$createElement;
                                this.$message({
                                    message: e.data.msg,
                                    type: 'success'
                                });
                                setTimeout(function(){
                                    navigateTo({ r: 'course/recommend/index' });
                                },300);
                            } else {
                                this.$message({
                                    message: e.data.msg,
                                    type: 'error'
                                });
                            }
                        }).catch(e => {
                            this.btnLoading = false;
                            this.$message.error(e.data.msg);
                        });
                    }else{
                        var msg = '';
                        for (let index in obj) {
                            msg = msg + '*' + obj[index][0].message + '　';
                        }
                        this.$message({
                            message: msg,
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
            getGroupForm() {
                this.loading = true;
                let _this = this;
                request({
                    params: {
                        r: 'course/recommend/edit',
                        id: getQuery('id'),
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if(e.data.data.group_info!=''){
                            _this.ruleForm = e.data.data.group_info;
                        }
                        _this.course_info = e.data.data.course_list;
                    }
                }).catch(e => {
                    this.loading = false;
                    this.$alert(e.data.msg, '提示', {
                      confirmButtonText: '确定'
                    })
                });
            }

        },
        mounted() {
            this.getGroupForm();
        }
    })
</script>