fix: 优化新增商品商品属性多选控件

src/pages/commodity/products/addProductsItem/productAttributeForm.tsx

 import React, { useState, useEffect, useRef } from 'react'
 import { history, useIntl } from 'umi'
-import { Form, Select, Checkbox, Tabs, Input, DatePicker, Row, Col, Button, Modal } from 'antd'
+import { Form, Select, Checkbox, Tabs, Input, DatePicker, Row, Col, Button, Modal, Divider, Space, Typography } from 'antd'
 import { inject, observer } from 'mobx-react'
 import { store } from '@/store'
 import { validatorByte } from '@/utils/regExp'
+import { PlusOutlined } from '@ant-design/icons'
+import CircleCheckbox from '../components/circleCheckbox'
+import { postProductCustomerSaveOrUpdateCustomerAttributeValue } from '@/services/ProductV2Api'
 
 const layout: any = {
   colon: false,
@@ -43,6 +46,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
   const [loading, setLoading] = useState<boolean>(false)
   const currentRow = useRef<any>()
   const [dataSource, setDataSource] = useState<any>([...attributesData])
+  const [newValue, setNewValue] = useState<string>()
 
   useEffect(() => {
     onRef(productAttributeFormRef)
@@ -152,7 +156,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
     console.log(record)
     currentRow.current = record
     setAddVisible(true)
-    addForm.setFieldsValue({'name': record['name'], isEnable: true, groupName: record['groupName']})
+    addForm.setFieldsValue({'name': record['name'], isEnable: true, id: record['id']})
   }
 
   const handleAdd = () => {
@@ -161,21 +165,29 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
   }
 
   const addSubmit = (values) => {
-    console.log(values, 'addSubmitvv')
-    console.log(dataSource)
-    // @todo 调用后台新增属性值接口 成功后写入属性值
-    const _dataSource = dataSource.map((item, index) => {
-      if(item.id === currentRow.current.id) {
-        item.customerAttributeValueList.push({
-          ...item.customerAttributeValueList[0],
-          id: 10086,
-          ...values,
+    postProductCustomerSaveOrUpdateCustomerAttributeValue({
+      customerAttribute: { id: values.id, name: values.name, groupName: currentRow.current.groupName },
+      isEnable: true,
+      value: values.value
+    }).then(({code, data}) => {
+      if(code === 1000) {
+        const _dataSource = dataSource.map((item) => {
+          if(item.id === currentRow.current.id) {
+            // @todo 调用后台新增属性值接口 成功后把返回的id写入属性值 目前随机数生成
+            item.customerAttributeValueList.push({
+              ...item.customerAttributeValueList[0],
+              id: parseInt(Math.random()*10000+''),
+              ...values,
+            })
+          }
+          return item
         })
+        console.log(_dataSource)
+        setDataSource([..._dataSource])
+        setAddVisible(false)
+        setLoading(false)
       }
-      return item
     })
-    console.log(_dataSource)
-    setDataSource([..._dataSource])
   }
 
   const handleCancel = () => {
@@ -184,6 +196,36 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
     setLoading(false)
   }
 
+  const onNameChange = (event) => {
+    setNewValue(event.target.value);
+  }
+
+  const addItem = (e, record) => {
+    e.preventDefault();
+    postProductCustomerSaveOrUpdateCustomerAttributeValue({
+      customerAttribute: { id: record.id, name: record.name, groupName: record.groupName },
+      isEnable: true,
+      value: newValue
+    }).then(({code, data}) => {
+      if(code === 1000) {
+        // @todo 调用后台新增属性值接口 成功后把返回的id写入属性值 目前随机数生成
+        const _dataSource = dataSource.map((item, index) => {
+          if(item.id === record.id) {
+            item.customerAttributeValueList.push({
+              ...item.customerAttributeValueList[0],
+              id: parseInt(Math.random()*10000+''),
+              value: newValue,
+            })
+          }
+          return item
+        })
+        console.log(_dataSource)
+        setDataSource([..._dataSource])
+        setNewValue('')
+      }
+    })
+  };
+
   const renderTabPanchildren = (attrItem: any) => {
     let _isPrice = null
     let _isUpdateAttribute = null
@@ -217,6 +259,18 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
                   placeholder={intl.formatMessage({ id: 'commodity.products.addProductsItem.productAttributeForm.placeholder.1' })}
                   allowClear
                   onChange={(v) => onChange(v, attrItem)}
+                  dropdownRender={menu => (
+                    <>
+                      {menu}
+                      <Divider style={{ margin: '8px 0' }} />
+                      <Space align="center" style={{ padding: '0 8px 4px' }}>
+                        <Input placeholder="请输入属性值" value={newValue} onChange={onNameChange} />
+                        <Typography.Link onClick={(e) => addItem(e, attrItem)} style={{ whiteSpace: 'nowrap' }}>
+                          <PlusOutlined /> 添加属性值
+                        </Typography.Link>
+                      </Space>
+                    </>
+                  )}
                 >
                   {
                     attrItem?.customerAttributeValueList.length > 0 && attrItem.customerAttributeValueList.map((item: any) => (
@@ -225,9 +279,9 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
                   }
                 </Select>
               </Col>
-              <Col span={4}>
+              {/* <Col span={4}>
                 <Button type="link" onClick={() => addAtttributeValue(attrItem)}>新增属性值</Button>
-              </Col>
+              </Col> */}
             </Row>
           </Form.Item>
         }
@@ -256,7 +310,12 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
                 message: intl.formatMessage({ id: 'commodity.products.addProductsItem.productAttributeForm.message' })
               }]}
             >
-              <Row>
+              <CircleCheckbox
+                onChange={(v) => onChange(v, attrItem)}
+                options={attrItem.customerAttributeValueList}
+                expandOperation={<Button style={{marginLeft: 8}} type="dashed" icon={<PlusOutlined />} onClick={() => addAtttributeValue(attrItem)}>新增</Button>}
+              />
+              {/* <Row>
                 <Col span={20}>
                   <Checkbox.Group
                     onChange={(v) => onChange(v, attrItem)}
@@ -277,7 +336,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
                 <Col span={4}>
                   <Button type="link" onClick={() => addAtttributeValue(attrItem)}>新增属性值</Button>
                 </Col>
-              </Row>
+              </Row> */}
             </Form.Item>
           )
         }
@@ -347,8 +406,8 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
         onFinish={addSubmit}
       >
         <Form.Item
-          name='groupName'
-          label='属性组名称'
+          name='id'
+          label='属性ID'
           style={{display:'none'}}
         >
           <Input disabled={true} />

src/pages/commodity/products/components/circleCheckbox/index.less

+.circleCheckbox {
+ display: flex;
+}
+.circleCheckboxUl {
+  list-style: none;
+  display: flex;
+  .circleCheckboxUlLi {
+    // height: 32px;
+    line-height: 32px;
+    background: #F5F6F7;
+    text-align: center;
+    border-radius: 4px;
+    margin: 0 8px;
+    padding: 0px 16px;
+    cursor: pointer;
+    span {
+      font-weight: 400;
+      font-size: 12px;
+      color: #5C626A;
+      text-align: center;
+    }
+  }
+  .active {
+    background: rgba(0,169,143,0.04);
+    border: 1px solid #00A98F;
+    span {
+      color: #00A98F;
+    }
+
+  }
+}

src/pages/commodity/products/components/circleCheckbox/index.tsx

+import React, { useState, useEffect, ReactNode } from 'react';
+import cx from 'classnames'
+import styles from './index.less'
+
+interface PriceInputProps {
+  value?: number[];
+  onChange?: (value: number[]) => void;
+  options: any;
+  expandOperation?: ReactNode
+}
+
+/**
+ * 新增商品 方形多选表单
+ * @returns
+ */
+
+const CircleCheckbox: React.FC<PriceInputProps> = ({ value = [], options = [], onChange, expandOperation = null }) => {
+  const [currentValue, setCurrentValue] = useState<number[]>([...value])
+
+  useEffect(() => {
+    onChange?.([...currentValue])
+  }, [currentValue])
+
+  const clickItem = (id) => {
+    const _value = [...currentValue]
+    if(_value.includes(id)) {
+      var index = _value.indexOf(id)
+    	if (index > -1) {
+    		_value.splice(index, 1)
+      }
+      setCurrentValue([..._value])
+    } else {
+      _value.push(id)
+      setCurrentValue([..._value])
+    }
+  }
+
+  return (options.length && <div className={styles.circleCheckbox}>
+      <ul className={styles.circleCheckboxUl}>
+        {
+          options.map((item: any, index: string) => ( <li
+            key={item.id}
+            className={currentValue.includes(item.id) ? cx(styles.active, styles.circleCheckboxUlLi) : styles.circleCheckboxUlLi}
+            onClick={()=>clickItem(item.id)}
+          >
+            <span>
+              {item.value}
+            </span>
+          </li>
+          ))
+        }
+        {
+          expandOperation
+        }
+      </ul>
+    </div>
+  )
+}
+
+export default CircleCheckbox