产品管理: 新增按钮

src/views/products/Detail.jsx

@@ -60,8 +60,6 @@ function Detail() {
               <ProductInfo />
             </div>
           </Flex>
-
-          <NewProductModal open={addProductVisible} onSubmit={() => setAddProductVisible(false)} onCancel={() => setAddProductVisible(false)} />
         </>
       )}
     </SecondHeaderWrapper>

src/views/products/Detail/Header.jsx

@@ -12,6 +12,7 @@ import { PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config';
 import dayjs from 'dayjs';
 import VendorSelector from '@/components/VendorSelector';
 import AuditStateSelector from '@/components/AuditStateSelector';
+import NewProductModal from './NewProductModal';
 
 const Header = ({ refresh, newActionable, ...props }) => {
   const location = useLocation();
@@ -174,12 +175,7 @@ const Header = ({ refresh, newActionable, ...props }) => {
       {/* 编辑 */}
       <Divider type='vertical' />
       {isEditPage && (
-        <RequireAuth subject={PERM_PRODUCTS_OFFER_PUT}>
+        <NewProductModal />
-          <Button size='small' type={'primary'} onClick={props.handleNewProduct}>
-            {t('New')}
-            {t('products:#')}
-          </Button>
-        </RequireAuth>
       )}
       {/* {activeAgencyState === 0 && ( */}
         <>

src/views/products/Detail/NewProductModal.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Form, Modal, Input } from 'antd';
+import { Form, Modal, Input, Button } from 'antd';
 import { objectMapper } from '@/utils/commons';
 import { useTranslation } from 'react-i18next';
 
@@ -7,7 +7,8 @@ import ProductsTypesSelector from '@/components/ProductsTypesSelector';
 import useProductsStore from '@/stores/Products/Index';
 import { useNewProductRecord, useProductsTypesMapVal } from '@/hooks/useProductsSets';
 import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
-import dayjs from 'dayjs'
+import RequireAuth from '@/components/RequireAuth';
+import { PERM_PRODUCTS_OFFER_PUT } from '@/config';
 
 export const NewProductsForm = ({ initialValues, onFormInstanceReady, ...props }) => {
   const { t } = useTranslation('products');
@@ -17,7 +18,7 @@ export const NewProductsForm = ({ initialValues, onFormInstanceReady, ...props }
     onFormInstanceReady(form);
   }, []);
 
-  const [pickType, setPickType] = useState({ value: "6"});
+  const [pickType, setPickType] = useState({ value: '6' });
   const onValuesChange = (changeValues, allValues) => {
     if ('products_type' in changeValues) {
       setPickType(changeValues.products_type);
@@ -60,12 +61,13 @@ const formValuesMapper = (values) => {
 /**
  *
  */
-export const NewProductModal = ({ source, action = '#' | 'o', open, onSubmit, onCancel, initialValues }) => {
+export const NewProductModal = ({ initialValues }) => {
   const { t } = useTranslation();
   const [formInstance, setFormInstance] = useState();
   const [setEditingProduct] = useProductsStore((state) => [state.setEditingProduct]);
   const [switchParams] = useProductsStore((state) => [state.switchParams]);
 
+  const [open, setOpen] = useState(false);
   const [copyLoading, setCopyLoading] = useState(false);
   const productsTypesMapVal = useProductsTypesMapVal();
   const newProduct = useNewProductRecord();
@@ -77,16 +79,24 @@ export const NewProductModal = ({ source, action = '#' | 'o', open, onSubmit, on
     copyNewProduct.info.product_type_name = productsTypesMapVal[param.products_type.value].label;
     copyNewProduct.lgc_details[0].lgc = language;
     copyNewProduct.lgc_details[0].title = param.title;
-    copyNewProduct.quotation[0].use_dates_start = (`${switchParams.use_year}-01-01`);
+    copyNewProduct.quotation[0].use_dates_start = `${switchParams.use_year}-01-01`;
-    copyNewProduct.quotation[0].use_dates_end = (`${switchParams.use_year}-12-31`);
+    copyNewProduct.quotation[0].use_dates_end = `${switchParams.use_year}-12-31`;
     setEditingProduct(copyNewProduct);
-    if (typeof onSubmit === 'function') {
+    // if (typeof onSubmit === 'function') {
-      onSubmit();
+    // onSubmit();
-    }
+    // }
+    setOpen(false);
     return false;
   };
   return (
     <>
+      <RequireAuth subject={PERM_PRODUCTS_OFFER_PUT}>
+        <Button size='small' type={'primary'} onClick={() => setOpen(true)}>
+          {t('New')}
+          {t('products:#')}
+        </Button>
+      </RequireAuth>
+
       <Modal
         width={600}
         open={open}
@@ -96,7 +106,8 @@ export const NewProductModal = ({ source, action = '#' | 'o', open, onSubmit, on
         }}
         confirmLoading={copyLoading}
         onCancel={() => {
-          onCancel();
+          // onCancel();
+          setOpen(false);
           formInstance?.resetFields();
         }}
         destroyOnClose
@@ -111,8 +122,6 @@ export const NewProductModal = ({ source, action = '#' | 'o', open, onSubmit, on
           }
         }}>
         <NewProductsForm
-          action={action}
-          source={source}
           initialValues={initialValues}
           onFormInstanceReady={(instance) => {
             setFormInstance(instance);

src/views/products/Detail/ProductInfo.jsx

@@ -9,6 +9,7 @@ import { isEmpty, pick } from '@/utils/commons';
 import ProductInfoForm from './ProductInfoForm';
 import { usingStorage } from '@/hooks/usingStorage';
 import Extras from './Extras';
+import NewProductModal from './NewProductModal';
 
 const ProductInfo = ({ ...props }) => {
   const { t } = useTranslation();
@@ -37,7 +38,7 @@ const ProductInfo = ({ ...props }) => {
     // console.log('editable', hasAuditPer, (notAudit && hasEditPer));
     setInfoEditable(topPerm || (!hasHT && hasEditPer));
 
-    const _priceEditable = [-1, 3].includes(activeAgency?.audit_state_id);
+    const _priceEditable = [-1, 3].includes(activeAgency?.audit_state_id) || isEmpty(editingProduct?.info?.id);
     setPriceEditable(topPerm || (_priceEditable && hasEditPer));
 
     const showExtras = topPerm && hasHT; // !isEmpty(editingProduct) &&
@@ -98,7 +99,11 @@ const ProductInfo = ({ ...props }) => {
         ]}
       />
       <Divider className='my-1' />
-      {isEmpty(editingProduct) ? null : (
+      {isEmpty(editingProduct) ? (
+        <div className=' my-2'>
+          <NewProductModal />
+        </div>
+      ) : (
         <>
           <h2>{t('products:EditComponents.info')}</h2>
           <ProductInfoForm {...{ editablePerm, infoEditable, priceEditable }} initialValues={editingProduct?.info} onSubmit={onSave} />

src/views/products/Detail/ProductInfoForm.jsx

@@ -42,7 +42,7 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editablePerm, infoEditabl
 
     setFormEditable(infoEditable || priceEditable);
 
-    const editable0 = isEmpty(editingProduct) ? false : editablePerm; // 空对象未操作
+    // const editable0 = isEmpty(editingProduct) ? false : editablePerm; // 空对象未操作
     setShowSave(infoEditable || priceEditable);
     // setEditable(editable0);
     return () => {};