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.
288 lines
11 KiB
288 lines
11 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('back')"> |
|
<i class="el-icon-arrow-left"></i> |
|
<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> |
|
</div> |
|
</el-card> |
|
</el-col> |
|
|
|
<el-col :span="24"> |
|
<el-card shadow="hover" class="mgb20"> |
|
<div> |
|
<div class="flex-center mgb20"> |
|
<p class="hr_tag"></p> |
|
<span>筛选</span> |
|
</div> |
|
<div> |
|
<el-form label-width="80px"> |
|
<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-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> |
|
</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> |
|
</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-form-item> |
|
</el-col> |
|
</el-form> |
|
</div> |
|
</div> |
|
</el-card> |
|
</el-col> |
|
|
|
<el-col :span="24"> |
|
<el-card shadow="hover" class="mgb20"> |
|
<div class="flex-between mgb20"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span>客户列表</span> |
|
</div> |
|
<div> |
|
</div> |
|
</div> |
|
<el-table :data="listData" class="table" stripe header-align="center" row-key="customerId"> |
|
<!-- <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}} |
|
</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> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="countries" label="国家" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="provinceName" label="省份" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="cityName" label="城市" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="name" label="联系人" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="account" label="账号" align="center"> |
|
</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> |
|
</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> |
|
</div> |
|
</el-card> |
|
</el-col> |
|
|
|
</el-row> |
|
</div> |
|
</template> |
|
<script> |
|
export default { |
|
props:{ |
|
refresh:{ |
|
type:Boolean, |
|
default:false |
|
} |
|
}, |
|
data(){ |
|
return{ |
|
page: 1, |
|
pageSize: 10, |
|
total: 1, |
|
countryList: [{ |
|
name:'中国' |
|
}], |
|
listData: [], |
|
form: { |
|
countries:'中国', |
|
provinces: '', |
|
city: '', |
|
keyword: '' |
|
}, |
|
provinceList:[], |
|
cityList:[], |
|
checkedID:'',// 选中客户ID |
|
checkedName:'',// 客户名称 |
|
|
|
} |
|
}, |
|
created(){ |
|
this.getData() |
|
this.getProvince() |
|
}, |
|
watch:{ |
|
refresh:function(val,val2){ |
|
if(val){ |
|
this.getData() |
|
this.getProvince() |
|
|
|
} |
|
} |
|
}, |
|
methods:{ |
|
// 取得列表 |
|
getData(){ |
|
this.$post(this.api.queryCustomer,{ |
|
countries: this.form.countries, |
|
provinceId: this.form.provinces, |
|
cityId: this.form.city, |
|
searchContent: this.form.keyword, |
|
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 |
|
} |
|
} |
|
}) |
|
this.listData = res.message.list |
|
this.total = res.message.totalCount |
|
}).catch(res => {}) |
|
}, |
|
// 省份 |
|
getProvince(){ |
|
this.$get(this.api.queryProvince).then(res => { |
|
this.provinceList = res.list |
|
this.$store.commit("provinceData", { provinceList : this.provinceList}) |
|
}).catch(res => {}) |
|
}, |
|
clearprovince(){ |
|
this.form.city = '' |
|
}, |
|
getCity(){ |
|
this.clearprovince() |
|
this.getCityData() |
|
this.page = 1 |
|
this.initData() |
|
}, |
|
getCityData(){ |
|
let data = { |
|
provinceId: this.form.provinces |
|
} |
|
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('请选择客户后再确定！') |
|
} |
|
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.name |
|
|
|
}) |
|
this.$emit('back',param) |
|
} |
|
}, |
|
initData(){ |
|
this.page = 1 |
|
this.getData() |
|
}, |
|
handleCurrentChange(val) { |
|
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 |
|
|
|
}, |
|
clearSearch(){ |
|
|
|
this.getData() |
|
} |
|
} |
|
|
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
.mag{ |
|
margin-right: 20px; |
|
} |
|
/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{ |
|
background: #FFF; |
|
|
|
} |
|
/deep/ .el-checkbox__inner::after{ |
|
transform: none; |
|
transition: all .3s ease-in; |
|
width: 0; |
|
height: 0; |
|
position: relative; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-46%, -48%); |
|
border-radius: 50%; |
|
} |
|
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after{ |
|
width: 13px; |
|
height: 13px; |
|
background: #9278FF; |
|
position: relative; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-46%, -48%); |
|
display: block; |
|
border-radius: 50%; |
|
transition: all .3s ease-in; |
|
border: 0; |
|
} |
|
/deep/ .el-checkbox__input{ |
|
line-height: 0; |
|
} |
|
</style> |