|
|
|
|
<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('请选择客户后再确定！')
|
|
|
|
|
}
|
|
|
|
|
await this.$get(this.api.queryCustomerDetails,{customerId:this.checkedID}).then(res=>{
|
|
|
|
|
console.log(res,'当前的res');
|
|
|
|
|
})
|
|
|
|
|
this.$emit('back',{show:true,id:this.checkedID,name:this.checkedName})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
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: 17px;
|
|
|
|
|
height: 17px;
|
|
|
|
|
}
|
|
|
|
|
/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%;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after{
|
|
|
|
|
width: 13px;
|
|
|
|
|
height: 13px;
|
|
|
|
|
background: #9278FF;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 10%;
|
|
|
|
|
left: 10%;
|
|
|
|
|
transform: none;
|
|
|
|
|
display: block;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
transition: all .3s ease-in;
|
|
|
|
|
border: 0;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
