|
|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
|
import { Form, Input, Row, Col, Select, Button, InputNumber, Checkbox } from 'antd';
|
|
|
|
|
import { App, Form, Input, Row, Col, Select, Button, InputNumber, Checkbox } from 'antd';
|
|
|
|
|
import { objectMapper, isEmpty, isNotEmpty } from '@/utils/commons';
|
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
|
import { useWeekdays } from '@/hooks/useDatePresets';
|
|
|
|
|
@ -11,7 +11,8 @@ import ProductInfoLgc from './ProductInfoLgc';
|
|
|
|
|
import ProductInfoQuotation from './ProductInfoQuotation';
|
|
|
|
|
import { useHTLanguageSetsMapVal } from '@/hooks/useHTLanguageSets';
|
|
|
|
|
|
|
|
|
|
const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, showSubmit, confirmText, formName, ...props }) => {
|
|
|
|
|
const InfoForm = ({ onSubmit, onReset, onValuesChange, editablePerm, infoEditable, priceEditable, showSubmit, confirmText, formName, ...props }) => {
|
|
|
|
|
const { notification } = App.useApp();
|
|
|
|
|
const { t } = useTranslation('products');
|
|
|
|
|
const HTLanguageSetsMapVal = useHTLanguageSetsMapVal();
|
|
|
|
|
const [loading, editingProduct] = useProductsStore((state) => [state.loading, state.editingProduct]);
|
|
|
|
|
@ -28,19 +29,24 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show
|
|
|
|
|
const filedsets = useProductsTypesFieldsets(editingProduct?.info?.product_type_id);
|
|
|
|
|
const shows = filedsets[0];
|
|
|
|
|
|
|
|
|
|
const [editable, setEditable] = useState(true);
|
|
|
|
|
// const [editable, setEditable] = useState(true);
|
|
|
|
|
const [formEditable, setFormEditable] = useState(true);
|
|
|
|
|
const [showSave, setShowSave] = useState(true);
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
form.resetFields();
|
|
|
|
|
form.setFieldValue('city', { value: editingProduct?.info?.city_id, label: editingProduct?.info?.city_name });
|
|
|
|
|
form.setFieldValue('city', editingProduct?.info?.city_id ? { value: editingProduct?.info?.city_id, label: editingProduct?.info?.city_name } : undefined);
|
|
|
|
|
form.setFieldValue('dept', { value: editingProduct?.info?.dept_id, label: editingProduct?.info?.dept_name });
|
|
|
|
|
const lgc_details_mapped = (editingProduct?.lgc_details || []).reduce((r, c) => ({ ...r, [c.lgc]: c }), {});
|
|
|
|
|
form.setFieldValue('lgc_details_mapped', lgc_details_mapped);
|
|
|
|
|
form.setFieldValue('quotation', editingProduct?.quotation);
|
|
|
|
|
|
|
|
|
|
const editable0 = isEmpty(editingProduct) ? false : _editable; // 空对象未操作
|
|
|
|
|
setEditable(editable0);
|
|
|
|
|
setFormEditable(infoEditable || priceEditable);
|
|
|
|
|
|
|
|
|
|
// const editable0 = isEmpty(editingProduct) ? false : editablePerm; // 空对象未操作
|
|
|
|
|
setShowSave(infoEditable || priceEditable);
|
|
|
|
|
// setEditable(editable0);
|
|
|
|
|
return () => {};
|
|
|
|
|
}, [editingProduct?.info?.id, _editable]);
|
|
|
|
|
}, [editingProduct?.info?.id, editablePerm, infoEditable, priceEditable]);
|
|
|
|
|
|
|
|
|
|
const onFinish = (values) => {
|
|
|
|
|
console.log('Received values of form, origin form value: \n', values);
|
|
|
|
|
@ -53,6 +59,12 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show
|
|
|
|
|
|
|
|
|
|
const onFinishFailed = ({ values, errorFields }) => {
|
|
|
|
|
console.log('form validate failed', '\nform values:', values, '\nerrorFields', errorFields);
|
|
|
|
|
notification.warning({
|
|
|
|
|
message: '数据未填写完整',
|
|
|
|
|
// description: '数据未填写完整',
|
|
|
|
|
placement: 'top',
|
|
|
|
|
duration: 4,
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleReset = () => {
|
|
|
|
|
@ -77,16 +89,16 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show
|
|
|
|
|
<>
|
|
|
|
|
<Form
|
|
|
|
|
form={form}
|
|
|
|
|
disabled={!editable}
|
|
|
|
|
disabled={!formEditable}
|
|
|
|
|
name={formName || 'product_info'}
|
|
|
|
|
// preserve={false}
|
|
|
|
|
onFinish={onFinish}
|
|
|
|
|
onValuesChange={onIValuesChange}
|
|
|
|
|
// onFieldsChange={onFieldsChange}
|
|
|
|
|
initialValues={editingProduct?.info}
|
|
|
|
|
onFinishFailed={onFinishFailed}>
|
|
|
|
|
onFinishFailed={onFinishFailed} scrollToFirstError >
|
|
|
|
|
<Row>
|
|
|
|
|
{getFields({ sort, initialValue: editingProduct?.info, hides, shows, fieldProps, fieldComProps, form, t, dataSets: { weekdays }, editable })}
|
|
|
|
|
{getFields({ sort, initialValue: editingProduct?.info, hides, shows, fieldProps, fieldComProps, form, t, dataSets: { weekdays }, editable: infoEditable })}
|
|
|
|
|
{/* {showSubmit && (
|
|
|
|
|
<Col flex='1 0 90px' className='flex justify-end items-start'>
|
|
|
|
|
<Space align='center'>
|
|
|
|
|
@ -118,11 +130,11 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show
|
|
|
|
|
},
|
|
|
|
|
}),
|
|
|
|
|
]}>
|
|
|
|
|
<ProductInfoLgc editable={editable} formInstance={form} />
|
|
|
|
|
<ProductInfoLgc editable={infoEditable} formInstance={form} />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
|
|
|
|
|
<Form.Item name='quotation'>
|
|
|
|
|
<ProductInfoQuotation editable={editable} />
|
|
|
|
|
<ProductInfoQuotation editable={priceEditable} />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
|
|
|
|
|
<Form.Item hidden name={'id'} label={'ID'}>
|
|
|
|
|
@ -131,7 +143,7 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show
|
|
|
|
|
{/* <Form.Item hidden name={'title'} label={'title'}>
|
|
|
|
|
<Input />
|
|
|
|
|
</Form.Item> */}
|
|
|
|
|
{editable && (
|
|
|
|
|
{showSave && (
|
|
|
|
|
<Form.Item>
|
|
|
|
|
<div className='flex justify-around'>
|
|
|
|
|
<Button type='primary' htmlType='submit' loading={loading}>
|
|
|
|
|
@ -196,8 +208,8 @@ function getFields(props) {
|
|
|
|
|
item(
|
|
|
|
|
'city',
|
|
|
|
|
99,
|
|
|
|
|
<Form.Item name='city' label={t('City')} {...fieldProps.city} tooltip={t('FormTooltip.City')}>
|
|
|
|
|
<CitySelector {...styleProps} {...editableProps('city_id')} />
|
|
|
|
|
<Form.Item name='city' label={t('City')} {...fieldProps.city} rules={[{ required: true }]} tooltip={t('FormTooltip.City')}>
|
|
|
|
|
<CitySelector {...styleProps} {...editableProps('city_id')} placeholder={t('FormTooltip.City')} />
|
|
|
|
|
</Form.Item>,
|
|
|
|
|
fieldProps?.city?.col || midCol
|
|
|
|
|
),
|
|
|
|
|
@ -212,7 +224,7 @@ function getFields(props) {
|
|
|
|
|
item(
|
|
|
|
|
'duration',
|
|
|
|
|
99,
|
|
|
|
|
<Form.Item name='duration' label={t('Duration')} {...fieldProps.duration} tooltip={t('FormTooltip.Duration')}>
|
|
|
|
|
<Form.Item name='duration' label={t('Duration')} {...fieldProps.duration} rules={[{ required: true, type: 'number', min: 0}]} tooltip={t('FormTooltip.Duration')}>
|
|
|
|
|
<InputNumber suffix={'H'} max={24} {...styleProps} {...editableProps('duration')} />
|
|
|
|
|
{/* <Input allowClear {...fieldComProps.duration} suffix={'H'} /> */}
|
|
|
|
|
</Form.Item>,
|
|
|
|
|
@ -221,8 +233,8 @@ function getFields(props) {
|
|
|
|
|
item(
|
|
|
|
|
'km',
|
|
|
|
|
99,
|
|
|
|
|
<Form.Item name='km' label={t('KM')} {...fieldProps.km} tooltip={t('FormTooltip.KM')}>
|
|
|
|
|
<InputNumber suffix={'KM'} min={0.1} {...styleProps} {...editableProps('km')} />
|
|
|
|
|
<Form.Item name='km' label={t('KM')} {...fieldProps.km} rules={[{ required: true, },]} tooltip={t('FormTooltip.KM')}>
|
|
|
|
|
<InputNumber suffix={'KM'} min={0.1} {...styleProps} {...editableProps('km')} placeholder={t('FormTooltip.KM')} />
|
|
|
|
|
</Form.Item>,
|
|
|
|
|
fieldProps?.km?.col || midCol
|
|
|
|
|
),
|
|
|
|
|
@ -297,7 +309,7 @@ function getFields(props) {
|
|
|
|
|
'remarks',
|
|
|
|
|
99,
|
|
|
|
|
<Form.Item name='remarks' label={t('Remarks')} {...fieldProps.remarks} tooltip={t('FormTooltip.Remarks')}>
|
|
|
|
|
<Input.TextArea allowClear rows={2} maxLength={2000} {...fieldComProps.remarks} {...styleProps} {...editableProps('remarks')} />
|
|
|
|
|
<Input.TextArea allowClear rows={2} maxLength={2000} showCount {...fieldComProps.remarks} {...styleProps} {...editableProps('remarks')} />
|
|
|
|
|
</Form.Item>,
|
|
|
|
|
fieldProps?.remarks?.col || 24
|
|
|
|
|
),
|
|
|
|
|
|
Jimmy Liow
11 months ago