|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<el-row :gutter="20">
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-card shadow="hover" class="m-b-20">
|
|
|
|
|
<div class="flex j-between a-center">
|
|
|
|
|
<div class="per_title" v-throttle @click="goback()">
|
|
|
|
|
<i class="el-icon-arrow-left"></i>
|
|
|
|
|
<span class="per_back">返回</span>
|
|
|
|
|
<span class="per_school" v-text="isDetail ? '查看用户' : (id != '' ? '编辑客户' : '新增客户')"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-button type="primary" size="small" round class="mag" v-if="!isDetail" v-throttle @click="saveAdd">确定</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
<el-card shadow="hover">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="p-title m-b-20">基本信息</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="flex j-center" :disabled="isDetail">
|
|
|
|
|
<el-col :span="6" style="margin-right: 60px;">
|
|
|
|
|
<el-form-item prop="countries" label="国家">
|
|
|
|
|
<el-select v-model="form.countries" clearable placeholder="请选择国家">
|
|
|
|
|
<el-option v-for="(item,index) in countryList" :key="index" :label="item.name" :value="item.name"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item prop="provinceId" label="省份">
|
|
|
|
|
<el-select v-model="form.provinceId" placeholder="" @change="getCity()" @clear="clearprovince()">
|
|
|
|
|
<el-option v-for="(item,index) in provinceList" :key="index" :label="item.provinceName" :value="item.provinceId"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item prop="clientName" label="客户名称">
|
|
|
|
|
<el-input placeholder="请输入客户名称" v-model="form.clientName" @change="nameChange"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item prop="phone" label="手机号">
|
|
|
|
|
<el-input placeholder="请输入手机号" v-model="form.phone" maxlength="11"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
<el-col :span="6" style="margin-left: 60px;">
|
|
|
|
|
<el-form-item prop="type" label="客户类型">
|
|
|
|
|
<el-select v-model="form.type" placeholder="">
|
|
|
|
|
<el-option v-for="(item,index) in clientTypeList" :key="index" :label="item.name" :value="item.value"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item prop="cityId" label="城市">
|
|
|
|
|
<el-select v-model="form.cityId" :disabled="form.provinceId ? false : true" placeholder="">
|
|
|
|
|
<el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item prop="contactPersonName" label="管理员姓名">
|
|
|
|
|
<el-input placeholder="请输入管理员姓名" v-model="form.contactPersonName"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { mapState } from 'vuex';
|
|
|
|
|
export default {
|
|
|
|
|
name: 'index-add',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
id: this.$route.query.id,
|
|
|
|
|
isDetail: Boolean(this.$route.query.show),
|
|
|
|
|
form: {
|
|
|
|
|
countries: '中国',
|
|
|
|
|
clientName: '',
|
|
|
|
|
provinceId: '',
|
|
|
|
|
contactPersonName: '',
|
|
|
|
|
phone: '',
|
|
|
|
|
cityId: '',
|
|
|
|
|
type: 1,
|
|
|
|
|
},
|
|
|
|
|
rules: {
|
|
|
|
|
type: [
|
|
|
|
|
{ required: true, message: '请选择客户类型', trigger: 'change' }
|
|
|
|
|
],
|
|
|
|
|
countries: [
|
|
|
|
|
{ required: true, message: '请选择国家', trigger: 'change' }
|
|
|
|
|
],
|
|
|
|
|
provinceId: [
|
|
|
|
|
{ required: true, message: '请选择省份', trigger: 'change' }
|
|
|
|
|
],
|
|
|
|
|
cityId: [
|
|
|
|
|
{ required: true, message: '请选择城市', trigger: 'change' }
|
|
|
|
|
],
|
|
|
|
|
contactPersonName: [
|
|
|
|
|
{ required: true, message: '请输入管理员姓名', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
phone: [
|
|
|
|
|
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
|
|
|
|
{
|
|
|
|
|
pattern: /^1[3456789]\d{9}$/,
|
|
|
|
|
message: '请输入正确的手机号',
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
clientName: [
|
|
|
|
|
{ required: true, message: '请输入客户名称', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
clientTypeList: [{
|
|
|
|
|
name: '正式',
|
|
|
|
|
value: 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '试用',
|
|
|
|
|
value: 2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '到期',
|
|
|
|
|
value: 3
|
|
|
|
|
}],
|
|
|
|
|
countryList: [{
|
|
|
|
|
name:'中国'
|
|
|
|
|
}],
|
|
|
|
|
cityList: [],
|
|
|
|
|
originalName: '',
|
|
|
|
|
nameRepeat: false
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
...mapState('client', [
|
|
|
|
|
'provinceList'
|
|
|
|
|
])
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.id && this.getData()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getData(){
|
|
|
|
|
this.$get(`${this.api.getClient}/${this.id}`).then((res) => {
|
|
|
|
|
this.form = res.data.client
|
|
|
|
|
this.originalName = res.data.client.clientName
|
|
|
|
|
this.form.countries = '中国'
|
|
|
|
|
this.getCityData()
|
|
|
|
|
}).catch((res) => {
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
nameChange(){
|
|
|
|
|
if(this.form.clientName !== this.originalName){
|
|
|
|
|
this.$get(`${this.api.getClientName}?clientName=${this.form.clientName}`).then(res => {
|
|
|
|
|
if(res.data.client.length){
|
|
|
|
|
this.nameRepeat = true
|
|
|
|
|
this.$message.warning('该客户名称已存在')
|
|
|
|
|
}else{
|
|
|
|
|
this.nameRepeat = false
|
|
|
|
|
}
|
|
|
|
|
}).catch(res => {});
|
|
|
|
|
}else{
|
|
|
|
|
this.nameRepeat = false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 清除省份
|
|
|
|
|
clearprovince(){
|
|
|
|
|
this.form.cityId = ''
|
|
|
|
|
},
|
|
|
|
|
getCity(){
|
|
|
|
|
this.clearprovince()
|
|
|
|
|
this.getCityData()
|
|
|
|
|
this.pageNo = 1
|
|
|
|
|
},
|
|
|
|
|
getCityData(){
|
|
|
|
|
let data = {
|
|
|
|
|
provinceId: this.form.provinceId
|
|
|
|
|
}
|
|
|
|
|
this.$get(this.api.queryCity,data).then(res => {
|
|
|
|
|
this.cityList = res.data.list
|
|
|
|
|
}).catch(res => {});
|
|
|
|
|
},
|
|
|
|
|
saveAdd(){
|
|
|
|
|
this.$refs.form.validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
if(this.nameRepeat) return this.$message.warning('该客户名称已存在')
|
|
|
|
|
this.form.provinceName = this.provinceList.find(n => n.provinceId == this.form.provinceId).provinceName
|
|
|
|
|
this.form.cityName = this.cityList.find(n => n.cityId == this.form.cityId).cityName
|
|
|
|
|
let data = this.form
|
|
|
|
|
if(this.id){
|
|
|
|
|
this.$post(this.api.updateClient,data).then((res) => {
|
|
|
|
|
this.$message.success('编辑成功');
|
|
|
|
|
this.$router.back()
|
|
|
|
|
}).catch((res) => {
|
|
|
|
|
})
|
|
|
|
|
}else{
|
|
|
|
|
this.$post(this.api.addClient,data).then((res) => {
|
|
|
|
|
this.$message.success('添加成功');
|
|
|
|
|
this.$router.back()
|
|
|
|
|
}).catch((res) => {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
goback() {
|
|
|
|
|
if(this.isDetail){
|
|
|
|
|
this.$router.back()
|
|
|
|
|
}else{
|
|
|
|
|
this.$confirm('确定返回？未更新的信息将不会保存。', '提示', {
|
|
|
|
|
type: 'warning'
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
this.$router.back()
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
/deep/.el-row{
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
