|
|
@@ -1,12 +1,11 @@
|
|
|
import ContactDetail from '@/pages/Customer/Contact/components/ContactDetail'
|
|
|
import Addcontact from '@/pages/Customer/Contact/components/AddContact'
|
|
|
import ProTable from '@ant-design/pro-table'
|
|
|
-import { Button, message, Tag } from 'antd'
|
|
|
-import { connect } from 'dva'
|
|
|
-import React, { useEffect, useState } from 'react'
|
|
|
+import { Button, Input, message, Tag } from 'antd'
|
|
|
+import { connect, useParams } from 'dva'
|
|
|
+import React, { useEffect, useState, useRef, useMemo } from 'react'
|
|
|
import consts from '@/consts'
|
|
|
import LazyCascader from '@/components/LazyCascader'
|
|
|
-import { useDebounceFn } from 'ahooks'
|
|
|
import { useModal } from '@/components/Modal'
|
|
|
import { formatValues } from '@/components/LazyCascader'
|
|
|
import PersonLabel from '../Company/components/PersonLabel'
|
|
|
@@ -22,11 +21,45 @@ const Contact = props => {
|
|
|
const { toggleDrawer, setDrawerProps } = useModal()
|
|
|
const { personTagColorMap, teamTagColorMap, personTags, teamTags, dispatch } = props
|
|
|
|
|
|
+ const tRef = useRef()
|
|
|
const [tagState, setTagState] = useState({
|
|
|
tagIds: [],
|
|
|
tagCooperationIds: []
|
|
|
})
|
|
|
|
|
|
+ const tag = useMemo(() => {
|
|
|
+ const personTagMap = {}
|
|
|
+ const teamTagMap = {}
|
|
|
+ personTags.forEach(item => {
|
|
|
+ personTagMap[item.id] = {
|
|
|
+ text: (
|
|
|
+ <>
|
|
|
+ <span
|
|
|
+ className="zh-circle-icon zh-mg-right-3"
|
|
|
+ style={{ backgroundColor: personTagColorMap[item.id] }}
|
|
|
+ />
|
|
|
+ <span>{item.name}</span>
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ })
|
|
|
+ teamTags.forEach(item => {
|
|
|
+ teamTagMap[item.id] = {
|
|
|
+ text: (
|
|
|
+ <>
|
|
|
+ <span
|
|
|
+ className="zh-circle-icon zh-mg-right-3"
|
|
|
+ style={{ backgroundColor: teamTagColorMap[item.id] }}
|
|
|
+ />
|
|
|
+ <span>{item.name}</span>
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ return { personTagMap, teamTagMap }
|
|
|
+ }, [personTags, teamTags])
|
|
|
+
|
|
|
const toolbarOptionsChange = (type, ids) => {
|
|
|
setTagState({ ...tagState, [type]: ids })
|
|
|
}
|
|
|
@@ -37,51 +70,27 @@ const Contact = props => {
|
|
|
}
|
|
|
|
|
|
const [state, setState] = useState({
|
|
|
- data: [],
|
|
|
- journal: [],
|
|
|
- servicelog: [],
|
|
|
- total: 0,
|
|
|
- page: 1,
|
|
|
- size: 20,
|
|
|
- loading: false,
|
|
|
- id: '',
|
|
|
- tail: { department: 0, email: 0, telephone: 0 }
|
|
|
+ params: {},
|
|
|
+ id: ''
|
|
|
})
|
|
|
|
|
|
- const initData = async payload => {
|
|
|
- setState({ ...state, loading: true })
|
|
|
- const {
|
|
|
- code = -1,
|
|
|
- data: { client = [], log = [], serviceLog = [], total = 0, tail } = {
|
|
|
- client: [],
|
|
|
- log: [],
|
|
|
- serviceLog: [],
|
|
|
- total: 0,
|
|
|
- tail: { department: 0, email: 0, telephone: 0 }
|
|
|
- }
|
|
|
- } = await queryContact(payload)
|
|
|
- if (code === consts.RET_CODE.SUCCESS) {
|
|
|
- console.log(payload?.page, state.page)
|
|
|
- setState({
|
|
|
- ...state,
|
|
|
- data: client,
|
|
|
- journal: log,
|
|
|
- servicelist: serviceLog,
|
|
|
- total,
|
|
|
- tail,
|
|
|
- loading: false,
|
|
|
- page: payload?.page || state.page
|
|
|
- })
|
|
|
- }
|
|
|
+ // 重置到默认值,包括表单
|
|
|
+ const initData = () => {
|
|
|
+ tRef.current.reset()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 刷新
|
|
|
+ const refreshData = () => {
|
|
|
+ tRef.current.reload()
|
|
|
}
|
|
|
|
|
|
const handleAddClient = async values => {
|
|
|
const payload = formatValues(values)
|
|
|
const { code = -1, msg = '新增失败' } = await apiAddClient(payload)
|
|
|
if (code === consts.RET_CODE.SUCCESS) {
|
|
|
- await initData()
|
|
|
+ message.success(msg)
|
|
|
+ initData()
|
|
|
}
|
|
|
- return message.success(msg)
|
|
|
}
|
|
|
|
|
|
// 展示drawer
|
|
|
@@ -100,6 +109,11 @@ const Contact = props => {
|
|
|
|
|
|
const columns = [
|
|
|
{
|
|
|
+ title: '关键字',
|
|
|
+ dataIndex: 'search',
|
|
|
+ hideInTable: true
|
|
|
+ },
|
|
|
+ {
|
|
|
title: '联系人',
|
|
|
dataIndex: 'clientName',
|
|
|
key: 'clientName',
|
|
|
@@ -167,8 +181,8 @@ const Contact = props => {
|
|
|
},
|
|
|
{
|
|
|
title: '个人标签',
|
|
|
- dataIndex: 'tag',
|
|
|
- key: 'tag',
|
|
|
+ dataIndex: 'tagIds',
|
|
|
+ key: 'tagIds',
|
|
|
width: 100,
|
|
|
render: (_, record) => (
|
|
|
<div className="zh-align-center zh-flex-wrap">
|
|
|
@@ -184,7 +198,7 @@ const Contact = props => {
|
|
|
tagIds={record.tagIds}
|
|
|
tagType={TagTypeEnum.PERSONTAG}
|
|
|
tagColumn={TagDataTypeEnum.CONTACT}
|
|
|
- checkCallBack={initData}
|
|
|
+ checkCallBack={refreshData}
|
|
|
modeType={LabelModeType.column}>
|
|
|
<IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
|
|
|
</PersonLabel>
|
|
|
@@ -192,18 +206,8 @@ const Contact = props => {
|
|
|
),
|
|
|
filters: true,
|
|
|
// onFilter: true,
|
|
|
- valueType: 'select',
|
|
|
- valueEnum: {
|
|
|
- all: { text: '全部', status: 'Default' },
|
|
|
- green: {
|
|
|
- text: '个人标签1',
|
|
|
- status: 'green'
|
|
|
- },
|
|
|
- blue: {
|
|
|
- text: '个人标签2',
|
|
|
- status: 'blue'
|
|
|
- }
|
|
|
- }
|
|
|
+ // valueType: 'option',
|
|
|
+ valueEnum: tag.personTagMap
|
|
|
},
|
|
|
{
|
|
|
title: '协作标签',
|
|
|
@@ -224,45 +228,15 @@ const Contact = props => {
|
|
|
tagIds={record.tagCooperationIds}
|
|
|
tagType={TagTypeEnum.TEAM}
|
|
|
tagColumn={TagDataTypeEnum.CONTACT}
|
|
|
- checkCallBack={initData}
|
|
|
+ checkCallBack={refreshData}
|
|
|
modeType={LabelModeType.column}>
|
|
|
<IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
|
|
|
</PersonLabel>
|
|
|
</div>
|
|
|
),
|
|
|
filters: true,
|
|
|
- valueType: 'select',
|
|
|
- valueEnum: {
|
|
|
- all: { text: '全部', status: 'Default' },
|
|
|
- green: {
|
|
|
- text: '协作标签1',
|
|
|
- status: 'green'
|
|
|
- },
|
|
|
- blue: {
|
|
|
- text: '协作标签2',
|
|
|
- status: 'blue'
|
|
|
- },
|
|
|
- purple: {
|
|
|
- text: '协作标签3',
|
|
|
- status: 'purple'
|
|
|
- },
|
|
|
- red: {
|
|
|
- text: '协作标签4',
|
|
|
- status: 'red'
|
|
|
- },
|
|
|
- brown: {
|
|
|
- text: '协作标签5',
|
|
|
- status: 'brown'
|
|
|
- },
|
|
|
- black: {
|
|
|
- text: '协作标签6',
|
|
|
- status: 'black'
|
|
|
- },
|
|
|
- yellow: {
|
|
|
- text: '协作标签7',
|
|
|
- status: 'yellow'
|
|
|
- }
|
|
|
- }
|
|
|
+ // valueType: 'select',
|
|
|
+ valueEnum: tag.teamTagMap
|
|
|
},
|
|
|
{
|
|
|
title: '地址',
|
|
|
@@ -376,7 +350,7 @@ const Contact = props => {
|
|
|
// 默认刷新一次列表请求数据
|
|
|
|
|
|
useEffect(() => {
|
|
|
- initData()
|
|
|
+ // initData()
|
|
|
if (!personTags.length) {
|
|
|
dispatch({
|
|
|
type: 'contact/fetchTags',
|
|
|
@@ -392,18 +366,21 @@ const Contact = props => {
|
|
|
}, [])
|
|
|
|
|
|
const handleSearch = value => {
|
|
|
- initData({ search: value })
|
|
|
+ setState({ ...state, params: { ...state.params, current: 1, search: value } })
|
|
|
}
|
|
|
|
|
|
- const searchOnchange = e => {
|
|
|
- const { value = '' } = e.target
|
|
|
- initData({ search: value })
|
|
|
- }
|
|
|
- const { run: handleSearchInputChange } = useDebounceFn(searchOnchange)
|
|
|
+ // const searchOnchange = e => {
|
|
|
+ // const { value = '' } = e.target
|
|
|
+ // tRef.current?.setFieldsValue({ search: value })
|
|
|
+ // tRef.current?.submit()
|
|
|
+ // // initData({ search: value })
|
|
|
+ // }
|
|
|
+ // const { run: handleSearchInputChange } = useDebounceFn(searchOnchange)
|
|
|
|
|
|
const onDistrictChange = value => {
|
|
|
const [province = '', city = '', area = ''] = value
|
|
|
- initData({ province, city, area })
|
|
|
+ setState({ ...state, params: { ...state.params, current: 1, province, city, area } })
|
|
|
+ // initData({ province, city, area })
|
|
|
}
|
|
|
|
|
|
// 批量设置-确认触发
|
|
|
@@ -424,16 +401,87 @@ const Contact = props => {
|
|
|
tagType: TagTypeEnum.PERSONTAG
|
|
|
})
|
|
|
}
|
|
|
- initData()
|
|
|
+ refreshData()
|
|
|
}
|
|
|
|
|
|
+ const renderTableAlert = ({ selectedRowKeys }) => {
|
|
|
+ return (
|
|
|
+ <div className="zh-flex-row">
|
|
|
+ <div className="zh-mg-right-5">
|
|
|
+ <PersonLabel
|
|
|
+ tagType={TagTypeEnum.PERSONTAG}
|
|
|
+ tagColumn={TagDataTypeEnum.CONTACT}
|
|
|
+ checkCallBack={toolbarOptionsChange}
|
|
|
+ modeType={LabelModeType.toolbar}>
|
|
|
+ {tagState.tagIds.length ? (
|
|
|
+ <Button>
|
|
|
+ {tagState.tagIds.map(item => (
|
|
|
+ <span
|
|
|
+ key={item}
|
|
|
+ className="zh-circle-icon zh-mg-right-3"
|
|
|
+ style={{ backgroundColor: personTagColorMap[item] }}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ <IconPark type="down" />
|
|
|
+ </Button>
|
|
|
+ ) : (
|
|
|
+ <Button>
|
|
|
+ 个人标签
|
|
|
+ <IconPark type="down" />
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ </PersonLabel>
|
|
|
+ </div>
|
|
|
+ <div className="zh-mg-right-5">
|
|
|
+ <PersonLabel
|
|
|
+ tagType={TagTypeEnum.TEAMTAG}
|
|
|
+ tagColumn={TagDataTypeEnum.CONTACT}
|
|
|
+ checkCallBack={toolbarOptionsChange}
|
|
|
+ modeType={LabelModeType.toolbar}>
|
|
|
+ {tagState.tagCooperationIds.length ? (
|
|
|
+ <Button>
|
|
|
+ {tagState.tagCooperationIds.map(item => (
|
|
|
+ <span
|
|
|
+ key={item}
|
|
|
+ className="zh-square-icon zh-mg-right-3"
|
|
|
+ style={{ backgroundColor: teamTagColorMap[item] }}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ <IconPark type="down" />
|
|
|
+ </Button>
|
|
|
+ ) : (
|
|
|
+ <Button>
|
|
|
+ 协作标签
|
|
|
+ <IconPark type="down" />
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ </PersonLabel>
|
|
|
+ </div>
|
|
|
+ <Button onClick={() => tagsSettingConfirm(selectedRowKeys)}>
|
|
|
+ <IconPark type="check" size={14} />
|
|
|
+ 确认
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
return (
|
|
|
<ProTable
|
|
|
- loading={state.loading}
|
|
|
- rowKey={record => record.id}
|
|
|
bordered
|
|
|
+ params={state.params}
|
|
|
+ actionRef={tRef}
|
|
|
+ rowKey={record => record.id}
|
|
|
columns={columns}
|
|
|
- dataSource={state.data}
|
|
|
+ request={async (params, sort, filter) => {
|
|
|
+ const {
|
|
|
+ code = -1,
|
|
|
+ data: { client = [], total = 0 }
|
|
|
+ } = await queryContact({ ...params, ...sort, ...filter })
|
|
|
+ return {
|
|
|
+ data: client,
|
|
|
+ success: code === consts.RET_CODE.SUCCESS,
|
|
|
+ total
|
|
|
+ }
|
|
|
+ }}
|
|
|
// summary={() => (
|
|
|
// <ProTable.Summary.Row>
|
|
|
// <ProTable.Summary.Cell>统计: 总数</ProTable.Summary.Cell>
|
|
|
@@ -443,74 +491,7 @@ const Contact = props => {
|
|
|
// <ProTable.Summary.Cell>未填写: {state.tail.email}</ProTable.Summary.Cell>
|
|
|
// </ProTable.Summary.Row>
|
|
|
// )}
|
|
|
- pagination={{
|
|
|
- pageSize: consts.PAGE_SIZE,
|
|
|
- total: state.total,
|
|
|
- current: state.current,
|
|
|
- onChange: (page, size) => {
|
|
|
- initData({ page, size })
|
|
|
- }
|
|
|
- }}
|
|
|
- tableAlertRender={({ selectedRowKeys }) => {
|
|
|
- return (
|
|
|
- <div className="zh-flex-row">
|
|
|
- <div className="zh-mg-right-5">
|
|
|
- <PersonLabel
|
|
|
- tagType={TagTypeEnum.PERSONTAG}
|
|
|
- tagColumn={TagDataTypeEnum.CONTACT}
|
|
|
- checkCallBack={toolbarOptionsChange}
|
|
|
- modeType={LabelModeType.toolbar}>
|
|
|
- {tagState.tagIds.length ? (
|
|
|
- <Button>
|
|
|
- {tagState.tagIds.map(item => (
|
|
|
- <span
|
|
|
- key={item}
|
|
|
- className="zh-circle-icon zh-mg-right-3"
|
|
|
- style={{ backgroundColor: personTagColorMap[item] }}
|
|
|
- />
|
|
|
- ))}
|
|
|
- <IconPark type="down" />
|
|
|
- </Button>
|
|
|
- ) : (
|
|
|
- <Button>
|
|
|
- 个人标签
|
|
|
- <IconPark type="down" />
|
|
|
- </Button>
|
|
|
- )}
|
|
|
- </PersonLabel>
|
|
|
- </div>
|
|
|
- <div className="zh-mg-right-5">
|
|
|
- <PersonLabel
|
|
|
- tagType={TagTypeEnum.TEAMTAG}
|
|
|
- tagColumn={TagDataTypeEnum.CONTACT}
|
|
|
- checkCallBack={toolbarOptionsChange}
|
|
|
- modeType={LabelModeType.toolbar}>
|
|
|
- {tagState.tagCooperationIds.length ? (
|
|
|
- <Button>
|
|
|
- {tagState.tagCooperationIds.map(item => (
|
|
|
- <span
|
|
|
- key={item}
|
|
|
- className="zh-square-icon zh-mg-right-3"
|
|
|
- style={{ backgroundColor: teamTagColorMap[item] }}
|
|
|
- />
|
|
|
- ))}
|
|
|
- <IconPark type="down" />
|
|
|
- </Button>
|
|
|
- ) : (
|
|
|
- <Button>
|
|
|
- 协作标签
|
|
|
- <IconPark type="down" />
|
|
|
- </Button>
|
|
|
- )}
|
|
|
- </PersonLabel>
|
|
|
- </div>
|
|
|
- <Button onClick={() => tagsSettingConfirm(selectedRowKeys)}>
|
|
|
- <IconPark type="check" size={14} />
|
|
|
- 确认
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }}
|
|
|
+ tableAlertRender={renderTableAlert}
|
|
|
rowSelection={{
|
|
|
onChange: hanleRowSelectChange,
|
|
|
type: 'checkbox'
|
|
|
@@ -519,8 +500,7 @@ const Contact = props => {
|
|
|
toolbar={{
|
|
|
search: {
|
|
|
allowClear: true,
|
|
|
- onSearch: handleSearch,
|
|
|
- onChange: handleSearchInputChange
|
|
|
+ onSearch: handleSearch
|
|
|
},
|
|
|
actions: [
|
|
|
<LazyCascader onChange={onDistrictChange} key="lazyCascader" />,
|
|
|
@@ -531,12 +511,6 @@ const Contact = props => {
|
|
|
columnsStateMap={columnsStateMap}
|
|
|
onColumnsStateChange={map => setColumnsStateMap(map)}
|
|
|
headerTitle="联系人"
|
|
|
- // toolBarRender={() => [
|
|
|
- // <Button key="button" type="primary">
|
|
|
- // <SvgIcon type="icon-plus" />
|
|
|
- // 联系人
|
|
|
- // </Button>
|
|
|
- // ]}
|
|
|
/>
|
|
|
)
|
|
|
}
|