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

import { Input, Button, message, Tooltip } from 'antd'
import { connect, useAccess, useModel } from '@umijs/max'
import React, { useEffect, useState, useRef, useMemo } from 'react'
import consts from '@/consts'
import LazyCascader, { formatValues } from '@/components/LazyCascader'
import PersonLabel from '../Company/components/PersonLabel'
import { TagType, TagDataType, LabelModeType } from '../Company/components/PersonLabel/const'
import { Add, Down, Check } from '@icon-park/react'
import { apiAddClient, queryClient } from '@/services/customer'
import { apiBatchLink } from '@/services/customer'
import styles from './index.less'
import { PermDataTypeEunm } from '../Company/components/PermSelect'
import BasicTable from '@/components/Table'
import { getPermAuthCache } from '@/utils/auth'
import { useModal } from '@/components/ModalStore'
import { Plus } from '@icon-park/react'
import { PageContainer } from '@ant-design/pro-layout'
import { LoadingOutlined } from '@ant-design/icons'
const Client = props => {
  const dispatchModal = useModal()
  const {
    personTagColorMap,
    teamTagColorMap,
    personTags,
    teamTags,
    dispatch,
    shouldUpdate,
    loading,
    sourceList
  } = props

  const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
  const hasAddPerm = useAccess()?.validatePermByType('client_add') || false
  const tRef = useRef()
  const [tagState, setTagState] = useState({
    tagIds: [],
    tagCooperationIds: []
  })

  const [state, setState] = useState({
    loading: false,
    params: {},
    orderIds: []
  })

  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, shouldUpdate])

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

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

  const [defaultPermAuthCache] = getPermAuthCache(PermDataTypeEunm.CUSTOMER)

  // 重置到默认值，包括表单
  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()
    }
    return code === consts.RET_CODE.SUCCESS
  }

  const columns = [
    {
      title: '客户',
      dataIndex: 'clientName',
      key: 'clientName',
      width: 80,
      fixed: 'left',
      render: (clientName, record) => (
        <span
          onClick={() => dispatchModal('D_CLIENT_DETAIL', { dataId: record.id, orderIds: state.orderIds })}
          className="text-primary cursor-pointer hover:text-hex-967bbd">
          {clientName}
        </span>
      ),
      sorter: true,
      search: false
    },
    {
      title: '单位名称',
      dataIndex: 'companyName',
      key: 'companyName',
      width: 200,
      // ellipsis: true,
      render: (companyName, record) =>
        record.companyId ? (
          <span
            onClick={() => {
              dispatchModal('D_COMPANY_DETAIL', {
                updateKey: 'client',
                dataId: record.companyId,
                orderIds: state.orderIds
              })
            }}
            className="text-primary cursor-pointer hover:text-hex-967bbd">
            {companyName}
          </span>
        ) : (
          '-'
        ),
      sorter: true,
      search: false
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
      ellipsis: true,
      width: 70,
      search: false
    },
    {
      title: '职务',
      dataIndex: 'position',
      key: 'position',
      width: 75,
      search: false
    },
    {
      title: '办公室',
      dataIndex: 'office',
      key: 'office',
      width: 90,
      ellipsis: true,
      search: false
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
      width: 120,
      search: false,
      sorter: true
    },
    {
      title: '手机',
      dataIndex: 'telephone',
      key: 'telephone',
      width: 120,
      sorter: true,
      search: false
    },
    {
      title: '微信号',
      dataIndex: 'wechat',
      key: 'wechat',
      width: 120,
      search: false
    },
    {
      title: 'QQ',
      dataIndex: 'qq',
      key: 'qq',
      width: 120,
      sorter: true,
      search: false
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      width: 165,
      sorter: true,
      // ellipsis: true,
      search: false
    },
    {
      title: '地区',
      dataIndex: 'districtName',
      key: 'districtName',
      width: 120,
      search: false,
      // ellipsis: true,
      // filterDropdown: filterDropdownProps => <FilterCascader {...filterDropdownProps} />,
      renderText: text => text?.replaceAll(' / ', ' , ')
    },
    {
      title: '个人标签',
      dataIndex: 'tagIds',
      key: 'tagIds',
      width: 160,
      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 mb-3px"
                style={{ backgroundColor: personTagColorMap[item] }}
              />
            </Tooltip>
          ))}
          <PersonLabel
            dataId={record.id}
            tagIds={record.tagIds}
            tagType={TagType.PERSONTAG}
            tagColumn={TagDataType.CLIENT}
            checkCallBack={refreshData}
            modeType={LabelModeType.column}>
            <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
          </PersonLabel>
        </div>
      )
    },
    {
      title: '协作标签',
      dataIndex: 'tagCooperationIds',
      key: 'tagCooperationIds',
      width: 160,
      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 mb-3px"
                style={{ backgroundColor: teamTagColorMap[item] }}
              />
            </Tooltip>
          ))}
          <PersonLabel
            dataId={record.id}
            tagIds={record.tagCooperationIds}
            tagType={TagType.TEAMTAG}
            tagColumn={TagDataType.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: 150,
      sorter: true,
      search: false
    },
    {
      title: '乘车',
      dataIndex: 'ride',
      key: 'ride',
      ellipsis: true,
      width: 80,
      search: false
    },
    {
      title: '地标',
      dataIndex: 'landmarks',
      key: 'landmarks',
      ellipsis: true,
      width: 80,
      search: false
    },
    {
      title: '住宿',
      dataIndex: 'stay',
      key: 'stay',
      ellipsis: true,
      width: 80,
      search: false
    },
    {
      title: '来源',
      dataIndex: 'sourceName',
      key: 'sourceName',
      width: 80,
      search: false,
      filters: true,
      filterMultiple: false,
      valueEnum: sourceList.reduce((prev, curr) => {
        prev[curr.value] = { text: curr.label }
        return prev
      }, {})
    },
    {
      title: '备注',
      dataIndex: 'mark',
      key: 'mark',
      ellipsis: true,
      width: 80,
      search: false
    },
    // {
    //   title: '软件锁',
    //   dataIndex: 'keynum',
    //   key: 'keynum',
    //   width: 50,
    //   render: keynum => <a>{keynum}</a>,
    //   search: false
    // },
    {
      title: '创建人',
      dataIndex: 'staffName',
      key: 'staffName',
      width: 80,
      search: false
    }
  ]

  const columnsStateMap = {
    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
    },
    sourceName: {
      show: false
    }
  }

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

  const onDistrictChange = value => {
    if (!value) return
    tRef.current.reloadAndRest()
    const [province = '', city = '', area = ''] = value || []
    setState({ ...state, params: { ...state.params, province, city, area } })
  }

  // 批量设置-确认触发
  const tagsSettingConfirm = async clientIds => {
    setState({ ...state, loading: true })
    let requestSuccess = true
    if (tagState.tagIds.length) {
      const { code = -1 } = await apiBatchLink({
        tagIds: tagState.tagIds,
        dataIds: clientIds,
        dataType: TagDataType.CLIENT,
        tagType: TagType.PERSONTAG
      })
      if (code !== consts.RET_CODE.SUCCESS) {
        requestSuccess = false
      }
    }
    if (tagState.tagCooperationIds.length) {
      const { code = -1 } = await apiBatchLink({
        tagIds: tagState.tagCooperationIds,
        dataIds: clientIds,
        dataType: TagDataType.CLIENT,
        tagType: TagType.TEAMTAG
      })
      if (code !== consts.RET_CODE.SUCCESS) {
        requestSuccess = false
      }
    }
    setState({ ...state, loading: false })
    requestSuccess && refreshData()
  }

  const renderTableAlert = ({ selectedRowKeys }) => {
    return (
      <div className="flex flex-row">
        <div className="mr-5px">
          <PersonLabel
            tagType={TagType.PERSONTAG}
            tagColumn={TagDataType.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={TagType.TEAMTAG}
            tagColumn={TagDataType.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)}
          icon={state.loading ? <LoadingOutlined /> : <Check size={14} />}
        />
      </div>
    )
  }
  return (
    <PageContainer title={false} breadcrumb={false}>
      <div className={styles.contactContent}>
        <BasicTable
          mainMenuType="customer"
          columnStateType="CLIENT"
          params={state.params}
          actionRef={tRef}
          rowKey={record => record.id}
          columns={columns}
          request={async (params, sort, filter) => {
            const {
              code = -1,
              data: { client = [], total = 0 }
            } = await queryClient({ ...params, ...sort, ...filter })
            setState({ ...state, orderIds: client.map(item => item.id) })
            return {
              data: client,
              success: code === consts.RET_CODE.SUCCESS,
              total
            }
          }}
          tableAlertRender={renderTableAlert}
          rowSelection={{
            type: 'checkbox',
            columnWidth: 25
          }}
          search={{ filterType: 'light' }}
          toolbar={{
            search: (
              <Tooltip placement="bottom" title="输入客户、单位名称、电话邮箱等">
                <Input.Search
                  style={{ width: '250px' }}
                  allowClear={true}
                  placeholder={`在${
                    permData[PermDataTypeEunm.CUSTOMER]?.find(item => item.value === defaultPermAuthCache)
                      ?.label
                  }下搜索`}
                  onSearch={handleSearch}
                />
              </Tooltip>
            ),

            actions: [
              <LazyCascader
                key="lazyCascader"
                onChange={onDistrictChange}
                changeOnSelect={true}
                bordered={false}
                showFooter={true}
                className="hover:bg-[rgba(0,0,0,0.1)]"
              />,
              <Button
                type="primary"
                key="addClientBtn"
                disabled={!hasAddPerm}
                onClick={() =>
                  dispatchModal('M_CLIENT_ADD', {
                    onConfirm: handleAddClient,
                    reload: () => tRef.current?.reload()
                  })
                }>
                <Plus className="mr-1" />
                客户
              </Button>
            ]
          }}
          columnsStateMap={columnsStateMap}
        />
      </div>
    </PageContainer>
  )
}

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