perf: 产品管理: 复制`类型`/`产品`操作

src/views/products/Detail/CopyProducts.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { App, Form, Modal, DatePicker, Divider, Switch, Space, Flex } from 'antd';
+import { App, Form, Modal, DatePicker, Divider, Switch, Space, Flex, Radio } from 'antd';
 import { isEmpty, objectMapper } from '@/utils/commons';
 import { useTranslation } from 'react-i18next';
 
@@ -10,7 +10,7 @@ import dayjs from 'dayjs';
 import arraySupport from 'dayjs/plugin/arraySupport';
 import { copyAgencyDataAction } from '@/stores/Products/Index';
 
-import useAuthStore from '@/stores/Auth';
+// import useAuthStore from '@/stores/Auth';
 import RequireAuth from '@/components/RequireAuth';
 import { PERM_PRODUCTS_MANAGEMENT } from '@/config';
 import ProductsSelector from '@/components/ProductsSelector';
@@ -25,17 +25,21 @@ export const CopyProductsForm = ({ action, initialValues, onFormInstanceReady, s
     sourceYear: use_year,
   } = source;
 
-  const isPermitted = useAuthStore((state) => state.isPermitted);
+  // const isPermitted = useAuthStore((state) => state.isPermitted);
-  const [typeDisabled, setTypeDisabled] = useState(false);
+  const [showTypeOrItem, setShowTypeOrItem] = useState(1);
 
   useEffect(() => {
     onFormInstanceReady(form);
   }, []);
 
-  const onValuesChange = (changeValues, allValues) => {};
+  const onValuesChange = (changeValues, allValues) => {
+    if ('copyType' in changeValues) {
+      setShowTypeOrItem(changeValues.copyType === 'type' ? 1 : 2);
+    }
+  };
 
   return (
-    <Form layout='horizontal' form={form} name='form_in_modal' initialValues={initialValues} onValuesChange={onValuesChange}>
+    <Form layout='horizontal' form={form} name='form_in_modal' initialValues={{...initialValues, copyType: 'type'}} onValuesChange={onValuesChange}>
       <Flex gap={8}>
         <div className='basis-96 shrink-0 flex-auto'>
           {action === '#' && (
@@ -45,24 +49,15 @@ export const CopyProductsForm = ({ action, initialValues, onFormInstanceReady, s
               </Form.Item>
             </RequireAuth>
           )}
-          <Form.Item name={`products_types`} label={t('products:ProductType')} dependencies={['products_list']}  rules={[
+          <Form.Item name={'copyType'}>
-              ({ getFieldValue }) => ({
+            <Radio.Group optionType="button" options={[{ key: 'type', value: 'type', label: t('按类型复制(多选)') }, { key: 'item', value: 'item', label: t('仅复制指定产品(多选)') }]}></Radio.Group>
-                warningOnly: true,
+          </Form.Item>
-                validator: async () => {
+          <Form.Item name={`products_types`} label={t('products:ProductType')} dependencies={['products_list']} hidden={showTypeOrItem!==1} >
-                  if (!isEmpty(getFieldValue('products_list'))) {
+            <ProductsTypesSelector maxTagCount={1} mode={'multiple'} placeholder={t('All')} />
-                    // setTypeDisabled(true);
-                    return Promise.reject(new Error(t(`⚠勾选了复制的产品名称之后 🔽, 将忽略选择的类型 🔼`)));
-                  }
-                  // setTypeDisabled(false);
-                  return Promise.resolve();
-                },
-              }),
-            ]}>
-            <ProductsTypesSelector disabled={typeDisabled} maxTagCount={1} mode={'multiple'} placeholder={t('All')} />
           </Form.Item>
           <Form.Item
             name={'products_list'}
-            label={t('products:ProductName')} dependencies={['products_types']} >
+            label={t('products:ProductName')} dependencies={['products_types']} hidden={showTypeOrItem!==2} >
             <ProductsSelector params={{ travel_agency_id, use_year }} mode={'multiple'} placeholder={t('All')} />
           </Form.Item>
           <Divider orientation='left'>{t('products:CopyFormMsg.copyTo')}:</Divider>
@@ -97,7 +92,7 @@ export const CopyProductsForm = ({ action, initialValues, onFormInstanceReady, s
         </div>
 
         <Form.Item noStyle shouldUpdate>
-          {() => (
+          {() => showTypeOrItem===2 ? (
             <div className='max-h-96 overflow-auto divide-x-0 divide-y divide-solid divide-stone-200'>
               {!isEmpty(form.getFieldValue('products_list')) && <b>已选择的产品 预览:</b>}
               {(form.getFieldValue('products_list') || []).map((item, index) => (
@@ -106,7 +101,7 @@ export const CopyProductsForm = ({ action, initialValues, onFormInstanceReady, s
                 </div>
               ))}
             </div>
-          )}
+          ) : (<></>)}
         </Form.Item>
       </Flex>
     </Form>
@@ -160,6 +155,10 @@ export const CopyProductsFormModal = ({ source, action = '#' | 'o', open, onSubm
   const [copyLoading, setCopyLoading] = useState(false);
   const handleCopyAgency = async (param) => {
     param.target_agency = isEmpty(param.target_agency) ? source.sourceAgency.travel_agency_id : param.target_agency;
+    // 选了产品, 清空类型
+    param.products_types = param.copyType === 'item' ? '' : param.products_types;
+    param.product_id_list = param.copyType === 'type' ? '' : param.product_id_list;
+
     setCopyLoading(true);
     // debug:
     // console.log('ready params', param);
@@ -198,7 +197,7 @@ export const CopyProductsFormModal = ({ source, action = '#' | 'o', open, onSubm
         onCancel();
         formInstance?.resetFields();
       }}
-      destroyOnClose
+      destroyOnClose destroyOnHidden
       onOk={async () => {
         try {
           const values = await formInstance?.validateFields();