Merge branch 'fix0218' into 'v2-220218'

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 } 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,
@@ -29,6 +32,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
   const [isClearFormAndDataInEdit, setIsClearFormAndDataInEdit] = useState<boolean>(false) // 编辑情况下 是否要清空商品属性表单数据和页面全局数据
   const productAttributeFormRef = useRef()
   const [attributeForm] = Form.useForm()
+  const [addForm] = Form.useForm()
   const { ProductStore } = store
   const {
     attributeLists,
@@ -38,6 +42,11 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
     clearProductDetailsUnitPriceAndPicListInEdit,
     setIsRecombination
   } = ProductStore
+  const [addVisible, setAddVisible] = useState<boolean>(false)
+  const [loading, setLoading] = useState<boolean>(false)
+  const currentRow = useRef<any>()
+  const [dataSource, setDataSource] = useState<any>([...attributesData])
+  const [newValue, setNewValue] = useState<string>()
 
   useEffect(() => {
     onRef(productAttributeFormRef)
@@ -143,6 +152,80 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
     setProductSelectAttribute(_selectAttributeByEdit)
   }
 
+  const addAtttributeValue = (record) => {
+    console.log(record)
+    currentRow.current = record
+    setAddVisible(true)
+    addForm.setFieldsValue({'name': record['name'], isEnable: true, id: record['id']})
+  }
+
+  const handleAdd = () => {
+    setLoading(true)
+    addForm.submit()
+  }
+
+  const addSubmit = (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)
+      }
+    })
+  }
+
+  const handleCancel = () => {
+    setAddVisible(false)
+    addForm.resetFields()
+    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
@@ -169,18 +252,37 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
               message: intl.formatMessage({ id: 'commodity.products.addProductsItem.productAttributeForm.message' })
             }]}
           >
-            <Select
-              disabled={_isDisabled}
-              placeholder={intl.formatMessage({ id: 'commodity.products.addProductsItem.productAttributeForm.placeholder.1' })}
-              allowClear
-              onChange={(v) => onChange(v, attrItem)}
-            >
-              {
-                attrItem?.customerAttributeValueList.length > 0 && attrItem.customerAttributeValueList.map((item: any) => (
-                  <Option key={item.id} value={item.id}>{item.value}</Option>
-                ))
-              }
-            </Select>
+            <Row>
+              <Col span={20}>
+                <Select
+                  disabled={_isDisabled}
+                  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) => (
+                      <Option key={item.id} value={item.id}>{item.value}</Option>
+                    ))
+                  }
+                </Select>
+              </Col>
+              {/* <Col span={4}>
+                <Button type="link" onClick={() => addAtttributeValue(attrItem)}>新增属性值</Button>
+              </Col> */}
+            </Row>
           </Form.Item>
         }
         {
@@ -208,21 +310,33 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
                 message: intl.formatMessage({ id: 'commodity.products.addProductsItem.productAttributeForm.message' })
               }]}
             >
-              <Checkbox.Group
+              <CircleCheckbox
                 onChange={(v) => onChange(v, attrItem)}
-                disabled={_isDisabled}
-                style={{ width: "100%" }}
-              >
-                <Row>
-                  {
-                    attrItem?.customerAttributeValueList.length > 0 && attrItem.customerAttributeValueList.map((item: any, index: string) => (
-                      <Col span={6} key={item.id}>
-                        <Checkbox value={item.id}>{item.value}</Checkbox>
-                      </Col>
-                    ))
-                  }
-                </Row>
-              </Checkbox.Group>
+                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)}
+                    disabled={_isDisabled}
+                    style={{ width: "100%" }}
+                  >
+                    <Row>
+                      {
+                        attrItem?.customerAttributeValueList.length > 0 && attrItem.customerAttributeValueList.map((item: any, index: string) => (
+                          <Col span={6} key={item.id}>
+                            <Checkbox value={item.id}>{item.value}</Checkbox>
+                          </Col>
+                        ))
+                      }
+                    </Row>
+                  </Checkbox.Group>
+                </Col>
+                <Col span={4}>
+                  <Button type="link" onClick={() => addAtttributeValue(attrItem)}>新增属性值</Button>
+                </Col>
+              </Row> */}
             </Form.Item>
           )
         }
@@ -264,7 +378,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
     >
       <Tabs defaultActiveKey="1" tabPosition="left">
         {
-          attributesData?.length > 0 && attributesData.map(attributeItem =>
+          dataSource?.length > 0 && dataSource.map(attributeItem =>
             !productInfoByEdit?.isUpdateAttribute && (attributeItem?.createTime > productInfoByEdit?.createTime) ? null : <TabPane tab={attributeItem.name} key={attributeItem.id}>
               {
                 renderTabPanchildren(attributeItem)
@@ -274,7 +388,44 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
         }
       </Tabs>
     </Form>
-    {attributesData?.length === 0 && <span style={{ opacity: 0.6 }}>{intl.formatMessage({ id: 'commodity.products.addProductsItem.productAttributeForm.none' })}</span>}
+    {dataSource?.length === 0 && <span style={{ opacity: 0.6 }}>{intl.formatMessage({ id: 'commodity.products.addProductsItem.productAttributeForm.none' })}</span>}
+    <Modal
+      title="增加属性值"
+      visible={addVisible}
+      onOk={handleAdd}
+      forceRender={true}
+      confirmLoading={loading}
+      onCancel={handleCancel}
+    >
+      <Form
+        {...layout}
+        form={addForm}
+        name="add-form"
+        labelAlign="left"
+        colon={false}
+        onFinish={addSubmit}
+      >
+        <Form.Item
+          name='id'
+          label='属性ID'
+          style={{display:'none'}}
+        >
+          <Input disabled={true} />
+        </Form.Item>
+        <Form.Item
+          name='name'
+          label='属性名称'
+        >
+          <Input disabled={true} />
+        </Form.Item>
+        <Form.Item
+          name='value'
+          label='属性值名称'
+        >
+          <Input placeholder="请输入属性值" />
+        </Form.Item>
+      </Form>
+    </Modal>
   </>)
 }
 

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