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

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

@ -1,6 +1,7 @@
import React, { useState } from 'react';
import { Button, Card, Checkbox, Col, DatePicker, Form, Input, Row, Select, Space, Tag, Table, InputNumber } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
const { Option } = Select;
const { RangePicker } = DatePicker;
@ -13,6 +14,11 @@ const BatchImportPrice = ({ onBatchImportData }) => {
const [tableData, setTableData] = useState([]);
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) => {
setTags(tags.filter(tag => tag !== removedTag));
};
@ -33,22 +39,21 @@ const BatchImportPrice = ({ onBatchImportData }) => {
};
const generateTableData = () => {
const values = form.getFieldsValue();
const weekdays = checkedDays.join(',');
let tempSendData = [];
console.log("values",values)
// 遍历 items
values.items.forEach((item) => {
values.items.forEach((item, index) => {
// 遍历 validPeriods
let tempValidPeriods = []
item.validPeriods?.forEach((period) => {
console.log("period",period)
const validPeriod = period.validPeriod.map(date => date.format('YYYY-MM-DD')).join('~');
tempValidPeriods.push(validPeriod)
// 更新 tempSendData 中每一个 tag 的值
});
const priceType = `批量设置价格 ${index + 1} ${item.currency}/${item.type}`
let tempData = []
const unit_name = item.type
const currency = item.currency
@ -59,14 +64,15 @@ const BatchImportPrice = ({ onBatchImportData }) => {
let unit_id = null
const use_dates_start = validPeriod.split('~')[0]
const use_dates_end = validPeriod.split('~')[1]
if(unit_name === "每人"){
if (unit_name === "每人") {
unit_id = 0
}else{
} else {
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)
});
@ -90,15 +96,21 @@ const BatchImportPrice = ({ onBatchImportData }) => {
data.push(row);
});
});
// setSendData([...tempSendData,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') {
console.log("sendData", sendData)
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 {
...item,
adult_cost: value, // 更新对应的 adult_cost 属性
@ -106,12 +118,13 @@ const BatchImportPrice = ({ onBatchImportData }) => {
}
return item; // 对于不匹配的项，保持不变
});
// 更新 sendDataole
// 更新 sendData
console.log("updatedSendData", updatedSendData)
onBatchImportData(updatedSendData);
setSendData(updatedSendData);
} else {
const updatedSendData = sendData.map((item) => {
if (item.validPeriod === validPeriod && item.tag === tag) {
if (item.priceType === priceType && item.tag === tag) {
return {
...item,
child_cost: value, // 更新对应的 child_cost 属性
@ -123,9 +136,9 @@ const BatchImportPrice = ({ onBatchImportData }) => {
onBatchImportData(updatedSendData);
setSendData(updatedSendData);
}
};
const generatePeopleColumns = () => {
const columns = [];
tags.forEach((tag, index) => {
@ -136,25 +149,61 @@ const BatchImportPrice = ({ onBatchImportData }) => {
title: '成人价',
dataIndex: `adultPrice${index + 1}`,
key: `adultPrice${index + 1}`,
render: (text, record) => (
<InputNumber
formatter={value => `${value}`}
parser={value => value.replace(/[^\d]/g, '')}
onChange={(value) => handleTableChange('adult_cost', value, tag, record.validPeriod)}
/>
),
render: (text, record, rowIndex) => {
const sameTagRecords = tableData.filter(item => item.priceType === record.priceType);
const firstTagIndex = tableData.findIndex(item => item.priceType === record.priceType && item.validPeriod === sameTagRecords[0].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: '儿童价',
dataIndex: `childrenPrice${index + 1}`,
key: `childrenPrice${index + 1}`,
render: (text, record) => (
<InputNumber
formatter={value => `${value}`}
parser={value => value.replace(/[^\d]/g, '')}
onChange={(value) => handleTableChange('child_cost', value, tag, record.validPeriod)}
/>
),
render: (text, record, rowIndex) => {
const sameTagRecords = tableData.filter(item => item.priceType === record.priceType);
const firstTagIndex = tableData.findIndex(item => item.priceType === record.priceType && item.validPeriod === sameTagRecords[0].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;
};
const columns = [
{
title: ' ',
@ -280,8 +330,10 @@ const BatchImportPrice = ({ onBatchImportData }) => {
<div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
{periodFields.map((periodField, idx) => (
<Space key={periodField.key}>
<Form.Item noStyle name={[periodField.name, 'validPeriod']}>
<RangePicker />
<Form.Item noStyle name={[periodField.name, 'validPeriod']} initialValue={[startOfYear, endOfYear]}>
<RangePicker
defaultValue={[startOfYear, endOfYear]}
/>
</Form.Item>
<CloseOutlined onClick={() => periodOpt.remove(periodField.name)} />
</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 { DatePicker, Button } from 'antd';
const Date = ({ onDateChange }) => {
const addValidityWithWeekend = ({ onDateChange }) => {
const dateFormat = 'YYYY/MM/DD';
const { RangePicker } = DatePicker;
const [dateRange, setDateRange] = useState(null);
@ -17,6 +17,8 @@ const Date = ({ onDateChange }) => {
onDateChange({ dateRange: range, selectedDays });
};
const handleDayClick = (day) => {
setSelectedDays((prevSelectedDays) => {
const updatedDays = prevSelectedDays.includes(day)
@ -48,4 +50,4 @@ const Date = ({ onDateChange }) => {
);
};
export default Date;
export default addValidityWithWeekend;
Write Preview
Loading…
Cancel
Save