Просмотр исходного кода

weGZH 选视频强制先选公众号,videoContentList 透传 ghName

publishPlanModal:
- 未选公众号时'+ 添加视频'置灰且点击 warning;
- 计算 accountName 透传给 VideoSelectModal 作为 ghName。
videoSelectModal: 新增可选 ghName prop,带入 requestParams。
刘立冬 4 дней назад
Родитель
Сommit
33c43bacbe

+ 13 - 3
src/views/publishContent/weGZH/components/publishPlanModal/index.tsx

@@ -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 */}

+ 3 - 1
src/views/publishContent/weGZH/components/videoSelectModal/index.tsx

@@ -109,9 +109,10 @@ interface VideoSelectModalProps {
 	onOk: (selectedVideos: VideoItem[]) => void;
 	onOk: (selectedVideos: VideoItem[]) => void;
 	initialSelectedIds?: number[];
 	initialSelectedIds?: number[];
 	selectedVideos?: VideoItem[];
 	selectedVideos?: VideoItem[];
+	ghName?: string;
 }
 }
 
 
-const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible, onClose, onOk, initialSelectedIds = [], selectedVideos = [] }) => {
+const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible, onClose, onOk, initialSelectedIds = [], selectedVideos = [], ghName }) => {
 	const { videoCategoryOptions } = useVideoCategoryOptions();
 	const { videoCategoryOptions } = useVideoCategoryOptions();
 	const [category, setCategory] = useState<string>();
 	const [category, setCategory] = useState<string>();
 	const sort = VideoSortType.推荐指数;
 	const sort = VideoSortType.推荐指数;
@@ -176,6 +177,7 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible,
 			pageNum,
 			pageNum,
 			pageSize: PAGE_SIZE,
 			pageSize: PAGE_SIZE,
 			...(source ? { source } : {}),
 			...(source ? { source } : {}),
+			...(ghName ? { ghName } : {}),
 		};
 		};
 
 
 		const res = await http.post<VideoListResponse>(getVideoContentListApi, requestParams).catch(() => {
 		const res = await http.post<VideoListResponse>(getVideoContentListApi, requestParams).catch(() => {