Skip to content

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

feat: 新增编辑表格组件

parent 38abbba2
Hide whitespace changes
Inline Side-by-side
Showing with 216 additions and 90 deletions
src/pages/GoodsManage-new/OperationModal/GenerateProductInfo.jsx
View file @ f93bb626
import React from 'react';
import { Table, Form, InputNumber, Input, Popconfirm } from 'antd';
import React, { useState } from 'react';
import { Table, Form, InputNumber, Input, Popconfirm, Button, notification } from 'antd';
import { useEditProduct, dataInit } from './utils';
const data = [];
// eslint-disable-next-line no-plusplus
for (let i = 0; i < 5; i++) {
data.push({
firstSpecValue: '规格一级',
secondSpecValue: '规格二级',
key: i.toString(),
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,
const initData = {
weight: null,
productStockWarning: null,
marketPrice: 'marketPrice',
// salePrice: '',
supplyPrice: 'supplyPrice',
// stock: '',
productStock: 'productStock',
thirdSkuNo: 'thirdSkuNo',
skuLink: 'skuLink',
imageList: [],
};
const createProductData = (
{ firstValues, secondValues, firstSpecId, secondSpecId },
productData,
) => {
const countRowSpan = {};
const dataSource = [];
firstValues.forEach((fisrtItem, index) => {
const specFirst = Object.assign({}, initData);
specFirst.firstSpecId = firstSpecId.key;
specFirst.firstSpecValue = fisrtItem;
if (secondValues.length) {
secondValues.forEach(secondItem => {
const specSecond = Object.assign({}, specFirst);
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);
});
}
return dataSource;
};
const isRepeatProduct = (list, message) => {
const isRepeat = [...new Set(list)].length !== list.length;
if (isRepeat) {
notification.warning({ message });
}
return isRepeat;
};
const EditableContext = React.createContext();
......@@ -26,31 +64,39 @@ const EditableCell = tableProps => {
const renderCell = form => {
const { getFieldDecorator } = form;
const {
editing,
editable,
dataIndex,
title,
inputType,
record,
index,
children,
rules,
required,
...restProps
} = tableProps;
console.log(tableProps);
return (
<td {...restProps}>
{editing ? (
{editable ? (
<Form.Item style={{ margin: 0 }}>
{getFieldDecorator(`tableArray[${record.key}][${dataIndex}]`, {
{getFieldDecorator(`tableArray[${index}][${dataIndex}]`, {
rules: [
{
required: true,
message: `Please Input ${title}!`,
required,
message: `请输入 ${title}!`,
},
...rules,
],
initialValue: record[dataIndex],
})(getInput())}
</Form.Item>
) : (
children
<Form.Item style={{ margin: 0 }}>
{getFieldDecorator(`tableArray[${index}][${dataIndex}]`, {
initialValue: record[dataIndex],
})(<span className="ant-form-text">{children}</span>)}
</Form.Item>
)}
</td>
);
......@@ -58,93 +104,127 @@ const EditableCell = tableProps => {
return <EditableContext.Consumer>{renderCell}</EditableContext.Consumer>;
};
const isEditing = record => record.key === '';
const ProductInfoColumns = ({ firstSpecId, secondSpecId }, productData) => {
console.log(productData);
return productData.length
? [
{
title: firstSpecId?.label,
dataIndex: 'firstSpecValue',
key: 'firstSpecValue',
editable: false,
render: (val, row) => ({
children: val,
props: {
rowSpan: row.rowSpanCount ? row.rowSpanCount : 0,
},
}),
},
{
title: secondSpecId?.label,
dataIndex: 'secondSpecValue',
key: 'secondSpecValue',
editable: false,
},
{
title: '供货价',
key: 'supplyPrice',
dataIndex: 'supplyPrice',
editable: true,
inputType: 'number',
required: true,
rules: [],
},
{
title: '市场价',
key: 'marketPrice',
dataIndex: 'marketPrice',
editable: true,
required: true,
},
{
title: '库存',
dataIndex: 'productStock',
key: 'productStock',
editable: true,
inputType: 'number',
required: true,
},
{
title: '商品自编码',
dataIndex: 'thirdSkuNo',
key: 'thirdSkuNo',
editable: true,
inputType: 'number',
required: true,
},
{
title: '京东链接',
dataIndex: 'skuLink',
key: 'skuLink',
editable: true,
},
]
: [];
};
const ProductInfoColumns = () => [
{
title: '一级规格',
dataIndex: 'firstSpecValue',
editable: false,
},
{
title: '二级规格',
dataIndex: 'secondSpecValue',
editable: false,
},
{
title: 'name',
dataIndex: 'name',
editable: true,
},
{
title: 'age',
dataIndex: 'age',
editable: true,
},
{
title: 'address',
dataIndex: 'address',
editable: true,
},
{
title: 'operation',
dataIndex: 'operation',
render: (text, record) => {
const editingKey = '';
const editable = isEditing(record);
return editable ? (
<span>
<EditableContext.Consumer>
{form => (
<a
// onClick={() => save(form, record.key)}
style={{ marginRight: 8 }}
>
Save
</a>
)}
</EditableContext.Consumer>
<Popconfirm title="Sure to cancel?">
<a>Cancel</a>
</Popconfirm>
</span>
) : (
<a disabled={editingKey !== ''}>Edit</a>
);
},
},
];
const BatchSettings = () => {};
export const GenerateProductInfo = ({ form }) => {
const [productData, setProductData] = useState([]);
const components = {
body: {
cell: EditableCell,
},
};
const columns = ProductInfoColumns().map(col => {
if (!col.editable) {
return col;
}
const columns = ProductInfoColumns(form.getFieldsValue(), productData).map(col => {
console.log('============================================================');
return {
...col,
onCell: record => ({
record,
inputType: col.dataIndex === 'age' ? 'number' : 'text',
dataIndex: col.dataIndex,
title: col.title,
editing: true,
}),
onCell: (record, index) => {
console.log(index);
return {
index,
record,
editable: col.editable,
dataIndex: col.dataIndex,
title: col.title,
rules: col.rules,
required: col.required,
};
},
};
});
const handleAddProduct = () => {
const values = form.getFieldsValue();
const { firstValues = [], secondValues = [] } = values;
// 校验是否有重复的一级规格
const fisrtIsRepeat = isRepeatProduct(firstValues, '一级规格不可重复');
const secondIsRepeat = isRepeatProduct(secondValues, '二级规格不可重复');
if ([fisrtIsRepeat, secondIsRepeat].includes(true)) {
setProductData([]);
return;
}
const newData = createProductData(values, productData);
setProductData(newData);
};
return (
<EditableContext.Provider value={form}>
<div style={{ textAlign: 'center' }}>
<Button onClick={handleAddProduct} type="primary" style={{ marginBottom: 16 }}>
生成商品信息
</Button>
{/* <BatchSettings /> */}
</div>
<Table
rowKey="id"
pagination={false}
components={components}
bordered
dataSource={data}
dataSource={productData}
columns={columns}
rowClassName="editable-row"
/>
......
src/pages/GoodsManage-new/OperationModal/SelectSpecifications.jsx
View file @ f93bb626
......@@ -2,7 +2,15 @@ import React, { useState } from 'react';
import { Form, notification, Col, Input, Icon, Row, Button, Select } from 'antd';
import { filterSpecId } from './utils';
export const SelectSpecifications = ({ form, keys, formKey, labelName, specList, formValue }) => {
export const SelectSpecifications = ({
form,
keys,
formKey,
labelName,
specList,
formValue,
labelKey,
}) => {
const { getFieldValue, getFieldDecorator, setFieldsValue } = form;
const [countNumber, setCountNumber] = useState(0); // 添加计数器
......@@ -28,6 +36,12 @@ export const SelectSpecifications = ({ form, keys, formKey, labelName, specList,
});
};
const onChange = option => {
// setFieldsValue({
// [labelKey]: option.props.children,
// });
};
const formItemList = getFieldValue(keys);
const formItems = formItemList.map((k, index) => (
<Col style={{ marginRight: 20 }} key={k}>
......@@ -45,7 +59,13 @@ export const SelectSpecifications = ({ form, keys, formKey, labelName, specList,
<>
<Form.Item label={labelName}>
{getFieldDecorator(formKey)(
<Select allowClear showSearch onChange={(val, option) => {}} filterOption={filterSpecId}>
<Select
labelInValue
allowClear
showSearch
onChange={(_, option) => onChange(option)}
filterOption={filterSpecId}
>
{specList.map(item => (
<Select.Option key={item.specId} value={item.specId}>
{item.specName}
......
src/pages/GoodsManage-new/OperationModal/index.jsx
View file @ f93bb626
......@@ -137,6 +137,7 @@ const OperationForm = props => {
keys="firstKeys"
formKey="firstSpecId"
formValue="firstValues"
labelKey="firstSpecName"
labelName="一级规格"
specList={specList}
/>
......@@ -145,6 +146,7 @@ const OperationForm = props => {
keys="secondKeys"
formKey="secondSpecId"
formValue="secondValues"
labelKey="secondSpecName"
labelName="二级规格"
specList={specList}
/>
......
src/pages/GoodsManage-new/OperationModal/utils.js
View file @ f93bb626
......@@ -31,3 +31,25 @@ export const useSpecList = () => {
export const filterSpecId = (input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
export const useEditProduct = () => [1];
export const dataInit = list => {
if (!list || !list.length) return;
const obj = {};
let finialList = [];
list.forEach(item => {
obj[item.firstSpecValue] = [];
});
list.forEach(item => obj[item.firstSpecValue].push(item));
const keys = Object.keys(obj);
keys.forEach(key => {
obj[key].forEach((i, index) => {
if (index === 0) {
i.length = obj[key].length;
}
});
finialList = finialList.concat(obj[key]);
return finialList;
});
};
src/pages/GoodsManage-new/index.jsx
View file @ f93bb626
......@@ -16,7 +16,7 @@ export default () => {
*/
const [isEdit, setIsEdit] = useState(false);
const [categoryData, setCategoryData] = useState([]);
const [operationVisible, setOperationVisible] = useState(false);
const [operationVisible, setOperationVisible] = useState(true);
const actionRef = useRef();
const supplyPriceRef = useRef();
const [supplyPrice, setSupplyPrice] = useState([]);
......
src/pages/GoodsManage/createModal/mixin.jsx
View file @ f93bb626
......@@ -69,6 +69,7 @@ export function createNewList(first, second, firstSpecId, secondSpecId) {
});
return;
}
console.log(copy);
list.push(copy);
});
} else if (second.length) {
......@@ -83,7 +84,7 @@ export function createNewList(first, second, firstSpecId, secondSpecId) {
// 缺少一级和二级规格时生成的编辑表格
list.push(sku);
}
console.log(list);
return list;
}
......@@ -374,6 +375,7 @@ export function editColumns(methods, firstData, firstSpec, secondSpec, isJDGoods
align: 'center',
width: 100,
render: (val, row) => {
console.log(row);
const obj = {
children: val,
props: {},
......
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