feat: 增加filterTag，过滤掉columns 标签项

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

@@ -1,5 +1,5 @@
 import { Row, Col, Tooltip } from 'antd'
-import React, { useEffect } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import EditableForm from '@/components/EditableForm'
 import ChangeCompanyInput from '@/pages/Customer/Company/components/ChangeCompany'
 import { connect } from 'umi'
@@ -12,7 +12,15 @@ import {
 } from '@/pages/Customer/Company/components/PersonLabel/const'
 
 const ContanctForm = props => {
-  const { client, personTagColorMap, personTags, teamTagColorMap, teamTags, dispatch } = props
+  const {
+    client,
+    personTagColorMap,
+    personTags,
+    teamTagColorMap,
+    teamTags,
+    dispatch,
+    filterTag = false
+  } = props
   const changeCopInputData = {
     customerName: client.companyName,
     customerId: client.companyId,
@@ -42,163 +50,171 @@ const ContanctForm = props => {
     }
   }, [])
 
-  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: 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: '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
+  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} />,
+        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'
+      }
+    ]
+    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>