@ -9,28 +9,42 @@ import {
Button ,
Space ,
Modal ,
Select
Select ,
Divider ,
Empty ,
} from 'antd'
import { useState , useRef , useEffect } from 'react'
import LexicalEditorInput from './LexicalEditorInput'
import HtmlPreview from './HtmlPreview'
import useSnippetStore from '@/stores/SnippetStore'
import { isEmpty , isNotEmpty } from '@/utils/commons'
function SnippetList ( ) {
const [ ] = Form . useForm ( )
const [ search form] = Form . useForm ( )
const [ snippetForm ] = Form . useForm ( )
const editorRef = useRef ( null )
const [ fetchParamList , ownerList , typeList ] =
useSnippetStore ( state => [ state . fetchParamList , state . ownerList , state . typeList ] )
const [
fetchParamList ,
ownerList ,
typeList ,
fetchSnippetList ,
snippetList ,
fetchSnippetDetail ,
] = useSnippetStore ( ( state ) => [
state . fetchParamList ,
state . ownerList ,
state . typeList ,
state . fetchSnippetList ,
state . snippetList ,
state . fetchSnippetDetail ,
] )
const [ isSnippetModalOpen , setSnippetModalOpen ] = useState ( false )
const [ editorContent , setEditorContent ] = useState (
"<p>Discover the best of the world with one of the <strong>best-rated tour companies for personalized travel</strong>. With over <strong>10,000+ reviews and a 98.8% 5-star rating</strong>, we focus on streamlining your planning and ensuring joyful travels. Whether it's a milestone celebration or a relaxing getaway, let us help create your beautiful journey.</p>" ,
)
const [ editorContent , setEditorContent ] = useState ( '' )
const [ isHtmlLoading , setHtmlLoading ] = useState ( false )
const onSnippetFinish = ( values ) => {
console . log ( 'onSnippetFinish:' , values )
/ / c o n s o l e . i n f o ( J S O N . s t r i n g i f y ( e d i t o r R e f . c u r r e n t . g e t E d i t o r S t a t e ( ) ) )
}
@ -39,6 +53,20 @@ function SnippetList() {
/ / f o r m . r e s e t F i e l d s ( )
}
const handleSearchFinish = ( values ) => {
console . log ( 'handleSearchFinish:' , values )
fetchSnippetList ( values )
}
const handleSnippetSelected = ( snippetId ) => {
setHtmlLoading ( true )
fetchSnippetDetail ( snippetId )
. then ( ( content ) => {
setEditorContent ( content )
} )
. finally ( ( ) => setHtmlLoading ( false ) )
}
useEffect ( ( ) => {
fetchParamList ( )
} , [ ] )
@ -93,10 +121,10 @@ function SnippetList() {
} ,
] } >
< Select >
< Select.Option value = "收款" > 收款 < / Select.Option >
< Select.Option value = "西藏" > 西藏 < / Select.Option >
< Select.Option value = "催信" > 催信 < / Select.Option >
< Select.Option value = "提醒" > 提醒 < / Select.Option >
< Select.Option value = '收款' > 收款 < / Select.Option >
< Select.Option value = '西藏' > 西藏 < / Select.Option >
< Select.Option value = '催信' > 催信 < / Select.Option >
< Select.Option value = '提醒' > 提醒 < / Select.Option >
< / Select >
< / Form.Item >
< Form.Item
@ -115,36 +143,28 @@ function SnippetList() {
< Space direction = 'vertical' size = 'large' style = { { width : '100%' } } >
< Form
layout = { 'inline' }
form = { form }
form = { searchform }
onFinish = { handleSearchFinish }
initialValues = { {
layout : 'inline' ,
owner : '' , / / 默 认 登 录 登 账 号
type : '' ,
} } >
< Form.Item label = '所有者' >
< Select className = '!w-40' options = { ownerList } / >
< Form.Item label = '所有者' name = 'owner' >
< Select
className = '!w-40'
options = { ownerList }
showSearch
optionFilterProp = 'label'
notFoundContent = { '找不到' } > < / Select >
< / Form.Item >
< Form.Item label = '类别' >
< Select className = '!w-40' options = { typeList } / >
< Form.Item label = '类别' name = 'type' >
< Select className = '!w-40' options = { typeList } / >
< / Form.Item >
< Form.Item label = '状态' >
< Input placeholder = 'placeholder' / >
< / Form.Item >
< Form.Item label = '标题' >
< Input placeholder = 'placeholder' / >
< Form.Item label = '标题' name = 'title' >
< Input / >
< / Form.Item >
< Form.Item >
< Button
type = 'primary'
onClick = { ( ) => {
console . info ( editorRef . current )
const editorStateJSONString =
'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"We are
const editorState = editorRef . current . parseEditorState (
editorStateJSONString ,
)
editorRef . current . setEditorState ( editorState )
} } >
< Button type = 'primary' htmlType = 'submit' >
搜索
< / Button >
< / Form.Item >
@ -153,7 +173,7 @@ function SnippetList() {
onClick = { ( ) => {
snippetForm . setFieldsValue ( {
title : 'Title....' ,
content : editorContent
content : editorContent ,
} )
setSnippetModalOpen ( true )
} } >
@ -165,27 +185,17 @@ function SnippetList() {
< Col span = { 8 } >
< List
bordered
dataSource = { [
'问客人发帖' ,
'婚礼团upsale' ,
'泰国相关' ,
'日本暑期预警' ,
'Highlights Travel Family Loyalty Club' ,
] }
dataSource = { snippetList }
renderItem = { ( item ) => (
< List.Item
className = 'hover:bg-stone-50'
onClick = { ( e ) => {
console . info ( item )
setEditorContent ( '<strong>' + item + '</strong>' )
onClick = { ( ) => {
handleSnippetSelected ( item . adi _sn )
} } >
< Row gutter = { 16 } className = 'w-full' >
< Col span = { 16 } >
< Tag color = 'magenta' > 类型 < / Tag >
{ item }
< / Col >
< Col span = { 8 } >
< div className = 'text-end' > 王静 < / div >
< Col span = { 20 } > { item . adi _title } < / Col >
< Col span = { 4 } >
< Tag color = 'blue' > { item . adi _type _name } < / Tag >
< / Col >
< / Row >
< / List.Item >
@ -193,51 +203,7 @@ function SnippetList() {
/ >
< / Col >
< Col span = { 16 } >
< div className = 'border-solid border rounded border-gray-300' >
< Space
direction = 'vertical'
size = 'middle'
style = { {
display : 'flex' ,
} } >
< pre className = 'whitespace-pre-wrap break-words ps-6 pe-6' >
< p >
Discover China with the < strong > award - winning < / strong > and { ' ' }
< strong > best - rated < / strong > tour company for { ' ' }
< strong > personalized travel in China < / strong > . Honored as { ' ' }
< strong > China is Leading Tour Operator < / strong > by the { ' ' }
< strong > World Travel Awards < / strong > , we boast { ' ' }
< strong > 10 , 000 + reviews < / strong > and a remarkable { ' ' }
< strong > 98.8 % 5 - star rating < / strong > . Our expertise in
customizing personalized China explorations is backed by our
company - managed local services across China . Explore and
kickstart your personalized travel experience with just a
click !
< / p >
< / pre >
< Flex gap = 'middle' justify = 'flex-end' wrap className = 'p-6' >
< Button
onClick = { ( ) => {
setSnippetModalOpen ( true )
} } >
编辑
< / Button >
< Button
onClick = { ( ) => {
/ /
} } >
复制
< / Button >
< Button
danger
onClick = { ( ) => {
/ /
} } >
删除
< / Button >
< / Flex >
< / Space >
< / div >
< HtmlPreview value = { editorContent } loading = { isHtmlLoading } / >
< / Col >
< / Row >
< / Space >
Jimmy Liow
11 months ago