|
|
|
|
@ -9,7 +9,8 @@ |
|
|
|
|
<span class="per_back">返回</span> |
|
|
|
|
<span class="per_school">选择客户</span> |
|
|
|
|
</div> |
|
|
|
|
<el-button type="primary" size="small" round class="mag" v-preventReClick @click="goback()">确定</el-button> |
|
|
|
|
<el-button type="primary" size="small" round class="mag" v-preventReClick @click="goback()">确定 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
</el-col> |
|
|
|
|
@ -26,27 +27,34 @@ |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<el-form-item label="国家"> |
|
|
|
|
<el-select v-model="form.countries" placeholder="请选择国家"> |
|
|
|
|
<el-option v-for="(item,index) in countryList" :key="index" :label="item.name" :value="item.name"></el-option> |
|
|
|
|
<el-option v-for="(item,index) in countryList" :key="index" |
|
|
|
|
:label="item.name" :value="item.name"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<el-form-item label="省份"> |
|
|
|
|
<el-select v-model="form.provinces" clearable 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 v-model="form.provinces" clearable 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-col> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<el-form-item label="城市"> |
|
|
|
|
<el-select v-model="form.city" clearable placeholder="请选择城市" :disabled="form.provinces ? false : true" @change="initData"> |
|
|
|
|
<el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId"></el-option> |
|
|
|
|
<el-select v-model="form.city" clearable placeholder="请选择城市" |
|
|
|
|
:disabled="form.provinces ? false : true" @change="initData"> |
|
|
|
|
<el-option v-for="(item,index) in cityList" :key="index" |
|
|
|
|
:label="item.cityName" :value="item.cityId"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-input placeholder="请输入客户名称/联系人姓名/电话" @clear="clearSearch" @keyup.enter.native="getData" prefix-icon="el-icon-search" v-model="form.keyword" clearable></el-input> |
|
|
|
|
<el-input placeholder="请输入客户名称/联系人姓名/电话" @clear="clearSearch" |
|
|
|
|
@keyup.enter.native="getData" prefix-icon="el-icon-search" |
|
|
|
|
v-model="form.keyword" clearable></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
</el-form> |
|
|
|
|
@ -69,14 +77,14 @@ |
|
|
|
|
<!-- <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> --> |
|
|
|
|
<el-table-column type="index" width="100" label="序号" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
{{scope.$index + (page - 1) * pageSize + 1}} |
|
|
|
|
{{ scope.$index + (page - 1) * pageSize + 1 }} |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="customerName" label="客户名称" align="center"> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="行业" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<span class="ellipsis">{{scope.row.industryName}}</span> |
|
|
|
|
<span class="ellipsis">{{ scope.row.industryName }}</span> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="countries" label="国家" align="center"> |
|
|
|
|
@ -91,12 +99,14 @@ |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="操作" width="270" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-checkbox @change="checkboxChenge(scope.row)" v-model="scope.row.checked"></el-checkbox> |
|
|
|
|
<el-checkbox @change="checkboxChenge(scope.row)" |
|
|
|
|
v-model="scope.row.checked"></el-checkbox> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<div class="pagination"> |
|
|
|
|
<el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"> |
|
|
|
|
<el-pagination background layout="total, prev, pager, next" :total="total" |
|
|
|
|
@current-change="handleCurrentChange" :current-page="page"> |
|
|
|
|
</el-pagination> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
@ -107,51 +117,51 @@ |
|
|
|
|
</template> |
|
|
|
|
<script> |
|
|
|
|
export default { |
|
|
|
|
props:{ |
|
|
|
|
refresh:{ |
|
|
|
|
type:Boolean, |
|
|
|
|
default:false |
|
|
|
|
props: { |
|
|
|
|
refresh: { |
|
|
|
|
type: Boolean, |
|
|
|
|
default: false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data(){ |
|
|
|
|
return{ |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
page: 1, |
|
|
|
|
pageSize: 10, |
|
|
|
|
total: 1, |
|
|
|
|
countryList: [{ |
|
|
|
|
name:'中国' |
|
|
|
|
name: "中国" |
|
|
|
|
}], |
|
|
|
|
listData: [], |
|
|
|
|
form: { |
|
|
|
|
countries:'中国', |
|
|
|
|
provinces: '', |
|
|
|
|
city: '', |
|
|
|
|
keyword: '' |
|
|
|
|
countries: "中国", |
|
|
|
|
provinces: "", |
|
|
|
|
city: "", |
|
|
|
|
keyword: "" |
|
|
|
|
}, |
|
|
|
|
provinceList:[], |
|
|
|
|
cityList:[], |
|
|
|
|
checkedID:'',// 选中客户ID |
|
|
|
|
checkedName:'',// 客户名称 |
|
|
|
|
provinceList: [], |
|
|
|
|
cityList: [], |
|
|
|
|
checkedID: "",// 选中客户ID |
|
|
|
|
checkedName: ""// 客户名称 |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
created(){ |
|
|
|
|
this.getData() |
|
|
|
|
this.getProvince() |
|
|
|
|
created() { |
|
|
|
|
this.getData(); |
|
|
|
|
this.getProvince(); |
|
|
|
|
}, |
|
|
|
|
watch:{ |
|
|
|
|
refresh:function(val,val2){ |
|
|
|
|
if(val){ |
|
|
|
|
this.getData() |
|
|
|
|
this.getProvince() |
|
|
|
|
watch: { |
|
|
|
|
refresh: function(val, val2) { |
|
|
|
|
if (val) { |
|
|
|
|
this.getData(); |
|
|
|
|
this.getProvince(); |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods:{ |
|
|
|
|
methods: { |
|
|
|
|
// 取得列表 |
|
|
|
|
getData(){ |
|
|
|
|
this.$post(this.api.queryCustomer,{ |
|
|
|
|
getData() { |
|
|
|
|
this.$post(this.api.queryCustomer, { |
|
|
|
|
countries: this.form.countries, |
|
|
|
|
provinceId: this.form.provinces, |
|
|
|
|
cityId: this.form.city, |
|
|
|
|
@ -159,105 +169,111 @@ export default { |
|
|
|
|
page: this.page, |
|
|
|
|
size: this.pageSize |
|
|
|
|
}).then(res => { |
|
|
|
|
res.message.list.map(e=>{ |
|
|
|
|
e.checked = false |
|
|
|
|
if(this.checkedID){ |
|
|
|
|
if(e.customerId===this.checkedID){ |
|
|
|
|
e.checked = true |
|
|
|
|
res.message.list.map(e => { |
|
|
|
|
e.checked = false; |
|
|
|
|
if (this.checkedID) { |
|
|
|
|
if (e.customerId === this.checkedID) { |
|
|
|
|
e.checked = true; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
this.listData = res.message.list |
|
|
|
|
this.total = res.message.totalCount |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}); |
|
|
|
|
this.listData = res.message.list; |
|
|
|
|
this.total = res.message.totalCount; |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
// 省份 |
|
|
|
|
getProvince(){ |
|
|
|
|
getProvince() { |
|
|
|
|
this.$get(this.api.queryProvince).then(res => { |
|
|
|
|
this.provinceList = res.list |
|
|
|
|
this.$store.commit("provinceData", { provinceList : this.provinceList}) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
this.provinceList = res.list; |
|
|
|
|
this.$store.commit("provinceData", { provinceList: this.provinceList }); |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
clearprovince(){ |
|
|
|
|
this.form.city = '' |
|
|
|
|
clearprovince() { |
|
|
|
|
this.form.city = ""; |
|
|
|
|
}, |
|
|
|
|
getCity(){ |
|
|
|
|
this.clearprovince() |
|
|
|
|
this.getCityData() |
|
|
|
|
this.page = 1 |
|
|
|
|
this.initData() |
|
|
|
|
getCity() { |
|
|
|
|
this.clearprovince(); |
|
|
|
|
this.getCityData(); |
|
|
|
|
this.page = 1; |
|
|
|
|
this.initData(); |
|
|
|
|
}, |
|
|
|
|
getCityData(){ |
|
|
|
|
getCityData() { |
|
|
|
|
let data = { |
|
|
|
|
provinceId: this.form.provinces |
|
|
|
|
} |
|
|
|
|
this.$get(this.api.queryCity,data).then(res => { |
|
|
|
|
this.cityList = res.list |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}; |
|
|
|
|
this.$get(this.api.queryCity, data).then(res => { |
|
|
|
|
this.cityList = res.list; |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
async goback(val){ |
|
|
|
|
if(val){ |
|
|
|
|
this.$emit('back',{show:true}) |
|
|
|
|
}else{ |
|
|
|
|
if(!this.checkedName){ |
|
|
|
|
return this.$message('请选择客户后再确定！') |
|
|
|
|
async goback(val) { |
|
|
|
|
if (val) { |
|
|
|
|
this.$emit("back", { show: true }); |
|
|
|
|
} else { |
|
|
|
|
if (!this.checkedName) { |
|
|
|
|
return this.$message("请选择客户后再确定！"); |
|
|
|
|
} |
|
|
|
|
let param = { |
|
|
|
|
show:true, |
|
|
|
|
id:this.checkedID, |
|
|
|
|
name:this.checkedName, |
|
|
|
|
} |
|
|
|
|
await this.$get(this.api.queryCustomerDetails,{customerId:this.checkedID}).then(res=>{ |
|
|
|
|
console.log(res,'当前的res'); |
|
|
|
|
let data = res.result.customer |
|
|
|
|
param.email = data.email |
|
|
|
|
param.phone = data.phone |
|
|
|
|
param.name = data.customerName |
|
|
|
|
show: true, |
|
|
|
|
id: this.checkedID, |
|
|
|
|
name: this.checkedName |
|
|
|
|
}; |
|
|
|
|
await this.$get(this.api.queryCustomerDetails, { customerId: this.checkedID }).then(res => { |
|
|
|
|
console.log(res, "当前的res"); |
|
|
|
|
let data = res.result.customer; |
|
|
|
|
param.email = data.email; |
|
|
|
|
param.phone = data.phone; |
|
|
|
|
param.name = data.customerName; |
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
this.$emit('back',param) |
|
|
|
|
}); |
|
|
|
|
this.$emit("back", param); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
initData(){ |
|
|
|
|
this.page = 1 |
|
|
|
|
this.getData() |
|
|
|
|
initData() { |
|
|
|
|
this.page = 1; |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
handleCurrentChange(val) { |
|
|
|
|
this.page = val |
|
|
|
|
this.getData() |
|
|
|
|
this.page = val; |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
// checkbox交互 |
|
|
|
|
checkboxChenge(row){ |
|
|
|
|
this.listData.map(e=>{ |
|
|
|
|
e.checked = false |
|
|
|
|
}) |
|
|
|
|
row.checked = true |
|
|
|
|
this.checkedName = row.customerName |
|
|
|
|
this.checkedID = row.customerId |
|
|
|
|
checkboxChenge(row) { |
|
|
|
|
this.listData.map(e => { |
|
|
|
|
e.checked = false; |
|
|
|
|
}); |
|
|
|
|
row.checked = true; |
|
|
|
|
this.checkedName = row.customerName; |
|
|
|
|
this.checkedID = row.customerId; |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
clearSearch(){ |
|
|
|
|
clearSearch() { |
|
|
|
|
|
|
|
|
|
this.getData() |
|
|
|
|
this.getData(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.mag{ |
|
|
|
|
.mag { |
|
|
|
|
margin-right: 20px; |
|
|
|
|
} |
|
|
|
|
/deep/ .el-checkbox__inner{ |
|
|
|
|
|
|
|
|
|
/deep/ .el-checkbox__inner { |
|
|
|
|
border-radius: 50%; |
|
|
|
|
width: 19px; |
|
|
|
|
height: 19px; |
|
|
|
|
} |
|
|
|
|
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{ |
|
|
|
|
|
|
|
|
|
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner { |
|
|
|
|
background: #FFF; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
/deep/ .el-checkbox__inner::after{ |
|
|
|
|
|
|
|
|
|
/deep/ .el-checkbox__inner::after { |
|
|
|
|
transform: none; |
|
|
|
|
transition: all .3s ease-in; |
|
|
|
|
width: 0; |
|
|
|
|
@ -268,7 +284,8 @@ export default { |
|
|
|
|
transform: translate(-46%, -48%); |
|
|
|
|
border-radius: 50%; |
|
|
|
|
} |
|
|
|
|
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after{ |
|
|
|
|
|
|
|
|
|
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after { |
|
|
|
|
width: 13px; |
|
|
|
|
height: 13px; |
|
|
|
|
background: #9278FF; |
|
|
|
|
@ -281,7 +298,8 @@ export default { |
|
|
|
|
transition: all .3s ease-in; |
|
|
|
|
border: 0; |
|
|
|
|
} |
|
|
|
|
/deep/ .el-checkbox__input{ |
|
|
|
|
|
|
|
|
|
/deep/ .el-checkbox__input { |
|
|
|
|
line-height: 0; |
|
|
|
|
} |
|
|
|
|
</style> |
