qimall/addons/Printer/backend/views/setting/index.php

<div id="app" v-cloak>
    <el-card
        v-loading="loading"
        style="border:0; min-width: 800px;"
        shadow="never"
        body-style="background-color: #f3f3f3;padding: 10px 0 0;"
    >
        <div slot="header">
			<span>配置</span>
		</div>
        <el-form
            :model="formData"
            ref="elForm"
            label-width="200px"
            style="position: relative"
            size="small"
            :rules="rules"
        >
            <el-row>
                <el-col :span="24">
                    <div class="form-body">
                        <el-col :span="24">
                            <el-form-item label="自提码自定义名称" prop="pickup_code_name">
                                <el-input v-model="formData.pickup_code_name"></el-input>
                            </el-form-item>
                        </el-col>

                        <div></div>
                        <el-col :span="24">
                            <el-form-item size="large">
                                <el-button type="primary" size="small" @click="submitForm">提交</el-button>
                            </el-form-item>
                        </el-col>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                submitLoading: false,
                formData: {
                    pickup_code_name: '',
                },
                rules: {
                    pickup_code_name: [{
                        required: true,
                        message: '自提码自定义名称不能为空',
                    }],
                },
            }
        },
        computed: {},
        watch: {},
        created() {
            this.readConfig()
        },
        mounted() {},
        methods: {
            submitForm() {
                this.$refs['elForm'].validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        request({
                            params: {
                                r: 'printer/setting/save',
                            },
                            method: 'post',
                            data: this.formData,
                        }).then(e => {
                            this.submitLoading = false
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg)
                            } else {
                                this.$message.error(e.data.msg)
                            }
                        })
                    } else {
                        this.$message.error('部分参数验证不通过')
                    }
                })
            },
            resetForm() {
                this.$refs['elForm'].resetFields()
            },
            readConfig(){
                request({
                    params: {
                        r: 'printer/setting/index',
                    },
                    method: 'get',
                }).then(e => {
                    this.submitLoading = false
                    if (e.data.code === 0) {
                        this.formData = {...this.formData, ...e.data.data}
                    }
                })
            },
        }
    })
</script>

<style>
    .form-body {
        padding-bottom: 5px;
        display: flex;
        flex-direction: column;
    }

    .title {
        display: flex;
        align-items: center;
        padding: 18px 20px;
        border-bottom: 1px solid #F3F3F3;
        background-color: #fff;
    }

    .title-line {
        width: 4px;
        height: 20px;
        background-color: #1479F0;
        margin-right: 10px;
    }

    .padding-top {
        margin-bottom: 10px;
    }
</style>