perf: 产品管理: form : 必填

src/views/products/Detail/ProductInfo.jsx

@@ -42,7 +42,7 @@ const ProductInfo = ({ ...props }) => {
     values.travel_agency_id = activeAgency.travel_agency_id;
     const copyNewProduct = structuredClone(newProductRecord);
     const poster = {
-      'audit_state': '-1',
+      ...(topPerm ? {} : {'audit_state': '-1',}), // 高级权限: 不变更状态值
       // "create_date": dayjs().format('YYYY-MM-DD HH:mm:ss'),
       // "created_by": userId,
       'travel_agency_id': activeAgency.travel_agency_id,

src/views/products/Detail/ProductInfoForm.jsx

@@ -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';
@@ -12,6 +12,7 @@ import ProductInfoQuotation from './ProductInfoQuotation';
 import { useHTLanguageSetsMapVal } from '@/hooks/useHTLanguageSets';
 
 const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, showSubmit, confirmText, formName, ...props }) => {
+  const { notification } = App.useApp();
   const { t } = useTranslation('products');
   const HTLanguageSetsMapVal = useHTLanguageSetsMapVal();
   const [loading, editingProduct] = useProductsStore((state) => [state.loading, state.editingProduct]);
@@ -31,7 +32,7 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show
   const [editable, setEditable] = 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);
@@ -53,6 +54,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 = () => {
@@ -84,7 +91,7 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show
         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 })}
           {/* {showSubmit && (
@@ -196,8 +203,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 +219,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 +228,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 +304,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
     ),