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

<?php
use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-attachment');
ComponentHelper::loadComponentView('com-image');
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="name">
                    <el-input placeholder="请输入插件名称" v-model="formData.name" type="text"></el-input>
                    <p class="tips-text">应对应插件文件夹的名称, 系统按照此标识符查找插件定义, 只能英文和下划线组成，建议大写驼峰，例如：TestAddons</p>
                </el-form-item>

                <el-form-item label="插件图标" prop="cover">
                    <com-attachment v-model="formData.cover" :multiple="false" :max="1">
                        <el-tooltip class="item" effect="dark" content="建议尺寸:50 * 50"
                                    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="formData.cover ? formData.cover : ''"></com-image>
                        <el-button v-if="formData.cover" class="del-btn" size="mini"
                                   type="danger" icon="el-icon-close" circle
                                   @click="formData.cover = ''"></el-button>
                    </div>
                </el-form-item>

                <el-form-item label="插件分组" prop="addons_group">
                    <el-select v-model="formData.group"  class="select">
                        <el-option v-for="item,key in addons_group" :key="item.name" :label="item.title" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="作者" prop="author">
                    <el-input placeholder="请输入作者名称" v-model="formData.author" type="text"></el-input>
                </el-form-item>
                <el-form-item label="版本" prop="version">
                    <el-input placeholder="请输入应用版本" v-model="formData.version" type="text"></el-input>
                    <p class="tips-text">此版本号用于插件的版本更新，如：1.2.4</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-item label="后台菜单">
                    <el-col :span="24">
                        <el-table :data="formData.addons_menu.backend" border>
                            <el-table-column label="名称" style="text-align: center;">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.title" placeholder="首页管理"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="路由">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.route" placeholder="test/index"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="图标">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.icon" placeholder="el-icon-chat-dot-round"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="参数">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.params" placeholder=""></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="100">
                                <template slot-scope="scope">
                                    <el-button type="danger" @click="deleteItem(scope.row,scope.$index)" icon="el-icon-delete" size="mini" circle></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addItem()">添加菜单</el-button>
                    </el-col>
                </el-form-item>
                <el-form-item label="安装文件" prop="install">
                    <el-input placeholder="请输入安装文件" v-model="formData.install" type="text"></el-input>
                    <p class="tips-text">当前插件全新安装时所执行的脚本, 指定为单个的php脚本文件, 如: Install.php</p>
                </el-form-item>
                <el-form-item label="卸载文件" prop="uninstall">
                    <el-input  placeholder="请输入卸载文件" v-model="formData.uninstall" type="text"></el-input>
                    <p class="tips-text">当前插件卸载时所执行的脚本, 指定为单个的php脚本文件, 如: UnInstall.php</p>
                </el-form-item>
                <el-form-item label="更新文件" prop="upgrade">
                    <el-input  placeholder="请输入更新文件" v-model="formData.upgrade" type="text"></el-input>
                    <p class="tips-text">当前插件更新时所执行的脚本, 指定为单个的php脚本文件, 如: Upgrade.php</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: '',
                    name: '',
                    cover: '',
                    group: [],
                    author: '',
                    version: '',
                    brief_introduction:'',
                    description:'',
                    addons_menu: {
                        backend: [
                            {
                                title:'',
                                route:'',
                                icon:'',
                                params:''
                            }
                        ]
                    },
                    install:'Install',
                    uninstall:'Uninstall',
                    upgrade:'Upgrade',
                },
                addons_group: {},
                loading: false,
                btnLoading: false,
                rules: {
                    title: [
                        { required: true, message: '请输入活动标题', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    name: [{ required: true, message: '请输入插件标识', trigger: 'blur' }],
                    group: [{ required: true, message: '请选择插件分组', trigger: 'blur' }],
                    author: [{ required: true, message: '请输入作者名称', trigger: 'blur' }],
                    version: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
                    install: [{ required: true, message: '请输入安装文件名称', trigger: 'blur' }],
                    uninstall: [{ required: true, message: '请输入卸载文件名称', trigger: 'blur' }],
                    upgrade: [{ required: true, message: '请输入更新文件名称', trigger: 'blur' }]
                },
                cardLoading: false
            }
        },
        watch: {


        },
        mounted: function() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'admin/addons/create',
                    },
                    method: 'get',
                    data: {}
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.addons_group = e.data.data.addons_group;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {

                });
            },
            getSpanArr(data) {
                this.spanArr = [];
                for (var i = 0; i < data.length; i++) {
                    if (i === 0) {
                        this.spanArr.push(1);
                        this.pos = 0
                    } else {
                        // 判断当前元素与上一个元素是否相同
                        if (data[i].level === data[i - 1].level) {
                            this.spanArr[this.pos] += 1;
                            this.spanArr.push(0);
                        } else {
                            this.spanArr.push(1);
                            this.pos = i;
                        }
                    }
                }
            },
            // 1.0.1 新增item
            addItem(row) {
                let leverItem = {
                    title:'',
                    route:'',
                    icon:'',
                    params:''
                }
                let addons_menu = JSON.parse(JSON.stringify(this.formData.addons_menu.backend))
                addons_menu.push(leverItem);
                this.formData.addons_menu.backend = addons_menu;
            },
            // 1.0.2 删除item
            deleteItem(row, index) {
                let addons_menu = JSON.parse(JSON.stringify(this.formData.addons_menu.backend));
                let leverCount = 0; //计一下被删除lever的同等级个数
                addons_menu.forEach((item, index) => {
                    leverCount = item.level == row.level ? leverCount + 1 : leverCount;
                })
                if (leverCount == 1) { //只出现一次就初始化
                    addons_menu[index].times = 0;
                    addons_menu[index].money = 0;
                } else { //否则删除当前item
                    addons_menu.splice(index, 1);
                }
                this.getSpanArr(addons_menu);
                this.formData.addons_menu.backend = addons_menu;
            },
            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.$request({
                    params: {
                        r: 'admin/addons/create'
                    },
                    data: this.formData,
                    method: 'post'
                }).then(res => {
                    if (res.data.code == 0) {
                        this.$message({
                            message: '保存成功!',
                            type: 'success'
                        });
                        localStorage.setItem('open_menu_2_id', localStorage.getItem('admin_addons_menu_id'));// 为了菜单准确跳回列表
                        navigateTo({r: 'admin/addons/index'});
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(err => {
                    console.log(err, 'error')
                })
            },
        },


    });
</script>