feat: 暂存商品新增可新增属性值功能

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 } from 'antd'
 import { inject, observer } from 'mobx-react'
 import { store } from '@/store'
 import { validatorByte } from '@/utils/regExp'
@@ -29,6 +29,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 +39,10 @@ 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])
 
   useEffect(() => {
     onRef(productAttributeFormRef)
@@ -143,6 +148,42 @@ 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, groupName: record['groupName']})
+  }
+
+  const handleAdd = () => {
+    setLoading(true)
+    addForm.submit()
+  }
+
+  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,
+        })
+      }
+      return item
+    })
+    console.log(_dataSource)
+    setDataSource([..._dataSource])
+  }
+
+  const handleCancel = () => {
+    setAddVisible(false)
+    addForm.resetFields()
+    setLoading(false)
+  }
+
   const renderTabPanchildren = (attrItem: any) => {
     let _isPrice = null
     let _isUpdateAttribute = null
@@ -169,18 +210,25 @@ 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)}
+                >
+                  {
+                    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 +256,28 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
                 message: intl.formatMessage({ id: 'commodity.products.addProductsItem.productAttributeForm.message' })
               }]}
             >
-              <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>
+              <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 +319,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 +329,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='groupName'
+          label='属性组名称'
+          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>
   </>)
 }