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.
521 lines
24 KiB
521 lines
24 KiB
4 years ago
|
<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="80px" class="flex-start-around">
|
||
|
|
<el-col :span="6" style="margin-right: 60px;">
|
||
|
|
<el-form-item 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="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 label="省份">
|
||
|
|
<el-select v-model="form.provinces" 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 prop="adminName" label="管理员">
|
||
|
|
<el-input placeholder="请输入管理员姓名" v-model="form.adminName"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item prop="IndustryClass" label="行业类">
|
||
|
|
<el-select v-model="form.IndustryClass" 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="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 label="客户类型">
|
||
|
|
<el-select v-model="form.customerType" disabled 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 label="学校类型">
|
||
|
|
<el-select v-model="form.level" placeholder="" disabled>
|
||
|
|
<el-option v-for="(item,index) in levelList" :key="index" :label="item.name" :value="item.value"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="城市">
|
||
|
|
<el-select v-model="form.city" 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="adminPhone" label="手机号">
|
||
|
|
<el-input placeholder="请输入管理员手机号" v-model="form.adminPhone" maxlength="11"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item prop="industry" label="行业">
|
||
|
|
<el-select v-model="form.industry" clearable placeholder="请选择行业" :disabled="form.IndustryClass ? 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-date-picker type="date" disabled v-model="form.stopTime" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
|
||
|
|
</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="marketPrice" label="市场价(万)" align="center">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="transactionPrice" label="成交价(万)" align="center">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="discount" 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"
|
||
|
|
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="contractInformationName" label="合同名称" align="center">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="contractInformationNumber" label="合同编号" align="center">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="contractInformationSum" label="合同金额" align="center">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="contractInformationLink" label="合同文件" align="center">
|
||
|
|
</el-table-column>
|
||
|
|
<!-- <el-table-column prop="payamount" 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 {
|
||
|
|
name: 'baseform',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
customerData: [],
|
||
|
|
form: {
|
||
|
|
schoolId: '',
|
||
|
|
customerName: '',
|
||
|
|
countries: '中国',
|
||
|
|
IndustryClass: '',
|
||
|
|
industry: '',
|
||
|
|
provinces: '',
|
||
|
|
adminName: '',
|
||
|
|
adminPhone: '',
|
||
|
|
city: '',
|
||
|
|
customerType: '',
|
||
|
|
stopTime: '',
|
||
|
|
email: '',
|
||
|
|
level: ''
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
adminName: [
|
||
|
|
{ required: true, message: '请输入管理员姓名', trigger: 'blur' }
|
||
|
|
],
|
||
|
|
adminPhone: [
|
||
|
|
{ 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'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
industry: [
|
||
|
|
{ required: true, message: '请选择行业', trigger: 'change' }
|
||
|
|
],
|
||
|
|
IndustryClass: [
|
||
|
|
{ required: true, message: '请选择行业类', trigger: 'change' }
|
||
|
|
],
|
||
|
|
},
|
||
|
|
customerTypeList: [{
|
||
|
|
name: '正式',
|
||
|
|
value: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '试用',
|
||
|
|
value: 2
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '到期',
|
||
|
|
value: 3
|
||
|
|
}],
|
||
|
|
countryList: [{
|
||
|
|
name:'中国'
|
||
|
|
}],
|
||
|
|
provinceList: this.$store.state.provinceList,
|
||
|
|
cityList: [],
|
||
|
|
levelList: [{
|
||
|
|
name: '本科',
|
||
|
|
value: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '大专',
|
||
|
|
value: 2
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '高职',
|
||
|
|
value: 3
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '中专',
|
||
|
|
value: 4
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '其他',
|
||
|
|
value: 5
|
||
|
|
}],
|
||
|
|
IndustryClassList: [],
|
||
|
|
industryList: [],
|
||
|
|
schoolList: [],
|
||
|
|
customerId : this.$store.state.customerId,
|
||
|
|
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){
|
||
|
|
let data = {
|
||
|
|
customerId: this.customerId
|
||
|
|
}
|
||
|
|
this.$get(this.api.queryCustomerDetails,data).then((res) => {
|
||
|
|
this.form = {
|
||
|
|
schoolId: res.message[0].customers[0].schoolId,
|
||
|
|
countries: res.message[0].customers[0].countries,
|
||
|
|
IndustryClass: res.message[0].customers[0].industryClassId,
|
||
|
|
industry: res.message[0].customers[0].industryId,
|
||
|
|
provinces: res.message[0].customers[0].provinceId,
|
||
|
|
adminName: res.message[0].customers[0].adminName,
|
||
|
|
adminPhone: res.message[0].customers[0].adminPhone,
|
||
|
|
city: res.message[0].customers[0].cityId,
|
||
|
|
level: res.message[0].customers[0].level,
|
||
|
|
customerType: res.message[0].customers[0].customerType,
|
||
|
|
stopTime: res.message[0].customers[0].stopTime,
|
||
|
|
email: res.message[0].customers[0].email,
|
||
|
|
}
|
||
|
|
this.contractInformations = res.message[0].contractInformations
|
||
|
|
this.coursePermissionss = res.message[0].coursePermissionss
|
||
|
|
this.getCityData()
|
||
|
|
this.changIndustryData()
|
||
|
4 years ago
|
this.getSchoolData()
|
||
|
4 years ago
|
}).catch((res) => {
|
||
|
|
})
|
||
|
4 years ago
|
}else{
|
||
|
|
this.getSchoolData()
|
||
|
4 years ago
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 获取城市
|
||
|
|
getCityData(){
|
||
|
|
let data = {
|
||
|
|
provinceId: this.form.provinces
|
||
|
|
}
|
||
|
|
this.$get(this.api.queryCity,data).then(res => {
|
||
|
|
this.cityList = res.message
|
||
|
|
}).catch(res => {});
|
||
|
|
},
|
||
|
|
// 清除学校
|
||
|
|
clearSchool(){
|
||
|
|
this.form.provinces = '',
|
||
|
|
this.form.city = '',
|
||
|
|
this.form.level = '',
|
||
|
|
this.form.customerName = ''
|
||
|
|
},
|
||
|
|
// 获取学校/客户名称
|
||
|
|
getSchoolData(){
|
||
|
|
let data = {
|
||
4 years ago
|
schoolName: '',
|
||
|
|
provinceId: '',
|
||
|
|
cityId: ''
|
||
|
4 years ago
|
}
|
||
|
|
this.$get(this.api.querySchoolData,data).then(res => {
|
||
|
|
this.schoolList = res.message
|
||
|
|
}).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.level = obj.level
|
||
|
|
this.form.provinces = obj.provinceId
|
||
|
|
this.getCityData()
|
||
|
|
this.form.city = obj.cityId
|
||
|
|
|
||
|
|
let data = {
|
||
|
|
schoolId: this.form.schoolId
|
||
|
|
}
|
||
|
|
this.$get(this.api.queryCustomerIsExists,data).then(res => {
|
||
|
|
if(res.message.length != 0){
|
||
|
|
this.$message.warning('该客户已存在');
|
||
|
|
this.NoAdd = false
|
||
|
|
}else{
|
||
|
|
this.NoAdd = true
|
||
|
|
}
|
||
|
|
}).catch(res => {
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取行业类
|
||
|
|
getIndustryClass(){
|
||
|
|
this.$get(this.api.queryCustomerIndustryClass).then(res => {
|
||
|
|
this.IndustryClassList = res.message
|
||
|
|
}).catch(res => {});
|
||
|
|
},
|
||
|
|
// 清除行业类
|
||
|
|
clearIndustry(){
|
||
|
|
this.form.industry = ''
|
||
|
|
},
|
||
|
|
// 获取行业
|
||
|
|
changIndustry(){
|
||
|
|
this.clearIndustry()
|
||
|
|
this.changIndustryData()
|
||
|
|
},
|
||
|
|
changIndustryData(){
|
||
|
|
let data = {
|
||
|
|
industryClassId: this.form.IndustryClass
|
||
|
|
}
|
||
|
|
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){
|
||
|
4 years ago
|
let obj = {};
|
||
|
|
obj = this.schoolList.find((item)=>{
|
||
|
|
return item.schoolId === this.form.schoolId;
|
||
|
|
});
|
||
|
|
this.form.customerName = obj.schoolName
|
||
|
|
this.form.level = obj.level
|
||
|
|
this.form.provinces = obj.provinceId
|
||
|
|
this.getCityData()
|
||
|
|
this.form.city = obj.cityId
|
||
|
4 years ago
|
let data = {
|
||
|
|
customerName: this.form.customerName,
|
||
|
|
schoolId: this.form.schoolId,
|
||
|
|
countries: this.form.countries,
|
||
|
|
industryClassId: this.form.IndustryClass,
|
||
|
|
industryId: this.form.industry,
|
||
|
|
provinceId: this.form.provinces,
|
||
|
|
adminName: this.form.adminName,
|
||
|
|
adminPhone: this.form.adminPhone,
|
||
|
|
cityId: this.form.city,
|
||
|
|
level: this.form.level,
|
||
|
|
customerType: this.form.customerType,
|
||
|
|
stopTime: this.form.stopTime,
|
||
|
|
email: this.form.email,
|
||
|
|
customerId: this.customerId
|
||
|
|
}
|
||
|
|
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 scoped>
|
||
|
|
.addhr_tag{
|
||
|
|
background-color: #666;
|
||
|
|
width: 6px;
|
||
|
|
height: 17px;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
.radio_icon{
|
||
|
|
font-size: 26px;
|
||
|
|
color: #9278FF;
|
||
|
|
}
|
||
|
|
</style>
|