Skip to content

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

fix: 提交

parent 57d51709
Show whitespace changes
Inline Side-by-side
Showing with 667 additions and 170 deletions
config/env.config.js
View file @ dd1bd48b
......@@ -4,8 +4,11 @@ const isPre = process.env.PRE_ENV === 'pre';
const envAPi = {
api: 'https://backstms-xyqb.liangkebang.net',
kdspOpApi: 'https://kdsp-operation-xyqb.liangkebang.net',
kdspApi: 'https://sc-op-api-xyqb.liangkebang.net',
goodsApi: 'https://sc-op-api-xyqb.liangkebang.net',
kdspApi: 'https://sc-merchant-api-xyqb.liangkebang.net',
// kdspApi: 'https://sc-op-api-xyqb.liangkebang.net',
goodsApi: 'https://sc-merchant-api-xyqb.liangkebang.net',
// goodsApi: 'https://sc-op-api-xyqb.liangkebang.net',
querysApi: 'https://sc-settlement-api-xyqb.liangkebang.net',
// goodsApi: '//192.168.188.111:7000',
prologueDomain: 'https://mall-xyqb.liangkebang.net',
......
src/pages/GoodsManage/index.jsx
View file @ dd1bd48b
......@@ -21,7 +21,7 @@ import {
} from './service';
import LogModal from './LogModal';
import CreateModal from './createModal';
import { column, JDSHOPID } from './staticdata';
import { column, JDSHOPID, ProcessEditData } from './staticdata';
import SearchForm from './SearchForm';
import TempleatModal from './TempleatModal';
import ServiceGoods from '../ServiceGoods';
......@@ -49,7 +49,9 @@ class goodsManage extends Component {
isAll: 0,
templateList: [],
isType: '',
serviceVisble: true,
serviceVisble: false,
serviceData: {},
};
currentLog = null;
......@@ -117,7 +119,7 @@ class goodsManage extends Component {
this.setState({
createloading: true,
});
const { data, msg } = await spuDetail({ id: 894048258062 }); // spuId
const { data, msg } = await spuDetail({ id: spuId }); // spuId
if (data) {
data.state = state;
data.pageProductType = productType;
......@@ -292,9 +294,38 @@ class goodsManage extends Component {
});
};
serviceVisbleChange = visble => {
// serviceVisbleChange = row => {
// this.setState({
// serviceVisble: true,
// });
// };
serviceVisbleChange = async row => {
const { state, spuId, productType } = row;
this.setState({ createloading: true });
const { data, msg } = await spuDetail({ id: spuId }); // spuId
if (data) {
const SourceData = ProcessEditData(data, row);
console.log('index.js=============>', SourceData);
this.setState({
serviceData: SourceData,
serviceVisble: true,
createloading: false,
});
} else {
this.setState({
createloading: false,
});
notification.warning({
message: msg,
});
}
};
serviceVisbleClose = flag => {
this.setState({
serviceVisble: visble,
serviceVisble: flag,
serviceData: {},
});
};
......@@ -311,9 +342,7 @@ class goodsManage extends Component {
<PageHeaderWrapper>
<Spin spinning={this.state.createloading}>
<Card>
<Button type="primary" onClick={() => this.serviceVisbleChange(true)}>
new 新增商品
</Button>
<Button onClick={() => this.serviceVisbleClose(true)}>新建</Button>
<SearchForm
handleSearch={this.handleSearch}
onReset={this.onReset}
......@@ -412,8 +441,15 @@ class goodsManage extends Component {
{/* '894048258062' */}
<ServiceGoods
visible={this.state.serviceVisble}
onChange={this.serviceVisbleChange}
id={894048258062}
onChange={this.serviceVisbleClose}
SourceData={this.state.serviceData}
categoryList={
this.state.serviceData.productType === 2
? this.state.virtualTreeData
: this.state.treeData
}
specListData={this.state.specListData}
/>
</Spin>
</PageHeaderWrapper>
......
src/pages/GoodsManage/staticdata.js
View file @ dd1bd48b
......@@ -152,6 +152,7 @@ export function column() {
render: (_, row) => (
<div className={styles.actionBtn}>
{(row.state === 4 || (row.state >= 5 && row.updateState !== 1)) && (
<>
<Button
key="edit"
type="primary"
......@@ -161,6 +162,16 @@ export function column() {
>
修改
</Button>
<Button
key="222"
type="primary"
size="small"
className={styles.button}
onClick={() => this.serviceVisbleChange(row)}
>
修改
</Button>
</>
)}
<Button
key="viewP"
......@@ -200,3 +211,122 @@ export const productTypeList = [
];
export const JDSHOPID = [3, 5, 6];
// 编辑回显示时只获取用到的数据
const filterItem = skuItem => {
const { serviceItem, ...argsItem } = skuItem;
argsItem.disabled = true;
return argsItem;
};
const filterSpecData = skuList =>
skuList.reduce(
(orgin, skuItem) => {
const item = filterItem(skuItem);
const { firstSpecValue, secondSpecValue } = item;
if (firstSpecValue && !orgin.firstDuplicate.includes(firstSpecValue)) {
orgin.firstSpecValue.push(item);
orgin.firstDuplicate.push(firstSpecValue);
}
if (secondSpecValue && !orgin.secondDuplicate.includes(secondSpecValue)) {
orgin.secondSpecValue.push(item);
orgin.secondDuplicate.push(secondSpecValue);
}
return orgin;
},
{
firstSpecValue: [],
secondSpecValue: [],
dataSource: [],
firstDuplicate: [],
secondDuplicate: [],
},
);
const filterCarouseList = (carouseList = []) =>
carouseList.reduce((origin, itemImg) => {
if (itemImg.skuSpecImageList.length) {
origin[itemImg.specValue || 'NOT'] = itemImg.skuSpecImageList || [];
}
return origin;
}, {});
export const ProcessEditData = (data, row) => {
const [oneItem = {}] = data.skuList;
const serviceItem = oneItem.serviceItem || {};
const orginSpecItem = filterSpecData(data.skuList);
const imageList = filterCarouseList(data.carouseList);
const SourceData = {
productType: data.productType,
pageProductType: row.productType,
state: row.state,
infoMation: {
brandId: data.brandId,
supplierId: data.supplierId,
character: data.character,
name: data.name,
categoryId: [data.firstCategoryId, data.secondCategoryId, data.thirdCategoryId],
description: serviceItem.description || null,
},
infoSpecData: {
firstSpec: oneItem.firstSpec,
firstSpecId: oneItem.firstSpecId,
firstSpecValue: orginSpecItem.firstSpecValue,
secondSpec: oneItem.secondSpec,
secondSpecId: oneItem.secondSpecId,
secondSpecValue: orginSpecItem.secondSpecValue,
},
infoImageData: {
imageList,
commonImageList: data.commonImageList,
detailImageList: data.detailImageList,
},
skuList: data.skuList,
};
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,
// });
};
src/pages/ServiceGoods/components/CommonTemplate.tsx
View file @ dd1bd48b
import React from 'react';
import { Select, Form, InputNumber, Input, Button } from 'antd';
import commonStyle from '../common.less';
export const WrapperContainer = props => (
......@@ -20,14 +21,70 @@ export const Title = props => (
</div>
);
// export const IdSelect = (props: IdSelectProps) => {
// const {value, onChange, defaultOptionName, options, ...resetProps} = props;
export const SelectTemplate = props => {
const {
value,
onChange,
formName,
noSty,
defaultOptionName,
dataList,
fieldNames,
...resetProps
} = props;
if (!dataList.length) {
return null;
}
const selectTemp = (
<Select allowClear {...resetProps}>
{defaultOptionName ? <Select.Option value={0}>{defaultOptionName}</Select.Option> : null}
{dataList.map((item, index) => {
const val = fieldNames ? item[fieldNames.value] : item;
const lab = fieldNames ? item[fieldNames.label] : item;
return (
<Select.Option key={val} value={val}>
{lab}
</Select.Option>
);
})}
</Select>
);
// return <Select {...resetProps} value={options?.length ? toNumber(value): 0} onChange={value => onChange?.(toNumber(value) || undefined)}>
// {
// defaultOptionName ? <Select.Option value={0}>{defaultOptionName}</Select.Option> : null
// }
// {options?.map(option => <Select.Option key={option.id} value={option.id}>{option.name}</Select.Option>)}
// </Select>
// }
// const toNumber = (value: unknown) => isNaN(Number(value)) ? 0: Number(value);
return formName ? (
<Form.Item noStyle={noSty} name={formName} key={formName}>
{selectTemp}
</Form.Item>
) : (
selectTemp
);
};
export const CreateFormInput = props => {
const { title, record, dataIndex, rowIndex, onClick, type, ...options } = props;
if (type === 'input') {
return <Input placeholder={title} {...options} />;
}
if (type === 'option') {
return (
<>
{record.skuLink && (
<Button type="primary" size="small" onClick={() => onClick('cloneImg', record)}>
拉图片
</Button>
)}
{props.isJDGoods && (
<Button
type="primary"
size="small"
onClick={() => onClick('updateName', { ...record, dataIndex, rowIndex })}
disabled={props.disabled}
>
修改sku名称
</Button>
)}
</>
);
}
return <InputNumber placeholder={title} {...options} />;
};
src/pages/ServiceGoods/components/EditFormTable.jsx
View file @ dd1bd48b
......@@ -8,6 +8,7 @@ import React, {
useImperativeHandle,
} from 'react';
import { ServiceContext } from '../context';
import { CreateFormInput } from './CommonTemplate';
const EditableContext = createContext(null);
......@@ -20,10 +21,12 @@ const EditableCell = props => {
children,
dataIndex,
record,
roleProps,
handleSave,
...restProps
} = props;
// console.log('==============>', props);
const form = useContext(EditableContext);
const save = async () => {
try {
......@@ -33,6 +36,7 @@ const EditableCell = props => {
console.log('Save failed:', errInfo);
}
};
const onClickEvent = () => {};
const childNode = (
<Form.Item
......@@ -40,7 +44,21 @@ const EditableCell = props => {
name={['tableList', rowIndex, dataIndex]}
rules={[{ required: true, message: `${title} is required.` }]}
>
{editable ? <InputNumber onBlur={save} /> : children[1]}
{editable ? (
<CreateFormInput
{...roleProps}
title={title}
rowIndex={rowIndex}
dataIndex={dataIndex}
record={record}
type={props.type}
onBlur={save}
onClick={onClickEvent}
disabled={props.disabled}
/>
) : (
<Button type="text">{children[1]}</Button>
)}
</Form.Item>
);
return <td {...restProps}>{childNode}</td>;
......@@ -103,6 +121,9 @@ const EditFormTable = forwardRef((props, ref) => {
rowIndex,
editable: col.editable,
dataIndex: col.dataIndex,
disabled: col.disabled,
type: col.inputType,
roleProps: col.roleProps || {},
title: col.title,
handleSave,
};
......@@ -124,7 +145,7 @@ const EditFormTable = forwardRef((props, ref) => {
}}
bordered
dataSource={dataSource}
rowKey={(row, rowInd) => rowInd}
rowKey={(row, rowInd) => (customer.isEdit ? row.id : rowInd)}
columns={columns}
/>
</EditableContext.Provider>
......
src/pages/ServiceGoods/components/FormInformationBasic.jsx
View file @ dd1bd48b
import React, { useContext, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Cascader, Form, Input, Select } from 'antd';
import React, { useState, useContext, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Cascader, Form, Input, Select, Popover, Button, Checkbox } from 'antd';
import { formItemLayout } from '../config';
import { ServiceContext } from '../context';
......@@ -16,8 +16,9 @@ const filterCategoryOptions = (inputValue, path) =>
path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
const FormInformationBasic = forwardRef((props, ref) => {
const { editData, categoryList, brandList } = props;
const { editData, categoryList, brandList, afterAddressList, specListData } = props;
const [form] = Form.useForm();
const [noreBrandList, setNoreBrandList] = useState([]);
const onCheck = async () => {
try {
......@@ -33,21 +34,28 @@ const FormInformationBasic = forwardRef((props, ref) => {
reset: form.resetFields,
}));
const customer = useContext(ServiceContext);
useEffect(() => {
const noreList = (brandList || []).filter(item => item.name === '虚拟商品');
setNoreBrandList(noreList);
}, [brandList]);
useEffect(() => {
if (customer.isEdit) {
if (!Object.keys(editData).length) return;
const initValues = {
brandId: editData.brandId,
supplierId: editData.supplierId,
name: editData.name,
categoryId: [editData.firstCategoryId, editData.secondCategoryId, editData.thirdCategoryId],
description: null,
};
if (customer.isCard) {
const { serviceItem } = editData.skuList[0];
initValues.description = (serviceItem || {}).description || null;
}
form.setFieldsValue(initValues);
if (!editData) return;
// const initValues = {
// brandId: editData.brandId,
// supplierId: editData.supplierId,
// character: editData.character,
// name: editData.name,
// categoryId: [editData.firstCategoryId, editData.secondCategoryId, editData.thirdCategoryId],
// description: null,
// };
// if (customer.isCard) {
// const { serviceItem } = editData.skuList[0];
// initValues.description = (serviceItem || {}).description || null;
// }
form.setFieldsValue(editData);
}
}, [customer.isEdit, editData]);
......@@ -70,37 +78,99 @@ const FormInformationBasic = forwardRef((props, ref) => {
}}
scrollToFirstError
>
<Form.Item
name="categoryId"
label="商品类目"
rules={[{ type: 'array', required: true, message: '请输入商品类目!' }]}
>
<Cascader
disabled={customer.isService}
placeholder="请选择商品类目！"
showSearch={{ filter: filterCategoryOptions }}
fieldNames={{ label: 'name', value: 'id', children: 'children' }}
options={categoryList}
/>
</Form.Item>
<Form.Item
name="brandId"
label="供应商名称"
rules={[{ required: true, message: '请选择供应商名称!' }]}
label="商品品牌"
rules={[{ required: true, message: '请选择商品品牌!' }]}
extra="若需新增品牌请联系业务员"
>
<Select showSearch placeholder="请选择供应商名称" filterOption={fileterBrandOptions}>
{CreateSelectOption(brandList)}
<Select
disabled={customer.isService}
showSearch
placeholder="请选择商品品牌"
filterOption={fileterBrandOptions}
>
{CreateSelectOption(customer.productType === 2 ? noreBrandList : brandList)}
</Select>
</Form.Item>
<Popover content={form.getFieldValue('name')} trigger="hover">
<Form.Item
key="name"
name="name"
label="商品名称"
rules={[{ required: true, message: '请输入商品名称!', whitespace: true }]}
rules={[
{ required: true, min: 2, message: '请输入最少两个字符的商品名称!', whitespace: true },
]}
>
<Input disabled={customer.isService} placeholder="请输入商品名称" />
</Form.Item>
</Popover>
{customer.isJDGoods && (
<Button key="jdMsg" danger type="text">
*本列表的商品名称仅供搜索使用，不在前端作展示。若要修改APP端展示的商品名称，请在商品信息中修改。
</Button>
)}
<Form.Item
name="character"
label="商品卖点"
maxLength={50}
placeholder="卖点最优可填写3个词,12个字。前后用空格加竖杠分隔,例: 莹莹剔透 | 粒粒优选 | 易煮易熟"
rules={[{ required: true, message: '请输入商品卖点!', whitespace: true }]}
>
<Input placeholder="请输入商品名称" />
</Form.Item>
<Form.Item
name="categoryId"
label="商品类目"
rules={[{ type: 'array', required: true, message: '请输入商品类目!' }]}
name="afterAddressId"
label="售后地址"
rules={[{ required: true, message: '请选择售后地址!' }]}
>
<Cascader
placeholder="请选择商品类目！"
showSearch={{ filter: filterCategoryOptions }}
fieldNames={{ label: 'name', value: 'id', children: 'children' }}
options={categoryList}
/>
<Select showSearch placeholder="请选择商品品牌" filterOption={fileterBrandOptions}>
{afterAddressList.map(item => (
<Select.Option key={item.id} value={item.id}>
{item.addressName}
</Select.Option>
))}
</Select>
</Form.Item>
{specListData.map((item, index) => (
<Form.Item
key={item.specId}
label={item.specName}
name={item.specId}
labelCol={{ span: 2 }}
>
<Checkbox.Group options={item.specValues} />
</Form.Item>
))}
{/* <Form.Item
name="brandId"
label="供应商名称"
rules={[{ required: true, message: '请选择供应商名称!' }]}
>
<Select showSearch placeholder="请选择供应商名称" filterOption={fileterBrandOptions}>
{CreateSelectOption(brandList)}
</Select>
</Form.Item> */}
{customer.isCard ? (
<Form.Item
key="description"
name="description"
label="描述"
rules={[{ required: true, message: '请输入描述！' }]}
......
src/pages/ServiceGoods/components/FormPriceOrStock.jsx
View file @ dd1bd48b
......@@ -12,6 +12,16 @@ import { formItemLayout, StaticColumns } from '../config';
import EditFormTable from './EditFormTable';
import { createProductData, cleanArray } from '../utils';
import { ServiceContext } from '../context';
import { SelectTemplate } from './CommonTemplate';
const initSpecReced = () => ({
firstSpec: '',
firstSpecId: null,
firstSpecValue: [],
secondSpec: '',
secondSpecId: null,
secondSpecValue: [],
});
const validatorSpecValue = (value, list, index, specName) => {
const checkList = list.filter((item, ind) => {
......@@ -26,7 +36,7 @@ const validatorSpecValue = (value, list, index, specName) => {
const SpecificationTemplate = (props, _) => {
const {
form,
name,
formName,
label,
specName,
specList,
......@@ -50,8 +60,8 @@ const SpecificationTemplate = (props, _) => {
};
const bundlePlusAddSpecEvent = addCallback => {
console.log(name);
const specId = form.getFieldValue(name);
console.log(formName);
const specId = form.getFieldValue(formName);
if (!specId) {
Modal.warning({
maskClosable: true,
......@@ -70,7 +80,7 @@ const SpecificationTemplate = (props, _) => {
return (
<>
<Form.Item name={name} label={label}>
<Form.Item name={formName} label={label}>
<Select
disabled={customer.isEdit}
allowClear
......@@ -85,7 +95,9 @@ const SpecificationTemplate = (props, _) => {
onChange={handleChange}
/>
</Form.Item>
<Form.Item name={selectName} hidden></Form.Item>
<Form.Item name={selectName} hidden>
<Input hidden />
</Form.Item>
<Form.List name={specName}>
{(fields, { add, remove }) => (
<>
......@@ -170,26 +182,46 @@ const filterSpecData = skuList =>
return orgin;
}, originItems);
const CreateBatchFormItems = ({ batchChange, editRef, defaultColumns }) => {
const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColumns }) => {
const customer = useContext(ServiceContext);
const formItems = defaultColumns
.filter(item => !item.role || item?.role.includes(customer.productType))
.filter(item => item.batchRole && item?.batchRole.includes(customer.productType))
.map((item, index) => (
<Form.Item
noStyle
key={item.dataIndex}
key={`${item.dataIndex}`}
name={['batchItem', item.dataIndex]}
initialValue={null}
>
<InputNumber placeholder={item.title} />
<InputNumber {...(item.batchProps || {})} placeholder={item.title} />
</Form.Item>
));
return (
<>
{formItems.length ? (
<Space style={{ marginBottom: 20 }}>
{
<SelectTemplate
width={150}
noSty
formName="bacthFirst"
placeholder={specInitValue.firstSpec}
dataList={specInitValue.firstSpecValue}
fieldNames={{ label: 'firstSpecValue', value: 'firstSpecValue' }}
/>
}
{
<SelectTemplate
noSty
width={150}
formName="bacthSecon"
placeholder={specInitValue.secondSpec}
dataList={specInitValue.secondSpecValue}
fieldNames={{ label: 'secondSpecValue', value: 'secondSpecValue' }}
/>
}
{formItems.concat(
<Button key="batch" type="primary" onClick={batchChange}>
<Button key="batch" type="primary" disabled={customer.isService} onClick={batchChange}>
批量设置
</Button>,
)}
......@@ -200,18 +232,11 @@ const CreateBatchFormItems = ({ batchChange, editRef, defaultColumns }) => {
};
const FormPriceOrStock = forwardRef((props, ref) => {
const { specList, editData, onSpecChange } = props;
const { specList, editData, skuList, onSpecChange } = props;
const editRef = useRef(null);
const customer = useContext(ServiceContext);
const [form] = Form.useForm();
const [specInitValue, setSpecInitValue] = useState({
firstSpec: '',
firstSpecId: null,
firstSpecValue: [],
secondSpec: '',
secondSpecId: null,
secondSpecValue: [],
});
const [specInitValue, setSpecInitValue] = useState(initSpecReced());
const [defaultColumns, setDefaultColumns] = useState([]);
const [tableData, setTableData] = useState([]);
......@@ -242,7 +267,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
});
}
const dynamicColumns = [...columsData, ...StaticColumns];
const dynamicColumns = [...columsData, ...StaticColumns(customer)];
setDefaultColumns(dynamicColumns);
};
......@@ -289,43 +314,52 @@ const FormPriceOrStock = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
onCheck,
reset: form.resetFields,
reset: () => {
console.log('============>cleaarn', initSpecReced());
form.resetFields();
setDefaultColumns([]);
setTableData([]);
setMergeTable(false);
setSpecInitValue(initSpecReced());
},
}));
useEffect(() => {
if (customer.isEdit) {
if (!Object.keys(editData).length) return;
const { skuList } = 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(specData); // 设置规格数据
setSpecInitValue(specData); // 缓存规格数据
if (!editData) return;
// const { skuList } = 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,
// };
console.log('=============>editDataeditDataeditData', editData);
form.setFieldsValue(editData); // 设置规格数据
setSpecInitValue(editData); // 缓存规格数据
firstOnChangeEvent(); // 触发成底部动态表格数据
if (editData.firstSpecId) {
onFinish(); // 触发生成表格
} else {
CreateColumnsEvent(editData);
setMergeTable(Boolean(editData.secondSpecValue.length));
setTableData(skuList);
}
}
}, [customer.isEdit, editData]);
return (
<Form
form={form}
name="dynamic_form_nest_item"
// onFinish={onFinish}
autoComplete="off"
initialValues={specInitValue}
>
<Form form={form} autoComplete="off" initialValues={initSpecReced()}>
<SpecificationTemplate
form={form}
label="一级规格"
name="firstSpecId"
formName="firstSpecId"
onChange={firstOnChangeEvent}
selectName="firstSpec"
specName="firstSpecValue"
......@@ -335,20 +369,21 @@ const FormPriceOrStock = forwardRef((props, ref) => {
<SpecificationTemplate
form={form}
label="二级规格"
name="secondSpecId"
formName="secondSpecId"
selectName="secondSpec"
specName="secondSpecValue"
specList={specList}
specDataList={specInitValue.secondSpecValue}
/>
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
<Button type="primary" onClick={onFinish}>
<Button type="primary" disabled={customer.isService} onClick={onFinish}>
生成商品信息
</Button>
</div>
<CreateBatchFormItems
batchChange={batchChange}
editRef={editRef}
specInitValue={specInitValue}
defaultColumns={defaultColumns}
/>
<EditFormTable
......
src/pages/ServiceGoods/components/FormRuleVPictures.jsx
View file @ dd1bd48b
......@@ -13,34 +13,46 @@ const FormRuleVPictures = forwardRef((props, ref) => {
const customer = useContext(ServiceContext);
useEffect(() => {
if (customer.isEdit) {
console.log('==============>图片', editData);
if (!Object.keys(editData).length) return;
// if (!Object.keys(editData).length) return;
// setCommonImageList(editData.commonImageList); // 编辑状态下设置公共图
// setDetailImageList(editData.detailImageList); // 编辑状态下设置详情图
// const commImg = editData.skuList.reduce((orgin, item) => {
// const keyString = `${item.firstSpecValue}`; // _${item.firstSpecId}
// if (!Object.keys(orgin).includes(keyString)) {
// orgin[keyString] = item.imageList;
// }
// return orgin;
// }, {});
// setImageList(commImg);
// form.setFieldsValue({
// imageList: commImg,
// commonImageList: editData.commonImageList,
// detailImageList: editData.detailImageList,
// });
if (editData) {
setImageList(editData.imageList);
setCommonImageList(editData.commonImageList); // 编辑状态下设置公共图
setDetailImageList(editData.detailImageList); // 编辑状态下设置详情图
const commImg = editData.skuList.reduce((orgin, item) => {
const keyString = `${item.firstSpecValue}`; // _${item.firstSpecId}
if (!Object.keys(orgin).includes(keyString)) {
orgin[keyString] = item.imageList;
}
return orgin;
}, {});
setImageList(commImg);
form.setFieldsValue({
imageList: commImg,
imageList: editData.imageList,
commonImageList: editData.commonImageList,
detailImageList: editData.detailImageList,
});
}
}
}, [customer.isEdit, editData]);
useEffect(() => {
if (specKeyItem.length) {
const newImageList = specKeyItem.reduce((origin, item) => {
const showItem = imageList[item] || [];
origin[item] = showItem;
return origin;
}, {});
setImageList(newImageList);
}
}, [specKeyItem]);
const onCheck = async () => {
......@@ -55,7 +67,12 @@ const FormRuleVPictures = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
onCheck,
reset: form.resetFields,
reset: () => {
form.resetFields();
setImageList({});
setCommonImageList([]);
setDetailImageList([]);
},
}));
const onFinish = values => {
......@@ -75,9 +92,9 @@ const FormRuleVPictures = forwardRef((props, ref) => {
name="register"
onFinish={onFinish}
initialValues={{
imageList,
commonImageList,
detailImageList,
imageList: {},
commonImageList: [],
detailImageList: [],
}}
scrollToFirstError
>
......
src/pages/ServiceGoods/config.js
View file @ dd1bd48b
......@@ -65,11 +65,17 @@ export const WeeksList = [
},
];
export const StaticColumns = [
export const StaticColumns = customer => [
{
title: '供货价',
dataIndex: 'supplyPrice',
editable: true,
batchRole: [1, 2, 3],
roleProps: {
precision: 2,
min: 0,
},
disabled: customer.isJDGoods || customer.isService,
},
{
title: '佣金费率',
......@@ -81,42 +87,90 @@ export const StaticColumns = [
title: '市场价',
dataIndex: 'marketPrice',
editable: true,
batchRole: [1, 2, 3],
roleProps: {
precision: 2,
min: 0,
},
disabled: customer.isService,
},
{
title: '重量(kg)',
dataIndex: 'weight',
editable: true,
batchRole: [1],
batchProps: {
precision: 3,
max: 999999.999,
},
disabled: customer.isService,
},
{
title: '销售价',
dataIndex: 'salePrice',
editable: true,
role: [],
},
{
title: '库存',
dataIndex: 'stock',
editable: true,
role: [3],
// disabled: customer.isService,
},
{
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,
},
disabled: customer.isService,
},
{
title: '库存预警阈值',
dataIndex: 'productStockWarning',
editable: true,
role: [],
batchRole: [1],
role: [1],
disabled: customer.isService,
},
{
title: '商品自编码',
dataIndex: 'thirdSkuNo',
editable: true,
role: [1, 2],
inputType: 'text',
inputType: 'input',
disabled: customer.isService,
},
{
title: '京东链接',
dataIndex: 'skuLink',
editable: true,
role: [1, 2],
inputType: 'text',
inputType: 'input',
disabled: customer.isService,
},
{
title: '操作',
editable: true,
dataIndex: 'option',
role: [1, 2],
inputType: 'option',
roleProps: {
isJDGoods: customer.isJDGoods,
min: 0,
},
disabled: customer.isService,
},
];
src/pages/ServiceGoods/index.jsx
View file @ dd1bd48b
......@@ -12,8 +12,10 @@ import {
merchantCategoryGetAll,
merchantBrandList,
merchantSpecList,
afterSalesAddrsPage,
} from './service';
import { ServiceContext } from './context';
import { ConsoleSqlOutlined } from '@ant-design/icons';
/**
* 服务商品改造-商品模块
......@@ -21,6 +23,8 @@ import { ServiceContext } from './context';
* @returns ReactDOM
*/
const ServiceGoods = options => {
const { SourceData, categoryList, specListData } = options;
const basicRef = useRef(null);
const stockRef = useRef(null);
const settingRef = useRef(null);
......@@ -31,7 +35,9 @@ const ServiceGoods = options => {
const [isEdit, setIsEdit] = useState(false); // 是否是编辑状态
const [productType, setProductType] = useState(1); // 商品状态
const [pageLoading, setPageLoading] = useState(false); // 页面加载状态
const [categoryList, setCategoryList] = useState([]); // 获取三级类目
// const [categoryList, setCategoryList] = useState([]); // 获取三级类目
const [afterAddressList, setAfterAddressList] = useState([]);
const [brandList, setBrandList] = useState([]); // 获取商品牌
const [specList, setSpecList] = useState([]); // 规格列表
const [editData, setEditData] = useState({}); // 编辑保存数据
......@@ -45,14 +51,22 @@ const ServiceGoods = options => {
proType === 3 ? [...baseCheckList, settingRef, settleOtrRef] : baseCheckList;
setCheckFormList(newBaseCheckList);
};
useEffect(() => {
const timer = setTimeout(() => {
const resetForm = () => {
checkFormList.forEach(({ current }) => {
if (current) {
current.reset();
}
});
clearTimeout(timer);
});
}, [checkFormList]);
};
// useEffect(() => {
// const timer = setTimeout(() => {
// console.log(checkFormList);
// clearTimeout(timer);
// }, 1000);
// }, [checkFormList, options.visible]);
const productChange = task => {
setProductType(task.type);
......@@ -81,17 +95,28 @@ const ServiceGoods = options => {
// 获取三级类目分类数据
const getMerchantCategory = async () => {
const result = await merchantCategoryGetAll();
setCategoryList(result.data || []);
// setCategoryList(result.data || []);
};
// 获取商品牌数据
const getMerchantBrandList = async () => {
if (!brandList.length) {
const result = await merchantBrandList();
setBrandList(result.data || []);
}
};
// 获取规格列表
const getMerchantSpecList = async () => {
if (!specList.length) {
const result = await merchantSpecList();
setSpecList(result.data || []);
}
};
const getAfterSalesAddrsPage = async () => {
if (!afterAddressList.length) {
const result = await afterSalesAddrsPage();
setAfterAddressList(result.data.records);
}
};
useEffect(() => {
......@@ -99,23 +124,42 @@ const ServiceGoods = options => {
if (!options.visible) {
return;
}
setPageId(options.id);
setPageLoading(true);
await getMerchantCategory();
await getMerchantBrandList();
await getAfterSalesAddrsPage();
await getMerchantSpecList();
if (options.id) {
if (Object.keys(SourceData).length) {
// const isService = initData.state && initData.state !== 4;
setEditData(SourceData);
setPageId(options.id);
setProductType(SourceData.productType);
changeCheckList(SourceData.productType);
setIsEdit(true);
await getProductDetailResponse(options.id);
changeCheckList(productType);
}
setPageLoading(false);
// setPageLoading(true);
// await getMerchantCategory();
// await getMerchantBrandList();
// await getMerchantSpecList();
// if (options.id) {
// setIsEdit(true);
// await getProductDetailResponse(options.id);
// changeCheckList(productType);
// }
// setPageLoading(false);
})();
}, [options.visible, options.id]);
}, [SourceData]);
const handleOk = () => {};
const handleCancel = () => {
setPageId(null);
setIsEdit(false);
setProductType(1);
setEditData({});
setSpecKeyList([]);
resetForm();
options.onChange(false);
};
......@@ -126,22 +170,31 @@ const ServiceGoods = options => {
[specKeyList],
);
const providerValue = {
pageId,
isEdit,
productType,
isCard: productType === 3,
isService: SourceData.state && SourceData.state !== 4,
isJDGoods: isEdit && SourceData.pageProductType && +SourceData.pageProductType !== 1,
};
return (
<Modal visible={options.visible} onOk={handleOk} onCancel={handleCancel} width={1366}>
<Spin tip="正在加载..." spinning={pageLoading} delay={100}>
<WrapperContainer>
<ServiceContext.Provider
value={{ pageId, isEdit, productType, isCard: productType === 3 }}
>
<ServiceContext.Provider value={providerValue}>
<Title title="商品类型" />
<TaskTypeSelect productType={productType} onChange={productChange} />
<Title title="商品基本信息编辑" />
<FormInformationBasic
ref={basicRef}
editData={editData}
editData={editData.infoMation}
categoryList={categoryList}
brandList={brandList}
afterAddressList={afterAddressList}
specListData={specListData}
/>
<Title title="价格与库存" />
......@@ -149,14 +202,19 @@ const ServiceGoods = options => {
ref={stockRef}
specList={specList}
onSpecChange={onSpecCommonImgEvent}
editData={editData}
editData={editData.infoSpecData}
skuList={editData.skuList}
/>
<Title title="规则设置" />
{productType === 3 && <FormRuleSetting ref={settingRef} editData={editData} />}
{/* <Title title="规则设置" />
{productType === 3 && <FormRuleSetting ref={settingRef} editData={editData} />} */}
<FormRuleVPictures ref={picturesRef} specKeyItem={specKeyList} editData={editData} />
{productType === 3 && <FormSettlementOthers ref={settleOtrRef} editData={editData} />}
<FormRuleVPictures
ref={picturesRef}
specKeyItem={specKeyList}
editData={editData.infoImageData}
/>
{/* {productType === 3 && <FormSettlementOthers ref={settleOtrRef} editData={editData} />} */}
<Button type="primary" onClick={submitEvent}>
Register
</Button>
......
src/pages/ServiceGoods/service.js
View file @ dd1bd48b
......@@ -41,3 +41,19 @@ export const merchantSpecList = () =>
request.post('/product/spec/api/merchant/list', {
prefix: goodsApi,
});
// 查询供应商售后地址
export const afterSalesAddrsPage = () => {
const params = {
pageSize: 100,
pageNo: 1,
};
const data = request.post('/api/kdsp/supplier/after-sales-addrs-page', {
prefix: kdspApi,
data: stringify(_.omitBy(params, v => !v)),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
});
return data;
};
src/pages/ServiceGoods/utils.js
View file @ dd1bd48b
......@@ -65,7 +65,7 @@ export const createProductData = ({ firstValues, secondValues, firstSpecId, seco
const specFirst = createInitProduct(fisrtItem, true);
specFirst.firstSpecId = firstSpecId;
specFirst.firstSpecValue = fisrtItem.firstSpecValue;
if (secondValues.length) {
if (secondSpecId && secondValues.length) {
createSecondProduct(secondValues, specFirst, secondSpecId, dataSource, specSecond => {
if (!countRowSpan[specFirst.firstSpecValue]) {
countRowSpan[specFirst.firstSpecValue] = true;
......
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