weCom 内容库:tab 右侧新增「已选视频导出」入口,弹窗选日期范围后调 /qw/export 拉 Excel。

沿用当前 tab(社群/自动回复)+ 顶部「场景/子渠道/视频标题」筛选条件;
日期可选,不选则后端默认导出当天;最多 2000 条由后端硬截。

src/http/api.ts

@@ -30,6 +30,7 @@ export const getGzhPlanListApi = `${import.meta.env.VITE_API_URL}/contentPlatfor
 export const saveGzhPlanApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/gzh/save`
 export const deleteGzhPlanApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/gzh/delete`
 export const getQwPlanListApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/qw/list`
+export const qwPlanExportApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/qw/export`
 export const saveQwPlanApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/qw/save`
 export const deleteQwPlanApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/qw/delete`
 export const getVideoContentCategoryListApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/videoContentCategoryList`

src/views/publishContent/weCom/index.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { Space, Table, Button, Input, Select, Tabs, message, Spin, Popconfirm } from 'antd';
+import { Space, Table, Button, Input, Select, Tabs, message, Spin, Popconfirm, DatePicker, Modal } from 'antd';
 import type { TableProps } from 'antd';
+import type { Dayjs } from 'dayjs';
 import styles from './index.module.css';
 import { AddWeComPlanParam, WeComPlan, WeComPlanListResponse, WeComPlanType } from './type';
 import request from '@src/http/index';
-import { deleteQwPlanApi, getQwPlanListApi, getShareQrLink, saveQwPlanApi } from "@src/http/api"
+import { deleteQwPlanApi, getQwPlanListApi, getShareQrLink, qwPlanExportApi, saveQwPlanApi } from "@src/http/api"
 import LinkDetailModal from './components/linkDetailModal';
 import PlanDetailModal from './components/planDetailModal';
 import http from '@src/http/index';
@@ -13,6 +14,8 @@ import VideoPlayModal from './components/videoPlayModal';
 import modal from 'antd/es/modal';
 import AddPlanModal from './components/addPlanModal';
 import { QRCodeSVG } from 'qrcode.react';
+
+const { RangePicker } = DatePicker;
 // Define a type for the expected API response (adjust if needed based on actual API)
 const TableHeight = window.innerHeight - 380;
 const WeGZHContent: React.FC = () => {
@@ -39,6 +42,11 @@ const WeGZHContent: React.FC = () => {
 	const [isVideoPlayModalVisible, setIsVideoPlayModalVisible] = useState<boolean>(false);
 	const [isAddPlanLoading, setIsAddPlanLoading] = useState<boolean>(false);
 
+	// 已选视频导出 modal
+	const [isExportModalVisible, setIsExportModalVisible] = useState<boolean>(false);
+	const [exportDateRange, setExportDateRange] = useState<[Dayjs, Dayjs] | undefined>(undefined);
+	const [isExporting, setIsExporting] = useState<boolean>(false);
+
 	const getTableData = (_pageNum?: number, _pageSize?: number) => {
 		if (_pageNum) { 
 			setPageNum(_pageNum);
@@ -191,6 +199,37 @@ const WeGZHContent: React.FC = () => {
 		setIsShowAddPunlishPlan(true);
 	}
 
+	const handleExport = () => {
+		setIsExporting(true);
+		request.post<string>(qwPlanExportApi, {
+			type: +activeKey,
+			scene: selectedPublisher,
+			subChannel,
+			title: videoTitle,
+			startDate: exportDateRange?.[0]?.format('YYYY-MM-DD'),
+			endDate: exportDateRange?.[1]?.format('YYYY-MM-DD'),
+		}).then(res => {
+			if (res.code === 0 && res.data) {
+				const a = document.createElement('a');
+				a.href = res.data;
+				a.target = '_blank';
+				a.rel = 'noopener noreferrer';
+				document.body.appendChild(a);
+				a.click();
+				document.body.removeChild(a);
+				message.success('已开始下载');
+				setIsExportModalVisible(false);
+				setExportDateRange(undefined);
+			} else {
+				message.error(res.msg || '导出失败');
+			}
+		}).catch(err => {
+			message.error(err.msg || '导出失败');
+		}).finally(() => {
+			setIsExporting(false);
+		});
+	}
+
 	const handleAddPlan = (param: AddWeComPlanParam) => {
 		setIsAddPlanLoading(true);
 		const { type, subChannel, videoList } = param;
@@ -279,7 +318,14 @@ const WeGZHContent: React.FC = () => {
 					activeKey={activeKey}
 					onChange={(key: string) => setActiveKey(key as WeComPlanType)}
 					tabBarExtraContent={
-						{ right: <Button type="primary" onClick={addPunlishPlan}>+ 创建发布</Button> }}
+						{
+							right: (
+								<Space>
+									<Button onClick={() => setIsExportModalVisible(true)}>已选视频导出</Button>
+									<Button type="primary" onClick={addPunlishPlan}>+ 创建发布</Button>
+								</Space>
+							)
+						}}
 				/>		
 				{/* 表格区域 */}
 				<Table
@@ -328,6 +374,28 @@ const WeGZHContent: React.FC = () => {
 					videoUrl={editPlanData?.video || ''}
 					title={editPlanData?.title || ''}
 				/>
+				<Modal
+					title="已选视频导出"
+					open={isExportModalVisible}
+					onCancel={() => setIsExportModalVisible(false)}
+					onOk={handleExport}
+					confirmLoading={isExporting}
+					okText="确认导出"
+					cancelText="取消"
+				>
+					<div className="flex items-center gap-2 my-4">
+						<span className="text-gray-600">日期范围:</span>
+						<RangePicker
+							placeholder={['开始日期', '结束日期']}
+							value={exportDateRange}
+							onChange={(dates) => setExportDateRange(dates as [Dayjs, Dayjs] | undefined)}
+							allowClear
+						/>
+					</div>
+					<div className="text-gray-400 text-sm">
+						不选日期默认导出当天数据;最多导出 2000 条;会沿用当前页的「场景 / 子渠道 / 视频标题」筛选条件。
+					</div>
+				</Modal>
 			</div>
 		</Spin>
 	);