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

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-image');
?>
<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/category/index'})"  class="text">课程分类</span>/添加或编辑课程分类</div>
            </div>
        </div>
        <div class="form-body">
            <el-form :model="form"  label-width="80px" v-loading="loading" :rules="FormRules" ref="form">
                <el-form-item label="分类名称" size="small" prop="cname">
                    <el-input v-model="form.cname" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" size="small" prop="sort">
                    <el-input v-model="form.sort" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否导航">
                    <el-switch
                            v-model="form.is_navicat"
                            :active-value="1"
                            :inactive-value="0"
                            inactive-text="不展示"
                            active-text="展示"
                            >
                    </el-switch>
                </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="form.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="form.logo ? form.logo : ''"></com-image>
                        <el-button v-if="form.logo" class="del-btn" size="mini"
                                    type="danger" icon="el-icon-close" circle
                                    @click="form.logo = ''"></el-button>
                    </div>
                    <!-- <el-button @click="app_share.dialog = true;app_share.type = 'pic_bg'"
                                type="text">查看图例
                    </el-button>
                    <div class="customize-share-title">
                        <com-image mode="aspectFill" width='80px' height='80px' :src="formRules.logo ? formRules.logo : ''"></com-image>
                        <el-button v-if="formRules.logo" class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="formRules.logo = ''"></el-button>
                    </div>
                    <el-button @click="app_share.dialog = true;app_share.type = 'pic_bg'" type="text">查看图例 </el-button> -->
                </el-form-item>
                <div flex="dir:right">
                    <div>
                        <el-button class="button-item" type="primary" size="small" :loading=btnLoading @click="onSubmit">提交</el-button>
                    </div>
                </div>
            </el-form>
        </div>
    </el-card>
</section>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                form: {},
                loading: false,
                btnLoading: false,
                FormRules: {
                    cname: [
                        { required: true, pattern:/\S/, message: '分类名称不能为空', trigger: 'blur' },
                        { min: 2, max: 4, message: "分类名称长度在2-4个字符内" },
                    ],
                    sort: [
                        { required: false, pattern: /^[0-9]\d{0,8}$/, message: '排序必须在9位整数内' }
                    ],
                    // logo: [
                    //     {required: true, message: "logo 图片不能为空"}
                    // ]
                },
            };
        },
        methods: {
            onSubmit() {
                this.$refs.form.validate((valid, obj) => {
                    if (valid) {
                        if (!this.form.logo) {
                            this.$message.error('logo 图片不能为空');
                            return false;
                        }
                        this.btnLoading = true;
                        let para = Object.assign(this.form);
                        request({
                            params: {
                                r: 'course/category/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/default/categorys' });
                                },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;
                    }
                });
            },
            getCateInfo(cate_id) {
                this.loading = true;
                let _this = this;
                request({
                    params: {
                        r: 'course/category/edit',
                        cate_id: cate_id,
                    },
                    method: 'get'
                }).then(e => {
                    console.log(e);
                    this.loading = false;
                    if (e.data.code == 0) {
                        _this.form = e.data.data;
                    }
                }).catch(e => {
                    this.loading = false;
                    console.log(e);
                });
            },

        },
        mounted() {
            let cate_id = getQuery('id');
            if (cate_id > 0) {
                this.getCateInfo(cate_id);
            }
        }
    })
</script>