cldV2react/src/pages/Customer/Client/index.jsx

import ContactDetail from '@/pages/Customer/Client/components/ClientDetail'
import CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
import AddContact from '@/pages/Customer/Client/components/AddClient'
import ProTable from '@ant-design/pro-table'
import { Input, Button, message, Tooltip, Select } from 'antd'
import { connect, useModel } from 'umi'
import React, { useEffect, useState, useRef, useMemo } from 'react'
import consts from '@/consts'
import LazyCascader from '@/components/LazyCascader'
import { useModal } from '@/components/Modal'
import { formatValues } from '@/components/LazyCascader'
import PersonLabel from '../Company/components/PersonLabel'
import {
  TagTypeEnum,
  TagDataTypeEnum,
  LabelModeType
} from '../Company/components/PersonLabel/const'
import { Add, Down, Check } from '@icon-park/react'
import { useTableScroll } from '@/hooks/useAutoTable'
import { apiAddClient, queryClient } from '@/services/customer'
import { apiBatchLink } from '@/services/customer'
import styles from './index.less'
import { refactorSortField } from '@/utils/utils'

const Client = props => {
  const { toggleDrawer, setDrawerProps } = useModal()
  const {
    personTagColorMap,
    teamTagColorMap,
    personTags,
    teamTags,
    dispatch,
    shouldUpdate,
    loading
  } = props

  const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
  const tRef = useRef()
  const [tagState, setTagState] = useState({
    tagIds: [],
    tagCooperationIds: []
  })

  const tag = useMemo(() => {
    const personTagMap = {}
    const teamTagMap = {}
    const personOptions = []
    const teamOptions = []
    personTags.forEach(item => {
      // personOptions.push({ label: item.name, value: item.id })
      personTagMap[item.id] = {
        text: (
          <>
            <span
              className="w-12px h-12px inline-block rounded-1/2 mr-3px"
              style={{ backgroundColor: personTagColorMap[item.id] }}
            />
            <span>{item.name}</span>
          </>
        )
      }
    })

    teamTags.forEach(item => {
      // teamOptions.push({ label: item.name, value: item.id })
      teamTagMap[item.id] = {
        text: (
          <>
            <span
              className="w-12px h-12px inline-block mr-3px"
              style={{ backgroundColor: teamTagColorMap[item.id] }}
            />
            <span>{item.name}</span>
          </>
        )
      }
    })

    return { personTagMap, teamTagMap, personOptions, teamOptions }
  }, [loading])

  const toolbarOptionsChange = (type, ids) => {
    setTagState({ ...tagState, [type]: ids })
  }

  const [selectKeys, setSelectKeys] = useState([])
  const hanleRowSelectChange = selectedRowKeys => {
    setSelectKeys(selectedRowKeys)
  }

  const [state, setState] = useState({
    params: { dataPermission: 'oneself' },
    id: '',
    orderIds: []
  })

  // 重置到默认值，包括表单
  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) {
      message.success(msg)
      initData()
    }
  }

  // 展示drawer
  const showDrawer = id => {
    setDrawerProps({
      closable: true,
      onClose: () => toggleDrawer(),
      bodyStyle: {
        height: '100vh',
        overflowY: 'hidden'
      },
      children: <ContactDetail dataId={id} orderIds={state.orderIds} />
    })
    toggleDrawer()
  }

  // 展示客户
  const showDrawerComapny = id => {
    setDrawerProps({
      closable: true,
      onClose: () => toggleDrawer(),
      bodyStyle: {
        height: '100vh',
        overflowY: 'hidden'
      },
      children: <CompanyDetail dataId={id} orderIds={state.orderIds} />
    })
    toggleDrawer()
  }

  const columns = [
    {
      title: '关键字',
      dataIndex: 'search',
      hideInTable: true,
      search: false
    },
    {
      title: '联系人',
      dataIndex: 'clientName',
      key: 'clientName',
      width: 50,
      fixed: 'left',
      render: (clientName, record) => (
        <span
          onClick={() => showDrawer(record.id)}
          className="text-primary cursor-pointer hover:text-[#967bbd]">
          {clientName}
        </span>
      ),
      sorter: (a, b) => a.clientName.localeCompare(b.clientName),
      search: false
    },
    {
      title: '客户名称',
      dataIndex: 'companyName',
      key: 'companyName',
      width: 150,
      ellipsis: true,
      render: (companyName, record) => (
        <span onClick={() => showDrawerComapny(record.companyId)} className={styles.textPurple}>
          {companyName}
        </span>
      ),
      sorter: (a, b) => a.companyName.localeCompare(b.companyName),
      search: false
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
      ellipsis: true,
      width: 75,
      search: false
    },
    // {
    //   title: '电话',
    //   dataIndex: 'phone',
    //   key: 'phone',
    //   width: 150
    // },
    {
      title: '手机',
      dataIndex: 'telephone',
      key: 'telephone',
      width: 75,
      search: false
    },
    {
      title: 'QQ',
      dataIndex: 'qq',
      key: 'qq',
      width: 75,
      search: false
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      width: 75,
      search: false
    },
    {
      title: '职务',
      dataIndex: 'position',
      key: 'position',
      width: 75,
      search: false
    },
    {
      title: '办公室',
      dataIndex: 'office',
      key: 'office',
      width: 75,
      ellipsis: true,
      search: false
    },
    {
      title: '地区',
      dataIndex: 'districtName',
      key: 'districtName',
      width: 75,
      search: false
    },
    {
      title: '个人标签',
      dataIndex: 'tagIds',
      key: 'tagIds',
      width: 60,
      filters: true,
      search: false,
      // onFilter: true,
      valueEnum: tag.personTagMap,
      // valueType: 'select',
      // fieldProps: {
      //   mode: 'multiple',
      //   options: tag.personOptions,
      //   showArrow: true
      // },
      render: (_, record) => (
        <div className="flex items-center flex-wrap">
          {record.tagIds.map(item => (
            <Tooltip title={personTags.find(i => i.id === item)?.name} key={record.id + item}>
              <span
                className="inline-block w-12px h-12px rounded-1/2 mr-3px"
                style={{ backgroundColor: personTagColorMap[item] }}
              />
            </Tooltip>
          ))}
          <PersonLabel
            dataId={record.id}
            tagIds={record.tagIds}
            tagType={TagTypeEnum.PERSONTAG}
            tagColumn={TagDataTypeEnum.CLIENT}
            checkCallBack={refreshData}
            modeType={LabelModeType.column}>
            <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
          </PersonLabel>
        </div>
      )
    },
    {
      title: '协作标签',
      dataIndex: 'tagCooperationIds',
      key: 'tagCooperationIds',
      width: 60,
      filters: true,
      search: false,
      valueEnum: tag.teamTagMap,
      // valueType: 'select',
      // fieldProps: {
      //   mode: 'multiple',
      //   options: tag.teamOptions,
      //   showArrow: true
      // },
      render: (_, record) => (
        <div className="flex items-center flex-wrap">
          {record.tagCooperationIds.map(item => (
            <Tooltip title={teamTags.find(i => i.id === item)?.name} key={record.id + item}>
              <span
                key={record.id + item}
                className="inline-block w-12px h-12px mr-3px"
                style={{ backgroundColor: teamTagColorMap[item] }}
              />
            </Tooltip>
          ))}
          <PersonLabel
            dataId={record.id}
            tagIds={record.tagCooperationIds}
            tagType={TagTypeEnum.TEAMTAG}
            tagColumn={TagDataTypeEnum.CLIENT}
            checkCallBack={refreshData}
            modeType={LabelModeType.column}>
            <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
          </PersonLabel>
        </div>
      )
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      ellipsis: true,
      width: 50,
      search: false
    },
    {
      title: '乘车',
      dataIndex: 'ride',
      key: 'ride',
      ellipsis: true,
      width: 50,
      search: false
    },
    {
      title: '地标',
      dataIndex: 'landmarks',
      key: 'landmarks',
      ellipsis: true,
      width: 50,
      search: false
    },
    {
      title: '住宿',
      dataIndex: 'stay',
      key: 'stay',
      ellipsis: true,
      width: 50,
      search: false
    },
    {
      title: '备注',
      dataIndex: 'mark',
      key: 'mark',
      ellipsis: true,
      width: 50,
      search: false
    },
    // {
    //   title: '软件锁',
    //   dataIndex: 'keynum',
    //   key: 'keynum',
    //   width: 50,
    //   render: keynum => <a>{keynum}</a>,
    //   search: false
    // },
    {
      title: '创建人',
      dataIndex: 'staffName',
      key: 'staffName',
      width: 50,
      search: false
    }
  ]

  const [columnsStateMap, setColumnsStateMap] = useState({
    phone: {
      show: false
    },
    qq: {
      show: false
    },
    position: {
      show: false
    },
    office: {
      show: false
    },
    local: {
      show: false
    },
    stay: {
      show: false
    },
    keynum: {
      show: false
    },
    mark: {
      show: false
    },
    ride: {
      show: false
    },
    landmarks: {
      show: false
    },
    address: {
      show: false
    },
    staffName: {
      show: false
    }
  })

  const { getScrollRef, redoHeight } = useTableScroll(columns, selectKeys)

  // 默认刷新一次列表请求数据
  useEffect(() => {
    // initData()
    if (!personTags.length) {
      dispatch({
        type: 'client/fetchTags',
        payload: { tagType: TagTypeEnum.PERSONTAG, tagColumn: TagDataTypeEnum.CLIENT }
      })
    }
    if (!teamTags.length) {
      dispatch({
        type: 'client/fetchTags',
        payload: { tagType: TagTypeEnum.TEAMTAG, tagColumn: TagDataTypeEnum.CLIENT }
      })
    }
    if (shouldUpdate) {
      tRef.current.reload()
    }
  }, [shouldUpdate])

  const handleSearch = value => {
    tRef.current.reset()
    setState({ ...state, params: { ...state.params, search: value } })
  }

  const onDistrictChange = value => {
    tRef.current.reset()
    const [province = '', city = '', area = ''] = value
    setState({ ...state, params: { ...state.params, province, city, area } })
  }

  // 批量设置-确认触发
  const tagsSettingConfirm = async clientIds => {
    if (tagState.tagIds.length) {
      await apiBatchLink({
        tagIds: tagState.tagIds,
        dataIds: clientIds,
        dataType: TagDataTypeEnum.CLIENT,
        tagType: TagTypeEnum.PERSONTAG
      })
    }
    if (tagState.tagCooperationIds.length) {
      await apiBatchLink({
        tagIds: tagState.tagCooperationIds,
        dataIds: clientIds,
        dataType: TagDataTypeEnum.CLIENT,
        tagType: TagTypeEnum.TEAMTAG
      })
    }
    refreshData()
  }

  const renderTableAlert = ({ selectedRowKeys }) => {
    return (
      <div className="flex flex-row">
        <div className="mr-5px">
          <PersonLabel
            tagType={TagTypeEnum.PERSONTAG}
            tagColumn={TagDataTypeEnum.CLIENT}
            checkCallBack={toolbarOptionsChange}
            modeType={LabelModeType.toolbar}>
            {tagState.tagIds.length ? (
              <Button>
                {tagState.tagIds.map(item => (
                  <span
                    key={item}
                    className="w-12px h-12px inline-block rounded-1/2 mr-3px"
                    style={{ backgroundColor: personTagColorMap[item] }}
                  />
                ))}
                <Down />
              </Button>
            ) : (
              <Button>
                个人标签
                <Down />
              </Button>
            )}
          </PersonLabel>
        </div>
        <div className="mr-5">
          <PersonLabel
            tagType={TagTypeEnum.TEAMTAG}
            tagColumn={TagDataTypeEnum.CLIENT}
            checkCallBack={toolbarOptionsChange}
            modeType={LabelModeType.toolbar}>
            {tagState.tagCooperationIds.length ? (
              <Button>
                {tagState.tagCooperationIds.map(item => (
                  <span
                    key={item}
                    className="w-12px h-12px inline-block mr-3px"
                    style={{ backgroundColor: teamTagColorMap[item] }}
                  />
                ))}
                <Down />
              </Button>
            ) : (
              <Button>
                协作标签
                <Down />
              </Button>
            )}
          </PersonLabel>
        </div>
        <Button onClick={() => tagsSettingConfirm(selectedRowKeys)}>
          <Check size={14} />
          确认
        </Button>
      </div>
    )
  }
  return (
    <div className={styles.contactContent}>
      <ProTable
        bordered
        params={state.params}
        actionRef={tRef}
        rowKey={record => record.id}
        columns={columns}
        request={async (params, sort, filter) => {
          const srotOrder = refactorSortField(sort)
          const {
            code = -1,
            data: { client = [], total = 0 }
          } = await queryClient({ ...params, ...srotOrder, ...filter })
          setState({ ...state, orderIds: client.map(item => item.id) })
          return {
            data: client,
            success: code === consts.RET_CODE.SUCCESS,
            total
          }
        }}
        tableAlertRender={renderTableAlert}
        rowSelection={{
          onChange: hanleRowSelectChange,
          type: 'checkbox',
          columnWidth: 25
        }}
        // search={false}
        search={{ filterType: 'light' }}
        toolbar={{
          search: (
            <Tooltip placement="bottom" title="输入联系人、客户名称、电话邮箱等">
              <Input.Search
                style={{ width: '300px' }}
                allowClear={true}
                placeholder={`在${
                  permData?.customer?.find(item => item.value === state.params.dataPermission)
                    ?.label
                }下搜索`}
                onSearch={handleSearch}
              />
            </Tooltip>
          ),
          // search: {
          //   allowClear: true,
          //   onSearch: handleSearch,
          //   placeholder: '输入联系人、客户名称、电话邮箱等'
          // },
          actions: [
            <LazyCascader
              key="lazyCascader"
              onChange={onDistrictChange}
              changeOnSelect={true}
              bordered={false}
              className="hover:bg-[rgba(0,0,0,0.1)]"
            />,
            <AddContact onConfirm={handleAddClient} key="addContactBtn" />
          ]
        }}
        headerTitle={
          <Select
            defaultValue="oneself"
            dropdownMatchSelectWidth={false}
            onChange={e => {
              setState({ ...state, params: { ...state.params, dataPermission: e } })
            }}
            options={permData?.customer || []}
          />
        }
        onLoadingChange={loadingStatus => {
          loadingStatus && redoHeight()
        }}
        scroll={getScrollRef}
        columnsStateMap={columnsStateMap}
        onColumnsStateChange={map => setColumnsStateMap(map)}
      />
    </div>
  )
}

export default connect(({ client, refresh, loading }) => ({
  personTagColorMap: client.personTagColorMap,
  personTags: client.personTags,
  teamTagColorMap: client.teamTagColorMap,
  teamTags: client.teamTags,
  loading: loading.models.client,
  shouldUpdate: refresh.client
}))(Client)