fix

src/pages/launchSystemV3/material/cloudNew/selectComponentsUnit.tsx

@@ -7,13 +7,13 @@ import '../../tencentAdPutIn/index.less'
 import { EyeOutlined, SortAscendingOutlined } from "@ant-design/icons"
 import PlayVideo from "./playVideo"
 import Lazyimg from "react-lazyimg-component"
-import SyncCloudSc from "./syncCloudSc"
 import { checkAccountUnitApi } from "@/services/launchAdq/adAuthorize"
 import { getCreativeComponentDataListApi, GetCreativeComponentProps } from "@/services/adqV3/global"
 import { COMPONENT_GENERATION_TYPE_ENUM, COMPONENT_SUB_TYPE, getComponentType } from "../../tencenTasset/manageComponent/const"
 import SelectComponentsUnitSearch from "./selectComponentsUnitSearch"
 import { addOnlyDataApi, getOnlyDataApi } from "@/services/adqV3"
 import { showField2List } from "./const"
+import SyncCloudComponent from "./syncCloudComponent"
 
 const { Text, Paragraph } = Typography;
 
@@ -280,8 +280,8 @@ const SelectComponentsUnit: React.FC<Props> = ({ num: count, defaultParams, chec
                                     <span>已选 <span style={{ color: '#1890FF' }}>{checkedFolderList?.length || 0}</span>/{num} 个素材</span>
                                     {checkedFolderList.length > 0 && <a style={{ color: 'red' }} onClick={() => setCheckedFolderList([])}>清除所有</a>}
                                     {sortData?.sortField && <Text>「排序-{showField2List.find(item => item.value === sortData.sortField)?.label}-{sortData.sortType ? '正序' : '倒序'}」</Text>}
-                                    {/* 同步素材 */}
-                                    <SyncCloudSc
+                                    {/* 同步组件 */}
+                                    <SyncCloudComponent
                                         accountId={unitAccountId}
                                     />
                                 </div>

src/pages/launchSystemV3/material/cloudNew/syncCloudComponent.tsx

@@ -0,0 +1,86 @@
+import { useAjax } from "@/Hook/useAjax"
+import { syncComponentApi } from "@/services/adqV3/global"
+import { DatePicker, Form, message, Modal } from "antd"
+import { RangePickerProps } from "antd/lib/date-picker"
+import React, { useState } from "react"
+import moment from "moment"
+import '../../tencentAdPutIn/index.less'
+
+/**
+ * 同步组件
+ * @returns 
+ */
+const SyncCloudComponent: React.FC<{ onChange?: () => void, accountId: number }> = ({ onChange, accountId }) => {
+
+    /********************************************/
+    const [form] = Form.useForm()
+
+    const syncComponent = useAjax((params) => syncComponentApi(params))
+    const [visible, setVisible] = useState<boolean>(false)
+    /********************************************/
+
+    const handleOk = () => {
+        form.validateFields().then(valid => {
+            const { createTime, ...params } = valid
+            syncComponent.run({ ...params, accountIds: [accountId], startTime: moment(createTime[0]).format('YYYY-MM-DD'), endTime: moment(createTime[1]).format('YYYY-MM-DD') }).then(res => {
+                if (res) {
+                    message.success('同步成功')
+                    onChange?.()
+                    setVisible(false)
+                }
+            })
+        })
+    }
+
+    const disabledDate: RangePickerProps['disabledDate'] = current => {
+        // 禁止选择当前日期之前的日期  
+        return current && current > moment().endOf('day');
+    };
+
+    return <>
+        <a onClick={() => setVisible(true)}>同步组件</a>
+        {visible && <Modal
+            title={<strong>同步组件</strong>}
+            open={visible}
+            onCancel={() => {
+                setVisible(false)
+            }}
+            onOk={handleOk}
+            className="modalResetCss"
+            confirmLoading={syncComponent.loading}
+            okText={'同步'}
+        >
+            <Form
+                name="basicSyncCloudSc"
+                form={form}
+                layout='vertical'
+                autoComplete="off"
+                initialValues={{ type: 'image', createTime: [moment(), moment()] }}
+            >
+                <Form.Item
+                    label={<strong>创建时间</strong>}
+                    name="createTime"
+                    rules={[
+                        { required: true, message: '请选择创建时间' },
+                        () => ({
+                            validator(_, value) {
+                                if (value) {
+                                    const [startDate, endDate] = value;
+                                    // 检查选择的日期范围是否超过30天  
+                                    if (endDate.diff(startDate, 'days') >= 30) {
+                                        return Promise.reject(new Error('选择的日期范围不能超过30天！'));
+                                    }
+                                }
+                                return Promise.resolve();
+                            },
+                        })
+                    ]}
+                >
+                    <DatePicker.RangePicker disabledDate={disabledDate} />
+                </Form.Item>
+            </Form>
+        </Modal>}
+    </>
+}
+
+export default React.memo(SyncCloudComponent)

src/services/adqV3/global.ts

@@ -1277,4 +1277,16 @@ export async function delComponentApi({componentId, ...params}: { adAccountId: n
         params,
         data: componentId
     })
+}
+
+/**
+ * 同步组件
+ * @param param0 
+ * @returns 
+ */
+export async function syncComponentApi(data: { accountIds: number[], startTime: string, endTime: string }) {
+    return request(api + `/adq/creative/component/syncBatch`, {
+        method: 'PUT',
+        data
+    })
 }