GHHub/src/views/products/Detail/CopyProducts.jsx

import { useState, useEffect } from 'react';
import { App, Form, Modal, DatePicker, Divider, Switch, Space, Flex, Radio } from 'antd';
import { isEmpty, objectMapper } from '@haina/utils-commons';
import { useTranslation } from 'react-i18next';

import DeptSelector from '@/components/DeptSelector';
import ProductsTypesSelector from '@/components/ProductsTypesSelector';
import VendorSelector from '@/components/VendorSelector';
import dayjs from 'dayjs';
import arraySupport from 'dayjs/plugin/arraySupport';
import { copyAgencyDataAction } from '@/stores/Products/Index';

// import useAuthStore from '@/stores/Auth';
import RequireAuth from '@/components/RequireAuth';
import { PERM_PRODUCTS_MANAGEMENT } from '@/config';
import ProductsSelector from '@/components/ProductsSelector';

dayjs.extend(arraySupport);

export const CopyProductsForm = ({ action, initialValues, onFormInstanceReady, source, ...props }) => {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const {
    sourceAgency: { travel_agency_id },
    sourceYear: use_year,
  } = source;

  // const isPermitted = useAuthStore((state) => state.isPermitted);
  const [showTypeOrItem, setShowTypeOrItem] = useState(1);

  useEffect(() => {
    onFormInstanceReady(form);
  }, []);

  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, copyType: 'type'}} onValuesChange={onValuesChange}>
      <Flex gap={8}>
        <div className='basis-96 shrink-0 flex-auto'>
          {action === '#' && (
            <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
              <Form.Item name={`dept`} label={t('products:Dept')} rules={[{ required: false, message: t('products:CopyFormMsg.requiredDept') }]}>
                <DeptSelector isLeaf={true} />
              </Form.Item>
            </RequireAuth>
          )}
          <Form.Item name={'copyType'}>
            <Radio.Group optionType="button" options={[{ key: 'type', value: 'type', label: t('按类型复制(多选)') }, { key: 'item', value: 'item', label: t('仅复制指定产品(多选)') }]}></Radio.Group>
          </Form.Item>
          <Form.Item name={`products_types`} label={t('products:ProductType')} dependencies={['products_list']} hidden={showTypeOrItem!==1} rules={[{ required: !(showTypeOrItem!==1) }]}>
            <ProductsTypesSelector maxTagCount={1} mode={'multiple'} placeholder={t('Select')} />
          </Form.Item>
          <Form.Item
            name={'products_list'}
            label={t('products:ProductName')} dependencies={['products_types']} hidden={showTypeOrItem!==2} rules={[{ required: !(showTypeOrItem!==2) }]}>
            <ProductsSelector params={{ travel_agency_id, use_year }} mode={'multiple'} placeholder={t('Select')} />
          </Form.Item>
          <Divider orientation='left'>{t('products:CopyFormMsg.copyTo')}:</Divider>
          {action === '#' && (
            <Form.Item
              name='agency'
              label={`${t('products:CopyFormMsg.target')}${t('products:Vendor')}`}
              rules={[{ required: true, message: t('products:CopyFormMsg.requiredVendor') }]}>
              <VendorSelector mode={null} placeholder={t('products:Vendor')} />
            </Form.Item>
          )}
          <Divider orientation='left'></Divider>
          <Form.Item noStyle>
            <Space.Compact className='w-full gap-2'>
              <Form.Item
                name={'source_use_year'}
                label={`${t('products:CopyFormMsg.Source')}${t('products:UseYear')}`}
                initialValue={dayjs([source.sourceYear, 1, 1])}
                rules={[{ required: true }]}>
                <DatePicker picker='year' allowClear />
              </Form.Item>

              <Form.Item name={'target_use_year'} label={`${t('products:CopyFormMsg.target')}${t('products:UseYear')}`} rules={[{ required: true }]}>
                <DatePicker picker='year' allowClear />
                {/* disabledDate={(current) => current <= dayjs([source.sourceYear, 12, 31])} */}
              </Form.Item>
            </Space.Compact>
          </Form.Item>
          <Form.Item name={'with_quote'} label={`${t('products:CopyFormMsg.withQuote')}`}>
            <Switch checkedChildren={'含报价金额'} unCheckedChildren={'仅人等+日期'} />
          </Form.Item>
        </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) => (
                <div key={item.value}>
                  {index + 1}.&nbsp;{item.label}
                </div>
              ))}
            </div>
          ) : (<></>)}
        </Form.Item>
      </Flex>
    </Form>
  );
};
const formValuesMapper = (values) => {
  const destinationObject = {
    'agency': {
      key: 'target_agency',
      transform: (value) => {
        return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
      },
    },
    'source_use_year': [{ key: 'source_use_year', transform: (arrVal) => (arrVal ? arrVal.format('YYYY') : '') }],
    'target_use_year': [{ key: 'target_use_year', transform: (arrVal) => (arrVal ? arrVal.format('YYYY') : '') }],
    'products_types': {
      key: 'products_types',
      transform: (value) => {
        return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '-1';
      },
    },
    'dept': {
      key: 'dept',
      transform: (value) => {
        return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
      },
    },
    'with_quote': { key: 'with_quote', transform: (value) => (value ? 1 : 0) },
    'products_list': { key: 'product_id_list', transform: (value) => (Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '') },
  };
  let dest = {};
  const { agency, year, products_list, ...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 CopyProductsFormModal = ({ source, action = '#' | 'o', open, onSubmit, onCancel, initialValues, loading, copyModalVisible, setCopyModalVisible }) => {
  const { t } = useTranslation();
  const { notification, message } = App.useApp();
  const [formInstance, setFormInstance] = useState();

  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);
    // setCopyLoading(false);
    // throw new Error('暂不提交');
    // const toID = param.target_agency;
    const success = await copyAgencyDataAction({ ...param, source_agency: source.sourceAgency.travel_agency_id }).catch((ex) => {
      notification.error({
        message: 'Notification',
        description: ex.message,
        placement: 'top',
        duration: 4,
      });
    });
    setCopyLoading(false);
    success ? message.success(t('Success')) : message.error(t('Failed'));

    if (success && typeof onSubmit === 'function') {
      onSubmit(param);
    }
    // setCopyModalVisible(false);
    // navigate(`/products/${toID}/${searchValues.use_year || 'all'}/${searchValues.audit_state || 'all'}/edit`);
  };
  return (
    <Modal
      width={800}
      open={open}
      title={`${t('Copy')}${t('products:#')}${t('products:Offer')}`}
      okText='确认'
      // cancelText='Cancel'
      okButtonProps={{
        autoFocus: true,
      }}
      confirmLoading={copyLoading}
      onCancel={() => {
        onCancel();
        formInstance?.resetFields();
      }}
      destroyOnClose destroyOnHidden
      onOk={async () => {
        try {
          const values = await formInstance?.validateFields();
          // formInstance?.resetFields();
          const dest = formValuesMapper(values);
          handleCopyAgency(dest);
        } catch (error) {
          console.log('Failed:', error);
        }
      }}>
      <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
        <div className='py-2'>
          {t('products:CopyFormMsg.Source')}: {source.sourceAgency.travel_agency_name}
          <Divider type={'vertical'} />
          {source.sourceYear}
        </div>
      </RequireAuth>
      <CopyProductsForm
        action={action}
        source={source}
        initialValues={initialValues}
        onFormInstanceReady={(instance) => {
          setFormInstance(instance);
        }}
      />
    </Modal>
  );
};
export default CopyProductsFormModal;