111

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

@@ -1,5 +1,5 @@
-import { Button, Checkbox, Dropdown, Popover } from 'antd'
-import React, { useState } from 'react'
+import { Button, Checkbox, Popover, Input } from 'antd'
+import React, { useState, useRef } from 'react'
 import { connect } from 'dva'
 import styles from './index.scss'
 import { apiConnOrDelTag } from '@/services/customer'
@@ -71,7 +71,10 @@ const PersonLabel = props => {
         ) : (
           <>
             <Button type="primary">确认</Button>
-            <Button type="default" className="zh-mg-left-5">
+            <Button
+              type="default"
+              className="zh-mg-left-5"
+              onClick={() => setDropdownType(DropdownTypeEnum.check)}>
               取消
             </Button>
           </>
@@ -100,7 +103,8 @@ const DropDownMenu = props => {
   } = props
   const [checkedIds, setCheckedIds] = useState(tagIds)
 
-  console.log('personTags', personTags)
+  const [activeId, setActiveId] = useState('')
+  const inputRef = useRef(null)
   const statusColors = {
     [TagTypeEnum.PERSONTAG]: [
       '#16A085',
@@ -136,6 +140,10 @@ const DropDownMenu = props => {
       checkCallBack && checkCallBack(ids)
     }
   }
+
+  const labelOnClick = id => {
+    setActiveId(id)
+  }
   return (
     <ul className={styles.labelContent}>
       {menuType === DropdownTypeEnum.check
@@ -162,8 +170,15 @@ const DropDownMenu = props => {
         : null}
       {menuType === DropdownTypeEnum.edit
         ? personTags.map((item, idx) => (
-            <li key={item.id} className={styles.menuItem}>
-              <div>
+            <li
+              key={item.id}
+              className={[
+                styles.menuItem,
+                styles.editMenuItem,
+                item.id === activeId ? styles.active : ''
+              ].join(' ')}
+              onClick={() => labelOnClick(item.id)}>
+              <div className={styles.editLabel}>
                 <div
                   className={[
                     styles.statusIcon,
@@ -171,7 +186,8 @@ const DropDownMenu = props => {
                   ].join(' ')}
                   style={{ backgroundColor: statusColors[tagType][idx] }}
                 />
-                <span>{item.name}</span>
+
+                {activeId === item.id ? <Input ref={inputRef} /> : <span>{item.name}</span>}
               </div>
             </li>
           ))

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

@@ -6,11 +6,13 @@
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
+    min-width: 200px;
     margin-bottom: 0.25rem;
     padding: 0;
     color: #666666;
     background-color: #ffffff;
     border: 1px solid #e5e5e5;
+    border-radius: 4px;
     box-shadow: 0 0.2rem 0.325rem rgb(0 0 0 / 4%);
     &:last-of-type {
       margin: 0;
@@ -29,6 +31,7 @@
     .editLabel {
       display: flex;
       align-items: center;
+      padding: 8px 14px;
     }
     .statusIcon {
       width: 12px;
@@ -48,4 +51,12 @@
       padding: 0.5rem 0.875rem;
     }
   }
+  .editMenuItem {
+    &:hover {
+      cursor: text;
+    }
+    &.active {
+      border: 1px solid #886ab5;
+    }
+  }
 }