qimall/backend/modules/admin/views/addons/edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-attachment');
ComponentHelper::loadComponentView('com-rich-text');
?>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" class="box-card" body-style="background-color: #f3f3f3;padding: 10px 0 0;" class="box-card" v-loading="cardLoading">
        <div slot="header">
            <span>应用修改</span>
        </div>
        <div class="form-body">
            <el-form :model="formData" :rules="rules" size="small" ref="ruleForm" v-loading="loading" label-width="80px">
                <el-form-item label="应用标题" prop="title">
                    <el-input placeholder="请输入应用标题" v-model="formData.title" type="text"></el-input>
                    <p class="tips-text">显示在用户的插件列表中. 长度不要超过20个字符</p>
                </el-form-item>
                <el-form-item label="插件分组" prop="group">
                    <el-select v-model="formData.group" class="select">
                        <el-option v-for="item in formData.addons_group" :key="item.name" :label="item.title" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="应用封面" prop="cover">
                    <com-attachment v-if="!formData.cover" :multiple="false" :max="1" type="images" @selected="coverPic">
                        <div class="card-upload">
                            <i class="el-icon-plus"></i>
                        </div>
                    </com-attachment>
                    <div class="card-coverimg" v-else>
                        <el-image style="width: 80px; height: 80px" :src="formData.cover"></el-image>
                        <el-button @click="delPic()" class="icon-close" type="danger" size="mini" icon="el-icon-close" circle></el-button>
                    </div>
                    <p class="tips-text">作用于商城列表、分享头图；建议尺寸：750*750像素。</p>
                </el-form-item>
                <el-form-item label="教程链接" prop="course_url">
                    <el-input placeholder="请输入教程链接" v-model="formData.course_url" type="text"></el-input>
                    <p class="tips-text">显示在用户的插件列表中. 长度不要超过500个字符</p>
                </el-form-item>
                <el-form-item label="插件简介" prop="brief_introduction">
                    <el-input type="textarea" :rows="5" placeholder="请输入插件简介，最多140个字符" v-model="formData.brief_introduction" type="text"></el-input>
                </el-form-item>
                <el-form-item label="插件描述" prop="description">
                    <com-rich-text v-model="formData.description" ></com-rich-text>
                    <p class="tips-text">详细介绍插件的功能和使用方法</p>
                </el-form-item>
            </el-form>

            <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;" @click="save('ruleForm')" size="small">保存
            </el-button>
        </div>
    </el-card>


</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                formData: {
                    title: '',
                    group: '',
                    brief_introduction: '',
                    cover: '',
                    addons_group: {}
                },
                loading: false,
                btnLoading: false,
                rules: {
                    title: [{
                            required: true,
                            message: '请输入应用标题',
                            trigger: 'blur'
                        },
                        {
                            min: 2,
                            max: 20,
                            message: '长度在 2 到 20 个字符',
                            trigger: 'blur'
                        }
                    ],
                    group: [{
                        required: true,
                        message: '请选择应用分组',
                        trigger: 'blur'
                    }],
                    // cover: [{
                    //     required: true,
                    //     message: '请选择应用封面图片',
                    //     trigger: 'blur'
                    // }]
                },
                cardLoading: false
            }
        },
        watch: {


        },
        mounted: function() {
            let name = getQuery('name');
            this.loadData(name);
        },
        methods: {
            save(formName) {
                //保存
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.submitConfirm()
                    } else {
                        this.$message({
                            showClose: true,
                            message: '必填信息不能为空',
                            type: 'error'
                        });
                    }
                });
            },
            submitConfirm() {
                // console.log(this.formData)
                this.btnLoading = true;
                this.$request({
                    params: {
                        r: 'admin/addons/edit'
                    },
                    data: this.formData,
                    method: 'post'
                }).then(res => {
                    this.btnLoading = false;
                    if (res.data.code == 0) {
                        this.$message.success(res.data.msg);
                        this.$navigate({
                            r: 'admin/addons/index'
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(err => {
                    this.btnLoading = false;
                    this.$message.error('网络错误');
                })
            },
            loadData(name) {
                // 反显数据
                let self = this
                if (!name) {
                    self.$message.error('参数错误');
                }
                request({
                    params: {
                        r: 'admin/addons/edit',
                        name: name
                    },
                    method: 'get',
                }).then(e => {
                    console.log(e);
                    if (e.data.code == 0) {
                        self.formData = e.data.data;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    // console.log(e);
                    self.$message.error('网络错误');
                });;
            },

            coverPic(e) {
                // console.log(e);
                this.formData.cover = e[0].url
            },
            delPic(e) {
                this.formData.cover = ''
            }
        },


    });
</script>