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

import React, { useState, useEffect, useRef, useMemo } from 'react'
import ProTable from '@ant-design/pro-table'
import { useTableScroll } from '@/hooks/useAutoTable'
import { Button, message } from 'antd'
import { connect } from 'dva'
import consts from '@/consts'
import { queryCompany, apiAddCompany } from '@/services/company'
import LazyCascader from '@/components/LazyCascader'
import CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
import AddCompany from '@/pages/Customer/Company/components/AddCompany'
import { useModal } from '@/components/Modal'
import { formatValues } from '@/components/LazyCascader'
import PersonLabel from './components/PersonLabel'
import { TagTypeEnum } from './components/PersonLabel'
import { TagDataTypeEnum } from './components/PersonLabel'
import { LabelModeType } from './components/PersonLabel'
import { IconPark } from '@/components/SvgIcon'
import { apiBatchLink } from '@/services/customer'

const Company = props => {
  const { personTagColorMap, teamTagColorMap, personTags, teamTags, dispatch } = props
  const { toggleDrawer, setDrawerProps } = useModal()
  const tRef = useRef(null)
  const [selectKeys, setSelectKeys] = useState([])

  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 [state, setState] = useState({
    id: '',
    params: {},
    visible: false
  })
  const [addCompany, setAddCompany] = useState({
    visible: false,
    loading: false
  })

  // 重置到默认值，包括表单
  const initData = () => {
    tRef.current.reset()
  }

  // 刷新
  const refreshData = () => {
    tRef.current.reload()
  }

  const handleAddCompany = async values => {
    setAddCompany({ ...addCompany, loading: true })
    const params = formatValues(values)
    const { code = -1 } = await apiAddCompany(params)
    if (code === consts.RET_CODE.SUCCESS) {
      message.success('新增成功')
    }
    // 请求完了
    setAddCompany({ ...addCompany, loading: false, visible: false })
    initData()
  }

  useEffect(() => {
    if (!personTags.length) {
      dispatch({
        type: 'company/fetchTags',
        payload: { tagType: TagTypeEnum.PERSONTAG, tagColumn: TagDataTypeEnum.COMPANY }
      })
    }
    if (!teamTags.length) {
      dispatch({
        type: 'company/fetchTags',
        payload: { tagType: TagTypeEnum.TEAMTAG, tagColumn: TagDataTypeEnum.COMPANY }
      })
    }
  }, [])
  const handleSearch = value => {
    setState({ ...state, params: { ...state.params, search: value, current: 1 } })
  }
  const onDistrictChange = value => {
    const [province = '', city = '', area = ''] = value
    setState({ ...state, params: { ...state.params, current: 1, province, city, area } })
  }

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

  const columns = [
    {
      title: '客户名称',
      dataIndex: 'companyName',
      key: 'companyName',
      width: 150,
      render: (companyName, record) => <a onClick={() => showDrawer(record.id)}>{companyName}</a>
    },
    {
      title: '地区',
      dataIndex: 'local',
      key: 'local',
      width: 100
    },
    {
      title: '个人标签',
      dataIndex: 'biaoqian',
      key: 'biaoqian',
      width: 100,
      filters: true,
      valueEnum: tag.personTagMap,
      render: (_, record) => (
        <div className="zh-align-center zh-flex-wrap">
          {record.tagIds.map(item => (
            <span
              key={record.id + item}
              className="zh-circle-icon zh-mg-right-3"
              style={{ backgroundColor: personTagColorMap[item] }}
            />
          ))}
          <PersonLabel
            dataId={record.id}
            tagIds={record.tagIds}
            tagType={TagTypeEnum.PERSONTAG}
            tagColumn={TagDataTypeEnum.COMPANY}
            checkCallBack={refreshData}
            modeType={LabelModeType.column}>
            <IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
          </PersonLabel>
        </div>
      )
    },
    {
      title: '协作标签',
      dataIndex: 'tagCooperationIds',
      key: 'tagCooperationIds',
      width: 80,
      filters: true,
      valueEnum: tag.teamTagMap,
      render: (_, record) => (
        <div className="zh-align-center zh-flex-wrap">
          {record.tagCooperationIds.map(item => (
            <span
              key={record.id + item}
              className="zh-circle-icon zh-mg-right-3"
              style={{ backgroundColor: personTagColorMap[item] }}
            />
          ))}
          <PersonLabel
            dataId={record.id}
            tagIds={record.tagCooperationIds}
            tagType={TagTypeEnum.TEAM}
            tagColumn={TagDataTypeEnum.COMPANY}
            checkCallBack={refreshData}
            modeType={LabelModeType.column}>
            <IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
          </PersonLabel>
        </div>
      )
    },
    {
      title: '联系人',
      dataIndex: 'clientTotal',
      key: 'clientTotal',
      width: 80
    },
    {
      title: '公司性质',
      dataIndex: 'nature',
      key: 'nature',
      width: 80
    },
    {
      title: '公司地址',
      dataIndex: 'address',
      key: 'address',
      width: 80
    },
    {
      title: '公司传真',
      dataIndex: 'fax',
      key: 'fax',
      width: 80
    },
    {
      title: '网址',
      dataIndex: 'webservice',
      key: 'webservice',
      width: 80
    },
    {
      title: '乘车路线',
      dataIndex: 'ride',
      key: 'ride',
      width: 80
    },
    {
      title: '地标建筑',
      dataIndex: 'landmarks',
      key: 'landmarks',
      width: 80
    },
    {
      title: '参考住宿',
      dataIndex: 'stay',
      key: 'stay',
      width: 80
    },
    {
      title: '备注',
      dataIndex: 'remarks',
      key: 'remarks',
      width: 80
    }
  ]
  const [columnsStateMap, setColumnsStateMap] = useState({
    address: {
      show: false
    },
    nature: {
      show: false
    },
    fax: {
      show: false
    },
    webservice: {
      show: false
    },
    ride: {
      show: false
    },
    stay: {
      show: false
    },
    landmarks: {
      show: false
    },
    remarks: {
      show: false
    }
  })

  const hanleRowSelectChange = selectedRowKeys => {
    setSelectKeys(selectedRowKeys)
  }

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

  const { getScrollRef } = useTableScroll(columns, selectKeys)

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

  const renderTableAlert = ({ selectedRowKeys }) => {
    return (
      <div className="zh-flex-row">
        <div className="zh-mg-right-5">
          <PersonLabel
            tagType={TagTypeEnum.PERSONTAG}
            tagColumn={TagDataTypeEnum.COMPANY}
            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.COMPANY}
            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 (
    <div className="zh-container">
      <ProTable
        rowKey={record => record.id}
        search={false}
        actionRef={tRef}
        params={state.params}
        request={async (params, sort, filter) => {
          const {
            code = -1,
            data: { customer = [], total = 0 } = { customer: [], total: 0 }
          } = await queryCompany({ ...params, ...sort, ...filter })
          return {
            data: customer,
            success: code === consts.RET_CODE.SUCCESS,
            total
          }
        }}
        headerTitle="客户"
        bordered
        toolbar={{
          search: {
            allowClear: true,
            onSearch: handleSearch
          },
          actions: [
            <LazyCascader onChange={onDistrictChange} key="lazyCascader" />,
            <AddCompany onConfirm={handleAddCompany} key="addCompanyBtn" />
          ]
        }}
        rowSelection={{
          onChange: hanleRowSelectChange,
          type: 'checkbox'
        }}
        tableAlertRender={renderTableAlert}
        scroll={getScrollRef}
        columnsStateMap={columnsStateMap}
        onColumnsStateChange={map => setColumnsStateMap(map)}
        columns={columns}
      />
    </div>
  )
}

export default connect(({ company }) => ({
  personTagColorMap: company.personTagColorMap,
  personTags: company.personTags,
  teamTagColorMap: company.teamTagColorMap,
  teamTags: company.teamTags
}))(Company)