Haina
/
GHHub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改批量录入界面功能

Browse Source
perf/export-docx
黄文强@HWQ-PC 1 year ago
parent 8bfb9defdc
commit f13241f262
3 changed files with 140 additions and 58 deletions
Show Stats Download Patch File Download Diff File

80
src/views/products/Detail.jsx
Unescape Escape View File

@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Button, Card, Col, Row, Breadcrumb, Table, Popconfirm, Form, Input, InputNumber, Tag, Modal, Select, Tree } from 'antd'; import { Button, Card, Col, Row, Breadcrumb, Table, Popconfirm, Form, Input, InputNumber, Tag, Modal, Select, Tree } from 'antd';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Date from '@/views/products/Detail/date'; import AddValidityWithWeekend from '@/views/products/Detail/addValidityWithWeekend';
import { searchAgencyAction, getAgencyProductsAction } from '@/stores/Products/Index'; import { searchAgencyAction, getAgencyProductsAction } from '@/stores/Products/Index';
import { useProductsTypes } from '@/hooks/useProductsSets'; import { useProductsTypes } from '@/hooks/useProductsSets';
import Extras from './Detail/Extras'; import Extras from './Detail/Extras';
@ -91,6 +91,10 @@ function Detail() {
{ code: "open_weekdays", name: t('products:OpenWeekdays') }, { code: "open_weekdays", name: t('products:OpenWeekdays') },
{ code: "remarks", name: t('products:Remarks') }, { code: "remarks", name: t('products:Remarks') },
], ],
"8": [
{ code: "code", name: t('products:Code') },
{ code: "city_name", name: t('products:City') },
],
"R": [ "R": [
{ code: "code", name: t('products:Code') }, { code: "code", name: t('products:Code') },
{ code: "city_name", name: t('products:City') }, { code: "city_name", name: t('products:City') },
@ -102,7 +106,6 @@ function Detail() {
setLanguageStatus(language); setLanguageStatus(language);
const matchedLanguage = HTLanguageSets.find(HTLanguage => HTLanguage.key === language.toString()); const matchedLanguage = HTLanguageSets.find(HTLanguage => HTLanguage.key === language.toString());
const languageLabel = matchedLanguage.label const languageLabel = matchedLanguage.label
// setTags([languageLabel])
setLanguageLabel(languageLabel) setLanguageLabel(languageLabel)
setSelectedTag(languageLabel) setSelectedTag(languageLabel)
setRemainderLanguage(HTLanguageSets.filter(item => item.key !== language.toString())) setRemainderLanguage(HTLanguageSets.filter(item => item.key !== language.toString()))
@ -130,6 +133,7 @@ function Detail() {
}; };
const treeData = generateTreeData(productsTypes, groupedProducts); const treeData = generateTreeData(productsTypes, groupedProducts);
console.log("treeData", treeData)
setTreeData(treeData); setTreeData(treeData);
setProductsData(groupedProducts); setProductsData(groupedProducts);
setDefaultData(treeData); setDefaultData(treeData);
@ -228,7 +232,7 @@ function Detail() {
newData.splice(index, 1, { ...item, ...restRow }); newData.splice(index, 1, { ...item, ...restRow });
delete newData[index].quotation delete newData[index].quotation
delete newData[index].extras delete newData[index].extras
console.log("newData",newData) console.log("newData", newData)
setQuotation(newData); setQuotation(newData);
setEditingid(''); setEditingid('');
} else { } else {
@ -308,10 +312,10 @@ function Detail() {
setDatePickerVisible(false); setDatePickerVisible(false);
} }
const handleBatchImportOK = () => { const handleBatchImportOK = () => {
console.log("quotation",quotation) console.log("quotation", quotation)
console.log('Batch Import Data:', batchImportData); console.log('Batch Import Data:', batchImportData);
// 创建一个新的数据副本，删除 tag 和 validPeriod 属性 // 创建一个新的数据副本，删除 tag 和 validPeriod 属性
const tempBatchImportData = batchImportData.map(item => { const tempBatchImportData = batchImportData.map(item => {
@ -321,11 +325,11 @@ const handleBatchImportOK = () => {
// 将剩余的属性添加到 quotation 中 // 将剩余的属性添加到 quotation 中
const newData = [...quotation, ...tempBatchImportData]; const newData = [...quotation, ...tempBatchImportData];
// 更新状态来更新页面 // 更新状态来更新页面
setQuotation(newData); setQuotation(newData);
setBatchImportPriceVisible(false); setBatchImportPriceVisible(false);
} }
const EditableCell = ({ editing, dataIndex, title, inputType, record, children, handleDateSelect, ...restProps }) => { const EditableCell = ({ editing, dataIndex, title, inputType, record, children, handleDateSelect, ...restProps }) => {
let inputNode = inputType === 'number' ? <InputNumber /> : <Input />; let inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
@ -494,11 +498,24 @@ const handleBatchImportOK = () => {
if (!selectedTag) return; if (!selectedTag) return;
if (!remainderLanguage.some(item => item.label === selectedTag)) return; if (!remainderLanguage.some(item => item.label === selectedTag)) return;
if (remainderLanguage.includes(selectedTag)) return; if (remainderLanguage.includes(selectedTag)) return;
let tempRemainderLanguage = remainderLanguage.filter((item)=>{ let tempRemainderLanguage = remainderLanguage.filter((item) => {
return item.label !== selectedTag; return item.label !== selectedTag;
}) })
console.log("AAAA", lgc_details)
console.log("selectTag", selectedTag)
const matchedLanguage = HTLanguageSets.find(HTLanguage => HTLanguage.label === selectedTag);
const languageKey = matchedLanguage.key
const tempLgc_details = {
...lgc_details, [languageKey]: {
title: {},
}
}
console.log("languageKey", languageKey)
setRemainderLanguage(tempRemainderLanguage) setRemainderLanguage(tempRemainderLanguage)
setTags([...tags, selectedTag]) setTags([...tags, selectedTag])
setSelectedTag(null); setSelectedTag(null);
setIsModalVisible(false); setIsModalVisible(false);
} }
@ -532,8 +549,16 @@ const handleBatchImportOK = () => {
if (selectedNodeid === node.key) return; if (selectedNodeid === node.key) return;
const fatherKey = node.key.split('-')[0]; const fatherKey = node.key.split('-')[0];
setSelectedCategory(productProject[fatherKey]) setSelectedCategory(productProject[fatherKey])
console.log("remainderLanguage",remainderLanguage)
setLanguageStatus(language);
const matchedLanguage = HTLanguageSets.find(HTLanguage => HTLanguage.key === language.toString());
const languageLabelRefresh = matchedLanguage.label
setLanguageLabel(languageLabelRefresh)
setSelectedTag(languageLabelRefresh)
setRemainderLanguage(HTLanguageSets.filter(item => item.key !== language.toString()))
let initialQuotationData = null; let initialQuotationData = null;
let infoData = null; let infoData = null;
let lgcDetailsData = null; let lgcDetailsData = null;
@ -547,7 +572,6 @@ const handleBatchImportOK = () => {
}); });
console.log("infoData", infoData) console.log("infoData", infoData)
// 累积 lgc_details 数据 // 累积 lgc_details 数据
let newLgcDetails = {}; let newLgcDetails = {};
lgcDetailsData.forEach(element => { lgcDetailsData.forEach(element => {
@ -559,7 +583,6 @@ const handleBatchImportOK = () => {
setQuotation(initialQuotationData); setQuotation(initialQuotationData);
console.log("descriptions", lgc_details)
// 使用 setTimeout 确保 lgc_details 已经更新 // 使用 setTimeout 确保 lgc_details 已经更新
form.setFieldsValue({ form.setFieldsValue({
info: { info: {
@ -576,6 +599,7 @@ const handleBatchImportOK = () => {
dept_name: infoData.dept_name dept_name: infoData.dept_name
}, },
lgc_details: { lgc_details: {
lgc: language,
title: newLgcDetails[language]?.title || '', title: newLgcDetails[language]?.title || '',
descriptions: newLgcDetails[language]?.descriptions || '' descriptions: newLgcDetails[language]?.descriptions || ''
} }
@ -585,8 +609,6 @@ const handleBatchImportOK = () => {
const onSave = (values) => { const onSave = (values) => {
const tempData = values; const tempData = values;
tempData['quotation'] = quotation; tempData['quotation'] = quotation;
// tempData['extras'] = bindingData;
// tempData['lgc_details'] = languageStatus;
setSaveData(tempData); setSaveData(tempData);
console.log("保存的数据", tempData) console.log("保存的数据", tempData)
}; };
@ -623,10 +645,16 @@ const handleBatchImportOK = () => {
<h2>{t('products:productProject')}</h2> <h2>{t('products:productProject')}</h2>
<Row gutter={16}> <Row gutter={16}>
{selectedCategory.map((item, index) => ( {selectedCategory.map((item, index) => (
<Col span={8} id={index}> <Col span={8} id={index} key={`${item.code}-${index}`}>
<Form.Item name={['info', item.code]} label={item.name}> <Form.Item name={['info', item.code]} label={item.name}>
{item.code === "duration" ? ( {item.code === "duration" ? (
<Input suffix="H"/> <Input suffix="H" />
) : (item.code === "display_to_c") ? (
<Select>
<Select.Option value="plan_only">在计划显示，不在报价信显示</Select.Option>
<Select.Option value="plan_and_quote">计划和报价信都要显示</Select.Option>
<Select.Option value="none"> 计划和报价信都不用显示</Select.Option>
</Select>
) : ( ) : (
<Input /> <Input />
)} )}
@ -658,7 +686,7 @@ const handleBatchImportOK = () => {
optionFilterProp="children" optionFilterProp="children"
onChange={handleTagChange} onChange={handleTagChange}
value={remainderLanguage.some((item) => item.label === selectedTag) ? selectedTag : undefined} value={remainderLanguage.some((item) => item.label === selectedTag) ? selectedTag : undefined}
> >
{ {
remainderLanguage.map((value, label) => ( remainderLanguage.map((value, label) => (
@ -699,7 +727,7 @@ const handleBatchImportOK = () => {
<Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}> <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
{t('products:addQuotation')} {t('products:addQuotation')}
</Button> </Button>
<Button onClick={handleBatchImport} type="primary" style={{ marginBottom: 16 }}>批量添加</Button> <Button onClick={handleBatchImport} type="primary" style={{ marginBottom: 16 }}>批量添加</Button>
</Form.Item> </Form.Item>
</Card> </Card>
@ -726,10 +754,10 @@ const handleBatchImportOK = () => {
onOk={handleDateOk} onOk={handleDateOk}
onCancel={() => setDatePickerVisible(false)} onCancel={() => setDatePickerVisible(false)}
> >
<Date onDateChange={handleDateChange} /> <AddValidityWithWeekend onDateChange={handleDateChange} />
</Modal> </Modal>
)} )}
{ {
batchImportPriceVisible && ( batchImportPriceVisible && (
@ -740,7 +768,7 @@ const handleBatchImportOK = () => {
onCancel={() => setBatchImportPriceVisible(false)} onCancel={() => setBatchImportPriceVisible(false)}
width="80%" width="80%"
> >
<BatchImportPrice onBatchImportData={handleBatchImportData}/> <BatchImportPrice onBatchImportData={handleBatchImportData} />
</Modal> </Modal>
) )
} }

112
src/views/products/Detail/BatchImportPrice1.jsx
Unescape Escape View File

@ -1,6 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Button, Card, Checkbox, Col, DatePicker, Form, Input, Row, Select, Space, Tag, Table, InputNumber } from 'antd'; import { Button, Card, Checkbox, Col, DatePicker, Form, Input, Row, Select, Space, Tag, Table, InputNumber } from 'antd';
import { CloseOutlined } from '@ant-design/icons'; import { CloseOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
const { Option } = Select; const { Option } = Select;
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
@ -13,6 +14,11 @@ const BatchImportPrice = ({ onBatchImportData }) => {
const [tableData, setTableData] = useState([]); const [tableData, setTableData] = useState([]);
const [sendData, setSendData] = useState(null); const [sendData, setSendData] = useState(null);
// 获取当前年份
const currentYear = new Date().getFullYear();
const startOfYear = dayjs(new Date(currentYear, 0, 1));
const endOfYear = dayjs(new Date(currentYear, 11, 31));
const handleTagClose = (removedTag) => { const handleTagClose = (removedTag) => {
setTags(tags.filter(tag => tag !== removedTag)); setTags(tags.filter(tag => tag !== removedTag));
}; };
@ -33,22 +39,21 @@ const BatchImportPrice = ({ onBatchImportData }) => {
}; };
const generateTableData = () => { const generateTableData = () => {
const values = form.getFieldsValue(); const values = form.getFieldsValue();
const weekdays = checkedDays.join(','); const weekdays = checkedDays.join(',');
let tempSendData = []; let tempSendData = [];
console.log("values",values)
// 遍历 items // 遍历 items
values.items.forEach((item) => { values.items.forEach((item, index) => {
// 遍历 validPeriods // 遍历 validPeriods
let tempValidPeriods = [] let tempValidPeriods = []
item.validPeriods?.forEach((period) => { item.validPeriods?.forEach((period) => {
console.log("period",period)
const validPeriod = period.validPeriod.map(date => date.format('YYYY-MM-DD')).join('~'); const validPeriod = period.validPeriod.map(date => date.format('YYYY-MM-DD')).join('~');
tempValidPeriods.push(validPeriod) tempValidPeriods.push(validPeriod)
// 更新 tempSendData 中每一个 tag 的值 // 更新 tempSendData 中每一个 tag 的值
}); });
const priceType = `批量设置价格 ${index + 1} ${item.currency}/${item.type}`
let tempData = [] let tempData = []
const unit_name = item.type const unit_name = item.type
const currency = item.currency const currency = item.currency
@ -59,14 +64,15 @@ const BatchImportPrice = ({ onBatchImportData }) => {
let unit_id = null let unit_id = null
const use_dates_start = validPeriod.split('~')[0] const use_dates_start = validPeriod.split('~')[0]
const use_dates_end = validPeriod.split('~')[1] const use_dates_end = validPeriod.split('~')[1]
if(unit_name === "每人"){ if (unit_name === "每人") {
unit_id = 0 unit_id = 0
}else{ } else {
unit_id = 1 unit_id = 1
} }
tempData.push({group_size_min, group_size_max,validPeriod, unit_id,unit_name,use_dates_start,use_dates_end, currency, weekdays,tag}) tempData.push({ group_size_min, group_size_max, validPeriod, unit_id, unit_name, use_dates_start, use_dates_end, currency, weekdays, tag, priceType })
}); });
}) })
console.log("tempData", tempData)
tempSendData.push(...tempData) tempSendData.push(...tempData)
}); });
@ -90,15 +96,21 @@ const BatchImportPrice = ({ onBatchImportData }) => {
data.push(row); data.push(row);
}); });
}); });
// setSendData([...tempSendData,data]);
setTableData(data); setTableData(data);
onBatchImportData(data); // 将生成的初始表格数据传递回父组件 // onBatchImportData(data); // 将生成的初始表格数据传递回父组件
}; };
const handleTableChange = (age_type, value, tag, validPeriod) => {
const handleTableChange = (age_type, value, tag, priceType) => {
if (age_type === 'adult_cost') { if (age_type === 'adult_cost') {
console.log("sendData", sendData)
const updatedSendData = sendData.map((item) => { const updatedSendData = sendData.map((item) => {
if (item.validPeriod === validPeriod && item.tag === tag) { console.log("item.priceType === priceType", item.priceType === priceType)
console.log("item.priceType", item.priceType)
console.log("priceType", priceType)
if (item.priceType === priceType && item.tag === tag) {
return { return {
...item, ...item,
adult_cost: value, // 更新对应的 adult_cost 属性 adult_cost: value, // 更新对应的 adult_cost 属性
@ -106,12 +118,13 @@ const BatchImportPrice = ({ onBatchImportData }) => {
} }
return item; // 对于不匹配的项，保持不变 return item; // 对于不匹配的项，保持不变
}); });
// 更新 sendDataole // 更新 sendData
console.log("updatedSendData", updatedSendData)
onBatchImportData(updatedSendData); onBatchImportData(updatedSendData);
setSendData(updatedSendData); setSendData(updatedSendData);
} else { } else {
const updatedSendData = sendData.map((item) => { const updatedSendData = sendData.map((item) => {
if (item.validPeriod === validPeriod && item.tag === tag) { if (item.priceType === priceType && item.tag === tag) {
return { return {
...item, ...item,
child_cost: value, // 更新对应的 child_cost 属性 child_cost: value, // 更新对应的 child_cost 属性
@ -123,9 +136,9 @@ const BatchImportPrice = ({ onBatchImportData }) => {
onBatchImportData(updatedSendData); onBatchImportData(updatedSendData);
setSendData(updatedSendData); setSendData(updatedSendData);
} }
}; };
const generatePeopleColumns = () => { const generatePeopleColumns = () => {
const columns = []; const columns = [];
tags.forEach((tag, index) => { tags.forEach((tag, index) => {
@ -136,25 +149,61 @@ const BatchImportPrice = ({ onBatchImportData }) => {
title: '成人价', title: '成人价',
dataIndex: `adultPrice${index + 1}`, dataIndex: `adultPrice${index + 1}`,
key: `adultPrice${index + 1}`, key: `adultPrice${index + 1}`,
render: (text, record) => ( render: (text, record, rowIndex) => {
<InputNumber const sameTagRecords = tableData.filter(item => item.priceType === record.priceType);
formatter={value => `${value}`} const firstTagIndex = tableData.findIndex(item => item.priceType === record.priceType && item.validPeriod === sameTagRecords[0].validPeriod);
parser={value => value.replace(/[^\d]/g, '')}
onChange={(value) => handleTableChange('adult_cost', value, tag, record.validPeriod)} if (rowIndex === firstTagIndex) {
/> return {
), children: (
<InputNumber
formatter={value => `${value}`}
parser={value => value.replace(/[^\d]/g, '')}
onChange={(value) => handleTableChange('adult_cost', value, tag, record.priceType)}
/>
),
props: {
rowSpan: sameTagRecords.length,
},
};
} else {
return {
props: {
rowSpan: 0,
},
};
}
},
}, },
{ {
title: '儿童价', title: '儿童价',
dataIndex: `childrenPrice${index + 1}`, dataIndex: `childrenPrice${index + 1}`,
key: `childrenPrice${index + 1}`, key: `childrenPrice${index + 1}`,
render: (text, record) => ( render: (text, record, rowIndex) => {
<InputNumber const sameTagRecords = tableData.filter(item => item.priceType === record.priceType);
formatter={value => `${value}`} const firstTagIndex = tableData.findIndex(item => item.priceType === record.priceType && item.validPeriod === sameTagRecords[0].validPeriod);
parser={value => value.replace(/[^\d]/g, '')}
onChange={(value) => handleTableChange('child_cost', value, tag, record.validPeriod)} if (rowIndex === firstTagIndex) {
/> return {
), children: (
<InputNumber
formatter={value => `${value}`}
parser={value => value.replace(/[^\d]/g, '')}
onChange={(value) => handleTableChange('child_cost', value, tag, record.priceType)}
/>
),
props: {
rowSpan: sameTagRecords.length,
},
};
} else {
return {
props: {
rowSpan: 0,
},
};
}
},
} }
] ]
}); });
@ -162,6 +211,7 @@ const BatchImportPrice = ({ onBatchImportData }) => {
return columns; return columns;
}; };
const columns = [ const columns = [
{ {
title: ' ', title: ' ',
@ -280,8 +330,10 @@ const BatchImportPrice = ({ onBatchImportData }) => {
<div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}> <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
{periodFields.map((periodField, idx) => ( {periodFields.map((periodField, idx) => (
<Space key={periodField.key}> <Space key={periodField.key}>
<Form.Item noStyle name={[periodField.name, 'validPeriod']}> <Form.Item noStyle name={[periodField.name, 'validPeriod']} initialValue={[startOfYear, endOfYear]}>
<RangePicker /> <RangePicker
defaultValue={[startOfYear, endOfYear]}
/>
</Form.Item> </Form.Item>
<CloseOutlined onClick={() => periodOpt.remove(periodField.name)} /> <CloseOutlined onClick={() => periodOpt.remove(periodField.name)} />
</Space> </Space>

6
src/views/products/Detail/date.jsx → src/views/products/Detail/addValidityWithWeekend.jsx
Unescape Escape View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { DatePicker, Button } from 'antd'; import { DatePicker, Button } from 'antd';
const Date = ({ onDateChange }) => { const addValidityWithWeekend = ({ onDateChange }) => {
const dateFormat = 'YYYY/MM/DD'; const dateFormat = 'YYYY/MM/DD';
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
const [dateRange, setDateRange] = useState(null); const [dateRange, setDateRange] = useState(null);
@ -17,6 +17,8 @@ const Date = ({ onDateChange }) => {
onDateChange({ dateRange: range, selectedDays }); onDateChange({ dateRange: range, selectedDays });
}; };
const handleDayClick = (day) => { const handleDayClick = (day) => {
setSelectedDays((prevSelectedDays) => { setSelectedDays((prevSelectedDays) => {
const updatedDays = prevSelectedDays.includes(day) const updatedDays = prevSelectedDays.includes(day)
@ -48,4 +50,4 @@ const Date = ({ onDateChange }) => {
); );
}; };
export default Date; export default addValidityWithWeekend;
Write Preview
Loading…
Cancel
Save