372 lines
9.5 KiB
Vue
372 lines
9.5 KiB
Vue
<template>
|
|
<div>
|
|
<c-r-m-list-head
|
|
:search.sync="search"
|
|
:is-seas="true"
|
|
:pool-id="poolId"
|
|
:pool-auth="poolAuth"
|
|
title="公海管理"
|
|
placeholder="请输入客户名称/手机/电话"
|
|
main-title="新建客户"
|
|
crm-type="customer"
|
|
@on-handle="listHeadHandle"
|
|
@on-search="crmSearch"
|
|
@on-export="exportInfos">
|
|
<el-menu
|
|
slot="icon"
|
|
ref="elMenu"
|
|
default-active="seas"
|
|
mode="horizontal"
|
|
active-text-color="#2362FB"
|
|
@select="menuSelect">
|
|
<el-menu-item
|
|
v-for="(item, index) in menuItems"
|
|
:key="index"
|
|
:index="item.path">
|
|
<img :src="item.icon">
|
|
<span>{{ item.title }}</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</c-r-m-list-head>
|
|
<div
|
|
v-empty="!crm.pool.index && poolAuth.index"
|
|
xs-empty-icon="nopermission"
|
|
xs-empty-text="暂无权限"
|
|
class="crm-container">
|
|
<c-r-m-table-head
|
|
ref="crmTableHead"
|
|
:is-seas="isSeas"
|
|
:pool-id="poolId"
|
|
:pool-auth="poolAuth"
|
|
:sort-data="sortData"
|
|
crm-type="customer"
|
|
@filter="handleFilter"
|
|
@handle="handleHandle"
|
|
@scene="handleScene">
|
|
<template slot="custom">
|
|
<div>公海：</div>
|
|
<el-select
|
|
v-model="poolId"
|
|
@change="poolChange">
|
|
<el-option
|
|
v-for="item in poolList"
|
|
:key="item.poolId"
|
|
:label="item.poolName"
|
|
:value="item.poolId"/>
|
|
</el-select>
|
|
<!-- 添加新按钮 -->
|
|
<el-button
|
|
v-if="poolId === 34557"
|
|
type="primary"
|
|
size="small"
|
|
style="margin-left: 10px"
|
|
@click="handlePoolAction">
|
|
同步数据
|
|
</el-button>
|
|
</template>
|
|
</c-r-m-table-head>
|
|
<el-table
|
|
v-loading="loading"
|
|
id="crm-table"
|
|
:row-height="40"
|
|
:data="list"
|
|
:height="tableHeight"
|
|
:cell-class-name="cellClassName"
|
|
:row-key="`${crmType}Id`"
|
|
class="n-table--border"
|
|
use-virtual
|
|
stripe
|
|
border
|
|
highlight-current-row
|
|
style="width: 100%"
|
|
@row-click="handleRowClick"
|
|
@sort-change="sortChange"
|
|
@header-dragend="handleHeaderDragend"
|
|
@selection-change="handleSelectionChange">
|
|
<el-table-column
|
|
show-overflow-tooltip
|
|
reserve-selection
|
|
type="selection"
|
|
align="center"
|
|
width="55"/>
|
|
<el-table-column
|
|
v-for="(item, index) in fieldList"
|
|
:key="index"
|
|
:fixed="index==0"
|
|
:prop="item.prop"
|
|
:label="item.label"
|
|
:width="item.width"
|
|
sortable="custom"
|
|
show-overflow-tooltip>
|
|
<template slot-scope="{ row, column, $index }">
|
|
<template v-if="item.prop == 'dealStatus'">
|
|
<i :class="row[item.prop] | dealIcon"/>
|
|
<span>{{ row[item.prop] | dealName }}</span>
|
|
</template>
|
|
<template v-else-if="item.prop == 'status'">
|
|
<i
|
|
v-if="row.status == 2"
|
|
class="wk wk-circle-password customer-lock"/>
|
|
</template>
|
|
<wk-field-view
|
|
v-else
|
|
:props="item"
|
|
:form-type="item.formType"
|
|
:value="row[column.property]"
|
|
>
|
|
<template slot-scope="{ data }">
|
|
{{ fieldFormatter(row, column, row[column.property], item) }}
|
|
</template>
|
|
</wk-field-view>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column/>
|
|
<el-table-column
|
|
:resizable="false"
|
|
fixed="right"
|
|
width="40">
|
|
<template
|
|
slot="header"
|
|
slot-scope="slot">
|
|
<field-set
|
|
:is-seas="isSeas"
|
|
:crm-type="crmType"
|
|
:pool-id="poolId"
|
|
@change="setSave"/>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="p-contianer">
|
|
<el-pagination
|
|
:current-page="currentPage"
|
|
:page-sizes="pageSizes"
|
|
:page-size.sync="pageSize"
|
|
:total="total"
|
|
:pager-count="5"
|
|
class="p-bar"
|
|
background
|
|
layout="prev, pager, next, sizes, total, jumper"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"/>
|
|
</div>
|
|
<!-- 同步数据参数对话框 -->
|
|
<el-dialog
|
|
:visible.sync="openXky"
|
|
title="请选择同步参数"
|
|
width="400px"
|
|
append-to-body>
|
|
<el-form>
|
|
<el-table-column label="同步月份">
|
|
同步月份：
|
|
<el-date-picker
|
|
v-model="month"
|
|
type="month"
|
|
value-format="yyyyMM"
|
|
placeholder="选择同步月"/>
|
|
</el-table-column>
|
|
<el-form-item style="padding-top: 30px">
|
|
地区：
|
|
<el-select v-model="xzqhDm" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in xzqhList"
|
|
:key="item.xzqhDm"
|
|
:label="item.xzqhMc"
|
|
:value="item.xzqhDm"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button :loading="loadingGs" type="primary" @click="sysGsdjxx">提交</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
<customer-detail
|
|
v-if="showDview"
|
|
:id.sync="rowID"
|
|
:page-list="crmType == rowType ? list : []"
|
|
:page-index.sync="rowIndex"
|
|
:pool-id="poolId"
|
|
:is-seas="isSeas"
|
|
class="d-view"
|
|
@handle="handleHandle"
|
|
@hide-view="showDview=false"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { crmCustomerPoolNameListAPI, crmCustomerPoolQueryAuthAPI } from '@/api/crm/customer'
|
|
|
|
import CustomerDetail from '../customer/Detail'
|
|
import TableMixin from '../mixins/Table'
|
|
import {getXzqhList} from "../../../api/crm/xzqh";
|
|
import {syGsdjxx} from "../../../api/crm/gsdjxx";
|
|
|
|
export default {
|
|
/** 客户管理 的 公海列表 */
|
|
name: 'SeacIndex',
|
|
components: {
|
|
CustomerDetail
|
|
},
|
|
filters: {
|
|
dealIcon(statu) {
|
|
return statu == 1 ? 'wk wk-success deal-suc' : 'wk wk-close deal-un'
|
|
},
|
|
|
|
dealName(statu) {
|
|
return statu == 1 ? '已成交' : '未成交'
|
|
}
|
|
},
|
|
mixins: [TableMixin],
|
|
data() {
|
|
return {
|
|
crmType: 'customer',
|
|
isSeas: true, // 是公海
|
|
poolId: '',
|
|
poolAuth: {},
|
|
poolList: [],
|
|
openXky: false,
|
|
xzqhList: [],
|
|
month: '',
|
|
xzqhDm: '',
|
|
loadingGs: false
|
|
}
|
|
},
|
|
computed: {
|
|
menuItems() {
|
|
const temp = []
|
|
if (this.crm && this.crm.customer) {
|
|
temp.push({
|
|
title: '客户',
|
|
path: 'customer',
|
|
icon: require('@/assets/img/crm/customer_not.png')
|
|
})
|
|
}
|
|
|
|
if (this.crm && this.crm.pool) {
|
|
temp.push({
|
|
title: '公海',
|
|
path: 'seas',
|
|
icon: require('@/assets/img/crm/seas.png')
|
|
})
|
|
}
|
|
|
|
if (this.crm && this.crm.customer && this.crm.customer.nearbyCustomer) {
|
|
temp.push({
|
|
title: '附近客户',
|
|
path: 'nearby',
|
|
icon: require('@/assets/img/crm/nearby_not.png')
|
|
})
|
|
}
|
|
|
|
return temp
|
|
}
|
|
},
|
|
watch: {
|
|
poolId: {
|
|
handler(newVal) {
|
|
if (newVal) {
|
|
this.getCustomerPoolAuth(newVal)
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
created() {
|
|
this.getPoolList()
|
|
},
|
|
activated() {
|
|
if (this.isRequested) {
|
|
this.getList()
|
|
}
|
|
},
|
|
deactivated() {
|
|
this.$refs.elMenu.activeIndex = 'seas'
|
|
},
|
|
methods: {
|
|
/**
|
|
* 获取公海权限
|
|
*/
|
|
getCustomerPoolAuth(poolId) {
|
|
crmCustomerPoolQueryAuthAPI({
|
|
poolId: poolId
|
|
})
|
|
.then(res => {
|
|
this.poolAuth = res.data || {}
|
|
})
|
|
.catch(() => {})
|
|
},
|
|
// 打开选项框
|
|
handlePoolAction() {
|
|
getXzqhList().then(resp => {
|
|
console.log(resp.data)
|
|
this.xzqhList = resp.data
|
|
this.openXky = true
|
|
})
|
|
},
|
|
// 同步工商登记信息
|
|
sysGsdjxx() {
|
|
let xzqhMc = null
|
|
for (let i = 0; i < this.xzqhList.length; i++) {
|
|
if (this.xzqhList[i].xzqhDm === this.xzqhDm){
|
|
xzqhMc = this.xzqhList[i].xzqhMc
|
|
}
|
|
}
|
|
const pa = {
|
|
yf: this.month,
|
|
xzqhDm: this.xzqhDm,
|
|
xzqhMc: xzqhMc
|
|
}
|
|
console.log(pa)
|
|
syGsdjxx(pa)
|
|
this.$message.success(`同步成功，请稍后刷新界面`)
|
|
this.openXky = false
|
|
},
|
|
/**
|
|
* 左侧菜单选择
|
|
*/
|
|
menuSelect(key, keyPath) {
|
|
this.$emit('menu-select', key, keyPath)
|
|
},
|
|
|
|
/**
|
|
* 公海数据
|
|
*/
|
|
getPoolList() {
|
|
crmCustomerPoolNameListAPI()
|
|
.then(res => {
|
|
this.poolList = res.data || []
|
|
this.poolId = this.poolList.length > 0 ? this.poolList[0].poolId : ''
|
|
})
|
|
.catch(() => {
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 选择公海
|
|
*/
|
|
poolChange() {
|
|
this.currentPage = 1
|
|
this.getFieldList(true)
|
|
},
|
|
|
|
/**
|
|
* 通过回调控制class
|
|
*/
|
|
cellClassName({ row, column, rowIndex, columnIndex }) {
|
|
if (column.property === 'customerName') {
|
|
return 'can-visit--underline'
|
|
} else if (column.property === 'businessCheck') {
|
|
return 'can-visit'
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../styles/table.scss';
|
|
</style>
|