feat: editForm模式下个人标签组件引入适配

src/models/login.js

@@ -1,11 +1,11 @@
 import { stringify } from 'querystring'
 import { history } from 'umi'
 import { apiLogin } from '@/services/login'
-import { setAuthority } from '@/utils/authority'
+// import { setAuthority } from '@/utils/authority'
 import { getPageQuery } from '@/utils/utils'
 import { message } from 'antd'
 import consts from '@/consts'
-import { saveTokenId, saveUserAccount } from '@/basic/utils/common'
+import { saveTokenId } from '@/basic/utils/common'
 
 const Model = {
   namespace: 'login',
@@ -63,9 +63,8 @@ const Model = {
   },
   reducers: {
     changeLoginStatus(state, { payload }) {
-      console.log(payload)
       // setAuthority(payload.currentAuthority)
-      return { ...state, status: payload.code, userInfo: payload.data.userData }
+      return { ...state, status: payload.code }
     }
   }
 }

src/pages/Customer/Company/components/PersonLabel/index.jsx

@@ -77,10 +77,10 @@ const PersonLabel = props => {
   }, [tagType, tagColumn])
   const [checkedIds, setCheckedIds] = useState([])
   useEffect(() => {
-    if (modeType === LabelModeType.column && tagIds.length) {
+    if (modeType === LabelModeType.column) {
       setCheckedIds(tagIds)
     }
-  }, [tagIds])
+  }, [tagIds, dataId])
 
   const [showOkBtn, setShowOkBtn] = useState(false)
   const initData = () => {
@@ -103,9 +103,8 @@ const PersonLabel = props => {
       setShowOkBtn(false)
     }
   }
-
-  const menu = (
-    <div className="zh-mg-tb-7 zh-mg-lf-14">
+  const menu = () => (
+    <div className="my-7px mx-14px">
       <DropDownMenu
         checkedIds={checkedIds}
         setCheckedIds={setCheckedIds}
@@ -118,12 +117,12 @@ const PersonLabel = props => {
         checkCallBack={checkCallBack}
         initCallBack={initData}
       />
-      <div className="zh-mg-top-5">
+      <div className="mt-5px">
         {dropdownType === DropdownTypeEnum.check ? (
-          <div className="zh-justify-between">
+          <div className="flex justify-between">
             <span
               onClick={() => setDropdownType(DropdownTypeEnum.edit)}
-              className="zh-primary zh-pointer">
+              className="text-primary cursor-pointer">
               编辑标签
             </span>
             {modeType === LabelModeType.column && showOkBtn ? (
@@ -168,7 +167,6 @@ const DropDownMenu = props => {
     loading: false
   })
   const inputRef = useRef(null)
-
   const handleOnchange = async (e, id) => {
     const { checked } = e.target
     let canRender = true

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

@@ -1,16 +1,30 @@
-import { Row, Col } from 'antd'
+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 { IconPark } from '@/components/SvgIcon'
+import { TagTypeEnum } from '@/pages/customer/Company/components/PersonLabel'
+import { TagDataTypeEnum } from '@/pages/customer/Company/components/PersonLabel'
+import { LabelModeType } from '@/pages/customer/Company/components/PersonLabel'
 
 const ContanctForm = props => {
-  const { client } = props
+  const { client, personTagColorMap, personTags, teamTagColorMap, teamTags, dispatch } = props
   const changeCopInputData = {
     customerName: client.companyName,
     customerId: client.companyId,
     clientName: client.clientName,
     clientId: client.id
   }
+
+  const refreshClient = () => {
+    dispatch({
+      type: 'refresh/commitAction',
+      payload: 'contact'
+    })
+  }
+
   const columns = [
     {
       dataIndex: 'clientName',
@@ -111,17 +125,73 @@ const ContanctForm = 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">
+          {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}>
+            <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">
+          {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}>
+            <IconPark
+              type="add"
+              theme="filled"
+              size="20"
+              fill="#868e96"
+              className="cursor-pointer"
+            />
+          </PersonLabel>
+        </div>
+      ),
+      span: 24
     }
-    // {
-    //   dataIndex: 'gerenbiaoqian',
-    //   label: '个人标签',
-    //   span: 24
-    // },
-    // {
-    //   dataIndex: 'xiezuobiaoqian',
-    //   label: '协作标签',
-    //   span: 24
-    // }
   ]
 
   return (
@@ -149,4 +219,9 @@ const ContanctForm = props => {
   )
 }
 
-export default ContanctForm
+export default connect(({ contact }) => ({
+  personTagColorMap: contact.personTagColorMap,
+  personTags: contact.personTags,
+  teamTagColorMap: contact.teamTagColorMap,
+  teamTags: contact.teamTags
+}))(ContanctForm)

src/pages/Customer/Contact/index.jsx

@@ -236,11 +236,11 @@ const Contact = props => {
         showArrow: true
       },
       render: (_, record) => (
-        <div className="zh-align-center zh-flex-wrap">
+        <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="zh-circle-icon zh-mg-right-3"
+                className="zh-circle-icon mr-3px"
                 style={{ backgroundColor: personTagColorMap[item] }}
               />
             </Tooltip>
@@ -252,7 +252,13 @@ const Contact = props => {
             tagColumn={TagDataTypeEnum.CONTACT}
             checkCallBack={refreshData}
             modeType={LabelModeType.column}>
-            <IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
+            <IconPark
+              type="add"
+              theme="filled"
+              size="20"
+              fill="#868e96"
+              className="cursor-pointer"
+            />
           </PersonLabel>
         </div>
       )
@@ -272,12 +278,12 @@ const Contact = props => {
         showArrow: true
       },
       render: (_, record) => (
-        <div className="zh-align-center zh-flex-wrap">
+        <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="zh-square-icon zh-mg-right-3"
+                className="zh-square-icon mr-3px"
                 style={{ backgroundColor: teamTagColorMap[item] }}
               />
             </Tooltip>
@@ -289,7 +295,13 @@ const Contact = props => {
             tagColumn={TagDataTypeEnum.CONTACT}
             checkCallBack={refreshData}
             modeType={LabelModeType.column}>
-            <IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
+            <IconPark
+              type="add"
+              theme="filled"
+              size="20"
+              fill="#868e96"
+              className="cursor-pointer"
+            />
           </PersonLabel>
         </div>
       )
@@ -483,8 +495,8 @@ const Contact = props => {
 
   const renderTableAlert = ({ selectedRowKeys }) => {
     return (
-      <div className="zh-flex-row">
-        <div className="zh-mg-right-5">
+      <div className="flex flex-row">
+        <div className="mr-5px">
           <PersonLabel
             tagType={TagTypeEnum.PERSONTAG}
             tagColumn={TagDataTypeEnum.CONTACT}
@@ -495,7 +507,7 @@ const Contact = props => {
                 {tagState.tagIds.map(item => (
                   <span
                     key={item}
-                    className="zh-circle-icon zh-mg-right-3"
+                    className="zh-circle-icon mr-3"
                     style={{ backgroundColor: personTagColorMap[item] }}
                   />
                 ))}
@@ -509,7 +521,7 @@ const Contact = props => {
             )}
           </PersonLabel>
         </div>
-        <div className="zh-mg-right-5">
+        <div className="mr-5">
           <PersonLabel
             tagType={TagTypeEnum.TEAMTAG}
             tagColumn={TagDataTypeEnum.CONTACT}
@@ -520,7 +532,7 @@ const Contact = props => {
                 {tagState.tagCooperationIds.map(item => (
                   <span
                     key={item}
-                    className="zh-square-icon zh-mg-right-3"
+                    className="zh-square-icon mr-3"
                     style={{ backgroundColor: teamTagColorMap[item] }}
                   />
                 ))}