feat: 标签列增加Tooltip提示

src/pages/Customer/Company/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react'
 import ProTable from '@ant-design/pro-table'
 import { useTableScroll } from '@/hooks/useAutoTable'
-import { Button, message } from 'antd'
+import { Button, message, Tooltip } from 'antd'
 import { connect } from 'dva'
 import consts from '@/consts'
 import { queryCompany, apiAddCompany } from '@/services/company'
@@ -30,7 +30,10 @@ const Company = props => {
   const tag = useMemo(() => {
     const personTagMap = {}
     const teamTagMap = {}
+    const personOptions = []
+    const teamOptions = []
     personTags.forEach(item => {
+      personOptions.push({ label: item.name, value: item.id })
       personTagMap[item.id] = {
         text: (
           <>
@@ -44,6 +47,7 @@ const Company = props => {
       }
     })
     teamTags.forEach(item => {
+      teamOptions.push({ label: item.name, value: item.id })
       teamTagMap[item.id] = {
         text: (
           <>
@@ -57,7 +61,7 @@ const Company = props => {
       }
     })
 
-    return { personTagMap, teamTagMap }
+    return { personTagMap, teamTagMap, personOptions, teamOptions }
   }, [personTags, teamTags, personTagColorMap, teamTagColorMap])
 
   const [state, setState] = useState({
@@ -134,6 +138,7 @@ const Company = props => {
       dataIndex: 'companyName',
       key: 'companyName',
       width: 150,
+      search: false,
       render: (companyName, record) => (
         <span
           onClick={() => showDrawer(record.id)}
@@ -146,6 +151,7 @@ const Company = props => {
       title: '地区',
       dataIndex: 'local',
       key: 'local',
+      search: false,
       width: 100
     },
     {
@@ -153,17 +159,23 @@ const Company = props => {
       dataIndex: 'biaoqian',
       key: 'biaoqian',
       width: 100,
-      filters: true,
-
-      valueEnum: tag.personTagMap,
+      // filters: true,
+      valueType: 'select',
+      fieldProps: {
+        mode: 'multiple',
+        options: tag.teamOptions,
+        showArrow: true
+      },
+      // valueEnum: tag.personTagMap,
       render: (_, record) => (
         <div className="zh-align-center zh-flex-wrap">
           {record.tagIds.map(item => (
-            <span
-              key={record.id + item}
-              className="zh-circle-icon zh-mg-right-3"
-              style={{ backgroundColor: personTagColorMap[item] }}
-            />
+            <Tooltip title={personTags.find(i => i.id === item)?.name} key={record.id + item}>
+              <span
+                className="zh-circle-icon zh-mg-right-3"
+                style={{ backgroundColor: personTagColorMap[item] }}
+              />
+            </Tooltip>
           ))}
           <PersonLabel
             dataId={record.id}
@@ -182,16 +194,24 @@ const Company = props => {
       dataIndex: 'tagCooperationIds',
       key: 'tagCooperationIds',
       width: 80,
-      filters: true,
-      valueEnum: tag.teamTagMap,
+      // filters: true,
+      // valueEnum: tag.teamTagMap,
+      valueType: 'select',
+      fieldProps: {
+        mode: 'multiple',
+        options: tag.teamOptions,
+        showArrow: true
+      },
       render: (_, record) => (
         <div className="zh-align-center zh-flex-wrap">
           {record.tagCooperationIds.map(item => (
-            <span
-              key={record.id + item}
-              className="zh-square-icon zh-mg-right-3"
-              style={{ backgroundColor: teamTagColorMap[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"
+                style={{ backgroundColor: teamTagColorMap[item] }}
+              />
+            </Tooltip>
           ))}
           <PersonLabel
             dataId={record.id}
@@ -209,54 +229,63 @@ const Company = props => {
       title: '联系人',
       dataIndex: 'clientTotal',
       key: 'clientTotal',
+      search: false,
       width: 80
     },
     {
       title: '公司性质',
       dataIndex: 'nature',
       key: 'nature',
+      search: false,
       width: 80
     },
     {
       title: '公司地址',
       dataIndex: 'address',
       key: 'address',
+      search: false,
       width: 80
     },
     {
       title: '公司传真',
       dataIndex: 'fax',
       key: 'fax',
+      search: false,
       width: 80
     },
     {
       title: '网址',
       dataIndex: 'webservice',
       key: 'webservice',
+      search: false,
       width: 80
     },
     {
       title: '乘车路线',
       dataIndex: 'ride',
       key: 'ride',
+      search: false,
       width: 80
     },
     {
       title: '地标建筑',
       dataIndex: 'landmarks',
       key: 'landmarks',
+      search: false,
       width: 80
     },
     {
       title: '参考住宿',
       dataIndex: 'stay',
       key: 'stay',
+      search: false,
       width: 80
     },
     {
       title: '备注',
       dataIndex: 'remarks',
       key: 'remarks',
+      search: false,
       width: 80
     }
   ]
@@ -382,7 +411,6 @@ const Company = props => {
   return (
     <ProTable
       rowKey={record => record.id}
-      search={false}
       actionRef={tRef}
       params={state.params}
       request={async (params, sort, filter) => {
@@ -398,6 +426,7 @@ const Company = props => {
       }}
       headerTitle="客户"
       bordered
+      search={{ filterType: 'light' }}
       toolbar={{
         search: {
           allowClear: true,

src/pages/Customer/Contact/index.jsx

@@ -1,7 +1,7 @@
 import ContactDetail from '@/pages/customer/Contact/components/ContactDetail'
 import Addcontact from '@/pages/customer/Contact/components/AddContact'
 import ProTable from '@ant-design/pro-table'
-import { Button, Card, message } from 'antd'
+import { Button, Card, message, Tag, Tooltip } from 'antd'
 import { connect } from 'dva'
 import React, { useEffect, useState, useRef, useMemo } from 'react'
 import consts from '@/consts'
@@ -20,7 +20,6 @@ import { apiBatchLink } from '@/services/customer'
 const Contact = props => {
   const { toggleDrawer, setDrawerProps } = useModal()
   const { personTagColorMap, teamTagColorMap, personTags, teamTags, dispatch } = props
-  // console.log(personTags, personTagColorMap)
 
   const tRef = useRef()
   const [tagState, setTagState] = useState({
@@ -31,7 +30,10 @@ const Contact = props => {
   const tag = useMemo(() => {
     const personTagMap = {}
     const teamTagMap = {}
+    const personOptions = []
+    const teamOptions = []
     personTags.forEach(item => {
+      personOptions.push({ label: item.name, value: item.id })
       personTagMap[item.id] = {
         text: (
           <>
@@ -44,7 +46,9 @@ const Contact = props => {
         )
       }
     })
+
     teamTags.forEach(item => {
+      teamOptions.push({ label: item.name, value: item.id })
       teamTagMap[item.id] = {
         text: (
           <>
@@ -58,7 +62,7 @@ const Contact = props => {
       }
     })
 
-    return { personTagMap, teamTagMap }
+    return { personTagMap, teamTagMap, personOptions, teamOptions }
   }, [personTags, teamTags, personTagColorMap, teamTagColorMap])
 
   const toolbarOptionsChange = (type, ids) => {
@@ -200,14 +204,21 @@ const Contact = props => {
       dataIndex: 'tagIds',
       key: 'tagIds',
       width: 60,
+      valueType: 'select',
+      fieldProps: {
+        mode: 'multiple',
+        options: tag.personOptions,
+        showArrow: true
+      },
       render: (_, record) => (
         <div className="zh-align-center zh-flex-wrap">
           {record.tagIds.map(item => (
-            <span
-              key={record.id + item}
-              className="zh-circle-icon zh-mg-right-3"
-              style={{ backgroundColor: personTagColorMap[item] }}
-            />
+            <Tooltip title={personTags.find(i => i.id === item)?.name} key={record.id + item}>
+              <span
+                className="zh-circle-icon zh-mg-right-3"
+                style={{ backgroundColor: personTagColorMap[item] }}
+              />
+            </Tooltip>
           ))}
           <PersonLabel
             dataId={record.id}
@@ -219,25 +230,32 @@ const Contact = props => {
             <IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
           </PersonLabel>
         </div>
-      ),
-      filters: true,
+      )
+      // filters: true
       // onFilter: true,
-      // valueType: 'option',
-      valueEnum: tag.personTagMap
+      // valueEnum: tag.personTagMap
     },
     {
       title: '协作标签',
       dataIndex: 'tagCooperationIds',
       key: 'tagCooperationIds',
       width: 60,
+      valueType: 'select',
+      fieldProps: {
+        mode: 'multiple',
+        options: tag.teamOptions,
+        showArrow: true
+      },
       render: (_, record) => (
         <div className="zh-align-center zh-flex-wrap">
           {record.tagCooperationIds.map(item => (
-            <span
-              key={record.id + item}
-              className="zh-square-icon zh-mg-right-3"
-              style={{ backgroundColor: teamTagColorMap[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"
+                style={{ backgroundColor: teamTagColorMap[item] }}
+              />
+            </Tooltip>
           ))}
           <PersonLabel
             dataId={record.id}
@@ -249,10 +267,10 @@ const Contact = props => {
             <IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
           </PersonLabel>
         </div>
-      ),
-      filters: true,
+      )
+      // filters: true,
       // valueType: 'select',
-      valueEnum: tag.teamTagMap
+      // valueEnum: tag.teamTagMap
     },
     {
       title: '地址',
@@ -522,8 +540,8 @@ const Contact = props => {
           onChange: hanleRowSelectChange,
           type: 'checkbox'
         }}
-        search={false}
-        // search={{ filterType: 'light' }}
+        // search={false}
+        search={{ filterType: 'light' }}
         toolbar={{
           search: {
             allowClear: true,