feat: 客户抽屉详情接入标签组件

src/pages/Customer/Company/components/CompanyDetail/CompanyForm.jsx

@@ -1,9 +1,23 @@
 import React from 'react'
-import { Row, Col } from 'antd'
+import { Row, Col, Tooltip } from 'antd'
 import EditableForm from '@/components/EditableForm'
+import PersonLabel from '../PersonLabel'
+import { TagTypeEnum } from '../PersonLabel'
+import { TagDataTypeEnum } from '../PersonLabel'
+import { LabelModeType } from '../PersonLabel'
+import { IconPark } from '@/components/SvgIcon'
+import { connect } from 'umi'
 
 const CompanyForm = props => {
-  const { customer } = props
+  const { customer, personTagColorMap, personTags, teamTagColorMap, teamTags, dispatch } = props
+
+  const refreshClient = () => {
+    dispatch({
+      type: 'refresh/commitAction',
+      payload: 'company'
+    })
+  }
+
   const columns = [
     {
       dataIndex: 'companyName',
@@ -61,6 +75,72 @@ const CompanyForm = props => {
       label: '备注',
       span: 24,
       editCellType: 'textarea'
+    },
+    {
+      dataIndex: 'tagIds',
+      label: '个人标签',
+      editCellType: 'custom',
+      customCell: (
+        <div className="editable-cell-value-wrap text-center flex flex-wrap items-center">
+          {customer.tagIds?.map(item => (
+            <Tooltip title={personTags.find(i => i.id === item)?.name} key={customer.id + item}>
+              <span
+                className="zh-circle-icon mr-3px"
+                style={{ backgroundColor: personTagColorMap[item] }}
+              />
+            </Tooltip>
+          ))}
+          <PersonLabel
+            dataId={customer.id}
+            tagIds={customer.tagIds}
+            tagType={TagTypeEnum.PERSONTAG}
+            tagColumn={TagDataTypeEnum.COMPANY}
+            checkCallBack={refreshClient}
+            modeType={LabelModeType.column}>
+            <IconPark
+              type="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">
+          {customer.tagCooperationIds?.map(item => (
+            <Tooltip title={teamTags.find(i => i.id === item)?.name} key={customer.id + item}>
+              <span
+                className="zh-square-icon mr-3px"
+                style={{ backgroundColor: teamTagColorMap[item] }}
+              />
+            </Tooltip>
+          ))}
+          <PersonLabel
+            dataId={customer.id}
+            tagIds={customer.tagCooperationIds}
+            tagType={TagTypeEnum.TEAMTAG}
+            tagColumn={TagDataTypeEnum.COMPANY}
+            checkCallBack={refreshClient}
+            modeType={LabelModeType.column}>
+            <IconPark
+              type="add"
+              theme="filled"
+              size="20"
+              fill="#868e96"
+              className="cursor-pointer"
+            />
+          </PersonLabel>
+        </div>
+      ),
+      span: 24
     }
   ]
   return (
@@ -87,4 +167,9 @@ const CompanyForm = props => {
   )
 }
 
-export default CompanyForm
+export default connect(({ company }) => ({
+  personTagColorMap: company.personTagColorMap,
+  personTags: company.personTags,
+  teamTagColorMap: company.teamTagColorMap,
+  teamTags: company.teamTags
+}))(CompanyForm)