完成批量价格生成和预览

src/views/products/Detail.jsx

@@ -1217,7 +1217,7 @@ function Detail() {
           open={batchImportPriceVisible}
           onOk={handleBatchImportOK}
           onCancel={() => setBatchImportPriceVisible(false)}
-          width={620}
+          width={'90%'}
         >
           <BatchImportPrice onBatchImportData={handleBatchImportData} />
         </Modal>

src/views/products/Detail/BatchImportPrice.jsx

@@ -1,14 +1,70 @@
 import { useState } from 'react';
-import { Button, Card, Checkbox, Col, Flex, DatePicker, Typography, Form, Input, Row, Select, Space } from 'antd';
+import { Button, Card, Checkbox, Table, Col, Flex, DatePicker, Typography, Form, Input, Row, Select, Space } from 'antd';
 import dayjs from "dayjs";
-import { CloseOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import { CloseOutlined, StarOutlined } from '@ant-design/icons';
 import { useDatePresets } from '@/hooks/useDatePresets';
 const { Option } = Select;
 const { RangePicker } = DatePicker;
 
 const BatchImportPrice = ({ onBatchImportData }) => {
-  const [priceForm] = Form.useForm();
-  const presets = useDatePresets();
+  const { t } = useTranslation()
+
+  const previewTableColumns = [
+    { title: t('products:adultPrice'), dataIndex: 'adult_cost', width: '10%' },
+    { title: t('products:childrenPrice'), dataIndex: 'child_cost', width: '10%' },
+    { title: t('products:currency'), dataIndex: 'currency', width: '10%' },
+    {
+      title: t('products:Types'),
+      dataIndex: 'unit',
+      width: '10%',
+      editable: true,
+      render: (text) => (text === '0' ? '每人' : text === '1' ? '每团' : text),
+    },
+    {
+      title: t('products:number'),
+      dataIndex: 'group_size',
+      width: '10%',
+      editable: true,
+      render: (_, record) => `${record.group_size_min}-${record.group_size_max}`
+    },
+    {
+      title: t('products:validityPeriod'),
+      dataIndex: 'validityPeriod',
+      width: '20%',
+      editable: true,
+      render: (_, record) => dayjs(record.use_dates_start).format('YYYY-MM-DD') + '~' + dayjs(record.use_dates_end).format('YYYY-MM-DD')
+    },
+    { title: t('products:Weekdays'), dataIndex: 'weekdays', width: '10%' },
+  ]
+
+  const [priceForm] = Form.useForm()
+  const [previewData, setPreviewData] = useState([])
+  const presets = useDatePresets()
+
+  const previewSetupPrice = () => {
+    let previewList = []
+    const defList = priceForm.getFieldsValue().defList
+
+    defList.forEach(definition => {
+      const previewPrice = definition?.priceList.map(price => {
+        return {
+          adult_cost: price.priceInput.audultPrice,
+          child_cost: price.priceInput.childrenPrice,
+          group_size_min: price.priceInput.numberStart,
+          group_size_max: price.priceInput.numberEnd,
+
+          currency: definition.currency,
+          unit: definition.unitName,
+          use_dates_start: definition.useDate[0],
+          use_dates_end: definition.useDate[1],
+          weekdays: definition.weekend.join(','),
+        }
+      })
+      previewList.push(...previewPrice)
+    })
+    setPreviewData(previewList)
+  }
 
   const PriceInput = (props) => {
     const { id, value = {}, onChange } = props
@@ -116,7 +172,7 @@ const BatchImportPrice = ({ onBatchImportData }) => {
   }
 
   const priceInitialValues = {
-    "items": [
+    "defList": [
       // 旺季
       {
         "useDate": [
@@ -128,7 +184,7 @@ const BatchImportPrice = ({ onBatchImportData }) => {
           "5",
           "6"
         ],
-        "prieceList": [
+        "priceList": [
           {
             "priceInput": {
               "numberStart": 1,
@@ -170,13 +226,11 @@ const BatchImportPrice = ({ onBatchImportData }) => {
         ],
         "unitName": "每人",
         "currency": "CNY",
-
         "weekend": [
           "5",
           "6"
         ],
-
-        "prieceList": [
+        "priceList": [
           {
             "priceInput": {
               "numberStart": 1,
@@ -216,7 +270,7 @@ const BatchImportPrice = ({ onBatchImportData }) => {
 
   return (
     <Row gutter={16} justify="center">
-      <Col span={24}>
+      <Col span={12}>
         <Form
           labelCol={{ span: 3 }}
           wrapperCol={{ span: 20 }}
@@ -225,7 +279,7 @@ const BatchImportPrice = ({ onBatchImportData }) => {
           autoComplete="off"
           initialValues={priceInitialValues}
         >
-          <Form.List name="items">
+          <Form.List name="defList">
             {(fields, { add, remove }) => (
               <Flex gap="middle" vertical>
                 {fields.map((field, index) => (
@@ -259,15 +313,15 @@ const BatchImportPrice = ({ onBatchImportData }) => {
                       />
                     </Form.Item>
                     <Form.Item label="人等">
-                      <Form.List name={[field.name, 'prieceList']}>
-                        {(prieceFieldList, priceOptList) => (
+                      <Form.List name={[field.name, 'priceList']}>
+                        {(priceFieldList, priceOptList) => (
                           <Flex gap="middle" vertical>
-                            {prieceFieldList.map((priceField) => (
+                            {priceFieldList.map((priceField, index) => (
                               <Space key={priceField.key}>
                                 <Form.Item noStyle name={[priceField.name, 'priceInput']}>
                                   <PriceInput />
                                 </Form.Item>
-                                <CloseOutlined onClick={() => priceOptList.remove(priceField.name)} />
+                                {index==0?<StarOutlined />:<CloseOutlined onClick={() => priceOptList.remove(priceField.name)} />}
                               </Space>
                             ))}
                             <Button type="dashed" onClick={() => priceOptList.add()} block>
@@ -294,6 +348,17 @@ const BatchImportPrice = ({ onBatchImportData }) => {
           </Form.Item>
         </Form>
       </Col>
+      <Col span={12}>
+      <Button type="dashed" onClick={() => previewSetupPrice()} block>
+        预览
+      </Button>
+      <Table
+          bordered
+          pagination={false}
+          dataSource={previewData}
+          columns={previewTableColumns}
+        />
+      </Col>
     </Row>
   );
 };