多语种信息编辑

src/views/products/Detail/ProductInfoForm.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Form, Input, Row, Col, Select, DatePicker, Space, Button, InputNumber, Radio, Checkbox, Divider } from 'antd';
-import { objectMapper, at, isEmpty } from '@/utils/commons';
+import { objectMapper, at, isEmpty, isNotEmpty } from '@/utils/commons';
 import { DATE_FORMAT, SMALL_DATETIME_FORMAT } from '@/config';
 // import useFormStore from '@/stores/Form';
 import { useTranslation } from 'react-i18next';
@@ -19,6 +19,7 @@ import ProductInfoLgc from './ProductInfoLgc';
 import ProductInfoQuotation from './ProductInfoQuotation';
 import useAuthStore from '@/stores/Auth';
 import { PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config';
+import { useHTLanguageSets, useHTLanguageSetsMapVal } from '@/hooks/useHTLanguageSets';
 
 const { RangePicker } = DatePicker;
 
@@ -27,6 +28,7 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show
   const isPermitted = useAuthStore((state) => state.isPermitted);
   const [loading, setLoading, agencyProducts, editingProduct, setEditingProduct] = useProductsStore((state) => [state.loading, state.setLoading, state.agencyProducts, state.editingProduct, state.setEditingProduct]);
   const weekdays = useWeekdays();
+  const HTLanguageSetsMapVal = useHTLanguageSetsMapVal();
   const [form] = Form.useForm();
   const { sort, hides, fieldProps, fieldComProps } = {
     sort: '',
@@ -66,6 +68,10 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show
     }
   };
 
+  const onFinishFailed = ({ values, errorFields, }) => {
+    console.log('form validate failed', '\nform values:', values, '\nerrorFields', errorFields);
+  }
+
   const handleReset = () => {
     form.setFieldsValue({
       // 'DateType': undefined,
@@ -83,7 +89,14 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show
   };
   return (
     <>
-      <Form form={form} disabled={!(editable || false)} name={formName || 'product_info'} onFinish={onFinish} onValuesChange={onIValuesChange} initialValues={editingProduct?.info}>
+      <Form
+        form={form}
+        disabled={!(editable || false)}
+        name={formName || 'product_info'}
+        onFinish={onFinish}
+        onValuesChange={onIValuesChange}
+        initialValues={editingProduct?.info}
+        onFinishFailed={onFinishFailed}>
         <Row>
           {getFields({ sort, initialValue: editingProduct?.info, hides, shows, fieldProps, fieldComProps, form, t, dataSets: { weekdays }, editable, ignoreEditable })}
           {/* {showSubmit && (
@@ -97,7 +110,23 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show
           )} */}
         </Row>
         {/* <Divider className='my-1' /> */}
-        <Form.Item name={'lgc_details'} initialValue={[]}>
+        <Form.Item
+          name={'lgc_details'}
+          initialValue={[]}
+          rules={[
+            () => ({
+              transform(value) {
+                return value.filter(Boolean);
+              },
+              validator(_, value) {
+                const invalidLgcName = (value).filter(l => isEmpty(l.title)).map(x => HTLanguageSetsMapVal[x.lgc].label).join(', ');
+                if (isNotEmpty(invalidLgcName)) {
+                  return Promise.reject(new Error(`请完善多语种信息: ${invalidLgcName}`));
+                }
+                return Promise.resolve();
+              },
+            }),
+          ]}>
           <ProductInfoLgc editable={editable} ignoreEditable={ignoreEditable} formInstance={form} />
         </Form.Item>
 
@@ -321,14 +350,14 @@ const formValuesMapper = (values) => {
       {
         key: 'lgc_details',
         transform: (value) => {
-          const _val = value.filter((s) => !isEmpty(s));
+          const _val = value.filter((s) => s !== undefined).map((e) => ({ title: '', ...e, description: e.description || '' }));
           return _val || '';
         },
       },
       {
         key: 'lgc_details_mapped',
         transform: (value) => {
-          const _val = value.filter((s) => !isEmpty(s));
+          const _val = value.filter((s) => s !== undefined);
           return _val.reduce((r, c) => ({ ...r, [c.lgc]: c }), {});
         },
       },

src/views/products/Detail/ProductInfoLgc.jsx

@@ -1,31 +1,20 @@
-import { createContext, useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { Input, Tabs, Modal, Select, Form } from 'antd';
 import useProductsStore from '@/stores/Products/Index';
 import { useHTLanguageSets, useHTLanguageSetsMapVal } from '@/hooks/useHTLanguageSets';
-import RequireAuth from '@/components/RequireAuth';
-import useAuthStore from '@/stores/Auth';
-import { PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config';
 import { useTranslation } from 'react-i18next';
 import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
-import { cloneDeep, isEmpty } from '@/utils/commons';
+import { isEmpty } from '@/utils/commons';
 
 const ProductInfoLgc = ({ editable, ignoreEditable, formInstance, ...props }) => {
   const { t } = useTranslation();
   const { language: languageHT } = useDefaultLgc();
-  const [isPermitted, currentUser] = useAuthStore((state) => [state.isPermitted, state.currentUser]);
   const HTLanguageSetsMapVal = useHTLanguageSetsMapVal();
   const allLgcOptions = useHTLanguageSets();
-  const [agencyProducts, editingProduct, setEditingProduct] = useProductsStore((state) => [state.agencyProducts, state.editingProduct, state.setEditingProduct]);
-  const initialItems = [
-    {
-      label: 'Tab 1',
-      children: 'Content of Tab 1',
-      key: '1',
-    },
-  ];
+  const [ editingProduct, ] = useProductsStore((state) => [ state.editingProduct, ]);
   const [activeKey, setActiveKey] = useState();
   const [items, setItems] = useState([]);
-  const newTabIndex = useRef(0);
+
   useEffect(() => {
     const existsLgc = (editingProduct?.lgc_details || []).map((ele, li) => ({
       ...ele,
@@ -82,10 +71,10 @@ const ProductInfoLgc = ({ editable, ignoreEditable, formInstance, ...props }) =>
       ...lgcItem,
       children: (
         <>
-          <Form.Item name={[i, 'title']} label={t('products:Title')}>
+          <Form.Item name={[i, 'title']} label={t('products:Title')} initialValue={''} rules={[{required: true}]}>
             <Input />
           </Form.Item>
-          <Form.Item name={[i, 'description']} label={t('products:Description')}>
+          <Form.Item name={[i, 'description']} label={t('products:Description')} initialValue={''}>
             <Input.TextArea rows={3} />
           </Form.Item>
           <Form.Item hidden name={[i, 'lgc']} initialValue={lgcItem.value}>