|
<template>
<div class="setting-dealer-editor">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="经销商名称" prop="distributor_name">
<el-input placeholder="请输入经销商名称" v-model="form.distributor_name"></el-input>
</el-form-item>
<el-form-item label="经销商省份" prop="province_name">
<el-select v-model="form.province_name" placeholder="请选择经销商省份">
<el-option v-for="province in provinces" :key="province.name" :value="province.name"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
form: {
distributor_id: '',
distributor_name: '',
province_code: '',
province_name: ''
},
provinces: [],
rules: {
distributor_name: [
{ required: true, message: '请输入经销商名称', trigger: 'blur' }
],
province_name: [
{ required: true, message: '请选择经销商区域', trigger: 'change' }
]
}
}
},
created () {
if (this.$route.params.distributor_id !== undefined) {
this.form = this.$route.params
}
var self = this
axios('/web_static/provinces.json').then(
(response) => {
self.$nextTick(function () {
self.provinces = response.data
})
}
)
},
methods: {
onSubmit (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
for (var province in this.provinces) {
if (province.name === this.form.province_name) {
this.form.province_code = province.id
}
}
var self = this
if (this.form.distributor_id.length !== 0) {
this.$axios.post('distributor/update', this.form)
.then(function (response) {
if (response.data.status === 200) {
self.$message({
type: 'success',
message: '修改成功!'
})
self.$router.back()
} else {
self.$message({
type: 'failure',
message: '修改失败!'
})
}
})
} else {
this.$axios.post('distributor/add', this.form)
.then(function (response) {
if (response.data.status === 200) {
self.$message({
type: 'success',
message: '添加成功!'
})
self.$router.back()
} else {
self.$message({
type: 'failure',
message: '添加失败!'
})
}
})
}
} else {
return false
}
})
}
}
}
</script>
<style scoped lang="scss">
.setting-dealer-editor {
width: 500px;
margin: 0 auto;
}
</style>
|