Skip to content

J
jinfa-platform
Commit 3e410bcf authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

fix

parent fe52fe33
Hide whitespace changes
Inline Side-by-side
Showing with 505 additions and 285 deletions
src/module/productModule/index.ts 0 → 100644
View file @ 3e410bcf
export interface IProductModule {
productName: string;
productSelectAttribute: any[];
selectedGoods: any[];
tableDataSource: any[];
setProductName(name: string):void;
setProductSelectAttribute(list: any[]):void;
setSelectedGoods(lists: any[]):void;
setTableDataSource(datas: any[]):void;
}
src/pages/commodity/products/addProducts.tsx
View file @ 3e410bcf
import React, { useState, useRef, useEffect } from 'react' import React, { useState, useRef, useEffect, createContext } from 'react'
import { history } from 'umi'; import { history } from 'umi';
import { Button, Card, Tabs } from 'antd' import { Button, Card, Tabs } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout' import { PageHeaderWrapper } from '@ant-design/pro-layout'
...@@ -21,9 +21,12 @@ const { TabPane } = Tabs ...@@ -21,9 +21,12 @@ const { TabPane } = Tabs
const AddProducts: React.FC<{}> = (props) => { const AddProducts: React.FC<{}> = (props) => {
const [attributeList, setAttributeList] = useState<any[]>([]) const [attributeList, setAttributeList] = useState<any[]>([])
let [formRefs, setFormRefs] = useState([]) //子form的ref数组
const onSave = () => { const onSave = () => {
console.log('点击保存') console.log('点击保存')
console.log(formRefs, 'formrefs')
} }
const callback = (key: any) => { const callback = (key: any) => {
...@@ -45,16 +48,23 @@ const AddProducts: React.FC<{}> = (props) => { ...@@ -45,16 +48,23 @@ const AddProducts: React.FC<{}> = (props) => {
<Card> <Card>
<Tabs onChange={callback} type="card" defaultActiveKey="1"> <Tabs onChange={callback} type="card" defaultActiveKey="1">
<TabPane tab="基本信息" key="11"> <TabPane tab="基本信息" key="11">
<BasicInfoForm onChangeAttributeList={(_lists: any)=>setAttributeList(_lists)} /> <BasicInfoForm
onRef={(refs)=>setFormRefs([...formRefs, refs])}
onChangeAttributeList={(_lists: any)=>setAttributeList(_lists)} />
</TabPane> </TabPane>
<TabPane tab="选择货品" key="22"> <TabPane tab="选择货品" key="22">
<SelectGoodsForm /> <SelectGoodsForm />
</TabPane> </TabPane>
<TabPane tab="商品属性" key="33"> <TabPane tab="商品属性" key="33">
<ProductAttributeForm attributesData={attributeList} /> <ProductAttributeForm
onRef={(refs)=>setFormRefs([...formRefs, refs])}
attributesData={attributeList}
/>
</TabPane> </TabPane>
<TabPane tab="价格设置" key="44"> <TabPane tab="价格设置" key="44">
<PriceAttributeForm /> <PriceAttributeForm
onRef={(refs)=>setFormRefs([...formRefs, refs])}
/>
</TabPane> </TabPane>
<TabPane tab="商品图片" key="55" style={{ border: '1px solid rgba(223,225,230,1)' }}> <TabPane tab="商品图片" key="55" style={{ border: '1px solid rgba(223,225,230,1)' }}>
<ProductImageForm /> <ProductImageForm />
...@@ -63,10 +73,14 @@ const AddProducts: React.FC<{}> = (props) => { ...@@ -63,10 +73,14 @@ const AddProducts: React.FC<{}> = (props) => {
<ProductDescForm /> <ProductDescForm />
</TabPane> </TabPane>
<TabPane tab="物流信息" key="77"> <TabPane tab="物流信息" key="77">
<LogisticsForm/> <LogisticsForm
onRef={(refs)=>setFormRefs([...formRefs, refs])}
/>
</TabPane> </TabPane>
<TabPane tab="其他" key="88"> <TabPane tab="其他" key="88">
<OtherForm /> <OtherForm
onRef={(refs)=>setFormRefs([...formRefs, refs])}
/>
</TabPane> </TabPane>
</Tabs> </Tabs>
</Card> </Card>
......
src/pages/commodity/products/addProductsItem/basicInfoForm.tsx
View file @ 3e410bcf
import React, { useState, useEffect } from 'react' import React, { useState, useEffect, useRef, useContext } from 'react'
import { Button, Form, Select, Tabs, Input, Tooltip, Cascader, Tag, Spin } from 'antd' import { Button, Form, Select, Tabs, Input, Tooltip, Cascader, Tag, Spin } from 'antd'
import { import {
QuestionCircleOutlined, QuestionCircleOutlined,
...@@ -12,6 +12,12 @@ import { ...@@ -12,6 +12,12 @@ import {
GetWarehouseAreaAllResponse GetWarehouseAreaAllResponse
} from '@/services'; } from '@/services';
import { inject, observer } from 'mobx-react'
// import { IProductModule } from '@/module/productModule'
// import { IStore } from '@/store';
import { store } from '@/store'
const { Option } = Select const { Option } = Select
const layout = { const layout = {
labelCol: { labelCol: {
...@@ -39,6 +45,7 @@ const tailLayout = { ...@@ -39,6 +45,7 @@ const tailLayout = {
interface Iprops { interface Iprops {
onChangeAttributeList: (attributeLists:any)=> void; onChangeAttributeList: (attributeLists:any)=> void;
onRef: (refs: any) => void;
} }
...@@ -50,17 +57,16 @@ interface AreaParams { ...@@ -50,17 +57,16 @@ interface AreaParams {
} }
const BasicInfoForm: React.FC<Iprops> = (props) => { const BasicInfoForm: React.FC<Iprops> = (props) => {
const { onChangeAttributeList } = props const { onChangeAttributeList, onRef } = props
const basicFormRef = useRef()
const [basicForm] = Form.useForm() const [basicForm] = Form.useForm()
const [brandData, setBrandData] = useState<any>([]) const [brandData, setBrandData] = useState<any>([])
const [brandValue, setBrandValue] = useState(undefined) const [brandValue, setBrandValue] = useState(undefined)
const [customerCategoryTree, setCustomerCategoryTree] = useState<GetProductCustomerGetCustomerCategoryTreeResponse>() const [customerCategoryTree, setCustomerCategoryTree] = useState<GetProductCustomerGetCustomerCategoryTreeResponse>()
const [proviceOptions, setProviceOptions] = useState<GetWarehouseAreaAllResponse>() const [proviceOptions, setProviceOptions] = useState<GetWarehouseAreaAllResponse>()
const [showCategory, setShowCategory] = useState(null) const [showCategory, setShowCategory] = useState(null)
const [areaParams, setAreaParams] = useState<AreaParams>() const [areaParams, setAreaParams] = useState<AreaParams>()
const { ProductStore } = store
useEffect(() => { useEffect(() => {
// 获取品类树 // 获取品类树
...@@ -82,6 +88,8 @@ const BasicInfoForm: React.FC<Iprops> = (props) => { ...@@ -82,6 +88,8 @@ const BasicInfoForm: React.FC<Iprops> = (props) => {
setProviceOptions(arr) setProviceOptions(arr)
} }
}) })
//传入ref给父级
onRef(basicFormRef)
}, []) }, [])
const onFinish = (values: any) => { const onFinish = (values: any) => {
...@@ -144,183 +152,188 @@ const BasicInfoForm: React.FC<Iprops> = (props) => { ...@@ -144,183 +152,188 @@ const BasicInfoForm: React.FC<Iprops> = (props) => {
console.log(areaParams, 'area') console.log(areaParams, 'area')
} }
const onChangeName = (value: any) => {
ProductStore.setProductName(value)
}
return (<> return (<>
<Form <Form
{...layout} {...layout}
form={basicForm} form={basicForm}
name="basic-form" name="basic-form"
labelAlign="left" labelAlign="left"
onFinish={onFinish} onFinish={onFinish}
colon={false} colon={false}
> ref={basicFormRef}
<Form.Item
name="customerCategoryId"
label="商品品类"
rules={[
{
required: true,
message: '请选择商品品类'
},
]}
>
<Cascader
options={customerCategoryTree}
fieldNames={{ label: 'title', value: 'id', children: 'children' }}
onChange={onCustomerCategoryChange}
placeholder="请选择品类"
notFoundContent={<Spin size="small" />}
/>
</Form.Item>
<Form.Item
name="brandId"
label="商品品牌"
>
<Select
showSearch
placeholder="请选择品牌"
allowClear
value={brandValue}
defaultActiveFirstOption={false}
showArrow={false}
filterOption={false}
onSearch={handleBrandSearch}
onChange={handleBrandChange}
style={{ width: '100%' }}
> >
{brandData.map(d => <Option value={d.id} key={d.id}>{d.name}</Option>)} <Form.Item
</Select> name="customerCategoryId"
</Form.Item> label="商品品类"
<Form.Item rules={[
name="name" {
label={ required: true,
<span> message: '请选择商品品类'
商品名称&nbsp; },
<Tooltip title="商品名称规范：品牌名（中文|英文）+产品名称（款式|系列）+附加产品特点+货号，最多输入45字"> ]}
<QuestionCircleOutlined /> >
</Tooltip> <Cascader
</span> options={customerCategoryTree}
} fieldNames={{ label: 'title', value: 'id', children: 'children' }}
rules={[ onChange={onCustomerCategoryChange}
{ placeholder="请选择品类"
required: true, notFoundContent={<Spin size="small" />}
message: '商品名称' />
}, </Form.Item>
]} <Form.Item
> name="brandId"
<Input placeholder="商品名称" maxLength={45} /> label="商品品牌"
</Form.Item> >
<Form.Item <Select
name="slogan" showSearch
label={ placeholder="请选择品牌"
<span> allowClear
商品标语&nbsp; value={brandValue}
<Tooltip title="商品的宣传用语，最多输入45字"> defaultActiveFirstOption={false}
<QuestionCircleOutlined /> showArrow={false}
</Tooltip> filterOption={false}
</span> onSearch={handleBrandSearch}
} onChange={handleBrandChange}
rules={[ style={{ width: '100%' }}
{ >
required: true, {brandData.map(d => <Option value={d.id} key={d.id}>{d.name}</Option>)}
message: '请填入商品标语' </Select>
}, </Form.Item>
]} <Form.Item
> name="name"
<Input placeholder="请输入商品标语" maxLength={45} /> label={
</Form.Item> <span>
<Form.Item 商品名称&nbsp;
name="sellingPoint" <Tooltip title="商品名称规范：品牌名（中文|英文）+产品名称（款式|系列）+附加产品特点+货号，最多输入45字">
label={ <QuestionCircleOutlined />
<span> </Tooltip>
商品卖点&nbsp; </span>
<Tooltip title="商品的卖点，展示在商品名称与商品标语之后，最多每个卖点输入8字"> }
<QuestionCircleOutlined /> rules={[
</Tooltip> {
</span> required: true,
} message: '商品名称'
rules={[ },
{ ]}
required: true, >
message: '请添加卖点标签', <Input placeholder="商品名称" maxLength={45} onBlur={e =>onChangeName(e.target.value)}/>
}, </Form.Item>
]} <Form.Item
> name="slogan"
<Select label={
mode="tags" <span>
placeholder="请选择或输入商品卖点" 商品标语&nbsp;
maxTagCount={3} <Tooltip title="商品的宣传用语，最多输入45字">
tagRender={tagRender} <QuestionCircleOutlined />
/> </Tooltip>
</Form.Item> </span>
<Form.List name="commodityAreaList"> }
{(fields: any[], { add, remove }: any) => { rules={[
if (!fields.length) { {
add() required: true,
} message: '请填入商品标语'
return ( },
<div> ]}
{fields.map((field, index) => ( >
<Form.Item <Input placeholder="请输入商品标语" maxLength={45} />
{...(index === 0 ? layout : layoutFormList)} </Form.Item>
label={ <Form.Item
field.key === 0 && <span> name="sellingPoint"
<i style={{ color: 'red' }}>* </i> label={
归属地市&nbsp; <span>
<Tooltip title="设置了归属地市后，此商品可根据地市进行筛选，未设置时默认为所有地市"> 商品卖点&nbsp;
<QuestionCircleOutlined /> <Tooltip title="商品的卖点，展示在商品名称与商品标语之后，最多每个卖点输入8字">
</Tooltip> <QuestionCircleOutlined />
</span> </Tooltip>
} </span>
rules={[ }
{ rules={[
required: true, {
message: '请选择地区' required: true,
} message: '请添加卖点标签',
]} },
key={field.key} ]}
> >
<Form.Item <Select
{...field} mode="tags"
rules={[ placeholder="请选择或输入商品卖点"
{ maxTagCount={3}
required: true, tagRender={tagRender}
message: "请选择地区", />
}, </Form.Item>
]} <Form.List name="commodityAreaList">
noStyle {(fields: any[], { add, remove }: any) => {
> if (!fields.length) {
<Cascader add()
options={proviceOptions} }
onChange={onCommodityAreaChange} return (
placeholder="请选择地区" <div>
fieldNames={{ label: 'name', value: 'code', children: 'areaResponses' }} {fields.map((field, index) => (
style={index === 0 ? { width: '90%' } : { width: '80%' }} <Form.Item
notFoundContent={<Spin size="small" />} {...(index === 0 ? layout : layoutFormList)}
/> label={
</Form.Item> field.key === 0 && <span>
<Button size='small' onClick={() => add()} icon={<PlusOutlined />} style={{ margin: '0 12px' }} /> <i style={{ color: 'red' }}>* </i>
{field.key > 0 && (<Button size='small' onClick={() => remove(field.name)} icon={<MinusOutlined />} />)} 归属地市&nbsp;
</Form.Item> <Tooltip title="设置了归属地市后，此商品可根据地市进行筛选，未设置时默认为所有地市">
))} <QuestionCircleOutlined />
</div> </Tooltip>
) </span>
}} }
</Form.List> rules={[
<Form.Item {
label='品类类型' required: true,
> message: '请选择地区'
{showCategory && <><span className="commonStatusValid"></span>{showCategory}</>} }
</Form.Item> ]}
<Form.Item {...tailLayout}> key={field.key}
<Button type="primary" htmlType="submit"> >
保存 <Form.Item
</Button> {...field}
<Button className={styles.ml20}> rules={[
取消 {
</Button> required: true,
</Form.Item> message: "请选择地区",
</Form> },
]}
noStyle
>
<Cascader
options={proviceOptions}
onChange={onCommodityAreaChange}
placeholder="请选择地区"
fieldNames={{ label: 'name', value: 'code', children: 'areaResponses' }}
style={index === 0 ? { width: '90%' } : { width: '80%' }}
notFoundContent={<Spin size="small" />}
/>
</Form.Item>
<Button size='small' onClick={() => add()} icon={<PlusOutlined />} style={{ margin: '0 12px' }} />
{field.key > 0 && (<Button size='small' onClick={() => remove(field.name)} icon={<MinusOutlined />} />)}
</Form.Item>
))}
</div>
)
}}
</Form.List>
<Form.Item
label='品类类型'
>
{showCategory && <><span className="commonStatusValid"></span>{showCategory}</>}
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
保存
</Button>
<Button className={styles.ml20}>
取消
</Button>
</Form.Item>
</Form>
</>) </>)
} }
export default BasicInfoForm export default observer(BasicInfoForm)
\ No newline at end of file \ No newline at end of file
src/pages/commodity/products/addProductsItem/logisticsForm.tsx
View file @ 3e410bcf
import React, { useState, useEffect } from 'react' import React, { useState, useEffect, useRef } from 'react'
import {history} from 'umi' import {history} from 'umi'
import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } from 'antd' import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } from 'antd'
import styles from './index.less' import styles from './index.less'
...@@ -17,21 +17,29 @@ const layout = { ...@@ -17,21 +17,29 @@ const layout = {
} }
export interface Iprops { export interface Iprops {
onRef: (refs: any) => void;
} }
const { Option } = Select const { Option } = Select
const LogisticsForm: React.FC<Iprops> = (props) => { const LogisticsForm: React.FC<Iprops> = (props) => {
const { onRef } = props
const logisticsFormRef = useRef()
const [logisticsForm] = Form.useForm() const [logisticsForm] = Form.useForm()
useEffect(()=>{
//传入ref给父级
onRef(logisticsFormRef)
}, [])
return (<> return (<>
<Form <Form
{...layout} {...layout}
form={logisticsForm} form={logisticsForm}
name="add-products-transport" name="logistic-form"
labelAlign="left" labelAlign="left"
ref={logisticsFormRef}
> >
<Form.Item <Form.Item
name="transportType" name="transportType"
......
src/pages/commodity/products/addProductsItem/otherForm.tsx
View file @ 3e410bcf
import React, { useState, useEffect } from 'react' import React, { useState, useEffect, useRef } from 'react'
import {history} from 'umi' import {history} from 'umi'
import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } from 'antd' import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } from 'antd'
import styles from './index.less' import styles from './index.less'
...@@ -17,22 +17,29 @@ const layout = { ...@@ -17,22 +17,29 @@ const layout = {
} }
export interface Iprops { export interface Iprops {
onRef: (refs: any) => void;
} }
const { Option } = Select const { Option } = Select
const { TextArea } = Input const { TextArea } = Input
const OtherForm: React.FC<Iprops> = (props) => { const OtherForm: React.FC<Iprops> = (props) => {
const { onRef } = props
const otherFormRef = useRef()
const [otherForm] = Form.useForm() const [otherForm] = Form.useForm()
useEffect(()=>{
//传入ref给父级
onRef(otherFormRef)
}, [])
return (<> return (<>
<Form <Form
{...layout} {...layout}
form={otherForm} form={otherForm}
name="add-products-other" name="other-form"
labelAlign="left" labelAlign="left"
ref={otherFormRef}
> >
<Form.Item <Form.Item
name="bill" name="bill"
......
src/pages/commodity/products/addProductsItem/priceAttributeForm.tsx
View file @ 3e410bcf
import React, { useState, useEffect } from 'react' import React, { useState, useEffect, useRef, useContext, useCallback } from 'react'
import {history} from 'umi' import {history} from 'umi'
import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } from 'antd' import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } from 'antd'
import styles from './index.less' import styles from './index.less'
...@@ -7,6 +7,13 @@ import { StandardTable } from 'god' ...@@ -7,6 +7,13 @@ import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface' import { ColumnType } from 'antd/lib/table/interface'
import { EyeOutlined, QuestionCircleOutlined, SettingOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons' import { EyeOutlined, QuestionCircleOutlined, SettingOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons'
import { inject, observer } from 'mobx-react'
// import { IProductModule } from '@/module/productModule'
// import { IStore } from '@/store';
import { store } from '@/store'
import ProductDescForm from './productDescForm'
import { Effects } from 'bizcharts'
const layout = { const layout = {
labelCol: { labelCol: {
span: 2, span: 2,
...@@ -21,95 +28,171 @@ const layoutSetPrice = { ...@@ -21,95 +28,171 @@ const layoutSetPrice = {
}; };
export interface Iprops { export interface Iprops {
onRef: (refs: any) => void;
} }
const { Option } = Select const { Option } = Select
const { Item } = Form const { Item } = Form
const dataSource = [ let _tableDataSource: any = []
{
key: '1',
name: '胡彦斌',
color: '立白色',
size: 'XXXXXXXXXXXXXXXL',
goods: 'M-112/进口头层牛皮荔枝纹/红色/XL/¥15.50',
price: [20, 19, 18],
},
{
key: '2',
name: '胡一统',
color: '天青色',
size: 'XXXXS',
goods: 'M-10086/进口头层狗皮木纹/木色/XL/¥12.30',
price: [1580, 1450, 1200],
},
]
const PriceAttributeForm: React.FC<Iprops> = (props) => { const PriceAttributeForm: React.FC<Iprops> = (props) => {
const { onRef } = props
const priceFormRef = useRef()
const [priceForm] = Form.useForm() const [priceForm] = Form.useForm()
const [setPriceForm] = Form.useForm() const [setPriceForm] = Form.useForm()
const [planPrice, setPlanPrice] = useState(1) const [planPrice, setPlanPrice] = useState(1)
const [setPriceModal, setSetPriceModal] = useState(false) const [setPriceModal, setSetPriceModal] = useState(false)
const [ladderPrice, setLadderPrice] = useState(false) const [ladderPrice, setLadderPrice] = useState(false)
const [curretSetPriceRow, setCurrentSetPriceRow] = useState<any>()
// const [attribtueNameArray, setAttributeNameArray] = useState<any>()
// const [tableDataSource, setTableDataSource] = useState<any[]>()
const columns: ColumnType<any>[] = [ const [colums, setColumns] = useState<ColumnType<any>[]>()
{ const { ProductStore } = store
title: '商品名称', const { productName, selectedGoods, productSelectAttribute, tableDataSource, setTableDataSource } = ProductStore
dataIndex: 'name',
align: 'center', useEffect(()=>{
key: 'name', //传入ref给父级
}, onRef(priceFormRef)
{ // 采用mobx数据 生成表格的column
title: '颜色', let _col = [];
dataIndex: 'color', let col_productName = { title: '商品名称', dataIndex: '商品名称', key: '商品名称' }
align: 'center', _col.push(col_productName)
key: 'color', let _priceAttribute = productSelectAttribute.filter(_item=>_item.isPrice)
}, let len = _priceAttribute.length
{
title: '尺码', let _attributeNameArr = [];
dataIndex: 'size', let _attributeValueArr = [];
align: 'center', if(len){ // 提取价格属性 属性名数组 属性值SKU数组
key: 'size', _priceAttribute.map(_item=>{
}, _attributeNameArr.push(_item.attributeName) // 用于列header
{ let _tempArr = []
title: '对应货品', _item.customerAttributeValueList.map(__item => _tempArr.push(__item.value))
dataIndex: 'goods', _attributeValueArr.push(_tempArr) // 价格属性的属性值数组 用于SKU组合
align: 'center', })
key: 'goods', }
render: (text: any, record: any) => <>
<Select defaultValue={text}> let combineArray = SKUCombine(_attributeValueArr)
<Option value="M-112/进口头层牛皮荔枝纹/红色/XL/¥15.50">M-112/进口头层牛皮荔枝纹/红色/XL/¥15.50</Option>
<Option value="M-10086/进口头层狗皮木纹/木色/XL/¥12.30">M-10086/进口头层狗皮木纹/木色/XL/¥12.30</Option> if(selectedGoods.length>0){ // 把货品放入表格列中
</Select> _col.push({
</> title: '对应货品',
}, dataIndex: '对应货品',
{ key: '对应货品',
title: '单价', width: 360,
dataIndex: 'price', render: (text: any, record: any) => <>
align: 'center', <Select style={{width:'100%'}} defaultValue={text} onChange={(v)=> {tableSelelctChange(v, record) }}>
key: 'price', {
render: (text: any, record: any) => ( selectedGoods.length>0 && selectedGoods.map(_item => (
<> <Option key={_item.id} value={_item.id}>{_item.code}/{_item.name}/{_item.type}/￥{_item.costPrice}</Option>
{ ))
text && text.length > 0 && text.map((item: any, index: any) => <p>{index * 1000 + 1}~{1000 * (index + 1)}: <span style={{ color: 'red' }}>￥{item}</span></p>) }
} </Select>
</> </>
) })
}, }
{
if(_attributeNameArr.length>0){ // 把属性名称放入表格列中
_attributeNameArr.map( _attr => {
_col.push({
title: _attr,
dataIndex: _attr,
key: _attr
})
})
}
_col.push({ // 放入单价列
title: '单价（元）',
dataIndex: '单价（元）',
key: '单价（元）',
width: 200,
render: (text: any, record: any) => {
if(JSON.stringify(text)!='{}'){
for(let _i of text){
}
}
}
})
_col.push({ // 放入操作列
title: <>操作<a style={{ color: '#868f9e' }}> <SettingOutlined /></a></>, title: <>操作<a style={{ color: '#868f9e' }}> <SettingOutlined /></a></>,
dataIndex: 'option', dataIndex: 'option',
align: 'center', width: 100,
render: (text: any, record: any) => { render: (text: any, record: any) => {
return ( return (
<> <>
<Button type='link' onClick={()=>setSetPriceModal(true)}>设置价格</Button> <Button type='link' onClick={()=>clickSetPrice(record)}>设置价格</Button>
</> </>
) )
} }
})
setColumns(_col)
// data处理
let _tableData: any[] = []
if(combineArray?.length>0){ // length存在 表示其表格的行数
combineArray.map((_rowArr: any[], i: any) => {
let _tempObj: any = { 索引: i ,商品名称: productName }
_rowArr.map((__rowArr, index) => {
_tempObj[_attributeNameArr[index]] = __rowArr
})
_tempObj['对应货品'] = selectedGoods[0].id
_tempObj['单价'] = {}
_tableData.push(_tempObj)
})
} }
]
_tableDataSource = _tableData
setTableDataSource(_tableDataSource)
console.log(_tableData, '_tableData')
}, [productName, selectedGoods, productSelectAttribute])
/**
* @description table选择货品改变对应的data数据
* @param v modal数据对象
* @param record table行记录
*/
const tableSelelctChange = (v: number, record: any) => {
console.log(v, record, 'record')
let _row = { ...record, 对应货品: v }
let newTabeData = [..._tableDataSource]
newTabeData[record['索引']] = _row
_tableDataSource = newTabeData
console.log(_tableDataSource,'_tableDataSource', newTabeData)
setTableDataSource(_tableDataSource)
}
/**
* @description SUK组合
* @param {[[],[]..]} chunks 传入不同的属性值数组进行组合
*/
const SKUCombine = (arr: any[]) => {
if(arr.length){
if (arr[0].children)
arr = arr.map((item: any) => {
return item = item.children
})
if (arr.length === 1)
return arr[0]
else {
let arrySon = []
arr[0].forEach((_: any, index: React.ReactText) => {
arr[1].forEach((_: any, index1: React.ReactText) => {
arrySon.push([].concat(arr[0][index], arr[1][index1]))
})
})
arr[0] = arrySon
arr.splice(1, 1)
// 递归
return SKUCombine(arr)
}
}
}
const handlePlanPriceChange = (v: any) => { const handlePlanPriceChange = (v: any) => {
setPlanPrice(v.target.value) setPlanPrice(v.target.value)
...@@ -119,9 +202,24 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => { ...@@ -119,9 +202,24 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
const setPriceOk = () => { const setPriceOk = () => {
setPriceForm.validateFields().then(v => { setPriceForm.validateFields().then(v => {
setSetPriceModal(false) setSetPriceModal(false)
console.log(v, 'value') const { ladderPrice, ladderRange } = v
let _priceRange = {}
if(ladderPrice){ // 判断阶梯价格
ladderRange.length>0 && ladderRange.map(_item => {
_priceRange[`${_item.numberRange.numberMin}-${_item.numberRange.numberMax}`] = _item.numberPrice
})
}else{
_priceRange['0-0'] = v.uniquePrice
}
let _row = { ...curretSetPriceRow, 单价: _priceRange }
let newTabeData = [..._tableDataSource]
newTabeData[curretSetPriceRow['索引']] = _row
_tableDataSource = newTabeData
setTableDataSource(_tableDataSource)
console.log(_tableDataSource, curretSetPriceRow, v,'setPriceOk')
}) })
console.log('setPriceOk')
} }
const setPriceCancel = () => { const setPriceCancel = () => {
...@@ -129,9 +227,14 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => { ...@@ -129,9 +227,14 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
console.log('setPriceCancel') console.log('setPriceCancel')
} }
const clickSetPrice = (record: any) => {
console.log(record)
setCurrentSetPriceRow(record)
setSetPriceModal(true)
}
const changeLadderPrice = (e: any) => { const changeLadderPrice = (e: any) => {
setLadderPrice(e.target.checked) setLadderPrice(e.target.checked)
setPriceForm.setFields([{ name: 'ladderPrice', value: e.target.checked }])
} }
return (<> return (<>
...@@ -140,6 +243,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => { ...@@ -140,6 +243,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
form={priceForm} form={priceForm}
name="add-products-price" name="add-products-price"
labelAlign="left" labelAlign="left"
ref={priceFormRef}
> >
<Form.Item <Form.Item
name="unit" name="unit"
...@@ -223,7 +327,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => { ...@@ -223,7 +327,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
<Checkbox>允许使用会员折扣价购买</Checkbox> <Checkbox>允许使用会员折扣价购买</Checkbox>
</Form.Item> </Form.Item>
</Form> </Form>
<Table dataSource={dataSource} columns={planPrice === 1 ? columns : columns.slice(0, 4)} pagination={false} /> <Table rowKey="索引" dataSource={tableDataSource} columns={planPrice === 1 ? colums : colums.slice(0, colums.length-2)} pagination={false} />
{/* 设置价格 */} {/* 设置价格 */}
<Modal <Modal
title="设置价格" title="设置价格"
...@@ -236,12 +340,14 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => { ...@@ -236,12 +340,14 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
{...layoutSetPrice} {...layoutSetPrice}
name="settingPrice" name="settingPrice"
form={setPriceForm} form={setPriceForm}
initialValues={{ladderPrice: false}}
> >
<Form.Item <Form.Item
label="" label=""
name="ladderPrice" name="ladderPrice"
valuePropName="checked"
> >
<Checkbox checked={ladderPrice} onChange={changeLadderPrice}>阶梯价格</Checkbox> <Checkbox onChange={changeLadderPrice}>阶梯价格</Checkbox>
</Form.Item> </Form.Item>
{ {
ladderPrice ? <Form.Item ladderPrice ? <Form.Item
...@@ -325,4 +431,4 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => { ...@@ -325,4 +431,4 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
</>) </>)
} }
export default PriceAttributeForm export default observer(PriceAttributeForm)
\ No newline at end of file \ No newline at end of file
src/pages/commodity/products/addProductsItem/productAttributeForm.tsx
View file @ 3e410bcf
import React, { useState, useEffect } from 'react' import React, { useState, useEffect, useRef, useContext } from 'react'
import {history} from 'umi' import {history} from 'umi'
import { Button, Form, Select, Checkbox, Tabs, Input } from 'antd' import { Button, Form, Select, Checkbox, Tabs, Input } from 'antd'
import styles from './index.less' import styles from './index.less'
...@@ -7,6 +7,11 @@ import { StandardTable } from 'god' ...@@ -7,6 +7,11 @@ import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface' import { ColumnType } from 'antd/lib/table/interface'
import { EyeOutlined } from '@ant-design/icons' import { EyeOutlined } from '@ant-design/icons'
import { inject, observer } from 'mobx-react'
// import { IProductModule } from '@/module/productModule'
// import { IStore } from '@/store';
import { store } from '@/store'
const layout = { const layout = {
labelCol: { labelCol: {
span: 2, span: 2,
...@@ -24,6 +29,7 @@ const tailLayout = { ...@@ -24,6 +29,7 @@ const tailLayout = {
export interface Iprops { export interface Iprops {
attributesData: any[]; attributesData: any[];
onRef: (refs: any) => void;
} }
const { TabPane } = Tabs const { TabPane } = Tabs
...@@ -31,8 +37,15 @@ const { Option } = Select ...@@ -31,8 +37,15 @@ const { Option } = Select
const { TextArea } = Input const { TextArea } = Input
const ProductAttributeForm: React.FC<Iprops> = (props) => { const ProductAttributeForm: React.FC<Iprops> = (props) => {
const { attributesData } = props const { attributesData, onRef } = props
const productAttributeFormRef = useRef()
const [attributeForm] = Form.useForm() const [attributeForm] = Form.useForm()
const { ProductStore } = store
useEffect(()=>{
//传入ref给父级
onRef(productAttributeFormRef)
}, [])
let paramsArray = []; let paramsArray = [];
...@@ -47,7 +60,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => { ...@@ -47,7 +60,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
* @param {Object} attrItem 属性数据对象 * @param {Object} attrItem 属性数据对象
*/ */
const onChange = (value, attrItem) => { const onChange = (value, attrItem) => {
let params = { customerAttributeId: attrItem.id, customerAttributeValueList: [] } let params = { customerAttributeId: attrItem.id, attributeName: attrItem.name, isPrice: attrItem.isPrice, customerAttributeValueList: [] }
if(attrItem.type!==3){ if(attrItem.type!==3){
for(let item of attrItem?.customerAttributeValueList){ for(let item of attrItem?.customerAttributeValueList){
if(value?.length){ if(value?.length){
...@@ -55,7 +68,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => { ...@@ -55,7 +68,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
if(item.id===i){ if(item.id===i){
params.customerAttributeValueList.push({ params.customerAttributeValueList.push({
customerAttributeValueId: i, customerAttributeValueId: i,
value: item.value value: item.value,
}) })
} }
} }
...@@ -63,7 +76,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => { ...@@ -63,7 +76,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
if(item.id===value){ if(item.id===value){
params.customerAttributeValueList.push({ params.customerAttributeValueList.push({
customerAttributeValueId: value, customerAttributeValueId: value,
value: item.value value: item.value,
}) })
} }
} }
...@@ -71,7 +84,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => { ...@@ -71,7 +84,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
}else{ }else{
params.customerAttributeValueList.push({ params.customerAttributeValueList.push({
customerAttributeValueId: null, customerAttributeValueId: null,
value: value.target.value value: value.target.value,
}) })
} }
paramsArray.push(params) paramsArray.push(params)
...@@ -80,8 +93,8 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => { ...@@ -80,8 +93,8 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
item[next.customerAttributeId] = next; item[next.customerAttributeId] = next;
return item return item
},{})) },{}))
console.log(resultParams, 'resultParams') // 最终转换数据
console.log(resultParams) // 最终转换的数据格式 ProductStore.setProductSelectAttribute(resultParams) //注入mobx
} }
const renderTabPanchildren = (attrItem: any) => { const renderTabPanchildren = (attrItem: any) => {
...@@ -123,7 +136,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => { ...@@ -123,7 +136,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
<Checkbox.Group onChange={(v)=>onChange(v, attrItem)}> <Checkbox.Group onChange={(v)=>onChange(v, attrItem)}>
{ {
attrItem?.customerAttributeValueList.length > 0 && attrItem.customerAttributeValueList.map((item: any, index: string) => ( attrItem?.customerAttributeValueList.length > 0 && attrItem.customerAttributeValueList.map((item: any, index: string) => (
<Checkbox key={item.id} value={item.id}>{item.value}</Checkbox> <Checkbox key={item.id + index} value={item.id}>{item.value}</Checkbox>
)) ))
} }
</Checkbox.Group> </Checkbox.Group>
...@@ -153,6 +166,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => { ...@@ -153,6 +166,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
name="attribute-form" name="attribute-form"
labelAlign="left" labelAlign="left"
onFinish={onFinish} onFinish={onFinish}
ref={productAttributeFormRef}
> >
<Tabs defaultActiveKey="1" tabPosition="left"> <Tabs defaultActiveKey="1" tabPosition="left">
{ {
...@@ -179,4 +193,4 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => { ...@@ -179,4 +193,4 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
</>) </>)
} }
export default ProductAttributeForm export default observer(ProductAttributeForm)
\ No newline at end of file \ No newline at end of file
src/pages/commodity/products/addProductsItem/selectGoodsForm.tsx
View file @ 3e410bcf
import React, { useState, useEffect } from 'react' import React, { useState, useEffect, useContext } from 'react'
import {history} from 'umi' import {history} from 'umi'
import { Button, Form, Select, Checkbox } from 'antd' import { Button, Form, Select, Checkbox } from 'antd'
import styles from './index.less' import styles from './index.less'
...@@ -7,6 +7,11 @@ import { StandardTable } from 'god' ...@@ -7,6 +7,11 @@ import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface' import { ColumnType } from 'antd/lib/table/interface'
import { EyeOutlined } from '@ant-design/icons' import { EyeOutlined } from '@ant-design/icons'
import { inject, observer } from 'mobx-react'
// import { IProductModule } from '@/module/productModule'
// import { IStore } from '@/store';
import { store } from '@/store'
const layout = { const layout = {
labelCol: { labelCol: {
span: 2, span: 2,
...@@ -22,9 +27,10 @@ export interface Iprops { ...@@ -22,9 +27,10 @@ export interface Iprops {
const SelectGoodsForm: React.FC<Iprops> = (props) => { const SelectGoodsForm: React.FC<Iprops> = (props) => {
const [selectGoodsForm] = Form.useForm() const [selectGoodsForm] = Form.useForm()
const [showSelectGoods, setSelectGoods] = useState(false) const [showSelectGoods, setIsSelectGoods] = useState(false)
const [selectGoodsRow, setSelectGoodsRow] = useState<any[]>([]) // 模态框选择的行数据 const [selectGoodsRow, setSelectGoodsRow] = useState<any[]>([]) // 模态框选择的行数据
const [selectedGoodsRowKeys, setSelectedGoodsRowKeys] = useState<Array<number>>([]) const [selectedGoodsRowKeys, setSelectedGoodsRowKeys] = useState<Array<number>>([])
const { ProductStore } = store
const fetchData = (params: any) => { const fetchData = (params: any) => {
console.log(params) console.log(params)
...@@ -78,12 +84,13 @@ const SelectGoodsForm: React.FC<Iprops> = (props) => { ...@@ -78,12 +84,13 @@ const SelectGoodsForm: React.FC<Iprops> = (props) => {
const onSelectGoodsChange = (value: any) => { const onSelectGoodsChange = (value: any) => {
setSelectedGoodsRowKeys([]) setSelectedGoodsRowKeys([])
setSelectGoods(value.target.checked) setIsSelectGoods(value.target.checked)
} }
const rowSelection = { const rowSelection = {
selectedRowKeys: selectedGoodsRowKeys, selectedRowKeys: selectedGoodsRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => { onChange: (selectedRowKeys: any, selectedRows: any) => {
ProductStore.setSelectedGoods(selectedRows)
setSelectGoodsRow(selectedRows); setSelectGoodsRow(selectedRows);
setSelectedGoodsRowKeys(selectedRowKeys); setSelectedGoodsRowKeys(selectedRowKeys);
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
...@@ -112,4 +119,4 @@ const SelectGoodsForm: React.FC<Iprops> = (props) => { ...@@ -112,4 +119,4 @@ const SelectGoodsForm: React.FC<Iprops> = (props) => {
</>) </>)
} }
export default SelectGoodsForm export default observer(SelectGoodsForm)
\ No newline at end of file \ No newline at end of file
src/store/index.tsx
View file @ 3e410bcf
import UserStore from './user' import UserStore from './user'
import ThemeStore from './theme' import ThemeStore from './theme'
import ProductStroe from './product'
import React from 'react'; import React from 'react';
import { Provider } from 'mobx-react' import { Provider } from 'mobx-react'
import { IUserModule } from '@/module/userModule'; import { IUserModule } from '@/module/userModule';
import { IProductModule } from '@/module/productModule'
// import { ProductContext } from '@/pages/commodity/products/addProducts';
/** /**
* *
...@@ -20,12 +23,14 @@ import { IUserModule } from '@/module/userModule'; ...@@ -20,12 +23,14 @@ import { IUserModule } from '@/module/userModule';
*/ */
export interface IStore { export interface IStore {
userStore: IUserModule userStore: IUserModule;
ProductStore: IProductModule;
} }
const store = { export const store = {
userStore: new UserStore, userStore: new UserStore,
ThemeStore: new ThemeStore, ThemeStore: new ThemeStore,
ProductStore: new ProductStroe
} }
const MobxProvider: React.FC = (props) => { const MobxProvider: React.FC = (props) => {
......
src/store/product/index.ts 0 → 100644
View file @ 3e410bcf
import {action, computed, observable, runInAction} from 'mobx'
import { IProductModule } from '@/module/productModule'; // mobx要用到的数据类型
class ProductStore implements IProductModule {
@observable public productName: string = "";
@observable public productSelectAttribute: any[] = [];
@observable public selectedGoods: any[] = [];
@observable public tableDataSource: any[] = [];
/** 定义动作区块，外部调用，改变对应的状态 **/
// 可以改变存的testText值
@action.bound
public setProductName(name: string) {
this.productName = name;
}
@action.bound
public setProductSelectAttribute(list: any[]) {
this.productSelectAttribute = list;
}
@action.bound
public setSelectedGoods(list: any[]) {
this.selectedGoods = list;
}
@action.bound
public setTableDataSource(datas: any[]) {
console.log(datas, 'innerBox')
this.tableDataSource = datas;
}
}
export default ProductStore
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