产品编辑页面: 组件 新增

public/locales/en/products.json

@@ -115,5 +115,5 @@
     "Weekdays": "Weekdays"
   },
 
-  "#": "Products"
+  "#": "Product"
 }

src/views/products/Detail/NewProductModal.jsx

@@ -0,0 +1,115 @@
+import { useState, useEffect } from 'react';
+import { Form, Modal, Input } from 'antd';
+import { objectMapper } from '@/utils/commons';
+import { useTranslation } from 'react-i18next';
+
+import ProductsTypesSelector from '@/components/ProductsTypesSelector';
+import useProductsStore from '@/stores/Products/Index';
+import { useNewProductRecord, useProductsTypesMapVal } from '@/hooks/useProductsSets';
+import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
+
+export const NewProductsForm = ({ initialValues, onFormInstanceReady, ...props }) => {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    onFormInstanceReady(form);
+  }, []);
+
+  const onValuesChange = (changeValues, allValues) => {};
+
+  return (
+    <Form layout='horizontal' form={form} name='new_product_in_modal' initialValues={initialValues} onValuesChange={onValuesChange}>
+      <Form.Item name={`products_type`} label={t('products:ProductType')} rules={[{ required: true }]}>
+        <ProductsTypesSelector maxTagCount={1} mode={null} placeholder={t('All')} />
+      </Form.Item>
+      <Form.Item name={`title`} label={t('products:Title')}>
+        <Input />
+      </Form.Item>
+    </Form>
+  );
+};
+const formValuesMapper = (values) => {
+  const destinationObject = {
+    'products_types': {
+      key: 'products_types',
+      transform: (value) => {
+        return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '-1';
+      },
+    },
+  };
+  let dest = {};
+  const { ...omittedValue } = values;
+  dest = { ...omittedValue, ...objectMapper(values, destinationObject) };
+  for (const key in dest) {
+    if (Object.prototype.hasOwnProperty.call(dest, key)) {
+      dest[key] = typeof dest[key] === 'string' ? (dest[key] || '').trim() : dest[key];
+    }
+  }
+  // omit empty
+  // Object.keys(dest).forEach((key) => (dest[key] == null || dest[key] === '' || dest[key].length === 0) && delete dest[key]);
+  return dest;
+};
+/**
+ *
+ */
+export const NewProductModal = ({ source, action = '#' | 'o', open, onSubmit, onCancel, initialValues }) => {
+  const { t } = useTranslation();
+  const [formInstance, setFormInstance] = useState();
+  const [setEditingProduct] = useProductsStore((state) => [state.setEditingProduct]);
+
+  const [copyLoading, setCopyLoading] = useState(false);
+  const productsTypesMapVal = useProductsTypesMapVal();
+  const newProduct = useNewProductRecord();
+  const { language } = useDefaultLgc();
+  const handelAddProduct = (param) => {
+    const copyNewProduct = structuredClone(newProduct);
+    copyNewProduct.info.title = param.title;
+    copyNewProduct.info.product_type_id = productsTypesMapVal[param.products_type.value].value;
+    copyNewProduct.info.product_type_name = productsTypesMapVal[param.products_type.value].label;
+    copyNewProduct.lgc_details[0].lgc = language;
+    copyNewProduct.lgc_details[0].title = param.title;
+    setEditingProduct(copyNewProduct);
+    if (typeof onSubmit === 'function') {
+      onSubmit();
+    }
+    return false;
+  };
+  return (
+    <>
+      <Modal
+        width={600}
+        open={open}
+        title={`${t('New')}${t('products:#')}`}
+        okButtonProps={{
+          autoFocus: true,
+        }}
+        confirmLoading={copyLoading}
+        onCancel={() => {
+          onCancel();
+          formInstance?.resetFields();
+        }}
+        destroyOnClose
+        onOk={async () => {
+          try {
+            const values = await formInstance?.validateFields();
+            // formInstance?.resetFields();
+            const dest = formValuesMapper(values);
+            handelAddProduct(dest);
+          } catch (error) {
+            console.log('Failed:', error);
+          }
+        }}>
+        <NewProductsForm
+          action={action}
+          source={source}
+          initialValues={initialValues}
+          onFormInstanceReady={(instance) => {
+            setFormInstance(instance);
+          }}
+        />
+      </Modal>
+    </>
+  );
+};
+export default NewProductModal;

src/views/products/Detail/ProductInfoForm.jsx

@@ -22,7 +22,7 @@ import { PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFE
 
 const { RangePicker } = DatePicker;
 
-const InfoForm = ({ formInstance, onSubmit, onReset, onValuesChange, editable, showSubmit, confirmText, formName, loading, ...props }) => {
+const InfoForm = ({ onSubmit, onReset, onValuesChange, editable, showSubmit, confirmText, formName, loading, ...props }) => {
   const { t } = useTranslation('products');
   const isPermitted = useAuthStore((state) => state.isPermitted);
   const [agencyProducts, editingProduct, setEditingProduct] = useProductsStore((state) => [state.agencyProducts, state.editingProduct, state.setEditingProduct]);
@@ -49,7 +49,9 @@ const InfoForm = ({ formInstance, onSubmit, onReset, onValuesChange, editable, s
     return () => {};
   }, [editingProduct?.info?.id]);
 
-  const ignoreEditable = isPermitted(PERM_PRODUCTS_OFFER_AUDIT);
+  const topPerm = isPermitted(PERM_PRODUCTS_OFFER_AUDIT);
+  const isNew = isEmpty(editingProduct?.info?.id);
+  const ignoreEditable = topPerm || isNew;
 
   const onFinish = (values) => {
     console.log('Received values of form, origin form value: \n', values);