Skip to content

M
merchant-manage-ui
Commit f107556f authored by 武广's avatar 武广
Browse files
Options

fix: 去掉old创建实物商品

parent f3b1113d
Hide whitespace changes
Inline Side-by-side
Showing with 17 additions and 2114 deletions
src/pages/GoodsManage/createModal/batchSetting.jsx deleted 100644 → 0
View file @ f3b1113d
/* eslint-disable no-param-reassign */
import { Form, Select, Input, InputNumber, Button } from 'antd';
import React, { Component } from 'react';
// import styles from '../style.less';
const { Option } = Select;
const FormItem = Form.Item;
class goodsManage extends Component {
formRef = React.createRef();
componentDidMount() {
this.props.onRef(this);
}
setFiled = flag => {
const form = this.formRef.current;
if (flag === 'firstKeys') {
form.setFieldsValue({ firstSpecValue: '' });
return;
}
form.setFieldsValue({ secondSpecValue: '' });
};
batchSetting = () => {
const { editData, isEdit } = this.props;
const form = this.formRef.current;
const data = form.getFieldsValue();
if (!data.firstSpecValue && !data.secondSpecValue) {
editData.forEach(item => {
item.marketPrice = data.marketPrice;
// if (!isEdit) item.productStock = data.productStock; // 编辑状态不可修改库存
item.productStock = data.productStock;
item.supplyPrice = data.supplyPrice;
item.weight = data.weight;
item.productStockWarning = data.productStockWarning;
});
}
if (data.firstSpecValue && !data.secondSpecValue) {
editData.forEach(item => {
if (item.firstSpecValue === data.firstSpecValue) {
item.marketPrice = data.marketPrice;
item.productStock = data.productStock;
item.supplyPrice = data.supplyPrice;
item.weight = data.weight;
item.productStockWarning = data.productStockWarning;
}
});
}
if (!data.firstSpecValue && data.secondSpecValue) {
editData.forEach(item => {
if (item.secondSpecValue === data.secondSpecValue) {
item.marketPrice = data.marketPrice;
item.productStock = data.productStock;
item.supplyPrice = data.supplyPrice;
item.weight = data.weight;
item.productStockWarning = data.productStockWarning;
}
});
}
if (data.firstSpecValue && data.secondSpecValue) {
editData.forEach(item => {
if (
item.firstSpecValue === data.firstSpecValue &&
item.secondSpecValue === data.secondSpecValue
) {
item.marketPrice = data.marketPrice;
item.productStock = data.productStock;
item.supplyPrice = data.supplyPrice;
item.weight = data.weight;
item.productStockWarning = data.productStockWarning;
}
});
}
this.props.batchSetting(editData);
};
render() {
const {
firstSpes = [],
secondSpecs = [],
firstSpesName = '',
secondSpesName = '',
productType,
isEdit,
isService,
} = this.props;
return (
<Form layout="inline" ref={this.formRef}>
<FormItem name="firstSpecValue">
<Select allowClear style={{ width: 120 }} placeholder={firstSpesName}>
{firstSpes.length > 0 &&
firstSpes.map(
item =>
item &&
typeof item === 'string' && (
<Option key={item} value={item}>
{item}
</Option>
),
)}
</Select>
</FormItem>
<FormItem name="secondSpecValue">
<Select allowClear style={{ width: 120 }} placeholder={secondSpesName}>
{secondSpecs.length &&
secondSpecs.map(
item =>
item &&
typeof item === 'string' && (
<Option key={item} value={item}>
{item}
</Option>
),
)}
</Select>
</FormItem>
<FormItem name="supplyPrice">
<Input placeholder="供货价" style={{ width: 100 }} />
</FormItem>
<FormItem name="marketPrice">
<Input placeholder="市场价" style={{ width: 100 }} />
</FormItem>
{/* <FormItem>
{getFieldDecorator('salePrice', {})(
<Input placeholder="销售价" style={{ width: 100 }} />,
)}
</FormItem> */}
{productType === 1 && (
<FormItem name="weight">
<InputNumber
precision={3}
max={999999.999}
// eslint-disable-next-line radix
placeholder="重量"
style={{ width: 130 }}
/>
</FormItem>
)}
<FormItem name="productStock">
<InputNumber
precision={0}
step={1}
// eslint-disable-next-line radix
formatter={val => parseInt(val, '10') || ''}
placeholder="库存"
style={{ width: 100 }}
/>
</FormItem>
{productType === 1 && (
<FormItem name="productStockWarning">
<InputNumber
placeholder="库存预警"
maxLength={5}
min={0}
precision={0}
style={{ width: 100 }}
/>
</FormItem>
)}
<FormItem>
<Button type="primary" htmlType="submit" onClick={this.batchSetting} disabled={isService}>
批量设置
</Button>
</FormItem>
</Form>
);
}
}
export default goodsManage;
src/pages/GoodsManage/createModal/buttonGroup.jsx deleted 100644 → 0
View file @ f3b1113d
import { Row, Col, Button } from 'antd';
import React, { Component } from 'react';
import styles from '../style.less';
// eslint-disable-next-line react/prefer-stateless-function
class ButtonGroup extends Component {
render() {
const { initData, confirmLoading } = this.props;
return (
<Row type="flex" justify="center" align="middle" gutter={20}>
<Col>
<Button type="primary" onClick={() => this.props.onCancel()} className={styles.logBtn}>
取消
</Button>
</Col>
<Col key="submit">
<Button
type="primary"
onClick={() => this.props.confirm()}
className={styles.logBtn}
loading={confirmLoading}
disabled={confirmLoading}
>
提交
</Button>
</Col>
{initData && !Object.keys(initData).length && (
<Col key="submit-add">
<Button
type="primary"
onClick={() => this.props.confirm(true)}
className={styles.logBtn}
loading={confirmLoading}
disabled={confirmLoading}
>
提交并继续添加
</Button>
</Col>
)}
</Row>
);
}
}
export default ButtonGroup;
src/pages/GoodsManage/createModal/index.jsx deleted 100644 → 0
View file @ f3b1113d
/* eslint-disable no-param-reassign */
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
MinusCircleOutlined,
PlusOutlined,
RestOutlined,
DownOutlined,
UpOutlined,
} from '@ant-design/icons';
import {
Modal,
Table,
Button,
Select,
Input,
Row,
Col,
Checkbox,
notification,
Cascader,
Popover,
Card,
Radio,
} from 'antd';
import React, { Component } from 'react';
import SuperSelect from 'antd-virtual-select';
import _ from 'lodash';
import ButtonGroup from './buttonGroup';
import {
normFile,
editColumns,
specValidate,
dataInit,
validateSpuInfo,
createEditData,
} from './mixin';
import {
getSpecList,
getJdPicList,
getBrandList,
addGoods,
editGoods,
queryAllAfterAddress,
apiGetAttribute,
} from '../service';
import styles from '../style.less';
import Upload from '../../components/sortablUpload';
import BatchSetting from './batchSetting';
import SkuNameChange from './skuNameChange';
import { productTypeList } from '../staticdata';
const FormItem = Form.Item;
const { Option } = Select;
class goodsManage extends Component {
state = {
// step: 1,
// editStep: 1,
categoryId: null, // 类目选择
specList: [], // 规格
normalBrandList: [], // 品牌
brandList: [], // 虚拟商品的 品牌
editData: [], // sku表格
createData: {}, // 返显
count: -1, // 规格值起始序号+1
colorImg: {}, // 一级规格是颜色时,color: [imgList]
initForm: {}, // 返显
isCancel: false,
initCascader: null,
batchDeleteImgObj: {},
editRow: {},
editRowIndex: null,
skuNameVisible: false,
productType: 1,
confirmLoading: false,
afterAddressList: {},
// isAttrLoading: false,
categoryAttrs: [], // 获取类目下属性
};
componentDidMount() {
this.getSpecData();
this.getBrandData();
this.getAfterAddressData();
const { initData = {} } = this.props;
const isEdit = Object.keys(initData).length !== 0;
if (isEdit) {
this.getAttribute(
initData.thirdCategoryId || initData.secondCategoryId || initData.firstCategoryId,
);
}
}
// componentWillReceiveProps(nextProps) {
// if (nextProps.visible && !this.state.isAttrLoading) {
// this.setState({
// isAttrLoading: true,
// });
// }
// this.setState({ isCancel: false });
// }
// 获取售后地址
getAfterAddressData = async () => {
const data = await queryAllAfterAddress();
if (data) {
this.setState({ afterAddressList: data.data.records });
}
};
// 获取规格列表
getSpecData = async () => {
try {
const { data } = await getSpecList();
if (data) {
this.setState({ specList: data });
}
} catch (e) {
console.log(e);
}
};
inputChange = (value, key, index) => {
this.setState(prev => {
prev.editData[index][key] = value;
return { editData: prev.editData };
});
};
// eslint-disable-next-line consistent-return
getJdPicList = async row => {
// 获取图片需要设置轮播图和详情图
const {
form: { setFieldsValue, getFieldsValue },
} = this.props;
const { detailImageList = [] } = getFieldsValue(['detailImageList']);
if (!row.skuLink) {
return notification.warning({ message: '请输入京东链接再获取图片' });
}
const { firstSpecId, firstSpecValue, secondSpecId, secondSpecValue, skuLink } = row;
const data = await getJdPicList({
firstSpecId,
firstSpecValue,
secondSpecId,
secondSpecValue,
skuLink,
jdSkuInfoUrl: row.skuLink,
});
if (!data) return false;
const detailList = data.detailList || [];
const { colorImg, editData } = this.state;
colorImg[data.firstSpecValue] = colorImg[data.firstSpecValue]
? colorImg[data.firstSpecValue].concat(data.carouseList || [])
: data.carouseList || [];
editData.forEach(i => {
i.imageList = colorImg[i.firstSpecValue];
return i;
});
this.setState(
() => ({ colorImg, editData }),
() => {
setFieldsValue({
[`imageList[${data.firstSpecValue}]`]: this.state.colorImg[data.firstSpecValue],
detailImageList: [...detailImageList, ...detailList],
});
},
);
};
changeName = name => {
const { editData } = this.state;
editData[this.state.editRowIndex].name = name;
this.setState({ editData, skuNameVisible: false });
};
openSkuNameModal = (row, index) => {
this.setState({
editRowIndex: index,
editRow: row,
skuNameVisible: true,
});
};
getBrandData = async () => {
try {
const { data } = await getBrandList();
const list = data && data.filter(item => item.name === '虚拟商品');
this.setState({ normalBrandList: data, brandList: list });
} catch (e) {
console.log(e);
}
};
changeStep = () => {
const {
form: { setFieldsValue },
initData,
} = this.props;
initData.editData.forEach(item => {
item.third = item.thirdSkuNo;
});
if (Object.keys(initData).length) {
this.setState({
initForm: initData,
editData: initData.editData,
productType: initData.productType,
});
setFieldsValue({
detailImageList: initData.detailImageList || [],
imageList: initData.imageList || {},
});
}
};
// 选择规格
specChange = (flag, specName) => {
const { initForm } = this.state;
if (flag === 'first') {
initForm.firstSpecName = specName;
this.setState({ initForm });
return;
}
initForm.secondSpecName = specName;
this.setState({ initForm });
};
// 获取属性
getAttribute = async categoryId => {
const res = await apiGetAttribute(categoryId);
let categoryAttrs = [];
if (res && res.data && res.data.length) {
categoryAttrs = res.data;
}
this.setState({
categoryAttrs,
});
};
treeChange = value => {
const cid = value[value.length - 1];
this.setState({ categoryId: cid, initCascader: value });
if (value.length === 3) {
this.getAttribute(cid);
}
};
remove = (flag, k) => {
const { form } = this.props;
const keys = form.getFieldValue(flag);
if (flag === 'firstKeys') {
form.setFieldsValue(
{
firstKeys: keys.filter(key => key !== k),
},
() => {
const firstKeys = form.getFieldValue('firstKeys');
const first = form.getFieldValue('first');
form.setFieldsValue({
first: _.pick({ first, firstKeys }),
});
},
);
this.BatchSetting.setFiled(flag);
return;
}
form.setFieldsValue(
{
secondKeys: keys.filter(key => key !== k),
},
() => {
const secondKeys = form.getFieldValue('secondKeys');
const second = form.getFieldValue('second');
form.setFieldsValue({
second: _.pick({ second, secondKeys }),
});
},
);
this.BatchSetting.setFiled(flag);
};
add = flag => {
const { form } = this.props;
if (flag === 'firstKeys' && !form.getFieldValue('firstSpecId')) {
notification.error({
message: '请先选择一级规格数据',
});
return;
}
if (flag === 'secondKeys' && !form.getFieldValue('secondSpecId')) {
notification.error({
message: '请先选择二级规格数据',
});
return;
}
const keys = form.getFieldValue(flag);
const nextKeys = keys.concat(+this.state.count + 1);
this.setState(prev => ({ count: +prev.count + 1 }));
if (flag === 'firstKeys') {
form.setFieldsValue({
firstKeys: nextKeys,
});
return;
}
form.setFieldsValue({
secondKeys: nextKeys,
});
};
imgChange = (data, spec) => {
const { colorImg } = this.state;
colorImg[spec] = data;
this.setState({ colorImg });
this.setState(prev => ({
editData: prev.editData.map(item => {
if (`${item.firstSpecValue}` === spec) {
item.imageList = prev.colorImg[spec];
}
return item;
}),
}));
};
batchSet = editData => {
this.setState({ editData });
};
pullImg = (data, spec) => {
this.imgChange(data, spec);
const { form } = this.props;
form.setFieldsValue({
[`imageList[${spec}]`]: data,
});
};
createShopInfo = isEdit => {
const {
form: { getFieldsValue },
initData,
} = this.props;
const values = getFieldsValue();
const editData = createEditData(values, initData);
this.setState({ editData });
};
deleteImg = () => {
const {
form: { setFieldsValue },
} = this.props;
const { batchDeleteImgObj, colorImg, editData } = this.state;
const deleteKeys = Object.keys(batchDeleteImgObj);
deleteKeys.map(spec => {
if (batchDeleteImgObj[spec]) {
batchDeleteImgObj[spec] = false;
if (spec === 'detailImageList') {
setFieldsValue({
detailImageList: [],
});
return false;
}
if (spec === 'commonImageList') {
setFieldsValue({
commonImageList: [],
});
return false;
}
colorImg[spec] = [];
editData.map(item => {
if (item.firstSpecValue === spec) {
item.imageList = [];
}
return item;
});
setFieldsValue({
[`imageList[${spec}]`]: [],
});
}
return spec;
});
this.setState({ colorImg, editData, batchDeleteImgObj });
};
chooseRollImg = spec => {
this.setState(state => {
state.batchDeleteImgObj[spec] = !state.batchDeleteImgObj[spec];
return { batchDeleteImgObj: state.batchDeleteImgObj };
});
};
deal = attr => {
try {
const json = JSON.parse(attr);
if (typeof json === 'object' && this.checkInAttrList(json.attributeValueId)) {
return json;
}
return { attributeValueName: json };
} catch {
return { attributeValueName: attr };
}
};
// 最终提交
confirm = async isContinue => {
const {
form: { validateFields },
initData,
specListData,
} = this.props;
const { editData, productType } = this.state;
validateFields(async (errors, values) => {
console.log('values :>> ', values);
if (!values.afterAddressId) {
notification.error({
message: '请选择售后地址',
});
}
let imgErr = false;
if (!errors) {
if (validateSpuInfo(values, initData, editData, productType)) return;
editData.forEach(item => {
item.productStockWarning = item.productStockWarning < 0 ? 0 : item.productStockWarning;
if (!item.imageList || !item.imageList.length) {
item.imageList = values.commonImageList || [];
}
if (!item.imageList || !item.imageList.length) {
imgErr = true;
}
});
// 虚拟商品时不校验必 滑动图不全，请检查！
if (imgErr && productType === 1) {
notification.error({ message: '滑动图不全，请检查！' });
return;
}
const specs = [];
specListData.forEach(item => {
if (values.hasOwnProperty(item.specId)) {
specs.push({
specId: item.specId,
specValues: values[item.specId] || [],
});
}
});
const attributeApplyList = [];
let isMaxLength = false;
if (values.attributeApplyList && values.attributeApplyList.length) {
values.attributeApplyList.forEach(item => {
const key = Object.keys(item)[0];
let attrs = item[key];
if (Array.isArray(item[key])) {
attrs = [];
item[key].forEach(attr => {
const json = this.deal(attr);
if (!json) {
return;
}
// eslint-disable-next-line no-unused-expressions
json.attributeValueName.length > 30 && (isMaxLength = true);
attrs.push(json);
});
} else {
const json = this.deal(item[key]);
if (!json) {
return;
}
// eslint-disable-next-line no-unused-expressions
json.attributeValueName.length > 30 && (isMaxLength = true);
attrs = [json];
}
attributeApplyList.push({
attributeId: key.replace('attr', ''),
attributeApplyValueList: attrs,
});
});
if (isMaxLength) {
notification.error({
message: '自定义属性不能超过30个字符',
});
return;
}
}
await this.setState(prev => ({
confirmLoading: true,
createData: {
id: initData.id || '',
name: values.name,
items: prev.editData,
brandId: values.brandId,
supplierId: null,
detailImageList: values.detailImageList,
commonImageList: values.commonImageList || [],
categoryId: prev.categoryId ? prev.categoryId : initData?.thirdCategoryId,
// productType: values.productType,
type: values.productType,
specs,
character: values.character,
afterAddressId: values.afterAddressId,
attributeApplyList,
},
}));
const data = initData.id
? await editGoods(this.state.createData)
: await addGoods(this.state.createData);
if (data.businessCode === '0000') {
notification.success({
message: '商品保存成功！',
});
this.props.query();
if (isContinue) {
this.setState({
editData: [], // sku表格
createData: {}, // 返显
count: -1, // 规格值起始序号+1
colorImg: {}, // 一级规格是颜色时，color: [imgList]
initForm: {}, // 返显
confirmLoading: false,
initCascader: null,
});
this.props.form.resetFields();
return;
}
this.onCancel();
}
this.setState({
confirmLoading: false,
});
}
});
};
onCancel = () => {
this.setState(
{
categoryId: null, // 类目选择
editData: [], // sku表格
createData: {}, // 返显
count: -1, // 规格值起始序号+1
colorImg: {}, // 一级规格是颜色时，color: [imgList]
initForm: {}, // 返显
isCancel: true,
initCascader: null,
productType: 1,
},
() => {
this.BatchSetting.formRef.current.resetFields();
this.props.form.resetFields();
this.props.onCancel();
},
);
};
bundleRadioChange = event => {
this.setState({
categoryId: null, // 类目选择
editData: [], // sku表格
createData: {}, // 返显
count: -1, // 规格值起始序号+1
colorImg: {}, // 一级规格是颜色时，color: [imgList]
initForm: {}, // 返显
isCancel: true,
initCascader: null,
productType: event.target.value,
});
this.props.form.resetFields();
this.BatchSetting.formRef.current.resetFields();
};
/**
* 获取下拉框类型
* supportCustomValue：是否支持自定义：1 是 0 否
* optionType：选项类型：1 单选 2 多选
*/
getMode = (supportCustomValue, optionType) => {
if (+supportCustomValue.code === 1) {
return 'tags';
}
if (+optionType.code === 2) {
return 'multiple';
}
return 'default';
};
// 验证是否失效属性（已失效的商品不显示）
checkInAttrList = id =>
this.state.categoryAttrs.some(item => item.valueList.some(v => +v.id === +id));
// 获取初始化属性数据
getInitAttrValue = (id, supportCustomValue, optionType) => {
const skuAttr = this.props.initData.productAttributeApplyList?.productAttributeApplyList || [];
const v = skuAttr.filter(item => id === item.productAttributeId);
if (
v.length &&
v[0].productAttributeApplyValueList &&
v[0].productAttributeApplyValueList.length
) {
const values = [];
v[0].productAttributeApplyValueList.forEach(attr => {
if (+attr.attributeValueId) {
if (this.checkInAttrList(attr.attributeValueId)) {
values.push(
JSON.stringify({
attributeValueId: attr.attributeValueId,
attributeValueName: attr.attributeValueName,
}),
);
}
} else {
values.push(attr.attributeValueName);
}
return values;
});
if (+supportCustomValue.code === 1 || +optionType.code === 2) {
return values;
}
if (v[0].productAttributeApplyValueList.length) {
const atvalue = v[0].productAttributeApplyValueList[0];
if (this.checkInAttrList(atvalue.attributeValueId)) {
return JSON.stringify({
attributeValueId: atvalue.attributeValueId,
attributeValueName: atvalue.attributeValueName,
});
}
}
return '';
}
if (+supportCustomValue.code === 1 || +optionType.code === 2) {
return [];
}
return '';
};
validateToInputName = (rule, value, callback) => {
if (value.trim().length < 2) {
callback(new Error('商品名称不可小于2个字符'));
}
callback();
};
render() {
const { visible, form, initData = {}, treeData, virtualTreeData, specListData } = this.props;
const isEdit = Object.keys(initData).length !== 0;
// 是否仅编辑卖点和服务
const isService = initData.state && initData.state !== 4;
const { getFieldDecorator, getFieldsValue } = form;
getFieldDecorator('firstKeys', { initialValue: [] });
getFieldDecorator('secondKeys', { initialValue: [] });
const { first = [], second, commonImageList, firstKeys, secondKeys, name } = getFieldsValue();
const isFirstSame = specValidate(first, initData.firstSpecList, initData.id);
const isSecondSame = specValidate(second, initData.secondSpecList, initData.id);
if (isFirstSame) first.pop();
if (isSecondSame) second.pop();
let colorKeys = isEdit
? initData?.firstSpecList?.concat(first || this.state.initForm.first || [])
: first || this.state.initForm.first || [];
if (isEdit && !Object.keys(this.state.initForm).length && !this.state.isCancel) {
this.changeStep(1);
}
const isJDGoods = initData.id && initData.pageProductType && +initData.pageProductType !== 1;
const initCascader = isEdit
? [initData.firstCategoryId, initData.secondCategoryId, initData.thirdCategoryId]
: this.state.initCascader;
const formItemLayout = {
labelCol: {
span: 5,
},
};
const formItemProduct = {
labelCol: { span: 2 },
wrapperCol: { span: 22 },
};
const formItemAttr = {
labelCol: { span: 6 },
wrapperCol: { span: 16 },
};
const {
colorImg,
productType,
normalBrandList,
brandList,
confirmLoading,
afterAddressList,
} = this.state;
const skuSpeFirstKeys = initData.firstSpecList || [];
const skuSpeSecondKeys = initData.secondSpecList || [];
const skuOldAttr = initData.productAttributeApplyList?.oldProductAttributeApplyList || [];
const treeDataArray = productType === 2 ? virtualTreeData : treeData;
const brandListArray = productType === 2 ? brandList : normalBrandList;
dataInit(this.state.editData);
const filterOption = (input, op) => op.props.children.includes(input);
// ---------------------驳回编辑规格时候，过滤掉colors中为null的数据---------------------
if (isEdit && !initData.editData[0]?.firstSpec && !initData.editData[0]?.secondSpec) {
colorKeys = colorKeys.length > 1 ? colorKeys.filter(item => item !== 'null') : colorKeys;
}
return (
<Modal
title={initData.id ? '修改商品' : '新增商品'}
visible={visible}
footer={null}
onCancel={this.onCancel}
width="1050px"
bodyStyle={{ background: 'rgb(247 249 249)' }}
>
<Form name="horizontal_login">
<div>
<Card className={styles.card} bordered={false}>
<Row type="flex" gutter={24}>
<Col span={24}>
<Form.Item label="商品类型：" {...formItemProduct}>
{getFieldDecorator('productType', {
initialValue: productType,
rules: [{ required: true, message: '请选择商品类型' }],
})(
<Radio.Group disabled={isEdit || isService} onChange={this.bundleRadioChange}>
{productTypeList.map(item => (
<Radio key={item.value} value={item.value} disabled={item.disabled}>
{item.label}
</Radio>
))}
</Radio.Group>,
)}
</Form.Item>
</Col>
<Col span={24}>
<FormItem label="类目：" {...formItemProduct}>
{getFieldDecorator('categoryId', {
initialValue: initCascader,
rules: [
{
required: true,
message: '请选择类目',
},
],
})(
<Cascader
style={{ width: 690 }}
changeOnSelect
showSearch
placeholder="请选择类目，支持模糊搜索"
fieldNames={{ label: 'name', value: 'id', children: 'children' }}
options={treeDataArray}
onChange={(val, label, ext) => this.treeChange(val, label, ext)}
disabled={isService}
/>,
)}
</FormItem>
</Col>
</Row>
</Card>
<Card className={styles.card} bordered={false}>
<Row
gutter={10}
style={{ background: '#fff', borderRadius: '6px', padding: '20px 0 5px 0' }}
>
<Col span={10}>
<FormItem label="商品品牌：" {...formItemLayout}>
{getFieldDecorator('brandId', {
initialValue: this.state.initForm.brandId,
rules: [
{
required: true,
message: '请选择商品品牌',
},
],
})(
<Select
allowClear
showSearch
style={{ width: 280 }}
filterOption={filterOption}
placeholder="请选择商品品牌，支持模糊搜索"
disabled={isService}
>
{brandListArray?.length &&
brandListArray.map(item => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>,
)}
</FormItem>
</Col>
<span style={{ display: 'inline-block', lineHeight: '35px', color: '#999' }}>
若需新增品牌请联系业务员
</span>
</Row>
<Row type="flex">
<Col span={24}>
<Popover content={name} trigger="hover">
<FormItem label="商品名称：" labelCol={{ span: 2 }}>
{getFieldDecorator('name', {
initialValue: initData.name,
validateTrigger: ['onBlur'],
rules: [
{
required: true,
message: '请输入商品名称',
},
{
validator: this.validateToInputName,
},
],
})(
<Input
style={{ width: 690 }}
maxLength={100}
placeholder="请输入商品名称"
allowClear
disabled={isService}
/>,
)}
</FormItem>
</Popover>
{isJDGoods && (
<div className={styles.warning}>
*本列表的商品名称仅供搜索使用，不在前端作展示。若要修改APP端展示的商品名称，请在商品信息中修改。
</div>
)}
</Col>
<Col span={24}>
<FormItem label="商品卖点：" labelCol={{ span: 2 }}>
{getFieldDecorator('character', {
initialValue: initData.character,
rules: [
{
required: true,
message: '请输入商品卖点',
},
],
})(
<Input
style={{ width: 690 }}
maxLength={50}
placeholder="卖点最优可填写3个词,12个字。前后用空格加竖杠分隔,例: 莹莹剔透 | 粒粒优选 | 易煮易熟"
allowClear
/>,
)}
</FormItem>
</Col>
<Col span={10}>
<FormItem label="售后地址" {...formItemLayout}>
{getFieldDecorator('afterAddressId', {
initialValue: this.state.initForm.afterAddressId,
rules: [
{
required: true,
message: '请选择售后地址',
},
],
})(
<Select allowClear style={{ width: 280 }} placeholder="请选择售后地址">
{afterAddressList?.length &&
afterAddressList.map(item => (
<Option key={item.id} value={item.id}>
{item.addressName}
</Option>
))}
</Select>,
)}
</FormItem>
</Col>
{specListData.length
? specListData.map((item, index) => (
<Col key={item.specId} span={24}>
<FormItem label={item.specName} labelCol={{ span: 2 }}>
{getFieldDecorator(`${item.specId}`, {
initialValue: initData[item.specId],
})(<Checkbox.Group options={item.specValues} />)}
</FormItem>
</Col>
))
: ''}
</Row>
</Card>
{/* 商品属性 */}
<Card className={styles.card} bordered={false}>
<div className={styles.cardTitle}>商品属性</div>
<div
className={styles.attrbox + (this.state.isMore ? styles.attrboxMore : '')}
more={this.state.isMore}
>
<Row>
{this.state.categoryAttrs.length > 0 &&
this.state.categoryAttrs.map((k, i) => (
<Col span={12} key={k.id}>
<FormItem label={k.name} {...formItemAttr} key={k.id}>
{getFieldDecorator(`attributeApplyList[${i}]['attr${k.id}']`, {
initialValue: this.getInitAttrValue(
k.id,
k.supportCustomValue,
k.optionType,
), // +k.supportCustomValue.code === 1 || +k.optionType.code === 2 ? [] : '',
validateTrigger: ['onChange'],
rules:
+k.required.code === 1
? [
{
required: true,
type:
+k.supportCustomValue.code === 1 || +k.optionType.code === 2
? 'array'
: 'string',
message: '请选择',
},
]
: [],
})(
<Select
mode={this.getMode(k.supportCustomValue, k.optionType)}
maxTagTextLength={8}
allowClear
>
{k.valueList &&
k.valueList.length &&
k.valueList.map(a => (
<Option
key={a.id}
value={JSON.stringify({
attributeValueId: a.id,
attributeValueName: a.name,
})}
>
{a.name}
</Option>
))}
</Select>,
)}
</FormItem>
</Col>
))}
</Row>
</div>
{this.state.categoryAttrs.length > 12 && (
<div>
<Button
type="link"
onClick={() =>
this.setState(state => ({
isMore: !state.isMore,
}))
}
>
{this.state.isMore ? '收起' : '展示更多'}
{this.state.isMore ? <UpOutlined /> : <DownOutlined />}
</Button>
</div>
)}
{skuOldAttr.length > 0 && (
<div>
<Row>注：以下商品属性已失效，请使用新的属性</Row>
<Row>
{skuOldAttr.map(s => (
<Col span={12} key={s.id}>
<FormItem
label={s.productAttributeName}
{...formItemAttr}
required={false}
key={s.id}
>
{s.productAttributeApplyValueList
.map(item => item.attributeValueName)
.join('；')}
</FormItem>
</Col>
))}
</Row>
</div>
)}
</Card>
<Card className={styles.card} bordered={false}>
<Row>
<FormItem label="一级规格">
{getFieldDecorator('firstSpecId', {
initialValue: this.state.initForm.firstSpecId,
})(
<Select
allowClear
showSearch
style={{ width: 200 }}
placeholder="请选择一级规格"
disabled={(isEdit && initData.firstSpecId) || isService}
onChange={(val, option) =>
this.specChange('first', option?.props.children, val)
}
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state.specList.length &&
this.state.specList.map(item => (
<Option value={item.specId} key={item.specId}>
{item.specName}
</Option>
))}
</Select>,
)}
</FormItem>
</Row>
<Row type="flex">
{skuSpeFirstKeys.length > 0 &&
skuSpeFirstKeys.map(
k =>
k !== 'null' && (
<Input
key={k}
value={k}
disabled
placeholder="请输入规格名称"
style={{ width: '15%', margin: '5px 5px 28px 5px' }}
/>
),
)}
{firstKeys.map(k => (
<FormItem label="" required={false} key={k}>
{getFieldDecorator(`first[${k}]`, {
initialValue: this.state.initForm.first && this.state.initForm.first[k],
validateTrigger: ['onChange', 'onBlur'],
rules: [
{
required: true,
message: '请输入',
},
],
})(
<Input
key={k}
placeholder="请输入规格名称"
style={{ width: '60%', marginRight: 8 }}
/>,
)}
{firstKeys.length > 0 ? (
<MinusCircleOutlined
className="dynamic-delete-button"
style={{ marginBottom: 0 }}
onClick={() => this.remove('firstKeys', k)}
/>
) : null}
</FormItem>
))}
<FormItem>
<Button
type="dashed"
disabled={isJDGoods}
onClick={() => this.add('firstKeys')}
style={{ textAlign: 'center' }}
>
<PlusOutlined />
</Button>
</FormItem>
</Row>
<Row>
<FormItem label="二级规格">
{getFieldDecorator('secondSpecId', {
initialValue: this.state.initForm.secondSpecId,
})(
<Select
allowClear
showSearch
disabled={(isEdit && initData.secondSpecId) || isService}
placeholder="请选择二级规格"
style={{ width: 200 }}
onChange={(val, option) => this.specChange('second', option?.props.children)}
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state.specList.length &&
this.state.specList.map(item => (
<Option key={item.specId} value={item.specId}>
{item.specName}
</Option>
))}
</Select>,
)}
</FormItem>
</Row>
<Row type="flex">
{skuSpeSecondKeys.length > 0 &&
skuSpeSecondKeys.map(k => (
<Input
key={k}
value={k}
disabled
placeholder="请输入规格名称"
style={{ width: '15%', margin: '5px 5px 28px 5px' }}
/>
))}
{secondKeys.map(k => (
<FormItem label="" required={false} key={k}>
{getFieldDecorator(`second[${k}]`, {
initialValue:
(this.state.initForm.second && this.state.initForm.second[k]) || '',
validateTrigger: ['onChange', 'onBlur'],
})(<Input key={k} style={{ width: '60%', marginRight: 8 }} />)}
{secondKeys.length > 0 ? (
<MinusCircleOutlined
className="dynamic-delete-button"
onClick={() => this.remove('secondKeys', k)}
/>
) : null}
</FormItem>
))}
<FormItem>
<Button
type="dashed"
onClick={() => this.add('secondKeys')}
style={{ textAlign: 'center' }}
disabled={isJDGoods}
>
<PlusOutlined />
</Button>
</FormItem>
</Row>
</Card>
<Row>
<Button
type="primary"
className={styles.logBtn}
onClick={() => this.createShopInfo(isEdit)}
disabled={isService}
>
生成商品信息
</Button>
</Row>
<BatchSetting
firstSpes={first ? skuSpeFirstKeys.concat(first) : skuSpeFirstKeys}
secondSpecs={skuSpeSecondKeys.concat(second || [])}
onRef={ref => {
this.BatchSetting = ref;
}}
editData={this.state.editData}
firstSpesName={this.state.initForm.firstSpecName}
secondSpesName={this.state.initForm.secondSpecName}
batchSetting={this.batchSet}
productType={productType}
isEdit={isEdit}
isJDGoods={isJDGoods}
isService={isService}
/>
<Row>
<Table
bordered
// rowKey={r => r.thirdSkuNo}
pagination={false}
scroll={{ y: 300, x: 1200 }}
dataSource={this.state.editData}
columns={editColumns(
{
getJdPicList: this.getJdPicList,
inputChange: this.inputChange,
openModal: this.openSkuNameModal,
productType,
},
this.state.editData?.length ? this.state.editData[0] : null,
this.state.initForm.firstSpecName,
this.state.initForm.secondSpecName,
isJDGoods,
isEdit,
isService,
)}
/>
</Row>
<Row>
<Col span={24}>
<Button
type="danger"
size="small"
onClick={this.deleteImg}
style={{ marginTop: '10px' }}
icon={<RestOutlined />}
>
图片批量删除
</Button>
</Col>
<Col span={1}>
<Checkbox
value="commonImageList"
checked={this.state.batchDeleteImgObj.commonImageList}
style={{ marginTop: '12px' }}
onChange={() => this.chooseRollImg('commonImageList')}
></Checkbox>
</Col>
<Col span={23} className={styles.imgBorder}>
<p className={styles.ptop}>
公共滑动图：
<span className={styles.sizeTitle}>（图片最大上传2M）</span>
</p>
<FormItem>
{getFieldDecorator('commonImageList', {
initialValue: this.state.initForm.commonImageList,
valuePropName: 'fileList',
getValueFromEvent: normFile,
})(<Upload isDisabled={isService} />)}
</FormItem>
</Col>
{colorKeys.length > 0 &&
colorKeys.map(color => {
if (JSON.stringify(color) === '{}') return [];
if ((color !== null && !color) || (color && !color.trim())) return [];
return [
<Col span={1}>
<Checkbox
value={color}
checked={this.state.batchDeleteImgObj[color]}
style={{ marginTop: '12px' }}
onChange={() => this.chooseRollImg(color)}
></Checkbox>
</Col>,
<Col span={23} className={styles.imgBorder}>
<p className={styles.ptop}>
{`滑动图${color === 'null' ? '' : `(${color})`}:`}
<span className={styles.sizeTitle}>（图片最大上传2M）</span>
</p>
<FormItem key={color}>
{getFieldDecorator(`imageList[${color}]`, {
initialValue:
this.state.initForm.imageList && this.state.initForm.imageList[color],
valuePropName: 'fileList',
getValueFromEvent: normFile,
})(
<Upload
isDisabled={isService}
onChange={val => this.imgChange(val, color)}
/>,
)}
<Button
disabled={colorImg[color]?.length}
size="small"
type="primary"
className={styles.pullBtn}
onClick={() => this.pullImg(commonImageList, color)}
>
拉取公共图像
</Button>
</FormItem>
</Col>,
];
})}
</Row>
<Row>
<Col span={1}>
<Checkbox
value="detailImageList"
checked={this.state.batchDeleteImgObj.detailImageList}
style={{ marginTop: '12px' }}
onChange={() => this.chooseRollImg('detailImageList')}
></Checkbox>
</Col>
<Col span={23} className={styles.imgBorder}>
<p className={styles.ptop}>
详情图：
<span className={styles.sizeTitle}>（图片最大上传2M）</span>
</p>
<FormItem>
{getFieldDecorator('detailImageList', {
initialValue: this.state.initForm.detailImageList,
valuePropName: 'fileList',
getValueFromEvent: normFile,
rules: [
{
required: productType !== 2,
message: '请上传详情图',
},
],
})(<Upload isDisabled={isService} />)}
</FormItem>
</Col>
</Row>
</div>
</Form>
<ButtonGroup
key="button-group"
initData={initData}
changeStep={this.changeStep}
onCancel={this.onCancel}
confirm={this.confirm}
confirmLoading={confirmLoading}
></ButtonGroup>
<SkuNameChange
visible={this.state.skuNameVisible}
data={this.state.editRow.name}
changeSkuName={data => this.changeName(data)}
onCancle={() => this.setState({ skuNameVisible: false })}
></SkuNameChange>
</Modal>
);
}
}
export default Form.create()(goodsManage);
src/pages/GoodsManage/createModal/mixin.jsx deleted 100644 → 0
View file @ f3b1113d
/* eslint-disable no-param-reassign */
import React from 'react';
import { Input, Button, notification, Popover, InputNumber } from 'antd';
import { sortBy } from 'lodash';
const CHECK_OBJECT = {
supplyPrice: '供货价',
marketPrice: '市场价',
productStock: '库存',
thirdSkuNo: '商品自编码',
};
export function normFile(fileList) {
return fileList;
}
export function specValidate(editArr, initArr, isEdit, msg) {
let isSame = false;
if (editArr && editArr.length) {
const list = isEdit ? editArr.concat(initArr) : editArr;
list.forEach((i, index) => {
const index1 = list.indexOf(i);
if (index1 !== index) {
isSame = true;
}
});
}
if (isSame && msg) {
notification.error({
message: msg,
});
}
return isSame;
}
export function createNewList(first, second, firstSpecId, secondSpecId) {
const list = [];
const sku = {
weight: '',
productStockWarning: '',
marketPrice: '',
// salePrice: '',
supplyPrice: '',
// stock: '',
productStock: '',
thirdSkuNo: '',
skuLink: '',
imageList: [],
};
if (first && first.length) {
// 一级规格有值时，生成的编辑表格
first.forEach(fir => {
const copy = Object.assign({}, sku);
copy.firstSpecId = firstSpecId;
copy.firstSpecValue = fir;
if (second.length) {
second.forEach(sec => {
const copySec = Object.assign({}, copy);
copySec.secondSpecId = secondSpecId;
copySec.secondSpecValue = sec;
list.push(copySec);
});
return;
}
console.log(copy);
list.push(copy);
});
} else if (second.length) {
// 缺少一级规格值，只有二级规格值时，生成的编辑表格
second.forEach(sec => {
const copy = Object.assign({}, sku);
copy.secondSpecId = secondSpecId;
copy.secondSpecValue = sec;
list.push(copy);
});
} else {
// 缺少一级和二级规格时生成的编辑表格
list.push(sku);
}
return list;
}
export function createEditData(values, initData) {
// console.log(values);
let list = null;
const first = values.first?.filter(item => item && !item.match(/^[ ]*$/)) || [];
const second =
(values.second && values.second.filter(item => item && !item.match(/^[ ]*$/))) || [];
const newFirst = first.concat(initData.firstSpecList || []);
const isFirstSame = specValidate(
first,
initData.firstSpecList,
initData.id,
'一级规格值不可重复',
);
const isSecondSame = specValidate(
second,
initData.secondSpecList,
initData.id,
'二级规格值不可重复',
);
if (!isFirstSame && !isSecondSame) {
if (!initData.id) {
list = createNewList(first, second, values.firstSpecId, values.secondSpecId);
} else {
const list1 = first.length
? createNewList(first, initData.secondSpecList, values.firstSpecId, values.secondSpecId)
: [];
const list2 = second.length
? createNewList(newFirst, second, values.firstSpecId, values.secondSpecId)
: [];
// console.log('list1=================>', list1);
// console.log('list2=================>', list2);
// console.log('initData===========>', initData);
// console.log('first===========>', first);
// console.log('second===========>', second);
// 初次添加规格时没有选择规格，添加一条没有规格的商品，被驳回之后编辑时选择规格之后需要重新创建
// 编辑时回显时的id需要给重新创建的数据第一条加上 回显的id
if (!initData.editData[0]?.firstSpec && !initData.editData[0]?.secondSpec) {
// 这种情况出现时items中只有一条数据，且没有一级规格和二级规格
// 第一次无规格时，重新生成的数据，必须保留第一条数据的id是items里面第一条数据的id
list = createNewList(first, second, values.firstSpecId, values.secondSpecId);
list[0].id = initData.editData[0].id;
} else if (initData.editData[0]?.firstSpec && !initData.editData[0]?.secondSpec) {
// console.log('只有一级规格================>');
// 只有一级规格的情况下需要
// 重新更具规格创建表格，但是需要把历史记录赋值给表格的其中几项
// 其中新建的记录和历史编辑记录
const createList = createNewList(
[...initData.firstSpecList, ...first],
second,
values.firstSpecId,
values.secondSpecId,
);
const setp = createList.length / initData.firstSpecList.concat(first).length;
list = createList.map((item, index) => {
if (index % setp === 0) {
const newItem =
initData.editData.find(val => val.firstSpecValue === item.firstSpecValue) || {};
item = Object.assign({}, item, newItem, {
secondSpec: initData.secondSpecName,
secondSpecId: item.secondSpecId,
secondSpecValue: item.secondSpecValue,
length: setp,
});
}
return item;
});
list = sortBy(list, item => item.firstSpecValue);
} else {
list = sortBy(initData.editData.concat(list1.concat(list2)), item => item.firstSpecValue);
}
}
console.log(list);
}
return list;
}
export function validateSpuInfo(values, initData, editData, productType) {
const newCheckObject =
productType === 1 ? { ...CHECK_OBJECT, weight: '重量(kg)' } : { ...CHECK_OBJECT };
const checkKey = Object.keys(newCheckObject);
const checkString = [];
editData.forEach((item, index) => {
item.thirdSkuNo = item.third;
const rowCheckString = checkKey.reduce((checkMessage, val, ind) => {
const checkItem = item[val];
if (checkItem === null || checkItem === undefined || checkItem === '') {
checkMessage += `${newCheckObject[val]}; `;
}
return checkMessage;
}, '');
if (rowCheckString) {
checkString.push(<div key={index.toString()}>{`第${index + 1}行: ${rowCheckString}`}</div>);
}
});
if (checkString.length) {
notification.warning({
message: '请完善表格:',
description: checkString,
});
return true;
}
return false;
}
export function dataInit(list) {
if (!list || !list.length) return;
const obj = {};
let finialList = [];
list.forEach(item => {
obj[item.firstSpecValue] = [];
});
list.forEach(item => obj[item.firstSpecValue].push(item));
const keys = Object.keys(obj);
keys.forEach(key => {
obj[key].forEach((i, index) => {
if (index === 0) {
i.length = obj[key].length;
}
});
finialList = finialList.concat(obj[key]);
return finialList;
});
}
export function verify(initData, categoryId) {
if (categoryId || (initData && initData.thirdCategoryId)) {
return true;
}
notification.error({
message: '请选择三级类目',
});
return false;
}
export function editColumns(
methods,
firstData,
firstSpec,
secondSpec,
isJDGoods,
isEdit,
isService,
) {
const { getJdPicList, inputChange, openModal, productType } = methods;
if (!firstData) return [];
const arr = [
{
title: '供货价',
align: 'center',
key: 'supplyPrice',
dataIndex: 'supplyPrice',
width: 100,
render: (val, row, index) => (
<InputNumber
defaultValue={val}
value={val}
precision={2}
min={0}
onChange={value => inputChange(value, 'supplyPrice', index)}
disabled={isJDGoods || isService}
/>
),
},
{
title: '市场价',
align: 'center',
key: 'marketPrice',
dataIndex: 'marketPrice',
width: 100,
render: (val, row, index) => (
<InputNumber
defaultValue={val}
value={val}
precision={2}
min={0}
onChange={value => inputChange(value, 'marketPrice', index)}
disabled={isService}
/>
),
},
{
title: '库存',
align: 'center',
key: 'productStock',
dataIndex: 'productStock',
width: 100,
render: (val, row, index) => (
<InputNumber
value={val}
precision={0}
min={0}
onChange={value => inputChange(value, 'productStock', index)}
disabled={isService}
/>
),
},
{
title: '商品自编码',
align: 'center',
dataIndex: 'third',
key: 'third',
width: 100,
render: (val, row, index) => (
<Input
value={val}
className={`third ${index}`}
defaultValue={val}
onChange={evt => inputChange(evt.target.value, 'third', index)}
disabled={isService}
/>
),
},
{
title: '京东链接',
align: 'center',
key: 'skuLink',
dataIndex: 'skuLink',
width: 80,
render: (val, row, index) => (
<Popover content={val} trigger="hover">
{
<Input
value={val}
className={`skuLink ${index}`}
defaultValue={val}
onChange={evt => inputChange(evt.target.value, 'skuLink', index)}
disabled={isService}
/>
}
</Popover>
),
},
{
title: '操作',
align: 'center',
key: 'option',
dataIndex: 'option',
width: 100,
render: (_, row, index) => (
<div>
{row.skuLink && (
<Button type="primary" size="small" onClick={() => getJdPicList(row)}>
拉图片
</Button>
)}
{isJDGoods && (
<Button
type="primary"
size="small"
style={{ marginTop: '5px' }}
onClick={() => openModal(row, index)}
disabled={isService}
>
修改sku名称
</Button>
)}
</div>
),
},
];
if (productType === 1) {
// 如果是实体商品添加重量
arr.splice(2, 0, {
title: '重量(kg)',
align: 'center',
key: 'weight',
dataIndex: 'weight',
width: 120,
render: (val, row, index) => (
<InputNumber
style={{ width: '100%' }}
value={val}
min={0}
max={999999.999}
precision={3}
onChange={value => inputChange(value, 'weight', index)}
disabled={isService}
/>
),
});
arr.splice(4, 0, {
title: '库存预警',
align: 'center',
key: 'productStockWarning',
dataIndex: 'productStockWarning',
width: 90,
render: (val, row, index) => (
<InputNumber
defaultValue={0}
value={val}
maxLength={5}
min={0}
precision={0}
onChange={value => inputChange(value, 'productStockWarning', index)}
disabled={isService}
/>
),
});
}
if (secondSpec && firstData.secondSpecValue) {
arr.unshift({
title: secondSpec,
align: 'center',
key: 'secondSpecValue',
dataIndex: 'secondSpecValue',
width: 100,
});
}
if (firstSpec && firstData.firstSpecValue) {
arr.unshift({
title: firstSpec,
dataIndex: 'firstSpecValue',
key: 'firstSpecValue',
align: 'center',
width: 100,
render: (val, row) => {
const obj = {
children: val,
props: {},
};
if (row.length) {
obj.props.rowSpan = row.length;
} else {
obj.props.rowSpan = 0;
}
return obj;
},
});
}
if (isEdit && isJDGoods) {
arr.splice(arr.length - 1, 0, {
title: 'sku名称',
align: 'center',
key: 'name',
dataIndex: 'name',
width: 100,
render: val => (
<Popover content={val} trigger="hover">
<a>查看名称</a>
</Popover>
),
});
}
return arr;
}
export const goodsType = [
{
name: '普通商品',
value: 1,
},
{
name: '虚拟商品',
value: 2,
},
{
name: '电子卡券',
value: 3,
},
];
src/pages/GoodsManage/createModal/skuNameChange.jsx deleted 100644 → 0
View file @ f3b1113d
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal } from 'antd';
import React, { Component } from 'react';
const { TextArea } = Input;
const FormItem = Form.Item;
// import styles from '../style.less';
class goodsManage extends Component {
// componentDidMount() {
// this.props.onRef(this);
// }
handleOk = () => {
const { form } = this.props;
form.validateFields((err, values) => {
if (!err) {
this.props.changeSkuName(values.name);
this.props.form.resetFields();
}
});
};
handleCancel = () => {
this.props.form.resetFields();
this.props.onCancle();
};
render() {
const { data, visible, form } = this.props;
const { getFieldDecorator } = form;
return (
<Modal title="" visible={visible} onOk={this.handleOk} onCancel={this.handleCancel}>
<Form>
<FormItem label="sku名称">
{getFieldDecorator('name', {
initialValue: data,
rules: [
{
required: true,
message: '请输入',
},
],
})(<TextArea autoSize={{ minRows: 2, maxRows: 6 }} allowClear />)}
</FormItem>
</Form>
</Modal>
);
}
}
export default Form.create()(goodsManage);
src/pages/GoodsManage/index.jsx
View file @ f107556f
......@@ -4,7 +4,6 @@ import { Card, Pagination, Table, notification, Drawer, Spin, Button, Modal } fr
import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import { sortBy } from 'lodash';
import styles from './style.less';
import LocalStroage from '@/utils/localStorage';
import configApi from '../../../config/env.config';
......@@ -21,12 +20,11 @@ import {
apiQueryLastChangeLog,
} from './service';
import LogModal from './LogModal';
import CreateModal from './createModal';
import { column, JDSHOPID, ProcessEditData } from './staticdata';
import SearchForm from './SearchForm';
import TempleatModal from './TempleatModal';
import ServiceGoods from '../ServiceGoods';
import InfoAudit from './createModal/infoAudit';
import InfoAudit from './infoAudit';
import { GOOD_MANAGE } from '@/../config/permission.config';
......@@ -44,9 +42,7 @@ class goodsManage extends Component {
priceInfo: {},
logVisible: false,
previewVisible: false,
createVisible: false, // 新增or编辑普通商品modal
updateStockVisible: false,
initData: {},
createloading: false,
specListData: [],
templeatModalVisible: false,
......@@ -126,64 +122,6 @@ class goodsManage extends Component {
this.handleSearch();
};
onUpdateInfo = async ({ state, spuId, productType }) => {
this.setState({
createloading: true,
});
const { data, msg } = await spuDetail({ id: spuId }); // spuId
if (data) {
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,
});
} else {
this.setState({
createloading: false,
});
notification.warning({
message: msg,
});
}
};
onLoad = error => {
if (!error) {
notification.success({ message: '操作成功' });
......@@ -389,6 +327,11 @@ class goodsManage extends Component {
}
};
onEdit = () => {
this.setState({ visibleAuditModal: false, auditRow: {} });
this.serviceVisbleChange(this.state.auditRow);
};
render() {
const {
goodsManage: { tableData = {} },
......@@ -416,17 +359,6 @@ class goodsManage extends Component {
) : (
''
)}
{/* {canAddService ? (
<Button
type="primary"
className={styles.button}
onClick={() => this.serviceVisbleClose(true)}
>
新增服务类商品
</Button>
) : (
''
)} */}
<Spin spinning={this.state.createloading}>
<Card>
<SearchForm
......@@ -439,7 +371,6 @@ class goodsManage extends Component {
treeData={this.state.treeData}
shopList={this.shopList}
checkStock={this.checkEnableUpdateStock}
// addSpu={() => this.setState({ createVisible: true, initData: {} })}
selectNum={selectedRowKeys.length}
setArea={(isALL, type) => this.setArea(isALL, type)}
/>
......@@ -496,20 +427,6 @@ class goodsManage extends Component {
title="商品预览"
></iframe>
</Drawer>
{this.state.createVisible && (
<CreateModal
initData={this.state.initData}
visible={this.state.createVisible}
onCancel={() => {
this.setState({ createVisible: false, initData: {} });
}}
query={() => this.handleSearch()}
shopList={this.filterShopList(this.shopList, Object.keys(this.state.initData).length)}
treeData={this.state.treeData}
virtualTreeData={this.state.virtualTreeData}
specListData={this.state.specListData}
></CreateModal>
)}
<UpdateStock
visible={this.state.updateStockVisible}
......@@ -542,22 +459,17 @@ class goodsManage extends Component {
/>
)}
</Spin>
<InfoAudit
visible={this.state.visibleAuditModal}
skuInfo={this.state.auditRow}
canEditable={this.canEditable}
onCancel={() => {
this.setState({ visibleAuditModal: false, auditRow: {} });
}}
onEdit={() => {
this.setState({ visibleAuditModal: false, auditRow: {} });
if (this.state.auditRow.type === 4) {
this.serviceVisbleChange(this.state.auditRow);
} else {
this.onUpdateInfo(this.state.auditRow);
}
}}
/>
{this.state.visibleAuditModal && (
<InfoAudit
visible={this.state.visibleAuditModal}
skuInfo={this.state.auditRow}
canEditable={this.canEditable}
onCancel={() => {
this.setState({ visibleAuditModal: false, auditRow: {} });
}}
onEdit={this.onEdit}
/>
)}
</PageHeaderWrapper>
);
}
......
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