index.vue

<template>
	<div class="app-container">
		<el-tabs tab-position="left" v-model="activeName">
			<el-tab-pane label="左侧图片" name="first">
				<LeftImg :initValue="workValue['menu.left']" />
			</el-tab-pane>
			<el-tab-pane label="右侧图片" name="second">
				<Right :initValue="workValue['menu.right']" />
			</el-tab-pane>
			<el-tab-pane label="其他设置" name="third">
				<el-form ref="form" label-width="180px">
					<el-form-item label="每件商品数量">
						<el-input v-model="workValue['goods.limit'].configValue" placeholder="请输入名称" />
					</el-form-item>
					<el-form-item label="温馨提示地址">
						<el-input v-model="workValue['tips.address'].configValue" placeholder="请输入名称" />
					</el-form-item>
					<el-form-item label="">
						<el-button @click="sumit" v-hasPermi="['system:config:edit']" >提交</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import { listConfig } from '@/api/system/config';
import LeftImg from './components/leftImg.vue'
import Right from './components/right.vue'
import Other from './components/other.vue'
import { updateConfig } from '@/api/system/config';

export default {
	components: { LeftImg, Right, Other },
	data() {
		return {
			activeName: 'first',
			workValue: {
				"menu.left": {},
				"menu.right": {},
				"goods.limit": {},
				"tips.address": {},
			}
		};
	},
	mounted() {
		listConfig().then(({ rows }) => {
			rows.forEach(element => {
				this.workValue[element.configKey] = element
			});
		})
	},
	methods: {
		sumit() {
			updateConfig({ ...this.workValue['goods.limit'] }).then(res => {
				updateConfig({ ...this.workValue['tips.address'] }).then(res => {
					this.$modal.msgSuccess("修改成功");
				})
			})

		}
	}
}
</script>

<style>
</style>