<template>
|
<!--
|
作者：luoyiming
|
时间：2020-06-01
|
描述：插件中心-区域代理-添加区域代理
|
-->
|
<el-dialog title="添加区域代理" :visible.sync="dialogVisible" @close="cancelFunc" :close-on-click-modal="false" :close-on-press-escape="false" width="500px">
|
<el-form :model="formData" :rules="rules" ref="formData" label-width="100px">
|
<el-form-item label="绑定用户" prop="user_id" :rules="[{required: true,message: '请选择用户'}]">
|
<el-row>
|
<el-button icon="el-icon-picture-outline" @click="userClick()">选择用户</el-button>
|
<div v-if="formData.user_id!=0" class="img">
|
<img :src="user_info.avatarUrl" width="100" height="100" />
|
<div style="margin-top: 5px;">{{ user_info.nickName }}</div>
|
</div>
|
</el-row>
|
</el-form-item>
|
<el-form-item label="姓名" prop="real_name">
|
<el-input type="text" v-model="formData.real_name" autocomplete="off" placeholder="请输入真实姓名"></el-input>
|
</el-form-item>
|
<el-form-item label="手机号" prop="mobile">
|
<el-input type="text" v-model="formData.mobile" autocomplete="off" placeholder="请输入手机号"></el-input>
|
</el-form-item>
|
<el-form-item label="代理级别" prop="region_level">
|
<el-select v-model="formData.region_level" placeholder="请选择代理级别" @change="handleLevelChange">
|
<el-option label="省级代理" :value="1"></el-option>
|
<el-option label="市级代理" :value="2"></el-option>
|
<el-option label="区/县级代理" :value="3"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="省份" prop="province_id">
|
<el-select v-model="formData.province_id" placeholder="请选择省份" @change="handleProvinceChange">
|
<el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="城市" prop="city_id" v-if="formData.region_level >= 2">
|
<el-select v-model="formData.city_id" placeholder="请选择城市" @change="handleCityChange" :disabled="!formData.province_id">
|
<el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="区/县" prop="area_id" v-if="formData.region_level == 3">
|
<el-select v-model="formData.area_id" placeholder="请选择区/县" :disabled="!formData.city_id">
|
<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="代理等级" prop="grade_id">
|
<el-select v-model="formData.grade_id" placeholder="请选择代理等级">
|
<el-option label="默认等级" :value="0"></el-option>
|
<el-option v-for="(item,index) in gradeList" :key="index" :label="item.name" :value="item.grade_id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="登录账号" prop="user_name">
|
<el-input type="text" v-model="formData.user_name" autocomplete="off" placeholder="请输入登录账号"></el-input>
|
</el-form-item>
|
<el-form-item label="登录密码" prop="password">
|
<el-input type="password" v-model="formData.password" autocomplete="off" placeholder="请输入登录密码"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="cancelFunc">取 消</el-button>
|
<el-button type="primary" @click="confirmFunc" :loading="loading">确 定</el-button>
|
</div>
|
<!--选择用户组件-->
|
<GetUser :is_open="open_user" :is_radio="true" @close="closeDialogFunc"></GetUser>
|
</el-dialog>
|
</template>
|
|
<script>
|
import PlusApi from '@/api/plus/region.js';
|
import DataApi from '@/api/data.js';
|
import GetUser from '@/components/user/GetUser.vue';
|
export default {
|
components: {
|
GetUser
|
},
|
data() {
|
return {
|
/*是否显示*/
|
dialogVisible: false,
|
/*表单数据模型*/
|
formData: {
|
user_id: 0,
|
real_name: '',
|
mobile: '',
|
region_level: 1,
|
province_id: '',
|
city_id: '',
|
area_id: '',
|
grade_id: 0,
|
user_name: '',
|
password: ''
|
},
|
/*表单验证规则*/
|
rules: {
|
user_id: [
|
{ required: true, message: '请选择用户', trigger: 'change' }
|
],
|
real_name: [
|
{ required: true, message: '请输入真实姓名', trigger: 'blur' }
|
],
|
mobile: [
|
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
|
],
|
region_level: [
|
{ required: true, message: '请选择代理级别', trigger: 'change' }
|
],
|
province_id: [
|
{ required: true, message: '请选择省份', trigger: 'change' }
|
],
|
city_id: [
|
{ required: true, message: '请选择城市', trigger: 'change' }
|
],
|
area_id: [
|
{ required: true, message: '请选择区/县', trigger: 'change' }
|
],
|
user_name: [
|
{ required: true, message: '请输入登录账号', trigger: 'blur' }
|
],
|
password: [
|
{ required: true, message: '请输入登录密码', trigger: 'blur' },
|
{ min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
|
]
|
},
|
/*地区数据*/
|
regionData: [],
|
/*等级列表*/
|
gradeList: [],
|
/*加载状态*/
|
loading: false,
|
/*是否打开选择用户弹窗*/
|
open_user: false,
|
/*选中的用户信息*/
|
user_info: {}
|
};
|
},
|
props: {
|
open_add: Boolean
|
},
|
watch: {
|
open_add: function(n, o) {
|
if (n != o) {
|
this.dialogVisible = this.open_add;
|
if (n) {
|
this.resetForm();
|
this.getGradeList();
|
this.getRegionData();
|
}
|
}
|
}
|
},
|
created() {
|
},
|
computed: {
|
/*获取省份列表*/
|
provinceList() {
|
return Object.values(this.regionData).filter(item => item.level === 1);
|
},
|
/*获取城市列表*/
|
cityList() {
|
if (this.formData.province_id && this.regionData[this.formData.province_id]) {
|
const provinceData = this.regionData[this.formData.province_id];
|
if (provinceData.city) {
|
return Object.values(provinceData.city);
|
}
|
}
|
return [];
|
},
|
/*获取区/县列表*/
|
areaList() {
|
if (this.formData.city_id && this.formData.province_id && this.regionData[this.formData.province_id]) {
|
const provinceData = this.regionData[this.formData.province_id];
|
if (provinceData.city && provinceData.city[this.formData.city_id]) {
|
const cityData = provinceData.city[this.formData.city_id];
|
if (cityData.region) {
|
return Object.values(cityData.region);
|
}
|
}
|
}
|
return [];
|
}
|
},
|
methods: {
|
/*获取等级列表*/
|
getGradeList(){
|
let self = this;
|
PlusApi.toRegionUserEdit({}, true)
|
.then(res => {
|
self.gradeList = res.data.gradeList;
|
})
|
.catch(() => {});
|
},
|
|
/*获取地区数据*/
|
getRegionData(){
|
let self = this;
|
DataApi.getRegion({}, true)
|
.then(res => {
|
self.regionData = res.data.regionData;
|
})
|
.catch(() => {});
|
},
|
|
/*省份改变*/
|
handleProvinceChange(){
|
this.formData.city_id = '';
|
this.formData.area_id = '';
|
},
|
|
/*城市改变*/
|
handleCityChange(){
|
this.formData.area_id = '';
|
},
|
|
/*代理级别改变*/
|
handleLevelChange(val){
|
if(val == 1){
|
this.formData.city_id = '';
|
this.formData.area_id = '';
|
this.$refs.formData.clearValidate(['city_id', 'area_id']);
|
}else if(val == 2){
|
this.formData.area_id = '';
|
this.$refs.formData.clearValidate(['area_id']);
|
}
|
},
|
|
/*确认添加*/
|
confirmFunc() {
|
let self = this;
|
this.$refs.formData.validate((valid) => {
|
if (valid) {
|
self.loading = true;
|
PlusApi.addRegionUser(self.formData, true)
|
.then(() => {
|
self.loading = false;
|
self.$message({
|
message: '添加成功',
|
type: 'success'
|
});
|
self.cancelFunc(true);
|
})
|
.catch(() => {
|
self.loading = false;
|
});
|
} else {
|
return false;
|
}
|
});
|
},
|
|
/*重置表单*/
|
resetForm(){
|
this.formData = {
|
user_id: 0,
|
real_name: '',
|
mobile: '',
|
region_level: 1,
|
province_id: '',
|
city_id: '',
|
area_id: '',
|
grade_id: 0,
|
user_name: '',
|
password: ''
|
};
|
this.user_info = {};
|
if(this.$refs.formData){
|
this.$refs.formData.resetFields();
|
}
|
},
|
|
/*打开选择用户弹窗*/
|
userClick() {
|
this.open_user = true;
|
},
|
|
/*关闭获取用户弹窗*/
|
closeDialogFunc(e) {
|
if (e.type != 'error') {
|
// e.params可能是单个对象(单选模式)或数组(多选模式)
|
const user = Array.isArray(e.params) ? e.params[0] : e.params;
|
this.user_info = user;
|
this.formData.user_id = user.user_id;
|
}
|
this.open_user = false;
|
},
|
|
/*关闭弹窗*/
|
cancelFunc(e) {
|
let type = 'cancel';
|
if(e){
|
type = 'success';
|
}
|
this.$emit('close', {
|
type: type
|
});
|
}
|
}
|
};
|
</script>
|
|
<style>
|
.img {
|
margin-top: 10px;
|
}
|
</style>
|
