<template>
|
<div class="cr-body-content">
|
<flexbox class="content-header">
|
<!--<Xh-inputSelect v-if="isProduct" :isProduct="isProduct" @getName="getName" :crm-type="crmType" />-->
|
<el-input
|
placeholder='请输入你要搜索的内容'
|
v-model="searchContent"
|
@keyup.enter.native="searchInput"
|
class="search-container">
|
</el-input>
|
<el-button class="searchBtn" type="primary" @click="searchInput">搜索</el-button>
|
<!--<el-button
|
class="create-button"
|
type="primary"
|
@click="isCreate=true">新建</el-button> -->
|
</flexbox>
|
<div class='content-table'>
|
<el-table
|
v-loading="loading"
|
id="crm-table"
|
ref="relativeTable"
|
:data="list"
|
:height="550"
|
:cell-style="cellStyle"
|
class="n-table--border"
|
border
|
highlight-current-row
|
style="width: 100%"
|
@selection-change="handleSelectionChange"
|
@row-click="handleRowClick">
|
<el-table-column
|
show-overflow-tooltip
|
type="selection"/>
|
<el-table-column
|
v-for="(item, index) in fieldList"
|
:key="index"
|
:prop="item.field"
|
:label="item.name"
|
:formatter="fieldFormatter"
|
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/>
|
</el-table>
|
</div>
|
<div class="p-contianer" v-show='total>0'>
|
<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>
|
<div class="handle-bar">
|
<el-button @click="closeView">取消</el-button>
|
<el-button
|
type="primary"
|
@click="confirmClick">确定</el-button>
|
</div>
|
<c-r-m-create-view
|
v-if="isCreate"
|
:crm-type="crmType"
|
@save-success="getList"
|
@hiden-view="isCreate=false"/>
|
</div>
|
</template>
|
<script type="text/javascript">
|
// import crmTypeModel from '@/views/clients/model/crmTypeModel'
|
import { GetSalesChanceList } from '@/api/customermanagement/business'
|
import { XhInputSelect } from '@/components/CreateCom'
|
import { GetAutoProductListAsync } from '@/api/customermanagement/product'
|
|
export default {
|
name: 'CrmRelativeTable', // 相关模块CRMCell
|
components: {
|
XhInputSelect,
|
CRMCreateView: () =>
|
import('@/views/clients/components/CRMCreateView')
|
},
|
props: {
|
show: {
|
type: Boolean,
|
default: false
|
},
|
/** 多选框 只能选一个 */
|
radio: {
|
type: Boolean,
|
default: true
|
},
|
isProduct: {
|
type: Boolean,
|
default: true
|
},
|
/** 没有值就是全部类型 有值就是当个类型 */
|
crmType: {
|
type: String,
|
default: ''
|
},
|
/** 已选信息 */
|
selectedData: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
/**
|
* default 默认 condition 固定条件筛选
|
* relative: 相关 添加
|
*/
|
action: {
|
type: Object,
|
default: () => {
|
return {
|
type: 'default',
|
data: {}
|
}
|
}
|
}
|
},
|
data () {
|
return {
|
loading: false, // 加载进度
|
searchContent: '', // 输入内容
|
isCreate: false, // 控制新建
|
scenesList: [], // 场景信息
|
sceneInfo: null,
|
|
list: [], // 表数据
|
fieldList: [], // 表头数据
|
currentPage: 1, // 当前页数
|
total: 0,
|
pageSize: 10,
|
pageSizes: [10, 30, 60, 100],
|
otherItems: [],
|
selectedItem: [] // 勾选的数据 点击确定 传递给父组件
|
}
|
},
|
computed: {
|
// 展示相关效果 去除场景
|
isRelationShow () {
|
return this.action.type === 'condition'
|
}
|
},
|
watch: {
|
crmType: function (newValue, oldValue) {
|
if (newValue !== oldValue) {
|
this.fieldList = []
|
this.getFieldList()
|
}
|
},
|
action: function (val) {
|
console.log(this.action, val)
|
if (this.action !== val) {
|
this.sceneInfo = null
|
this.list = [] // 表数据
|
this.fieldList = [] // 表头数据
|
this.currentPage = 1 // 当前页数
|
this.pageSize = 10
|
if (!this.isRelationShow) {
|
this.getSceneList()
|
} else {
|
this.getFieldList()
|
}
|
}
|
},
|
show: {
|
handler (val) {
|
if (val && this.fieldList.length === 0) {
|
// 相关列表展示时不需要场景 直接获取展示字段
|
if (!this.isRelationShow) {
|
this.getSceneList()
|
} else {
|
this.getFieldList()
|
}
|
}
|
},
|
deep: true,
|
immediate: true
|
},
|
// 选择
|
selectedData: function () {
|
// this.checkItemsWithSelectedData()
|
}
|
},
|
mounted () {
|
},
|
methods: {
|
/**
|
* 刷新列表
|
*/
|
refreshList () {
|
this.currentPage = 1
|
this.pageSize = 10
|
this.getList()
|
},
|
getName (data) {
|
console.log('this is data of input-select: ', data)
|
// this.formInline.user = data.name
|
// this.inputSelectData = data
|
},
|
cellStyle ({ row, column, rowIndex, columnIndex }) {
|
return { textAlign: 'left' }
|
},
|
getSceneList () {
|
// this.loading = true
|
// crmSceneIndex({
|
// type: crmTypeModel[this.crmType]
|
// })
|
// .then(res => {
|
// var defaultScene = res.data.filter(function (item, index) {
|
// return item.isDefault === 1
|
// })
|
// this.scenesList = res.data
|
// if (defaultScene && defaultScene.length > 0) {
|
// this.sceneInfo = defaultScene[0]
|
// }
|
// if (this.scenesList.length === 0) {
|
// this.scenesList.push({ sceneId: '', name: '全部' })
|
// this.sceneInfo = this.scenesList[0]
|
// }
|
// this.getFieldList()
|
// })
|
// .catch(() => {
|
// this.loading = false
|
// })
|
},
|
/** 获取字段 */
|
getFieldList (data) {
|
if (this.fieldList && this.fieldList.length === 0) {
|
this.fieldList = this.getDefaultField()
|
}
|
// 获取好字段开始请求数据
|
this.getList(data)
|
},
|
/** 获取列表请求 */
|
getDefaultField () {
|
console.log(this.crmType)
|
if (this.crmType === 'leads') {
|
return [
|
{ name: '线索名称', field: 'name', formType: 'leads' },
|
{ name: '下次联系时间', field: 'nextTime', formType: 'datetime' },
|
{ name: '最后跟进时间', field: 'updateTime', formType: 'datetime' },
|
{ name: '创建时间 ', field: 'createTime', formType: 'datetime' }
|
]
|
} else if (this.crmType === 'customer') {
|
return [
|
{ name: '客户名称', field: 'CustomerName', formType: 'customer' },
|
{ name: '下次联系时间', field: 'nextTime', formType: 'datetime' },
|
{ name: '最后跟进时间', field: 'updateTime', formType: 'datetime' },
|
{ name: '创建时间 ', field: 'createTime', formType: 'datetime' }
|
]
|
} else if (this.crmType === 'contacts') {
|
return [
|
{ name: '姓名', field: 'name', formType: 'contacts' },
|
{ name: '手机', field: 'mobile', formType: 'mobile' },
|
{ name: '电话', field: 'telephone', formType: 'text' },
|
{ name: '是否关键决策人', field: '是否关键决策人', formType: 'text' },
|
{ name: '职务', field: 'post', formType: 'text' }
|
]
|
} else if (this.crmType === 'business') {
|
return [
|
{ field: 'ChanceName', name: '商机名称', formType: 'text' },
|
{ field: 'CustomerName', name: '客户名称', formType: 'text' },
|
{ field: 'ContacterName', name: '联系人', formType: 'text' },
|
{ field: 'SalesChanceStage', name: '销售阶段', formType: 'text' },
|
{ field: 'ExpectedDate', name: '预期成交日期', formType: 'text' },
|
{ field: 'ExpectedAmount', name: '商机金额/元', formType: 'text' },
|
{ field: 'OwerName', name: '销售负责人', formType: 'text' }
|
]
|
} else if (this.crmType === 'contract') {
|
return [
|
{ name: '合同编号', field: 'num', formType: 'text' },
|
{
|
name: '合同名称',
|
field: this.isRelationShow ? 'contractName' : 'name',
|
formType: 'text'
|
},
|
{ name: '客户名称', field: 'customerName', formType: 'text' },
|
{ name: '合同金额', field: 'money', formType: 'text' },
|
{ name: '开始日期', field: 'startTime', formType: 'text' },
|
{ name: '结束日期', field: 'endTime', formType: 'text' }
|
]
|
} else if (this.crmType === 'product') {
|
return [
|
{ name: '产品线', field: 'ProductLine', formType: 'text' },
|
{ name: '产品类型', field: 'ProductType', formType: 'text' },
|
{ name: 'SKU值', field: 'SKU', formType: 'text' },
|
{ name: '产品名称', field: 'ProductName', formType: 'text' },
|
{ name: '产品描述', field: 'ProductDesc', formType: 'text' },
|
{ name: '产品更新时间', field: 'LastUpdateTime', formType: 'text' },
|
{ name: '产品是否在线', field: 'Status', formType: 'text' },
|
{ name: '市场参考价(￥)', field: 'ETP', formType: 'text' },
|
{ name: '建议经销商转售价(￥)', field: 'RTP', formType: 'text' }
|
]
|
}
|
},
|
/** 获取列表数据 */
|
getList (data) {
|
console.log(data)
|
this.loading = true
|
let crmIndexRequest
|
crmIndexRequest = this.getIndexRequest()
|
// const params = { search: this.searchContent }
|
let params
|
// 注入场景
|
if (this.sceneInfo) {
|
params.sceneId = this.sceneInfo.sceneId
|
}
|
// 注入关联ID
|
if (this.isRelationShow) {
|
// this.action.data.moduleType 下的 this.crmType 的列表
|
if (this.action.data.moduleType) {
|
crmIndexRequest = {
|
customer: {
|
business: GetSalesChanceList
|
// contacts: crmCustomerQueryContacts,
|
// contract: crmCustomerQueryContract
|
},
|
business: {
|
business: GetSalesChanceList
|
// contacts: crmCustomerQueryContacts,
|
// contract: crmCustomerQueryContract
|
}
|
}[this.action.data.moduleType][this.crmType]
|
params = {
|
'PageIndex': 1,
|
'PageSize': 20,
|
'SelectOwnedType': 0,
|
'Name': this.searchContent,
|
'SalesChanceType': '',
|
'CreateStartTime': '',
|
'CreateEndTime': ''
|
}
|
// params[this.action.data.moduleType + 'Id'] = this.action.data[
|
// this.action.data.moduleType + 'Id'
|
// ]
|
if (this.action.data.params) {
|
for (const field in this.action.data.params) {
|
params[field] = this.action.data.params[field]
|
}
|
}
|
}
|
} else {
|
params = {
|
PageIndex: this.currentPage,
|
PageSize: this.pageSize,
|
TypeName: data || '',
|
Name: this.searchContent
|
}
|
}
|
crmIndexRequest(params)
|
.then(res => {
|
this.list = res.data.Result.List || []
|
console.log(this.list)
|
/**
|
* 如果已选择的有数据
|
*/
|
|
// if (this.selectedData[this.crmType]) {
|
// this.checkItemsWithSelectedData()
|
// } else {
|
// this.list = res.data.Result.List
|
// }
|
|
// this.total = Math.ceil(res.data.totalRow / 10)
|
this.total = res.data.Result.Count
|
this.loading = false
|
this.$forceUpdate()
|
})
|
.catch(() => {
|
this.loading = false
|
})
|
},
|
// 标记选择数据
|
checkItemsWithSelectedData () {
|
const selectedArray = this.selectedData[this.crmType].map(item => {
|
item.has = false
|
return item
|
})
|
|
const selectedRows = []
|
this.otherItems = []
|
|
this.list.forEach((item, index) => {
|
selectedArray.forEach((selectedItem, selectedIndex) => {
|
if (item[this.crmType + 'Id'] === selectedItem[this.crmType + 'Id']) {
|
selectedItem.has = true
|
selectedRows.push(item)
|
}
|
})
|
})
|
|
selectedArray.forEach((selectedItem, selectedIndex) => {
|
if (!selectedItem.has) {
|
this.otherItems.push(selectedItem)
|
}
|
})
|
|
this.$nextTick(() => {
|
this.$refs.relativeTable.clearSelection()
|
selectedRows.forEach(row => {
|
this.$refs.relativeTable.toggleRowSelection(row, true)
|
})
|
})
|
},
|
/** 获取列表请求 */
|
getIndexRequest () {
|
// if (this.crmType === 'leads') {
|
// return crmLeadsIndex
|
// } else if (this.crmType === 'customer') {
|
// return crmCustomerIndex
|
// } else if (this.crmType === 'contacts') {
|
// return crmContactsIndex
|
// } else if (this.crmType === 'business') {
|
// return crmBusinessIndex
|
// } else if (this.crmType === 'contract') {
|
// return crmContractIndex
|
// } else
|
if (this.crmType === 'product') {
|
return GetAutoProductListAsync
|
}
|
},
|
// 场景选择
|
handleTypeDrop (command) {
|
this.sceneInfo = command
|
this.getList()
|
},
|
/** 列表操作 */
|
// 当某一行被点击时会触发该事件
|
handleRowClick (row, column, event) {},
|
fieldFormatter (row, column) {
|
if (column.property === 'Status') {
|
switch (row[column.property]) {
|
case true:
|
row[column.property] = '是'
|
break
|
case false:
|
row[column.property] = '否'
|
break
|
}
|
}
|
return row[column.property] || '--'
|
},
|
// 当选择项发生变化时会触发该事件
|
handleSelectionChange (val) {
|
if (this.radio) {
|
// this.$refs.relativeTable.clearSelection();
|
val.forEach((row, index) => {
|
if (index === val.length - 1) return
|
this.$refs.relativeTable.toggleRowSelection(row, false)
|
})
|
if (val.length === 0) {
|
this.selectedItem = []
|
} else {
|
this.selectedItem = val.length === 1 ? val : [val[val.length - 1]]
|
}
|
} else {
|
this.selectedItem = this.otherItems.concat(val)
|
}
|
},
|
closeView () {
|
this.$emit('closeView')
|
},
|
// 确定选择
|
confirmClick () {
|
console.log(this.crmType)
|
this.$emit('changeCheckout', {
|
data: this.selectedItem,
|
type: this.crmType
|
})
|
},
|
clearAll () {
|
this.$refs.relativeTable.clearSelection()
|
},
|
// 当用户手动勾选全选 Checkbox 时触发的事件
|
selectAll () {},
|
// 进行搜索操作
|
searchInput () {
|
this.currentPage = 1
|
this.pageSize = 10
|
this.getFieldList()
|
// this.getList()
|
},
|
handleSizeChange (newSize) {
|
this.pageSize = newSize
|
this.getList()
|
},
|
handleCurrentChange (newPage) {
|
this.currentPage = newPage
|
this.getList()
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import '../../views/clients/styles/table.scss';
|
.cr-body-content {
|
position: relative;
|
background-color: white;
|
}
|
|
.content-header {
|
position: relative;
|
padding: 10px 30px;
|
.search-container {
|
width: 224px;
|
}
|
.search-container /deep/ .el-input__inner{
|
height: 32px;
|
}
|
.search-container /deep/ .el-input-group__append{
|
background-color: #4D88FF;
|
border-radius: 0px 3px 3px 0px;
|
color: #fff;
|
border: 1px solid #4D88FF;
|
}
|
.create-button {
|
position: absolute;
|
right: 30px;
|
top: 15px;
|
width: 97px;
|
height: 32px;
|
background: #FF8800;
|
border-radius: 3px;
|
border: 1px solid #FF8800;
|
}
|
}
|
.content-table{
|
padding: 0 30px;
|
margin-bottom: 20px;
|
}
|
//表尾 上一页按钮
|
.table-footer {
|
padding: 0px 30px;
|
}
|
|
.el-table /deep/ thead th {
|
font-weight: 400;
|
font-size: 12px;
|
}
|
|
.el-table /deep/ tbody tr td {
|
font-size: 12px;
|
}
|
.el-table /deep/ thead th,
|
thead td {
|
padding: 0;
|
border-right: 1px solid #F7FAFF;
|
}
|
|
// .el-table /deep/ thead .el-checkbox {
|
// display: none;
|
// }
|
|
body .el-table th.gutter {
|
display: table-cell !important;
|
}
|
|
.el-table /deep/ .el-table__body-wrapper {
|
height: calc(100% - 48px) !important;
|
}
|
.searchBtn{
|
width: 58px;
|
height: 32px;
|
margin-left: 24px;
|
}
|
.handle-bar {
|
height: 50px;
|
z-index: 2;
|
display: flex;
|
align-items: center;
|
align-content: center;
|
justify-content: center;
|
width: 100%;
|
button {
|
float: right;
|
margin-top: 10px;
|
margin-right: 10px;
|
}
|
}
|
</style>
|
