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

<?php defined('YII_ENV') or exit('Access Denied'); ?>

<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/discuss/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="选择课程" prop="cid">
                    <el-select style="width: 100%" v-model="ruleForm.cid" placeholder="请选择">
                        <el-option
                                v-for="item in course_info"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="评论内容" prop="content">
                    <el-input type="textarea" :rows="2" placeholder="请输入评论内容" v-model="ruleForm.content"> </el-input>
                </el-form-item>
                <el-form-item label="选择评分" prop="score">
                    <el-rate v-model="ruleForm.score" show-text :max = 5 :texts = score_text style="margin-top:10px;"> </el-rate>
                </el-form-item>
                <el-form-item label="是否匿名" prop="is_anonymous">
                    <el-switch v-model="ruleForm.is_anonymous" :active-value="0" :inactive-value="1" active-text="不匿名" inactive-text="匿名" >
                    </el-switch>
                </el-form-item>
                <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,
                score_text: ['一星', '两星', '三星', '四星', '五星'],
                course_info: {
                    id: '',
                    name:''
                },
                star_list:[
                    {name:'一星',value:1},
                    {name:'二星',value:2},
                    {name:'三星',value:3},
                    {name:'四星',value:4},
                    {name:'五星',value:5}
                ],
                ruleForm: {
                    id: null,
                    cid: null,      // 课程id
                    score: null,
                    content: ''
                },
                formRules: {
                    cid: [ { required: true, message: '请选择课程', trigger: 'blur' } ],
                    score: [ { required: true, message: '请选择评分值', trigger: 'blur'  } ],
                    content: [{ required: true, pattern:/\S/, message: '请填写评论内容', trigger: 'blur' }]
                },
            };
        },
        methods: {
            submit(formName) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        this.btnLoading = true;
                        let para = Object.assign(this[formName]);
                        request({
                            params: {
                                r: 'course/discuss/edit',
                            },
                            data: para,
                            method: 'post'
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message({
                                  message: e.data.msg,
                                  type: 'success'
                                });
                                setTimeout(function(){
                                    navigateTo({ r: 'course/discuss/index'});
                                },300);
                            } else {
                                this.$message({
                                  message: e.data.msg,
                                  type: 'error'
                                });
                            }
                        }).catch(e => {
                            this.btnLoading = false;
                            this.$alert(e.data.msg, '提示', {
                              confirmButtonText: '确定'
                            })
                        });
                    } else {
                        var msg = '';
                        for (let index in obj) {
                            msg = msg + '*' + obj[index][0].message + '　';
                        }
                        this.$message({
                            message: msg,
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
            getDiscussForm() {
                this.loading = true;
                let _this = this;
                request({
                    params: {
                        r: 'course/discuss/edit',
                        id: getQuery('id'),
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if(e.data.data.discuss_info!=''){
                            _this.ruleForm = e.data.data.discuss_info;
                        }
                        _this.course_info = e.data.data.course_list;
                    }
                }).catch(e => {
                    this.loading = false;
                    this.$alert(e.data.msg, '提示', {
                      confirmButtonText: '确定'
                    })
                });
            },

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