|
@@ -1,4 +1,4 @@
|
|
|
-import React, { useEffect, useState } from 'react';
|
|
|
|
|
|
|
+import React, { useEffect, useMemo, useState } from 'react';
|
|
|
import { Modal, Form, Select, Button, Card, Typography, message } from 'antd';
|
|
import { Modal, Form, Select, Button, Card, Typography, message } from 'antd';
|
|
|
import { CloseOutlined, PlusOutlined, EditOutlined, CaretRightFilled } from '@ant-design/icons';
|
|
import { CloseOutlined, PlusOutlined, EditOutlined, CaretRightFilled } from '@ant-design/icons';
|
|
|
import VideoSelectModal from '../videoSelectModal';
|
|
import VideoSelectModal from '../videoSelectModal';
|
|
@@ -25,12 +25,17 @@ const AddPunlishPlanModal: React.FC<AddPunlishPlanModalProps> = ({ visible, isSu
|
|
|
const [form] = Form.useForm();
|
|
const [form] = Form.useForm();
|
|
|
const type = Form.useWatch('type', form);
|
|
const type = Form.useWatch('type', form);
|
|
|
const selectVideoType = Form.useWatch('selectVideoType', form);
|
|
const selectVideoType = Form.useWatch('selectVideoType', form);
|
|
|
|
|
+ const accountId = Form.useWatch('accountId', form);
|
|
|
const [selectedVideos, setSelectedVideos] = useState<VideoItem[]>([]);
|
|
const [selectedVideos, setSelectedVideos] = useState<VideoItem[]>([]);
|
|
|
const [isVideoSelectVisible, setIsVideoSelectVisible] = useState(false);
|
|
const [isVideoSelectVisible, setIsVideoSelectVisible] = useState(false);
|
|
|
const [playingVideo, setPlayingVideo] = useState<VideoItem | null>(null); // State for video player modal
|
|
const [playingVideo, setPlayingVideo] = useState<VideoItem | null>(null); // State for video player modal
|
|
|
const [editingVideo, setEditingVideo] = useState<VideoItem | null>(null); // State for editing modal
|
|
const [editingVideo, setEditingVideo] = useState<VideoItem | null>(null); // State for editing modal
|
|
|
const [initialSelectedVideoId, setInitialSelectedVideoId] = useState<string | null>(null); // State for initial video selection
|
|
const [initialSelectedVideoId, setInitialSelectedVideoId] = useState<string | null>(null); // State for initial video selection
|
|
|
const { accountOptions, getAccountList } = useAccountOptions();
|
|
const { accountOptions, getAccountList } = useAccountOptions();
|
|
|
|
|
+ const accountName = useMemo(
|
|
|
|
|
+ () => accountOptions.find(a => a.id === accountId)?.name,
|
|
|
|
|
+ [accountOptions, accountId]
|
|
|
|
|
+ );
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
if (actionType === 'edit') {
|
|
if (actionType === 'edit') {
|
|
@@ -100,6 +105,10 @@ const AddPunlishPlanModal: React.FC<AddPunlishPlanModalProps> = ({ visible, isSu
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const openVideoSelector = () => {
|
|
const openVideoSelector = () => {
|
|
|
|
|
+ if (!accountId) {
|
|
|
|
|
+ message.warning('请先选择公众号');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
setIsVideoSelectVisible(true);
|
|
setIsVideoSelectVisible(true);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
@@ -298,11 +307,11 @@ const AddPunlishPlanModal: React.FC<AddPunlishPlanModalProps> = ({ visible, isSu
|
|
|
{/* Add Video Button - Conditionally Rendered */}
|
|
{/* Add Video Button - Conditionally Rendered */}
|
|
|
{selectedVideos.length < 3 && (
|
|
{selectedVideos.length < 3 && (
|
|
|
<div
|
|
<div
|
|
|
- className="w-[240px] h-[316px] flex flex-col justify-center items-center border border-dashed border-gray-300 rounded cursor-pointer dark:border-gray-600 hover:border-blue-500 hover:text-blue-500"
|
|
|
|
|
|
|
+ className={`w-[240px] h-[316px] flex flex-col justify-center items-center border border-dashed rounded ${accountId ? 'border-gray-300 cursor-pointer dark:border-gray-600 hover:border-blue-500 hover:text-blue-500' : 'border-gray-200 text-gray-300 cursor-not-allowed bg-gray-50'}`}
|
|
|
onClick={openVideoSelector} // Open the drawer on click
|
|
onClick={openVideoSelector} // Open the drawer on click
|
|
|
>
|
|
>
|
|
|
<PlusOutlined className="text-2xl mb-2" />
|
|
<PlusOutlined className="text-2xl mb-2" />
|
|
|
- <Typography.Text>添加视频</Typography.Text>
|
|
|
|
|
|
|
+ <Typography.Text type={accountId ? undefined : 'secondary'}>添加视频</Typography.Text>
|
|
|
</div>
|
|
</div>
|
|
|
)}
|
|
)}
|
|
|
</div>)
|
|
</div>)
|
|
@@ -323,6 +332,7 @@ const AddPunlishPlanModal: React.FC<AddPunlishPlanModalProps> = ({ visible, isSu
|
|
|
onOk={handleVideoSelectionOk}
|
|
onOk={handleVideoSelectionOk}
|
|
|
selectedVideos={selectedVideos}
|
|
selectedVideos={selectedVideos}
|
|
|
initialSelectedIds={initialSelectedVideoId ? [Number(initialSelectedVideoId)] : selectedVideos.map(v => v.videoId)}
|
|
initialSelectedIds={initialSelectedVideoId ? [Number(initialSelectedVideoId)] : selectedVideos.map(v => v.videoId)}
|
|
|
|
|
+ ghName={accountName}
|
|
|
/>
|
|
/>
|
|
|
|
|
|
|
|
{/* Video Player Modal */}
|
|
{/* Video Player Modal */}
|