Browse Source

优化查询,增加标题高亮关键字

main
dark 6 months ago
parent
commit
ad098a8520
  1. 40
      src/pages/videos/list/index.tsx
  2. 3
      src/pages/videos/list/style.ts

40
src/pages/videos/list/index.tsx

@ -41,6 +41,7 @@ const Video = () => {
const { data: category, isLoading: isCategoryFetching } = useAtomValue(categoryByIdAtom)
const [ open, setOpen ] = useState(false)
const [ openFilter, setFilterOpen ] = useState(false)
const [ searchKey, setSearchKey ] = useState(search?.title)
const columns = useMemo(() => {
return [
@ -69,6 +70,12 @@ const Video = () => {
colProps: {
span: 8
},
render: (_text, record) => {
//高亮搜索关键字, 从search.title中获取
const title = record.title?.replace?.(new RegExp(`(${search?.title})`, 'ig'), '<span class="ant-pro-table-highlight">$1</span>')
return <span dangerouslySetInnerHTML={{ __html: title }}></span>
}
},
{
'title': t(`${i18nPrefix}.columns.title_sub`, 'TitleSub'),
@ -79,6 +86,12 @@ const Video = () => {
},
colProps: {
span: 16
},
render: (_text, record) => {
//高亮搜索关键字, 从search.title中获取
const title = record.title_sub?.replace?.(new RegExp(`(${search?.title_sub})`, 'ig'), '<span class="ant-pro-table-highlight">$1</span>')
return <span dangerouslySetInnerHTML={{ __html: title }}></span>
}
},
{
@ -158,7 +171,7 @@ const Video = () => {
const props = { ...config } as any
delete props.mode
const isForm = config.type === 'form'
let value = isForm && config.value ? dayjs().set('year', config.value) : undefined
let value = isForm && config.value ? dayjs().set('year', config.value) : undefined
if (config.value?.$isDayjsObject) {
value = config.value as dayjs.Dayjs
}
@ -558,6 +571,7 @@ const Video = () => {
useEffect(() => {
setSearchKey(search?.title)
filterForm.setFieldsValue(search)
}, [ search ])
@ -575,19 +589,23 @@ const Video = () => {
headerTitle={t(`${i18nPrefix}.title`, '视频管理')}
toolbar={{
search: {
loading: isFetching && !!search.key,
loading: isFetching && !!search.title,
onSearch: (value: string) => {
setSearch(prev => ({
...prev,
key: value
title: value
}))
},
allowClear: true,
onChange: (e) => {
setSearchKey(e.target?.value)
},
value: searchKey,
placeholder: t(`${i18nPrefix}.placeholder`, '输入视频名称')
},
actions: [
<Tooltip key={'filter'} title={t(`${i18nPrefix}.filter.tooltip`, '高级查询')}>
<Badge count={ getValueCount(search) }>
<Badge count={getValueCount(search)}>
<Button
onClick={() => {
setFilterOpen(true)
@ -714,6 +732,7 @@ const Video = () => {
<Space>
<Button onClick={() => {
props.reset()
}}>{props.searchConfig?.resetText}</Button>
<Button type="primary"
onClick={() => {
@ -745,16 +764,9 @@ const Video = () => {
}
})
if (Object.keys(values).length === 0) {
setSearch({})
} else {
setSearch(prev => {
return {
...prev,
...values
}
})
}
setSearch(values)
}}
columns={columns.filter(item => !item.hideInSearch) as ProFormColumnsType[]}/>
</ListPageLayout>

3
src/pages/videos/list/style.ts

@ -15,6 +15,9 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
height: calc(100vh - 350px)
}
}
.ant-pro-table-highlight{
color: red;
}
`
return {

Loading…
Cancel
Save