Skip to content

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

fix: TS

parent f10cff00
Hide whitespace changes
Inline Side-by-side
Showing with 413 additions and 395 deletions
src/pages/GoodsManage/index.jsx
View file @ 8869885b
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Pagination, Table, notification, Drawer, Spin } from 'antd';
import { Card, Pagination, Table, notification, Drawer, Spin, Button } from 'antd';
import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
......@@ -24,6 +24,7 @@ import CreateModal from './createModal';
import { column, JDSHOPID } from './staticdata';
import SearchForm from './SearchForm';
import TempleatModal from './TempleatModal';
import ServiceGoods from '../ServiceGoods';
@connect(({ goodsManage }) => ({
goodsManage,
......@@ -48,6 +49,7 @@ class goodsManage extends Component {
isAll: 0,
templateList: [],
isType: '',
serviceVisble: true,
};
currentLog = null;
......@@ -115,7 +117,7 @@ class goodsManage extends Component {
this.setState({
createloading: true,
});
const { data, msg } = await spuDetail({ id: spuId });
const { data, msg } = await spuDetail({ id: 894048258062 }); // spuId
if (data) {
data.state = state;
data.pageProductType = productType;
......@@ -290,6 +292,12 @@ class goodsManage extends Component {
});
};
serviceVisbleChange = visble => {
this.setState({
serviceVisble: visble,
})
}
render() {
const {
goodsManage: { tableData = {} },
......@@ -303,6 +311,7 @@ class goodsManage extends Component {
<PageHeaderWrapper>
<Spin spinning={this.state.createloading}>
<Card>
<Button type="primary" onClick={() => this.serviceVisbleChange(true)}>new 新增商品</Button>
<SearchForm
handleSearch={this.handleSearch}
onReset={this.onReset}
......@@ -398,6 +407,8 @@ class goodsManage extends Component {
isType={this.state.isType}
templateList={this.state.templateList}
/>
{/* '894048258062' */}
<ServiceGoods visible={this.state.serviceVisble} onChange={this.serviceVisbleChange} id={894048258062} />
</Spin>
</PageHeaderWrapper>
);
......
src/pages/ServiceGoods/components/CommonTemplate.tsx
View file @ 8869885b
import React from 'react';
import commonStyle from '../common.less';
export const WrapperContainer = props => (
<div className={commonStyle.container}>{props.children}</div>
);
......
src/pages/ServiceGoods/components/EditFormTable.tsx → src/pages/ServiceGoods/components/EditFormTable.jsx
View file @ 8869885b
import { InputNumber, InputRef } from 'antd';
import { Button, Form, Input, Popconfirm, Table } from 'antd';
import type { FormInstance } from 'antd/es/form';
import React, { useContext, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
const EditableContext = React.createContext<FormInstance<any> | null>(null);
interface DataType {
rowSpanCount?: number;
supplyPrice: number;
commissionRate: number;
marketPrice: number;
salePrice: number;
stock: number;
productStockWarning: number;
}
interface PropType {
initData: any[];
defaultColumns: any[];
setTableData: (item: DataType[]) => {};
};
interface Item {
key: string;
name: string;
age: string;
address: string;
}
interface EditableCellProps {
rowIndex: number;
title: React.ReactNode;
editable: boolean;
children: React.ReactNode;
dataIndex: keyof Item;
record: Item;
handleSave: (record: Item) => void;
}
interface EditableRowProps {
index: number;
}
type EditableTableProps = Parameters<typeof Table>[0];
type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
import { InputNumber, Button, Form, Table } from 'antd';
import React, { useContext, createContext, useEffect, useState, forwardRef, useImperativeHandle } from 'react';
import { ServiceContext } from '../context';
const EditableContext = createContext(null);
const EditableRow= ({ index, ...props }) => {
// console.log('==========> index', props);
// const [form] = Form.useForm();
// console.log('==========>props', props)
......@@ -55,7 +18,7 @@ const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
};
const EditableCell: React.FC<EditableCellProps> = (props) => {
const EditableCell = (props) => {
const {
rowIndex,
title,
......@@ -66,6 +29,7 @@ const EditableCell: React.FC<EditableCellProps> = (props) => {
handleSave,
...restProps
} = props;
const form = useContext(EditableContext)!;
const save = async () => {
try {
......@@ -77,15 +41,12 @@ const EditableCell: React.FC<EditableCellProps> = (props) => {
};
let childNode = children;
// if (editable) {
childNode = <Form.Item
style={{ margin: 0 }}
name={['tableList', rowIndex, dataIndex]}
// initialValue={record[dataIndex]}
rules={[{ required: true, message: `${title} is required.` }]}>
{editable ?<InputNumber onBlur={save} /> : children[1]}
{editable ? <InputNumber onBlur={save} /> : children[1]}
</Form.Item>
// }
return <td {...restProps}>{childNode}</td>;
};
......@@ -93,17 +54,14 @@ const EditableCell: React.FC<EditableCellProps> = (props) => {
const EditFormTable = forwardRef((props: PropType, ref) => {
const EditFormTable = forwardRef((props, ref) => {
const { initData, defaultColumns, setTableData } = props;
// console.log(initData);
const [dataSource, setDataSource] = useState<DataType[]>([]);
const { initData, defaultColumns, setTableData, mergeTable } = props;
const customer = useContext(ServiceContext);
const [dataSource, setDataSource] = useState([]);
const [form] = Form.useForm();
useEffect(() => {
console.log('==============>坚听initData', initData);
form.setFieldsValue({
tableList: initData,
});
......@@ -119,15 +77,7 @@ const EditFormTable = forwardRef((props: PropType, ref) => {
}
};
const handleSave = (row: DataType[]) => {
// console.log('============>row', row);
// const newData = [...dataSource];
// const index = newData.findIndex(item => row.key === item.key);
// const item = newData[index];
// newData.splice(index, 1, {
// ...item,
// ...row,
// });
const handleSave = (row) => {
setTableData([...row]);
};
......@@ -148,19 +98,18 @@ const EditFormTable = forwardRef((props: PropType, ref) => {
// 根据这里做判断渲染表格
const columns = defaultColumns.map((col, colIndex) => {
// if (!col.editable) {
// return col;
// }
const columns = defaultColumns
.filter(item => {
// console.log('===============>column', item);
return !item.role || item.role.includes(customer.productType);
})
.map((col, colIndex) => {
return {
...col,
onCell: (record: DataType, rowIndex: number) => {
onCell: (record, rowIndex) => {
let rowSpan = null;
if (col.dataIndex === 'firstSpecValue') {
// console.log(record, rowSpan);
rowSpan = record.rowSpanCount ? record.rowSpanCount : 0;
if (col.dataIndex === 'firstSpecValue' && mergeTable) {
rowSpan = record.rowSpanCount || 0;
}
return ({
......@@ -192,7 +141,7 @@ const EditFormTable = forwardRef((props: PropType, ref) => {
bordered
dataSource={dataSource}
rowKey={(row, rowInd) => rowInd}
columns={columns as ColumnTypes}
columns={columns}
/>
</EditableContext.Provider>
<Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>Add a row</Button>
......
src/pages/ServiceGoods/components/FormInformationBasic.tsx → src/pages/ServiceGoods/components/FormInformationBasic.jsx
View file @ 8869885b
import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import React, { useContext, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Cascader, Form, Input, Select } from 'antd';
import { useParams } from 'react-router-dom';
import { DefaultOptionType } from 'antd/lib/select';
import { formItemLayout } from '../config';
import { ServiceContext } from '../context';
interface CategoryItem {
id: number;
level: number;
name: string;
parentId: number;
children?: CategoryItem[];
}
interface BrandItem {
id: number;
name: string;
chineseName?: string;
chinesePinyin?: string;
englishName?: string;
firstLetter?: string;
horizontalLogo?: string;
logo?: string;
priority?: string;
}
interface PropsType {
editData: any;
categoryList: Array<CategoryItem>;
brandList: BrandItem[];
}
const categoryIdArrayList = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
];
const formItemLayout = {
labelCol: {
sm: { span: 3 },
},
wrapperCol: {
sm: { span: 16 },
},
};
const CreateSelectOption = (optionList: BrandItem[]) =>
optionList.map((brandItem: BrandItem) => (
const CreateSelectOption = optionList =>
optionList.map(brandItem => (
<Select.Option key={brandItem.id} value={brandItem.id}>
{brandItem.name}
</Select.Option>
));
const fileterBrandOptions = (
input: string,
options: { key: string; value: number; children: string },
input,
options,
) => options.children.includes(input);
const filterCategoryOptions = (inputValue: string, path: DefaultOptionType[]) =>
const filterCategoryOptions = (inputValue, path) =>
path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
const FormInformationBasic = forwardRef((props: PropsType, ref) => {
const FormInformationBasic = forwardRef((props, ref) => {
const { editData, categoryList, brandList } = props;
const [form] = Form.useForm();
......@@ -102,23 +33,28 @@ const FormInformationBasic = forwardRef((props: PropsType, ref) => {
useImperativeHandle(ref, () => ({
onCheck,
reset: form.resetFields,
}));
const { id } = useParams<any>();
const customer = useContext(ServiceContext);
useEffect(() => {
if (+id !== 0) {
if (customer.isEdit) {
if (!Object.keys(editData).length) return;
const { serviceItem } = editData.skuList[0];
form.setFieldsValue({
const initValues = {
brandId: editData.brandId,
supplierId: editData.supplierId,
name: editData.name,
categoryId: [editData.firstCategoryId, editData.secondCategoryId, editData.thirdCategoryId],
description: serviceItem.description,
});
description: null,
};
if (customer.isCard) {
const { serviceItem } = editData.skuList[0];
initValues.description = (serviceItem || {}).description || null;
}
form.setFieldsValue(initValues);
}
}, [id, editData]);
}, [customer.isEdit, editData]);
const onFinish = (values: any) => {
const onFinish = values => {
console.log('Received values of form: ', values);
};
......@@ -166,13 +102,13 @@ const FormInformationBasic = forwardRef((props: PropsType, ref) => {
/>
</Form.Item>
<Form.Item
{customer.isCard ? <Form.Item
name="description"
label="描述"
rules={[{ required: true, message: '请输入描述！' }]}
>
<Input.TextArea showCount maxLength={100} placeholder="请输入描述！" />
</Form.Item>
</Form.Item> : null}
</Form>
);
});
......
src/pages/ServiceGoods/components/FormPriceOrStock.tsx → src/pages/ServiceGoods/components/FormPriceOrStock.jsx
View file @ 8869885b
import { ConsoleSqlOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, Select, Space, Modal, InputNumber, notification } from 'antd';
import React, { useState, forwardRef, useImperativeHandle, useRef, useEffect, useContext } from 'react';
import { useParams } from 'react-router-dom';
import { formItemLayout, StaticColumns } from '../config';
import EditFormTable from './EditFormTable';
import { createProductData, cleanArray } from '../utils';
import { ServiceContext } from '../context';
import { ColumnTypes } from '../type';
const { Option } = Select;
interface SpecItem {
specId: number;
specName: string;
}
interface PropsType {
editData: any;
specList: Array<SpecItem>;
}
const validatorSpecValue = (value, list, index, specName) => {
const checkList = list.filter((item, ind) => {
if (ind === index) {
......@@ -49,11 +35,14 @@ const SpecificationTemplate = (props, _) => {
// onChange();
};
const inputOnblurEvent = () => {
// onChange();
const inputOnblurEvent = event => {
console.log(event.target.value);
if (event.target.value) {
onChange();
}
}
const bundlePlusAddSpecEvent = (addCallback: () => void) => {
const bundlePlusAddSpecEvent = addCallback => {
console.log(name);
const specId = form.getFieldValue(name);
if (!specId) {
......@@ -64,12 +53,12 @@ const SpecificationTemplate = (props, _) => {
return;
}
addCallback();
// inputOnblurEvent();
onChange();
};
const bundlePlusRemoveSpecEvent = (removeCallback, fieldName) => {
removeCallback(fieldName)
// inputOnblurEvent();
onChange();
}
return (
......@@ -153,7 +142,7 @@ const originItems = {
// 编辑回显示时只获取用到的数据
const filterItem = skuItem => {
const { imageList, serviceItem, ...argsItem } = skuItem;
const { serviceItem, ...argsItem } = skuItem;
argsItem.disabled = true;
return argsItem;
};
......@@ -186,27 +175,16 @@ const CreateBatchFormItems = ({ batchChange, editRef, defaultColumns }) => {
<InputNumber placeholder={item.title} />
</Form.Item>
));
console.log(formItems.length);
// const batchEvent = () => {
// const batchItem = form.getFieldValue('batchItem');
// console.log(batchItem);
// // editRef.current.form.setFieldsValue({
// // });
// }
return <>
{formItems.length && <Space style={{ marginBottom: 20 }}>
{formItems.length ? <Space style={{ marginBottom: 20 }}>
{formItems.concat(<Button key="batch" type="primary" onClick={batchChange}>批量设置</Button>)}
</Space>}
</Space> : null }
</>;
};
const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
const { specList, editData } = props;
const FormPriceOrStock = forwardRef((props, ref) => {
const { specList, editData, onSpecChange } = props;
const editRef = useRef(null);
const customer = useContext(ServiceContext);
const [form] = Form.useForm();
......@@ -221,6 +199,7 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
const [defaultColumns, setDefaultColumns] = useState([]);
const [tableData, setTableData] = useState([]);
const [mergeTable, setMergeTable] = useState(false);
const onCheck = async () => {
try {
......@@ -237,7 +216,6 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
columsData.push({
title: specData.firstSpec,
dataIndex: 'firstSpecValue',
role: [],
});
}
......@@ -245,15 +223,10 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
columsData.push({
title: specData.secondSpec,
dataIndex: 'secondSpecValue',
role: [],
});
}
if (!columsData.length) {
return;
}
const dynamicColumns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[] = [
const dynamicColumns = [
...columsData,
...StaticColumns,
];
......@@ -264,7 +237,6 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
try {
const values = await form.validateFields();
CreateColumnsEvent(values);
const cleanValues = {
firstValues: cleanArray(values.firstSpecValue),
secondValues: cleanArray(values.secondSpecValue),
......@@ -272,12 +244,20 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
secondSpecId: values.secondSpecId,
};
const newData = createProductData(cleanValues);
setMergeTable(Boolean(cleanValues.secondValues.length));
setTableData(newData);
} catch (error) {
console.log(error);
}
};
const firstOnChangeEvent = () => {
const firstSpecValue = form.getFieldValue('firstSpecValue');
const firstSpecValueList = cleanArray(firstSpecValue).map(item => item.firstSpecValue);
onSpecChange(firstSpecValueList);
}
const batchChange = () => {
const batchItem = form.getFieldValue('batchItem')
const batchItemKey = Object.keys(batchItem);
......@@ -298,8 +278,9 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
useImperativeHandle(ref, () => ({
onCheck,
reset: form.resetFields,
}));
const { id } = useParams<any>();
useEffect(() => {
if (customer.isEdit) {
if (!Object.keys(editData).length) return;
......@@ -317,6 +298,7 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
};
form.setFieldsValue(specData); // 设置规格数据
setSpecInitValue(specData); // 缓存规格数据
firstOnChangeEvent(); // 触发成底部动态表格数据
onFinish(); // 触发生成表格
}
}, [customer.isEdit, editData]);
......@@ -332,9 +314,9 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
>
<SpecificationTemplate
form={form}
onChange={onFinish}
label="一级规格"
name="firstSpecId"
onChange={firstOnChangeEvent}
selectName="firstSpec"
specName="firstSpecValue"
specList={specList}
......@@ -342,7 +324,6 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
/>
<SpecificationTemplate
form={form}
onChange={onFinish}
label="二级规格"
name="secondSpecId"
selectName="secondSpec"
......@@ -355,8 +336,18 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
生成商品信息
</Button>
</div>
<CreateBatchFormItems batchChange={batchChange} editRef={editRef} defaultColumns={defaultColumns} />
<EditFormTable ref={editRef} defaultColumns={defaultColumns} setTableData={setTableData} initData={tableData} />
<CreateBatchFormItems
batchChange={batchChange}
editRef={editRef}
defaultColumns={defaultColumns}
/>
<EditFormTable
ref={editRef}
mergeTable={mergeTable}
setTableData={setTableData}
defaultColumns={defaultColumns}
initData={tableData}
/>
</Form>
);
});
......
src/pages/ServiceGoods/components/FormRuleSetting.tsx → src/pages/ServiceGoods/components/FormRuleSetting.jsx
View file @ 8869885b
import { Form, Input, Select, Checkbox, DatePicker, Radio, InputNumber } from 'antd';
import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Form, Input, Select, Checkbox, DatePicker } from 'antd';
import React, { useState, useEffect, forwardRef, useImperativeHandle, useContext } from 'react';
import moment from 'moment';
import { useParams } from 'react-router-dom';
import UploadImage from './UploadImage';
import { WeeksList } from '../config';
import { WeeksList, formItemLayout } from '../config';
import { ServiceContext } from '../context';
const { Option } = Select;
const { RangePicker } = DatePicker;
const formItemLayout = {
labelCol: {
sm: { span: 3 },
},
wrapperCol: {
sm: { span: 16 },
},
};
const WeekCheckBox = () =>
WeeksList.map(item => (
......@@ -31,19 +22,15 @@ const rangeConfig = {
rules: [{ type: 'array', required: true, message: 'Please select time!' }],
};
const FormRuleSetting = forwardRef((props: { editData: any }, ref) => {
const [form] = Form.useForm();
const FormRuleSetting = forwardRef((props, ref) => {
const { editData } = props;
const url = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
const { id } = useParams<any>();
const [form] = Form.useForm();
const customer = useContext(ServiceContext);
const [imageList, setImageList] = useState([]);
const [commonImageList, setCommonImageList] = useState([]);
const [detailImageList, setDetailImageList] = useState([]);
useEffect(() => {
if (+id !== 0) {
console.log();
if (customer.isEdit) {
if (!Object.keys(editData).length) return;
setImageList(editData.commonImageList);
setCommonImageList(editData.commonImageList);
......@@ -62,15 +49,9 @@ const FormRuleSetting = forwardRef((props: { editData: any }, ref) => {
ruleDescription: serviceItem.ruleDescription, // 规则说明
applyScope: serviceItem.applyScope, // 适用范围
tips: serviceItem.tips, // 温馨提示
imageList: editData.commonImageList,
commonImageList: editData.commonImageList,
detailImageList: editData.detailImageList,
appointment: serviceItem.appointment, // 预约
receptionVolume: serviceItem.receptionVolume, // 接待数量
});
}
}, [id, editData]);
}, [customer.isEdit, editData]);
const onCheck = async () => {
try {
......@@ -90,9 +71,10 @@ const FormRuleSetting = forwardRef((props: { editData: any }, ref) => {
useImperativeHandle(ref, () => ({
onCheck,
reset: form.resetFields,
}));
const onFinish = (values: any) => {
const onFinish = values => {
console.log('Received values of form: ', values);
};
return (
......@@ -119,8 +101,6 @@ const FormRuleSetting = forwardRef((props: { editData: any }, ref) => {
commonImageList,
detailImageList,
appointment: null, // 预约
receptionVolume: null,
}}
scrollToFirstError
>
......@@ -196,65 +176,6 @@ const FormRuleSetting = forwardRef((props: { editData: any }, ref) => {
placeholder="请输入温馨提示，200字以内 例如：全场通用例如：\n不兑零"
/>
</Form.Item>
<Form.Item
label="封面图片"
name="commonImageList"
extra={`建议尺寸: ##宽##高 (${commonImageList.length} / 1) `}
rules={[
{ required: true, type: 'array', message: '请输入温馨提示', validateTrigger: 'submit' },
]}
>
<UploadImage
name="commonImageList"
limit={1}
pictures={commonImageList}
setPictureList={setCommonImageList}
/>
</Form.Item>
<Form.Item
label="商品图片"
name="imageList"
extra={`建议尺寸: ##宽##高 (${imageList.length} / 11) `}
rules={[
{ required: true, type: 'array', message: '请输入温馨提示', validateTrigger: 'submit' },
]}
>
<UploadImage
name="imageList"
limit={11}
pictures={imageList}
setPictureList={setImageList}
/>
</Form.Item>
<Form.Item
label="商品详情图"
name="detailImageList"
extra={`最多上传30张，${detailImageList.length} / 30`}
rules={[
{ required: true, type: 'array', message: '请输入温馨提示', validateTrigger: 'submit' },
]}
>
<UploadImage
name="detailImageList"
limit={4}
pictures={detailImageList}
setPictureList={setDetailImageList}
/>
</Form.Item>
<Form.Item name="appointment" label="预约">
<Radio.Group>
<Radio value={1}>是</Radio>
<Radio value={0}>否</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
name="receptionVolume"
label="每日最低接待量"
rules={[{ required: true, message: '每日最低接待量' }]}
>
<InputNumber min={0} style={{ width: 200 }} placeholder="请输入每日最低接待量" />
</Form.Item>
</Form>
</>
);
......
src/pages/ServiceGoods/components/FormRuleVPictures.jsx 0 → 100644
View file @ 8869885b
import React, { useState, useEffect, useContext, forwardRef, useImperativeHandle } from 'react';
import { Form } from 'antd';
import { ServiceContext } from '../context';
import UploadImage from './UploadImage';
import { formItemLayout } from '../config';
const FormRuleVPictures = forwardRef((props, ref) => {
const { editData, specKeyItem } = props;
const [form] = Form.useForm();
const [imageList, setImageList] = useState({});
const [commonImageList, setCommonImageList] = useState([]);
const [detailImageList, setDetailImageList] = useState([]);
const customer = useContext(ServiceContext);
useEffect(() => {
if (customer.isEdit) {
console.log('==============>图片', editData)
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,
});
}
}, [customer.isEdit, editData]);
useEffect(() => {
const newImageList = specKeyItem.reduce((origin, item) => {
const showItem = imageList[item] || [];
origin[item] = showItem;
return origin;
}, {});
setImageList(newImageList);
}, [specKeyItem])
const onCheck = async () => {
try {
const values = await form.validateFields();
console.log(values)
return values;
} catch (errorInfo) {
return null;
}
};
useImperativeHandle(ref, () => ({
onCheck,
reset: form.resetFields,
}));
const onFinish = values => {
console.log('Received values of form: ', values);
};
const onPictureSuccessEvent = (imgList, key) => {
setImageList({
...imageList,
[key]: imgList,
});
}
return (
<>
<Form
{...formItemLayout}
form={form}
name="register"
onFinish={onFinish}
initialValues={{
imageList,
commonImageList,
detailImageList,
}}
scrollToFirstError
>
<Form.Item
label="封面图片"
name="commonImageList"
extra={`建议尺寸: ##宽##高 (${commonImageList.length} / 1) `}
rules={[
{ required: true, type: 'array', message: '请输入温馨提示', validateTrigger: 'submit' },
]}
>
<UploadImage
name="commonImageList"
limit={1}
pictures={commonImageList}
setPictureList={setCommonImageList}
/>
</Form.Item>
{Object.keys(imageList).map(key =>
<Form.Item
key={key}
label={`商品图片(${key})`}
name={['imageList', key]}
extra={`建议尺寸: ##宽##高 (${imageList[key].length} / 11) `}
rules={[
{ required: true, type: 'array', message: '请输入温馨提示', validateTrigger: 'submit' },
]}
>
<UploadImage
name={key}
limit={11}
pictures={imageList[key]}
setPictureList={list => onPictureSuccessEvent(list, key)}
/>
</Form.Item>)}
<Form.Item
label="商品详情图"
name="detailImageList"
extra={`最多上传30张，${detailImageList.length} / 30`}
rules={[
{ required: true, type: 'array', message: '请输入温馨提示', validateTrigger: 'submit' },
]}
>
<UploadImage
name="detailImageList"
limit={4}
pictures={detailImageList}
setPictureList={setDetailImageList}
/>
</Form.Item>
</Form>
</>
);
});
export default FormRuleVPictures;
src/pages/ServiceGoods/components/FormSettlementOthers.tsx → src/pages/ServiceGoods/components/FormSettlementOthers.jsx
View file @ 8869885b
import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Form, Input, Select, Checkbox, Radio, Space, InputNumber, Switch } from 'antd';
import { useParams } from 'react-router-dom';
import React, { useContext, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Form, Input, Select, Checkbox, Radio, Space, InputNumber } from 'antd';
import { Title } from './CommonTemplate';
import { formItemLayout } from '../config';
import { ServiceContext } from '../context';
interface PropsType {
editData: any;
}
const FormSettlementOthers = forwardRef((props: PropsType, ref) => {
const FormSettlementOthers = forwardRef((props, ref) => {
const { editData } = props;
const [form] = Form.useForm();
......@@ -26,8 +22,9 @@ const FormSettlementOthers = forwardRef((props: PropsType, ref) => {
useImperativeHandle(ref, () => ({
onCheck,
reset: form.resetFields,
}));
const { id } = useParams<any>();
const customer = useContext(ServiceContext);
const [initValue, setInitValue] = useState({
settlementMethod: 1,
limitPurchase: null, // 是否限购1:限购/0:不限购
......@@ -35,10 +32,13 @@ const FormSettlementOthers = forwardRef((props: PropsType, ref) => {
limitPurchaseCycle: null, // 限购周期1：每天/7：7天/30：30天
limitPurchaseQuantity: null, // 限购数量
packageContent: '',
appointment: null, // 预约
receptionVolume: null,
});
useEffect(() => {
if (+id !== 0) {
if (customer.isEdit) {
if (!Object.keys(editData).length) return;
const { serviceItem } = editData.skuList[0];
......@@ -49,20 +49,22 @@ const FormSettlementOthers = forwardRef((props: PropsType, ref) => {
limitPurchaseCycle: serviceItem.limitPurchaseCycle, // 限购周期1：每天/7：7天/30：30天
limitPurchaseQuantity: serviceItem.limitPurchaseQuantity, // 限购数量
packageContent: serviceItem.packageContent,
appointment: serviceItem.appointment, // 预约
receptionVolume: serviceItem.receptionVolume, // 接待数量
};
form.setFieldsValue(data);
setInitValue({ ...data });
}
}, [id, editData]);
}, [customer.isEdit, editData]);
useEffect(() => {}, [form]);
const onFinish = (values: any) => {
const onFinish = values => {
console.log('Received values of form: ', values);
};
const radioChangeEvent = (key: string) => {
const radioChangeEvent = key => {
const value = form.getFieldValue(key);
setInitValue({
...initValue,
......@@ -71,7 +73,7 @@ const FormSettlementOthers = forwardRef((props: PropsType, ref) => {
};
const AuditLimitPurchaseType = () => {
const limitPurchaseType: number = form.getFieldValue('limitPurchaseType');
const limitPurchaseType = form.getFieldValue('limitPurchaseType');
if (limitPurchaseType === 1) {
return null;
}
......@@ -133,6 +135,19 @@ const FormSettlementOthers = forwardRef((props: PropsType, ref) => {
initialValues={initValue}
scrollToFirstError
>
<Form.Item name="appointment" label="预约">
<Radio.Group>
<Radio value={1}>是</Radio>
<Radio value={0}>否</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
name="receptionVolume"
label="每日最低接待量"
rules={[{ required: true, message: '每日最低接待量' }]}
>
<InputNumber min={0} style={{ width: 200 }} placeholder="请输入每日最低接待量" />
</Form.Item>
<Title title="结算信息" />
<Form.Item
name="packageContent"
......@@ -155,7 +170,6 @@ const FormSettlementOthers = forwardRef((props: PropsType, ref) => {
<Checkbox onChange={() => radioChangeEvent('limitPurchase')}>
<b style={{ marginLeft: 10 }}>启用限购</b>
<span style={{ marginLeft: 10 }} className="ant-form-text">
{' '}
限制每人可购买数量
</span>
</Checkbox>
......
src/pages/ServiceGoods/components/TaskTypeSelect.jsx 0 → 100644
View file @ 8869885b
import React, { useContext } from 'react';
import { TaskList } from '../config';
import { ServiceContext } from '../context';
import commonStyle from '../common.less';
export const TaskTypeSelect = props => {
const customer = useContext(ServiceContext);
const selectTabs = task => {
if (!customer.isEdit) {
props.onChange(task);
}
}
return (
<div className={commonStyle.prodcutContent}>
{TaskList.map(task => {
const activeClassName = props.productType === task.type ? commonStyle.activeCard : '';
return (
<dl
key={task.type}
onClick={() => selectTabs(task)}
className={`${commonStyle.productCard} ${activeClassName}`}
>
<dd className="prodcut-name">{task.name}</dd>
<dd className="prodcut-desc">({task.desc})</dd>
</dl>
);
})}
</div>
);
}
src/pages/ServiceGoods/components/TaskTypeSelect.tsx deleted 100644 → 0
View file @ f10cff00
import React from 'react';
import { TaskList } from '../config';
import { Task } from '../type';
import commonStyle from '../common.less';
export const TaskTypeSelect = (props: { productType: number; onChange: (task: Task) => void }) => (
<div className={commonStyle.prodcutContent}>
{TaskList.map((task: Task) => {
const activeClassName: string = props.productType === task.type ? commonStyle.activeCard : '';
return (
<dl
key={task.type}
onClick={() => props.onChange(task)}
className={`${commonStyle.productCard} ${activeClassName}`}
>
<dd className="prodcut-name">{task.name}</dd>
<dd className="prodcut-desc">({task.desc})</dd>
</dl>
);
})}
</div>
);
src/pages/ServiceGoods/components/UploadImage.tsx → src/pages/ServiceGoods/components/UploadImage.jsx
View file @ 8869885b
import { PlusOutlined } from '@ant-design/icons';
import { Modal, Upload, notification, Spin } from 'antd';
import type { UploadProps } from 'antd/es/upload';
import type { UploadFile } from 'antd/es/upload/interface';
import React, { useState, useEffect, useRef } from 'react';
import lodash from 'lodash';
import { merchantUpload } from '../service';
type PicturesType = {
name?: string;
limit?: number;
uploadParams?: UploadProps;
pictures?: Array<string>;
onChange?: (path: string[]) => void;
setPictureList?: (item: string[]) => void
};
const MAX_FILE_SIZE = 5;
const UNIT = 1024 * 1024;
......@@ -33,7 +22,7 @@ const uploadButton = (
</div>
);
const UploadImage: React.FC<PicturesType> = props => {
const UploadImage = props => {
const {
name = `${Date.now()}`,
limit = 1,
......@@ -46,11 +35,11 @@ const UploadImage: React.FC<PicturesType> = props => {
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState('');
const [previewTitle, setPreviewTitle] = useState('');
const [fileList, setFileList] = useState<UploadFile[]>([]);
const [fileList, setFileList] = useState([]);
const fileListRef = useRef([]);
useEffect(() => {
const newPictures = pictures.map((url: string, ind: number) => ({
const newPictures = pictures.map((url, ind) => ({
url,
name: url,
uid: `${ind}`,
......@@ -61,7 +50,7 @@ const UploadImage: React.FC<PicturesType> = props => {
const handleCancel = () => setPreviewVisible(false);
const handlePreview = async (file: UploadFile) => {
const handlePreview = async file => {
setPreviewImage(file.url);
setPreviewVisible(true);
setPreviewTitle(file.name || (file.url).substring(file.url.lastIndexOf('/') + 1));
......@@ -116,9 +105,7 @@ const UploadImage: React.FC<PicturesType> = props => {
// }
// };
const checkFile = file => {
console.log(file);
return new Promise(resolve => {
const checkFile = file => new Promise(resolve => {
const curType = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase();
const fileType = ['jpg', 'jpeg', 'png'];
if (!fileType.includes(curType)) {
......@@ -136,8 +123,7 @@ const UploadImage: React.FC<PicturesType> = props => {
return resolve(null);
}
return resolve(file);
});
}
})
const imageLoading = (file, ret) => new Promise(resolve => {
const reader = new FileReader();
......
src/pages/ServiceGoods/config.ts → src/pages/ServiceGoods/config.js
View file @ 8869885b
......@@ -75,7 +75,7 @@ export const StaticColumns = [
title: '佣金费率',
dataIndex: 'commissionRate',
editable: true,
role: [],
role: [3],
},
{
title: '市场价',
......@@ -91,6 +91,13 @@ export const StaticColumns = [
title: '库存',
dataIndex: 'stock',
editable: true,
role: [3],
},
{
title: '库存',
dataIndex: 'productStock',
editable: true,
role: [1, 2],
},
{
title: '库存预警阈值',
......@@ -98,4 +105,18 @@ export const StaticColumns = [
editable: true,
role: [],
},
{
title: '商品自编码',
dataIndex: 'thirdSkuNo',
editable: true,
role: [1, 2],
inputType: 'text',
},
{
title: '京东链接',
dataIndex: 'skuLink',
editable: true,
role: [1, 2],
inputType: 'text',
},
];
src/pages/ServiceGoods/index.tsx → src/pages/ServiceGoods/index.jsx
View file @ 8869885b
import React, { useState, useRef, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Spin, Button } from 'antd';
import React, { useState, useRef, useEffect, useCallback } from 'react';
import { Spin, Button, Modal } from 'antd';
import { Title, WrapperContainer } from './components/CommonTemplate';
import { TaskTypeSelect } from './components/TaskTypeSelect';
import { Task } from './type';
import FormInformationBasic from './components/FormInformationBasic';
import FormPriceOrStock from './components/FormPriceOrStock';
import FormRuleSetting from './components/FormRuleSetting';
import FormRuleVPictures from './components/FormRuleVPictures';
import FormSettlementOthers from './components/FormSettlementOthers';
import commonStyle from './common.less';
import {
getProductDetail,
merchantCategoryGetAll,
......@@ -23,13 +21,13 @@ import { ServiceContext } from './context';
* @returns ReactDOM
*/
const ServiceGoods = options => {
const pageId = +options.match.params.id; // pageId: 0-新增，1-修改，2-查看
const basicRef = useRef(null);
const stockRef = useRef(null);
const settingRef = useRef(null);
const picturesRef = useRef(null);
const settleOtrRef = useRef(null);
const [pageId, setPageId] = useState(null);
const [isEdit, setIsEdit] = useState(false); // 是否是编辑状态
const [productType, setProductType] = useState(1); // 商品状态
const [pageLoading, setPageLoading] = useState(false); // 页面加载状态
......@@ -37,25 +35,44 @@ const ServiceGoods = options => {
const [brandList, setBrandList] = useState([]); // 获取商品牌
const [specList, setSpecList] = useState([]); // 规格列表
const [editData, setEditData] = useState({}); // 编辑保存数据
const baseCheckList = [basicRef, stockRef, picturesRef];
const [checkFormList, setCheckFormList] = useState(baseCheckList);
const [specKeyList, setSpecKeyList] = useState([]); // 记录一级规格key字段
const changeCheckList = proType => {
const newBaseCheckList = proType === 3 ? [
...baseCheckList,
settingRef,
settleOtrRef,
] : baseCheckList;
setCheckFormList(newBaseCheckList);
}
useEffect(() => {
const timer = setTimeout(() => {
checkFormList.forEach(({ current }) => {
current.reset()
});
clearTimeout(timer);
});
}, [checkFormList])
const productChange = (task: Task): void => {
const productChange = task => {
setProductType(task.type);
changeCheckList(task.type);
};
const submitEvent = async () => {
const resuslt = await Promise.all([
basicRef.current.onCheck(),
stockRef.current.onCheck(),
settingRef.current.onCheck(),
settleOtrRef.current.onCheck(),
]);
const checkPromiseList = checkFormList.map(({ current }) => current.onCheck());
const resuslt = await Promise.all(checkPromiseList);
console.log(resuslt);
};
// 编辑回显详情数据
const getProductDetailResponse = async () => {
const getProductDetailResponse = async id => {
try {
const res = await getProductDetail(pageId);
const res = await getProductDetail(id);
if (res && res.data) {
setProductType(res.data.type);
setEditData(res.data);
......@@ -83,23 +100,41 @@ const ServiceGoods = options => {
useEffect(() => {
(async () => {
if (!options.visible) {
return;
}
setPageId(options.id);
setPageLoading(true);
// await getMerchantCategory();
// await getMerchantBrandList();
await getMerchantCategory();
await getMerchantBrandList();
await getMerchantSpecList();
if (pageId !== 0) {
if (options.id) {
setIsEdit(true);
await getProductDetailResponse();
await getProductDetailResponse(options.id);
changeCheckList(productType);
}
setPageLoading(false);
})();
}, [pageId]);
}, [options.visible, options.id]);
const handleOk = () => {
}
const handleCancel = () => {
options.onChange(false);
}
const onSpecCommonImgEvent = useCallback(keys => {
setSpecKeyList(keys);
}, [specKeyList])
return (
<Spin tip="正在加载..." spinning={pageLoading} delay={100}>
<PageHeaderWrapper className={commonStyle.header}>
<Modal visible={options.visible} onOk={handleOk} onCancel={handleCancel} width={1366}>
<Spin tip="正在加载..." spinning={pageLoading} delay={100}>
<WrapperContainer>
<ServiceContext.Provider value={{ pageId, isEdit, productType }}>
<ServiceContext.Provider value={{ pageId, isEdit, productType, isCard: productType === 3 }}>
<Title title="商品类型" />
<TaskTypeSelect productType={productType} onChange={productChange} />
......@@ -112,19 +147,20 @@ const ServiceGoods = options => {
/>
<Title title="价格与库存" />
<FormPriceOrStock ref={stockRef} specList={specList} editData={editData} />
<FormPriceOrStock ref={stockRef} specList={specList} onSpecChange={onSpecCommonImgEvent} editData={editData} />
<Title title="规则设置" />
<FormRuleSetting ref={settingRef} editData={editData} />
{productType === 3 && <FormRuleSetting ref={settingRef} editData={editData} />}
<FormSettlementOthers ref={settleOtrRef} editData={editData} />
<FormRuleVPictures ref={picturesRef} specKeyItem={specKeyList} editData={editData} />
{productType === 3 && <FormSettlementOthers ref={settleOtrRef} editData={editData} />}
<Button type="primary" onClick={submitEvent}>
Register
</Button>
</ServiceContext.Provider>
</WrapperContainer>
</PageHeaderWrapper>
</Spin>
</Spin>
</Modal>
);
};
......
src/pages/ServiceGoods/service.js
View file @ 8869885b
......@@ -4,6 +4,9 @@ import { stringify } from 'qs';
import _ from 'lodash';
const { goodsApi, kdspApi } = config;
const headers = {
'Content-Type': 'application/x-www-form-urlencoded',
};
export const merchantUpload = async files => {
const params = new FormData();
......@@ -16,9 +19,10 @@ export const merchantUpload = async files => {
};
export const getProductDetail = id =>
request.post('/mock/389/product/detail', {
prefix: 'http://yapi.quantgroups.com',
data: { id },
request.post('/product/api/merchant/detail', {
prefix: goodsApi,
params: { id },
headers,
});
export const merchantCategoryGetAll = () =>
......
src/pages/ServiceGoods/utils.js
View file @ 8869885b
......@@ -57,7 +57,7 @@ const createSecondProduct = (secondSpecList, initItem, secondSpec, dataSource, c
};
export const createProductData = ({ firstValues, secondValues, firstSpecId, secondSpecId }) => {
console.log(firstValues, secondValues);
console.log('=============>firstValues, secondValues', firstValues, secondValues);
const countRowSpan = {};
const dataSource = [];
if (firstValues.length) {
......@@ -82,5 +82,6 @@ export const createProductData = ({ firstValues, secondValues, firstSpecId, seco
const specFirst = createInitProduct();
dataSource.push(specFirst);
}
console.log('dataSource===========>', dataSource);
return dataSource;
};
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