Skip to content

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

fix: 批量修改表格

parent dd1bd48b
Hide whitespace changes
Inline Side-by-side
Showing with 270 additions and 56 deletions
src/pages/ServiceGoods/components/CommonTemplate.tsx
View file @ 3c966ed7
import React from 'react';
import { Select, Form, InputNumber, Input, Button } from 'antd';
import { Select, Form, InputNumber, Input, Button, Popover } from 'antd';
import commonStyle from '../common.less';
export const WrapperContainer = props => (
......@@ -37,7 +37,11 @@ export const SelectTemplate = props => {
}
const selectTemp = (
<Select allowClear {...resetProps}>
{defaultOptionName ? <Select.Option value={0}>{defaultOptionName}</Select.Option> : null}
{defaultOptionName ? (
<Select.Option key="default" value={0}>
{defaultOptionName}
</Select.Option>
) : null}
{dataList.map((item, index) => {
const val = fieldNames ? item[fieldNames.value] : item;
const lab = fieldNames ? item[fieldNames.label] : item;
......@@ -64,6 +68,15 @@ export const CreateFormInput = props => {
if (type === 'input') {
return <Input placeholder={title} {...options} />;
}
if (type === 'btnText') {
return (
<Popover content={record.name} trigger="hover">
<Button type="text">查看名称</Button>
</Popover>
);
}
if (type === 'option') {
return (
<>
......
src/pages/ServiceGoods/components/EditFormTable.jsx
View file @ 3c966ed7
import { InputNumber, Button, Form, Table } from 'antd';
import { InputNumber, Input, Modal, Button, Form, Table } from 'antd';
import React, {
useContext,
createContext,
......@@ -10,8 +10,40 @@ import React, {
import { ServiceContext } from '../context';
import { CreateFormInput } from './CommonTemplate';
const EditableContext = createContext(null);
const UpdateSkuName = ({ skuVisble, value, confirmEvent, cancelEvent }) => {
const [skuForm] = Form.useForm();
const handleCancel = () => {
skuForm.resetFields();
cancelEvent();
};
const handleSaveEvent = async () => {
try {
const result = await skuForm.validateFields();
confirmEvent({ skuName: result.skuName, rowIndex: value.rowIndex });
handleCancel();
} catch (error) {
console.log(error);
}
};
return (
<Modal title="修改SKU名称" visible={skuVisble} onOk={handleSaveEvent} onCancel={handleCancel}>
<Form form={skuForm} name="skuRegister">
<Form.Item
label="sku名称"
key="skuName"
name="skuName"
initialValue={value.skuName}
rules={[{ required: true, message: '请输入sku名称！' }]}
>
<Input.TextArea autoSize={{ minRows: 2, maxRows: 6 }} allowClear />
</Form.Item>
</Form>
</Modal>
);
};
const EditableContext = createContext(null);
const EditableRow = ({ index, ...props }) => <tr {...props} />;
const EditableCell = props => {
const {
......@@ -23,11 +55,15 @@ const EditableCell = props => {
record,
roleProps,
handleSave,
roleHidden,
rowOnClickEvent,
roleRules = {},
...restProps
} = props;
// console.log('==============>', props);
const form = useContext(EditableContext);
const customer = useContext(ServiceContext);
const save = async () => {
try {
const tableList = form.getFieldValue('tableList');
......@@ -36,13 +72,27 @@ const EditableCell = props => {
console.log('Save failed:', errInfo);
}
};
const onClickEvent = () => {};
const onClickEvent = (type, row) => {
// 点击拉取京东图片功能
if (type === 'cloneImg') {
customer.onEventBus(type, row);
return;
}
// 修改sku名称
if (type === 'updateName') {
rowOnClickEvent(row);
}
// console.log(type, row);
};
const childNode = (
<Form.Item
style={{ margin: 0 }}
hidden={roleHidden}
name={['tableList', rowIndex, dataIndex]}
rules={[{ required: true, message: `${title} is required.` }]}
rules={[{ required: roleRules.required, message: `${title} is required.` }]}
>
{editable ? (
<CreateFormInput
......@@ -68,6 +118,11 @@ const EditFormTable = forwardRef((props, ref) => {
const { initData, defaultColumns, setTableData, mergeTable } = props;
const customer = useContext(ServiceContext);
const [dataSource, setDataSource] = useState([]);
const [skuVisble, setSkuVisble] = useState(false);
const [skuNameItem, setSkuNameItem] = useState({
skuName: '',
rowIndex: null,
});
const [form] = Form.useForm();
useEffect(() => {
console.log('==============>坚听initData', initData);
......@@ -99,6 +154,27 @@ const EditFormTable = forwardRef((props, ref) => {
}
};
const rowOnClickEvent = row => {
setSkuVisble(true);
setSkuNameItem({
skuName: row.name,
rowIndex: row.rowIndex,
});
};
const cancelEvent = () => {
setSkuVisble(false);
};
const confirmEvent = skuItem => {
const newDataSource = [...dataSource];
newDataSource[skuItem.rowIndex].name = skuItem.skuName;
setDataSource(newDataSource);
form.setFieldsValue({
tableList: newDataSource,
});
};
useImperativeHandle(ref, () => ({
onCheck,
form,
......@@ -119,6 +195,7 @@ const EditFormTable = forwardRef((props, ref) => {
rowSpan,
record,
rowIndex,
roleRules: col.roleRules || {},
editable: col.editable,
dataIndex: col.dataIndex,
disabled: col.disabled,
......@@ -126,6 +203,7 @@ const EditFormTable = forwardRef((props, ref) => {
roleProps: col.roleProps || {},
title: col.title,
handleSave,
rowOnClickEvent,
};
},
}));
......@@ -153,6 +231,14 @@ const EditFormTable = forwardRef((props, ref) => {
Add a row
</Button>
</Form>
<Button onClick={() => {}}></Button>
<UpdateSkuName
skuVisble={skuVisble}
form={form}
value={skuNameItem}
confirmEvent={confirmEvent}
cancelEvent={cancelEvent}
/>
</div>
);
});
......
src/pages/ServiceGoods/components/FormPriceOrStock.jsx
View file @ 3c966ed7
......@@ -10,7 +10,7 @@ import React, {
} from 'react';
import { formItemLayout, StaticColumns } from '../config';
import EditFormTable from './EditFormTable';
import { createProductData, cleanArray } from '../utils';
import { createProductData, cleanArray, batchTableSourceData } from '../utils';
import { ServiceContext } from '../context';
import { SelectTemplate } from './CommonTemplate';
......@@ -53,14 +53,12 @@ const SpecificationTemplate = (props, _) => {
};
const inputOnblurEvent = event => {
console.log(event.target.value);
if (event.target.value) {
onChange();
}
};
const bundlePlusAddSpecEvent = addCallback => {
console.log(formName);
const specId = form.getFieldValue(formName);
if (!specId) {
Modal.warning({
......@@ -75,7 +73,10 @@ const SpecificationTemplate = (props, _) => {
const bundlePlusRemoveSpecEvent = (removeCallback, fieldName) => {
removeCallback(fieldName);
onChange();
const timer = setTimeout(() => {
onChange();
clearTimeout(timer);
}, 500);
};
return (
......@@ -114,7 +115,12 @@ const SpecificationTemplate = (props, _) => {
message: '规格名不能重复！',
validator(rule, value, callback) {
const checkList = form.getFieldValue(specName);
const check = validatorSpecValue(value, checkList, index, specName);
const check = validatorSpecValue(
value,
cleanArray(checkList),
index,
specName,
);
return check ? callback('规格名不能重复！') : callback();
},
},
......@@ -160,28 +166,6 @@ const originItems = {
secondDuplicate: [],
};
// 编辑回显示时只获取用到的数据
const filterItem = skuItem => {
const { serviceItem, ...argsItem } = skuItem;
argsItem.disabled = true;
return argsItem;
};
const filterSpecData = skuList =>
skuList.reduce((orgin, skuItem) => {
const item = filterItem(skuItem);
const { firstSpecValue, secondSpecValue } = item;
if (firstSpecValue && !orgin.firstDuplicate.includes(firstSpecValue)) {
orgin.firstSpecValue.push(item);
orgin.firstDuplicate.push(firstSpecValue);
}
if (secondSpecValue && !orgin.secondDuplicate.includes(secondSpecValue)) {
orgin.secondSpecValue.push(item);
orgin.secondDuplicate.push(secondSpecValue);
}
return orgin;
}, originItems);
const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColumns }) => {
const customer = useContext(ServiceContext);
const formItems = defaultColumns
......@@ -289,33 +273,51 @@ const FormPriceOrStock = forwardRef((props, ref) => {
}
};
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);
const resetObject = tableData.map((item, index) => {
console.log(item);
batchItemKey.forEach(key => {
item[key] = batchItem[key] || null;
// reset[`tableList[${index}]['${key}']`] = batchItem[key] || null;
});
return item;
});
const bacthFirst = form.getFieldValue('bacthFirst');
const bacthSecon = form.getFieldValue('bacthSecon');
const resetObject = batchTableSourceData({ batchItem, tableData, bacthSecon, bacthFirst });
setTableData(resetObject);
console.log(resetObject);
// editRef.current.form.setFieldsValue(resetObject);
// form.setFieldsValue(resetObject);
};
const onSpecificationEvent = async () => {
try {
const values = await form.validateFields();
const cleanValues = {
firstSpec: values.firstSpec,
firstSpecId: values.firstSpecId,
firstSpecValue: cleanArray(values.firstSpecValue),
secondSpec: values.secondSpec,
secondSpecId: values.secondSpecId,
secondSpecValue: cleanArray(values.secondSpecValue),
};
setSpecInitValue(cleanValues);
CreateColumnsEvent(cleanValues);
return cleanValues;
} catch (error) {
console.log(error);
}
return null;
};
const firstOnChangeEvent = async () => {
const cleanValues = await onSpecificationEvent();
if (cleanValues) {
const firstSpecValueList = cleanArray(cleanValues.firstSpecValue).map(
item => item.firstSpecValue,
);
onSpecChange(firstSpecValueList);
}
};
const seconOnChangeEvent = async () => {
await onSpecificationEvent();
};
useImperativeHandle(ref, () => ({
onCheck,
reset: () => {
console.log('============>cleaarn', initSpecReced());
form.resetFields();
setDefaultColumns([]);
setTableData([]);
......@@ -339,7 +341,6 @@ const FormPriceOrStock = forwardRef((props, ref) => {
// secondSpecId: oneItem.secondSpecId,
// secondSpecValue,
// };
console.log('=============>editDataeditDataeditData', editData);
form.setFieldsValue(editData); // 设置规格数据
setSpecInitValue(editData); // 缓存规格数据
......@@ -369,6 +370,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
<SpecificationTemplate
form={form}
label="二级规格"
onChange={seconOnChangeEvent}
formName="secondSpecId"
selectName="secondSpec"
specName="secondSpecValue"
......
src/pages/ServiceGoods/components/FormRuleVPictures.jsx
View file @ 3c966ed7
......@@ -67,6 +67,8 @@ const FormRuleVPictures = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
onCheck,
setFieldsValue: form.setFieldsValue,
getFieldsValue: form.getFieldsValue,
reset: () => {
form.resetFields();
setImageList({});
......
src/pages/ServiceGoods/config.js
View file @ 3c966ed7
......@@ -75,6 +75,7 @@ export const StaticColumns = customer => [
precision: 2,
min: 0,
},
roleRules: { required: true },
disabled: customer.isJDGoods || customer.isService,
},
{
......@@ -82,6 +83,7 @@ export const StaticColumns = customer => [
dataIndex: 'commissionRate',
editable: true,
role: [3],
roleRules: { required: true },
},
{
title: '市场价',
......@@ -92,6 +94,7 @@ export const StaticColumns = customer => [
precision: 2,
min: 0,
},
roleRules: { required: true },
disabled: customer.isService,
},
{
......@@ -103,6 +106,7 @@ export const StaticColumns = customer => [
precision: 3,
max: 999999.999,
},
roleRules: { required: true },
disabled: customer.isService,
},
{
......@@ -110,13 +114,14 @@ export const StaticColumns = customer => [
dataIndex: 'salePrice',
editable: true,
role: [],
roleRules: { required: true },
},
{
title: '库存',
dataIndex: 'stock',
editable: true,
role: [3],
roleRules: { required: true },
// disabled: customer.isService,
},
{
......@@ -135,6 +140,7 @@ export const StaticColumns = customer => [
precision: 2,
min: 0,
},
roleRules: { required: true },
disabled: customer.isService,
},
{
......@@ -143,6 +149,7 @@ export const StaticColumns = customer => [
editable: true,
batchRole: [1],
role: [1],
roleRules: { required: true },
disabled: customer.isService,
},
{
......@@ -152,6 +159,7 @@ export const StaticColumns = customer => [
role: [1, 2],
inputType: 'input',
disabled: customer.isService,
roleRules: { required: true },
},
{
title: '京东链接',
......@@ -160,6 +168,15 @@ export const StaticColumns = customer => [
role: [1, 2],
inputType: 'input',
disabled: customer.isService,
roleRules: { required: false },
},
{
title: 'sku名称',
dataIndex: 'name',
editable: true,
role: customer.isEdit && customer.isJDGoods ? [1, 2] : [],
inputType: 'btnText',
roleRules: { required: false },
},
{
title: '操作',
......@@ -171,6 +188,7 @@ export const StaticColumns = customer => [
isJDGoods: customer.isJDGoods,
min: 0,
},
roleRules: { required: false },
disabled: customer.isService,
},
];
src/pages/ServiceGoods/index.jsx
View file @ 3c966ed7
import React, { useState, useRef, useEffect, useCallback } from 'react';
import { Spin, Button, Modal } from 'antd';
import { Spin, Button, Modal, notification } from 'antd';
import { ConsoleSqlOutlined } from '@ant-design/icons';
import { Title, WrapperContainer } from './components/CommonTemplate';
import { TaskTypeSelect } from './components/TaskTypeSelect';
import FormInformationBasic from './components/FormInformationBasic';
......@@ -13,9 +14,10 @@ import {
merchantBrandList,
merchantSpecList,
afterSalesAddrsPage,
merchantgetJdPicList,
} from './service';
import { isUrl } from './utils';
import { ServiceContext } from './context';
import { ConsoleSqlOutlined } from '@ant-design/icons';
/**
* 服务商品改造-商品模块
......@@ -119,6 +121,24 @@ const ServiceGoods = options => {
}
};
const getMerchantgetJdPicList = async params => {
const result = await merchantgetJdPicList(params);
if (result) {
const { detailImageList, imageList } = picturesRef.current.getFieldsValue();
const detailList = result.detailList || [];
const newImageList = imageList[result.firstSpecValue];
const carouseList = result.carouseList || [];
imageList[result.firstSpecValue] = newImageList
? [...newImageList, ...carouseList]
: carouseList;
picturesRef.current.setFieldsValue({
// [`imageList[${data.firstSpecValue}]`]: this.state.colorImg[data.firstSpecValue],
imageList,
detailImageList: [...detailImageList, ...detailList],
});
}
};
useEffect(() => {
(async () => {
if (!options.visible) {
......@@ -170,6 +190,28 @@ const ServiceGoods = options => {
[specKeyList],
);
const onEventBus = (event, params) => {
if (event === 'cloneImg') {
if (!isUrl(params.skuLink)) {
notification.open({
message: '提示',
description: '请输入正确的URL！',
});
return;
}
getMerchantgetJdPicList({
firstSpecId: params.firstSpecId,
firstSpecValue: params.firstSpecValue,
secondSpecId: params.secondSpecId,
secondSpecValue: params.secondSpecValue,
skuLink: params.skuLink,
jdSkuInfoUrl: params.skuLink,
});
}
console.log(event, params);
};
const providerValue = {
pageId,
isEdit,
......@@ -177,6 +219,7 @@ const ServiceGoods = options => {
isCard: productType === 3,
isService: SourceData.state && SourceData.state !== 4,
isJDGoods: isEdit && SourceData.pageProductType && +SourceData.pageProductType !== 1,
onEventBus,
};
return (
......
src/pages/ServiceGoods/service.js
View file @ 3c966ed7
......@@ -57,3 +57,12 @@ export const afterSalesAddrsPage = () => {
});
return data;
};
export const merchantgetJdPicList = async params => {
const { data } = await request.post('/product/api/merchant/item/getJdPicList', {
data: stringify(params),
prefix: goodsApi,
headers,
});
return data;
};
src/pages/ServiceGoods/utils.js
View file @ 3c966ed7
......@@ -23,6 +23,7 @@ const createInitProduct = (skuItem, isCreate) => {
stock: null,
thirdSkuNo: null,
skuLink: null,
name: null,
};
};
......@@ -34,6 +35,7 @@ const initData = {
stock: null,
thirdSkuNo: null,
skuLink: null,
name: null,
};
const createSecondProduct = (secondSpecList, initItem, secondSpec, dataSource, callback) => {
......@@ -85,3 +87,42 @@ export const createProductData = ({ firstValues, secondValues, firstSpecId, seco
console.log('dataSource===========>', dataSource);
return dataSource;
};
export const isUrl = path => {
// eslint-disable-next-line no-useless-escape
const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
return reg.test(path);
};
export const batchTableSourceData = ({ batchItem, tableData, bacthSecon, bacthFirst }) => {
const batchItemKey = Object.keys(batchItem);
return tableData.map((item, index) => {
if (!bacthFirst && !bacthSecon) {
batchItemKey.forEach(key => {
item[key] = batchItem[key] || null;
});
}
if (bacthFirst && !bacthSecon) {
batchItemKey.forEach(key => {
if (item.firstSpecValue === bacthFirst) {
item[key] = batchItem[key] || null;
}
});
}
if (!bacthFirst && bacthSecon) {
batchItemKey.forEach(key => {
if (item.secondSpecValue === bacthSecon) {
item[key] = batchItem[key] || null;
}
});
}
if (bacthFirst && bacthSecon) {
batchItemKey.forEach(key => {
if (item.firstSpecValue === bacthFirst && item.secondSpecValue === bacthSecon) {
item[key] = batchItem[key] || null;
}
});
}
return item;
});
};
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