- 按照正常逻辑，新增产品点击保存按钮后，获取到productId，会显示可编辑列表和删除按钮。
- 问题：点击保存后，可编辑列表和删除按钮都显示了，但是可编辑列表中默认会有的第一条数据没有显示，删除按钮和保存按钮的位置仍然是end。这两个位置都需要刷新页面后，才会正常显示。
export default withError(() => {
const { productId } = useParams();
useEffect(() => {
productId && reload();
}, [productId]);
const reload = () => {
getProductById({ id: productId }).then((res) => {
const sku = { ...res, titleZh: res.title.d, titleEn: res.title.en };
console.log('res==>', res);
setSku(sku);
form.setFieldsValue(sku);
res.albumPics &&
res.albumPics != '' &&
setAlbumPics(
res.albumPics.split(',').map((url: any) => ({
url,
state: 'done',
}))
);
res.pic &&
setImageList([
{
url: res.pic || '',
state: 'done',
},
]);
setSelfSupportStatus(res.selfSupportStatus);
if (!res.erpProductTags) {
setTags(res.ptProductTags);
} else if (!res.ptProductTags) {
setTags(res.erpProductTags);
} else {
setTags(res.erpProductTags + ',' + res.ptProductTags);
}
});
};
// 提交表单
const onFinish = () => {
form.validateFields().then((e) => {
// if (sku) {
if (sku?.erpProductId > 0) {
// 简易编辑
const { sid, jewelryProductTypeId, detailsJson } = sku;
const _ = Object.assign(form.getFieldsValue(), {
sid,
detailsJson,
jewelryProductTypeId,
pic: imageList[0]?.url,
albumPics: albumPics.map((a) => a.url).join(','),
title: {
d: e.titleZh,
en: e.titleEn,
},
spu: sku?.spu,
selfSupportStatus: e.selfSupportStatus ? 1 : 0,
ptProductTags: tags,
});
const { titleZh, titleEn, ...data } = _;
console.log('产品简易修改:', data);
postEditProduct(data)
.then(() => {
message.success(t('goods.savepro'));
reload();
})
.catch((e) => {
message.error(e.message);
});
} else {
// const { sid, jewelryProductAlloyId } = sku;
const values = form.getFieldsValue();
const data = {
...sku,
...values,
pic: imageList[0]?.url,
albumPics: albumPics.map((a) => a.url).join(','),
title: {
d: values.titleZh,
en: values.titleEn,
},
selfSupportStatus: selfSupportStatus ? 1 : 0,
ptProductTags: tags,
};
// 编辑产品
if (productId) {
console.log('编辑产品: ', data);
postUpdateProduct(data)
.then(() => {
reload();
message.success(t('goods.savepro'));
})
.catch((e) => {
reload();
message.error(e.message);
});
} else {
data.wholesaleFee = data.wholesaleFee || 0;
data.wholesaleFeeRule = data.wholesaleFeeRule || '';
data.wholesaleMaxFee = data.wholesaleMaxFee || 0;
data.wholesaleMinFee = data.wholesaleMinFee || 0;
postInsertProduct(data)
.then((e) => {
navigate(`/product/draft/product-edit/${e}`);
reload();
message.success('新增产品档案成功');
})
.catch((e) => {
message.error(e.message);
});
}
}
});
};
// 编辑组件信息
const handleSave = (row) => {
console.log('编辑组件信息row==>', row);
const index = detailsData.findIndex((item) => row.sid === item.sid);
let newData;
if (index === detailsData.length - 1 && (row.sku || row.quantity > 0)) {
newData = [...detailsData, { sid: 0 }];
} else {
newData = [...detailsData];
}
const item = newData[index];
if (!row.sid) row.sid = -detailsData.length;
newData.splice(index, 1, { ...item, ...row });
setDetailsData(newData);
};
const handleOnSave = () => {
const data = detailsData
.filter((a) => a.sid)
.map((a) => ({
...a,
productId,
// title: a.title,
subProductId: a.subProductId,
}));
console.log('productId===>', productId);
console.log('保存的组件信息===>', data);
postEditProductBom(data).then(() => {
message.success('组件信息保存成功');
getProductBomList();
});
};
const moduleColumns: any = [
{
title: t('order.pic'),
dataIndex: 'pic',
formItemProps,
width: 100,
renderText: (pic: string) =>
!!pic && <Image className="data-img-src" src={pic} />,
},
{
title: 'SKU',
tooltip: t('common.sku_tip'),
dataIndex: 'sku',
formItemProps,
width: 150,
// editable: true,
render: (a: any, record) => {
return record.sku ? (
<>{a}</>
) : (
<Selector
onSelected={(selected) => {
handleSave({
sid: record.sid,
sku: selected.sku,
title: selected.title,
subProductId: selected.sid,
pic: selected.pic,
});
}}
isSku={true}
searchName="search"
title={t('wms.skutip3')}
load={fecthOnlyProductList}
/>
);
},
},
{
title: t('order.tit'),
dataIndex: 'title',
formItemProps,
width: 150,
},
{
title: t('wms.num'),
valueType: 'digit',
dataIndex: 'num',
editable: true,
width: 100,
},
{
title: '重量',
dataIndex: 'weight',
formItemProps,
width: 100,
editable: true,
},
{
title: t('order.memo'),
dataIndex: 'memo',
formItemProps,
width: 150,
editable: true,
},
{
title: t('wms.operate'),
valueType: 'option',
width: 50,
render: (text: any, record: any, rowIndex: number) => (
<>
<Popconfirm
title={t('wms.deletetip1')}
onConfirm={() => handleDel(record.sid)}
>
{rowIndex < detailsData.length - 1 && (
<Button type="link">{t('order.delete')}</Button>
)}
</Popconfirm>
</>
),
},
];
//组件编辑列表
const moduleEditColumns = moduleColumns.map((col) => {
console.log('col', col);
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record): any => ({
record,
editable: col.editable,
dataIndex: col.dataIndex,
title: col.title,
handleSave,
}),
};
});
return (
<PageContainer
header={{
title: false,
breadcrumbRender: (props: any) => (
<Breadcrumb
props={props || []}
title={sku?.sku || t('products.new_file')}
returnPath="/product/draft"
/>
),
}}
>
{/* 组件 */}
{productId && (
<EditableProTable
recordCreatorProps={false}
headerTitle="组件"
rowKey="sid"
scroll={{ x: true }}
columns={moduleEditColumns}
editableFormRef={editorFormRef}
components={editableRowCol}
value={detailsData}
pagination={false}
toolBarRender={() => [
<Button
onClick={handleOnSave}
type="primary"
htmlType="submit"
>
保存组件
</Button>,
]}
editable={{
form,
editableKeys: editableKeys,
onChange: setEditableRowKeys,
actionRender: (row, config, dom) => [dom.save, dom.cancel],
}}
tableExtraRender={() => <></>}
/>
)}
<Divider />
<Row justify={productId ? 'space-between' : 'end'}>
{productId && (
<Col>
<Popconfirm
title="请确认是否要删除该产品"
onConfirm={delProduct}
okText="确认"
cancelText="取消"
>
<Button type="primary" danger>
删除
</Button>
</Popconfirm>
</Col>
)}
<Col>
<Button type="primary" onClick={onFinish}>
保存
</Button>
</Col>
</Row>
});
