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.
546 lines
26 KiB
546 lines
26 KiB
<template> |
|
<div> |
|
<el-row :gutter="20"> |
|
<el-col :span="24"> |
|
<el-card shadow="hover" class="mgb20"> |
|
<div class="flex-between"> |
|
<div class="per_title" v-preventReClick @click="goback()"> |
|
<i class="el-icon-arrow-left"></i> |
|
<span class="per_back">返回</span> |
|
<span class="per_school" v-text="customerId ? '编辑客户信息' : '新增客户信息'"></span> |
|
</div> |
|
<el-button type="primary" size="small" round class="mag" v-preventReClick @click="saveAdd('form')">确定</el-button> |
|
</div> |
|
</el-card> |
|
|
|
<el-card shadow="hover" class="mgb20"> |
|
<div> |
|
<div class="flex-center mgb20"> |
|
<p class="addhr_tag"></p> |
|
<span>基本信息</span> |
|
</div> |
|
|
|
<div> |
|
<el-form :model="form" :rules="rules" ref="form" label-width="120px" class="flex-start-around" :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="" disabled> |
|
<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 label="到期时间"> |
|
<el-date-picker type="date" disabled v-model="form.expireDate" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker> |
|
</el-form-item> |
|
|
|
<el-form-item prop="industryClassId" label="行业类型"> |
|
<el-select v-model="form.industryClassId" clearable placeholder="请选择行业类型" @change="changIndustry" @clear="clearIndustry()"> |
|
<el-option v-for="(item,index) in IndustryClassList" :key="index" :label="item.industryClassName" :value="item.industryClassId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item prop="name" label="联系人姓名"> |
|
<el-input placeholder="请输入联系人姓名" v-model="form.name"></el-input> |
|
</el-form-item> |
|
|
|
<el-form-item prop="account" label="账号"> |
|
<el-input placeholder="请输入账号" v-model="form.account"></el-input> |
|
</el-form-item> |
|
|
|
<el-form-item prop="email" label="邮箱"> |
|
<el-input placeholder="请输入邮箱" v-model="form.email"></el-input> |
|
</el-form-item> |
|
</el-col> |
|
|
|
<el-col :span="6" style="margin-left: 60px;"> |
|
<el-form-item prop="customerType" label="客户类型"> |
|
<el-select v-model="form.customerType" placeholder="请选择客户类型"> |
|
<el-option v-for="(item,index) in customerTypeList" :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" placeholder="" disabled> |
|
<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="schoolId" label="客户名称"> |
|
<el-select v-model="form.schoolId" filterable clearable placeholder="请选择学校" @change="SchoolChange" @clear="clearSchool"> |
|
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item prop="industryId" label="行业"> |
|
<el-select v-model="form.industryId" clearable placeholder="请选择行业" :disabled="form.industryClassId ? false : true"> |
|
<el-option v-for="(item,index) in industryList" :key="index" :label="item.industryName" :value="item.industryId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item label="手机号"> |
|
<el-input placeholder="请输入联系人手机号" v-model="form.phone" maxlength="11"></el-input> |
|
</el-form-item> |
|
|
|
<el-form-item label="职务"> |
|
<el-input placeholder="请输入职务名称" v-model="form.position" maxlength="11"></el-input> |
|
</el-form-item> |
|
</el-col> |
|
</el-form> |
|
</div> |
|
</div> |
|
</el-card> |
|
|
|
<el-card shadow="hover" class="mgb20" v-show="customerId"> |
|
<div class="flex-center mgb20 user_header"> |
|
<p class="addhr_tag"></p> |
|
<span>课程权限</span> |
|
</div> |
|
<div> |
|
<el-table :data="coursePermissionss" class="orderTable" stripe header-align="center"> |
|
<el-table-column type="index" width="100" label="序号" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="courseName" label="课程名称" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="usePeriod" label="使用期限" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="usePeriod" label="起止日期" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="usePeriod" label="剩余期限" align="center"> |
|
</el-table-column> |
|
<el-table-column label="端口地址" align="center"> |
|
<template slot-scope="scope"> |
|
<el-button @click="configure(scope.row)">配置</el-button> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="状态" align="center"> |
|
<template slot-scope="scope"> |
|
<el-switch |
|
v-model="scope.row.isDeliverGoods" |
|
:active-value="1" |
|
:inactive-value="0" |
|
active-text="启用" |
|
inactive-text="禁用" |
|
disabled> |
|
</el-switch> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
</el-card> |
|
|
|
<el-card shadow="hover" class="mgb20" v-show="customerId"> |
|
<div class="flex-center mgb20 user_header"> |
|
<p class="addhr_tag"></p> |
|
<span>数据平台权限</span> |
|
</div> |
|
<div> |
|
<el-table :data="coursePermissionss" class="orderTable" stripe header-align="center"> |
|
<el-table-column type="index" width="100" label="序号" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="courseName" label="产品名称" align="center"></el-table-column> |
|
<el-table-column prop="usePeriod" label="使用期限" align="center"></el-table-column> |
|
<el-table-column prop="usePeriod" label="起止日期" align="center"></el-table-column> |
|
<el-table-column prop="usePeriod" label="剩余期限" align="center"></el-table-column> |
|
<el-table-column prop="usePeriod" label="账号数" align="center"></el-table-column> |
|
<el-table-column label="端口地址" align="center"> |
|
<template slot-scope="scope"> |
|
<el-button @click="configure(scope.row)">配置</el-button> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="状态" align="center"> |
|
<template slot-scope="scope"> |
|
<el-switch |
|
v-model="scope.row.isDeliverGoods" |
|
:active-value="1" |
|
:inactive-value="0" |
|
active-text="启用" |
|
inactive-text="禁用" |
|
disabled> |
|
</el-switch> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
</el-card> |
|
|
|
<el-card shadow="hover" class="mgb20" v-show="customerId"> |
|
<div class="flex-center mgb20 user_header"> |
|
<p class="addhr_tag"></p> |
|
<span>合同信息</span> |
|
</div> |
|
<div> |
|
<el-table :data="contractInformations" class="table" stripe header-align="center"> |
|
<el-table-column type="index" width="100" label="序号" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="contractInformationNumber" label="合同编号" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="contractInformationName" label="合同名称" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="contractInformationName" label="合同期限" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="contractInformationLink" label="产品内容" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="contractInformationSum" label="合同金额" align="center"> |
|
</el-table-column> |
|
<el-table-column label="操作" align="center"> |
|
<template> |
|
<el-button type="text">查看</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
</el-card> |
|
|
|
<!-- 选择IP --> |
|
<el-dialog :visible.sync="ipVisible" width="70%" center> |
|
<div class="flex-center mgb20"> |
|
<p class="hr_tag"></p> |
|
<span>客户列表</span> |
|
</div> |
|
<el-table :data="IPData" stripe header-align="center"> |
|
<el-table-column type="index" width="100" label="序号" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="age" label="服务器名称" align="center"> |
|
</el-table-column> |
|
<el-table-column label="IP" align="center"> |
|
<template slot-scope="scope"> |
|
<div class="tab_temp"> |
|
<div class="flex-center"> |
|
<label>内网:</label> |
|
<el-input v-model="scope.row.Intranet" placeholder="请输入IP地址"></el-input> |
|
</div> |
|
<div class="flex-center mar10"> |
|
<label>外网:</label> |
|
<el-input v-model="scope.row.extranet" placeholder="请输入端口号"></el-input> |
|
</div> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="端口" align="center"> |
|
<template slot-scope="scope"> |
|
<div class="tab_temp"> |
|
<div class="flex-center"> |
|
<label>内网:</label> |
|
<el-input v-model="scope.row.Intranet" placeholder="请输入内网IP地址"></el-input> |
|
</div> |
|
<div class="flex-center mar10"> |
|
<label>外网:</label> |
|
<el-input v-model="scope.row.extranet" placeholder="请输入外网IP地址"></el-input> |
|
</div> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="选择" align="center"> |
|
<template slot-scope="scope"> |
|
<i class="el-icon-success radio_icon"></i> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="ipVisible = false">取 消</el-button> |
|
<el-button type="primary" @click="IPSure()">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
customerId : this.$route.query.id, |
|
isDetail : Boolean(this.$route.query.show), |
|
customerData: [], |
|
form: { |
|
customerName: '', |
|
countries: '中国', |
|
industryClassId: '', |
|
industryId: '', |
|
provinceId: '', |
|
account: '', |
|
name: '', |
|
phone: '', |
|
position: '', |
|
cityId: '', |
|
customerType: '', |
|
expireDate: '', |
|
email: '', |
|
schoolId: '' |
|
}, |
|
rules: { |
|
countries: [ |
|
{ required: true, message: '请输入国家', trigger: 'blur' } |
|
], |
|
provinceId: [ |
|
{ required: true, message: '请输入省份', trigger: 'blur' } |
|
], |
|
cityId: [ |
|
{ required: true, message: '请输入城市', trigger: 'blur' } |
|
], |
|
customerType: [ |
|
{ required: true, message: '请选择客户类型', trigger: 'change' } |
|
], |
|
name: [ |
|
{ required: true, message: '请输入联系人姓名', trigger: 'blur' } |
|
], |
|
account: [ |
|
{ required: true, message: '请输入账号', trigger: 'blur' } |
|
], |
|
phone: [ |
|
{ required: true, message: '请输入手机号', trigger: 'blur' }, |
|
{ |
|
pattern: /^1[3456789]\d{9}$/, |
|
message: '请输入正确的手机号', |
|
trigger: 'blur' |
|
} |
|
], |
|
schoolId: [ |
|
{ required: true, message: '请选择客户名称', trigger: 'change' } |
|
], |
|
email: [ |
|
// { required: true, message: '请输入邮箱', trigger: 'blur' }, |
|
{ |
|
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, |
|
message: '请输入正确的邮箱', |
|
trigger: 'blur' |
|
} |
|
], |
|
industryId: [ |
|
{ required: true, message: '请选择行业', trigger: 'change' } |
|
], |
|
industryClassId: [ |
|
{ required: true, message: '请选择行业类型', trigger: 'change' } |
|
], |
|
}, |
|
customerTypeList: [{ |
|
name: '正式', |
|
value: 1 |
|
}, |
|
{ |
|
name: '试用', |
|
value: 2 |
|
}, |
|
{ |
|
name: '到期', |
|
value: 3 |
|
}], |
|
countryList: [{ |
|
name:'中国' |
|
}], |
|
provinceList: this.$store.state.provinceList, |
|
cityList: [], |
|
IndustryClassList: [], |
|
industryList: [], |
|
schoolList: [], |
|
contractInformations: [], |
|
coursePermissionss: [], |
|
ipVisible: false, |
|
IPData: [{ |
|
id: 1, |
|
age: '小额贷系统', |
|
storeName: '1个月', |
|
total: '2019.01.02 11:00', |
|
payamount: '2019.01.02 11:00', |
|
payamount: '700d12h1min', |
|
swtich: true, |
|
Intranet: '10.20.202.1', |
|
extranet: '10.20.202.1' |
|
}, |
|
{ |
|
id: 2, |
|
age: '小额贷系统', |
|
storeName: '1个月', |
|
total: '2019.01.02 11:00', |
|
payamount: '2019.01.02 11:00', |
|
payamount: '700d12h1min', |
|
swtich: true, |
|
Intranet: '', |
|
extranet: '' |
|
}], |
|
NoAdd: true |
|
}; |
|
}, |
|
mounted() { |
|
this.getIndustryClass() |
|
if(this.customerId){ |
|
this.$get(this.api.queryCustomerDetails,{ |
|
customerId: this.customerId |
|
}).then((res) => { |
|
let customer = res.result.customer |
|
this.form = { |
|
schoolId: customer.schoolId, |
|
countries: customer.countries, |
|
industryClassId: customer.industryClassId, |
|
industryId: customer.industryId, |
|
provinceId: customer.provinceId, |
|
account: customer.account, |
|
phone: customer.phone, |
|
cityId: customer.cityId, |
|
customerType: customer.customerType, |
|
expireDate: customer.expireDate, |
|
email: customer.email, |
|
name: customer.name, |
|
position: customer.position, |
|
} |
|
this.contractInformations = res.result.contractInformations |
|
this.coursePermissionss = res.result.coursePermissionss |
|
this.getCityData() |
|
this.changIndustryData() |
|
this.getSchoolData() |
|
}).catch((res) => {}) |
|
}else{ |
|
this.getSchoolData() |
|
} |
|
}, |
|
methods: { |
|
// 获取城市 |
|
getCityData(){ |
|
let data = { |
|
provinceId: this.form.provinceId |
|
} |
|
this.$get(this.api.queryCity,data).then(res => { |
|
this.cityList = res.message |
|
}).catch(res => {}); |
|
}, |
|
// 清除学校 |
|
clearSchool(){ |
|
this.form.provinceId = '', |
|
this.form.cityId = '', |
|
this.form.customerName = '' |
|
}, |
|
// 获取学校/客户名称 |
|
getSchoolData(){ |
|
let data = { |
|
schoolName: '', |
|
provinceId: '', |
|
cityId: '' |
|
} |
|
this.$get(this.api.querySchoolData).then(res => { |
|
this.schoolList = res.list |
|
}).catch(res => {}); |
|
}, |
|
// 查询客户是否存在 |
|
SchoolChange(val){ |
|
this.clearSchool() |
|
if(val){ |
|
let obj = {} |
|
obj = this.schoolList.find((item)=>{ |
|
return item.schoolId === val |
|
}); |
|
this.form.customerName = obj.schoolName |
|
this.form.provinceId = obj.provinceId |
|
this.getCityData() |
|
this.form.cityId = obj.cityId |
|
|
|
this.$get(this.api.queryCustomerIsExists,{ |
|
schoolId: this.form.schoolId |
|
}).then(res => { |
|
this.NoAdd = true |
|
}).catch(res => { |
|
this.$message.warning('该客户已存在') |
|
this.NoAdd = false |
|
}) |
|
} |
|
}, |
|
// 获取行业类 |
|
getIndustryClass(){ |
|
this.$get(this.api.queryCustomerIndustryClass).then(res => { |
|
this.IndustryClassList = res.message |
|
}).catch(res => {}); |
|
}, |
|
// 清除行业类 |
|
clearIndustry(){ |
|
this.form.industryId = '' |
|
}, |
|
// 获取行业 |
|
changIndustry(){ |
|
this.clearIndustry() |
|
this.changIndustryData() |
|
}, |
|
changIndustryData(){ |
|
let data = { |
|
industryClassId: this.form.industryClassId |
|
} |
|
this.$get(this.api.queryCustomerIndustry,data).then(res => { |
|
this.industryList = res.message |
|
}).catch(res => {}); |
|
}, |
|
saveAdd(formName){ |
|
this.$refs[formName].validate((valid) => { |
|
if (valid) { |
|
if(this.NoAdd){ |
|
let obj = {}; |
|
obj = this.schoolList.find((item)=>{ |
|
return item.schoolId == this.form.schoolId; |
|
}); |
|
this.form.customerName = obj.schoolName |
|
this.form.provinceId = obj.provinceId |
|
this.getCityData() |
|
this.form.cityId = obj.cityId |
|
let data = { |
|
customerName: this.form.customerName, |
|
customerId: this.customerId, |
|
schoolId: this.form.schoolId, |
|
countries: this.form.countries, |
|
industryClassId: this.form.industryClassId, |
|
industryId: this.form.industryId, |
|
provinceId: this.form.provinceId, |
|
account: this.form.account, |
|
phone: this.form.phone, |
|
cityId: this.form.cityId, |
|
customerType: this.form.customerType, |
|
expireDate: this.form.expireDate, |
|
email: this.form.email, |
|
name: this.form.name, |
|
position: this.form.position |
|
} |
|
if(this.customerId){ |
|
this.$post(this.api.updateCustomer,data).then((res) => { |
|
this.$message.success('编辑成功') |
|
this.goback() |
|
}).catch((res) => {}) |
|
}else{ |
|
this.$post(this.api.addCustomer,data).then((res) => { |
|
this.$message.success('添加成功') |
|
this.goback() |
|
}).catch((res) => {}) |
|
} |
|
}else{ |
|
this.$message.warning('该客户已存在') |
|
} |
|
} |
|
}) |
|
}, |
|
configure(){ |
|
this.ipVisible = true |
|
}, |
|
IPSure(){ |
|
this.ipVisible = false |
|
}, |
|
goback(){ |
|
this.$router.go(-1) |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.addhr_tag{ |
|
background-color: #666; |
|
width: 6px; |
|
height: 17px; |
|
margin-right: 5px; |
|
} |
|
.radio_icon{ |
|
font-size: 26px; |
|
color: #9278FF; |
|
} |
|
</style>
|
|
|