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, Tooltip } 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, TagDataTypeEnum, LabelModeType } from './components/PersonLabel/const'
import { Add, Down, Check } from '@icon-park/react'
import { apiBatchLink } from '@/services/customer'

const Company = props => {
  const {
    personTagColorMap,
    teamTagColorMap,
    personTags,
    teamTags,
    dispatch,
    shouldUpdate,
    loading
  } = 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 = {}
    const personOptions = []
    const teamOptions = []
    personTags.forEach(item => {
      personOptions.push({ label: item.name, value: item.id })
      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 => {
      teamOptions.push({ label: item.name, value: item.id })
      teamTagMap[item.id] = {
        text: (
          <>
            <span
              className="zh-square-icon zh-mg-right-3"
              style={{ backgroundColor: teamTagColorMap[item.id] }}
            />
            <span>{item.name}</span>
          </>
        )
      }
    })

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

  const [state, setState] = useState({
    id: '',
    params: {},
    visible: false,
    orderIds: []
  })
  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 }
      })
    }
    if (shouldUpdate) {
      tRef.current.reload()
      dispatch({
        type: 'refresh/company',
        payload: 'company'
      })
    }
  }, [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 } })
  }

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

  const columns = [
    {
      title: '客户名称',
      dataIndex: 'companyName',
      key: 'companyName',
      width: 150,
      search: false,
      sorter: (a, b) => a.companyName.localeCompare(b.companyName),
      render: (companyName, record) => (
        <span
          onClick={() => showDrawer(record.id)}
          className="text-primary cursor-pointer hover:text-[#967bbd]">
          {companyName}
        </span>
      )
    },
    {
      title: '地区',
      dataIndex: 'local',
      key: 'local',
      search: false,
      width: 100
    },
    {
      title: '个人标签',
      dataIndex: 'tagIds',
      width: 100,
      filters: true,
      valueEnum: tag.personTagMap,
      valueType: 'select',
      fieldProps: {
        mode: 'multiple',
        options: tag.personOptions,
        showArrow: true
      },
      render: (_, record) => (
        <div className="zh-align-center zh-flex-wrap">
          {record.tagIds.map(item => (
            <Tooltip title={personTags.find(i => i.id === item)?.name} key={record.id + item}>
              <span
                className="w-12px h-12px inline-block rounded-1/2 mr-1"
                style={{ backgroundColor: personTagColorMap[item] }}
              />
            </Tooltip>
          ))}
          <PersonLabel
            dataId={record.id}
            tagIds={record.tagIds}
            tagType={TagTypeEnum.PERSONTAG}
            tagColumn={TagDataTypeEnum.COMPANY}
            checkCallBack={refreshData}
            modeType={LabelModeType.column}>
            <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
          </PersonLabel>
        </div>
      )
    },
    {
      title: '协作标签',
      dataIndex: 'tagCooperationIds',
      key: 'tagCooperationIds',
      width: 80,
      filters: true,
      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="w-12px h-12px inline-block mr-1"
                style={{ backgroundColor: teamTagColorMap[item] }}
              />
            </Tooltip>
          ))}
          <PersonLabel
            dataId={record.id}
            tagIds={record.tagCooperationIds}
            tagType={TagTypeEnum.TEAMTAG}
            tagColumn={TagDataTypeEnum.COMPANY}
            checkCallBack={refreshData}
            modeType={LabelModeType.column}>
            <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
          </PersonLabel>
        </div>
      )
    },
    {
      title: '联系人',
      dataIndex: 'clientTotal',
      key: 'clientTotal',
      search: false,
      width: 80
    },
    {
      title: '公司性质',
      dataIndex: 'nature',
      key: 'nature',
      search: false,
      width: 80
    },
    {
      title: '公司地址',
      dataIndex: 'address',
      key: 'address',
      search: false,
      width: 80
    },
    {
      title: '公司传真',
      dataIndex: 'fax',
      key: 'fax',
      search: false,
      width: 80
    },
    {
      title: '网址',
      dataIndex: 'webservice',
      key: 'webservice',
      search: false,
      width: 80
    },
    {
      title: '乘车路线',
      dataIndex: 'ride',
      key: 'ride',
      search: false,
      width: 80
    },
    {
      title: '地标建筑',
      dataIndex: 'landmarks',
      key: 'landmarks',
      search: false,
      width: 80
    },
    {
      title: '参考住宿',
      dataIndex: 'stay',
      key: 'stay',
      search: false,
      width: 80
    },
    {
      title: '备注',
      dataIndex: 'remarks',
      key: 'remarks',
      search: false,
      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, redoHeight } = 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.tagCooperationIds,
        dataIds: clientIds,
        dataType: TagDataTypeEnum.COMPANY,
        tagType: TagTypeEnum.TEAMTAG
      })
    }
    refreshData()
  }

  const renderTableAlert = ({ selectedRowKeys }) => {
    return (
      <div className="flex flex-row">
        <div className="mr-5px">
          <PersonLabel
            tagType={TagTypeEnum.PERSONTAG}
            tagColumn={TagDataTypeEnum.COMPANY}
            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-5px">
          <PersonLabel
            tagType={TagTypeEnum.TEAMTAG}
            tagColumn={TagDataTypeEnum.COMPANY}
            checkCallBack={toolbarOptionsChange}
            modeType={LabelModeType.toolbar}>
            {tagState.tagCooperationIds.length ? (
              <Button>
                {tagState.tagCooperationIds.map(item => (
                  <span
                    key={item}
                    className="w-12px h-12px inline-block mr-1"
                    style={{ backgroundColor: teamTagColorMap[item] }}
                  />
                ))}
                <Down />
              </Button>
            ) : (
              <Button>
                协作标签
                <Down />
              </Button>
            )}
          </PersonLabel>
        </div>
        <Button onClick={() => tagsSettingConfirm(selectedRowKeys)}>
          <Check size={14} />
          确认
        </Button>
      </div>
    )
  }

  return (
    <ProTable
      rowKey={record => record.id}
      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 })
        setState({ ...state, orderIds: customer.map(item => item.id) })
        return {
          data: customer,
          success: code === consts.RET_CODE.SUCCESS,
          total
        }
      }}
      headerTitle="客户"
      bordered
      search={{ filterType: 'light' }}
      toolbar={{
        search: {
          allowClear: true,
          onSearch: handleSearch,
          placeholder: '输入客户名称、公司性质等'
        },
        actions: [
          <LazyCascader
            onChange={onDistrictChange}
            changeOnSelect={true}
            key="lazyCascader"
            className="hover:bg-[rgba(0,0,0,0.1)]"
            bordered={false}
          />,
          <AddCompany onConfirm={handleAddCompany} key="addCompanyBtn" />
        ]
      }}
      rowSelection={{
        onChange: hanleRowSelectChange,
        type: 'checkbox',
        columnWidth: 25
      }}
      onLoadingChange={loadingStatus => {
        loadingStatus && redoHeight()
      }}
      tableAlertRender={renderTableAlert}
      scroll={getScrollRef}
      columnsStateMap={columnsStateMap}
      onColumnsStateChange={map => setColumnsStateMap(map)}
      columns={columns}
    />
  )
}

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