Skip to content

J
jinfa-platform
Commit 0b257e02 authored by Bill's avatar Bill
Browse files
Options

Merge branch 'fix0218' into 'v2-220218'

fix: 优化新增商品商品属性多选控件 See merge request linkseeks-design/pro-platform!20
parents 7bd7d662 bd431b04
Show whitespace changes
Inline Side-by-side
Showing with 245 additions and 3 deletions
src/pages/commodity/products/addProductsItem/productAttributeForm.tsx
View file @ 0b257e02
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,11 +252,25 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
message: intl.formatMessage({ id: 'commodity.products.addProductsItem.productAttributeForm.message' })
}]}
>
<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) => (
......@@ -181,6 +278,11 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
))
}
</Select>
</Col>
{/* <Col span={4}>
<Button type="link" onClick={() => addAtttributeValue(attrItem)}>新增属性值</Button>
</Col> */}
</Row>
</Form.Item>
}
{
......@@ -208,6 +310,13 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
message: intl.formatMessage({ id: 'commodity.products.addProductsItem.productAttributeForm.message' })
}]}
>
<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)}
disabled={_isDisabled}
......@@ -223,6 +332,11 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
}
</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 0 → 100644
View file @ 0b257e02
.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 0 → 100644
View file @ 0b257e02
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment