feat: 分离表单价格录入组件

src/views/App.jsx

@@ -102,7 +102,7 @@ function App() {
 				<Layout className='min-h-screen'>
 					<Header className='sticky top-0 z-10 w-full'>
 						<Row gutter={{ md: 24 }} justify='end' align='middle'>
-							<Col span={14}>
+							<Col span={16}>
 								<NavLink to='/'>
                 <img src={AppLogo} className='float-left h-9 my-4 mr-6 ml-0 bg-white/30' alt='App logo' />
 								</NavLink>

src/views/products/Detail/PriceCompactInput.jsx

@@ -0,0 +1,107 @@
+import { useState } from 'react'
+import { Input, Space } from 'antd'
+
+export const PriceCompactInput = (props) => {
+  const { id, value = {}, onChange } = props
+  const [numberStart, setNumberStart] = useState(0)
+  const [numberEnd, setNumberEnd] = useState(0)
+  const [audultPrice, setAudultPrice] = useState(0)
+  const [childrenPrice, setChildrenPrice] = useState(0)
+  const triggerChange = (changedValue) => {
+    onChange?.({
+      numberStart,
+      numberEnd,
+      audultPrice,
+      childrenPrice,
+      ...value,
+      ...changedValue,
+    })
+  }
+  const onNumberStartChange = (e) => {
+    const newNumber = parseInt(e.target.value || '0', 10)
+    if (Number.isNaN(numberStart)) {
+      return
+    }
+    if (!('numberStart' in value)) {
+      setNumberStart(newNumber)
+    }
+    triggerChange({
+      numberStart: newNumber,
+    })
+  }
+  const onNumberEndChange = (e) => {
+    const newNumber = parseInt(e.target.value || '0', 10)
+    if (Number.isNaN(numberEnd)) {
+      return
+    }
+    if (!('numberEnd' in value)) {
+      setNumberEnd(newNumber)
+    }
+    triggerChange({
+      numberEnd: newNumber,
+    })
+  }
+  const onAudultPriceChange = (e) => {
+    const newNumber = parseInt(e.target.value || '0', 10)
+    if (Number.isNaN(audultPrice)) {
+      return
+    }
+    if (!('audultPrice' in value)) {
+      setAudultPrice(newNumber)
+    }
+    triggerChange({
+      audultPrice: newNumber,
+    })
+  }
+  const onChildrenPriceChange = (e) => {
+    const newNumber = parseInt(e.target.value || '0', 10)
+    if (Number.isNaN(childrenPrice)) {
+      return
+    }
+    if (!('childrenPrice' in value)) {
+      setChildrenPrice(newNumber)
+    }
+    triggerChange({
+      childrenPrice: newNumber,
+    })
+  }
+  return (
+    <Space.Compact id={id}>
+      <Input
+        type='text'
+        value={value.numberStart || numberStart}
+        onChange={onNumberStartChange}
+        style={{
+          width: '20%',
+        }}
+      />
+      <Input
+        type='text'
+        value={value.numberEnd || numberEnd}
+        onChange={onNumberEndChange}
+        style={{
+          width: '40%',
+        }}
+        addonBefore='~'
+      />
+      <Input
+        type='text'
+        value={value.audultPrice || audultPrice}
+        onChange={onAudultPriceChange}
+        style={{
+          width: '70%',
+        }}
+        addonBefore='成人价'
+      />
+      <Input
+        type='text'
+        value={value.childrenPrice || childrenPrice}
+        onChange={onChildrenPriceChange}
+        style={{
+          width: '70%',
+        }}
+        addonBefore='儿童价'
+      />
+    </Space.Compact>
+  )
+}

src/views/products/Detail/ProductInfoQuotation.jsx

@@ -5,114 +5,10 @@ import { CloseOutlined, StarTwoTone, PlusOutlined, ExclamationCircleFilled } fro
 import { useDatePresets } from '@/hooks/useDatePresets'
 import dayjs from 'dayjs'
 import useProductsStore from '@/stores/Products/Index'
+import PriceCompactInput from './PriceCompactInput'
 
 const { RangePicker } = DatePicker
 
-const PriceInput = (props) => {
-  const { id, value = {}, onChange } = props
-  const [numberStart, setNumberStart] = useState(0)
-  const [numberEnd, setNumberEnd] = useState(0)
-  const [audultPrice, setAudultPrice] = useState(0)
-  const [childrenPrice, setChildrenPrice] = useState(0)
-  const triggerChange = (changedValue) => {
-    onChange?.({
-      numberStart,
-      numberEnd,
-      audultPrice,
-      childrenPrice,
-      ...value,
-      ...changedValue,
-    })
-  }
-  const onNumberStartChange = (e) => {
-    const newNumber = parseInt(e.target.value || '0', 10)
-    if (Number.isNaN(numberStart)) {
-      return
-    }
-    if (!('numberStart' in value)) {
-      setNumberStart(newNumber)
-    }
-    triggerChange({
-      numberStart: newNumber,
-    })
-  }
-  const onNumberEndChange = (e) => {
-    const newNumber = parseInt(e.target.value || '0', 10)
-    if (Number.isNaN(numberEnd)) {
-      return
-    }
-    if (!('numberEnd' in value)) {
-      setNumberEnd(newNumber)
-    }
-    triggerChange({
-      numberEnd: newNumber,
-    })
-  }
-  const onAudultPriceChange = (e) => {
-    const newNumber = parseInt(e.target.value || '0', 10)
-    if (Number.isNaN(audultPrice)) {
-      return
-    }
-    if (!('audultPrice' in value)) {
-      setAudultPrice(newNumber)
-    }
-    triggerChange({
-      audultPrice: newNumber,
-    })
-  }
-  const onChildrenPriceChange = (e) => {
-    const newNumber = parseInt(e.target.value || '0', 10)
-    if (Number.isNaN(childrenPrice)) {
-      return
-    }
-    if (!('childrenPrice' in value)) {
-      setChildrenPrice(newNumber)
-    }
-    triggerChange({
-      childrenPrice: newNumber,
-    })
-  }
-  return (
-    <Space.Compact id={id}>
-      <Input
-        type='text'
-        value={value.numberStart || numberStart}
-        onChange={onNumberStartChange}
-        style={{
-          width: '20%',
-        }}
-      />
-      <Input
-        type='text'
-        value={value.numberEnd || numberEnd}
-        onChange={onNumberEndChange}
-        style={{
-          width: '40%',
-        }}
-        addonBefore='~'
-      />
-      <Input
-        type='text'
-        value={value.audultPrice || audultPrice}
-        onChange={onAudultPriceChange}
-        style={{
-          width: '70%',
-        }}
-        addonBefore='成人价'
-      />
-      <Input
-        type='text'
-        value={value.childrenPrice || childrenPrice}
-        onChange={onChildrenPriceChange}
-        style={{
-          width: '70%',
-        }}
-        addonBefore='儿童价'
-      />
-    </Space.Compact>
-  )
-}
-
 const batchSetupInitialValues = {
   'defList': [
     // 旺季
@@ -420,7 +316,7 @@ const ProductInfoQuotation = ({ editable, ...props }) => {
                             {priceFieldList.map((priceField, index) => (
                               <Space key={priceField.key}>
                                 <Form.Item noStyle name={[priceField.name, 'priceInput']}>
-                                  <PriceInput />
+                                  <PriceCompactInput />
                                 </Form.Item>
                                 {index == 0 ? <StarTwoTone twoToneColor='#eb2f96' /> : <CloseOutlined onClick={() => priceOptList.remove(priceField.name)} />}
                               </Space>