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

perf：不分人等、不限增加校验并通过后再关闭

Browse Source
main
LiaoYijun 2 months ago
parent f1ab003667
commit 1b302f0f7a
4 changed files with 457 additions and 286 deletions
Show Stats Download Patch File Download Diff File

2
src/views/account/Management.jsx
Unescape Escape View File

@ -231,7 +231,7 @@ function Management() {
}} }}
title={t('account:detail')} title={t('account:detail')}
open={isAccountModalOpen} onCancel={() => setAccountModalOpen(false)} open={isAccountModalOpen} onCancel={() => setAccountModalOpen(false)}
destroyOnClose destroyOnHidden
forceRender forceRender
modalRender={(dom) => ( modalRender={(dom) => (
<Form <Form

2
src/views/account/RoleList.jsx
Unescape Escape View File

@ -164,7 +164,7 @@ function RoleList() {
}} }}
title={t('account:detail')} title={t('account:detail')}
open={isRoleModalOpen} onCancel={() => setRoleModalOpen(false)} open={isRoleModalOpen} onCancel={() => setRoleModalOpen(false)}
destroyOnClose destroyOnHidden
forceRender forceRender
modalRender={(dom) => ( modalRender={(dom) => (
<Form <Form

2
src/views/products/Detail/ContractRemarksModal.jsx
Unescape Escape View File

@ -71,7 +71,7 @@ export const ContractRemarksModal = () => {
open={isRemarksModalOpen} open={isRemarksModalOpen}
onOk={() => onRemarksFinish()} onOk={() => onRemarksFinish()}
onCancel={() => setRemarksModalOpen(false)} onCancel={() => setRemarksModalOpen(false)}
destroyOnClose destroyOnHidden
forceRender forceRender
> >
<Form <Form

737
src/views/products/Detail/ProductInfoQuotation.jsx
Unescape Escape View File

@ -1,355 +1,493 @@
import { useState, useEffect } from 'react' import { useState, useEffect } from "react";
import { Table, Form, Modal, Button, Radio, Input, Flex, Card, InputNumber, Checkbox, DatePicker, Space, App, Tooltip } from 'antd' import {
import { useTranslation } from 'react-i18next' Table,
import { CloseOutlined, StarTwoTone, PlusOutlined, ExclamationCircleFilled, QuestionCircleOutlined } from '@ant-design/icons' Form,
import { useDatePresets } from '@/hooks/useDatePresets' Modal,
import dayjs from 'dayjs' Button,
Radio,
Input,
Flex,
Card,
InputNumber,
Checkbox,
DatePicker,
Space,
App,
Tooltip,
} from "antd";
import { useTranslation } from "react-i18next";
import {
CloseOutlined,
StarTwoTone,
PlusOutlined,
ExclamationCircleFilled,
QuestionCircleOutlined,
} from "@ant-design/icons";
import { useDatePresets } from "@/hooks/useDatePresets";
import dayjs from "dayjs";
import useProductsStore from '@/stores/Products/Index' import useProductsStore from "@/stores/Products/Index";
import PriceCompactInput from '@/views/products/Detail/PriceCompactInput' import PriceCompactInput from "@/views/products/Detail/PriceCompactInput";
import { formatGroupSize } from '@/hooks/useProductsSets' import { formatGroupSize } from "@/hooks/useProductsSets";
const { RangePicker } = DatePicker const { RangePicker } = DatePicker;
const defaultPriceValue = { const defaultPriceValue = {
'priceInput': { priceInput: {
'numberStart': 1, numberStart: 1,
'numberEnd': 2, numberEnd: 2,
'audultPrice': 0, audultPrice: 0,
'childrenPrice': 0 childrenPrice: 0,
} },
} };
const getYearRange = (year) => [dayjs().year(year).startOf('y'), dayjs().year(year).endOf('y')] const getYearRange = (year) => [
dayjs().year(year).startOf("y"),
dayjs().year(year).endOf("y"),
];
const generateDefinitionValue = (year) => ({ const generateDefinitionValue = (year) => ({
'useDateList': [{'useDate': getYearRange(year)}], useDateList: [{ useDate: getYearRange(year) }],
'unitId': '0', unitId: "0",
'currency': 'RMB', currency: "RMB",
'weekend': [], weekend: [],
'priceList': [defaultPriceValue] priceList: [defaultPriceValue],
}) });
const ProductInfoQuotation = ({ editable, ...props }) => { const ProductInfoQuotation = ({ editable, ...props }) => {
const { onChange } = props;
const { onChange } = props const { t } = useTranslation();
const { t } = useTranslation() const [
quotationList,
const [quotationList, newEmptyQuotation, appendQuotationList, saveOrUpdateQuotation, deleteQuotation, switchParams] = newEmptyQuotation,
useProductsStore((state) => [ appendQuotationList,
state.quotationList, state.newEmptyQuotation, state.appendQuotationList, state.saveOrUpdateQuotation, state.deleteQuotation, saveOrUpdateQuotation,
state.switchParams deleteQuotation,
]) switchParams,
] = useProductsStore((state) => [
state.quotationList,
state.newEmptyQuotation,
state.appendQuotationList,
state.saveOrUpdateQuotation,
state.deleteQuotation,
state.switchParams,
]);
const batchSetupInitialValues = { const batchSetupInitialValues = {
'defList': [ defList: [
// 全年 // 全年
{ {
'useDateList': [{'useDate': getYearRange(switchParams.use_year)}], useDateList: [{ useDate: getYearRange(switchParams.use_year) }],
'unitId': '0', unitId: "0",
'currency': 'RMB', currency: "RMB",
'weekend': [], weekend: [],
'priceList': [ priceList: [
{ {
'priceInput': { priceInput: {
'numberStart': 1, numberStart: 1,
'numberEnd': 2, numberEnd: 2,
'audultPrice': 0, audultPrice: 0,
'childrenPrice': 0 childrenPrice: 0,
} },
}, },
{ {
'priceInput': { priceInput: {
'numberStart': 3, numberStart: 3,
'numberEnd': 4, numberEnd: 4,
'audultPrice': 0, audultPrice: 0,
'childrenPrice': 0 childrenPrice: 0,
} },
}, },
{ {
'priceInput': { priceInput: {
'numberStart': 5, numberStart: 5,
'numberEnd': 6, numberEnd: 6,
'audultPrice': 0, audultPrice: 0,
'childrenPrice': 0 childrenPrice: 0,
} },
}, },
{ {
'priceInput': { priceInput: {
'numberStart': 7, numberStart: 7,
'numberEnd': 9, numberEnd: 9,
'audultPrice': 0, audultPrice: 0,
'childrenPrice': 0 childrenPrice: 0,
} },
} },
] ],
}, },
// 特殊时间段 // 特殊时间段
{ {
'useDateList': [ useDateList: [
{ {
'useDate': [ useDate: [
dayjs().year(switchParams.use_year).subtract(2, 'M').startOf('M'), dayjs().year(switchParams.use_year).endOf('M') dayjs().year(switchParams.use_year).subtract(2, "M").startOf("M"),
] dayjs().year(switchParams.use_year).endOf("M"),
} ],
},
], ],
'unitId': '0', unitId: "0",
'currency': 'RMB', currency: "RMB",
'weekend': [], weekend: [],
'priceList': [ priceList: [
{ {
'priceInput': { priceInput: {
'numberStart': 1, numberStart: 1,
'numberEnd': 2, numberEnd: 2,
'audultPrice': 0, audultPrice: 0,
'childrenPrice': 0 childrenPrice: 0,
} },
}, },
{ {
'priceInput': { priceInput: {
'numberStart': 3, numberStart: 3,
'numberEnd': 4, numberEnd: 4,
'audultPrice': 0, audultPrice: 0,
'childrenPrice': 0 childrenPrice: 0,
} },
}, },
{ {
'priceInput': { priceInput: {
'numberStart': 5, numberStart: 5,
'numberEnd': 6, numberEnd: 6,
'audultPrice': 0, audultPrice: 0,
'childrenPrice': 0 childrenPrice: 0,
} },
}, },
{ {
'priceInput': { priceInput: {
'numberStart': 7, numberStart: 7,
'numberEnd': 9, numberEnd: 9,
'audultPrice': 0, audultPrice: 0,
'childrenPrice': 0 childrenPrice: 0,
} },
} },
] ],
} },
] ],
} };
const [defaultUseDates, setDefaultUseDates] = useState(getYearRange(switchParams.use_year)) const [defaultUseDates, setDefaultUseDates] = useState(
const [defaultDefinitionValue, setDefaultDefinitionValue] = useState(generateDefinitionValue(switchParams.use_year)) getYearRange(switchParams.use_year)
const [isQuotationModalOpen, setQuotationModalOpen] = useState(false) );
const [isBatchSetupModalOpen, setBatchSetupModalOpen] = useState(false) const [defaultDefinitionValue, setDefaultDefinitionValue] = useState(
const [groupSizeUnlimit, setGroupSizeUnlimit] = useState(false) generateDefinitionValue(switchParams.use_year)
const [groupMaxUnlimit, setGroupMaxUnlimit] = useState(false) );
const { modal, notification } = App.useApp() const [isQuotationModalOpen, setQuotationModalOpen] = useState(false);
const [quotationForm] = Form.useForm() const [isBatchSetupModalOpen, setBatchSetupModalOpen] = useState(false);
const [batchSetupForm] = Form.useForm() const [groupAllSize, setGroupAllSize] = useState(false);
const [groupMaxUnlimit, setGroupMaxUnlimit] = useState(false);
const { modal, notification } = App.useApp();
const [quotationForm] = Form.useForm();
const [batchSetupForm] = Form.useForm();
const datePresets = useDatePresets() const datePresets = useDatePresets();
useEffect(() => { useEffect(() => {
setDefaultUseDates(getYearRange(switchParams.use_year)) setDefaultUseDates(getYearRange(switchParams.use_year));
setDefaultDefinitionValue(generateDefinitionValue(switchParams.use_year)) setDefaultDefinitionValue(generateDefinitionValue(switchParams.use_year));
}, [switchParams]) }, [switchParams]);
const triggerChange = (changedValue) => { const triggerChange = (changedValue) => {
onChange?.( onChange?.(changedValue);
changedValue };
)
}
const onQuotationSeleted = async (quotation) => { const onQuotationSeleted = async (quotation) => {
// 把 start, end 转换为 RangePicker 数组格式 // 把 start, end 转换为 RangePicker 数组格式
quotation.use_dates = [dayjs(quotation.use_dates_start), dayjs(quotation.use_dates_end)] quotation.use_dates = [
quotation.weekdayList = quotation.weekdays.split(',') dayjs(quotation.use_dates_start),
quotationForm.setFieldsValue(quotation) dayjs(quotation.use_dates_end),
setQuotationModalOpen(true) ];
} quotation.weekdayList = quotation.weekdays.split(",");
quotationForm.setFieldsValue(quotation);
setQuotationModalOpen(true);
};
const onNewQuotation = () => { const onNewQuotation = () => {
const emptyQuotation = newEmptyQuotation(defaultUseDates) const emptyQuotation = newEmptyQuotation(defaultUseDates);
quotationForm.setFieldsValue(emptyQuotation) quotationForm.setFieldsValue(emptyQuotation);
setQuotationModalOpen(true) setQuotationModalOpen(true);
} };
const onQuotationFinish = (values) => { const onQuotationFinish = (values) => {
const newList = saveOrUpdateQuotation(values) const newList = saveOrUpdateQuotation(values);
triggerChange(newList) triggerChange(newList);
setQuotationModalOpen(false) setQuotationModalOpen(false);
} };
const onBatchSetupFinish = () => { const onBatchSetupFinish = () => {
const defList = batchSetupForm.getFieldsValue().defList const defList = batchSetupForm.getFieldsValue().defList;
const newList = appendQuotationList(defList) const newList = appendQuotationList(defList);
triggerChange(newList) triggerChange(newList);
setBatchSetupModalOpen(false) setBatchSetupModalOpen(false);
} };
const onDeleteQuotation = (quotation) => { const onDeleteQuotation = (quotation) => {
modal.confirm({ modal.confirm({
title: '请确认', title: "请确认",
icon: <ExclamationCircleFilled />, icon: <ExclamationCircleFilled />,
content: '你要删除这条价格吗？', content: "你要删除这条价格吗？",
onOk() { onOk() {
deleteQuotation(quotation) deleteQuotation(quotation).catch((ex) => {
.catch(ex => { notification.error({
notification.error({ message: "Notification",
message: 'Notification', description: ex.message,
description: ex.message, placement: "top",
placement: 'top', duration: 4,
duration: 4, });
}) });
})
}, },
}) });
} };
const quotationColumns = [ const quotationColumns = [
// { title: 'id', dataIndex: 'id', width: 40, className: 'italic text-gray-400' }, // test: 0 // { title: 'id', dataIndex: 'id', width: 40, className: 'italic text-gray-400' }, // test: 0
// { title: 'WPI_SN', dataIndex: 'WPI_SN', width: 40, className: 'italic text-gray-400' }, // test: 0 // { title: 'WPI_SN', dataIndex: 'WPI_SN', width: 40, className: 'italic text-gray-400' }, // test: 0
{ title: t('products:adultPrice'), dataIndex: 'adult_cost', width: '5rem' }, { title: t("products:adultPrice"), dataIndex: "adult_cost", width: "5rem" },
{ title: t('products:childrenPrice'), dataIndex: 'child_cost', width: '5rem' }, {
{ title: t('products:currency'), dataIndex: 'currency', width: '4rem' }, title: t("products:childrenPrice"),
dataIndex: "child_cost",
width: "5rem",
},
{ title: t("products:currency"), dataIndex: "currency", width: "4rem" },
{ {
title: (<>{t('products:unit_name')} <Tooltip placement='top' overlayInnerStyle={{width: '24rem'}} title={t('products:FormTooltip.PriceUnit')}><QuestionCircleOutlined className='text-gray-500' /></Tooltip> </>), title: (
dataIndex: 'unit_id', <>
width: '6rem', {t("products:unit_name")}{" "}
<Tooltip
placement="top"
overlayInnerStyle={{ width: "24rem" }}
title={t("products:FormTooltip.PriceUnit")}
>
<QuestionCircleOutlined className="text-gray-500" />
</Tooltip>{" "}
</>
),
dataIndex: "unit_id",
width: "6rem",
render: (text) => t(`products:PriceUnit.${text}`), // (text === '0' ? '每人' : text === '1' ? '每团' : text), render: (text) => t(`products:PriceUnit.${text}`), // (text === '0' ? '每人' : text === '1' ? '每团' : text),
}, },
{ {
title: t('products:group_size'), title: t("products:group_size"),
dataIndex: 'group_size', dataIndex: "group_size",
width: '6rem', width: "6rem",
render: (_, record) => formatGroupSize(record.group_size_min,record.group_size_max), render: (_, record) =>
formatGroupSize(record.group_size_min, record.group_size_max),
}, },
{ {
title: (<>{t('products:use_dates')} <Tooltip placement='top' overlayInnerStyle={{width: '24rem'}} title={t('products:FormTooltip.UseDates')}><QuestionCircleOutlined className='text-gray-500' /></Tooltip> </>), title: (
dataIndex: 'use_dates', <>
{t("products:use_dates")}{" "}
<Tooltip
placement="top"
overlayInnerStyle={{ width: "24rem" }}
title={t("products:FormTooltip.UseDates")}
>
<QuestionCircleOutlined className="text-gray-500" />
</Tooltip>{" "}
</>
),
dataIndex: "use_dates",
// width: '6rem', // width: '6rem',
render: (_, record) => `${record.use_dates_start}-${record.use_dates_end}`, render: (_, record) =>
`${record.use_dates_start}-${record.use_dates_end}`,
}, },
{ title: t('products:Weekdays'), dataIndex: 'weekdays', width: '4rem' }, { title: t("products:Weekdays"), dataIndex: "weekdays", width: "4rem" },
{ {
title: t('products:operation'), title: t("products:operation"),
dataIndex: 'operation', dataIndex: "operation",
width: '10rem', width: "10rem",
render: (_, quotation) => { render: (_, quotation) => {
// const _rowEditable = [-1,3].includes(quotation.audit_state_id); // const _rowEditable = [-1,3].includes(quotation.audit_state_id);
const _rowEditable = true; // test: 0 const _rowEditable = true; // test: 0
return ( return (
<Space> <Space>
<Button type='link' disabled={!_rowEditable} onClick={() => onQuotationSeleted(quotation)}>{t('Edit')}</Button> <Button
<Button type='link' danger disabled={!_rowEditable} onClick={() => onDeleteQuotation(quotation)}>{t('Delete')}</Button> type="link"
disabled={!_rowEditable}
onClick={() => onQuotationSeleted(quotation)}
>
{t("Edit")}
</Button>
<Button
type="link"
danger
disabled={!_rowEditable}
onClick={() => onDeleteQuotation(quotation)}
>
{t("Delete")}
</Button>
</Space> </Space>
) );
}, },
}, },
] ];
return ( return (
<> <>
<h2>{t('products:EditComponents.Quotation')}</h2> <h2>{t("products:EditComponents.Quotation")}</h2>
<Table size='small' <Table
size="small"
bordered bordered
dataSource={quotationList} dataSource={quotationList}
columns={quotationColumns} columns={quotationColumns}
pagination={false} pagination={false}
/> />
{ {editable && (
editable &&
<Space> <Space>
<Button onClick={() => onNewQuotation()} type='primary' ghost style={{ marginTop: 16 }}> <Button
{t('products:addQuotation')} onClick={() => onNewQuotation()}
type="primary"
ghost
style={{ marginTop: 16 }}
>
{t("products:addQuotation")}
</Button> </Button>
<Button onClick={() => setBatchSetupModalOpen(true)} type='primary' ghost style={{ marginTop: 16, marginLeft: 16 }}> <Button
onClick={() => setBatchSetupModalOpen(true)}
type="primary"
ghost
style={{ marginTop: 16, marginLeft: 16 }}
>
批量设置 批量设置
</Button> </Button>
</Space> </Space>
} )}
<Modal <Modal
centered centered
title='批量设置价格' title="批量设置价格"
width={'640px'} width={"640px"}
open={isBatchSetupModalOpen} open={isBatchSetupModalOpen}
onOk={() => onBatchSetupFinish()} onOk={() => onBatchSetupFinish()}
onCancel={() => setBatchSetupModalOpen(false)} onCancel={() => setBatchSetupModalOpen(false)}
destroyOnClose destroyOnHidden
forceRender forceRender
> >
<Form <Form
labelCol={{ span: 3 }} labelCol={{ span: 3 }}
wrapperCol={{ span: 20 }} wrapperCol={{ span: 20 }}
form={batchSetupForm} form={batchSetupForm}
name='batchSetupForm' name="batchSetupForm"
autoComplete='off' autoComplete="off"
initialValues={batchSetupInitialValues} initialValues={batchSetupInitialValues}
> >
<Form.List name='defList'> <Form.List name="defList">
{(fields, { add, remove }) => ( {(fields, { add, remove }) => (
<Flex gap='middle' vertical> <Flex gap="middle" vertical>
{fields.map((field, index) => ( {fields.map((field, index) => (
<Card <Card
size='small' size="small"
title={index == 0 ? '全年' : index == 1 ? '特殊时间段' : '其他'} title={
index == 0 ? "全年" : index == 1 ? "特殊时间段" : "其他"
}
key={field.key} key={field.key}
extra={index == 0 ? <StarTwoTone twoToneColor='#eb2f96' /> : <CloseOutlined onClick={() => { extra={
remove(field.name) index == 0 ? (
}} />} <StarTwoTone twoToneColor="#eb2f96" />
) : (
<CloseOutlined
onClick={() => {
remove(field.name);
}}
/>
)
}
> >
<Form.Item label='币种' name={[field.name, 'currency']}> <Form.Item label="币种" name={[field.name, "currency"]}>
<Radio.Group> <Radio.Group>
<Radio value='RMB'>RMB</Radio> <Radio value="RMB">RMB</Radio>
<Radio value='USD'>USD</Radio> <Radio value="USD">USD</Radio>
<Radio value='THB'>THB</Radio> <Radio value="THB">THB</Radio>
<Radio value='JPY'>JPY</Radio> <Radio value="JPY">JPY</Radio>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Form.Item label='类型' name={[field.name, 'unitId']}> <Form.Item label="类型" name={[field.name, "unitId"]}>
<Radio.Group> <Radio.Group>
<Radio value='0'>每人</Radio> <Radio value="0">每人</Radio>
<Radio value='1'>每团</Radio> <Radio value="1">每团</Radio>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Form.Item label='周末' name={[field.name, 'weekend']}> <Form.Item label="周末" name={[field.name, "weekend"]}>
<Checkbox.Group <Checkbox.Group options={["5", "6", "7"]} />
options={['5', '6', '7']}
/>
</Form.Item> </Form.Item>
<Form.Item label='有效期'> <Form.Item label="有效期">
<Form.List name={[field.name, 'useDateList']}> <Form.List name={[field.name, "useDateList"]}>
{(useDateFieldList, useDateOptList) => ( {(useDateFieldList, useDateOptList) => (
<Flex gap='middle' vertical> <Flex gap="middle" vertical>
{useDateFieldList.map((useDateField, index) => ( {useDateFieldList.map((useDateField, index) => (
<Space key={useDateField.key}> <Space key={useDateField.key}>
<Form.Item noStyle name={[useDateField.name, 'useDate']}> <Form.Item
<RangePicker style={{ width: '100%' }} allowClear={true} inputReadOnly={true} presets={datePresets} placeholder={['From', 'Thru']} /> noStyle
name={[useDateField.name, "useDate"]}
>
<RangePicker
style={{ width: "100%" }}
allowClear={true}
inputReadOnly={true}
presets={datePresets}
placeholder={["From", "Thru"]}
/>
</Form.Item> </Form.Item>
{index == 0 ? <StarTwoTone twoToneColor='#eb2f96' /> : <CloseOutlined onClick={() => useDateOptList.remove(useDateField.name)} />} {index == 0 ? (
<StarTwoTone twoToneColor="#eb2f96" />
) : (
<CloseOutlined
onClick={() =>
useDateOptList.remove(useDateField.name)
}
/>
)}
</Space> </Space>
))} ))}
<Button type='dashed' icon={<PlusOutlined />} onClick={() => useDateOptList.add({'useDate': defaultUseDates})} block> <Button
type="dashed"
icon={<PlusOutlined />}
onClick={() =>
useDateOptList.add({ useDate: defaultUseDates })
}
block
>
新增有效期 新增有效期
</Button> </Button>
</Flex> </Flex>
)} )}
</Form.List> </Form.List>
</Form.Item> </Form.Item>
<Form.Item label='人等'> <Form.Item label="人等">
<Form.List name={[field.name, 'priceList']}> <Form.List name={[field.name, "priceList"]}>
{(priceFieldList, priceOptList) => ( {(priceFieldList, priceOptList) => (
<Flex gap='middle' vertical> <Flex gap="middle" vertical>
{priceFieldList.map((priceField, index) => ( {priceFieldList.map((priceField, index) => (
<Space key={priceField.key}> <Space key={priceField.key}>
<Form.Item noStyle name={[priceField.name, 'priceInput']}> <Form.Item
noStyle
name={[priceField.name, "priceInput"]}
>
<PriceCompactInput /> <PriceCompactInput />
</Form.Item> </Form.Item>
{index == 0 ? <StarTwoTone twoToneColor='#eb2f96' /> : <CloseOutlined onClick={() => priceOptList.remove(priceField.name)} />} {index == 0 ? (
<StarTwoTone twoToneColor="#eb2f96" />
) : (
<CloseOutlined
onClick={() =>
priceOptList.remove(priceField.name)
}
/>
)}
</Space> </Space>
))} ))}
<Button type='dashed' icon={<PlusOutlined />} onClick={() => priceOptList.add(defaultPriceValue)} block> <Button
type="dashed"
icon={<PlusOutlined />}
onClick={() =>
priceOptList.add(defaultPriceValue)
}
block
>
新增人等 新增人等
</Button> </Button>
</Flex> </Flex>
@ -358,7 +496,12 @@ const ProductInfoQuotation = ({ editable, ...props }) => {
</Form.Item> </Form.Item>
</Card> </Card>
))} ))}
<Button type='dashed' icon={<PlusOutlined />} onClick={() => add(defaultDefinitionValue)} block> <Button
type="dashed"
icon={<PlusOutlined />}
onClick={() => add(defaultDefinitionValue)}
block
>
新增设置 新增设置
</Button> </Button>
</Flex> </Flex>
@ -371,152 +514,180 @@ const ProductInfoQuotation = ({ editable, ...props }) => {
centered centered
okButtonProps={{ okButtonProps={{
autoFocus: true, autoFocus: true,
htmlType: 'submit', htmlType: "submit",
}} }}
title={t('account:detail')} title={t("products:EditComponents.Quotation")}
open={isQuotationModalOpen} onCancel={() => setQuotationModalOpen(false)} open={isQuotationModalOpen}
destroyOnClose onCancel={() => setQuotationModalOpen(false)}
destroyOnHidden
forceRender forceRender
modalRender={(dom) => ( modalRender={(dom) => (
<Form <Form
name='quotationForm' name="quotationForm"
form={quotationForm} form={quotationForm}
labelCol={{ span: 4 }} labelCol={{ span: 4 }}
wrapperCol={{ span: 20 }} wrapperCol={{ span: 20 }}
className='max-w-2xl' className="max-w-2xl"
onFinish={onQuotationFinish} onFinish={onQuotationFinish}
autoComplete='off' autoComplete="off"
> >
{dom} {dom}
</Form> </Form>
)} )}
> >
<Form.Item name='id' className='hidden' ><Input /></Form.Item> <Form.Item name="id" className="hidden">
<Form.Item name='key' className='hidden' ><Input /></Form.Item> <Input />
<Form.Item name='fresh' className='hidden' ><Input /></Form.Item> </Form.Item>
<Form.Item name="key" className="hidden">
<Input />
</Form.Item>
<Form.Item name="fresh" className="hidden">
<Input />
</Form.Item>
<Form.Item <Form.Item
label={t('products:adultPrice')} label={t("products:adultPrice")}
name='adult_cost' name="adult_cost"
rules={[ rules={[
{ {
required: true, required: true,
message: t('products:Validation.adultPrice'), message: t("products:Validation.adultPrice"),
}, },
]} ]}
> >
<InputNumber style={{ width: '100%' }} /> <InputNumber style={{ width: "100%" }} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t('products:childrenPrice')} label={t("products:childrenPrice")}
name='child_cost' name="child_cost"
rules={[ rules={[
{ {
required: true, required: true,
message: t('products:Validation.childrenPrice'), message: t("products:Validation.childrenPrice"),
}, },
]} ]}
> >
<InputNumber style={{ width: '100%' }} /> <InputNumber style={{ width: "100%" }} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t('products:currency')} label={t("products:currency")}
name='currency' name="currency"
rules={[ rules={[
{ {
required: true, required: true,
message: t('products:Validation.currency'), message: t("products:Validation.currency"),
}, },
]} ]}
> >
<Radio.Group> <Radio.Group>
<Radio value='RMB'>RMB</Radio> <Radio value="RMB">RMB</Radio>
<Radio value='USD'>USD</Radio> <Radio value="USD">USD</Radio>
<Radio value='THB'>THB</Radio> <Radio value="THB">THB</Radio>
<Radio value='JPY'>JPY</Radio> <Radio value="JPY">JPY</Radio>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t('products:unit_name')} label={t("products:unit_name")}
name='unit_id' name="unit_id"
rules={[ rules={[
{ {
required: true, required: true,
message: t('products:Validation.unit_name'), message: t("products:Validation.unit_name"),
}, },
]} ]}
> >
<Radio.Group> <Radio.Group>
<Radio value='0'>每人</Radio> <Radio value="0">每人</Radio>
<Radio value='1'>每团</Radio> <Radio value="1">每团</Radio>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Checkbox onChange={e => { <Checkbox
onChange={(e) => {
if (e.target.checked) { if (e.target.checked) {
quotationForm.setFieldValue('group_size_min', 0) quotationForm.setFieldValue("group_size_min", 1);
quotationForm.setFieldValue('group_size_max', 1000) quotationForm.setFieldValue("group_size_max", 1000);
setGroupSizeUnlimit(true) setGroupAllSize(true);
} else { } else {
quotationForm.setFieldValue('group_size_min', 1) setGroupAllSize(false);
if (!groupMaxUnlimit) quotationForm.setFieldValue('group_size_max', 999)
setGroupSizeUnlimit(false)
} }
}}><span className='font-bold'>不分人等(0~1000)</span></Checkbox> }}
>
<span className="font-bold">不分人等(1~1000)</span>
</Checkbox>
<Form.Item <Form.Item
label={t('products:group_size')} label={t("products:group_size")}
name='group_size_min' name="group_size_min"
rules={[ rules={[
{ {
required: true, required: true,
message: t('products:Validation.group_size_min'), message: t("products:Validation.group_size_min"),
},
{
validator: (_, value) => {
if (value > 1000 || value < 1) {
return Promise.reject("人等必须在 1~1000 之间");
}
return Promise.resolve();
},
}, },
]} ]}
> >
<InputNumber disabled={groupSizeUnlimit} min='0' max='999' style={{ width: '100%' }} /> <InputNumber disabled={groupAllSize} style={{ width: "100%" }} />
</Form.Item> </Form.Item>
<Checkbox disabled={groupSizeUnlimit} onChange={e => { <Checkbox
disabled={groupAllSize}
onChange={(e) => {
if (e.target.checked) { if (e.target.checked) {
quotationForm.setFieldValue('group_size_max', 1000) quotationForm.setFieldValue("group_size_max", 1000);
setGroupMaxUnlimit(true) setGroupMaxUnlimit(true);
} else { } else {
quotationForm.setFieldValue('group_size_max', 999) setGroupMaxUnlimit(false);
setGroupMaxUnlimit(false)
} }
}}><span className='font-bold'>不限(1000)</span></Checkbox> }}
>
<span className="font-bold">不限(1000)</span>
</Checkbox>
<Form.Item <Form.Item
label={t('products:group_size')} label={t("products:group_size")}
name='group_size_max' name="group_size_max"
rules={[ rules={[
{ {
required: true, required: true,
message: t('products:Validation.group_size_max'), message: t("products:Validation.group_size_max"),
},
{
validator: (_, value) => {
if (value > 1000 || value < 1) {
return Promise.reject("人等必须在 1~1000 之间");
}
return Promise.resolve();
},
}, },
]} ]}
> >
<InputNumber disabled={groupSizeUnlimit || groupMaxUnlimit} min='0' max='999' style={{ width: '100%' }} /> <InputNumber
disabled={groupAllSize || groupMaxUnlimit}
style={{ width: "100%" }}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t('products:use_dates')} label={t("products:use_dates")}
name='use_dates' name="use_dates"
rules={[ rules={[
{ {
required: true, required: true,
message: t('products:Validation.use_dates'), message: t("products:Validation.use_dates"),
}, },
]} ]}
> >
<RangePicker presets={datePresets} style={{ width: '100%' }} /> <RangePicker presets={datePresets} style={{ width: "100%" }} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item label={t("products:Weekdays")} name="weekdayList">
label={t('products:Weekdays')} <Checkbox.Group options={["5", "6", "7"]} />
name='weekdayList'
>
<Checkbox.Group options={['5', '6', '7']} />
</Form.Item> </Form.Item>
</Modal> </Modal>
</> </>
) );
} };
export default ProductInfoQuotation export default ProductInfoQuotation;

Write Preview
Loading…
Cancel
Save