|
|
@@ -1,5 +1,5 @@
|
|
|
-import React, { useEffect, useState } from 'react';
|
|
|
-import { Modal, Form, Input, Select, Button, Card, Typography, message } from 'antd';
|
|
|
+import React, { useEffect, useMemo, useState } from 'react';
|
|
|
+import { Modal, Form, Input, Select, Button, Card, Typography, message, InputNumber } from 'antd';
|
|
|
import { CloseOutlined, PlusOutlined, EditOutlined, CaretRightFilled } from '@ant-design/icons';
|
|
|
import VideoSelectModal from '@src/views/publishContent/weGZH/components/videoSelectModal';
|
|
|
import EditTitleCoverModal from '@src/views/publishContent/weGZH/components/editTitleCoverModal';
|
|
|
@@ -9,6 +9,7 @@ import { VideoSearchPlanType } from '@src/views/publishContent/weCom/type';
|
|
|
import useLogger from '@src/hooks/useLogger';
|
|
|
import { XcxPlanDataType } from '../../hooks/useXcxPlanList';
|
|
|
import { useAudiencePackageOptions } from '../../hooks/useAudiencePackageOptions';
|
|
|
+import { getUserInfo } from '@src/http/sso';
|
|
|
|
|
|
const { Paragraph } = Typography;
|
|
|
|
|
|
@@ -28,16 +29,20 @@ const XcxPublishPlanModal: React.FC<XcxPublishPlanModalProps> = ({
|
|
|
const [form] = Form.useForm();
|
|
|
const audiencePackage = Form.useWatch('audiencePackage', form);
|
|
|
const [selectedVideos, setSelectedVideos] = useState<VideoItem[]>([]);
|
|
|
+ const [videoCounts, setVideoCounts] = useState<Record<number, number | undefined>>({});
|
|
|
const [isVideoSelectVisible, setIsVideoSelectVisible] = useState(false);
|
|
|
const [playingVideo, setPlayingVideo] = useState<VideoItem | null>(null);
|
|
|
const [editingVideo, setEditingVideo] = useState<VideoItem | null>(null);
|
|
|
const { uploadLogVideoCreatePublish } = useLogger();
|
|
|
const { options: audiencePackageOptions } = useAudiencePackageOptions();
|
|
|
+ const userType = useMemo(() => getUserInfo()?.type, []);
|
|
|
+ const canMultiLink = userType === 2 || userType === 3;
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (!visible) return;
|
|
|
form.resetFields();
|
|
|
setSelectedVideos([]);
|
|
|
+ setVideoCounts({});
|
|
|
}, [visible]);
|
|
|
|
|
|
const handleOk = () => {
|
|
|
@@ -48,7 +53,20 @@ const XcxPublishPlanModal: React.FC<XcxPublishPlanModalProps> = ({
|
|
|
message.error('请至少选择一个视频');
|
|
|
return;
|
|
|
}
|
|
|
- onOk({ ...values, videoList: selectedVideos });
|
|
|
+ if (canMultiLink) {
|
|
|
+ const overflow = selectedVideos.find(
|
|
|
+ (v) => (videoCounts[v.videoId] ?? 0) > 200,
|
|
|
+ );
|
|
|
+ if (overflow) {
|
|
|
+ message.warning('单个视频生成份数不能超过 200');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const videosWithCount = selectedVideos.map((v) => ({
|
|
|
+ ...v,
|
|
|
+ count: canMultiLink ? videoCounts[v.videoId] : undefined,
|
|
|
+ }));
|
|
|
+ onOk({ ...values, videoList: videosWithCount });
|
|
|
uploadLogVideoCreatePublish({
|
|
|
videoList: selectedVideos,
|
|
|
traceId: Date.now(),
|
|
|
@@ -63,6 +81,11 @@ const XcxPublishPlanModal: React.FC<XcxPublishPlanModalProps> = ({
|
|
|
|
|
|
const removeVideo = (idToRemove: number) => {
|
|
|
setSelectedVideos((cur) => cur.filter((v) => v.videoId !== idToRemove));
|
|
|
+ setVideoCounts((cur) => {
|
|
|
+ const next = { ...cur };
|
|
|
+ delete next[idToRemove];
|
|
|
+ return next;
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
const openVideoSelector = () => {
|
|
|
@@ -109,8 +132,10 @@ const XcxPublishPlanModal: React.FC<XcxPublishPlanModalProps> = ({
|
|
|
destroyOnClose
|
|
|
onCancel={onCancel}
|
|
|
width={900}
|
|
|
+ maskClosable={!isSubmiting}
|
|
|
+ closable={!isSubmiting}
|
|
|
footer={[
|
|
|
- <Button key="back" onClick={onCancel}>
|
|
|
+ <Button key="back" onClick={onCancel} disabled={isSubmiting}>
|
|
|
取消
|
|
|
</Button>,
|
|
|
<Button key="submit" type="primary" loading={isSubmiting} onClick={handleOk}>
|
|
|
@@ -137,7 +162,10 @@ const XcxPublishPlanModal: React.FC<XcxPublishPlanModalProps> = ({
|
|
|
(option?.label ?? '').toString().toLowerCase().includes(input.toLowerCase())
|
|
|
}
|
|
|
options={audiencePackageOptions.map((v) => ({ label: v, value: v }))}
|
|
|
- onChange={() => setSelectedVideos([])}
|
|
|
+ onChange={() => {
|
|
|
+ setSelectedVideos([]);
|
|
|
+ setVideoCounts({});
|
|
|
+ }}
|
|
|
/>
|
|
|
</Form.Item>
|
|
|
<Form.Item
|
|
|
@@ -194,6 +222,22 @@ const XcxPublishPlanModal: React.FC<XcxPublishPlanModalProps> = ({
|
|
|
>
|
|
|
编辑标题/封面
|
|
|
</Button>
|
|
|
+ {canMultiLink && (
|
|
|
+ <InputNumber
|
|
|
+ className="!w-full mt-2"
|
|
|
+ min={1}
|
|
|
+ max={200}
|
|
|
+ precision={0}
|
|
|
+ placeholder="填写生成链接数量1-200"
|
|
|
+ value={videoCounts[video.videoId]}
|
|
|
+ onChange={(v) =>
|
|
|
+ setVideoCounts((cur) => ({
|
|
|
+ ...cur,
|
|
|
+ [video.videoId]: typeof v === 'number' ? v : undefined,
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ />
|
|
|
+ )}
|
|
|
</div>
|
|
|
</Card>
|
|
|
))}
|