| 1 | import { useEffect, useMemo, useRef, useState } from 'react'; |
| 2 | import { PubRecordModel } from '../../comment'; |
| 3 | import styles from './pubRecord.module.scss'; |
| 4 | import { icpGetPubRecordList } from '@/icp/publish'; |
| 5 | import { Button, Image, Modal, Select, Table, TableProps, Tag } from 'antd'; |
| 6 | import { getImgFile, IImgFile } from '@/components/Choose/ImgChoose'; |
| 7 | import { formatTime, getFilePathName } from '@/utils'; |
| 8 | import { AccountInfo } from '@/views/account/comment'; |
| 9 | import WebView from '../../../../components/WebView'; |
| 10 | import { PubStatus, PubType } from '../../../../../commont/publish/PublishEnum'; |
| 11 | import PubRecordDetails, { |
| 12 | IPubRecordDetailsRef, |
| 13 | } from './components/PubRecordDetails'; |
| 14 | import { onVideoAuditFinish } from '../../../../icp/receiveMsg'; |
| 15 | |
| 16 | export const ImageView = ({ |
| 17 | prm, |
| 18 | width, |
| 19 | height, |
| 20 | }: { |
| 21 | prm: PubRecordModel; |
| 22 | width: number | string; |
| 23 | height: number | string; |
| 24 | }) => { |
| 25 | const [imgFile, setImgFile] = useState<IImgFile>(); |
| 26 | const [imgUrl, setImgUrl] = useState(''); |
| 27 | |
| 28 | useEffect(() => { |
| 29 | if (prm.coverPath.includes('https://')) { |
| 30 | setImgUrl(prm.coverPath); |
| 31 | } else { |
| 32 | getImgFile(prm.coverPath).then((res) => { |
| 33 | setImgFile(res); |
| 34 | }); |
| 35 | } |
| 36 | }, []); |
| 37 | |
| 38 | const filename = useMemo(() => { |
| 39 | return getFilePathName(prm.videoPath!).filename; |
| 40 | }, []); |
| 41 | |
| 42 | return ( |
| 43 | <div |
| 44 | className={styles['pubRecord-pubCon']} |
| 45 | style={{ minHeight: height + 'px' }} |
| 46 | > |
| 47 | {imgUrl ? ( |
| 48 | <Image src={imgUrl} height={height} width={width} /> |
| 49 | ) : ( |
| 50 | <> |
| 51 | {imgFile && ( |
| 52 | <Image src={imgFile.imgUrl} height={height} width={width} /> |
| 53 | )} |
| 54 | <span title={filename} className="pubRecord-pubCon-name"> |
| 55 | {filename} |
| 56 | </span> |
| 57 | </> |
| 58 | )} |
| 59 | </div> |
| 60 | ); |
| 61 | }; |
| 62 | |
| 63 | export interface IExamineVideo { |
| 64 | account?: AccountInfo; |
| 65 | url: string; |
| 66 | open: boolean; |
| 67 | jsCode: string; |
| 68 | videoSrc?: string; |
| 69 | } |
| 70 | |
| 71 | export const PubRecordStatusTag = ({ status }: { status: PubStatus }) => { |
| 72 | switch (status) { |
| 73 | case 2: |
| 74 | return <Tag color="error">全部发布失败</Tag>; |
| 75 | case 1: |
| 76 | return <Tag color="success">全部发布成功</Tag>; |
| 77 | case 3: |
| 78 | return <Tag color="warning">部分发布成功</Tag>; |
| 79 | case 0: |
| 80 | return <Tag color="processing">正在发布</Tag>; |
| 81 | } |
| 82 | }; |
| 83 | |
| 84 | export default function Page({ |
| 85 | hegiht = '75vh', |
| 86 | onChange, |
| 87 | defaultPubType, |
| 88 | }: { |
| 89 | hegiht?: string; |
| 90 | onChange?: (pubRecordModel: PubRecordModel) => void; |
| 91 | defaultPubType?: PubType; |
| 92 | }) { |
| 93 | const [pulRecardList, setRecardList] = useState<PubRecordModel[]>([]); |
| 94 | const [examineVideo, setExamineVideo] = useState<IExamineVideo>({ |
| 95 | videoSrc: '', |
| 96 | account: undefined, |
| 97 | url: '', |
| 98 | open: false, |
| 99 | jsCode: '', |
| 100 | }); |
| 101 | const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]); |
| 102 | const pubRecordDetailsRef = useRef<IPubRecordDetailsRef>(null); |
| 103 | // 发布类型的筛选 |
| 104 | const [pubType, setPubType] = useState<PubType | undefined>(defaultPubType); |
| 105 | |
| 106 | const columns = useMemo(() => { |
| 107 | const columns: TableProps<PubRecordModel>['columns'] = [ |
| 108 | { |
| 109 | title: '序号', |
| 110 | render: (text, prm, ind) => ind + 1, |
| 111 | width: 70, |
| 112 | key: '序号', |
| 113 | }, |
| 114 | { |
| 115 | title: '发布内容', |
| 116 | render: (text, prm) => <ImageView prm={prm} width={30} height={50} />, |
| 117 | width: 200, |
| 118 | key: '发布内容', |
| 119 | }, |
| 120 | { |
| 121 | title: '发布时间', |
| 122 | dataIndex: 'publishTime', |
| 123 | key: 'publishTime', |
| 124 | render: (text, prm) => formatTime(prm.publishTime), |
| 125 | width: 200, |
| 126 | }, |
| 127 | { |
| 128 | title: '发布类型', |
| 129 | dataIndex: 'type', |
| 130 | key: 'type', |
| 131 | render: (_, prm) => { |
| 132 | switch (prm.type) { |
| 133 | case PubType.ARTICLE: |
| 134 | return <>文章发布</>; |
| 135 | case PubType.VIDEO: |
| 136 | return <>视频发布</>; |
| 137 | case PubType.ImageText: |
| 138 | return <>图文发布</>; |
| 139 | } |
| 140 | }, |
| 141 | width: 200, |
| 142 | }, |
| 143 | { |
| 144 | title: '状态', |
| 145 | dataIndex: 'status', |
| 146 | key: 'status', |
| 147 | render: (text, prm) => <PubRecordStatusTag status={prm.status} />, |
| 148 | width: 100, |
| 149 | }, |
| 150 | { |
| 151 | title: '操作', |
| 152 | width: 100, |
| 153 | key: '操作', |
| 154 | render: (text, prm) => ( |
| 155 | <> |
| 156 | <Button |
| 157 | type="link" |
| 158 | onClick={async (e) => { |
| 159 | e.stopPropagation(); |
| 160 | pubRecordDetailsRef.current?.oepnPubRecordDetails(prm); |
| 161 | }} |
| 162 | > |
| 163 | 详情 |
| 164 | </Button> |
| 165 | </> |
| 166 | ), |
| 167 | }, |
| 168 | ]; |
| 169 | return columns; |
| 170 | }, []); |
| 171 | |
| 172 | useEffect(() => { |
| 173 | GetPubList(); |
| 174 | |
| 175 | return onVideoAuditFinish((params) => { |
| 176 | console.log('视频审核完成', params); |
| 177 | }); |
| 178 | }, [pubType]); |
| 179 | |
| 180 | async function GetPubList() { |
| 181 | const res = await icpGetPubRecordList( |
| 182 | { |
| 183 | page_no: 1, |
| 184 | page_size: 10, |
| 185 | }, |
| 186 | { |
| 187 | type: pubType, |
| 188 | }, |
| 189 | ); |
| 190 | setRecardList(res.list); |
| 191 | } |
| 192 | |
| 193 | useEffect(() => { |
| 194 | if (onChange) |
| 195 | onChange(pulRecardList.find((v) => v.id === selectedRowKeys[0])!); |
| 196 | }, [selectedRowKeys]); |
| 197 | |
| 198 | const rowSelection: TableProps<PubRecordModel>['rowSelection'] = { |
| 199 | onChange: ( |
| 200 | selectedRowKeys: React.Key[], |
| 201 | selectedRows: PubRecordModel[], |
| 202 | ) => { |
| 203 | setSelectedRowKeys(selectedRowKeys as number[]); |
| 204 | }, |
| 205 | getCheckboxProps: (record: PubRecordModel) => ({ |
| 206 | name: record.title, |
| 207 | }), |
| 208 | selectedRowKeys, |
| 209 | }; |
| 210 | |
| 211 | return ( |
| 212 | <div |
| 213 | className={[ |
| 214 | styles.pubRecord, |
| 215 | onChange && styles['pubRecord-component'], |
| 216 | ].join(' ')} |
| 217 | > |
| 218 | <Modal |
| 219 | zIndex={10000} |
| 220 | open={examineVideo.open} |
| 221 | forceRender={true} |
| 222 | footer={null} |
| 223 | onCancel={() => { |
| 224 | setExamineVideo((prevState) => { |
| 225 | const newState = { ...prevState }; |
| 226 | newState.open = false; |
| 227 | newState.url = ''; |
| 228 | newState.videoSrc = ''; |
| 229 | newState.account = undefined; |
| 230 | return newState; |
| 231 | }); |
| 232 | }} |
| 233 | title="查看视频" |
| 234 | width="90%" |
| 235 | > |
| 236 | <div style={{ height: '70vh' }}> |
| 237 | {examineVideo.videoSrc ? ( |
| 238 | <> |
| 239 | <video |
| 240 | src={examineVideo.videoSrc} |
| 241 | controls |
| 242 | autoPlay |
| 243 | style={{ margin: '0 auto', display: 'block', height: '100%' }} |
| 244 | /> |
| 245 | </> |
| 246 | ) : ( |
| 247 | <> |
| 248 | {examineVideo.account ? ( |
| 249 | <WebView |
| 250 | url={examineVideo.url} |
| 251 | cookieParams={{ |
| 252 | cookies: JSON.parse(examineVideo.account.loginCookie), |
| 253 | }} |
| 254 | key={examineVideo.url + examineVideo.open} |
| 255 | /> |
| 256 | ) : ( |
| 257 | '' |
| 258 | )} |
| 259 | </> |
| 260 | )} |
| 261 | </div> |
| 262 | </Modal> |
| 263 | |
| 264 | {!onChange && ( |
| 265 | <div className="pubRecord-options"> |
| 266 | <Select |
| 267 | style={{ width: 120 }} |
| 268 | placeholder="发布类型" |
| 269 | allowClear |
| 270 | onChange={(e) => { |
| 271 | setPubType(e as PubType); |
| 272 | }} |
| 273 | options={[ |
| 274 | { value: PubType.ARTICLE, label: '文章' }, |
| 275 | { value: PubType.ImageText, label: '图文' }, |
| 276 | { value: PubType.VIDEO, label: '视频' }, |
| 277 | ]} |
| 278 | /> |
| 279 | </div> |
| 280 | )} |
| 281 | |
| 282 | <Table<PubRecordModel> |
| 283 | columns={columns} |
| 284 | dataSource={pulRecardList} |
| 285 | scroll={{ y: hegiht }} |
| 286 | rowKey="id" |
| 287 | rowSelection={onChange ? { type: 'radio', ...rowSelection } : undefined} |
| 288 | onRow={(record) => ({ |
| 289 | onClick: () => { |
| 290 | setSelectedRowKeys([record.id]); |
| 291 | }, |
| 292 | })} |
| 293 | /> |
| 294 | |
| 295 | <PubRecordDetails |
| 296 | ref={pubRecordDetailsRef} |
| 297 | onExamineVideoClick={(e) => { |
| 298 | setExamineVideo((prevState) => { |
| 299 | return { |
| 300 | ...prevState, |
| 301 | ...e, |
| 302 | }; |
| 303 | }); |
| 304 | }} |
| 305 | /> |
| 306 | </div> |
| 307 | ); |
| 308 | } |
| 309 |