qimall/backend/modules/mall/views/goods/goods-description-template/edit.php

<?php

?>

<div id="application" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;" style="overflow-y: auto;">
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <span @click="$navigate({r: 'mall/goods/description-template'})" style="color: #000;cursor: pointer">商品说明</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>模板编辑</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="table-body">
            <el-form size="small" ref="form" label-width="120px" :model="form" :rules="rules">
                <el-form-item label="前端字段显示" prop="frontend_name">
                    <el-input style="width: 200px;" maxlength="4" show-word-limit v-model="form.frontend_name"></el-input>
                </el-form-item>
                <el-form-item label="模板名称" prop="name">
                    <el-input style="width: 200px;" maxlength="8" show-word-limit v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="字段内容展示" prop="fields">
                    <div style="display: flex;">
                        <div style="width: 200px;">
                            <div style="position: relative; margin-bottom: 10px;" v-for="(item, index) in form.fields" :key="index">
                                <el-input
                                        maxlength="6"
                                        show-word-limit
                                        v-model="form.fields[index]"
                                ></el-input>
                                <i class="el-icon-close"
                                   style="position: absolute; top: 0; right: 0; cursor: pointer; padding: 1px; z-index: 1;"
                                   @click="removeField(index)"></i>
                            </div>
                        </div>
                        <div style="margin-left: 10px;">
                            <el-button type="text" @click="form.fields.push('')">添加</el-button>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" style="padding: 9px 15px !important;" @click="submit" :loading="btnLoad">
                        保存
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>

</div>

<script>
    const application = new Vue({
        el: '#application',
        data: function () {
            const validateFields = (rule, value, callback) => {
                for (const field of value) {
                    if (field.toString().trim() === '') {
                        callback(new Error('请填写字段'))
                        return
                    }
                }

                callback()
            }

            return {
                api: 'mall/goods/edit-description-template',
                crumbs: [
                    {
                        title: '基础设置',
                    }
                ],
                btnLoad: false,
                form: {
                    id: getQuery('id'),
                    name: '',
                    frontend_name: '',
                    fields: [''],
                },
                rules: {
                    frontend_name: [
                        {required: true, message: '请填写前端字段显示', trigger: 'blur'},
                        {min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请填写模板名称', trigger: 'blur'},
                        {min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur'}
                    ],
                    fields: [
                        {required: true, message: '请填写字段', trigger: 'blur'},
                        { validator: validateFields, trigger: 'blur' }
                    ]
                }
            }
        },
        mounted() {
            if (this.form.id > 0) {
                this.detail()
            }
        },
        computed: {},
        methods: {
            submit() {
                this.$refs['form'].validate((valid) => {
                    if (!valid) {
                        return
                    }

                    this.btnLoad = true

                    request({
                        params: {
                            r: 'mall/goods/edit-description-template',
                        },
                        method: 'POST',
                        data: this.form
                    }).then(e => {
                        if (e.data.code === 0) {
                            this.$message.success('添加成功')
                            this.$navigate({r: 'mall/goods/description-template'})
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).finally(() => {
                        this.btnLoad = false
                    })
                })
            },
            detail() {
                request({
                    params: {
                        r: 'mall/goods/edit-description-template',
                        id: this.form.id,
                    },
                }).then(e => {
                    this.form = Object.assign(this.form, e.data.data)
                    this.form.name += ''
                    this.form.frontend_name += ''
                })
            },
            removeField(index) {
                if (this.form.fields.length > 1) {
                    this.form.fields.splice(index, 1);
                } else {
                    this.$message.warning('至少保留一个字段');
                }
            }
        }
    })
</script>