<template>
|
<div class='filterBox'>
|
<flexbox
|
class="th-container">
|
<el-row :gutter="24" class="create-form-inline">
|
<el-col :xs="{span: 5}" :sm="{span: 5}" :md="{span: 5}" :lg="{span: 4}" :xl="{span: 4}">
|
<Xh-inputSelect ref='inputSelect' :arrayList="arrayList" :isProduct="false" @getName="getName" :crm-type="crmType" />
|
</el-col>
|
<el-col :xs="{span: 5}" :sm="{span: 5}" :md="{span: 5}" :lg="{span: 4}" :xl="{span: 4}" v-if="crmType === 'sealContract' || crmType === 'sealOffers' || crmType === 'businessChances' || crmType === 'businessContract' || crmType === 'businessCustomer'" style='display: flex;'>
|
<div class='filter-label'>范围：</div>
|
<el-cascader
|
ref="salesCas"
|
placeholder="请选择"
|
:options="salesManList"
|
:props="{
|
children: 'children',
|
label: 'Name',
|
value: 'Id',
|
checkStrictly: true
|
}"
|
v-model="salesId"
|
style="width: 100%;"
|
@change='getUser'/>
|
</el-col>
|
<el-col :xs="{span: 5}" :sm="{span: 5}" :md="{span: 5}" :lg="{span: 5}" :xl="{span: 4}" v-if="crmType !== 'business'&&crmType !== 'sealContract' && crmType !== 'sealOffers'&& crmType !== 'businessChances'&& crmType !== 'businessCustomer'&& crmType !== 'businessContract'" style='display: flex;'>
|
<div class='filter-label'>范围：</div>
|
<el-cascader
|
ref="workerCas"
|
placeholder="我负责的客户"
|
:options="checkList"
|
:props="{
|
children: 'children',
|
label: 'label',
|
value: 'value',
|
checkStrictly: true
|
}"
|
v-model="formInline.customer"
|
style="width: 100%;"
|
@change='getWorker'/>
|
</el-col>
|
<el-col :xs="{span: 5}" :sm="{span: 5}" :md="{span: 5}" :lg="{span: 5}" :xl="{span: 4}" v-if="crmType === 'business'" style='display: flex;'>
|
<div class='filter-label'>范围：</div>
|
<el-cascader
|
ref="workerCas"
|
placeholder="我负责的客户"
|
:options="checkList"
|
:props="{
|
children: 'children',
|
label: 'label',
|
value: 'value',
|
checkStrictly: true
|
}"
|
v-model="formInline.customer"
|
style="width: 100%;"
|
@change='getWorker'/>
|
<!--<el-select v-model="formInline.customer" placeholder="我负责的客户">
|
<el-option
|
v-for="item in checkList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"/>
|
</el-select>-->
|
</el-col>
|
<el-col :xs="{span: 5}" :sm="{span: 5}" :md="{span: 5}" :lg="{span: 5}" :xl="{span: 4}" v-if="crmType === 'business'" style='display: flex;'>
|
<div class='filter-label'>阶段：</div>
|
<el-select v-model="formInline.businessType" placeholder="全部">
|
<el-option
|
v-for="item in businessList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"/>
|
</el-select>
|
</el-col>
|
<el-col :xs="{span: 5}" :sm="{span: 5}" :md="{span: 5}" :lg="{span: 5}" :xl="{span: 4}" style='display: flex;' v-if="crmType !== 'offers' && crmType !== 'contract'&& crmType !== 'businessContract'&&crmType !== 'sealContract' && crmType !== 'sealOffers'">
|
<div class='filter-label'>区域：</div>
|
<el-select v-model="selectArea" placeholder="请选择">
|
<el-option
|
v-for="item in areaList"
|
:key="item.ID"
|
:label="item.ProvinceName"
|
:value="item.ProvinceName"/>
|
</el-select>
|
</el-col>
|
<el-col :xs="{span: 4}" :sm="{span: 4}" :md="{span: 4}" :lg="{span: 4}" :xl="{span: 4}">
|
<el-button type="primary" @click="onSubmit('query')">查询</el-button>
|
<el-button @click="onSubmit('reset')">重置</el-button>
|
</el-col>
|
</el-row>
|
</flexbox>
|
<flexbox
|
v-if="crmType === 'business' || crmType === 'customer'|| crmType === 'contacts'|| crmType ==='businessChances' || crmType === 'businessCustomer' || selectionList.length>0"
|
class="operation-bar">
|
<el-button
|
v-if="crmType === 'business' || crmType === 'customer'|| crmType === 'contacts'|| crmType === 'businessCustomer'|| crmType === 'businessChances'"
|
type="primary"
|
class="createBtn"
|
@click="createClick">+ {{newTitle}}</el-button>
|
<div class='operationBtn' @click="importFile" v-if="crmType ==='customer'||crmType ==='contacts' "><img src='../../../assets/aside/import.png'/>导入</div>
|
<div class='operationBtn' @click="exportFile" v-if="crmType ==='customer'||crmType ==='contacts'||crmType ==='business'||crmType ==='businessChances' "><img src='../../../assets/aside/export.png'/>导出</div>
|
<div class='operationBtn' @click="showDuplicateCheck = true" v-if="crmType ==='customer'|| crmType === 'businessCustomer'"><img src='../../../assets/aside/check.png'/>查重</div>
|
<!--<div class='operationBtn' @click="showDelivery" v-if="crmType ==='contacts'"><img src='../../../assets/aside/dilivery.png'/>分配</div>
|
<div
|
class="operationBtn"
|
@click="showFilterClick">高级筛选</div>-->
|
<div class='operationBtn' @click="handleDelete" v-if='selectionList.length>0'><img src='../../../assets/aside/delete.png' />删除</div>
|
<filter-form
|
:field-list="fieldList"
|
:dialog-visible.sync="showFilter"
|
:obj="filterObj"
|
:crm-type="crmType"
|
:is-seas="isSeas"
|
@filter="handleFilter"/>
|
</flexbox>
|
|
<scene-set
|
:dialog-visible.sync="showSceneSet"
|
:crm-type="crmType"
|
@save-success="updateSceneList"/>
|
|
<scene-create
|
:field-list="fieldList"
|
:crm-type="crmType"
|
:dialog-visible.sync="showSceneCreate"
|
:obj="sceneFilterObj"
|
@saveSuccess="updateSceneList"/>
|
|
<c-r-m-create-view
|
v-if="isCreate"
|
:crm-type="createCRMType"
|
:action="createActionInfo"
|
@save-success="createSaveSuccess"
|
@hiden-view="hideView"/>
|
|
<duplicate-check
|
v-if="showDuplicateCheck"
|
:crm-type="crmType"
|
@hiden-view="showDuplicateCheck=false"/>
|
</div>
|
</template>
|
|
<script type="text/javascript">
|
import { mapGetters } from 'vuex'
|
// import crmTypeModel from '@/views/clients/model/crmTypeModel'
|
import { DeleteCustomer } from '@/api/customermanagement/customerManage'
|
import { DeleteContacter } from '@/api/customermanagement/contacts'
|
import { DeleteSalesChance } from '@/api/customermanagement/business'
|
import { DeleteQuotationSheet } from '@/api/customermanagement/offer'
|
|
import filterForm from './filterForm'
|
import filterContent from './filterForm/filterContent'
|
import SceneList from './sceneForm/SceneList' // 场景
|
import SceneSet from './sceneForm/SceneSet' // 场景设置
|
import SceneCreate from './sceneForm/SceneCreate'
|
import {XhInputSelect} from '@/components/CreateCom'
|
import DuplicateCheck from '../components/duplicateCheck'
|
import CRMCreateView from './CRMCreateView'
|
import { GetProvincesList } from '@/api/common'
|
import { GetSalesDepartmentUserChildList, GetCurrentBranches } from '@/api/systemManagement/departmentManage'
|
|
export default {
|
name: 'CRMTableHead', // 客户管理下 重要提醒 回款计划提醒
|
components: {
|
filterForm,
|
filterContent,
|
SceneList,
|
SceneCreate,
|
SceneSet,
|
XhInputSelect,
|
DuplicateCheck,
|
CRMCreateView
|
},
|
props: {
|
title: {
|
type: String,
|
default: ''
|
},
|
/** 没有值就是全部类型 有值就是当个类型 */
|
crmType: {
|
type: String,
|
default: ''
|
},
|
// 辅助 使用 公海没有场景
|
isSeas: {
|
type: Boolean,
|
default: false
|
},
|
fieldList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
}
|
},
|
data () {
|
return {
|
formInline: {
|
user: '',
|
customer: '0',
|
businessType: '',
|
area: '',
|
userType: ''
|
},
|
selectArea: '',
|
checkList: [{value: '0', label: '全部', children: undefined},
|
{value: '1', label: '我的', children: undefined},
|
{value: '2', label: '我的下属', children: []}],
|
businessList: [{value: '1', label: '初期沟通'},
|
{value: '2', label: '需求分析'},
|
{value: '3', label: '方案报价'},
|
{value: '4', label: '商务谈判'},
|
{value: '5', label: '成功'},
|
{value: '6', label: '搁置'}],
|
areaList: [],
|
sceneType: null,
|
showScene: false, // 场景操作
|
showFilter: false, // 控制筛选框
|
// fieldList: [],
|
filterObj: { form: [] }, // 筛选确定数据
|
|
sceneData: { id: '', bydata: '', name: '' },
|
showSceneSet: false, // 展示场景设置
|
showSceneCreate: false, // 展示场景添加
|
sceneFilterObj: { form: [] }, // 筛选确定数据
|
|
/** 勾选操作数据 */
|
selectionList: [],
|
transferDialogShow: false,
|
teamsDialogShow: false, // 团队操作提示框
|
teamsTitle: '', // 团队操作标题名
|
allocDialogShow: false, // 公海分配操作提示框
|
dealStatusShow: false, // 成交状态修改框
|
arrayList: [],
|
inputSelectData: '', // 接收子组件的值
|
// 展示查重
|
showDuplicateCheck: false,
|
// 创建的相关信息
|
createActionInfo: { type: 'save' },
|
createCRMType: '',
|
isCreate: false, // 是创建
|
salesManList: [],
|
salesId: ''
|
}
|
},
|
computed: {
|
...mapGetters(['crm', 'CRMConfig']),
|
newTitle: function () {
|
if (this.crmType === 'customer' || this.crmType === 'businessCustomer') {
|
return '新增客户'
|
} else if (this.crmType === 'contacts') {
|
return '新增联系人'
|
} else if (this.crmType === 'business' || this.crmType === 'businessChances') {
|
return '新增商机'
|
}
|
}
|
},
|
watch: {},
|
mounted () {
|
this.getProvince()
|
this.getSalesList()
|
this.getCheckList()
|
},
|
methods: {
|
getProvince () {
|
GetProvincesList().then(res => {
|
console.log(res)
|
this.areaList = res.data.Result || []
|
this.areaList.unshift({ID: 0, ProvinceID: '0', ProvinceName: '全部'})
|
// this.formInline.area = res.data.Result ? res.data.Result[0].ProvinceName : ''
|
this.selectArea = res.data.Result ? res.data.Result[0].ProvinceName : ''
|
})
|
},
|
getName (data) {
|
console.log('this is data of input-select: ', data)
|
this.formInline.user = data.name
|
// this.inputSelectData = data
|
},
|
// 销售员级联列表
|
getSalesList () {
|
GetSalesDepartmentUserChildList().then(res => {
|
if (res.data.ErrorCode === 200 && res.data.Result !== 0) {
|
let list = res.data.Result
|
let array = this.addLabel(list)
|
this.salesManList = array
|
} else {
|
this.$message.error(res.data.Message)
|
this.loading = false
|
}
|
})
|
},
|
// 下属级联
|
getCheckList () {
|
GetCurrentBranches().then(res => {
|
if (res.data.ErrorCode === 200 && res.data.Result !== 0) {
|
let list = res.data.Result
|
let arr = []
|
for (let i in list) {
|
let newObj = {}
|
newObj['value'] = list[i].UserId
|
newObj['label'] = list[i].RealName
|
arr.push(newObj)
|
}
|
this.checkList[2].children = arr
|
console.log('yesssssssssss', arr, this.checkList)
|
} else {
|
this.$message.error(res.data.Message)
|
this.loading = false
|
}
|
})
|
},
|
getWorker (val) {
|
let checkNodes = this.$refs['workerCas'].getCheckedNodes()[0].data
|
// 判断是否进入children级联选项
|
if (this.$refs['workerCas'].getCheckedNodes()[0].pathNodes.length > 1) {
|
if (val[val.length - 1] !== '') {
|
this.formInline['BrachUserId'] = val[val.length - 1]
|
this.formInline['customer'] = 2
|
} else {
|
this.formInline['BrachUserId'] = ''
|
this.formInline['customer'] = 2
|
}
|
} else {
|
if (checkNodes['value'] === '2') {
|
this.formInline['BrachUserId'] = ''
|
this.formInline['customer'] = 2
|
} else {
|
this.formInline['BrachUserId'] = ''
|
this.formInline['customer'] = val[val.length - 1]
|
}
|
}
|
},
|
addLabel (arr) {
|
for (let k in arr) {
|
if (arr[k].DepartmentAndUserChildren && arr[k].DepartmentAndUserChildren.length < 1) {
|
// 当后台返回的children为空时,页面会留空白，把空白部分去掉
|
arr[k].children = undefined
|
} else {
|
arr[k].children = arr[k].DepartmentAndUserChildren
|
this.addLabel(arr[k].DepartmentAndUserChildren)
|
}
|
}
|
return arr
|
},
|
getUser (val) {
|
console.log(this.salesId, this.$refs['salesCas'].getCheckedNodes()[0].data['DepartmentUserType'], this.$refs['salesCas'].getCheckedNodes()[0].label, val[val.length - 1])
|
this.formInline['customer'] = val[val.length - 1]
|
this.formInline['userType'] = this.$refs['salesCas'].getCheckedNodes()[0].data['DepartmentUserType']
|
},
|
onSubmit (val) {
|
console.log(val)
|
if (val === 'query') {
|
if (this.selectArea === '全部') {
|
this.formInline.area = ''
|
} else {
|
this.formInline.area = this.selectArea
|
}
|
this.$emit('queryList', {'list': this.formInline})
|
} else if (val === 'reset') {
|
this.formInline = {
|
user: '',
|
customer: '0',
|
area: '',
|
userType: ''
|
}
|
this.salesId = '0'
|
this.selectArea = '全部'
|
this.$emit('queryList', {'list': this.formInline})
|
this.$refs.inputSelect.resetInput()
|
}
|
},
|
createClick () {
|
if (this.crmType === 'businessCustomer') {
|
this.createCRMType = 'customer'
|
} else if (this.crmType === 'businessChances') {
|
this.createCRMType = 'business'
|
} else {
|
this.createCRMType = this.crmType
|
}
|
this.createActionInfo = { type: 'save' }
|
this.isCreate = !this.isCreate
|
},
|
// 创建数据页面 保存成功
|
createSaveSuccess (data) {
|
this.$emit('on-handle', { type: 'save-success' })
|
},
|
exportFile () {
|
this.$emit('exportFile', true)
|
},
|
importFile () {
|
this.$emit('importFile', true)
|
},
|
showDelivery () {
|
|
},
|
hideView () {
|
this.isCreate = false
|
},
|
/** 发布 时候的类型选择 */
|
handleTypeDrop (command) {
|
this.sceneType = command
|
},
|
/** 展示高级筛选 */
|
showFilterClick () {
|
this.getFilterFieldInfo()
|
},
|
checkRepeat () {
|
|
},
|
showDelete () {
|
|
},
|
// 获取高级筛选字段数据
|
getFilterFieldInfo () {
|
// this.fieldList = []
|
console.log(this.fieldList)
|
this.showFilter = true
|
},
|
handleFilter (form) {
|
console.log(form)
|
this.filterObj = form
|
this.showFilter = false
|
// if (form.saveChecked) {
|
// crmSceneSave({
|
// type: crmTypeModel[this.crmType],
|
// isDefault: form.saveDefault ? 1 : 0,
|
// name: form.saveName,
|
// data: JSON.stringify(form.obj)
|
// })
|
// .then(res => {
|
// this.updateSceneList()
|
// })
|
// .catch(() => {})
|
// }
|
this.$emit('filter', form.obj)
|
},
|
// 删除
|
handleDeleteField (data) {
|
console.log(data)
|
this.filterObj = data.obj
|
this.$emit('filter', this.filterObj.obj)
|
},
|
// 场景操作
|
/** 选择了场景 */
|
sceneSelect (data) {
|
this.sceneData = data
|
this.$emit('scene', data)
|
},
|
sceneHandle (data) {
|
if (data.type === 'set') {
|
this.showSceneSet = true
|
} else if (data.type === 'add') {
|
// filterIndexfields({
|
// label: crmTypeModel[this.crmType]
|
// })
|
// .then(res => {
|
// this.fieldList = res.data
|
// this.showSceneCreate = true
|
// })
|
// .catch(() => {})
|
}
|
},
|
/** 创建保存成功 */
|
updateSceneList () {
|
this.$refs.sceneList.getSceneList()
|
},
|
/** 勾选后的表头操作 */
|
headSelectionChange (array) {
|
this.selectionList = array
|
},
|
handleDelete () {
|
let ids = []
|
for (let i in this.selectionList) {
|
ids.push({'Id': this.selectionList[i].Id})
|
}
|
console.log(ids)
|
let request = {
|
customer: DeleteCustomer,
|
contacts: DeleteContacter,
|
business: DeleteSalesChance,
|
offers: DeleteQuotationSheet
|
}[this.crmType]
|
this.$confirm('确定删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
request(ids).then(res => {
|
if (res.data.ErrorCode === 200) {
|
this.$message.success(res.data.Message)
|
this.$emit('queryList')
|
} else {
|
this.$message.error(res.data.Message)
|
}
|
})
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
})
|
},
|
forSelectionHandleItems (handleInfos, array) {
|
var tempsHandles = []
|
for (let index = 0; index < array.length; index++) {
|
tempsHandles.push(handleInfos[array[index]])
|
}
|
return tempsHandles
|
},
|
// 子组件 回调的 结果
|
handleCallBack (data) {
|
this.$emit('handle', { type: data.type })
|
},
|
// 获取默认场景名字
|
getDefaultSceneName () {
|
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 === 'contract') {
|
return '全部合同'
|
} else if (this.crmType === 'receivables') {
|
return '全部回款'
|
} else if (this.crmType === 'product') {
|
return '全部产品'
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.filterBox{
|
width: 100%;
|
// height: 136px;
|
background: #FFFFFF;
|
margin-bottom:10px;
|
padding:24px 20px;
|
}
|
.th-container {
|
font-size: 13px;
|
// height: 50px;
|
// margin-bottom: 20px;
|
}
|
|
.create-form-inline{
|
width: 100%;
|
/deep/.el-form-item{
|
margin-right: 60px;
|
}
|
}
|
.filter-label{
|
// width: 70px; /*no*/
|
min-width: 40px;/*no*/
|
line-height: 35px;
|
font-weight: 400;
|
color: #333333;
|
font-size: 12px;
|
}
|
/** 场景和筛选 */
|
.condition_title {
|
cursor: pointer;
|
}
|
.condition_title:hover {
|
// color: #4D88FF;//
|
}
|
|
.m-arrow {
|
margin: 0 8px;
|
}
|
.c-filtrate {
|
margin: 0 10px 0 30px;
|
width: 12px;
|
}
|
|
.operation-bar{
|
margin-top: 20px;
|
.createBtn{
|
// width: 117px;
|
height: 36px;
|
background: #FF8800 !important;
|
border-radius: 4px;
|
border: 1px solid #FF8800 !important;
|
margin-right: 40px;
|
padding: 0 20px;
|
}
|
.operationBtn{
|
color: #333;
|
font-size: 14px;
|
display: flex;
|
align-items: center;
|
margin-right:40px;
|
cursor:pointer;
|
&:hover{
|
color: #4D88FF;
|
}
|
img{
|
width: 20px;
|
height: 20px;
|
margin-right: 8px;
|
}
|
}
|
.operBtn{
|
width: 117px;
|
height: 36px;
|
border-radius: 4px;
|
margin-right: 40px;
|
}
|
}
|
|
.selection-items-box {
|
overflow-x: auto;
|
overflow-y: hidden;
|
.selection-item {
|
width: auto;
|
padding: 15px;
|
flex-shrink: 0;
|
.selection-item-icon {
|
display: block;
|
margin-right: 5px;
|
width: 15px;
|
height: 15px;
|
}
|
.selection-item-name {
|
cursor: pointer;
|
color: #777;
|
}
|
.selection-item-name:hover {
|
// color: @xr-color-primary;//
|
}
|
}
|
}
|
</style>
|
