|
|
@@ -1,12 +1,12 @@
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
-import { Space, Table, Button, Input, Select, DatePicker, Tabs, message, Typography, Spin } from 'antd';
|
|
|
+import { Space, Table, Button, Input, Select, DatePicker, Tabs, message, Typography, Spin, Popconfirm } from 'antd';
|
|
|
import type { TableProps } from 'antd';
|
|
|
import dayjs, { Dayjs } from 'dayjs';
|
|
|
import styles from './index.module.css';
|
|
|
import PunlishPlanModal from './components/publishPlanModal';
|
|
|
const { RangePicker } = DatePicker;
|
|
|
import { useAccountOptions } from '@src/views/publishContent/weGZH/hooks/useAccountOptions';
|
|
|
-import { useGzhPlanList, GzhPlanType } from '@src/views/publishContent/weGZH/hooks/useGzhPlanList';
|
|
|
+import { useGzhPlanList, GzhPlanDataType, GzhPlanType } from '@src/views/publishContent/weGZH/hooks/useGzhPlanList';
|
|
|
import http from '@src/http';
|
|
|
import { deleteGzhPlanApi, saveGzhPlanApi } from '@src/http/api';
|
|
|
import PunlishPlanDetailModal from './components/PunlishPlanDetailModal';
|
|
|
@@ -14,6 +14,7 @@ import PunlishPlanDetailModal from './components/PunlishPlanDetailModal';
|
|
|
const TableHeight = window.innerHeight - 380;
|
|
|
|
|
|
const WeGZHContent: React.FC = () => {
|
|
|
+ const [planType, setPlanType] = useState<GzhPlanType>(GzhPlanType.自动回复);
|
|
|
// 状态管理
|
|
|
const [selectedAccount, setSelectedAccount] = useState<string>();
|
|
|
const [videoTitle, setVideoTitle] = useState<string>('');
|
|
|
@@ -21,17 +22,18 @@ const WeGZHContent: React.FC = () => {
|
|
|
const [dateRange, setDateRange] = useState<[Dayjs | null, Dayjs | null]>();
|
|
|
const [isShowAddPunlishPlan, setIsShowAddPunlishPlan] = useState<boolean>(false);
|
|
|
const [actionType, setActionType] = useState<'add' | 'edit'>('add');
|
|
|
- const [editPlanData, setEditPlanData] = useState<GzhPlanType>();
|
|
|
- const [activeKey, setActiveKey] = useState<string>('1');
|
|
|
+ const [editPlanData, setEditPlanData] = useState<GzhPlanDataType>();
|
|
|
+ const [selectVideoType, setSelectVideoType] = useState<number>();
|
|
|
const [isSubmiting, setIsSubmiting] = useState<boolean>(false);
|
|
|
const [isLoading, setIsLoading] = useState<boolean>(false);
|
|
|
- const { accountOptions } = useAccountOptions();
|
|
|
+ const { accountOptions, getAccountList } = useAccountOptions();
|
|
|
const { gzhPlanList, getGzhPlanList, totalSize } = useGzhPlanList();
|
|
|
+ const [pageNum, setPageNum] = useState<number>(1);
|
|
|
|
|
|
const [isShowAddPunlishDetailPlan, setIsShowAddPunlishDetailPlan] = useState<boolean>(false);
|
|
|
|
|
|
// 表格列配置
|
|
|
- const columns: TableProps<GzhPlanType>['columns'] = [
|
|
|
+ const columns: TableProps<GzhPlanDataType>['columns'] = [
|
|
|
{
|
|
|
title: '公众号名称',
|
|
|
dataIndex: 'accountName',
|
|
|
@@ -39,7 +41,25 @@ const WeGZHContent: React.FC = () => {
|
|
|
width: 160,
|
|
|
},
|
|
|
{
|
|
|
- title: '场景',
|
|
|
+ title: '发布方式',
|
|
|
+ dataIndex: 'publishStage',
|
|
|
+ key: 'publishStage',
|
|
|
+ width: 120,
|
|
|
+ render: (_, record) => {
|
|
|
+ return record.publishStage === 0 ? '平台发布' : '用户获取路径';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频选取方式',
|
|
|
+ dataIndex: 'selectVideoType',
|
|
|
+ key: 'selectVideoType',
|
|
|
+ width: 120,
|
|
|
+ render: (_, record) => {
|
|
|
+ return record.selectVideoType === 0 ? '手动选取' : '自动选取';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '发布场景',
|
|
|
dataIndex: 'scene',
|
|
|
key: 'scene',
|
|
|
width: 120,
|
|
|
@@ -59,7 +79,7 @@ const WeGZHContent: React.FC = () => {
|
|
|
key: 'title',
|
|
|
ellipsis: true,
|
|
|
render: (_, record) => {
|
|
|
- return record.videoList.map(video => {
|
|
|
+ return record?.videoList?.map(video => {
|
|
|
return <Typography.Paragraph style={{ maxWidth: '300px' }} ellipsis={{ rows: 1, tooltip: true }} key={video.videoId}>{video.customTitle || video.title}</Typography.Paragraph>
|
|
|
})
|
|
|
}
|
|
|
@@ -73,15 +93,7 @@ const WeGZHContent: React.FC = () => {
|
|
|
return record.createTimestamp ? dayjs(record.createTimestamp).format('YYYY-MM-DD HH:mm:ss') : '';
|
|
|
}
|
|
|
},
|
|
|
- {
|
|
|
- title: '发布方',
|
|
|
- dataIndex: 'publishStage',
|
|
|
- key: 'publishStage',
|
|
|
- width: 120,
|
|
|
- render: (_, record) => {
|
|
|
- return record.publishStage === 0 ? '平台发布' : '用户发布';
|
|
|
- }
|
|
|
- },
|
|
|
+
|
|
|
{
|
|
|
title: '操作',
|
|
|
key: 'action',
|
|
|
@@ -90,13 +102,25 @@ const WeGZHContent: React.FC = () => {
|
|
|
<Space size="middle">
|
|
|
<Button type="link" onClick={() => editPlan(record)}>编辑</Button>
|
|
|
<Button type="link" onClick={() => editPlanDetail(record)}>详情</Button>
|
|
|
- <Button type="link" onClick={() => deletePlan(record)}>删除</Button>
|
|
|
+ <Popconfirm title="确定删除该计划吗？" okText="确定" cancelText="取消" onConfirm={() => deletePlan(record)}>
|
|
|
+ <Button type="link">删除</Button>
|
|
|
+ </Popconfirm>
|
|
|
+
|
|
|
</Space>
|
|
|
),
|
|
|
},
|
|
|
];
|
|
|
+ const cloumns2: TableProps<GzhPlanDataType>['columns'] = columns.filter(item => item.title !== '发布场景').map(item => {
|
|
|
+ if (item.title === '公众号名称') {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ title: '服务号名称',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ });
|
|
|
|
|
|
- const deletePlan = async (record: GzhPlanType) => {
|
|
|
+ const deletePlan = async (record: GzhPlanDataType) => {
|
|
|
setIsLoading(true);
|
|
|
const res = await http.post(deleteGzhPlanApi, {
|
|
|
id: record.id,
|
|
|
@@ -106,8 +130,10 @@ const WeGZHContent: React.FC = () => {
|
|
|
if (res?.code === 0) {
|
|
|
message.success('删除成功');
|
|
|
getGzhPlanList({
|
|
|
+ type: planType,
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
+ selectVideoType: selectVideoType,
|
|
|
});
|
|
|
} else {
|
|
|
message.error(res?.msg || '删除失败');
|
|
|
@@ -115,13 +141,13 @@ const WeGZHContent: React.FC = () => {
|
|
|
setIsLoading(false);
|
|
|
}
|
|
|
|
|
|
- const editPlan = (record: GzhPlanType) => {
|
|
|
+ const editPlan = (record: GzhPlanDataType) => {
|
|
|
setEditPlanData(record);
|
|
|
setActionType('edit');
|
|
|
setIsShowAddPunlishPlan(true);
|
|
|
};
|
|
|
|
|
|
- const editPlanDetail = (record: GzhPlanType) => {
|
|
|
+ const editPlanDetail = (record: GzhPlanDataType) => {
|
|
|
setEditPlanData(record);
|
|
|
setActionType('edit');
|
|
|
setIsShowAddPunlishDetailPlan(true);
|
|
|
@@ -133,9 +159,13 @@ const WeGZHContent: React.FC = () => {
|
|
|
setIsShowAddPunlishPlan(true);
|
|
|
}
|
|
|
|
|
|
- const handleAddPunlishPlan = async (params: GzhPlanType) => {
|
|
|
+ const handleAddPunlishPlan = async (params: GzhPlanDataType) => {
|
|
|
setIsSubmiting(true);
|
|
|
- const res = await http.post<GzhPlanType>(saveGzhPlanApi, params)
|
|
|
+ if (params.type !== planType) {
|
|
|
+ setPlanType(params.type as GzhPlanType);
|
|
|
+ }
|
|
|
+
|
|
|
+ const res = await http.post<GzhPlanDataType>(saveGzhPlanApi, {...params, type: +params.type})
|
|
|
.catch(err => {
|
|
|
message.error(err.msg);
|
|
|
})
|
|
|
@@ -144,7 +174,9 @@ const WeGZHContent: React.FC = () => {
|
|
|
});
|
|
|
if (res?.code === 0) {
|
|
|
message.success('发布计划创建成功');
|
|
|
+
|
|
|
getGzhPlanList({
|
|
|
+ type: params.type,
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
});
|
|
|
@@ -155,19 +187,29 @@ const WeGZHContent: React.FC = () => {
|
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
|
+ setSelectedAccount(undefined);
|
|
|
+ setVideoTitle('');
|
|
|
+ setSelectedPublisher(undefined);
|
|
|
+ setSelectVideoType(undefined);
|
|
|
+ setDateRange(undefined);
|
|
|
+ setPageNum(1);
|
|
|
+ getAccountList({ accountType: planType });
|
|
|
getGzhPlanList({
|
|
|
+ type: planType,
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
});
|
|
|
- }, []);
|
|
|
+ }, [planType]);
|
|
|
|
|
|
const handleSearch = () => {
|
|
|
getGzhPlanList({
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
title: videoTitle,
|
|
|
+ type: planType,
|
|
|
accountId: selectedAccount ? parseInt(selectedAccount) : undefined,
|
|
|
publishStage: selectedPublisher,
|
|
|
+ selectVideoType: selectVideoType,
|
|
|
createTimestampStart: dateRange?.[0]?.unix() ? dateRange[0].unix() * 1000 : undefined,
|
|
|
createTimestampEnd: dateRange?.[1]?.unix() ? dateRange[1].unix() * 1000 : undefined,
|
|
|
});
|
|
|
@@ -181,10 +223,10 @@ const WeGZHContent: React.FC = () => {
|
|
|
{/* 搜索区域 */}
|
|
|
<div className="flex flex-wrap gap-4 mb-3">
|
|
|
<div className="flex items-center gap-2">
|
|
|
- <span className="text-gray-600">公众号名称:</span>
|
|
|
+ <span className="text-gray-600">{ planType === GzhPlanType.自动回复 ? '公众号名称' : '服务号名称' }:</span>
|
|
|
<Select
|
|
|
- placeholder="选择公众号"
|
|
|
- style={{ width: 200 }}
|
|
|
+ placeholder={planType === GzhPlanType.自动回复 ? '选择公众号' : '选择服务号'}
|
|
|
+ style={{ width: 150 }}
|
|
|
value={selectedAccount}
|
|
|
onChange={setSelectedAccount}
|
|
|
allowClear
|
|
|
@@ -192,7 +234,7 @@ const WeGZHContent: React.FC = () => {
|
|
|
filterOption={(input, option) =>
|
|
|
(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
|
|
|
}
|
|
|
- options={accountOptions.map(item => ({ label: item.name, value: item.id }))}
|
|
|
+ options={accountOptions?.map(item => ({ label: item.name, value: item.id })) || []}
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
@@ -209,16 +251,30 @@ const WeGZHContent: React.FC = () => {
|
|
|
</div>
|
|
|
|
|
|
<div className="flex items-center gap-2">
|
|
|
- <span className="text-gray-600">发布方:</span>
|
|
|
+ <span className="text-gray-600">发布方式:</span>
|
|
|
<Select
|
|
|
- placeholder="选择发布方"
|
|
|
- style={{ width: 200 }}
|
|
|
+ placeholder="选择发布方式"
|
|
|
+ style={{ width: 140 }}
|
|
|
value={selectedPublisher}
|
|
|
onChange={setSelectedPublisher}
|
|
|
allowClear
|
|
|
options={[
|
|
|
{ label: '平台发布', value: 0 },
|
|
|
- { label: '用户发布', value: 1 },
|
|
|
+ { label: '用户获取路径', value: 1 },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <span className="text-gray-600">视频选取方式:</span>
|
|
|
+ <Select
|
|
|
+ placeholder="视频选取方式"
|
|
|
+ style={{ width: 130 }}
|
|
|
+ value={selectVideoType}
|
|
|
+ onChange={setSelectVideoType}
|
|
|
+ allowClear
|
|
|
+ options={[
|
|
|
+ { label: '手动选取', value: 0 },
|
|
|
+ { label: '自动选取', value: 1 },
|
|
|
]}
|
|
|
/>
|
|
|
</div>
|
|
|
@@ -226,7 +282,7 @@ const WeGZHContent: React.FC = () => {
|
|
|
<div className="flex items-center gap-2">
|
|
|
<RangePicker
|
|
|
placeholder={['开始时间', '结束时间']}
|
|
|
- style={{ width: 400 }}
|
|
|
+ style={{ width: 270 }}
|
|
|
allowClear
|
|
|
value={dateRange}
|
|
|
onChange={(dates) => {
|
|
|
@@ -238,15 +294,16 @@ const WeGZHContent: React.FC = () => {
|
|
|
<Button type="primary" className="ml-2" onClick={ handleSearch}>搜索</Button>
|
|
|
</div>
|
|
|
<Tabs
|
|
|
- defaultActiveKey="1"
|
|
|
+ defaultActiveKey={ GzhPlanType.自动回复}
|
|
|
type="card"
|
|
|
size="large"
|
|
|
className={styles.antTableTab}
|
|
|
items={[
|
|
|
- { label: '自动回复', key: '1' },
|
|
|
+ { label: '自动回复', key: GzhPlanType.自动回复 },
|
|
|
+ { label: '服务号推送', key: GzhPlanType.服务号推送 },
|
|
|
]}
|
|
|
- activeKey={activeKey}
|
|
|
- onChange={setActiveKey}
|
|
|
+ activeKey={planType}
|
|
|
+ onChange={(key) => setPlanType(key as GzhPlanType)}
|
|
|
tabBarExtraContent={
|
|
|
{ right: <Button type="primary" onClick={addPunlishPlan}>+ 创建发布</Button> }}
|
|
|
/>
|
|
|
@@ -254,17 +311,20 @@ const WeGZHContent: React.FC = () => {
|
|
|
<Table
|
|
|
rowKey={(record) => record.id}
|
|
|
className={styles.antTable}
|
|
|
- columns={columns}
|
|
|
+ columns={planType === GzhPlanType.自动回复 ? columns : cloumns2}
|
|
|
dataSource={gzhPlanList}
|
|
|
scroll={{ x: 'max-content', y: TableHeight }}
|
|
|
pagination={{
|
|
|
total: totalSize,
|
|
|
pageSize: 10,
|
|
|
+ current: pageNum,
|
|
|
showTotal: (total) => `共 ${total} 条`,
|
|
|
onChange: (page) => getGzhPlanList({
|
|
|
pageNum: page,
|
|
|
pageSize: 10,
|
|
|
title: videoTitle,
|
|
|
+ type: planType,
|
|
|
+ selectVideoType: selectVideoType,
|
|
|
accountId: selectedAccount ? parseInt(selectedAccount) : undefined,
|
|
|
publishStage: selectedPublisher,
|
|
|
createTimestampStart: dateRange?.[0]?.unix() ? dateRange[0].unix() * 1000 : undefined,
|
|
|
@@ -274,14 +334,15 @@ const WeGZHContent: React.FC = () => {
|
|
|
/>
|
|
|
<PunlishPlanModal
|
|
|
visible={isShowAddPunlishPlan}
|
|
|
- onCancel={() => {
|
|
|
+ onCancel={() => {
|
|
|
setEditPlanData(undefined);
|
|
|
setIsShowAddPunlishPlan(false);
|
|
|
- } }
|
|
|
+ }}
|
|
|
onOk={handleAddPunlishPlan}
|
|
|
actionType={actionType}
|
|
|
editPlanData={editPlanData}
|
|
|
isSubmiting={isSubmiting}
|
|
|
+ planType={ planType}
|
|
|
/>
|
|
|
<PunlishPlanDetailModal
|
|
|
visible={isShowAddPunlishDetailPlan}
|
|
|
@@ -289,7 +350,7 @@ const WeGZHContent: React.FC = () => {
|
|
|
setEditPlanData(undefined);
|
|
|
setIsShowAddPunlishDetailPlan(false);
|
|
|
}}
|
|
|
- planData={editPlanData as GzhPlanType}
|
|
|
+ planData={editPlanData as GzhPlanDataType}
|
|
|
/>
|
|
|
</div>
|
|
|
</Spin>
|
