update 视频排序调整
This commit is contained in:
Coding
parent
1beabc7376
commit
9c90ffda26
@ -6,7 +6,7 @@ import {Checkbox, Popconfirm} from "antd";
|
||||
import {CheckCircleFilled, MenuOutlined, MinusCircleFilled, LoadingOutlined} from "@ant-design/icons";
|
||||
|
||||
import ImageCover from '@/assets/images/cover.png'
|
||||
import {IconEdit, IconPlay, IconPlaying} from "@/components/icons";
|
||||
import {IconDelete, IconEdit, IconPlay, IconPlaying} from "@/components/icons";
|
||||
import {VideoStatus} from "@/service/api/video.ts";
|
||||
import {formatTime} from "@/util/strings.ts";
|
||||
|
||||
@ -52,8 +52,16 @@ export const VideoListItem = (
|
||||
onClick={onItemClick}
|
||||
>
|
||||
<div className={`list-row ${generating ? 'disabled' : ''} ${active?'playing':''}`}>
|
||||
<div className="col number">{index}</div>
|
||||
<div className="col cover">
|
||||
<div
|
||||
className="col number"
|
||||
{... (sortable && !generating?listeners:{})}
|
||||
{... (sortable && !generating?attributes:{})}
|
||||
>{index}</div>
|
||||
<div
|
||||
className="col cover"
|
||||
{... (sortable && !generating?listeners:{})}
|
||||
{... (sortable && !generating?attributes:{})}
|
||||
>
|
||||
<div className="relative">
|
||||
<img className="w-[100px] h-[56px] object-cover" src={video.cover || ImageCover}/>
|
||||
{generating &&
|
||||
@ -70,17 +78,25 @@ export const VideoListItem = (
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col title">
|
||||
<div
|
||||
className="col title"
|
||||
{... (sortable && !generating?listeners:{})}
|
||||
{... (sortable && !generating?attributes:{})}
|
||||
>
|
||||
<div className="line-clamp-2">
|
||||
{video.title || video.video_title}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col generated-time">{video.publish_time ? formatTime(video.publish_time) : ''}</div>
|
||||
<div
|
||||
className="col generated-time"
|
||||
{... (sortable && !generating?listeners:{})}
|
||||
{... (sortable && !generating?attributes:{})}
|
||||
>{video.publish_time ? formatTime(video.publish_time) : ''}</div>
|
||||
<div className="col operation">
|
||||
{sortable && !generating && (!active ?
|
||||
<button className="hover:text-blue-500 cursor-move" {...attributes} {...listeners}>
|
||||
<MenuOutlined/>
|
||||
</button> : <button disabled className="cursor-not-allowed"><MenuOutlined/></button>)}
|
||||
{/*{sortable && !generating && (!active ?*/}
|
||||
{/* <button className="hover:text-blue-500 cursor-move">*/}
|
||||
{/* <MenuOutlined/>*/}
|
||||
{/* </button> : <button disabled className="cursor-not-allowed"><MenuOutlined/></button>)}*/}
|
||||
|
||||
{editable && !generating && <>
|
||||
{onEdit &&
|
||||
@ -91,13 +107,6 @@ export const VideoListItem = (
|
||||
}} style={{fontSize: '1.1em'}}>
|
||||
<IconEdit/>
|
||||
</button>}
|
||||
<Checkbox checked={state.checked} onChange={() => {
|
||||
if (onCheckedChange) {
|
||||
onCheckedChange(!state.checked)
|
||||
} else {
|
||||
setState({checked: !state.checked})
|
||||
}
|
||||
}} />
|
||||
|
||||
{onRemove && <Popconfirm
|
||||
title={<div style={{minWidth: 150}}><span>请确认删除此视频?</span></div>}
|
||||
@ -105,8 +114,15 @@ export const VideoListItem = (
|
||||
okText="删除"
|
||||
cancelText="取消"
|
||||
>
|
||||
<button className="hover:text-blue-500"><MinusCircleFilled/></button>
|
||||
<button className="hover:text-blue-500"><IconDelete/></button>
|
||||
</Popconfirm>}
|
||||
<Checkbox checked={state.checked} onChange={() => {
|
||||
if (onCheckedChange) {
|
||||
onCheckedChange(!state.checked)
|
||||
} else {
|
||||
setState({checked: !state.checked})
|
||||
}
|
||||
}} />
|
||||
</>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -145,7 +145,7 @@ export default function LiveIndex() {
|
||||
})
|
||||
},
|
||||
onCancel: () => {
|
||||
showToast('退出并清除移动视频位置操作！', 'info');
|
||||
showToast('退出并恢复之前的直播队列！', 'info');
|
||||
loadList()
|
||||
setEditable(false)
|
||||
}
|
||||
|
||||
@ -107,7 +107,7 @@ export default function NewEdit() {
|
||||
{data?.list?.map((item, i) => {
|
||||
const checked = selectedRowKeys.includes(item.id)
|
||||
return <div key={i} className={clsx("row flex", {checked})}>
|
||||
<div className="col title">
|
||||
<div className="col title cursor-pointer" onClick={() => setEditId(item.id)}>
|
||||
<div>
|
||||
<div className="text-base">{item.title}</div>
|
||||
<div
|
||||
@ -128,7 +128,7 @@ export default function NewEdit() {
|
||||
className="text-sm">{formatTime(item.publish_time, 'YYYY-MM-DD HH:mm')}</div>
|
||||
</div>
|
||||
<div className="col operations">
|
||||
<span className="icon-btn" onClick={() => setEditId(item.id)}><IconEdit/></span>
|
||||
{/*<span className="icon-btn"><IconEdit/></span>*/}
|
||||
<Popconfirm title={'确认删除此新闻吗?'} description={'删除后需从新闻素材中重新选择'} onConfirm={()=>{
|
||||
handleDelete(item.id)
|
||||
}}>
|
||||
|
||||
@ -82,7 +82,6 @@ export default function NewsIndex() {
|
||||
{activeNews && <Modal
|
||||
rootClassName={'news-detail-modal'}
|
||||
closeIcon={null} open={true} width={1000}
|
||||
maskClosable={false}
|
||||
footer={null} onCancel={() => setActiveNews(undefined)}
|
||||
>
|
||||
<div className="news-detail pl-16 pr-1 flex pb-5">
|
||||
|
||||
@ -65,12 +65,13 @@ export default function VideoIndex() {
|
||||
checkedAll: !state.checkedAll
|
||||
})
|
||||
}
|
||||
const handleModifySort = () => {
|
||||
setVideoData((items) => {
|
||||
modifyOrder(items.map(s => s.id)).catch(() => {
|
||||
showToast('调整视频顺序失败,请重试!')
|
||||
}).finally(loadList)
|
||||
return items;
|
||||
const handleModifySort = (items:VideoInfo[]) => {
|
||||
// .then(() => {
|
||||
// showToast('调整视频顺序成功!','success')
|
||||
// })
|
||||
modifyOrder(items.map(s => s.id)).catch(()=>{
|
||||
loadList();
|
||||
showToast('调整视频顺序失败,请重试!','warning')
|
||||
})
|
||||
}
|
||||
//
|
||||
@ -94,8 +95,6 @@ export default function VideoIndex() {
|
||||
}
|
||||
},[videoData,scrollerRef])
|
||||
|
||||
|
||||
|
||||
return (<div className="container py-10 page-live">
|
||||
{contextHolder}
|
||||
<div className="flex">
|
||||
@ -148,16 +147,18 @@ export default function VideoIndex() {
|
||||
setVideoData((items) => {
|
||||
oldIndex = items.findIndex(s => s.id == active.id);
|
||||
newIndex = items.findIndex(s => s.id == over.id);
|
||||
return arrayMove(items, oldIndex, newIndex);
|
||||
const newSorts = arrayMove(items, oldIndex, newIndex);
|
||||
handleModifySort(newSorts)
|
||||
return newSorts;
|
||||
});
|
||||
modal.confirm({
|
||||
title: '提示',
|
||||
content: '是否要移动到指定位置',
|
||||
onOk: handleModifySort,
|
||||
onCancel: () => {
|
||||
setVideoData(originArr);
|
||||
}
|
||||
})
|
||||
// modal.confirm({
|
||||
// title: '提示',
|
||||
// content: '是否要移动到指定位置',
|
||||
// onOk: handleModifySort,
|
||||
// onCancel: () => {
|
||||
// setVideoData(originArr);
|
||||
// }
|
||||
// })
|
||||
}
|
||||
}}>
|
||||
<SortableContext items={videoData}>
|
||||
@ -179,6 +180,7 @@ export default function VideoIndex() {
|
||||
})
|
||||
}}
|
||||
onItemClick={ () => playVideo(v, index)}
|
||||
onRemove={()=>{}}
|
||||
onEdit={v.status == VideoStatus.Generating ? undefined : () => {
|
||||
setEditId(v.article_id)
|
||||
}}
|
||||
@ -195,7 +197,7 @@ export default function VideoIndex() {
|
||||
</div>
|
||||
<div className="page-action">
|
||||
<ButtonToTop visible={state.showToTop} onClick={()=>scrollerRef.current?.scrollToPosition(0)}/>
|
||||
<ButtonBatch
|
||||
{checkedIdArray.length > 0 && <ButtonBatch
|
||||
onProcess={deleteByIds}
|
||||
selected={checkedIdArray}
|
||||
emptyMessage={`请选择要删除的新闻视频`}
|
||||
@ -209,7 +211,7 @@ export default function VideoIndex() {
|
||||
>
|
||||
<span className="text">批量删除</span>
|
||||
<IconDelete />
|
||||
</ButtonBatch>
|
||||
</ButtonBatch>}
|
||||
<ButtonPush2Room ids={checkedIdArray} list={videoData} onSuccess={loadList}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -20,12 +20,12 @@ const NavigationUserContainer = () => {
|
||||
const {logout, user} = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: 'profile',
|
||||
label: <div onClick={() => {
|
||||
navigate('/history')
|
||||
}}>视频库</div>,
|
||||
},
|
||||
// {
|
||||
// key: 'profile',
|
||||
// label: <div onClick={() => {
|
||||
// navigate('/history')
|
||||
// }}>视频库</div>,
|
||||
// },
|
||||
{
|
||||
key: 'logout',
|
||||
label: <div onClick={() => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user