<template>
|
<div class='contacter'>
|
<c-r-m-list-head
|
ref="listHead"
|
title="客户联系人"
|
main-title="客户管理" />
|
|
<c-r-m-table-head
|
ref="crmTableHead"
|
:crm-type="crmType"
|
:fieldList='fieldList'
|
@exportFile="exportFile"
|
@importFile='importFile'
|
@filter="handleFilter"
|
@handle="handleHandle"
|
@on-handle="listHeadHandle"
|
@scene="handleScene"
|
@queryList='queryList'/>
|
|
<el-card class="el-card">
|
<el-table
|
v-loading="loading"
|
id="crm-table"
|
:data="list"
|
:height="tableHeight"
|
:cell-style="cellStyle"
|
class="n-table--border"
|
border
|
highlight-current-row
|
style="width: 100%; z-index: 0;"
|
@row-click="handleRowClick"
|
@sort-change="sortChange"
|
@header-dragend="handleHeaderDragend"
|
@selection-change="handleSelectionChange">
|
<el-table-column
|
show-overflow-tooltip
|
type="selection"
|
align="center"/>
|
<el-table-column
|
v-for="(item, index) in fieldList"
|
:key="index"
|
:fixed="index==0"
|
:prop="item.field"
|
:label="item.value"
|
:width="item.width"
|
:formatter="fieldFormatter"
|
sortable="custom"
|
show-overflow-tooltip>
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">{{ scope.column.label }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="operation">
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">操作</div>
|
</template>
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click='editList(scope.row)'>编辑 |</el-button>
|
<el-button type="text" size="small" @click='deleteCustomer(scope.row.Id)'>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="p-contianer">
|
<el-pagination
|
:current-page="currentPage"
|
:page-sizes="pageSizes"
|
:page-size.sync="pageSize"
|
:total="total"
|
class="p-bar"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"/>
|
</div>
|
</el-card>
|
<!-- 导入导出页面 -->
|
<c-r-m-import
|
:show="showCRMImport"
|
:crm-type="crmType"
|
@close="showCRMImport=false"
|
@queryList='queryList'/>
|
<c-r-m-export
|
:show="showCRMExport"
|
:crm-type="crmType"
|
:search="search"
|
:filter-obj="filterObj"
|
:head-obj="headObj"
|
:is-seas="false"
|
:export-params="exportParams"
|
@close="showCRMExport=false"
|
@queryList='queryList'/>
|
<!-- 编辑页面 -->
|
<c-r-m-create-view
|
v-if="isCreate"
|
:action="{type: 'update', id: editData.Id, data: editData}"
|
:crm-type="crmType"
|
@save-success="listHeadHandle"
|
@hiden-view="isCreate=false"/>
|
<!-- 相关详情页面 -->
|
<c-r-m-all-detail
|
:visible.sync="showDview"
|
:crm-type="rowType"
|
:id="rowID"
|
class="d-view"
|
@handle="handleHandle"/>
|
<fields-set
|
:crm-type="crmType"
|
:dialog-visible.sync="showFieldSet"
|
@set-success="setSave"/>
|
</div>
|
</template>
|
|
<script>
|
import CRMAllDetail from '@/views/clients/components/CRMAllDetail'
|
import CRMCreateView from '../components/CRMCreateView'
|
import table from '../mixins/table'
|
import CRMImport from '../components/CRMImport'
|
import CRMExport from '../components/CRMExport'
|
import { DeleteContacter } from '@/api/customermanagement/contacts'
|
// import { UploadFileAsync } from '@/api/common'
|
export default {
|
/** 客户管理 的 联系人列表 */
|
name: 'ContactsIndex',
|
components: {
|
CRMAllDetail,
|
CRMCreateView,
|
CRMImport,
|
CRMExport
|
},
|
mixins: [table],
|
computed: {
|
},
|
data () {
|
return {
|
crmType: 'contacts',
|
loading: false,
|
choosedScene: '2',
|
// 导入
|
showCRMImport: false,
|
// 导出
|
showCRMExport: false,
|
// 导出选中参数
|
exportParams: {},
|
fieldList: [
|
{ field: 'RealName', value: '联系人姓名', width: '150' },
|
{ field: 'CustomerName', value: '客户名称', width: '200' },
|
{ field: 'JobPosition', value: '职务' },
|
{ field: 'MobilePhone', value: '手机号' },
|
{ field: 'OfficePhone', value: '座机号' },
|
{ field: 'Email', value: '邮箱' },
|
{ field: 'OwerUserName', value: '销售负责人' },
|
{ field: 'CreateTime', value: '创建时间' }
|
]
|
|
}
|
},
|
mounted () {
|
},
|
methods: {
|
/** 通过回调控制style */
|
cellStyle ({ row, column, rowIndex, columnIndex }) {
|
if (column.property === 'RealName' || column.property === 'CustomerName') {
|
return { color: '#4D88FF', cursor: 'pointer' }
|
} else {
|
return ''
|
}
|
},
|
queryList (data) {
|
this.headObj = data
|
this.getList(data)
|
},
|
/** 筛选操作 */
|
handleFilter (data) {
|
console.log(data)
|
this.filterObj = data
|
var offsetHei = document.documentElement.clientHeight
|
var removeHeight = Object.keys(this.filterObj).length > 0 ? 310 : 240
|
this.tableHeight = offsetHei - removeHeight
|
this.currentPage = 1
|
this.getList()
|
},
|
deleteCustomer (id) {
|
this.$confirm('确定删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
DeleteContacter([{'Id': id}]).then(res => {
|
if (res.data.ErrorCode === 200) {
|
this.$message.success(res.data.Message)
|
this.getList()
|
} else {
|
this.$message.error(res.data.Message)
|
}
|
})
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
})
|
},
|
exportFile () {
|
this.showCRMExport = true
|
},
|
importFile () {
|
this.showCRMImport = true
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../styles/table.scss';
|
.contacter{}
|
.new-dialog-title {
|
padding-left: 10px;
|
margin-bottom: 3px;
|
border-left: 2px solid #4D88FF;
|
}
|
.new-conDialog-form {
|
height: 47vh;
|
overflow-y: auto;
|
padding: 20px;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.new-conDialog-form /deep/ .el-form-item {
|
// width: 50%;
|
margin: 0;
|
padding-bottom: 10px;
|
}
|
.new-conDialog-form /deep/ .el-form-item .el-form-item__label {
|
line-height: normal;
|
font-size: 13px;
|
color: #333333;
|
position: relative;
|
padding-bottom: 8px;
|
}
|
.new-conDialog-form /deep/ .crm-create-item.el-form-item .el-form-item__content {
|
width: 70%;
|
}
|
.new-conDialog-form /deep/ .crm-create-block-item.el-form-item .el-form-item__content {
|
width: 90%;
|
}
|
.new-conDialog-form /deep/ .crm-create-item.el-form-item .el-form-item__content .el-input.is-disabled .el-input__inner{
|
cursor: pointer;
|
}
|
.crm-create-item {
|
flex: 0 0 45%;
|
flex-shrink: 0;
|
// overflow: hidden;
|
padding-bottom: 10px;
|
}
|
|
// 占用一整行
|
.crm-create-block-item {
|
flex: 0 0 100%;
|
flex-shrink: 0;
|
padding-bottom: 10px;
|
}
|
.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;
|
}
|
</style>
|
