<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: 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>