Zhao Qiqi
3 years ago
4 changed files with 1730 additions and 17 deletions
@ -0,0 +1,318 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="kehu_xuanze"> |
|||
<div class="tab-header webtop"> |
|||
<div>选择客户</div> |
|||
<div> |
|||
<el-button type="primary" size="medium" @click="handleCreate()">新增客户</el-button> |
|||
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="webcon"> |
|||
<div class="searchcon"> |
|||
<!-- <el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button>--> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="130px" class="tab-header"> |
|||
<el-form-item label="客户姓名"> <!--客户姓名/公司名称/手机号/微信号/证件号码--> |
|||
<el-input v-model="listQuery.params.name" placeholder="请输入" clearable class="filter-item"/> |
|||
</el-form-item> |
|||
<div class="searchbtns"> |
|||
<el-button type="primary" @click="handleFilter">查询</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
<pageye v-show="total>0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" |
|||
class="pagination" @pagination="getList"/> |
|||
<div class=""> |
|||
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%" |
|||
@selection-change="handleSelectionChange"> |
|||
<!-- <el-table-column width="50px" type="selection" align="center"/>--> |
|||
<el-table-column width="80px" label="序号" type="index" :index="indexMethod" align="center"/> |
|||
<el-table-column label="操作" align="center"> |
|||
<template slot-scope="scope"> |
|||
<div class="searchbtns"> |
|||
<el-button size="small" type="primary" @click="handleConfirm(scope.row)">选择</el-button> |
|||
<el-button size="small" type="primary" @click="handleUpdate(scope.row)">编辑</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="登记日期" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.time }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="客户姓名" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.name }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="公司名称" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.companyName }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="手机号码" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.mobile }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="微信号" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.weixin }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="状态" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.follow_state }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div class="pages"> |
|||
<div class="tit"/> |
|||
<!-- 翻页 --> |
|||
<pagination v-show="total>0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" |
|||
class="pagination" @pagination="getList"/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<xuanzekehu-add ref="addAndUpdate" @handleReturn="resetState"></xuanzekehu-add> |
|||
<el-dialog |
|||
title="客户登记-类型" |
|||
:visible.sync="dialogVisible" |
|||
width="28%" |
|||
top="13%"> |
|||
<el-form :model="customerTypeList"> |
|||
<el-form-item label="联络方式" :label-width="formLabelWidth" class="diaForm"> |
|||
<el-select v-model="customerTypeList.visitWay" placeholder="请选择联络方式" @change="getVisitWay"> |
|||
<el-option v-for="(item) in visitWay_list" :key="item.dictKey" :label="item.dictValue" |
|||
:value="item.dictKey"/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="客户类型" :label-width="formLabelWidth" class="diaForm"> |
|||
<el-radio v-model="customerTypeList.customerType" label="个人">个人</el-radio> |
|||
<el-radio v-model="customerTypeList.customerType" label="企业">企业</el-radio> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button class="el-button-sure" type="primary" @click="handleOpen()">确 定</el-button> |
|||
<el-button @click="dialogVisible = false">取 消</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {mapGetters} from 'vuex' |
|||
import Pagination from '@/components/pagination' |
|||
import pageye from '@/components/pagination/pageye' |
|||
import {pagerList, typeValues} from '@/api/jichuxinxi/busdepositvehicle' |
|||
import xuanzekehuAdd from "./xuanzekehuAdd"; |
|||
|
|||
export default { |
|||
name: "xuanzekehu", |
|||
components: { |
|||
Pagination, |
|||
pageye, |
|||
xuanzekehuAdd, |
|||
typeValues |
|||
}, |
|||
data() { |
|||
return { |
|||
createPage: '', |
|||
kehu_xuanze: true, // 列表页面展示 |
|||
kehu_add: false, //添加页面 |
|||
dialogVisible: false, // 弹窗 |
|||
formLabelWidth: '110px', |
|||
isSearchShow: true, |
|||
// searchxianshitit: '显示查询条件', |
|||
btndisabled: false, |
|||
viewState: 1, // 1、列表 2、添加-车辆预定 3、编辑 4、查看 5、订金-定金收取 |
|||
// 查询 ----------- |
|||
depositType: [], // 虚拟订单类型 |
|||
tableKey: 0, |
|||
list: [], |
|||
sids: [], |
|||
total: 1, |
|||
customerTypeList: { |
|||
visitWay: '', // 联络方式 |
|||
visitWayKey: '', |
|||
customerType: ''// 客户类型 |
|||
}, |
|||
visitWay_list: [], |
|||
FormLoading: false, |
|||
listLoading: false, |
|||
listQuery: { |
|||
current: 1, |
|||
size: 20, |
|||
params: { |
|||
orgName: '', |
|||
staffName: '', |
|||
customerName: '', |
|||
virtualDepositType: '', |
|||
createDateStart: '', |
|||
createDateEnd: '', |
|||
}, |
|||
}, |
|||
selectDate: undefined, |
|||
temp: {}, // 添加和编辑 |
|||
visible: true, |
|||
// ------------------------------------ |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'id', |
|||
'roles', |
|||
'rolesIds', |
|||
'departmentId', |
|||
'departmentCode', |
|||
]), |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init() |
|||
this.getShuJUZiDian() |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.getList() |
|||
// this.getType() |
|||
}, |
|||
getShuJUZiDian() { |
|||
typeValues({ |
|||
type: 'visitWay', |
|||
}).then((res) => { |
|||
if (res.code === '200') { |
|||
this.visitWay_list = res.data |
|||
} |
|||
}) |
|||
}, |
|||
handleOpen() { |
|||
if (this.customerTypeList.visitWay !== '' && this.customerTypeList.customerType !== '') { |
|||
this.dialogVisible = false |
|||
const customerTypeList = this.customerTypeList |
|||
this.$refs.addAndUpdate.openCreate(customerTypeList, () => { |
|||
// this.visible = false |
|||
this.customerTypeList = { |
|||
visitWay: '', |
|||
visitWayKey: '', |
|||
customerType: '' |
|||
} |
|||
}) |
|||
} else { |
|||
this.$message({ |
|||
message: '请填写联络方式和客户类型', |
|||
type: 'warning' |
|||
}); |
|||
} |
|||
}, |
|||
getVisitWay(value) { |
|||
let bb = null |
|||
this.visitWay_list.forEach((e) => { |
|||
if (e.dictKey == value) { |
|||
bb = { |
|||
type: 'visitWay', |
|||
name: e.dictValue, |
|||
vaule: e.dictKey, |
|||
sid: e.sid, |
|||
} |
|||
} |
|||
}) |
|||
this.customerTypeList.visitWay = bb.name |
|||
this.customerTypeList.visitWayKey = bb.vaule |
|||
}, |
|||
// 搜索条件效果 |
|||
// clicksearchShow() { |
|||
// this.isSearchShow = !this.isSearchShow |
|||
// if (this.isSearchShow) { |
|||
// this.searchxianshitit = '隐藏查询条件' |
|||
// } else { |
|||
// this.searchxianshitit = '显示查询条件' |
|||
// } |
|||
// }, |
|||
// ----------功能打开开始-------- |
|||
handleCreate() { |
|||
this.kehu_xuanze = false |
|||
this.dialogVisible = true |
|||
// this.$refs['addAndUpdate']. |
|||
// this.kehu_add = true |
|||
}, |
|||
resetState() { |
|||
this.kehu_xuanze = true |
|||
this.kehu_add = false |
|||
this.getList() |
|||
}, |
|||
// 返回 |
|||
handleReturn() { |
|||
this.$emit('doReturn') // 返回到销售订单新增 |
|||
}, |
|||
|
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.current - 1) * this.listQuery.size |
|||
var pageindex = index + 1 + pagestart |
|||
return pageindex |
|||
}, |
|||
// 查询列表信息 |
|||
getList() { |
|||
this.listLoading = true |
|||
pagerList({ |
|||
current: this.listQuery.current, |
|||
size: this.listQuery.size, |
|||
params: { |
|||
userSid: window.sessionStorage.getItem('userSid') |
|||
}, |
|||
}).then((response) => { |
|||
this.listLoading = false |
|||
if ( |
|||
response.code === '200' && |
|||
response.data && |
|||
response.data.total > 0 |
|||
) { |
|||
this.list = response.data.records |
|||
this.total = response.data.total |
|||
} else { |
|||
this.list = [] |
|||
this.total = 0 |
|||
} |
|||
}) |
|||
}, |
|||
// 查询按钮 |
|||
handleFilter() { |
|||
this.listQuery.current = 1 |
|||
this.getList() |
|||
}, |
|||
// 勾选 |
|||
handleSelectionChange(row) { |
|||
const aa = [] |
|||
row.forEach((element) => { |
|||
aa.push(element.sid) |
|||
}) |
|||
this.sids = aa |
|||
console.log('选择sid', this.sids) |
|||
}, |
|||
// 确认选择客户 |
|||
handleConfirm(row) { |
|||
console.log('选择客户row', row) |
|||
this.$emit('handleCustomer', row) |
|||
this.$emit('handleCustomerList', row) |
|||
this.handleReturn() |
|||
}, |
|||
handleUpdate(row) { |
|||
this.$refs.addAndUpdate.openUpdate(row.sid, () => { |
|||
this.visible = false |
|||
}) |
|||
}, |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.searchcon { |
|||
margin-top: 8px; |
|||
} |
|||
|
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue