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 { Button, Card, Tabs } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
......@@ -21,9 +21,12 @@ const { TabPane } = Tabs
const AddProducts: React.FC<{}> = (props) => {
const [attributeList, setAttributeList] = useState<any[]>([])
let [formRefs, setFormRefs] = useState([]) //子form的ref数组
const onSave = () => {
console.log('点击保存')
console.log(formRefs, 'formrefs')
}
const callback = (key: any) => {
......@@ -45,16 +48,23 @@ const AddProducts: React.FC<{}> = (props) => {
<Card>
<Tabs onChange={callback} type="card" defaultActiveKey="1">
<TabPane tab="基本信息" key="11">
<BasicInfoForm onChangeAttributeList={(_lists: any)=>setAttributeList(_lists)} />
<BasicInfoForm
onRef={(refs)=>setFormRefs([...formRefs, refs])}
onChangeAttributeList={(_lists: any)=>setAttributeList(_lists)} />
</TabPane>
<TabPane tab="选择货品" key="22">
<SelectGoodsForm />
</TabPane>
<TabPane tab="商品属性" key="33">
<ProductAttributeForm attributesData={attributeList} />
<ProductAttributeForm
onRef={(refs)=>setFormRefs([...formRefs, refs])}
attributesData={attributeList}
/>
</TabPane>
<TabPane tab="价格设置" key="44">
<PriceAttributeForm />
<PriceAttributeForm
onRef={(refs)=>setFormRefs([...formRefs, refs])}
/>
</TabPane>
<TabPane tab="商品图片" key="55" style={{ border: '1px solid rgba(223,225,230,1)' }}>
<ProductImageForm />
......@@ -63,10 +73,14 @@ const AddProducts: React.FC<{}> = (props) => {
<ProductDescForm />
</TabPane>
<TabPane tab="物流信息" key="77">
<LogisticsForm/>
<LogisticsForm
onRef={(refs)=>setFormRefs([...formRefs, refs])}
/>
</TabPane>
<TabPane tab="其他" key="88">
<OtherForm />
<OtherForm
onRef={(refs)=>setFormRefs([...formRefs, refs])}
/>
</TabPane>
</Tabs>
</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 {
QuestionCircleOutlined,
......@@ -12,6 +12,12 @@ import {
GetWarehouseAreaAllResponse
} 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 layout = {
labelCol: {
......@@ -39,6 +45,7 @@ const tailLayout = {
interface Iprops {
onChangeAttributeList: (attributeLists:any)=> void;
onRef: (refs: any) => void;
}
......@@ -50,17 +57,16 @@ interface AreaParams {
}
const BasicInfoForm: React.FC<Iprops> = (props) => {
const { onChangeAttributeList } = props
const { onChangeAttributeList, onRef } = props
const basicFormRef = useRef()
const [basicForm] = Form.useForm()
const [brandData, setBrandData] = useState<any>([])
const [brandValue, setBrandValue] = useState(undefined)
const [customerCategoryTree, setCustomerCategoryTree] = useState<GetProductCustomerGetCustomerCategoryTreeResponse>()
const [proviceOptions, setProviceOptions] = useState<GetWarehouseAreaAllResponse>()
const [showCategory, setShowCategory] = useState(null)
const [areaParams, setAreaParams] = useState<AreaParams>()
const { ProductStore } = store
useEffect(() => {
// 获取品类树
......@@ -82,6 +88,8 @@ const BasicInfoForm: React.FC<Iprops> = (props) => {
setProviceOptions(arr)
}
})
//传入ref给父级
onRef(basicFormRef)
}, [])
const onFinish = (values: any) => {
......@@ -144,183 +152,188 @@ const BasicInfoForm: React.FC<Iprops> = (props) => {
console.log(areaParams, 'area')
}
const onChangeName = (value: any) => {
ProductStore.setProductName(value)
}
return (<>
<Form
{...layout}
form={basicForm}
name="basic-form"
labelAlign="left"
onFinish={onFinish}
colon={false}
>
<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%' }}
<Form
{...layout}
form={basicForm}
name="basic-form"
labelAlign="left"
onFinish={onFinish}
colon={false}
ref={basicFormRef}
>
{brandData.map(d => <Option value={d.id} key={d.id}>{d.name}</Option>)}
</Select>
</Form.Item>
<Form.Item
name="name"
label={
<span>
商品名称&nbsp;
<Tooltip title="商品名称规范：品牌名（中文|英文）+产品名称（款式|系列）+附加产品特点+货号，最多输入45字">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
{
required: true,
message: '商品名称'
},
]}
>
<Input placeholder="商品名称" maxLength={45} />
</Form.Item>
<Form.Item
name="slogan"
label={
<span>
商品标语&nbsp;
<Tooltip title="商品的宣传用语，最多输入45字">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
{
required: true,
message: '请填入商品标语'
},
]}
>
<Input placeholder="请输入商品标语" maxLength={45} />
</Form.Item>
<Form.Item
name="sellingPoint"
label={
<span>
商品卖点&nbsp;
<Tooltip title="商品的卖点，展示在商品名称与商品标语之后，最多每个卖点输入8字">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
{
required: true,
message: '请添加卖点标签',
},
]}
>
<Select
mode="tags"
placeholder="请选择或输入商品卖点"
maxTagCount={3}
tagRender={tagRender}
/>
</Form.Item>
<Form.List name="commodityAreaList">
{(fields: any[], { add, remove }: any) => {
if (!fields.length) {
add()
}
return (
<div>
{fields.map((field, index) => (
<Form.Item
{...(index === 0 ? layout : layoutFormList)}
label={
field.key === 0 && <span>
<i style={{ color: 'red' }}>* </i>
归属地市&nbsp;
<Tooltip title="设置了归属地市后，此商品可根据地市进行筛选，未设置时默认为所有地市">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
{
required: true,
message: '请选择地区'
}
]}
key={field.key}
>
<Form.Item
{...field}
rules={[
{
required: true,
message: "请选择地区",
},
]}
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>
<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>)}
</Select>
</Form.Item>
<Form.Item
name="name"
label={
<span>
商品名称&nbsp;
<Tooltip title="商品名称规范：品牌名（中文|英文）+产品名称（款式|系列）+附加产品特点+货号，最多输入45字">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
{
required: true,
message: '商品名称'
},
]}
>
<Input placeholder="商品名称" maxLength={45} onBlur={e =>onChangeName(e.target.value)}/>
</Form.Item>
<Form.Item
name="slogan"
label={
<span>
商品标语&nbsp;
<Tooltip title="商品的宣传用语，最多输入45字">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
{
required: true,
message: '请填入商品标语'
},
]}
>
<Input placeholder="请输入商品标语" maxLength={45} />
</Form.Item>
<Form.Item
name="sellingPoint"
label={
<span>
商品卖点&nbsp;
<Tooltip title="商品的卖点，展示在商品名称与商品标语之后，最多每个卖点输入8字">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
{
required: true,
message: '请添加卖点标签',
},
]}
>
<Select
mode="tags"
placeholder="请选择或输入商品卖点"
maxTagCount={3}
tagRender={tagRender}
/>
</Form.Item>
<Form.List name="commodityAreaList">
{(fields: any[], { add, remove }: any) => {
if (!fields.length) {
add()
}
return (
<div>
{fields.map((field, index) => (
<Form.Item
{...(index === 0 ? layout : layoutFormList)}
label={
field.key === 0 && <span>
<i style={{ color: 'red' }}>* </i>
归属地市&nbsp;
<Tooltip title="设置了归属地市后，此商品可根据地市进行筛选，未设置时默认为所有地市">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
{
required: true,
message: '请选择地区'
}
]}
key={field.key}
>
<Form.Item
{...field}
rules={[
{
required: true,
message: "请选择地区",
},
]}
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
\ No newline at end of file
export default observer(BasicInfoForm)
\ 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 { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } from 'antd'
import styles from './index.less'
......@@ -17,21 +17,29 @@ const layout = {
}
export interface Iprops {
onRef: (refs: any) => void;
}
const { Option } = Select
const LogisticsForm: React.FC<Iprops> = (props) => {
const { onRef } = props
const logisticsFormRef = useRef()
const [logisticsForm] = Form.useForm()
useEffect(()=>{
//传入ref给父级
onRef(logisticsFormRef)
}, [])
return (<>
<Form
{...layout}
form={logisticsForm}
name="add-products-transport"
name="logistic-form"
labelAlign="left"
ref={logisticsFormRef}
>
<Form.Item
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 { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } from 'antd'
import styles from './index.less'
......@@ -17,22 +17,29 @@ const layout = {
}
export interface Iprops {
onRef: (refs: any) => void;
}
const { Option } = Select
const { TextArea } = Input
const OtherForm: React.FC<Iprops> = (props) => {
const { onRef } = props
const otherFormRef = useRef()
const [otherForm] = Form.useForm()
useEffect(()=>{
//传入ref给父级
onRef(otherFormRef)
}, [])
return (<>
<Form
{...layout}
form={otherForm}
name="add-products-other"
name="other-form"
labelAlign="left"
ref={otherFormRef}
>
<Form.Item
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 { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } from 'antd'
import styles from './index.less'
......@@ -7,6 +7,13 @@ import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
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 = {
labelCol: {
span: 2,
......@@ -21,95 +28,171 @@ const layoutSetPrice = {
};
export interface Iprops {
onRef: (refs: any) => void;
}
const { Option } = Select
const { Item } = Form
const dataSource = [
{
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],
},
]
let _tableDataSource: any = []
const PriceAttributeForm: React.FC<Iprops> = (props) => {
const { onRef } = props
const priceFormRef = useRef()
const [priceForm] = Form.useForm()
const [setPriceForm] = Form.useForm()
const [planPrice, setPlanPrice] = useState(1)
const [setPriceModal, setSetPriceModal] = 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>[] = [
{
title: '商品名称',
dataIndex: 'name',
align: 'center',
key: 'name',
},
{
title: '颜色',
dataIndex: 'color',
align: 'center',
key: 'color',
},
{
title: '尺码',
dataIndex: 'size',
align: 'center',
key: 'size',
},
{
title: '对应货品',
dataIndex: 'goods',
align: 'center',
key: 'goods',
render: (text: any, record: any) => <>
<Select defaultValue={text}>
<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>
</Select>
</>
},
{
title: '单价',
dataIndex: 'price',
align: 'center',
key: 'price',
render: (text: any, record: any) => (
<>
{
text && text.length > 0 && text.map((item: any, index: any) => <p>{index * 1000 + 1}~{1000 * (index + 1)}: <span style={{ color: 'red' }}>￥{item}</span></p>)
}
const [colums, setColumns] = useState<ColumnType<any>[]>()
const { ProductStore } = store
const { productName, selectedGoods, productSelectAttribute, tableDataSource, setTableDataSource } = ProductStore
useEffect(()=>{
//传入ref给父级
onRef(priceFormRef)
// 采用mobx数据 生成表格的column
let _col = [];
let col_productName = { title: '商品名称', dataIndex: '商品名称', key: '商品名称' }
_col.push(col_productName)
let _priceAttribute = productSelectAttribute.filter(_item=>_item.isPrice)
let len = _priceAttribute.length
let _attributeNameArr = [];
let _attributeValueArr = [];
if(len){ // 提取价格属性 属性名数组 属性值SKU数组
_priceAttribute.map(_item=>{
_attributeNameArr.push(_item.attributeName) // 用于列header
let _tempArr = []
_item.customerAttributeValueList.map(__item => _tempArr.push(__item.value))
_attributeValueArr.push(_tempArr) // 价格属性的属性值数组 用于SKU组合
})
}
let combineArray = SKUCombine(_attributeValueArr)
if(selectedGoods.length>0){ // 把货品放入表格列中
_col.push({
title: '对应货品',
dataIndex: '对应货品',
key: '对应货品',
width: 360,
render: (text: any, record: any) => <>
<Select style={{width:'100%'}} defaultValue={text} onChange={(v)=> {tableSelelctChange(v, record) }}>
{
selectedGoods.length>0 && selectedGoods.map(_item => (
<Option key={_item.id} value={_item.id}>{_item.code}/{_item.name}/{_item.type}/￥{_item.costPrice}</Option>
))
}
</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></>,
dataIndex: 'option',
align: 'center',
width: 100,
render: (text: any, record: any) => {
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) => {
setPlanPrice(v.target.value)
......@@ -119,9 +202,24 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
const setPriceOk = () => {
setPriceForm.validateFields().then(v => {
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 = () => {
......@@ -129,9 +227,14 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
console.log('setPriceCancel')
}
const clickSetPrice = (record: any) => {
console.log(record)
setCurrentSetPriceRow(record)
setSetPriceModal(true)
}
const changeLadderPrice = (e: any) => {
setLadderPrice(e.target.checked)
setPriceForm.setFields([{ name: 'ladderPrice', value: e.target.checked }])
}
return (<>
......@@ -140,6 +243,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
form={priceForm}
name="add-products-price"
labelAlign="left"
ref={priceFormRef}
>
<Form.Item
name="unit"
......@@ -223,7 +327,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
<Checkbox>允许使用会员折扣价购买</Checkbox>
</Form.Item>
</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
title="设置价格"
......@@ -236,12 +340,14 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
{...layoutSetPrice}
name="settingPrice"
form={setPriceForm}
initialValues={{ladderPrice: false}}
>
<Form.Item
label=""
name="ladderPrice"
valuePropName="checked"
>
<Checkbox checked={ladderPrice} onChange={changeLadderPrice}>阶梯价格</Checkbox>
<Checkbox onChange={changeLadderPrice}>阶梯价格</Checkbox>
</Form.Item>
{
ladderPrice ? <Form.Item
......@@ -325,4 +431,4 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
</>)
}
export default PriceAttributeForm
\ No newline at end of file
export default observer(PriceAttributeForm)
\ 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 { Button, Form, Select, Checkbox, Tabs, Input } from 'antd'
import styles from './index.less'
......@@ -7,6 +7,11 @@ import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
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 = {
labelCol: {
span: 2,
......@@ -24,6 +29,7 @@ const tailLayout = {
export interface Iprops {
attributesData: any[];
onRef: (refs: any) => void;
}
const { TabPane } = Tabs
......@@ -31,8 +37,15 @@ const { Option } = Select
const { TextArea } = Input
const ProductAttributeForm: React.FC<Iprops> = (props) => {
const { attributesData } = props
const { attributesData, onRef } = props
const productAttributeFormRef = useRef()
const [attributeForm] = Form.useForm()
const { ProductStore } = store
useEffect(()=>{
//传入ref给父级
onRef(productAttributeFormRef)
}, [])
let paramsArray = [];
......@@ -47,7 +60,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
* @param {Object} 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){
for(let item of attrItem?.customerAttributeValueList){
if(value?.length){
......@@ -55,7 +68,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
if(item.id===i){
params.customerAttributeValueList.push({
customerAttributeValueId: i,
value: item.value
value: item.value,
})
}
}
......@@ -63,7 +76,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
if(item.id===value){
params.customerAttributeValueList.push({
customerAttributeValueId: value,
value: item.value
value: item.value,
})
}
}
......@@ -71,7 +84,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
}else{
params.customerAttributeValueList.push({
customerAttributeValueId: null,
value: value.target.value
value: value.target.value,
})
}
paramsArray.push(params)
......@@ -80,8 +93,8 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
item[next.customerAttributeId] = next;
return item
},{}))
console.log(resultParams) // 最终转换的数据格式
console.log(resultParams, 'resultParams') // 最终转换数据
ProductStore.setProductSelectAttribute(resultParams) //注入mobx
}
const renderTabPanchildren = (attrItem: any) => {
......@@ -123,7 +136,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
<Checkbox.Group onChange={(v)=>onChange(v, attrItem)}>
{
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>
......@@ -153,6 +166,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
name="attribute-form"
labelAlign="left"
onFinish={onFinish}
ref={productAttributeFormRef}
>
<Tabs defaultActiveKey="1" tabPosition="left">
{
......@@ -179,4 +193,4 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
</>)
}
export default ProductAttributeForm
\ No newline at end of file
export default observer(ProductAttributeForm)
\ 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 { Button, Form, Select, Checkbox } from 'antd'
import styles from './index.less'
......@@ -7,6 +7,11 @@ import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
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 = {
labelCol: {
span: 2,
......@@ -22,9 +27,10 @@ export interface Iprops {
const SelectGoodsForm: React.FC<Iprops> = (props) => {
const [selectGoodsForm] = Form.useForm()
const [showSelectGoods, setSelectGoods] = useState(false)
const [showSelectGoods, setIsSelectGoods] = useState(false)
const [selectGoodsRow, setSelectGoodsRow] = useState<any[]>([]) // 模态框选择的行数据
const [selectedGoodsRowKeys, setSelectedGoodsRowKeys] = useState<Array<number>>([])
const { ProductStore } = store
const fetchData = (params: any) => {
console.log(params)
......@@ -78,12 +84,13 @@ const SelectGoodsForm: React.FC<Iprops> = (props) => {
const onSelectGoodsChange = (value: any) => {
setSelectedGoodsRowKeys([])
setSelectGoods(value.target.checked)
setIsSelectGoods(value.target.checked)
}
const rowSelection = {
selectedRowKeys: selectedGoodsRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => {
ProductStore.setSelectedGoods(selectedRows)
setSelectGoodsRow(selectedRows);
setSelectedGoodsRowKeys(selectedRowKeys);
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
......@@ -112,4 +119,4 @@ const SelectGoodsForm: React.FC<Iprops> = (props) => {
</>)
}
export default SelectGoodsForm
\ No newline at end of file
export default observer(SelectGoodsForm)
\ No newline at end of file
src/store/index.tsx
View file @ 3e410bcf
import UserStore from './user'
import ThemeStore from './theme'
import ProductStroe from './product'
import React from 'react';
import { Provider } from 'mobx-react'
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';
*/
export interface IStore {
userStore: IUserModule
userStore: IUserModule;
ProductStore: IProductModule;
}
const store = {
export const store = {
userStore: new UserStore,
ThemeStore: new ThemeStore,
ProductStore: new ProductStroe
}
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