cldV2react/src/pages/Customer/Client/components/ClientDetail/Form.jsx

import { Row, Col, Tooltip } from 'antd'
import React, { useEffect, useMemo } from 'react'
import EditableForm from '@/components/EditableForm'
import ChangeCompanyInput from '@/pages/Customer/Company/components/ChangeCompany'
import { connect } from 'umi'
import PersonLabel from '@/pages/Customer/Company/components/PersonLabel'
import { Add } from '@icon-park/react'
import {
  TagTypeEnum,
  TagDataTypeEnum,
  LabelModeType
} from '@/pages/Customer/Company/components/PersonLabel/const'

const ContanctForm = props => {
  const {
    client,
    personTagColorMap,
    personTags,
    teamTagColorMap,
    teamTags,
    dispatch,
    filterTag = false
  } = props
  const changeCopInputData = {
    customerName: client.companyName,
    customerId: client.companyId,
    targetName: client.clientName,
    dataId: client.id
  }

  const refreshClient = () => {
    dispatch({
      type: 'refresh/commitAction',
      payload: 'client'
    })
  }

  useEffect(() => {
    if (!personTags.length) {
      dispatch({
        type: 'client/fetchPersonTags',
        payload: { tagType: TagTypeEnum.PERSONTAG, tagColumn: TagDataTypeEnum.CLIENT }
      })
    }
    if (!teamTags.length) {
      dispatch({
        type: 'client/fetchTeamTags',
        payload: { tagType: TagTypeEnum.TEAMTAG, tagColumn: TagDataTypeEnum.CLIENT }
      })
    }
  }, [])

  const defaultCompanyValue = {
    districtIds: client.districtIds,
    address: client.address,
    ride: client.ride,
    stay: client.stay,
    landmarks: client.landmarks
  }

  const columns = useMemo(() => {
    const pColumns = [
      {
        dataIndex: 'clientName',
        label: '姓名',
        span: 24
      },
      {
        dataIndex: 'districtIds',
        label: '客户地区',
        editCellType: 'cascader',
        span: 24
      },
      {
        dataIndex: 'companyName',
        label: '单位名称',
        editCellType: 'custom',
        customCell: (
          <ChangeCompanyInput dataSource={changeCopInputData} defaultValue={defaultCompanyValue} />
        ),
        span: 24
      },
      {
        dataIndex: 'gender',
        label: '性别',
        editCellType: 'select',
        span: 24
      },
      {
        dataIndex: 'niceName',
        label: '昵称',
        span: 24
      },
      {
        dataIndex: 'telephone',
        label: '手机',
        span: 24
      },
      {
        dataIndex: 'qq',
        label: 'QQ',
        span: 24
      },
      {
        dataIndex: 'phone',
        label: '电话',
        span: 24
      },
      {
        dataIndex: 'email',
        label: '邮箱',
        span: 24
      },
      {
        dataIndex: 'fax',
        label: '传真',
        span: 24
      },
      {
        dataIndex: 'department',
        label: '部门',
        span: 24
      },
      {
        dataIndex: 'position',
        label: '职务',
        span: 24
      },
      {
        dataIndex: 'office',
        label: '办公室',
        span: 24,
        editCellType: 'textarea'
      },
      {
        dataIndex: 'address',
        label: '客户地址',
        span: 24,
        editCellType: 'textarea'
      },
      {
        dataIndex: 'ride',
        label: '客户乘车',
        span: 24,
        editCellType: 'textarea'
      },
      {
        dataIndex: 'landmarks',
        label: '客户地标',
        span: 24,
        editCellType: 'textarea'
      },
      {
        dataIndex: 'stay',
        label: '客户住宿',
        span: 24,
        editCellType: 'textarea'
      },
      {
        dataIndex: 'mark',
        label: '备注',
        span: 24,
        editCellType: 'textarea'
      },
      {
        dataIndex: 'priority',
        label: '优先级',
        span: 24,
        editCellType: 'select'
      },
      {
        dataIndex: 'sourceId',
        label: '来源',
        span: 24,
        editCellType: 'select'
      }
    ]
    if (!filterTag) {
      pColumns.push(
        {
          dataIndex: 'tagIds',
          label: '个人标签',
          editCellType: 'custom',
          customCell: (
            <div className="editable-cell-value-wrap text-center flex flex-wrap items-center">
              {client.tagIds?.map(item => (
                <Tooltip title={personTags.find(i => i.id === item)?.name} key={client.id + item}>
                  <span
                    className="inline-block w-12px h-12px rounded-1/2 mr-3px"
                    style={{ backgroundColor: personTagColorMap[item] }}
                  />
                </Tooltip>
              ))}
              <PersonLabel
                dataId={client.id}
                tagIds={client.tagIds}
                tagType={TagTypeEnum.PERSONTAG}
                tagColumn={TagDataTypeEnum.CLIENT}
                checkCallBack={refreshClient}
                modeType={LabelModeType.column}
              >
                <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
              </PersonLabel>
            </div>
          ),
          span: 24
        },
        {
          dataIndex: 'tagCooperationIds',
          label: '协作标签',
          editCellType: 'custom',
          customCell: (
            <div className="editable-cell-value-wrap text-center flex flex-wrap items-center">
              {client.tagCooperationIds?.map(item => (
                <Tooltip title={teamTags.find(i => i.id === item)?.name} key={client.id + item}>
                  <span
                    className="inline-block w-12px h-12px mr-3px"
                    style={{ backgroundColor: teamTagColorMap[item] }}
                  />
                </Tooltip>
              ))}
              <PersonLabel
                dataId={client.id}
                tagIds={client.tagCooperationIds}
                tagType={TagTypeEnum.TEAMTAG}
                tagColumn={TagDataTypeEnum.CLIENT}
                checkCallBack={refreshClient}
                modeType={LabelModeType.column}
              >
                <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
              </PersonLabel>
            </div>
          ),
          span: 24
        }
      )
    }
    return pColumns
  }, [client, !filterTag ? teamTags : null, !filterTag ? personTags : null])
  return (
    <div>
      <Row>
        <Col span={8}>
          <h2 className="text-gray-500">客户</h2>
        </Col>
        {/* className={[ 'text-right', styles.textMuted ]} */}
        <Col span={16} className="text-right text-gray-500">
          {client.staffName} 创建于{client.createTime}
        </Col>
        <Col span={22}>
          <h2 className="text-2xl pb-4">{client.clientName}</h2>
        </Col>
        <Col span={2} />
      </Row>
      <EditableForm
        dataSource={client}
        columns={columns}
        tartgetUrl="/client/update"
        type="client"
      />
    </div>
  )
}

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