<template>
|
<div class="cr-contianer">
|
<div class="title" v-show="!isProduct">{{ getTitle() }}
|
<img
|
class="t-close"
|
src="@/assets/img/close.png"
|
@click="closeView" >
|
</div>
|
<div style="height: 100%;position: relative;">
|
<div
|
v-if="crmType === 'product'"
|
class="cr-body-side">
|
<el-tree
|
ref="tree"
|
:data="treeData"
|
:expand-on-click-node="false"
|
node-key="TypeName"
|
:props="defaultProps"
|
highlight-current
|
@node-click="changeDepClick">
|
<flexbox
|
slot-scope="{ node, data }"
|
class="node-data">
|
<el-tooltip :content="data.TypeName" placement="top">
|
<div class="node-label">{{ data.TypeName }}</div>
|
</el-tooltip>
|
</flexbox>
|
</el-tree>
|
<!--<div
|
v-for="(item, index) in leftSides"
|
:key="index"
|
:class="leftType===item.type? 'side-item-select' : 'side-item-default'"
|
class="side-item"
|
@click="sideClick(item)">{{ item.name }}</div>-->
|
</div>
|
<div :style="{ 'padding-left': crmType === 'product' ? '220px' : '0'}">
|
<crm-relative-table
|
v-for="(item, index) in leftSides"
|
v-show="item.type === leftType"
|
:isProduct="isProduct"
|
:key="index"
|
:ref="'crm'+item.type"
|
:show="show && item.type === leftType"
|
:radio="radio"
|
:crm-type="item.type"
|
:selected-data="currentSelectedData"
|
:action="action"
|
@closeView="closeView"
|
@changeCheckout="checkCrmTypeInfos"/>
|
|
<!--<div class="handle-bar">
|
<el-button @click="closeView">取消</el-button>
|
<el-button
|
type="primary"
|
@click="confirmClick">确定</el-button>
|
</div>-->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script type="text/javascript">
|
import { GetAutoProductTypeList } from '@/api/customermanagement/product'
|
import CrmRelativeTable from './CrmRelativeTable'
|
import { objDeepCopy } from '@/utils'
|
|
export default {
|
name: 'CrmRelatieve', // 相关
|
components: {
|
CrmRelativeTable
|
},
|
props: {
|
/** 多选框 只能选一个 */
|
radio: {
|
type: Boolean,
|
default: true
|
},
|
isProduct: {
|
type: Boolean,
|
default: true
|
},
|
/** 没有值就是全部类型 有值就是当个类型 */
|
crmType: {
|
type: String,
|
default: ''
|
},
|
/** 需要展示哪些类型 默认关键字数组 */
|
showTypes: {
|
type: Array,
|
default: () => {
|
return [
|
'customer',
|
'contacts',
|
'leads',
|
'business',
|
'contract',
|
'product'
|
]
|
}
|
},
|
/** 已选信息 */
|
selectedData: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
/** true 的时候 发请求 */
|
show: {
|
type: Boolean,
|
default: true
|
},
|
/**
|
* default 默认 condition 固定条件筛选 moduleType 下的
|
* relative: 相关 添加
|
*/
|
action: {
|
type: Object,
|
default: () => {
|
return {
|
type: 'default',
|
data: {}
|
}
|
}
|
}
|
},
|
data () {
|
return {
|
leftType: 'customer',
|
leftSides: [],
|
treeData: [],
|
/** 各类型选择的值 */
|
currentSelectedData: {},
|
defaultProps: {
|
children: 'ProductResultList',
|
label: 'TypeName'
|
}
|
}
|
},
|
computed: {},
|
watch: {
|
selectedData: function (data) {
|
this.currentSelectedData = objDeepCopy(data)
|
},
|
// 刷新标记
|
show (val) {
|
if (val) {
|
this.currentSelectedData = objDeepCopy(this.selectedData)
|
}
|
}
|
},
|
mounted () {
|
var leftItems = {
|
customer: {
|
name: '客户',
|
type: 'customer'
|
},
|
contacts: {
|
name: '联系人',
|
type: 'contacts'
|
},
|
leads: {
|
name: '线索',
|
type: 'leads'
|
},
|
business: {
|
name: '商机',
|
type: 'business'
|
},
|
contract: {
|
name: '合同',
|
type: 'contract'
|
},
|
product: {
|
name: '产品',
|
type: 'product'
|
}
|
}
|
if (this.crmType) {
|
this.leftType = this.crmType
|
this.leftSides.push(leftItems[this.crmType])
|
} else {
|
for (let index = 0; index < this.showTypes.length; index++) {
|
const element = this.showTypes[index]
|
this.leftSides.push(leftItems[element])
|
}
|
}
|
this.currentSelectedData = objDeepCopy(this.selectedData)
|
this.getTreeList()
|
},
|
methods: {
|
/**
|
* 刷新列表
|
*/
|
refreshList () {
|
this.$refs['crm' + this.crmType][0].refreshList()
|
},
|
getTreeList () {
|
GetAutoProductTypeList().then(res => {
|
console.log(res)
|
if (res.data.ErrorCode === 200) {
|
this.treeData = res.data.Result || []
|
}
|
})
|
},
|
changeDepClick (data) {
|
console.log(data)
|
this.$refs['crm' + this.crmType][0].getFieldList(data.ParameterLink)
|
},
|
sideClick (item) {
|
this.leftType = item.type
|
},
|
clearAll () {
|
if (this.crmType) {
|
this.$refs['crm' + this.crmType][0].clearAll()
|
}
|
},
|
// 当用户手动勾选全选 Checkbox 时触发的事件
|
selectAll () {},
|
// 关闭操作
|
closeView () {
|
this.$emit('close')
|
},
|
checkCrmTypeInfos (data) {
|
this.currentSelectedData[data.type] = data.data
|
if (this.crmType) {
|
// 以单类型传值
|
this.$emit('changeVal', this.currentSelectedData[this.crmType])
|
} else {
|
this.$emit('changeVal', this.currentSelectedData)
|
}
|
|
this.$emit('close')
|
},
|
// 根据类型获取标题展示名称
|
getTitle () {
|
if (this.crmType === 'leads') {
|
return '关联线索'
|
} else if (this.crmType === 'customer') {
|
return '关联客户'
|
} else if (this.crmType === 'contacts') {
|
return '关联联系人'
|
} else if (this.crmType === 'business') {
|
return '关联商机'
|
} else if (this.crmType === 'product') {
|
return '关联产品'
|
} else if (this.crmType === 'contract') {
|
return '关联合同'
|
} else {
|
return '关联业务'
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.cr-contianer {
|
// height: 600px;
|
position: relative;
|
// padding: 50px 0 50px 0;
|
}
|
|
.title {
|
padding: 0 30px;
|
font-size: 16px;
|
line-height: 50px;
|
font-weight: 550;
|
color: #333333;
|
height: 50px;
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
z-index: 3;
|
// border-bottom: 1px solid #e6e6e6;
|
.t-close{
|
position: absolute;
|
right: 30px;
|
top: 12px;
|
cursor: pointer;
|
}
|
}
|
|
.handle-bar {
|
height: 50px;
|
// position: absolute;
|
// bottom: 0;
|
// left: 0;
|
// right: 40%;
|
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;
|
}
|
}
|
|
.cr-body-side {
|
flex-shrink: 0;
|
z-index: 3;
|
position: absolute;
|
left: 0;
|
top: 0;
|
bottom: 0;
|
width: 220px;
|
font-size: 12px;
|
background-color: #F8F8F8;
|
border-right: 1px solid #e6e6e6;
|
height: 650px;
|
overflow: auto;
|
/deep/ .el-tree{
|
background-color: #F8F8F8;
|
}
|
.side-item {
|
height: 35px;
|
line-height: 35px;
|
padding: 0 20px;
|
cursor: pointer;
|
}
|
}
|
|
.side-item-default {
|
color: #333;
|
}
|
|
.side-item-select {
|
color: #409eff;
|
background-color: #ecf5ff;
|
}
|
.el-dialog /deep/ .el-dialog__headerbtn{
|
padding: 10px;
|
}
|
// tree
|
.el-tree /deep/ .el-tree-node__content {
|
height: 30px;
|
&:hover{
|
color: #4D88FF;
|
background-color: #EBF1FF;
|
}
|
.node-data {
|
.node-label {
|
margin-right: 8px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
width: 150px;
|
}
|
.node-label-set {
|
display: none;
|
}
|
}
|
|
.node-data:hover .node-label-set {
|
display: block;
|
}
|
}
|
.el-tree /deep/ .el-tree-node.is-current > .el-tree-node__content {
|
background-color: #4D88FF;
|
color: #fff;
|
// border-right: 2px solid #4D88FF;
|
.node-label-set {
|
display: block;
|
}
|
}
|
.system-view-nav /deep/ .el-tree-node > .el-tree-node__children {
|
overflow: visible;
|
}
|
.system-view-nav /deep/ .el-tree > .el-tree-node {
|
min-width: 100%;
|
display: inline-block !important;
|
}
|
</style>
|
