feat: 调整companyLabel组件

src/models/company.js

@@ -1,6 +1,8 @@
 import consts from '@/consts'
-import { TagTypeEnum } from '@/pages/customer/Company/components/PersonLabel'
-import { LabelStatusColorMap } from '@/pages/customer/Company/components/PersonLabel'
+import {
+  LabelStatusColorMap,
+  TagTypeEnum
+} from '@/pages/customer/Company/components/PersonLabel/const'
 import { queryTagList } from '@/services/customer'
 
 export default {

src/models/contact.js

@@ -1,6 +1,8 @@
 import consts from '@/consts'
-import { TagTypeEnum } from '@/pages/customer/Company/components/PersonLabel'
-import { LabelStatusColorMap } from '@/pages/customer/Company/components/PersonLabel'
+import {
+  LabelStatusColorMap,
+  TagTypeEnum
+} from '@/pages/customer/Company/components/PersonLabel/const'
 import { queryTagList } from '@/services/customer'
 
 export default {

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

@@ -1,16 +1,29 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 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 { TagTypeEnum, TagDataTypeEnum, LabelModeType } from '../PersonLabel/const'
 import { IconPark } from '@/components/SvgIcon'
 import { connect } from 'umi'
 
 const CompanyForm = props => {
   const { customer, personTagColorMap, personTags, teamTagColorMap, teamTags, dispatch } = props
 
+  useEffect(() => {
+    if (!personTags.length) {
+      dispatch({
+        type: 'company/fetchTags',
+        payload: { tagType: TagTypeEnum.PERSONTAG, tagColumn: TagDataTypeEnum.COMPANY }
+      })
+    }
+    if (!teamTags.length) {
+      dispatch({
+        type: 'company/fetchTags',
+        payload: { tagType: TagTypeEnum.TEAMTAG, tagColumn: TagDataTypeEnum.COMPANY }
+      })
+    }
+  }, [])
+
   const refreshClient = () => {
     dispatch({
       type: 'refresh/commitAction',

src/pages/Customer/Company/components/PersonLabel/const.js

@@ -0,0 +1,41 @@
+export const DropdownTypeEnum = {
+  check: 0,
+  edit: 1
+}
+// 数据类型
+export const TagDataTypeEnum = {
+  CONTACT: 1, // 联系人
+  COMPANY: 2 // 客户
+}
+// 标签类型
+export const TagTypeEnum = {
+  PERSONTAG: 0, // 个人
+  TEAMTAG: 1 // 协作
+}
+export const LabelModeType = {
+  column: 0, // 列操作
+  toolbar: 1 // 常用于表格批量操作
+}
+
+export const LabelStatusColorMap = {
+  [TagTypeEnum.PERSONTAG]: [
+    '#16A085',
+    '#2980B9',
+    '#8E44AD',
+    '#f90000',
+    '#B8651B',
+    '#2C3E50',
+    '#efd200',
+    '#f47300'
+  ],
+  [TagTypeEnum.TEAMTAG]: [
+    '#F8AC59',
+    '#FF69B4',
+    '#999999',
+    '#7186ab',
+    '#778b72',
+    '#c292ca',
+    '#a14751',
+    '#57ECCC'
+  ]
+}

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

@@ -4,47 +4,13 @@ import { connect } from 'dva'
 import styles from './index.scss'
 import { apiConnOrDelTag, apiUpdateTag } from '@/services/customer'
 import consts from '@/basic/consts'
-
-const DropdownTypeEnum = {
-  check: 0,
-  edit: 1
-}
-// 数据类型
-export const TagDataTypeEnum = {
-  CONTACT: 1, // 联系人
-  COMPANY: 2 // 客户
-}
-// 标签类型
-export const TagTypeEnum = {
-  PERSONTAG: 0, // 个人
-  TEAMTAG: 1 // 协作
-}
-export const LabelModeType = {
-  column: 0, // 列操作
-  toolbar: 1 // 常用于表格批量操作
-}
-export const LabelStatusColorMap = {
-  [TagTypeEnum.PERSONTAG]: [
-    '#16A085',
-    '#2980B9',
-    '#8E44AD',
-    '#f90000',
-    '#B8651B',
-    '#2C3E50',
-    '#efd200',
-    '#f47300'
-  ],
-  [TagTypeEnum.TEAMTAG]: [
-    '#F8AC59',
-    '#FF69B4',
-    '#999999',
-    '#7186ab',
-    '#778b72',
-    '#c292ca',
-    '#a14751',
-    '#57ECCC'
-  ]
-}
+import {
+  DropdownTypeEnum,
+  LabelModeType,
+  LabelStatusColorMap,
+  TagDataTypeEnum,
+  TagTypeEnum
+} from './const'
 
 const PersonLabel = props => {
   const {
@@ -108,7 +74,7 @@ const PersonLabel = props => {
     }
   }
   const menu = () => (
-    <div className="my-7px mx-14px">
+    <div className="my-5px ">
       <DropDownMenu
         checkedIds={checkedIds}
         setCheckedIds={setCheckedIds}
@@ -126,7 +92,7 @@ const PersonLabel = props => {
           <div className="flex justify-between">
             <span
               onClick={() => setDropdownType(DropdownTypeEnum.edit)}
-              className="text-primary cursor-pointer">
+              className="text-primary cursor-pointer ml-3">
               编辑标签
             </span>
             {modeType === LabelModeType.column && showOkBtn ? (
@@ -219,11 +185,16 @@ const DropDownMenu = props => {
       }
     }
   }
+
   return (
     <ul className={styles.labelContent}>
       {menuType === DropdownTypeEnum.check
         ? tags.map((item, idx) => (
-            <li key={item.id} className={styles.menuItem}>
+            <li
+              key={item.id}
+              className={[styles.menuItem, checkedIds.includes(item.id) && styles.select].join(
+                ' '
+              )}>
               <div className={styles.labelText}>
                 <div
                   className={[

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

@@ -5,6 +5,11 @@
   :global(.ant-spin-container) {
     width: 100%;
   }
+  .select {
+    color: rgba(0, 0, 0, 0.85) !important;
+    font-weight: 600;
+    background-color: #eee6f5 !important;
+  }
   .menuItem {
     display: flex;
     flex-direction: row;
@@ -14,12 +19,16 @@
     padding: 0;
     color: #666666;
     background-color: #ffffff;
-    border: 1px solid #e5e5e5;
+    // border: 1px solid #e5e5e5;
     border-radius: 4px;
-    box-shadow: 0 0.2rem 0.325rem rgb(0 0 0 / 4%);
+    // box-shadow: 0 0.2rem 0.325rem rgba(0,0,0,0.04);
     &:last-of-type {
       margin: 0;
     }
+    &:hover {
+      background-color: #f5f5f5;
+    }
+    &
     .labelText {
       display: flex;
       align-items: center;

src/pages/Customer/Company/index.jsx

@@ -11,9 +11,7 @@ import AddCompany from '@/pages/customer/Company/components/AddCompany'
 import { useModal } from '@/components/Modal'
 import { formatValues } from '@/components/LazyCascader'
 import PersonLabel from './components/PersonLabel'
-import { TagTypeEnum } from './components/PersonLabel'
-import { TagDataTypeEnum } from './components/PersonLabel'
-import { LabelModeType } from './components/PersonLabel'
+import { TagTypeEnum, TagDataTypeEnum, LabelModeType } from './components/PersonLabel/const'
 import { IconPark } from '@/components/SvgIcon'
 import { apiBatchLink } from '@/services/customer'
 

src/pages/Customer/Contact/components/ChangeCompany/index.jsx

@@ -7,10 +7,11 @@ import SearchModal from '@/pages/customer/Contact/components/CustomerModal'
 import { apiDelCustomer } from '@/services/contact'
 import { useDispatch } from 'dva'
 import consts from '@/consts'
+import CompanyDetail from '@/pages/customer/Company/components/CompanyDetail'
 
 const ChangeCompanyInput = props => {
   const dispatch = useDispatch()
-  const { toggleModal, setModalProps } = useModal()
+  const { toggleModal, setModalProps, toggleDrawer, setDrawerProps } = useModal()
   const {
     dataSource: { customerId, clientId, customerName, clientName }
   } = props
@@ -55,6 +56,19 @@ const ChangeCompanyInput = props => {
     toggleModal()
   }
 
+  const handleCompanyClick = () => {
+    toggleDrawer()
+    setDrawerProps({
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh',
+        overflowY: 'hidden'
+      },
+      children: <CompanyDetail dataId={customerId} />
+    })
+    toggleDrawer()
+  }
   const normalValueRender = (
     <Card size="small">
       <div className="zh-flex-row zh-justify-between">
@@ -80,7 +94,14 @@ const ChangeCompanyInput = props => {
   )
   return (
     <div className={styles.companyInput}>
-      {customerId !== consts.ENCRYPTION_ZERO ? normalValueRender : notValueRender}
+      <span
+        onClick={() => {
+          if (customerId !== consts.ENCRYPTION_ZERO) {
+            handleCompanyClick()
+          }
+        }}>
+        {customerId !== consts.ENCRYPTION_ZERO ? normalValueRender : notValueRender}
+      </span>
     </div>
   )
 }

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

@@ -5,9 +5,11 @@ import ChangeCompanyInput from '@/pages/customer/Contact/components/ChangeCompan
 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'
+import {
+  TagTypeEnum,
+  TagDataTypeEnum,
+  LabelModeType
+} from '@/pages/customer/Company/components/PersonLabel/const'
 
 const ContanctForm = props => {
   const { client, personTagColorMap, personTags, teamTagColorMap, teamTags, dispatch } = props

src/pages/Customer/Contact/index.jsx

@@ -10,12 +10,14 @@ import LazyCascader from '@/components/LazyCascader'
 import { useModal } from '@/components/Modal'
 import { formatValues } from '@/components/LazyCascader'
 import PersonLabel from '../Company/components/PersonLabel'
-import { TagTypeEnum } from '../Company/components/PersonLabel'
-import { TagDataTypeEnum } from '../Company/components/PersonLabel'
+import {
+  TagTypeEnum,
+  TagDataTypeEnum,
+  LabelModeType
+} from '../Company/components/PersonLabel/const'
 import { IconPark } from '@/components/SvgIcon'
 import { useTableScroll } from '@/hooks/useAutoTable'
 import { apiAddClient, queryContact } from '@/services/contact'
-import { LabelModeType } from '../Company/components/PersonLabel'
 import { apiBatchLink } from '@/services/customer'
 import styles from './index.less'