You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
229 lines
9.3 KiB
229 lines
9.3 KiB
<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>
|
|
|