Skip to content

M
merchant-manage-ui
Commit 610a8d03 authored by beisir's avatar beisir
Browse files
Options

feat: 增加批量设置

parent f93bb626
Show whitespace changes
Inline Side-by-side
Showing with 342 additions and 152 deletions
src/pages/GoodsManage-new/OperationModal/BatchSettings.jsx 0 → 100644
View file @ 610a8d03
import React from 'react';
import { Form, Select, Button } from 'antd';
import { cleanArray } from './utils';
import { getInput } from './libs';
const columnsRest = { style: { width: 135 } };
const formItemColumns = () => {
console.log('==========');
return [
{
title: '供货价',
key: 'supplyPrice',
placeholder: '请先选择二级规格',
inputType: 'number',
rest: columnsRest,
},
{
title: '市场价',
key: 'marketPrice',
placeholder: '请选择市场价',
inputType: 'number',
rest: columnsRest,
},
{
title: '重量(kg)',
key: 'weight',
inputType: 'number',
rest: columnsRest,
role: [1, 2],
},
{
title: '库存',
key: 'productStock',
inputType: 'number',
rest: columnsRest,
},
];
};
const formItemStyle = {
style: {
display: 'inline-block',
marginRight: 5,
marginBottom: 0,
},
};
const createSpecSelect = ({ specId, list, placeholder }) => (
<Select allowClear style={{ width: 120 }} placeholder={specId?.label || placeholder}>
{list.map(item => (
<Select.Option key={item} value={item}>
{item}
</Select.Option>
))}
</Select>
);
const createFormItems = (productType = 1, { getFieldDecorator }) => {
const formItems = formItemColumns()
.filter(item => !item.role || item?.role.includes(productType))
.map(item => (
<Form.Item {...formItemStyle}>
{getFieldDecorator(`batchItem[${item.key}]`, {})(getInput(item))}
</Form.Item>
));
return formItems;
};
export const BatchSettings = ({ form, settingTable }) => {
const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
const values = getFieldsValue();
const { firstSpecId, secondSpecId, firstValues = [], secondValues = [] } = values;
const cleanFirstValues = cleanArray(firstValues);
const cleanSecondValues = cleanArray(secondValues);
const renderFormItem = createFormItems(2, { getFieldDecorator });
return (
<div>
<Form.Item {...formItemStyle}>
{getFieldDecorator('batchItem[batchFirst]', {})(
createSpecSelect({
list: cleanFirstValues,
specId: firstSpecId,
placeholder: '请先选择一级规格',
}),
)}
</Form.Item>
<Form.Item {...formItemStyle}>
{getFieldDecorator('batchItem[batchSecond]', {})(
createSpecSelect({
list: cleanSecondValues,
specId: secondSpecId,
placeholder: '请先选择二级规格',
}),
)}
</Form.Item>
{renderFormItem}
<Form.Item style={{ display: 'inline-block' }}>
<Button type="primary" onClick={() => settingTable(getFieldValue('batchItem'))}>
批量设置
</Button>
</Form.Item>
</div>
);
};
src/pages/GoodsManage-new/OperationModal/GenerateProductInfo.jsx
View file @ 610a8d03
import React, { useState } from 'react';
import { Table, Form, InputNumber, Input, Popconfirm, Button, notification } from 'antd';
import { useEditProduct, dataInit } from './utils';
import { getInput } from './libs';
import { cleanArray } from './utils';
import { BatchSettings } from './BatchSettings';
const initData = {
weight: null,
productStockWarning: null,
marketPrice: 'marketPrice',
// salePrice: '',
supplyPrice: 'supplyPrice',
// stock: '',
productStock: 'productStock',
thirdSkuNo: 'thirdSkuNo',
skuLink: 'skuLink',
marketPrice: null,
supplyPrice: null,
productStock: null,
thirdSkuNo: null,
skuLink: null,
imageList: [],
};
const createProductData = (
{ firstValues, secondValues, firstSpecId, secondSpecId },
productData,
) => {
const createSecondProduct = (secondValues, initItem, secondSpecId, dataSource, callback) => {
secondValues.forEach(secondItem => {
const specSecond = { ...initItem };
if (callback) {
callback(specSecond);
}
specSecond.secondSpecId = secondSpecId.key;
specSecond.secondSpecValue = secondItem;
dataSource.push(specSecond);
});
};
const createProductData = ({ firstValues, secondValues, firstSpecId, secondSpecId }) => {
const countRowSpan = {};
const dataSource = [];
if (firstValues.length) {
firstValues.forEach((fisrtItem, index) => {
const specFirst = Object.assign({}, initData);
const specFirst = { ...initData };
specFirst.firstSpecId = firstSpecId.key;
specFirst.firstSpecValue = fisrtItem;
if (secondValues.length) {
secondValues.forEach(secondItem => {
const specSecond = Object.assign({}, specFirst);
createSecondProduct(secondValues, specFirst, secondSpecId, dataSource, specSecond => {
if (!countRowSpan[specFirst.firstSpecValue]) {
countRowSpan[specFirst.firstSpecValue] = true;
specSecond.rowSpanCount = secondValues.length;
}
specSecond.secondSpecId = secondSpecId.key;
specSecond.secondSpecValue = secondItem;
dataSource.push(specSecond);
});
return;
}
dataSource.push(specFirst);
});
} else if (secondValues.length) {
createSecondProduct(secondValues, initData, secondSpecId, dataSource);
} else {
dataSource.push(initData);
}
return dataSource;
};
......@@ -55,12 +65,6 @@ const isRepeatProduct = (list, message) => {
const EditableContext = React.createContext();
const EditableCell = tableProps => {
const getInput = () => {
if (tableProps.inputType === 'number') {
return <InputNumber />;
}
return <Input />;
};
const renderCell = form => {
const { getFieldDecorator } = form;
const {
......@@ -71,43 +75,36 @@ const EditableCell = tableProps => {
record,
index,
children,
rules,
rules = [],
required,
...restProps
} = tableProps;
console.log(tableProps);
console.log(record[dataIndex]);
return (
<td {...restProps}>
{editable ? (
<Form.Item style={{ margin: 0 }}>
{getFieldDecorator(`tableArray[${index}][${dataIndex}]`, {
rules: [
{
required,
message: `请输入 ${title}!`,
message: `请输入${title}!`,
},
...rules,
],
initialValue: record[dataIndex],
})(getInput())}
</Form.Item>
) : (
<Form.Item style={{ margin: 0 }}>
{getFieldDecorator(`tableArray[${index}][${dataIndex}]`, {
initialValue: record[dataIndex],
})(<span className="ant-form-text">{children}</span>)}
})(getInput(tableProps))}
</Form.Item>
)}
</td>
);
};
return <EditableContext.Consumer>{renderCell}</EditableContext.Consumer>;
};
const ProductInfoColumns = ({ firstSpecId, secondSpecId }, productData) => {
console.log(productData);
return productData.length
? [
const ProductInfoColumns = (
{ firstSpecId, secondSpecId, firstValues, secondValues },
productData,
) => {
const productColData = [
{
title: firstSpecId?.label,
dataIndex: 'firstSpecValue',
......@@ -116,15 +113,18 @@ const ProductInfoColumns = ({ firstSpecId, secondSpecId }, productData) => {
render: (val, row) => ({
children: val,
props: {
rowSpan: row.rowSpanCount ? row.rowSpanCount : 0,
// eslint-disable-next-line no-nested-ternary
rowSpan: secondValues?.length ? (row.rowSpanCount ? row.rowSpanCount : 0) : true,
},
}),
hidden: !firstValues?.length,
},
{
title: secondSpecId?.label,
dataIndex: 'secondSpecValue',
key: 'secondSpecValue',
editable: false,
hidden: !secondValues?.length,
},
{
title: '供货价',
......@@ -140,6 +140,15 @@ const ProductInfoColumns = ({ firstSpecId, secondSpecId }, productData) => {
key: 'marketPrice',
dataIndex: 'marketPrice',
editable: true,
inputType: 'number',
required: true,
},
{
title: '重量(kg)',
key: 'weight',
dataIndex: 'weight',
editable: true,
inputType: 'number',
required: true,
},
{
......@@ -150,75 +159,118 @@ const ProductInfoColumns = ({ firstSpecId, secondSpecId }, productData) => {
inputType: 'number',
required: true,
},
{
title: '库存预警',
dataIndex: 'productStockWarning',
key: 'productStockWarning',
editable: true,
inputType: 'number',
required: true,
},
{
title: '商品自编码',
dataIndex: 'thirdSkuNo',
key: 'thirdSkuNo',
editable: true,
inputType: 'number',
inputType: 'input',
required: true,
},
{
title: '京东链接',
dataIndex: 'skuLink',
key: 'skuLink',
inputType: 'input',
editable: true,
},
]
: [];
];
return productData.length ? productColData : [];
};
const BatchSettings = () => {};
export const GenerateProductInfo = ({ form }) => {
const [productData, setProductData] = useState([]);
const components = {
body: {
cell: EditableCell,
},
};
const columns = ProductInfoColumns(form.getFieldsValue(), productData).map(col => {
console.log('============================================================');
const createProductColumns = (values, productData) => {
const columns = ProductInfoColumns(values, productData)
.map(col => {
console.log('=================>');
return {
...col,
onCell: (record, index) => {
console.log(index);
return {
onCell: (record, index) => ({
index,
record,
inputType: col.inputType,
editable: col.editable,
dataIndex: col.dataIndex,
title: col.title,
rules: col.rules,
required: col.required,
}),
};
})
.filter(col => !col.hidden);
return columns;
};
export const GenerateProductInfo = ({ form }) => {
const [productData, setProductData] = useState([]);
const [columns, setColumns] = useState([]);
const components = {
body: {
cell: EditableCell,
},
};
});
const handleAddProduct = () => {
const values = form.getFieldsValue();
const { firstValues = [], secondValues = [] } = values;
const { firstValues = [], secondValues = [], firstSpecId, secondSpecId } = values;
const cleanFirstValues = cleanArray(firstValues); // 清楚空属性
const cleanSecondValues = cleanArray(secondValues);
// 校验是否有重复的一级规格
const fisrtIsRepeat = isRepeatProduct(firstValues, '一级规格不可重复');
const secondIsRepeat = isRepeatProduct(secondValues, '二级规格不可重复');
const fisrtIsRepeat = isRepeatProduct(cleanFirstValues, '一级规格不可重复');
const secondIsRepeat = isRepeatProduct(cleanSecondValues, '二级规格不可重复');
if ([fisrtIsRepeat, secondIsRepeat].includes(true)) {
setProductData([]);
return;
}
const newData = createProductData(values, productData);
const cleanValues = {
firstValues: cleanFirstValues,
secondValues: cleanSecondValues,
firstSpecId,
secondSpecId,
};
const newData = createProductData(cleanValues);
console.log(newData);
setProductData(newData);
form.setFieldsValue({
tableArray: newData,
});
const columnsData = createProductColumns(cleanValues, newData);
setColumns(columnsData);
};
const settingTable = batchItem => {
const productKey = Object.keys(batchItem);
console.log(productKey);
const newData = productData.map(item => {
productKey.forEach(key => {
item[key] = batchItem[key] || null;
});
return item;
});
console.log(newData);
setProductData(newData);
form.setFieldsValue({
tableArray: newData,
});
};
return (
<EditableContext.Provider value={form}>
<div style={{ textAlign: 'center' }}>
<Button onClick={handleAddProduct} type="primary" style={{ marginBottom: 16 }}>
<Button onClick={() => handleAddProduct()} type="primary" style={{ marginBottom: 16 }}>
生成商品信息
</Button>
{/* <BatchSettings /> */}
</div>
<BatchSettings form={form} settingTable={settingTable} />
<Table
rowKey="id"
pagination={false}
......
src/pages/GoodsManage-new/OperationModal/SelectSpecifications.jsx
View file @ 610a8d03
......@@ -17,9 +17,11 @@ export const SelectSpecifications = ({
getFieldDecorator(keys, { initialValue: [] });
const remove = k => {
const valueKey = getFieldValue(keys);
const removeItem = valueKey.filter(i => i !== k);
setFieldsValue({
[keys]: valueKey.filter(i => i !== k),
[keys]: removeItem,
});
setCountNumber(removeItem.length);
};
const add = () => {
......@@ -45,8 +47,8 @@ export const SelectSpecifications = ({
const formItemList = getFieldValue(keys);
const formItems = formItemList.map((k, index) => (
<Col style={{ marginRight: 20 }} key={k}>
<Form.Item style={{ width: 200 }} required={false} key={k}>
{getFieldDecorator(`${formValue}[${k}]`, {
<Form.Item style={{ width: 200 }} required={false}>
{getFieldDecorator(`${formValue}[${index}]`, {
validateTrigger: ['onChange', 'onBlur'],
rules: [{ required: true, whitespace: true, message: 'Please input passenger' }],
})(<Input placeholder="passenger name" style={{ width: 150, marginRight: 8 }} />)}
......
src/pages/GoodsManage-new/OperationModal/libs.jsx
View file @ 610a8d03
import React from 'react';
import { Radio, Cascader } from 'antd';
import { Radio, Cascader, InputNumber, Input } from 'antd';
export const RadioComponent = ({ productTypeList }) => (
<Radio.Group>
......@@ -20,3 +20,22 @@ export const CascaderComponent = ({ categoryData }) => (
options={categoryData}
/>
);
export const getInput = ({ inputType, title, children, rest = {} }) => {
let renderElement = null;
switch (inputType) {
case 'number':
renderElement = <InputNumber {...rest} placeholder={`请输入${title}`} />;
break;
case 'input':
renderElement = <Input {...rest} placeholder={`请输入${title}`} />;
break;
default:
renderElement = (
<span {...rest} className="ant-form-text">
{children}
</span>
);
}
return renderElement;
};
src/pages/GoodsManage-new/OperationModal/utils.js
View file @ 610a8d03
......@@ -53,3 +53,14 @@ export const dataInit = list => {
return finialList;
});
};
export const cleanArray = actual => {
const newArray = [];
// eslint-disable-next-line no-plusplus
for (let i = 0; i < actual.length; i++) {
if (actual[i]) {
newArray.push(actual[i]);
}
}
return newArray;
};
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