update 全选逻辑,批量操作按钮样式

This commit is contained in:
LittleBoy 2024-12-22 23:11:17 +08:00
parent 7ccd5b4086
commit f92523c333
9 changed files with 39 additions and 13 deletions

View File

@ -41,6 +41,7 @@ export default function ButtonBatch(
}
}
const handleBtnClick = () => {
if(loading) return;
if (selected.length == 0) {
showToast(emptyMessage, 'warning')
return;

View File

@ -3,12 +3,14 @@ import {Checkbox, Popover} from "antd";
import {useBoolean, useClickAway} from "ahooks";
import {CaretUpOutlined} from "@ant-design/icons";
type ValueType = Id[][];
type ValueFunc = (prev:ValueType)=>ValueType;
const TagSelect = (props: {
options: OptionItem[];
onChange: (values: Id[][]) => void;
className?: string;
}) => {
const [selectValues, _setSelectValues] = React.useState<Id[][]>([])
const [selectValues, __setSelectValues] = React.useState<ValueType>([])
const [checkedAll, _setCheckedAll] = React.useState<boolean>(false)
const [visible, {set}] = useBoolean(false);
const allValues = useMemo(()=>{
@ -21,6 +23,18 @@ const TagSelect = (props: {
})
return values
},[props.options])
const _setSelectValues = (values: (ValueType | ValueFunc)) => {
if(typeof values == 'function'){
__setSelectValues((prev)=>{
const data = values(prev);
props.onChange(data)
return data
})
}else{
__setSelectValues(values)
props.onChange(values)
}
}
const handleAllChanged = (checked: boolean) => {
_setCheckedAll(checked)
const values:Id[][] = []
@ -99,7 +113,7 @@ const TagSelect = (props: {
set(!visible)
}}
>
<span>{checkedAll ? '全部来源' : '来源'}</span>
<span>{checkedAll || selectValues.length == 0 ? '全部来源' : '来源'}</span>
<CaretUpOutlined className={`ml-2 arrow-icon ${visible ? 'rotate-0' : 'rotate-180'}`}/>
</div>
<div className={`options-list-container absolute ${visible ? 'block' : 'hidden'}`}>

View File

@ -21,6 +21,7 @@ export default function ButtonDeleteBatch(props: { ids: Id[]; }) {
})
}
const onPushClick = () => {
if(loading) return;
if (props.ids.length === 0) {
showToast('请选择要删除的新闻', 'warning')
return
@ -35,7 +36,7 @@ export default function ButtonDeleteBatch(props: { ids: Id[]; }) {
return (
<div>
<button
loading={loading}
disabled={loading}
onClick={onPushClick}
className='bg-gray-300 hover:bg-gray-400 text-white'
>

View File

@ -21,6 +21,7 @@ export default function ButtonPushNews2Article(props: { ids: Id[]; }) {
})
}
const onPushClick = () => {
if(loading) return;
if (props.ids.length === 0) {
showToast('请选择要推入编辑的新闻', 'warning')
return
@ -34,7 +35,7 @@ export default function ButtonPushNews2Article(props: { ids: Id[]; }) {
}
return (
<button
loading={loading}
disabled={loading}
onClick={onPushClick}
className='bg-[#4096ff] hover:bg-blue-600 text-white'
>

View File

@ -17,6 +17,7 @@ export default function ButtonPush2Video(props: { ids: Id[]; onSuccess?: () => v
})
}
const onPushClick = () => {
if(loading) return;
if (props.ids.length === 0) {
showToast('请选择要开播的新闻', 'warning')
return
@ -31,7 +32,7 @@ export default function ButtonPush2Video(props: { ids: Id[]; onSuccess?: () => v
<div>
<button
type="primary"
loading={loading}
disabled={loading}
className='bg-[#4096ff] hover:bg-blue-600 text-white'
onClick={onPushClick}
>

View File

@ -1,6 +1,5 @@
import {Button, Input} from "antd";
import {Input} from "antd";
import {SearchOutlined} from "@ant-design/icons";
import ArticleCascader from "@/pages/news/components/article-cascader.tsx";
import React, {useState} from "react";
import {useSetState} from "ahooks";
import useArticleTags from "@/hooks/useArticleTags.ts";
@ -10,13 +9,14 @@ export default function EditSearchForm(props: {
onSubmit: (values: ApiArticleSearchParams) => void;
}) {
const articleTags = useArticleTags()
const [tags, setTags] = useState<Id[][]>([]);
const [tags, _setTags] = useState<Id[][]>([]);
const [params, setParams] = useSetState<ApiArticleSearchParams>({
pagination: {limit: 10, page: 1},
});
const handleSubmit = () => {
params.tags = tags.length == 0 ? undefined : tags.map(it => {
const handleSubmit = (_tags?:Id[][]) => {
const __tags = _tags || tags;
params.tags = __tags.length == 0 ? undefined : __tags.map(it => {
if (Array.isArray(it)) {
return {
level1: it[0],
@ -28,6 +28,7 @@ export default function EditSearchForm(props: {
}
}
});
console.log('tags',params.tags)
props.onSubmit({
...params,
pagination: {
@ -36,6 +37,12 @@ export default function EditSearchForm(props: {
}
})
}
const setTags = (_tags: Id[][])=>{
console.log(_tags)
_setTags(_tags)
handleSubmit(_tags)
}
return (
<div className="search-form-input flex gap-2 items-center">

View File

@ -70,7 +70,7 @@ export default function NewEdit() {
<div className="news-list-container mt-2">
<div className="controls flex justify-end mb-3 gap-2">
<Space>
<span> {data?.list.length} </span>
<span> {data?.list?.length || 0} </span>
<span className={'text-blue-500'}> {selectedRowKeys.length} </span>
</Space>
<div>

View File

@ -23,6 +23,7 @@ export default function ButtonPush2Room(props: { ids: Id[]; list: VideoInfo[];on
})
}
const onPushClick = () => {
if(loading) return;
if (props.ids.length === 0) {
showToast('请选择要推流的新闻', 'warning')
return

View File

@ -34,8 +34,8 @@ const NavigationUserContainer = () => {
},
];
const UserButton = () => (<div
className={`flex items-center rounded-3xl ${user ? 'bg-[#e3eeff]' : 'bg-primary-blue'} p-0.5 pr-2 cursor-pointer rounded`}>
<UserAvatar className="user-avatar size-6"/>
className={`flex items-center rounded-3xl ${user ? 'bg-[#e3eeff]' : 'bg-primary-blue'} p-1 pr-2 cursor-pointer rounded`}>
<UserAvatar className="user-avatar size-7"/>
{user ? <span className={"username ml-2 text-sm"}>{hidePhone(user.nickname)}</span> : (
<span className="text-sm mx-2 text-white"></span>
)}