Commit 2ce7c881 authored by beisir's avatar beisir

fix: 新增服务类商品success

parent d827006c
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -156,6 +156,13 @@ class goodsManage extends Component { ...@@ -156,6 +156,13 @@ class goodsManage extends Component {
<InputNumber style={iptNumWidth} placeholder="请输入" onChange={this.valueMin} /> <InputNumber style={iptNumWidth} placeholder="请输入" onChange={this.valueMin} />
</FormItem> </FormItem>
</FormItem> </FormItem>
<FormItem label="商品类型" name="productType">
<Select style={iptNumWidth}>
<Option value={1}>实体商品</Option>
<Option value={2}>虚拟商品</Option>
<Option value={4}>服务类商品</Option>
</Select>
</FormItem>
<FormItem name="thirdSkuNo" label="第三方SKU编码"> <FormItem name="thirdSkuNo" label="第三方SKU编码">
<Input placeholder="请输入第三方SKU编码" allowClear style={selectW} /> <Input placeholder="请输入第三方SKU编码" allowClear style={selectW} />
</FormItem> </FormItem>
......
...@@ -294,12 +294,6 @@ class goodsManage extends Component { ...@@ -294,12 +294,6 @@ class goodsManage extends Component {
}); });
}; };
// serviceVisbleChange = row => {
// this.setState({
// serviceVisble: true,
// });
// };
serviceVisbleChange = async row => { serviceVisbleChange = async row => {
const { state, spuId, productType } = row; const { state, spuId, productType } = row;
this.setState({ createloading: true }); this.setState({ createloading: true });
...@@ -323,14 +317,18 @@ class goodsManage extends Component { ...@@ -323,14 +317,18 @@ class goodsManage extends Component {
}; };
serviceVisbleOpen = () => { serviceVisbleOpen = () => {
console.log('============>open');
this.serviceVisbleClose(true); this.serviceVisbleClose(true);
}; };
serviceVisbleClose = flag => { serviceVisbleClose = (flag, refresh) => {
this.setState({ this.setState({
serviceVisble: flag, serviceVisble: flag,
serviceData: {}, serviceData: {},
}); });
if (refresh) {
this.handleSearch();
}
}; };
render() { render() {
...@@ -445,15 +443,11 @@ class goodsManage extends Component { ...@@ -445,15 +443,11 @@ class goodsManage extends Component {
{/* '894048258062' */} {/* '894048258062' */}
<ServiceGoods <ServiceGoods
visible={this.state.serviceVisble} visible={this.state.serviceVisble}
id={894048258062}
onChange={this.serviceVisbleClose} onChange={this.serviceVisbleClose}
SourceData={this.state.serviceData} SourceData={this.state.serviceData}
shopList={this.shopList} shopList={this.shopList}
categoryList={ categoryList={this.state.treeData}
this.state.serviceData.productType === 2 virtualCategoryList={this.state.virtualTreeData}
? this.state.virtualTreeData
: this.state.treeData
}
specListData={this.state.specListData} specListData={this.state.specListData}
/> />
</Spin> </Spin>
......
...@@ -213,6 +213,9 @@ export const productTypeList = [ ...@@ -213,6 +213,9 @@ export const productTypeList = [
export const JDSHOPID = [3, 5, 6]; export const JDSHOPID = [3, 5, 6];
/** ********************************************************************************* */
/** ********************************************************************************* */
/** ********************************************************************************* */
// 编辑回显示时只获取用到的数据 // 编辑回显示时只获取用到的数据
const filterItem = skuItem => { const filterItem = skuItem => {
const { serviceItem, ...argsItem } = skuItem; const { serviceItem, ...argsItem } = skuItem;
...@@ -224,7 +227,7 @@ const filterSpecData = skuList => ...@@ -224,7 +227,7 @@ const filterSpecData = skuList =>
skuList.reduce( skuList.reduce(
(orgin, skuItem) => { (orgin, skuItem) => {
const item = filterItem(skuItem); const item = filterItem(skuItem);
const { firstSpecValue, secondSpecValue } = item; const { firstSpecValue, secondSpecValue, id } = item;
if (firstSpecValue && !orgin.firstDuplicate.includes(firstSpecValue)) { if (firstSpecValue && !orgin.firstDuplicate.includes(firstSpecValue)) {
orgin.firstSpecValue.push(item); orgin.firstSpecValue.push(item);
orgin.firstDuplicate.push(firstSpecValue); orgin.firstDuplicate.push(firstSpecValue);
...@@ -233,14 +236,15 @@ const filterSpecData = skuList => ...@@ -233,14 +236,15 @@ const filterSpecData = skuList =>
orgin.secondSpecValue.push(item); orgin.secondSpecValue.push(item);
orgin.secondDuplicate.push(secondSpecValue); orgin.secondDuplicate.push(secondSpecValue);
} }
// origin.skuItemResultList.push(item);
return orgin; return orgin;
}, },
{ {
firstSpecValue: [], firstSpecValue: [],
secondSpecValue: [], secondSpecValue: [],
dataSource: [],
firstDuplicate: [], firstDuplicate: [],
secondDuplicate: [], secondDuplicate: [],
skuItemResultList: [],
}, },
); );
...@@ -252,15 +256,12 @@ const filterCarouseList = (carouseList = []) => ...@@ -252,15 +256,12 @@ const filterCarouseList = (carouseList = []) =>
return origin; return origin;
}, {}); }, {});
export const ProcessEditData = (data, row) => { const filterServiceItem = (type, serviceItem) => {
const [oneItem = {}] = data.skuList; if (type !== 4) {
const serviceItem = oneItem.serviceItem || {}; return {};
const orginSpecItem = filterSpecData(data.skuList); }
const imageList = filterCarouseList(data.carouseList); console.log(serviceItem);
return {
const servesItemParams =
data.productType === 4
? {
serviceItem: { serviceItem: {
useTime: [resetTime(serviceItem.useStartTime), resetTime(serviceItem.useEndTime)], useTime: [resetTime(serviceItem.useStartTime), resetTime(serviceItem.useEndTime)],
purchaseTime: [ purchaseTime: [
...@@ -285,14 +286,27 @@ export const ProcessEditData = (data, row) => { ...@@ -285,14 +286,27 @@ export const ProcessEditData = (data, row) => {
appointment: serviceItem.appointment, // 预约 appointment: serviceItem.appointment, // 预约
receptionVolume: serviceItem.receptionVolume, // 接待数量 receptionVolume: serviceItem.receptionVolume, // 接待数量
}, },
} };
: {}; };
export const ProcessEditData = (data, row) => {
const [oneItem = {}] = data.skuList;
const serviceItem = oneItem.serviceItem || {};
const orginSpecItem = filterSpecData(data.skuList);
const imageList = filterCarouseList(data.carouseList);
const servesItemParams = filterServiceItem(data.productType, serviceItem);
const specsParams = data.specs.reduce((origin, item) => {
origin[item.specId] = item.specValues.map(child => child.value);
return origin;
}, {});
const SourceData = { const SourceData = {
id: data.id,
productType: data.productType, productType: data.productType,
pageProductType: row.productType, pageProductType: row.productType,
state: row.state,
infoMation: { infoMation: {
...specsParams,
brandId: data.brandId, brandId: data.brandId,
supplierId: data.supplierId, supplierId: data.supplierId,
character: data.character, character: data.character,
...@@ -310,6 +324,7 @@ export const ProcessEditData = (data, row) => { ...@@ -310,6 +324,7 @@ export const ProcessEditData = (data, row) => {
}, },
infoImageData: { infoImageData: {
imageList, imageList,
cardImageList: oneItem.imageList || [],
commonImageList: data.commonImageList, commonImageList: data.commonImageList,
detailImageList: data.detailImageList, detailImageList: data.detailImageList,
}, },
...@@ -318,47 +333,8 @@ export const ProcessEditData = (data, row) => { ...@@ -318,47 +333,8 @@ export const ProcessEditData = (data, row) => {
}; };
return SourceData; return SourceData;
// data.state = state;
// data.pageProductType = productType;
// data.categoryId = data.thirdCategoryId;
// data.firstSpecId = data.skuList[0].firstSpecId;
// data.secondSpecId = data.skuList[0].secondSpecId;
// data.firstSpecName = data.skuList[0].firstSpec;
// data.secondSpecName = data.skuList[0].secondSpec;
// data.firstSpecList = [];
// data.secondSpecList = [];
// data.colorKeys = [];
// data.carouseList.forEach(i => {
// if (i.specValue) {
// data.colorKeys.push(i.specValue);
// }
// });
// data.skuList.forEach(i => {
// if (data.firstSpecList.indexOf(i.firstSpecValue) === -1) {
// data.firstSpecList.push(`${i.firstSpecValue}`);
// }
// if (i.secondSpecValue && data.secondSpecList.indexOf(i.secondSpecValue) === -1) {
// data.secondSpecList.push(i.secondSpecValue);
// }
// });
// data.specs.forEach(item => {
// const arr = [];
// if (item.specValues.length) {
// item.specValues.forEach(childItem => {
// arr.push(childItem.value);
// });
// }
// data[item.specId] = arr;
// });
// data.imageList = [];
// data.carouseList.forEach(i => {
// data.imageList[`${i.specValue}`] = i.skuSpecImageList || [];
// });
// data.editData = sortBy(data.skuList, item => item.firstSpecValue);
// this.setState({
// initData: data,
// createVisible: true,
// createloading: false,
// });
}; };
/** ********************************************************************************* */
/** ********************************************************************************* */
/** ********************************************************************************* */
import React from 'react'; import React, { useState } from 'react';
import { Select, Form, InputNumber, Input, Button, Popover } from 'antd'; import { Select, Form, InputNumber, Input, Button, Popover } from 'antd';
import commonStyle from '../common.less'; import commonStyle from '../common.less';
...@@ -64,9 +64,34 @@ export const SelectTemplate = props => { ...@@ -64,9 +64,34 @@ export const SelectTemplate = props => {
}; };
export const CreateFormInput = props => { export const CreateFormInput = props => {
const { title, record, dataIndex, rowIndex, onClick, type, ...options } = props; const {
batchRole,
rowIndex,
dataIndex,
onBlurEvent,
onClickEvent,
record,
role,
roleProps,
title,
type,
batchProps,
disabeldRender,
...options
} = props;
console.log(dataIndex, roleProps);
if (type === 'input') { if (type === 'input') {
return <Input placeholder={title} {...options} />; return (
<Input
{...roleProps}
{...options}
style={{ width: '100%' }}
placeholder={`请输入${title}`}
onBlur={e => onBlurEvent(e.target.value, dataIndex, rowIndex)}
/>
);
} }
if (type === 'btnText') { if (type === 'btnText') {
...@@ -77,19 +102,23 @@ export const CreateFormInput = props => { ...@@ -77,19 +102,23 @@ export const CreateFormInput = props => {
); );
} }
if (type === 'text') {
return <span className="ant-form-text">{record[dataIndex]}</span>;
}
if (type === 'option') { if (type === 'option') {
return ( return (
<> <>
{record.skuLink && ( {record.skuLink && (
<Button type="primary" size="small" onClick={() => onClick('cloneImg', record)}> <Button type="primary" size="small" onClick={() => onClickEvent('cloneImg', record)}>
拉图片 拉图片
</Button> </Button>
)} )}
{props.isJDGoods && ( {roleProps.isJDGoods && (
<Button <Button
type="primary" type="primary"
size="small" size="small"
onClick={() => onClick('updateName', { ...record, dataIndex, rowIndex })} onClick={() => onClickEvent('updateName', { ...record, dataIndex, rowIndex })}
disabled={props.disabled} disabled={props.disabled}
> >
修改sku名称 修改sku名称
...@@ -99,5 +128,16 @@ export const CreateFormInput = props => { ...@@ -99,5 +128,16 @@ export const CreateFormInput = props => {
); );
} }
return <InputNumber placeholder={title} {...options} />; return (
<InputNumber
{...roleProps}
{...options}
style={{ width: '100%' }}
placeholder={`请输入${title}`}
onBlur={e => {
console.log(e);
onBlurEvent(e.target.value, dataIndex, rowIndex);
}}
/>
);
}; };
import { InputNumber, Input, Modal, Button, Form, Table } from 'antd'; import { Input, Modal, Button, Form, Table, InputNumber } from 'antd';
import React, { import React, {
useContext, useContext,
createContext, createContext,
...@@ -45,74 +45,6 @@ const UpdateSkuName = ({ skuVisble, value, confirmEvent, cancelEvent }) => { ...@@ -45,74 +45,6 @@ const UpdateSkuName = ({ skuVisble, value, confirmEvent, cancelEvent }) => {
}; };
const EditableContext = createContext(null); const EditableContext = createContext(null);
const EditableRow = ({ index, ...props }) => (
// console.log('=============>EditableRow', props);
<tr {...props} />
);
const EditableCell = props => {
const {
rowIndex,
title,
editable,
children,
dataIndex,
record,
roleProps,
handleSave,
roleHidden,
rowOnClickEvent,
roleRules = {},
...restProps
} = props;
// console.log('==============>', props);
const form = useContext(EditableContext);
const customer = useContext(ServiceContext);
const save = async () => {
try {
const tableList = form.getFieldValue('tableList');
handleSave(tableList);
} catch (errInfo) {
console.log('Save failed:', errInfo);
}
};
const onClickEvent = (type, row) => {
// 点击拉取京东图片功能
if (type === 'cloneImg') {
customer.onEventBus(type, row);
return;
}
// 修改sku名称
if (type === 'updateName') {
rowOnClickEvent(row);
}
};
const childNode = editable ? (
<Form.Item
style={{ margin: 0 }}
hidden={roleHidden}
name={['tableList', rowIndex, dataIndex]}
rules={[{ required: roleRules.required, message: `请输入${title}.` }]}
>
<CreateFormInput
{...roleProps}
title={title}
rowIndex={rowIndex}
dataIndex={dataIndex}
record={record}
type={props.type}
onBlur={save}
onClick={onClickEvent}
disabled={props.disabled}
/>
</Form.Item>
) : (
children
); // <Button type="text">{children[1]}</Button>
return <td {...restProps}>{childNode}</td>;
};
const EditFormTable = forwardRef((props, ref) => { const EditFormTable = forwardRef((props, ref) => {
const { initData, defaultColumns, setTableData, mergeTable } = props; const { initData, defaultColumns, setTableData, mergeTable } = props;
const customer = useContext(ServiceContext); const customer = useContext(ServiceContext);
...@@ -124,34 +56,45 @@ const EditFormTable = forwardRef((props, ref) => { ...@@ -124,34 +56,45 @@ const EditFormTable = forwardRef((props, ref) => {
}); });
const [form] = Form.useForm(); const [form] = Form.useForm();
useEffect(() => { useEffect(() => {
console.log('==============>坚听initData', initData);
form.setFieldsValue({ form.setFieldsValue({
tableList: initData, tableList: initData,
}); });
setDataSource(initData); console.log('==============>生成的表格数据', initData);
setDataSource([...initData]);
}, [initData]); }, [initData]);
const handleAdd = async () => { // const handleSave = row => {
try { // form.setFieldsValue({
const { tableList } = await form.validateFields(); // tableList: [...row],
console.log(tableList); // });
} catch (errInfo) { // const dataList = [...dataSource];
console.log('Save failed:', errInfo); // dataList[rowIndex][dataIndex] = value;
} // setDataSource([...dataList]);
}; // };
const handleSave = row => { const handleSave = (value, dataIndex, rowIndex) => {
form.setFieldsValue({ // form.setFieldsValue({
tableList: [...row], // [`tableList[${rowIndex}][${dataIndex}]`]: value,
}); // });
// setTableData([...row]); const dataList = [...dataSource];
dataList[rowIndex][dataIndex] = value;
setDataSource([...dataList]);
}; };
const onCheck = async () => { const onCheck = async () => {
try { try {
const values = await form.validateFields(); const { tableList } = await form.validateFields();
return values; console.log('===============>编辑表格', tableList);
const newTableList = customer.isEdit
? [...dataSource]
: [...tableList].map(item => {
const { rowSpanCount, option, ...childItem } = item;
return childItem;
});
console.log('===============>newTableList', newTableList);
return newTableList;
} catch (errorInfo) { } catch (errorInfo) {
console.log(errorInfo);
return null; return null;
} }
}; };
...@@ -176,58 +119,79 @@ const EditFormTable = forwardRef((props, ref) => { ...@@ -176,58 +119,79 @@ const EditFormTable = forwardRef((props, ref) => {
tableList: newDataSource, tableList: newDataSource,
}); });
}; };
const onClickEvent = () => {};
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
onCheck, onCheck,
form, form,
})); }));
const save = async () => {
try {
const tableList = form.getFieldValue('tableList');
handleSave(tableList);
} catch (errInfo) {
console.log('Save failed:', errInfo);
}
};
// 根据这里做判断渲染表格 // 根据这里做判断渲染表格
const columns = defaultColumns const columns = defaultColumns
.filter(item => !item.role || item.role.includes(customer.productType)) .filter(item => !item.role || item.role.includes(customer.productType))
.map((col, colIndex) => ({ .map((col, colIndex) => ({
...col, ...col,
onCell: (record, rowIndex) => { align: 'center',
let rowSpan = null; render(text, record, rowIndex) {
if (col.dataIndex === 'firstSpecValue' && mergeTable) { const {
rowSpan = record.rowSpanCount || 0; dataIndex,
title,
editable,
roleRules = {},
roleProps = {},
inputType,
...otherParams
} = col;
const disabled = Boolean(col.disabeldRender ? col.disabeldRender(record) : false);
const childrenElement = (
<Form.Item
style={{ margin: 0 }}
key={`${dataIndex}_${rowIndex}`}
name={['tableList', rowIndex, dataIndex]}
initialValue={record[dataIndex] || null}
rules={[{ required: roleRules.required, message: `请输入${title}.` }]}
>
<CreateFormInput
{...otherParams}
title={title}
type={inputType}
record={record}
rowIndex={rowIndex}
roleProps={roleProps}
dataIndex={dataIndex}
disabled={disabled}
onBlurEvent={handleSave}
onClickEvent={onClickEvent}
/>
</Form.Item>
);
const rowProps = { children: childrenElement, props: {} };
if (dataIndex === 'firstSpecValue' && mergeTable) {
const rowSpan = record.rowSpanCount;
rowProps.props.rowSpan = rowSpan || 0;
} }
return rowProps;
return {
rowSpan,
record,
rowIndex,
roleRules: col.roleRules || {},
editable: col.editable,
dataIndex: col.dataIndex,
disabled: col.disabled,
type: col.inputType,
roleProps: col.roleProps || {},
title: col.title,
handleSave,
rowOnClickEvent,
};
}, },
})); }));
return ( return (
<> <>
<Form form={form} scrollToFirstError component={false}> <Form form={form} scrollToFirstError component={false}>
<Button onClick={onCheck}>测试</Button>
<EditableContext.Provider value={form}> <EditableContext.Provider value={form}>
{/* scroll={{ y: 300, x: 1200 }} */}
<Table <Table
height={300} height={300}
pagination={false} pagination={false}
size="small" size="small"
components={{
body: {
row: EditableRow,
cell: EditableCell,
},
}}
bordered bordered
dataSource={dataSource} dataSource={dataSource}
rowKey={row => UUID.createUUID()}
columns={columns} columns={columns}
/> />
</EditableContext.Provider> </EditableContext.Provider>
......
...@@ -16,7 +16,15 @@ const filterCategoryOptions = (inputValue, path) => ...@@ -16,7 +16,15 @@ const filterCategoryOptions = (inputValue, path) =>
path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1); path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
const FormInformationBasic = forwardRef((props, ref) => { const FormInformationBasic = forwardRef((props, ref) => {
const { editData, categoryList, brandList, shopList, afterAddressList, specListData } = props; const {
editData,
categoryList,
virtualCategoryList,
brandList,
shopList,
afterAddressList,
specListData,
} = props;
const [form] = Form.useForm(); const [form] = Form.useForm();
const [noreBrandList, setNoreBrandList] = useState([]); const [noreBrandList, setNoreBrandList] = useState([]);
const customer = useContext(ServiceContext); const customer = useContext(ServiceContext);
...@@ -24,7 +32,21 @@ const FormInformationBasic = forwardRef((props, ref) => { ...@@ -24,7 +32,21 @@ const FormInformationBasic = forwardRef((props, ref) => {
const onCheck = async () => { const onCheck = async () => {
try { try {
const values = await form.validateFields(); const values = await form.validateFields();
const specs = [];
// 非服务类商品过滤specs数据
if (!customer.isCard) {
specListData.forEach(item => {
const specValues = values[item.specId];
// 判断是否包含改参数
if (specValues) {
specs.push({ specId: item.specId, specValues });
}
delete values[item.specId];
});
}
values.specs = specs;
values.temp = 'infoMation'; values.temp = 'infoMation';
console.log(values);
return values; return values;
} catch (errorInfo) { } catch (errorInfo) {
return null; return null;
...@@ -60,22 +82,15 @@ const FormInformationBasic = forwardRef((props, ref) => { ...@@ -60,22 +82,15 @@ const FormInformationBasic = forwardRef((props, ref) => {
onFinish={onFinish} onFinish={onFinish}
initialValues={{ initialValues={{
brandId: null, brandId: null,
supplierId: '',
name: '', name: '',
categoryId: [], categoryId: [],
description: '', description: '',
}} }}
scrollToFirstError scrollToFirstError
> >
{/* <Form.Item <Button type="primary" onClick={onCheck}>
label="供应商名称" 测试
name="supplierId" </Button>
rules={[{ required: true, message: '请选择供应商名称' }]}
>
<Select showSearch placeholder="请选择供应商名称" filterOption={fileterBrandOptions}>
{CreateSelectOption(shopList)}
</Select>
</Form.Item> */}
<Form.Item <Form.Item
name="categoryId" name="categoryId"
label="商品类目" label="商品类目"
...@@ -86,7 +101,7 @@ const FormInformationBasic = forwardRef((props, ref) => { ...@@ -86,7 +101,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
placeholder="请选择商品类目!" placeholder="请选择商品类目!"
showSearch={{ filter: filterCategoryOptions }} showSearch={{ filter: filterCategoryOptions }}
fieldNames={{ label: 'name', value: 'id', children: 'children' }} fieldNames={{ label: 'name', value: 'id', children: 'children' }}
options={categoryList} options={customer.productType === 2 ? virtualCategoryList : categoryList}
/> />
</Form.Item> </Form.Item>
{!customer.isCard && ( {!customer.isCard && (
...@@ -102,7 +117,9 @@ const FormInformationBasic = forwardRef((props, ref) => { ...@@ -102,7 +117,9 @@ const FormInformationBasic = forwardRef((props, ref) => {
placeholder="请选择商品品牌" placeholder="请选择商品品牌"
filterOption={fileterBrandOptions} filterOption={fileterBrandOptions}
> >
{CreateSelectOption(customer.productType === 2 ? noreBrandList : brandList)} {customer.productType === 2
? CreateSelectOption(noreBrandList)
: CreateSelectOption(brandList)}
</Select> </Select>
</Form.Item> </Form.Item>
)} )}
...@@ -127,11 +144,12 @@ const FormInformationBasic = forwardRef((props, ref) => { ...@@ -127,11 +144,12 @@ const FormInformationBasic = forwardRef((props, ref) => {
<Form.Item <Form.Item
name="character" name="character"
label="商品卖点" label="商品卖点"
maxLength={50}
placeholder="卖点最优可填写3个词,12个字。前后用空格加竖杠分隔,例: 莹莹剔透 | 粒粒优选 | 易煮易熟"
rules={[{ required: true, message: '请输入商品卖点!', whitespace: true }]} rules={[{ required: true, message: '请输入商品卖点!', whitespace: true }]}
> >
<Input placeholder="请输入商品名称" /> <Input
maxLength={50}
placeholder="卖点最优可填写3个词,12个字。前后用空格加竖杠分隔,例: 莹莹剔透 | 粒粒优选 | 易煮易熟"
/>
</Form.Item> </Form.Item>
)} )}
...@@ -141,7 +159,7 @@ const FormInformationBasic = forwardRef((props, ref) => { ...@@ -141,7 +159,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
label="售后地址" label="售后地址"
rules={[{ required: true, message: '请选择售后地址!' }]} rules={[{ required: true, message: '请选择售后地址!' }]}
> >
<Select showSearch placeholder="请选择商品品牌" filterOption={fileterBrandOptions}> <Select showSearch placeholder="请选择售后地址" filterOption={fileterBrandOptions}>
{([{ id: 9527, addressName: '测试地址' }] || afterAddressList).map(item => ( {([{ id: 9527, addressName: '测试地址' }] || afterAddressList).map(item => (
<Select.Option key={item.id} value={item.id}> <Select.Option key={item.id} value={item.id}>
{item.addressName} {item.addressName}
...@@ -153,12 +171,7 @@ const FormInformationBasic = forwardRef((props, ref) => { ...@@ -153,12 +171,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
{!customer.isCard && {!customer.isCard &&
specListData.map((item, index) => ( specListData.map((item, index) => (
<Form.Item <Form.Item name={item.specId} key={item.specId} label={item.specName}>
key={item.specId}
label={item.specName}
name={item.specId}
labelCol={{ span: 2 }}
>
<Checkbox.Group options={item.specValues} /> <Checkbox.Group options={item.specValues} />
</Form.Item> </Form.Item>
))} ))}
......
...@@ -10,7 +10,15 @@ import React, { ...@@ -10,7 +10,15 @@ import React, {
} from 'react'; } from 'react';
import { formItemLayout, StaticColumns } from '../config'; import { formItemLayout, StaticColumns } from '../config';
import EditFormTable from './EditFormTable'; import EditFormTable from './EditFormTable';
import { createProductData, cleanArray, batchTableSourceData } from '../utils'; import {
createProductData,
cleanArray,
filterCoverItemList,
batchTableSourceData,
fliterSkuListSortData,
filterSkuNotIdList,
} from '../utils';
import { ServiceContext } from '../context'; import { ServiceContext } from '../context';
import { SelectTemplate } from './CommonTemplate'; import { SelectTemplate } from './CommonTemplate';
...@@ -158,14 +166,6 @@ const SpecificationTemplate = (props, _) => { ...@@ -158,14 +166,6 @@ const SpecificationTemplate = (props, _) => {
); );
}; };
const originItems = {
firstSpecValue: [],
secondSpecValue: [],
dataSource: [],
firstDuplicate: [],
secondDuplicate: [],
};
const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColumns }) => { const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColumns }) => {
const customer = useContext(ServiceContext); const customer = useContext(ServiceContext);
const formItems = defaultColumns const formItems = defaultColumns
...@@ -184,7 +184,6 @@ const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColu ...@@ -184,7 +184,6 @@ const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColu
<> <>
{formItems.length ? ( {formItems.length ? (
<Space style={{ marginBottom: 20 }}> <Space style={{ marginBottom: 20 }}>
{
<SelectTemplate <SelectTemplate
width={150} width={150}
noSty noSty
...@@ -193,8 +192,6 @@ const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColu ...@@ -193,8 +192,6 @@ const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColu
dataList={specInitValue.firstSpecValue} dataList={specInitValue.firstSpecValue}
fieldNames={{ label: 'firstSpecValue', value: 'firstSpecValue' }} fieldNames={{ label: 'firstSpecValue', value: 'firstSpecValue' }}
/> />
}
{
<SelectTemplate <SelectTemplate
noSty noSty
width={150} width={150}
...@@ -203,7 +200,6 @@ const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColu ...@@ -203,7 +200,6 @@ const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColu
dataList={specInitValue.secondSpecValue} dataList={specInitValue.secondSpecValue}
fieldNames={{ label: 'secondSpecValue', value: 'secondSpecValue' }} fieldNames={{ label: 'secondSpecValue', value: 'secondSpecValue' }}
/> />
}
{formItems.concat( {formItems.concat(
<Button key="batch" type="primary" disabled={customer.isService} onClick={batchChange}> <Button key="batch" type="primary" disabled={customer.isService} onClick={batchChange}>
批量设置 批量设置
...@@ -216,7 +212,7 @@ const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColu ...@@ -216,7 +212,7 @@ const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColu
}; };
const FormPriceOrStock = forwardRef((props, ref) => { const FormPriceOrStock = forwardRef((props, ref) => {
const { specList, editData, skuList, onSpecChange } = props; const { specList, editData, skuList = [], onSpecChange } = props;
const editRef = useRef(null); const editRef = useRef(null);
const customer = useContext(ServiceContext); const customer = useContext(ServiceContext);
const [form] = Form.useForm(); const [form] = Form.useForm();
...@@ -229,7 +225,7 @@ const FormPriceOrStock = forwardRef((props, ref) => { ...@@ -229,7 +225,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
const onCheck = async () => { const onCheck = async () => {
try { try {
const values = await form.validateFields(); const values = await form.validateFields();
const { tableList: items } = await editRef.current.onCheck(); const items = await editRef.current.onCheck();
console.log('================>items', items); console.log('================>items', items);
if (items) { if (items) {
return { ...values, items, temp: 'infoSpecData' }; return { ...values, items, temp: 'infoSpecData' };
...@@ -250,6 +246,7 @@ const FormPriceOrStock = forwardRef((props, ref) => { ...@@ -250,6 +246,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
columsData.push({ columsData.push({
title: specData.firstSpec, title: specData.firstSpec,
dataIndex: 'firstSpecValue', dataIndex: 'firstSpecValue',
inputType: 'text',
}); });
} }
...@@ -257,6 +254,7 @@ const FormPriceOrStock = forwardRef((props, ref) => { ...@@ -257,6 +254,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
columsData.push({ columsData.push({
title: specData.secondSpec, title: specData.secondSpec,
dataIndex: 'secondSpecValue', dataIndex: 'secondSpecValue',
inputType: 'text',
}); });
} }
...@@ -267,16 +265,38 @@ const FormPriceOrStock = forwardRef((props, ref) => { ...@@ -267,16 +265,38 @@ const FormPriceOrStock = forwardRef((props, ref) => {
const onFinish = async () => { const onFinish = async () => {
try { try {
const values = await form.validateFields(); const values = await form.validateFields();
CreateColumnsEvent(values);
const cleanValues = { const cleanValues = {
firstValues: cleanArray(values.firstSpecValue), firstValues: cleanArray(values.firstSpecValue || []),
secondValues: cleanArray(values.secondSpecValue), secondValues: cleanArray(values.secondSpecValue || []),
firstSpecId: values.firstSpecId, firstSpecId: values.firstSpecId,
secondSpecId: values.secondSpecId, secondSpecId: values.secondSpecId,
}; };
const newData = createProductData(cleanValues);
const { inIdList: fisrtInIdList, noIdList: fisrtNoIdList } = filterSkuNotIdList(
cleanValues.firstValues,
);
const { inIdList: secndInIdList, noIdList: secndNoIdList } = filterSkuNotIdList(
cleanValues.secondValues,
);
const createSkuList = createProductData(
{
firstSpecId: cleanValues.firstSpecId,
secondSpecId: cleanValues.secondSpecId,
fisrtInIdList,
secndInIdList,
fisrtNoIdList,
secndNoIdList,
},
customer.isEdit,
);
CreateColumnsEvent(values);
if (!cleanValues.firstSpecId && !createSkuList.secondSpecId) {
setTableData([...createSkuList]);
return;
}
setMergeTable(Boolean(cleanValues.secondValues.length)); setMergeTable(Boolean(cleanValues.secondValues.length));
setTableData(newData); setTableData(fliterSkuListSortData([...skuList, ...createSkuList]));
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
...@@ -338,51 +358,36 @@ const FormPriceOrStock = forwardRef((props, ref) => { ...@@ -338,51 +358,36 @@ const FormPriceOrStock = forwardRef((props, ref) => {
useEffect(() => { useEffect(() => {
if (customer.isEdit) { if (customer.isEdit) {
if (!editData) return; if (!editData) return;
// const { skuList } = editData; console.log('===============>设置参数', editData);
// const [oneItem] = skuList;
// // 根据接口过滤数据
// const { firstSpecValue, secondSpecValue, dataSource } = filterSpecData(skuList);
// const specData = {
// firstSpec: oneItem.firstSpec,
// firstSpecId: oneItem.firstSpecId,
// firstSpecValue,
// secondSpec: oneItem.secondSpec,
// secondSpecId: oneItem.secondSpecId,
// secondSpecValue,
// };
form.setFieldsValue(editData); // 设置规格数据 form.setFieldsValue(editData); // 设置规格数据
setSpecInitValue(editData); // 缓存规格数据
firstOnChangeEvent(); // 触发成底部动态表格数据 firstOnChangeEvent(); // 触发成底部动态表格数据
if (editData.firstSpecId) { setSpecInitValue(editData); // 缓存规格数据
onFinish(); // 触发生成表格
} else {
CreateColumnsEvent(editData); CreateColumnsEvent(editData);
setMergeTable(Boolean(editData.secondSpecValue.length)); setMergeTable(Boolean(editData.secondSpecValue.length));
setTableData(skuList); setTableData(fliterSkuListSortData(skuList));
}
} }
}, [customer.isEdit, editData]); }, [customer.isEdit, editData]);
return ( return (
<>
<Form form={form} autoComplete="off" initialValues={initSpecReced()}> <Form form={form} autoComplete="off" initialValues={initSpecReced()}>
<SpecificationTemplate <SpecificationTemplate
form={form} form={form}
label="一级规格" label="一级规格"
formName="firstSpecId"
onChange={firstOnChangeEvent}
selectName="firstSpec" selectName="firstSpec"
formName="firstSpecId"
specName="firstSpecValue" specName="firstSpecValue"
onChange={firstOnChangeEvent}
specList={specList} specList={specList}
specDataList={specInitValue.firstSpecValue} specDataList={specInitValue.firstSpecValue}
/> />
<SpecificationTemplate <SpecificationTemplate
form={form} form={form}
label="二级规格" label="二级规格"
onChange={seconOnChangeEvent}
formName="secondSpecId"
selectName="secondSpec" selectName="secondSpec"
formName="secondSpecId"
specName="secondSpecValue" specName="secondSpecValue"
onChange={seconOnChangeEvent}
specList={specList} specList={specList}
specDataList={specInitValue.secondSpecValue} specDataList={specInitValue.secondSpecValue}
/> />
...@@ -396,6 +401,7 @@ const FormPriceOrStock = forwardRef((props, ref) => { ...@@ -396,6 +401,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
specInitValue={specInitValue} specInitValue={specInitValue}
defaultColumns={defaultColumns} defaultColumns={defaultColumns}
/> />
</Form>
<EditFormTable <EditFormTable
ref={editRef} ref={editRef}
mergeTable={mergeTable} mergeTable={mergeTable}
...@@ -403,7 +409,7 @@ const FormPriceOrStock = forwardRef((props, ref) => { ...@@ -403,7 +409,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
defaultColumns={defaultColumns} defaultColumns={defaultColumns}
initData={tableData} initData={tableData}
/> />
</Form> </>
); );
}); });
......
import { Form, Input, Select, Checkbox, DatePicker } from 'antd'; import { Form, Input, Select, Checkbox, DatePicker } from 'antd';
import React, { useState, useEffect, forwardRef, useImperativeHandle, useContext } from 'react'; import React, { useEffect, forwardRef, useImperativeHandle, useContext } from 'react';
import moment from 'moment';
import { WeeksList, formItemLayout } from '../config'; import { WeeksList, formItemLayout } from '../config';
import { ServiceContext } from '../context'; import { ServiceContext } from '../context';
import { formatTime } from '../../../utils/utils'; import { formatTime } from '../../../utils/utils';
...@@ -96,7 +95,7 @@ const FormRuleSetting = forwardRef((props, ref) => { ...@@ -96,7 +95,7 @@ const FormRuleSetting = forwardRef((props, ref) => {
<Form.Item <Form.Item
name="unavailableDate" name="unavailableDate"
label="不可用日期" label="不可用日期"
rules={[{ required: true, message: '请选择不可用日期!', type: 'array' }]} rules={[{ required: false, message: '请选择不可用日期!', type: 'array' }]}
> >
<Checkbox.Group>{WeekCheckBox()}</Checkbox.Group> <Checkbox.Group>{WeekCheckBox()}</Checkbox.Group>
</Form.Item> </Form.Item>
......
...@@ -5,26 +5,35 @@ import { TaskList, formItemLayout } from '../config'; ...@@ -5,26 +5,35 @@ import { TaskList, formItemLayout } from '../config';
import UploadImage from './UploadImage'; import UploadImage from './UploadImage';
import commonStyle from '../common.less'; import commonStyle from '../common.less';
const { imgConfig: defaultImgConfig } = TaskList[0];
const FormRuleVPictures = forwardRef((props, ref) => { const FormRuleVPictures = forwardRef((props, ref) => {
const { editData, specKeyItem } = props; const { editData, specKeyItem } = props;
const [form] = Form.useForm();
const [imageList, setImageList] = useState({}); const [imageList, setImageList] = useState({});
const [commonImageList, setCommonImageList] = useState([]); const [commonImageList, setCommonImageList] = useState([]);
const [detailImageList, setDetailImageList] = useState([]); const [detailImageList, setDetailImageList] = useState([]);
const [cardImageList, setCardImageList] = useState([]);
const [form] = Form.useForm();
const customer = useContext(ServiceContext); const customer = useContext(ServiceContext);
useEffect(() => { useEffect(() => {
if (customer.isEdit) { if (customer.isEdit) {
if (editData) { if (editData) {
setImageList(editData.imageList); setImageList(editData.imageList);
setCardImageList(editData.cardImageList);
setCommonImageList(editData.commonImageList); // 编辑状态下设置公共图 setCommonImageList(editData.commonImageList); // 编辑状态下设置公共图
setDetailImageList(editData.detailImageList); // 编辑状态下设置详情图 setDetailImageList(editData.detailImageList); // 编辑状态下设置详情图
form.setFieldsValue({ const editParams = {
imageList: editData.imageList,
commonImageList: editData.commonImageList, commonImageList: editData.commonImageList,
detailImageList: editData.detailImageList, detailImageList: editData.detailImageList,
};
if (customer.isCard) {
editParams.cardImageList = editData.cardImageList;
} else {
editParams.imageList = editData.imageList;
}
const timer = setTimeout(() => {
form.setFieldsValue(editParams);
clearTimeout(timer);
}); });
} }
} }
...@@ -48,6 +57,7 @@ const FormRuleVPictures = forwardRef((props, ref) => { ...@@ -48,6 +57,7 @@ const FormRuleVPictures = forwardRef((props, ref) => {
values.temp = 'infoImageData'; values.temp = 'infoImageData';
return values; return values;
} catch (errorInfo) { } catch (errorInfo) {
console.log(errorInfo);
return null; return null;
} }
}; };
...@@ -59,14 +69,12 @@ const FormRuleVPictures = forwardRef((props, ref) => { ...@@ -59,14 +69,12 @@ const FormRuleVPictures = forwardRef((props, ref) => {
reset: () => { reset: () => {
form.resetFields(); form.resetFields();
setImageList({}); setImageList({});
setCardImageList([]);
setCommonImageList([]); setCommonImageList([]);
setDetailImageList([]); setDetailImageList([]);
}, },
})); }));
const onFinish = values => {
console.log('Received values of form: ', values);
};
const onPictureSuccessEvent = (imgList, key) => { const onPictureSuccessEvent = (imgList, key) => {
const newImgList = { ...imageList, [key]: imgList }; const newImgList = { ...imageList, [key]: imgList };
setImageList(newImgList); setImageList(newImgList);
...@@ -82,6 +90,13 @@ const FormRuleVPictures = forwardRef((props, ref) => { ...@@ -82,6 +90,13 @@ const FormRuleVPictures = forwardRef((props, ref) => {
}); });
}; };
const onCardSuccessImageList = imgList => {
setCardImageList(imgList);
form.setFieldsValue({
cardImageList: imgList,
});
};
const onDetailSuccessImageList = imgList => { const onDetailSuccessImageList = imgList => {
setDetailImageList(imgList); setDetailImageList(imgList);
form.setFieldsValue({ form.setFieldsValue({
...@@ -90,67 +105,75 @@ const FormRuleVPictures = forwardRef((props, ref) => { ...@@ -90,67 +105,75 @@ const FormRuleVPictures = forwardRef((props, ref) => {
}; };
const [{ imgConfig }] = TaskList.filter(item => item.type === customer.productType); const [{ imgConfig }] = TaskList.filter(item => item.type === customer.productType);
return ( return (
<>
<Form <Form
{...formItemLayout}
form={form} form={form}
name="register" {...formItemLayout}
onFinish={onFinish}
initialValues={{ initialValues={{
imageList: {},
commonImageList: [], commonImageList: [],
detailImageList: [], cardImageList: [],
}} }}
scrollToFirstError
> >
<Form.Item <Form.Item
label="封面图片"
name="commonImageList" name="commonImageList"
extra={`建议尺寸: ##宽##高 (${commonImageList.length} / 1) `} label={imgConfig.commonImageList.title}
extra={imgConfig.commonImageList.renderExtra(commonImageList.length)}
rules={[ rules={[
{ {
required: imgConfig.commonImageList.rule, required: imgConfig.commonImageList.rule,
type: 'array', type: 'array',
message: '请上传图片!', message: `请上传${imgConfig.commonImageList.title}!`,
validateTrigger: 'submit',
}, },
{ {
validator(rule, value, callback) { validator(rule, value, callback) {
if (customer.productType !== 1) callback(); if (customer.productType !== 1) {
return callback();
}
const checkImageList = form.getFieldValue('imageList'); const checkImageList = form.getFieldValue('imageList');
const check = Object.keys(checkImageList).length; const check = Object.keys(checkImageList).length;
return check > 0 ? callback() : callback('请上传封面图片'); return check > 0 ? callback() : callback('请上传封面图片');
}, },
validateTrigger: 'submit',
}, },
]} ]}
> >
<UploadImage <UploadImage
disabled={customer.isService} disabled={customer.isService}
name="commonImageList" name="commonImageList"
limit={1} limit={imgConfig.commonImageList.limit}
pictures={commonImageList} pictures={commonImageList}
setPictureList={list => onCommonSuccessEvent(list)} setPictureList={list => onCommonSuccessEvent(list)}
/> />
</Form.Item> </Form.Item>
{customer.isCard && (
{!customer.isCard &&
Object.keys(imageList).map(key => (
<Form.Item <Form.Item
key={key} name="cardImageList"
label={`商品图片(${key})`} label={imgConfig.cardImageList.title}
name={['imageList', key]} extra={imgConfig.cardImageList.renderExtra(cardImageList.length)}
extra={`建议尺寸: ##宽##高 (${imageList[key].length} / 11) `}
rules={[ rules={[
{ {
required: imgConfig.imageList.rule, required: imgConfig.cardImageList.rule,
type: 'array', type: 'array',
message: '请上传图片!', message: `请上传${imgConfig.cardImageList.title}!`,
validateTrigger: 'submit',
}, },
]} ]}
>
<UploadImage
disabled={customer.isService}
name="cardImageList"
limit={imgConfig.cardImageList.limit}
pictures={cardImageList}
setPictureList={list => onCardSuccessImageList(list)}
/>
</Form.Item>
)}
{!customer.isCard &&
Object.keys(imageList).map(key => (
<Form.Item
name={['imageList', key]}
key={key}
label={`商品图片(${key})`}
rules={[{ required: imgConfig.imageList.rule, type: 'array', message: '请上传图片!' }]}
extra={imgConfig.imageList.renderExtra()}
> >
<UploadImage <UploadImage
disabled={customer.isService} disabled={customer.isService}
...@@ -164,29 +187,27 @@ const FormRuleVPictures = forwardRef((props, ref) => { ...@@ -164,29 +187,27 @@ const FormRuleVPictures = forwardRef((props, ref) => {
</Button> </Button>
</Form.Item> </Form.Item>
))} ))}
<Form.Item <Form.Item
label="商品详情图"
name="detailImageList" name="detailImageList"
extra={`最多上传30张,${detailImageList.length} / 30`} label={imgConfig.detailImageList.title}
rules={[ rules={[
{ {
type: 'array', type: 'array',
required: imgConfig.detailImageList.rule, required: imgConfig.detailImageList.rule,
message: '请上传商品详情图!', message: `请上传${imgConfig.detailImageList.title}!`,
validateTrigger: 'submit',
}, },
]} ]}
extra={imgConfig.detailImageList.renderExtra()}
> >
<UploadImage <UploadImage
disabled={customer.isService} disabled={customer.isService}
limit={imgConfig.detailImageList.limit}
name="detailImageList" name="detailImageList"
pictures={detailImageList} pictures={detailImageList}
setPictureList={list => onDetailSuccessImageList(list)} setPictureList={list => onDetailSuccessImageList(list)}
/> />
</Form.Item> </Form.Item>
</Form> </Form>
</>
); );
}); });
......
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import { Modal, Upload, notification, Spin } from 'antd'; import { Modal, Upload, notification, Spin, Button } from 'antd';
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef, forwardRef } from 'react';
import lodash from 'lodash'; import lodash from 'lodash';
import { merchantUpload } from '../service'; import { merchantUpload } from '../service';
...@@ -15,14 +15,14 @@ const UNIT = 1024 * 1024; ...@@ -15,14 +15,14 @@ const UNIT = 1024 * 1024;
// reader.onerror = error => reject(error); // reader.onerror = error => reject(error);
// }); // });
const uploadButton = ( const UploadButton = (
<div> <div>
<PlusOutlined /> <PlusOutlined />
<div style={{ marginTop: 8 }}>Upload</div> <div style={{ marginTop: 8 }}>上传图片</div>
</div> </div>
); );
const UploadImage = props => { const UploadImage = forwardRef((props, ref) => {
const { const {
name = `${Date.now()}`, name = `${Date.now()}`,
limit = null, limit = null,
...@@ -30,8 +30,8 @@ const UploadImage = props => { ...@@ -30,8 +30,8 @@ const UploadImage = props => {
disabled, disabled,
uploadParams, uploadParams,
pictures = [], pictures = [],
onChange = () => {},
setPictureList = () => {}, setPictureList = () => {},
...imgOptions
} = props; } = props;
const [uploadLoading, setUploadLoading] = useState(false); const [uploadLoading, setUploadLoading] = useState(false);
const [previewVisible, setPreviewVisible] = useState(false); const [previewVisible, setPreviewVisible] = useState(false);
...@@ -59,53 +59,16 @@ const UploadImage = props => { ...@@ -59,53 +59,16 @@ const UploadImage = props => {
}; };
const bundleChange = imgFile => { const bundleChange = imgFile => {
// setFileList(imgFile);
const imgList = imgFile.map(item => item.url); const imgList = imgFile.map(item => item.url);
setPictureList(imgList); setPictureList(imgList);
props.onChange(imgList);
}; };
const handleRemove = file => { const handleRemove = file => {
const freshFiles = fileList?.filter(ele => ele.uid !== file.uid); const freshFiles = fileList?.filter(ele => ele.uid !== file.uid);
bundleChange(freshFiles); bundleChange(freshFiles);
}; };
// const saveFiles = (file, ret) => {
// return new Promise((resolve) => {
// const reader = new FileReader();
// // 监听图片转换完成
// reader.addEventListener('load',
// () => {
// // ...接入antd upload 的 filelist 中
// // if (typeof setPictureList === 'function') {
// const temFile = { uid: file.uid, status: 'done', name: file.name, url: ret };
// let newFiles = [...fileListRef.current, temFile];
// if (!uploadParams.multiple) {
// // 只保留最后一个文件
// newFiles = newFiles.slice(-1);
// }
// bundleChange(newFiles);
// // }
// },
// false,
// );
// reader.readAsDataURL(file);
// })
// // 图片转换成base64编码作为缩略图
// };
// const customRequestObject = async params => {
// console.log(fileList.length);
// const { file, onSuccess, onError } = params;
// try {
// const res = await merchantUpload([file]);
// const [url] = res.data;
// onSuccess();
// saveFiles(file, url);
// setFileList(preFileList => preFileList.map(item => id === item.uid ? { ...item, status: 'done', url, percent: 100,} : item));
// } catch(error) {
// onError();
// console.log(error);
// }
// };
const checkFile = file => const checkFile = file =>
new Promise(resolve => { new Promise(resolve => {
const curType = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase(); const curType = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase();
...@@ -159,12 +122,19 @@ const UploadImage = props => { ...@@ -159,12 +122,19 @@ const UploadImage = props => {
if (checkFiles.length) { if (checkFiles.length) {
setUploadLoading(true); setUploadLoading(true);
const res = await merchantUpload(checkFiles); const res = await merchantUpload(checkFiles);
if (res.data) {
const proFiles = (res.data || []).map((urlItem, urlIndex) => const proFiles = (res.data || []).map((urlItem, urlIndex) =>
imageLoading(checkFiles[urlIndex], urlItem), imageLoading(checkFiles[urlIndex], urlItem),
); );
const imagList = await Promise.all(proFiles); const imagList = await Promise.all(proFiles);
const newFiles = [...fileListRef.current, ...imagList]; const newFiles = [...fileListRef.current, ...imagList];
bundleChange(newFiles); bundleChange(newFiles);
} else {
notification.warning({
message: '警告',
description: res.msg,
});
}
setUploadLoading(false); setUploadLoading(false);
} }
} catch (error) { } catch (error) {
...@@ -181,8 +151,8 @@ const UploadImage = props => { ...@@ -181,8 +151,8 @@ const UploadImage = props => {
return ( return (
<Spin tip="正在上传..." spinning={uploadLoading} delay={100}> <Spin tip="正在上传..." spinning={uploadLoading} delay={100}>
<Upload <Upload
disabled={disabled}
{...uploadParams} {...uploadParams}
disabled={Boolean(disabled)}
multiple={multiple} multiple={multiple}
name={name} name={name}
customRequest={() => {}} customRequest={() => {}}
...@@ -192,13 +162,13 @@ const UploadImage = props => { ...@@ -192,13 +162,13 @@ const UploadImage = props => {
onPreview={handlePreview} onPreview={handlePreview}
onRemove={handleRemove} onRemove={handleRemove}
> >
{fileList.length >= props.limit ? null : uploadButton} {limit !== null && fileList.length >= limit ? null : UploadButton}
</Upload> </Upload>
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}> <Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="example" style={{ width: '100%' }} src={previewImage} /> <img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal> </Modal>
</Spin> </Spin>
); );
}; });
export default UploadImage; export default UploadImage;
...@@ -12,22 +12,24 @@ export const TaskList = [ ...@@ -12,22 +12,24 @@ export const TaskList = [
name: '实体商品', name: '实体商品',
type: 1, type: 1,
desc: '物流发货', desc: '物流发货',
hide: true, // hide: true,
imgConfig: { imgConfig: {
imageList: { commonImageList: {
tip: '(图片最大上传2M)', title: '公共滑动图',
rule: false, rule: false,
limit: null, limit: null,
renderExtra: () => '(图片最大上传2M)',
}, },
commonImageList: { imageList: {
tip: '(图片最大上传2M)',
rule: false, rule: false,
limit: null, limit: null,
renderExtra: () => '(图片最大上传2M)',
}, },
detailImageList: { detailImageList: {
tip: '(图片最大上传2M)', title: '详情图',
rule: true, rule: true,
limit: null, limit: null,
renderExtra: () => '(图片最大上传2M)',
}, },
}, },
}, },
...@@ -35,19 +37,24 @@ export const TaskList = [ ...@@ -35,19 +37,24 @@ export const TaskList = [
name: '虚拟商品', name: '虚拟商品',
type: 2, type: 2,
desc: '无需物流', desc: '无需物流',
hide: true, // hide: true,
imgConfig: { imgConfig: {
imageList: { commonImageList: {
title: '公共滑动图',
rule: false, rule: false,
limit: null, limit: null,
renderExtra: () => '(图片最大上传2M)',
}, },
commonImageList: { imageList: {
rule: false, rule: false,
limit: false, limit: null,
renderExtra: () => '(图片最大上传2M)',
}, },
detailImageList: { detailImageList: {
rule: false, title: '详情图',
limit: false, rule: true,
limit: null,
renderExtra: () => '(图片最大上传2M)',
}, },
}, },
}, },
...@@ -57,17 +64,25 @@ export const TaskList = [ ...@@ -57,17 +64,25 @@ export const TaskList = [
desc: '无需物流', desc: '无需物流',
hide: true, hide: true,
imgConfig: { imgConfig: {
imageList: {
rule: true,
limit: 1,
},
commonImageList: { commonImageList: {
title: '封面图片',
rule: true, rule: true,
limit: 11, limit: 11,
renderExtra(leng) {
return `建议尺寸: ##宽##高 (${leng} / 1) `;
},
},
imageList: {
rule: true,
limit: 1,
}, },
detailImageList: { detailImageList: {
title: '商品图片',
rule: true, rule: true,
limit: 30, limit: null,
renderExtra() {
return '请上传商品图!';
},
}, },
}, },
}, },
...@@ -76,17 +91,29 @@ export const TaskList = [ ...@@ -76,17 +91,29 @@ export const TaskList = [
type: 4, type: 4,
desc: '无需物流', desc: '无需物流',
imgConfig: { imgConfig: {
imageList: { commonImageList: {
title: '封面图片',
rule: true, rule: true,
limit: 1, limit: 1,
renderExtra(leng) {
return `建议尺寸: ##宽##高 (${leng} / 1) 封面图第一张 `;
}, },
commonImageList: { },
cardImageList: {
title: '商品图片',
rule: true, rule: true,
limit: 11, limit: 11,
renderExtra(leng) {
return `建议尺寸: ##宽##高,sku商品轮播图(${leng} / 11)`;
},
}, },
detailImageList: { detailImageList: {
title: '商品详情图',
rule: true, rule: true,
limit: 30, limit: 30,
renderExtra() {
return '最多上传30张';
},
}, },
}, },
}, },
...@@ -138,7 +165,7 @@ export const StaticColumns = customer => [ ...@@ -138,7 +165,7 @@ export const StaticColumns = customer => [
min: 0, min: 0,
}, },
roleRules: { required: true }, roleRules: { required: true },
disabled: customer.isJDGoods || customer.isService, disabeldRender: () => customer.isJDGoods,
}, },
{ {
title: '佣金费率', title: '佣金费率',
...@@ -146,6 +173,10 @@ export const StaticColumns = customer => [ ...@@ -146,6 +173,10 @@ export const StaticColumns = customer => [
editable: true, editable: true,
role: [4], role: [4],
roleRules: { required: true }, roleRules: { required: true },
roleProps: {
min: 0,
max: 100,
},
}, },
{ {
title: '市场价', title: '市场价',
...@@ -157,7 +188,6 @@ export const StaticColumns = customer => [ ...@@ -157,7 +188,6 @@ export const StaticColumns = customer => [
min: 0, min: 0,
}, },
roleRules: { required: true }, roleRules: { required: true },
disabled: customer.isService,
}, },
{ {
title: '销售价', title: '销售价',
...@@ -166,6 +196,10 @@ export const StaticColumns = customer => [ ...@@ -166,6 +196,10 @@ export const StaticColumns = customer => [
batchRole: [4], batchRole: [4],
role: [4], role: [4],
roleRules: { required: true }, roleRules: { required: true },
roleProps: {
precision: 2,
min: 0,
},
}, },
{ {
title: '重量(kg)', title: '重量(kg)',
...@@ -176,15 +210,18 @@ export const StaticColumns = customer => [ ...@@ -176,15 +210,18 @@ export const StaticColumns = customer => [
precision: 3, precision: 3,
max: 999999.999, max: 999999.999,
}, },
role: [1, 2], role: [1],
roleRules: { required: true }, roleRules: { required: true },
disabled: customer.isService, roleProps: {
precision: 3,
max: 999999.999,
},
}, },
{ {
title: '库存', title: '库存',
dataIndex: 'productStock', dataIndex: 'productStock',
editable: true, editable: true,
role: [4], role: [1, 2, 4],
batchRole: [1, 2, 4], batchRole: [1, 2, 4],
batchProps: { batchProps: {
precision: 0, precision: 0,
...@@ -193,30 +230,11 @@ export const StaticColumns = customer => [ ...@@ -193,30 +230,11 @@ export const StaticColumns = customer => [
formatter: val => parseInt(val, '10') || '', formatter: val => parseInt(val, '10') || '',
}, },
roleProps: { roleProps: {
precision: 2,
min: 0, min: 0,
}, },
roleRules: { required: true }, roleRules: { required: true },
disabeldRender: record => customer.isEdit && record.id,
}, },
// {
// title: '库存',
// dataIndex: 'productStock',
// editable: true,
// role: [1, 2],
// batchRole: [1, 2],
// batchProps: {
// precision: 0,
// step: 1,
// // eslint-disable-next-line radix
// formatter: val => parseInt(val, '10') || '',
// },
// roleProps: {
// precision: 2,
// min: 0,
// },
// roleRules: { required: true },
// disabled: customer.isService,
// },
{ {
title: '库存预警阈值', title: '库存预警阈值',
dataIndex: 'productStockWarning', dataIndex: 'productStockWarning',
...@@ -224,7 +242,9 @@ export const StaticColumns = customer => [ ...@@ -224,7 +242,9 @@ export const StaticColumns = customer => [
batchRole: [1], batchRole: [1],
role: [1, 4], role: [1, 4],
roleRules: { required: true }, roleRules: { required: true },
disabled: customer.isService, roleProps: {
min: 0,
},
}, },
{ {
title: '商品自编码', title: '商品自编码',
...@@ -232,7 +252,6 @@ export const StaticColumns = customer => [ ...@@ -232,7 +252,6 @@ export const StaticColumns = customer => [
editable: true, editable: true,
role: [1, 2], role: [1, 2],
inputType: 'input', inputType: 'input',
disabled: customer.isService,
roleRules: { required: true }, roleRules: { required: true },
}, },
{ {
...@@ -241,7 +260,6 @@ export const StaticColumns = customer => [ ...@@ -241,7 +260,6 @@ export const StaticColumns = customer => [
editable: true, editable: true,
role: [1, 2], role: [1, 2],
inputType: 'input', inputType: 'input',
disabled: customer.isService,
roleRules: { required: false }, roleRules: { required: false },
}, },
{ {
...@@ -263,6 +281,5 @@ export const StaticColumns = customer => [ ...@@ -263,6 +281,5 @@ export const StaticColumns = customer => [
min: 0, min: 0,
}, },
roleRules: { required: false }, roleRules: { required: false },
disabled: customer.isService,
}, },
]; ];
...@@ -29,7 +29,7 @@ import { ServiceContext } from './context'; ...@@ -29,7 +29,7 @@ import { ServiceContext } from './context';
* @returns ReactDOM * @returns ReactDOM
*/ */
const ServiceGoods = options => { const ServiceGoods = options => {
const { SourceData, categoryList, specListData } = options; const { SourceData, categoryList, virtualCategoryList, specListData } = options;
const basicRef = useRef(null); const basicRef = useRef(null);
const stockRef = useRef(null); const stockRef = useRef(null);
...@@ -249,8 +249,10 @@ const ServiceGoods = options => { ...@@ -249,8 +249,10 @@ const ServiceGoods = options => {
return ( return (
<Modal <Modal
title={isEdit ? '修改商品' : '新增商品'}
visible={options.visible} visible={options.visible}
width={1366} onCancel={() => handleCancel()}
width={1000}
footer={[ footer={[
<Button key="submit" type="primary" loading={pageLoading} onClick={submitEvent}> <Button key="submit" type="primary" loading={pageLoading} onClick={submitEvent}>
提交 提交
...@@ -271,6 +273,7 @@ const ServiceGoods = options => { ...@@ -271,6 +273,7 @@ const ServiceGoods = options => {
ref={basicRef} ref={basicRef}
editData={editData.infoMation} editData={editData.infoMation}
categoryList={categoryList} categoryList={categoryList}
virtualCategoryList={virtualCategoryList}
brandList={brandList} brandList={brandList}
afterAddressList={afterAddressList} afterAddressList={afterAddressList}
specListData={specListData} specListData={specListData}
......
import { ConsoleSqlOutlined } from '@ant-design/icons'; import { sortBy } from 'lodash';
import UUID from '../../utils/uuid';
export const clearCurrent = currentList => currentList.filter(item => item.current);
export const filterSpecId = (input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
export const cleanArray = actual => { export const cleanArray = actual => {
const newArray = []; const newArray = [];
...@@ -11,6 +17,8 @@ export const cleanArray = actual => { ...@@ -11,6 +17,8 @@ export const cleanArray = actual => {
return newArray; return newArray;
}; };
export const filterCoverItemList = (list, key) => (list || []).map(item => ({ [key]: item[key] }));
const createInitProduct = (skuItem, isCreate) => { const createInitProduct = (skuItem, isCreate) => {
if (isCreate && Object.keys(skuItem).length > 5) { if (isCreate && Object.keys(skuItem).length > 5) {
return skuItem; return skuItem;
...@@ -24,72 +32,10 @@ const createInitProduct = (skuItem, isCreate) => { ...@@ -24,72 +32,10 @@ const createInitProduct = (skuItem, isCreate) => {
thirdSkuNo: null, thirdSkuNo: null,
skuLink: null, skuLink: null,
name: null, name: null,
uuid: UUID.createUUID(),
}; };
}; };
const initData = {
weight: null,
productStockWarning: null,
marketPrice: null,
supplyPrice: null,
stock: null,
thirdSkuNo: null,
skuLink: null,
name: null,
};
const createSecondProduct = (secondSpecList, initItem, secondSpec, dataSource, callback) => {
secondSpecList.forEach(secondItem => {
const specSecond =
Object.keys(secondItem).length < 2
? {
firstSpecId: initItem.firstSpecId,
firstSpecValue: initItem.firstSpecValue,
...initData,
}
: Object.assign({}, initItem); // 继承fist参数
if (callback) {
callback(specSecond);
}
specSecond.secondSpecId = secondSpec;
specSecond.secondSpecValue = secondItem.secondSpecValue;
// specSecond.uuid = UUID.createUUID();
dataSource.push(specSecond);
});
};
export const createProductData = ({ firstValues, secondValues, firstSpecId, secondSpecId }) => {
console.log('=============>firstValues, secondValues', firstValues, secondValues);
const countRowSpan = {};
const dataSource = [];
if (firstValues.length) {
firstValues.forEach((fisrtItem, index) => {
const specFirst = createInitProduct(fisrtItem, true);
specFirst.firstSpecId = firstSpecId;
specFirst.firstSpecValue = fisrtItem.firstSpecValue;
// specFirst.uuid = UUID.createUUID();
if (secondSpecId && secondValues.length) {
createSecondProduct(secondValues, specFirst, secondSpecId, dataSource, specSecond => {
if (!countRowSpan[specFirst.firstSpecValue]) {
countRowSpan[specFirst.firstSpecValue] = true;
specSecond.rowSpanCount = secondValues.length;
}
});
return;
}
dataSource.push(specFirst);
});
} else if (secondValues.length) {
createSecondProduct(secondValues, initData, secondSpecId, dataSource);
} else {
const specFirst = createInitProduct();
dataSource.push(specFirst);
}
console.log('dataSource===========>', dataSource);
return dataSource;
};
export const isUrl = path => { export const isUrl = path => {
// eslint-disable-next-line no-useless-escape // eslint-disable-next-line no-useless-escape
const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/; const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
...@@ -132,13 +78,18 @@ export const batchTableSourceData = ({ batchItem, tableData, bacthSecon, bacthFi ...@@ -132,13 +78,18 @@ export const batchTableSourceData = ({ batchItem, tableData, bacthSecon, bacthFi
const filterItems = (type, props) => { const filterItems = (type, props) => {
const { infoSpecData, serviceItem, infoImageData, infoMation, settlementItem } = props; const { infoSpecData, serviceItem, infoImageData, infoMation, settlementItem } = props;
console.log('===========>serviceItem', serviceItem); console.log('===========>infoSpecData', infoSpecData);
console.log('===========>settlementItem', settlementItem);
const { imageList = {}, commonImageList } = infoImageData; const { imageList = {}, commonImageList, cardImageList } = infoImageData;
return infoSpecData.items.map(item => { return infoSpecData.items.map(item => {
if (type === 4) {
// 如果为服务类商品,默认取cardImageList,cardImageList为必选项目
item.imageList = cardImageList;
} else {
// 如果为虚拟或实体商品,默认取自己{}中对应的的,没有则取公共图
const imgList = imageList[item.firstSpecValue] || []; const imgList = imageList[item.firstSpecValue] || [];
item.imageList = imgList.length ? imgList : commonImageList; item.imageList = imgList.length ? imgList : commonImageList;
}
item.firstSpecId = infoSpecData.firstSpecId; item.firstSpecId = infoSpecData.firstSpecId;
item.secondSpecId = infoSpecData.secondSpecId || null; item.secondSpecId = infoSpecData.secondSpecId || null;
if (type === 4) { if (type === 4) {
...@@ -156,11 +107,12 @@ export const filterSendData = (type, params) => { ...@@ -156,11 +107,12 @@ export const filterSendData = (type, params) => {
console.log('===============>生成数据', params); console.log('===============>生成数据', params);
const { infoMation, infoImageData } = params; const { infoMation, infoImageData } = params;
const items = filterItems(type, params); const items = filterItems(type, params);
return { return {
type, type,
items, items,
name: infoMation.name, name: infoMation.name,
specs: infoMation.specs || [],
supplierId: infoMation.supplierId,
brandId: infoMation.brandId || null, brandId: infoMation.brandId || null,
character: infoMation.character, character: infoMation.character,
categoryId: infoMation.categoryId[2], categoryId: infoMation.categoryId[2],
...@@ -169,3 +121,123 @@ export const filterSendData = (type, params) => { ...@@ -169,3 +121,123 @@ export const filterSendData = (type, params) => {
commonImageList: infoImageData.commonImageList, commonImageList: infoImageData.commonImageList,
}; };
}; };
export const fliterSkuListSortData = list => {
if (!list || !list.length) return;
const fristSkuList = sortBy(list, item => item.firstSpecValue).reduce((origin, item) => {
if (!origin[item.firstSpecValue]) {
origin[item.firstSpecValue] = [item];
} else {
origin[item.firstSpecValue].push(item);
}
return origin;
}, {});
let finialList = [];
// eslint-disable-next-line no-restricted-syntax, guard-for-in
for (const skuKey in fristSkuList) {
const skuFirst = fristSkuList[skuKey];
skuFirst.forEach((sku, ind) => {
if (!ind) {
sku.rowSpanCount = skuFirst.length;
}
});
finialList = [...finialList, ...skuFirst];
}
// eslint-disable-next-line consistent-return
return finialList;
};
export const filterSkuNotIdList = list =>
(list || []).reduce(
(origin, item) => {
if (item.id) {
origin.inIdList.push(item);
} else {
origin.noIdList.push(item);
}
return origin;
},
{
inIdList: [],
noIdList: [],
},
);
const createInitSkuItems = () => ({
weight: null,
productStockWarning: null,
marketPrice: null,
supplyPrice: null,
stock: null,
thirdSkuNo: null,
skuLink: null,
name: null,
});
export const createSkuListData = (first, second, firstSpecId, secondSpecId) => {
const list = [];
const skuItem = createInitSkuItems();
console.log(first, second, firstSpecId, secondSpecId);
if (first && first.length) {
// 一级规格有值时,生成的编辑表格
first.forEach(fir => {
const copy = { ...skuItem };
copy.firstSpecId = firstSpecId;
copy.firstSpecValue = fir.firstSpecValue;
// console.log(copy);
if (second.length) {
second.forEach(sec => {
const copySec = { ...copy };
copySec.secondSpecId = secondSpecId;
copySec.secondSpecValue = sec.secondSpecValue;
list.push(copySec);
});
return;
}
list.push(copy);
});
} else if (second && second.length) {
// 缺少一级规格值,只有二级规格值时,生成的编辑表格
second.forEach(sec => {
const copy = { ...skuItem };
copy.secondSpecId = secondSpecId;
copy.secondSpecValue = sec.secondSpecValue;
list.push(copy);
});
} else {
// 缺少一级和二级规格时生成的编辑表格
list.push(skuItem);
}
return list;
};
export const createProductData = (props, isEdit) => {
const {
firstSpecId,
secondSpecId,
fisrtNoIdList,
secndNoIdList,
fisrtInIdList,
secndInIdList,
} = props;
const newFirstList = fisrtNoIdList.concat(fisrtInIdList || []);
let list = [];
// if (!isFirstSame && !isSecondSame) {
if (!isEdit) {
list = createSkuListData(fisrtNoIdList, secndNoIdList, firstSpecId, secondSpecId);
} else {
const list1 = fisrtNoIdList.length
? createSkuListData(fisrtNoIdList, secndInIdList, firstSpecId, secondSpecId)
: [];
const list2 = secndNoIdList.length
? createSkuListData(newFirstList, secndNoIdList, firstSpecId, secondSpecId)
: [];
list = [...list1, ...list2];
}
// }
return list;
};
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