cldV2react/src/pages/Customer/Contact/components/ContactDetail/ContanctForm.jsx

import { Row, Col, Tooltip } from 'antd'
import React from 'react'
import EditableForm from '@/components/EditableForm'
import ChangeCompanyInput from '@/pages/customer/Contact/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 } = props
  const changeCopInputData = {
    customerName: client.companyName,
    customerId: client.companyId,
    targetName: client.clientName,
    dataId: client.id
  }

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

  const columns = [
    {
      dataIndex: 'clientName',
      label: '姓名',
      span: 24
    },
    {
      dataIndex: 'districtIds',
      label: '联系人地区',
      editCellType: 'cascader',
      span: 24
    },
    {
      dataIndex: 'companyName',
      label: '客户名称',
      editCellType: 'custom',
      customCell: <ChangeCompanyInput dataSource={changeCopInputData} />,
      span: 24
    },
    {
      dataIndex: 'gender',
      label: '性别',
      editCellType: 'select',
      span: 12
    },
    {
      dataIndex: 'niceName',
      label: '昵称',
      span: 12
    },
    {
      dataIndex: 'telephone',
      label: '手机',
      span: 12
    },
    {
      dataIndex: 'qq',
      label: 'QQ',
      span: 12
    },
    {
      dataIndex: 'phone',
      label: '电话',
      span: 12
    },
    {
      dataIndex: 'email',
      label: '邮箱',
      span: 12
    },
    {
      dataIndex: 'fax',
      label: '传真',
      span: 12
    },
    {
      dataIndex: 'department',
      label: '部门',
      span: 12
    },
    {
      dataIndex: 'position',
      label: '职务',
      span: 12
    },
    {
      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: '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="zh-circle-icon mr-3px"
                style={{ backgroundColor: personTagColorMap[item] }}
              />
            </Tooltip>
          ))}
          <PersonLabel
            dataId={client.id}
            tagIds={client.tagIds}
            tagType={TagTypeEnum.PERSONTAG}
            tagColumn={TagDataTypeEnum.CONTACT}
            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="zh-square-icon mr-3px"
                style={{ backgroundColor: teamTagColorMap[item] }}
              />
            </Tooltip>
          ))}
          <PersonLabel
            dataId={client.id}
            tagIds={client.tagCooperationIds}
            tagType={TagTypeEnum.TEAMTAG}
            tagColumn={TagDataTypeEnum.CONTACT}
            checkCallBack={refreshClient}
            modeType={LabelModeType.column}>
            <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
          </PersonLabel>
        </div>
      ),
      span: 24
    }
  ]

  return (
    <div>
      <Row>
        <Col span={8}>
          <h2 className="text-gray-500">联系人</h2>
        </Col>
        {/* className={[ 'text-right', styles.textMuted ]} */}
        <Col span={16} className="zh-text-right zh-gray">
          {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="contact"
      />
    </div>
  )
}

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