diff --git a/src/components/BatchImportPrice.jsx b/src/components/BatchImportPrice.jsx new file mode 100644 index 0000000..0404beb --- /dev/null +++ b/src/components/BatchImportPrice.jsx @@ -0,0 +1,243 @@ +import React, { useState } from 'react'; +import { Table, Input, Button, DatePicker, Row, Col, Tag, Select } from 'antd'; + +const { RangePicker } = DatePicker; +const { Option } = Select; +const BatchImportPrice = () => { + const [startDate, setStartDate] = useState(null); + const [endDate, setEndDate] = useState(null); + const [startPeople, setStartPeople] = useState(1); + const [endPeople, setEndPeople] = useState(5); + const [dateRanges, setDateRanges] = useState([]); + const [peopleRanges, setPeopleRanges] = useState([]); + const [tableData, setTableData] = useState([]); + const [currency, setCurrency] = useState('RMB'); // 默认值为 RMB + const [type, setType] = useState('每人'); // 默认值为 每人 + + const handleGenerateTable = () => { + if (dateRanges.length === 0 || peopleRanges.length === 0) return; + + const newData = dateRanges.flatMap(dateRange => { + const { startDate, endDate } = dateRange; + const dates = generateDateRange(startDate, endDate); + const row = { dateRange: `${startDate.format('YYYY-MM-DD')} ~ ${endDate.format('YYYY-MM-DD')}` }; + + peopleRanges.forEach(peopleRangeString => { + const [start, end] = peopleRangeString.split('-').map(Number); + generatePeopleRange(start, end).forEach(person => { + row[`${person}_adultPrice`] = ''; + row[`${person}_childPrice`] = ''; + }); + }); + + dates.forEach(date => { + row[date] = ''; + }); + + return row; + }); + + setTableData(newData); + }; + + const generateDateRange = (start, end) => { + const dates = []; + let currentDate = start.clone(); + + while (currentDate <= end) { + dates.push(currentDate.format('YYYY-MM-DD')); + currentDate = currentDate.add(1, 'day'); + } + + return dates; + }; + + const generatePeopleRange = (start, end) => { + const range = []; + for (let i = start; i <= end; i++) { + range.push(`人等${i}`); + } + return range; + }; + + const handleCellChange = (value, dateRange, peopleRange, type) => { + const newData = [...tableData]; + const rowIndex = newData.findIndex(row => row.dateRange === dateRange); + newData[rowIndex][`${peopleRange}_${type}`] = value; + setTableData(newData); + }; + + const handleAddDateRange = () => { + if (startDate && endDate) { + const newDateRange = { startDate, endDate }; + // 检查是否已经存在相同的日期范围 + const isDateRangeExist = dateRanges.some(range => ( + range.startDate.isSame(startDate, 'day') && range.endDate.isSame(endDate, 'day') + )); + if (!isDateRangeExist) { + setDateRanges([...dateRanges, newDateRange]); + } + } + }; + + const handleAddPeopleRange = () => { + if (startPeople <= endPeople) { + const newPeopleRange = `${startPeople}-${endPeople}`; + // 检查是否已经存在相同的人员范围 + const isPeopleRangeExist = peopleRanges.includes(newPeopleRange); + if (!isPeopleRangeExist) { + setPeopleRanges([...peopleRanges, newPeopleRange]); + } + } + }; + + const handleRemoveTag = (index, type) => { + if (type === 'date') { + setDateRanges(dateRanges.filter((_, i) => i !== index)); + } else { + const removedPeopleRange = peopleRanges[index]; + setPeopleRanges(peopleRanges.filter(range => range !== removedPeopleRange)); + } + setTableData([]); + }; + + + const [adultPrice, setAdultPrice] = useState(''); + const [childPrice, setChildPrice] = useState(''); + + const handleAdultPriceChange = (value, dateRange) => { + const newData = [...tableData]; + const rowIndex = newData.findIndex(row => row.dateRange === dateRange); + newData[rowIndex]['成人价'] = value; + setTableData(newData); + }; + + const handleChildPriceChange = (value, dateRange) => { + const newData = [...tableData]; + const rowIndex = newData.findIndex(row => row.dateRange === dateRange); + newData[rowIndex]['儿童价'] = value; + setTableData(newData); + }; + + const columns = [ + { + title: '日期\\人等', + dataIndex: 'dateRange', + key: 'dateRange', + }, + ...peopleRanges.flatMap(peopleRange => ([ + { + title: peopleRange, + dataIndex: `${peopleRange}_price`, + key: `${peopleRange}_price`, + render: (text, record) => ( +
+ handleCellChange(e.target.value, record.dateRange, peopleRange, 'adultPrice')} + placeholder="成人价" + style={{ width: '45%' }} + suffix={`${currency}/${type}`} + /> + handleCellChange(e.target.value, record.dateRange, peopleRange, 'childPrice')} + placeholder="儿童价" + style={{ width: '45%' }} + suffix={`${currency}/${type}`} + /> +
+ ), + } + ])), + ]; + + return ( + <> + + + + + + + + + + + + { + if (dates && dates.length === 2) { + setStartDate(dates[0]); + setEndDate(dates[1]); + } else { + setStartDate(null); + setEndDate(null); + } + }} + /> + + + + + + + setStartPeople(parseInt(e.target.value, 10))} + /> + + setEndPeople(parseInt(e.target.value, 10))} + /> + + + + + + + + + + {dateRanges.map((dateRange, index) => ( + handleRemoveTag(index, 'date')}> + {`${dateRange.startDate.format('YYYY-MM-DD')} ~ ${dateRange.endDate.format('YYYY-MM-DD')}`} + + ))} + {peopleRanges.map((peopleRange, index) => ( + handleRemoveTag(index, 'people')}> + {peopleRange} + + ))} + + + + + ); +}; + +export default BatchImportPrice; + + + diff --git a/src/components/date.jsx b/src/components/date.jsx index fec0402..ecc674f 100644 --- a/src/components/date.jsx +++ b/src/components/date.jsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { DatePicker, Button } from 'antd'; -const DateComponent = ({ onDateChange }) => { +const Date = ({ onDateChange }) => { const dateFormat = 'YYYY/MM/DD'; const { RangePicker } = DatePicker; const [dateRange, setDateRange] = useState(null); @@ -48,4 +48,4 @@ const DateComponent = ({ onDateChange }) => { ); }; -export default DateComponent; +export default Date; diff --git a/src/views/products/Detail.jsx b/src/views/products/Detail.jsx index 8f35b06..57cd8e7 100644 --- a/src/views/products/Detail.jsx +++ b/src/views/products/Detail.jsx @@ -1,8 +1,8 @@ -import React, { useState, useEffect, useRef,useMemo } from 'react'; +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 DateComponent from '@/components/date'; +import Date from '@/components/date'; import { searchAgencyAction, getAgencyProductsAction } from '@/stores/Products/Index'; import { useProductsTypes } from '@/hooks/useProductsSets'; import Extras from './Detail/Extras'; @@ -10,7 +10,8 @@ import { groupBy } from '@/utils/commons'; import { useParams } from 'react-router-dom'; import { useHTLanguageSets } from '@/hooks/useHTLanguageSets'; import { useDefaultLgc } from '@/i18n/LanguageSwitcher'; -function Index() { +import BatchImportPrice from '@/components/BatchImportPrice'; +function Detail() { const { t } = useTranslation(); const [form] = Form.useForm(); const [editingid, setEditingid] = useState(''); @@ -19,20 +20,80 @@ function Index() { const [selectedTag, setSelectedTag] = useState(null); const [saveData, setSaveData] = useState(null); const [datePickerVisible, setDatePickerVisible] = useState(false); + const [batchImportPriceVisible, setBatchImportPriceVisible] = useState(false); const [currentid, setCurrentid] = useState(null); const [languageStatus, setLanguageStatus] = useState(null); const [selectedNodeid, setSelectedNodeid] = useState(null); const [remainderLanguage, setRemainderLanguage] = useState([]) const [selectedDateData, setSelectedDateData] = useState({ dateRange: null, selectedDays: [] }); - const [treeData1, setTreeData1] = useState([]); + const [treeData, setTreeData] = useState([]); const productsTypes = useProductsTypes(); const [productsData, setProductsData] = useState(null); const [quotation, setQuotation] = useState(null); - const [lgc_details,setLgc_details] = useState(null); - const [languageLabel,setLanguageLabel] = useState(null); + const [lgc_details, setLgc_details] = useState(null); + const [languageLabel, setLanguageLabel] = useState(null); const { travel_agency_id } = useParams(); - const {language} = useDefaultLgc(); + const { language } = useDefaultLgc(); const HTLanguageSets = useHTLanguageSets(); + const { Search } = Input; + + + const [expandedKeys, setExpandedKeys] = useState([]); + const [searchValue, setSearchValue] = useState(''); + const [autoExpandParent, setAutoExpandParent] = useState(true); + const [dataList, setDataList] = useState([]); + const [defaultData, setDefaultData] = useState([]); + + + const productProject = { + "6": [], + "B": [ + { code: "code", name: t('products:Code') }, + { code: "city_name", name: t('products:City') }, + { code: "km", name: t('products:KM') }, + { code: "remarks", name: t('products:Remarks') } + ], + "J": [ + { code: "code", name: t('products:Code') }, + { code: "city_name", name: t('products:City') }, + { code: "recommends_rate", name: t('products:recommendationRate') }, + { code: "duration", name: t('products:Duration') }, + { code: "dept_name", name: t('products:Dept') }, + { code: "display_to_c", name: t('products:DisplayToC') }, + { code: "remarks", name: t('products:Remarks') }, + ], + "Q": [ + { code: "code", name: t('products:Code') }, + { code: "city_name", name: t('products:City') }, + { code: "recommends_rate", name: t('products:recommendationRate') }, + { code: "duration", name: t('products:Duration') }, + { code: "dept_name", name: t('products:Dept') }, + { code: "display_to_c", name: t('products:DisplayToC') }, + { code: "remarks", name: t('products:Remarks') }, + ], + "D": [ + { code: "code", name: t('products:Code') }, + { code: "city_name", name: t('products:City') }, + { code: "recommends_rate", name: t('products:recommendationRate') }, + { code: "duration", name: t('products:Duration') }, + { code: "dept_name", name: t('products:Dept') }, + { code: "display_to_c", name: t('products:DisplayToC') }, + { code: "remarks", name: t('products:Remarks') }, + ], + "7": [ + { code: "code", name: t('products:Code') }, + { code: "city_name", name: t('products:City') }, + { code: "recommends_rate", name: t('products:recommendationRate') }, + { code: "duration", name: t('products:Duration') }, + { code: "open_weekdays", name: t('products:OpenWeekdays') }, + { code: "remarks", name: t('products:Remarks') }, + ], + "R": [ + { code: "code", name: t('products:Code') }, + { code: "city_name", name: t('products:City') }, + ] + } + const [selectedCategory, setSelectedCategory] = useState(productProject.B); useEffect(() => { setLanguageStatus(language); @@ -40,46 +101,108 @@ function Index() { const languageLabel = matchedLanguage.label // setTags([languageLabel]) setLanguageLabel(languageLabel) + setSelectedTag(languageLabel) setRemainderLanguage(HTLanguageSets.filter(item => item.key !== language.toString())) }, []); - - const fetchData = async () => { - const a = { travel_agency_id }; - const res = await getAgencyProductsAction(a); - const groupedProducts = groupBy(res.products, (row) => row.info.product_type_id); - - const generateTreeData = (productsTypes, productsData) => { - return productsTypes.map(type => ({ - title: type.label, - key: type.value, - selectable: false, - children: (productsData[type.value] || []).map(product => ({ - title: product.info.title, - key: `${type.value}-${product.info.id}`, - })) - })); - }; - const treeData = generateTreeData(productsTypes, groupedProducts); - setProductsData(groupedProducts); - setTreeData1(treeData); - }; - useEffect(() => { + const fetchData = async () => { + const a = { travel_agency_id }; + const res = await getAgencyProductsAction(a); + const groupedProducts = groupBy(res.products, (row) => row.info.product_type_id); + + const generateTreeData = (productsTypes, productsData) => { + return productsTypes.map(type => ({ + title: type.label, + key: type.value, + selectable: false, + children: (productsData[type.value] || []).map(product => ({ + title: product.info.title, + key: `${type.value}-${product.info.id}`, + })) + })); + }; + + const treeData = generateTreeData(productsTypes, groupedProducts); + setTreeData(treeData); + setProductsData(groupedProducts); + setDefaultData(treeData); + setDataList(flattenTreeData(treeData)); + }; + fetchData(); }, [productsTypes]); + const flattenTreeData = (tree) => { + let flatList = []; + const flatten = (nodes) => { + nodes.forEach((node) => { + flatList.push({ title: node.title, key: node.key }); + if (node.children) { + flatten(node.children); + } + }); + }; + flatten(tree); + return flatList; + }; - const productProject = [ - { code: "code", name: t('products:Code') }, - { code: "city_name", name: t('products:City') }, - { code: "remarks", name: t('products:Remarks') }, - { code: "open_hours", name: t('products:tourTime') }, - { code: "recommends_rate", name: t('products:recommendationRate') } - ]; + const getParentKey = (key, tree) => { + let parentKey; + for (let i = 0; i < tree.length; i++) { + const node = tree[i]; + if (node.children) { + if (node.children.some((item) => item.key === key)) { + parentKey = node.key; + } else { + const pKey = getParentKey(key, node.children); + if (pKey) { + parentKey = pKey; + } + } + } + } + return parentKey; + }; + + const titleRender = (node) => { + const index = node.title.indexOf(searchValue); + const beforeStr = node.title.substr(0, index); + const afterStr = node.title.substr(index + searchValue.length); + const highlighted = ( + {searchValue} + ); + + return index > -1 ? ( + + {beforeStr} + {highlighted} + {afterStr} + + ) : ( + {node.title} + ); + }; + + const onChange = (e) => { + const { value } = e.target; + const newExpandedKeys = dataList + .filter(item => item.title.includes(value)) + .map(item => getParentKey(item.key, defaultData)) + .filter((item, i, self) => item && self.indexOf(item) === i); + console.log("newExpandedKeys", newExpandedKeys) + setExpandedKeys(newExpandedKeys); + setSearchValue(value); + setAutoExpandParent(true); + }; + + const onExpand = (keys) => { + setExpandedKeys(keys); + setAutoExpandParent(false); + }; const isEditing = (record) => record.id === editingid; @@ -136,6 +259,10 @@ function Index() { setQuotation([...quotation, newData]); }; + const handleBatchImport = () => { + setBatchImportPriceVisible(true); + } + const handleDateSelect = (id) => { setCurrentid(id); setDatePickerVisible(true); @@ -177,6 +304,11 @@ function Index() { setDatePickerVisible(false); } +const handleBatchImportOK = () => { + setBatchImportPriceVisible(false); +} + + const EditableCell = ({ editing, dataIndex, title, inputType, record, children, handleDateSelect, ...restProps }) => { let inputNode = inputType === 'number' ? : ; if (dataIndex === 'validityPeriod' && editing) { @@ -330,8 +462,8 @@ function Index() { const key = matchedLanguage ? matchedLanguage.key : null; form.setFieldsValue({ lgc_details: { - title: lgc_details[key] ? lgc_details[key].title : '', - descriptions: lgc_details[key] ? lgc_details[key].descriptions : '' + title: lgc_details[key] ? lgc_details[key].title : '', + descriptions: lgc_details[key] ? lgc_details[key].descriptions : '' } }); setLanguageStatus(key) @@ -341,10 +473,15 @@ function Index() { const showModal = () => setIsModalVisible(true); const handleOk = () => { - - setTags([...tags,selectedTag]) - - console.log("handleOkvalue") + if (!selectedTag) return; + if (!remainderLanguage.some(item => item.label === selectedTag)) return; + if (remainderLanguage.includes(selectedTag)) return; + let tempRemainderLanguage = remainderLanguage.filter((item)=>{ + return item.label !== selectedTag; + }) + setRemainderLanguage(tempRemainderLanguage) + setTags([...tags, selectedTag]) + setSelectedTag(null); setIsModalVisible(false); } @@ -352,46 +489,33 @@ function Index() { const handleTagChange = (value) => { - console.log("handleTagChange",value) + console.log("handleTagChange", value) setSelectedTag(value); - console.log("setSelectedTag",selectedTag) - // setLanguageStatus() - - - // if (!tags.includes(value)) { - // setTags([...tags, value]); - // setLanguageStatus([...languageStatus, { [value]: { title: "", descriptions: "" } }]); - // } - // setSelectedTag(value); - // setIsModalVisible(false); + console.log("setSelectedTag", selectedTag) }; const handleChange = (field, value) => { - console.log("languageStatus",languageStatus) - console.log("...lgc_details[languageStatus]",{...lgc_details[languageStatus]}) - // 更新整个 lgc_details 对象 - const updatedLgcDetails = { - ...lgc_details, - [languageStatus]:{...lgc_details[languageStatus],[field]: value,lgc:languageStatus} - }; - setLgc_details(updatedLgcDetails) - console.log("AAAAAAAAAAAAAA", lgc_details); - - }; + console.log("languageStatus", languageStatus) + console.log("...lgc_details[languageStatus]", { ...lgc_details[languageStatus] }) + // 更新整个 lgc_details 对象 + const updatedLgcDetails = { + ...lgc_details, + [languageStatus]: { ...lgc_details[languageStatus], [field]: value, lgc: languageStatus } + }; + setLgc_details(updatedLgcDetails) + console.log("AAAAAAAAAAAAAA", lgc_details); - const findLanguageDetails = (tag) => { - const lang = languageStatus.find(lang => lang[tag]); - return lang ? lang[tag] : { title: "", descriptions: "" }; }; - //树组件方法 const handleNodeSelect = (_, { node }) => { setTags([languageLabel]) // 如果点击的是同一个节点，不做任何操作 if (selectedNodeid === node.key) return; - const fatherKey = node.key.split('-')[0]; + setSelectedCategory(productProject[fatherKey]) + + console.log("remainderLanguage",remainderLanguage) let initialQuotationData = null; let infoData = null; let lgcDetailsData = null; @@ -403,229 +527,65 @@ function Index() { return true; } }); - + + console.log("infoData", infoData) + // 累积 lgc_details 数据 let newLgcDetails = {}; lgcDetailsData.forEach(element => { newLgcDetails[element.lgc] = element; }); - + // 一次性更新 lgc_details setLgc_details(newLgcDetails); - + setQuotation(initialQuotationData); - - console.log("descriptions",lgc_details) + + console.log("descriptions", lgc_details) // 使用 setTimeout 确保 lgc_details 已经更新 - form.setFieldsValue({ - info: { - title: infoData.title, - code: infoData.code, - product_type_name: infoData.product_type_name, - city_name: infoData.city_name, - remarks: infoData.remarks, - open_weekdays: infoData.open_weekdays, - recommends_rate: infoData.recommends_rate, - unit_name: infoData.unit_name - }, - lgc_details: { - title: newLgcDetails[language]?.title || '', - descriptions: newLgcDetails[language]?.descriptions || '' - } - }); + form.setFieldsValue({ + info: { + title: infoData.title, + code: infoData.code, + product_type_name: infoData.product_type_name, + city_name: infoData.city_name, + remarks: infoData.remarks, + open_weekdays: infoData.open_weekdays, + recommends_rate: infoData.recommends_rate, + duration: infoData.duration, + dept: infoData.dept, + km: infoData.km, + dept_name: infoData.dept_name + }, + lgc_details: { + title: newLgcDetails[language]?.title || '', + descriptions: newLgcDetails[language]?.descriptions || '' + } + }); }; - - - - - const onSave = (values) => { const tempData = values; tempData['quotation'] = quotation; - tempData['extras'] = bindingData; + // tempData['extras'] = bindingData; // tempData['lgc_details'] = languageStatus; setSaveData(tempData); console.log("保存的数据", tempData) }; - - //绑定产品 - const initBindingData = [ - { id: '1', title: '英文导游', value: "100", age_type: '每人' }, - { id: '2', title: '中文导游', value: "200", age_type: '每团' }, - { id: '3', title: '可陪餐费', value: "400", age_type: '每人' }, - ] - const [bindingData, setBindingData] = useState(initBindingData); - const isEditingBinding = (record) => record.id === editingidBinding; - const [editingidBinding, setEditingidBinding] = useState(''); - - const editBinding = (record) => { - form.setFieldsValue({ ...record }); - setEditingidBinding(record.id); - }; - const cancelBinding = () => { - setEditingidBinding(''); - }; - const EditableCellBinding = ({ - editing, - dataIndex, - title, - inputType, - record, - index, - children, - ...restProps - }) => { - let inputNode = inputType === 'number' ? : ; - - if (dataIndex === 'unit_name' && editing) { - inputNode = ( - - ); - } - return ( - - ); - }; - const bindingColums = [ - { title: t('products:Name'), dataIndex: 'title', width: '25%', editable: true }, - { title: t('products:price'), dataIndex: 'value', width: '25%', editable: true }, - { title: t('products:Types'), dataIndex: 'age_type', width: '25%', editable: true }, - { - title: t('products:operation'), - dataIndex: 'operation', - render: (_, record) => { - const editable = isEditingBinding(record); - return editable ? ( - - handleSaveBinding(record.id)} style={{ marginRight: 8 }}>{t('products:save')} - {t('products:cancel')} - - ) : ( - - editBinding(record)} style={{ marginRight: 8 }}>{t('products:edit')} - handleDeleteBinding(record.id)}> - {t('products:delete')} - - - ); - }, - }, - ].map(col => { - if (!col.editable) { - return col; - } - return { - ...col, - onCell: record => ({ - record, - inputType: col.dataIndex === 'value' ? 'number' : 'text', - dataIndex: col.dataIndex, - title: col.title, - editing: isEditingBinding(record), - }), - }; - }); - - - - const handleAddBinding = () => { - const newData = { - id: `${bindingData.length + 1}`, - title: '', - value: '', - age_type: '', - }; - setBindingData([...bindingData, newData]); - setEditingidBinding(''); // 添加这一行 - }; - - const handleSaveBinding = async (id) => { - try { - const row = await form.validateFields(); - const newData = [...bindingData]; - const { value, title, age_type } = row - const index = newData.findIndex((item) => id === item.id); - if (index > -1) { - const item = newData[index]; - newData.splice(index, 1, { ...item, value, title, age_type }); - - setBindingData(newData); - setEditingidBinding(''); - } else { - newData.push(row); - setBindingData(newData); - setEditingidBinding(''); - } - } catch (errInfo) { - console.log('Validate Failed:', errInfo); - } - }; - - - const handleDeleteBinding = (id) => { - const newData = [...bindingData]; - const index = newData.findIndex((item) => id === item.id); - newData.splice(index, 1); - setBindingData(newData); - }; - - const componentsBinding = { - body: { - cell: EditableCellBinding, - }, - }; - - const treeData = [ - { - title: '综费', - // id: 'zf', - selectable: false, - children: [{ title: '北京怡然假日', id: 'bjyrjr' }] - }, - { - title: '车费', - // id: 'cf', - selectable: false, - children: [ - { title: '北京', id: 'bj' }, - { title: '天津', id: 'tj' }, - { title: '北京-天津', id: 'bj-tj-3-5' } - ] - } - ] - - //Effect - useEffect(() => { - if (saveData) { - - } - }, [saveData]); - return (
- + + @@ -644,10 +604,14 @@ function Index() { >

{t('products:productProject')}

- {productProject.map((item, index) => ( + {selectedCategory.map((item, index) => ( - + {item.code === "duration" ? ( + + ) : ( + + )} ))} @@ -675,14 +639,15 @@ function Index() { placeholder="选择语言" optionFilterProp="children" onChange={handleTagChange} - > - + value={remainderLanguage.some((item) => item.label === selectedTag) ? selectedTag : undefined} + > + { - remainderLanguage.map((value, label) => ( - - {value.label} - - )) + remainderLanguage.map((value, label) => ( + + {value.label} + + )) } @@ -690,13 +655,13 @@ function Index() { handleChange('title', e.target.value)} + onChange={(e) => handleChange('title', e.target.value)} /> handleChange('descriptions', e.target.value)} + onChange={(e) => handleChange('descriptions', e.target.value)} /> @@ -716,24 +681,12 @@ function Index() { + + - {/*

{t('products:bindingProducts')}

- -
- {editing ? ( - - {inputNode} - - ) : ( - children - )} -
- - */} @@ -755,12 +708,26 @@ function Index() { onOk={handleDateOk} onCancel={() => setDatePickerVisible(false)} > - + )} + + { + batchImportPriceVisible && ( + setBatchImportPriceVisible(false)} + width="80%" + > + + + ) + } ); } -export default Index; +export default Detail;