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

<div id="app" v-cloak>
    <el-card class="box-card" v-loading="loading" shadow="never" style="border:0;min-width: 1500px;"
             body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>基础设置</span>
            </div>
        </div>
        <div class="form_box">
            <el-form :model="settingForm"   size="small" ref="settingForm" label-width="150px">
                <el-card shadow="never">
                    <el-form-item label="应用是否开启" style="margin-bottom: 10px">
                        <el-radio-group v-model="settingForm.is_enable">
                            <el-radio :label="0">关闭
                            </el-radio>
                            <el-radio :label="1">开启
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <block v-if="settingForm.is_enable == 1">
                        <el-form-item label="Host：" style="margin-bottom: 10px;width:1000px;">
                            <el-input  v-model="settingForm.suona_host" >
                            </el-input>
                        </el-form-item>
                        <el-form-item label="appId：" style="margin-bottom: 10px;width:1000px;">
                            <el-input  v-model="settingForm.suona_appId" >
                            </el-input>
                        </el-form-item>
                        <el-form-item label="appSecret：" style="margin-bottom: 10px;width:1000px;">
                            <el-input  v-model="settingForm.suona_appSecret" >
                            </el-input>
                        </el-form-item>
                        <el-form-item label="设备ID(IMEI码)" style="margin-bottom: 10px;width:1000px;">
                            <el-form-item v-for="(item,index) in settingForm.device_id_arr" :key='index'  style="display: flex;align-items: center;">
                               <div class="flex">
								   <el-input  v-model="item.device_id" placeholder="">
								   </el-input>
								   <div class="minibtn flexcenter">
										<el-button v-if="settingForm.device_id_arr.length>1" size="mini" type="danger"
								   											  icon="el-icon-close" circle
								   											  @click="delItem(index)"></el-button>
								   </div>
								   
							   </div>
								
                            </el-form-item>
                            <el-form-item>
                                <el-button v-if="settingForm.device_id_arr && settingForm.device_id_arr.length<10" style="margin-bottom: 10px;" type="primary" size="small" @click="addCouponItem">添加IM
                                </el-button>
                            </el-form-item>
                        </el-form-item>
                    </block>

                </el-card>
            </el-form>
        </div>
        <div class="form_box">
        </div>
        <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;"
                       @click="store('settingForm')" size="small">保存
            </el-button>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading: false,
                settingForm: {
                    is_enable: 0,
                    suona_host:'',
                    suona_appId:'',
                    suona_appSecret:'',
                    device_id:'',
                    device_id_arr : [
                        {
                            device_id : '',
                        },
                    ],

                },
            }
        },
        mounted: function () {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'suona/setting/index',
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0 && !isEmpty(e.data.data)) {
                        this.settingForm = e.data.data.basic;
                    }
                }).catch(e => {
                    this.loading = false;
                })
            },
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'suona/setting/index',
                            },
                            method: 'post',
                            data: this.settingForm
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.$message.error(e);
                            this.btnLoading = false;
                        })
                    } else {
                        this.btnLoading = false;
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 点击删除某一item
            delItem(index){
                let temp = JSON.parse(JSON.stringify(this.settingForm.device_id_arr));
                temp.splice(index, 1);
                this.settingForm.device_id_arr = temp;
            },
            addCouponItem(){

                let deviceIdArr = JSON.parse(JSON.stringify(this.settingForm.device_id_arr));
                let item = {device_id : ''};
                deviceIdArr.push(item);
                this.settingForm.device_id_arr = deviceIdArr;
            },
        }
    });
</script>
<style >
    .flex{
		display:flex;
	}
	.minibtn{
		width:28px;
		height:28px;
		margin-left:10px;
	}
	.flexcenter{
		display:flex;
		justify-content: center;
		align-items: center;
	}
    .form_box {
        background-color: #f3f3f3;
        padding: 0 0 20px;
    }

    .button-item {
        margin-top: 12px;
        padding: 9px 25px;
    }

    .el-input-group__append {
        background-color: #fff;
        color: #353535;
    }
    .flex{
        display:flex;
    }
    >>> .el-input{
        width:30%;
    }
</style>