<template>
|
<el-popover
|
class='pop'
|
:disabled="item.disabled"
|
:offset="250"
|
placement="right"
|
popper-class="no-padding-popover"
|
width="500"
|
trigger="click">
|
<div class="container">
|
<flexbox class="header">
|
<div class="name">联系人</div>
|
<!--<div class="detail"></div>-->
|
<img
|
class="close"
|
src="@/assets/img/task_close.png"
|
@click="hidenView" >
|
</flexbox>
|
<flexbox class="content">
|
<div class="cropper-box">
|
<span class='searchTitle'>查找内容：</span>
|
<el-input class='searchInput' v-model='popSearch' placeholder='请输入联系人名称'></el-input>
|
<el-button type="primary" class='searchBtn' @click='getCustomerTable'>立即查找</el-button>
|
</div>
|
</flexbox>
|
<el-table
|
v-loading="loading"
|
:data="popData"
|
:cell-style="popCellStyle"
|
:header-cell-style="headerCellStyle"
|
height="250"
|
style="margin-right:3px;"
|
highlight-current-row
|
@row-click="handlePopRowClick">
|
<el-table-column
|
v-for="(item, index) in popFieldList"
|
:key="index"
|
:prop="item.field"
|
:label="item.value"
|
align="center"
|
header-align="center"
|
show-overflow-tooltip/>
|
</el-table>
|
<div class="p-contianer">
|
<el-pagination
|
:current-page="currentPopPage"
|
:page-sizes="pagePopSizes"
|
:page-size.sync="pagePopSize"
|
:total="totalPop"
|
class="p-bar"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handlePopSizeChange"
|
@current-change="handlePopCurrentChange"/>
|
</div>
|
</div>
|
<el-input slot="reference" :disabled='true' v-model='contacterChosed' placeholder='请点击选择联系人'></el-input>
|
</el-popover>
|
</template>
|
<script type="text/javascript">
|
import { GetPersonalContacterList } from '@/api/customermanagement/contacts'
|
export default {
|
name: 'XhRelativeInputS', // 新建 XhRelativeInput
|
components: {},
|
props: {
|
item: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
customerId: {
|
type: String,
|
default: () => {
|
return ''
|
}
|
}
|
},
|
data () {
|
return {
|
loading: false,
|
popData: [],
|
currentPopPage: 1,
|
pagePopSize: 15,
|
pagePopSizes: [15, 30, 60, 100],
|
contacterChosed: '',
|
popSearch: '',
|
totalPop: 0
|
}
|
},
|
computed: {
|
popFieldList () {
|
if (this.item && this.item.field === 'ContacterId') {
|
return [
|
{ field: 'ContacterNumber', value: '联系人编号', width: '20' },
|
{ field: 'CustomerName', value: '联系人名称', width: '20' },
|
{ field: 'RealName', value: '联系人真实姓名', width: '10' },
|
{ field: 'Sex', value: '性别', width: '10' },
|
{ field: 'MobilePhone', value: '联系人方式', width: '30' },
|
{ field: 'JobPosition', value: '联系人职位', width: '10' },
|
{ field: 'OwerUserName', value: '负责人', width: '10' }
|
]
|
}
|
}
|
},
|
watch: {
|
},
|
mounted () {
|
if (this.item && this.item.field === 'ContacterId') {
|
this.contacterChosed = this.item.chosedCusName ? this.item.chosedCusName : ''
|
this.getCustomerTable()
|
}
|
},
|
methods: {
|
/** 通过回调控制style */
|
popCellStyle ({ row, column, rowIndex, columnIndex }) {
|
return { fontSize: '12px', textAlign: 'center', cursor: 'pointer' }
|
},
|
headerCellStyle ({ row, column, rowIndex, columnIndex }) {
|
return { fontSize: '12px', textAlign: 'center' }
|
},
|
handlePopSizeChange (newSize) {
|
this.pagePopSizes = newSize
|
this.getCustomerTable()
|
},
|
handlePopCurrentChange (newPage) {
|
this.currentPopPage = newPage
|
this.getCustomerTable()
|
},
|
getCustomerTable () {
|
let params = {
|
Name: this.popSearch,
|
PageIndex: this.currentPopPage,
|
PageSize: this.pagePopSize,
|
CustomerId: this.customerId
|
}
|
if (this.item && this.item.field === 'ContacterId') {
|
GetPersonalContacterList(params).then(res => {
|
if (res.data.ErrorCode === 200 && res.data.Result !== 0) {
|
this.popData = res.data.Result.List || []
|
this.totalPop = res.data.Result.Count
|
} else {
|
this.$message.error(res.data.Message)
|
this.loading = false
|
}
|
})
|
}
|
},
|
hidenView () {
|
document.querySelector('#app').click()
|
this.$emit('close', this.$el, this.data)
|
},
|
// 当某一行被点击时会触发该事件
|
handlePopRowClick (row, column, event) {
|
this.$emit('value-change', {index: this.item.field,
|
value: row.Id})
|
this.contacterChosed = row.RealName
|
this.hidenView()
|
}
|
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.container {
|
position: relative;
|
}
|
|
.header {
|
height: 40px;
|
padding: 0 10px;
|
flex-shrink: 0;
|
.name {
|
font-size: 13px;
|
padding: 0 10px;
|
color: #333;
|
}
|
.detail {
|
font-size: 12px;
|
padding: 0 10px;
|
color: #aaaaaa;
|
border-left: 1px solid #aaaaaa;
|
}
|
.close {
|
position: absolute;
|
width: 40px;
|
height: 40px;
|
top: 0;
|
right: 10px;
|
padding: 10px;
|
}
|
}
|
.content{
|
.cropper-box{
|
display:flex;
|
flex-direction: row;
|
align-items: center;
|
padding: 0 20px;
|
.searchTitle{
|
font-size: 14px;
|
width: 124px;
|
color: #333;
|
}
|
.searchInput{
|
margin-right: 20px;
|
}
|
}
|
}
|
.p-contianer .p-bar{
|
margin: 5px 0 0 14px;
|
}
|
.pop /deep/ .el-input.is-disabled .el-input__inner{
|
cursor: pointer;
|
}
|
</style>
|
