Skip to content

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

fix: TS

parent 8869885b
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 110 deletions
src/pages/GoodsManage/index.jsx
View file @ e95e3d78
......@@ -295,8 +295,8 @@ class goodsManage extends Component {
serviceVisbleChange = visble => {
this.setState({
serviceVisble: visble,
})
}
});
};
render() {
const {
......@@ -311,7 +311,9 @@ class goodsManage extends Component {
<PageHeaderWrapper>
<Spin spinning={this.state.createloading}>
<Card>
<Button type="primary" onClick={() => this.serviceVisbleChange(true)}>new 新增商品</Button>
<Button type="primary" onClick={() => this.serviceVisbleChange(true)}>
new 新增商品
</Button>
<SearchForm
handleSearch={this.handleSearch}
onReset={this.onReset}
......@@ -408,7 +410,11 @@ class goodsManage extends Component {
templateList={this.state.templateList}
/>
{/* '894048258062' */}
<ServiceGoods visible={this.state.serviceVisble} onChange={this.serviceVisbleChange} id={894048258062} />
<ServiceGoods
visible={this.state.serviceVisble}
onChange={this.serviceVisbleChange}
id={894048258062}
/>
</Spin>
</PageHeaderWrapper>
);
......
src/pages/ServiceGoods/components/FormInformationBasic.jsx
View file @ e95e3d78
......@@ -10,10 +10,7 @@ const CreateSelectOption = optionList =>
</Select.Option>
));
const fileterBrandOptions = (
input,
options,
) => options.children.includes(input);
const fileterBrandOptions = (input, options) => options.children.includes(input);
const filterCategoryOptions = (inputValue, path) =>
path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
......@@ -102,13 +99,15 @@ const FormInformationBasic = forwardRef((props, ref) => {
/>
</Form.Item>
{customer.isCard ? <Form.Item
name="description"
label="描述"
rules={[{ required: true, message: '请输入描述！' }]}
>
<Input.TextArea showCount maxLength={100} placeholder="请输入描述！" />
</Form.Item> : null}
{customer.isCard ? (
<Form.Item
name="description"
label="描述"
rules={[{ required: true, message: '请输入描述！' }]}
>
<Input.TextArea showCount maxLength={100} placeholder="请输入描述！" />
</Form.Item>
) : null}
</Form>
);
});
......
src/pages/ServiceGoods/components/FormPriceOrStock.jsx
View file @ e95e3d78
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 React, {
useState,
forwardRef,
useImperativeHandle,
useRef,
useEffect,
useContext,
} from 'react';
import { formItemLayout, StaticColumns } from '../config';
import EditFormTable from './EditFormTable';
import { createProductData, cleanArray } from '../utils';
......@@ -40,7 +47,7 @@ const SpecificationTemplate = (props, _) => {
if (event.target.value) {
onChange();
}
}
};
const bundlePlusAddSpecEvent = addCallback => {
console.log(name);
......@@ -57,9 +64,9 @@ const SpecificationTemplate = (props, _) => {
};
const bundlePlusRemoveSpecEvent = (removeCallback, fieldName) => {
removeCallback(fieldName)
removeCallback(fieldName);
onChange();
}
};
return (
<>
......@@ -108,7 +115,9 @@ const SpecificationTemplate = (props, _) => {
/>
</Form.Item>
{!(specDataList[index] && specDataList[index].id) && (
<MinusCircleOutlined onClick={() => bundlePlusRemoveSpecEvent(remove, field.name)} />
<MinusCircleOutlined
onClick={() => bundlePlusRemoveSpecEvent(remove, field.name)}
/>
)}
</Space>
)}
......@@ -139,7 +148,6 @@ const originItems = {
secondDuplicate: [],
};
// 编辑回显示时只获取用到的数据
const filterItem = skuItem => {
const { serviceItem, ...argsItem } = skuItem;
......@@ -171,18 +179,26 @@ const CreateBatchFormItems = ({ batchChange, editRef, defaultColumns }) => {
noStyle
key={item.dataIndex}
name={['batchItem', item.dataIndex]}
initialValue={null}>
initialValue={null}
>
<InputNumber placeholder={item.title} />
</Form.Item>
));
return <>
{formItems.length ? <Space style={{ marginBottom: 20 }}>
{formItems.concat(<Button key="batch" type="primary" onClick={batchChange}>批量设置</Button>)}
</Space> : null }
</>;
return (
<>
{formItems.length ? (
<Space style={{ marginBottom: 20 }}>
{formItems.concat(
<Button key="batch" type="primary" onClick={batchChange}>
批量设置
</Button>,
)}
</Space>
) : null}
</>
);
};
const FormPriceOrStock = forwardRef((props, ref) => {
const { specList, editData, onSpecChange } = props;
const editRef = useRef(null);
......@@ -226,12 +242,9 @@ const FormPriceOrStock = forwardRef((props, ref) => {
});
}
const dynamicColumns = [
...columsData,
...StaticColumns,
];
const dynamicColumns = [...columsData, ...StaticColumns];
setDefaultColumns(dynamicColumns);
}
};
const onFinish = async () => {
try {
......@@ -255,11 +268,10 @@ const FormPriceOrStock = forwardRef((props, ref) => {
const firstSpecValue = form.getFieldValue('firstSpecValue');
const firstSpecValueList = cleanArray(firstSpecValue).map(item => item.firstSpecValue);
onSpecChange(firstSpecValueList);
}
};
const batchChange = () => {
const batchItem = form.getFieldValue('batchItem')
const batchItem = form.getFieldValue('batchItem');
const batchItemKey = Object.keys(batchItem);
const resetObject = tableData.map((item, index) => {
console.log(item);
......@@ -273,8 +285,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
console.log(resetObject);
// editRef.current.form.setFieldsValue(resetObject);
// form.setFieldsValue(resetObject);
}
};
useImperativeHandle(ref, () => ({
onCheck,
......@@ -303,7 +314,6 @@ const FormPriceOrStock = forwardRef((props, ref) => {
}
}, [customer.isEdit, editData]);
return (
<Form
form={form}
......
src/pages/ServiceGoods/components/FormRuleSetting.jsx
View file @ e95e3d78
......@@ -7,7 +7,6 @@ import { ServiceContext } from '../context';
const { Option } = Select;
const { RangePicker } = DatePicker;
const WeekCheckBox = () =>
WeeksList.map(item => (
<Checkbox key={item.value} value={item.value} style={{ lineHeight: '32px' }}>
......@@ -100,7 +99,6 @@ const FormRuleSetting = forwardRef((props, ref) => {
imageList,
commonImageList,
detailImageList,
}}
scrollToFirstError
>
......
src/pages/ServiceGoods/components/FormRuleVPictures.jsx
View file @ e95e3d78
......@@ -13,7 +13,7 @@ const FormRuleVPictures = forwardRef((props, ref) => {
const customer = useContext(ServiceContext);
useEffect(() => {
if (customer.isEdit) {
console.log('==============>图片', editData)
console.log('==============>图片', editData);
if (!Object.keys(editData).length) return;
setCommonImageList(editData.commonImageList); // 编辑状态下设置公共图
setDetailImageList(editData.detailImageList); // 编辑状态下设置详情图
......@@ -41,13 +41,12 @@ const FormRuleVPictures = forwardRef((props, ref) => {
return origin;
}, {});
setImageList(newImageList);
}, [specKeyItem])
}, [specKeyItem]);
const onCheck = async () => {
try {
const values = await form.validateFields();
console.log(values)
console.log(values);
return values;
} catch (errorInfo) {
return null;
......@@ -67,7 +66,7 @@ const FormRuleVPictures = forwardRef((props, ref) => {
...imageList,
[key]: imgList,
});
}
};
return (
<>
<Form
......@@ -98,14 +97,19 @@ const FormRuleVPictures = forwardRef((props, ref) => {
/>
</Form.Item>
{Object.keys(imageList).map(key =>
{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' },
{
required: true,
type: 'array',
message: '请输入温馨提示',
validateTrigger: 'submit',
},
]}
>
<UploadImage
......@@ -114,7 +118,8 @@ const FormRuleVPictures = forwardRef((props, ref) => {
pictures={imageList[key]}
setPictureList={list => onPictureSuccessEvent(list, key)}
/>
</Form.Item>)}
</Form.Item>
))}
<Form.Item
label="商品详情图"
name="detailImageList"
......
src/pages/ServiceGoods/components/TaskTypeSelect.jsx
View file @ e95e3d78
......@@ -9,7 +9,7 @@ export const TaskTypeSelect = props => {
if (!customer.isEdit) {
props.onChange(task);
}
}
};
return (
<div className={commonStyle.prodcutContent}>
......@@ -28,4 +28,4 @@ export const TaskTypeSelect = props => {
})}
</div>
);
}
};
src/pages/ServiceGoods/components/UploadImage.jsx
View file @ e95e3d78
......@@ -46,14 +46,14 @@ const UploadImage = props => {
}));
fileListRef.current = [...newPictures];
setFileList([...newPictures]);
}, [pictures]);
}, [pictures]);
const handleCancel = () => setPreviewVisible(false);
const handlePreview = async file => {
setPreviewImage(file.url);
setPreviewVisible(true);
setPreviewTitle(file.name || (file.url).substring(file.url.lastIndexOf('/') + 1));
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
};
const bundleChange = imgFile => {
......@@ -65,7 +65,7 @@ const UploadImage = props => {
const handleRemove = file => {
const freshFiles = fileList?.filter(ele => ele.uid !== file.uid);
bundleChange(freshFiles);
}
};
// const saveFiles = (file, ret) => {
// return new Promise((resolve) => {
// const reader = new FileReader();
......@@ -105,7 +105,8 @@ const UploadImage = props => {
// }
// };
const checkFile = file => 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)) {
......@@ -123,12 +124,14 @@ const UploadImage = props => {
return resolve(null);
}
return resolve(file);
})
});
const imageLoading = (file, ret) => new Promise(resolve => {
const imageLoading = (file, ret) =>
new Promise(resolve => {
const reader = new FileReader();
// 监听图片转换完成
reader.addEventListener('load',
reader.addEventListener(
'load',
() => {
const temFile = { uid: file.uid, status: 'done', name: file.name, url: ret };
resolve(temFile);
......@@ -136,39 +139,42 @@ const UploadImage = props => {
false,
);
reader.readAsDataURL(file);
})
});
const defaultBeforeUpload = lodash.debounce((file, fileArray) =>
// 文件显示
new Promise(async () => {
if ((fileListRef.current.length + fileArray.length) > limit) {
Modal.warning({
maskClosable: true,
title: '超出上传个数',
});
return Upload.LIST_IGNORE;
}
const fileAll = fileArray.map(item => checkFile(item));
const checkFiles = (await Promise.all(fileAll)).filter(item => item !== null);
try {
if (checkFiles.length) {
setUploadLoading(true);
const res = await merchantUpload(checkFiles);
const proFiles = (res.data || []).map((urlItem, urlIndex) => imageLoading(checkFiles[urlIndex], urlItem));
const imagList = await Promise.all(proFiles);
const newFiles = [...fileListRef.current, ...imagList];
bundleChange(newFiles);
const defaultBeforeUpload = lodash.debounce(
(file, fileArray) =>
// 文件显示
new Promise(async () => {
if (fileListRef.current.length + fileArray.length > limit) {
Modal.warning({
maskClosable: true,
title: '超出上传个数',
});
return Upload.LIST_IGNORE;
}
const fileAll = fileArray.map(item => checkFile(item));
const checkFiles = (await Promise.all(fileAll)).filter(item => item !== null);
try {
if (checkFiles.length) {
setUploadLoading(true);
const res = await merchantUpload(checkFiles);
const proFiles = (res.data || []).map((urlItem, urlIndex) =>
imageLoading(checkFiles[urlIndex], urlItem),
);
const imagList = await Promise.all(proFiles);
const newFiles = [...fileListRef.current, ...imagList];
bundleChange(newFiles);
setUploadLoading(false);
}
} catch (error) {
setUploadLoading(false);
Modal.warning({
maskClosable: true,
title: '上传失败，请重新尝试！',
});
}
} catch (error) {
setUploadLoading(false);
Modal.warning({
maskClosable: true,
title: '上传失败，请重新尝试！',
});
}
return null;
}),
return null;
}),
);
return (
......
src/pages/ServiceGoods/index.jsx
View file @ e95e3d78
......@@ -41,22 +41,18 @@ const ServiceGoods = options => {
const [specKeyList, setSpecKeyList] = useState([]); // 记录一级规格key字段
const changeCheckList = proType => {
const newBaseCheckList = proType === 3 ? [
...baseCheckList,
settingRef,
settleOtrRef,
] : baseCheckList;
const newBaseCheckList =
proType === 3 ? [...baseCheckList, settingRef, settleOtrRef] : baseCheckList;
setCheckFormList(newBaseCheckList);
}
};
useEffect(() => {
const timer = setTimeout(() => {
checkFormList.forEach(({ current }) => {
current.reset()
current.reset();
});
clearTimeout(timer);
});
}, [checkFormList])
}, [checkFormList]);
const productChange = task => {
setProductType(task.type);
......@@ -117,24 +113,26 @@ const ServiceGoods = options => {
})();
}, [options.visible, options.id]);
const handleOk = () => {
}
const handleOk = () => {};
const handleCancel = () => {
options.onChange(false);
}
const onSpecCommonImgEvent = useCallback(keys => {
setSpecKeyList(keys);
}, [specKeyList])
};
const onSpecCommonImgEvent = useCallback(
keys => {
setSpecKeyList(keys);
},
[specKeyList],
);
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={{ pageId, isEdit, productType, isCard: productType === 3 }}
>
<Title title="商品类型" />
<TaskTypeSelect productType={productType} onChange={productChange} />
......@@ -147,7 +145,12 @@ const ServiceGoods = options => {
/>
<Title title="价格与库存" />
<FormPriceOrStock ref={stockRef} specList={specList} onSpecChange={onSpecCommonImgEvent} editData={editData} />
<FormPriceOrStock
ref={stockRef}
specList={specList}
onSpecChange={onSpecCommonImgEvent}
editData={editData}
/>
<Title title="规则设置" />
{productType === 3 && <FormRuleSetting ref={settingRef} editData={editData} />}
......
src/pages/ServiceGoods/service.js
View file @ e95e3d78
......@@ -37,6 +37,7 @@ export const merchantBrandList = () =>
});
// 获取规格列表
export const merchantSpecList = () => request.post('/product/spec/api/merchant/list', {
prefix: goodsApi,
});
export const merchantSpecList = () =>
request.post('/product/spec/api/merchant/list', {
prefix: goodsApi,
});
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