|
|
@@ -5,6 +5,9 @@ import { Checkbox, Drawer, Modal, Tabs, TabsProps, message, Button, Form, Input,
|
|
|
import { ReactComponent as Close } from 'assets/close.svg'
|
|
|
import { ColumnService, IMessageDetail } from 'Column/Column.service'
|
|
|
import styles from '../css/ColumnIndex.module.scss'
|
|
|
+
|
|
|
+import { CheckboxValueType } from 'antd/lib/checkbox/Group'
|
|
|
+
|
|
|
const { Item } = Form
|
|
|
interface IColumnCenterProps {
|
|
|
open: boolean // 是否打开
|
|
|
@@ -13,83 +16,77 @@ interface IColumnCenterProps {
|
|
|
|
|
|
/**研选专栏 留言管理 */
|
|
|
const ColumnMessage: React.FC<IColumnCenterProps> = props => {
|
|
|
- const [messageList, setMessageList] = useState<IMessageDetail[]>([
|
|
|
- {
|
|
|
- Msg: 'Item 1',
|
|
|
- CheckIds: [],
|
|
|
- Id: 1,
|
|
|
- ChildrenList: [
|
|
|
- { Msg: 'Child 1-1', Ind: 11 },
|
|
|
- { Msg: 'Child 1-2', Ind: 12 }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- Msg: 'Item 2',
|
|
|
- CheckIds: [],
|
|
|
- Id: 2,
|
|
|
- ChildrenList: [
|
|
|
- { Msg: 'Child 2-1', Ind: 22 },
|
|
|
- { Msg: 'Child 2-2', Ind: 21 }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]) // 列表
|
|
|
+ const { open } = props
|
|
|
+ const pageSize = 10
|
|
|
+ const currentIndex = 1
|
|
|
+ const [messageList, setMessageList] = useState<IMessageDetail[]>([]) // 列表
|
|
|
const [selectCheckbox, setSelectCheckbox] = useState<(string | number)[]>([]) // 选择Id
|
|
|
const [msgTextVisible, setMsgTextVisible] = useState<boolean>(false) // 选择Id
|
|
|
+ const [replyItemID, setReplyItemID] = useState<number>(0) // 选择Id
|
|
|
+ const [replyParentId, setReplyreplyParentId] = useState<number>(0) // 选择Id
|
|
|
+ const [tabsAct, setTabsAct] = useState<number>(1) // 选择Id
|
|
|
const [form] = Form.useForm()
|
|
|
useEffect(() => {
|
|
|
console.log(11)
|
|
|
- }, [])
|
|
|
+ if (open) {
|
|
|
+ getColumnManageList(pageSize, currentIndex, tabsAct)
|
|
|
+ }
|
|
|
+ }, [open])
|
|
|
|
|
|
// 列表
|
|
|
- // const { run: getColumnCenterList } = useRequest(ColumnService.getColumnCenterList, {
|
|
|
- // manual: true,
|
|
|
- // formatResult: response => response.data.Data,
|
|
|
- // onSuccess: res => {
|
|
|
- // setMessageList(res)
|
|
|
- // }
|
|
|
- // })
|
|
|
- const handleChange = (checkedValues: number[], item: IMessageDetail) => {
|
|
|
+ const { run: getColumnManageList } = useRequest(ColumnService.getColumnManageList, {
|
|
|
+ manual: true,
|
|
|
+ formatResult: response => response.data.Data,
|
|
|
+ onSuccess: res => {
|
|
|
+ console.log(res)
|
|
|
+
|
|
|
+ setMessageList(res.List)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 多选框的选择事件
|
|
|
+ const checkboxChange = (e: CheckboxValueType[], item: IMessageDetail) => {
|
|
|
const updatedMessage = messageList.map(msg => {
|
|
|
- if (msg.Id === item.Id) {
|
|
|
- return { ...msg, CheckIds: checkedValues }
|
|
|
+ if (item.MessageId === msg.MessageId) {
|
|
|
+ if (e.length > 0 && item.CheckIds.length === 0) {
|
|
|
+ const arr = []
|
|
|
+ arr.push(item.MessageId)
|
|
|
+ item.ChildList.forEach(child => {
|
|
|
+ arr.push(child.MessageId)
|
|
|
+ })
|
|
|
+ return { ...msg, CheckIds: arr }
|
|
|
+ } else {
|
|
|
+ return { ...msg, CheckIds: [] }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return msg
|
|
|
}
|
|
|
- return msg
|
|
|
})
|
|
|
- if (checkedValues.length > 0) {
|
|
|
- setSelectCheckbox([...selectCheckbox, item.Id])
|
|
|
- } else {
|
|
|
- setSelectCheckbox(selectCheckbox.filter(key => key !== item.Id))
|
|
|
- }
|
|
|
+ let arr: number[] = []
|
|
|
+
|
|
|
+ updatedMessage.forEach(_ => {
|
|
|
+ arr = [...arr, ..._.CheckIds]
|
|
|
+ })
|
|
|
+ setSelectCheckbox(arr)
|
|
|
setMessageList(updatedMessage)
|
|
|
}
|
|
|
|
|
|
- const handleChildChange = (checkedId: number, parentId: number) => {
|
|
|
- const checkedValues: Array<number> = []
|
|
|
- if (checkedId) {
|
|
|
- messageList.forEach(item => {
|
|
|
- if (item.Id === parentId) {
|
|
|
- checkedValues.push(item.Id)
|
|
|
- item.ChildrenList.forEach(child => checkedValues.push(child.Ind))
|
|
|
- }
|
|
|
- })
|
|
|
- handleChange(checkedValues, messageList.find(item => item.Id === parentId)!)
|
|
|
- }
|
|
|
- }
|
|
|
// 设置共开的按钮点击事件
|
|
|
const setupClickHandler = () => {
|
|
|
- console.log(selectCheckbox)
|
|
|
+ postMessagePublic(selectCheckbox, 1)
|
|
|
}
|
|
|
+
|
|
|
// 留言的确定事件
|
|
|
const handleFinish = (value: { Content: string }) => {
|
|
|
console.log(value)
|
|
|
+ applyCheckColumnNote(replyItemID, value.Content, replyParentId)
|
|
|
}
|
|
|
// 留言的取消事件
|
|
|
-
|
|
|
const handleOnModalClose = () => {
|
|
|
form.resetFields()
|
|
|
setMsgTextVisible(false)
|
|
|
}
|
|
|
- // 算出留言回复的按钮
|
|
|
+ //删除留言回复的按钮
|
|
|
const deleteHandle = (id: number) => {
|
|
|
Modal.confirm({
|
|
|
title: '提醒',
|
|
|
@@ -99,26 +96,25 @@ const ColumnMessage: React.FC<IColumnCenterProps> = props => {
|
|
|
centered: true,
|
|
|
closable: true,
|
|
|
onOk: () => {
|
|
|
- console.log('点击了')
|
|
|
-
|
|
|
- // 这里就是删除的请求了
|
|
|
+ postMessageDelete(id)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
// 点击回复的按钮
|
|
|
const replyMsgHandler = (item: IMessageDetail) => {
|
|
|
- console.log(item)
|
|
|
+ setReplyItemID(item.YanxuanSpecialId)
|
|
|
+ setReplyreplyParentId(item.MessageId)
|
|
|
setMsgTextVisible(true)
|
|
|
}
|
|
|
|
|
|
// 点击了置顶按钮
|
|
|
const toppingHandler = (item: IMessageDetail) => {
|
|
|
- console.log(item)
|
|
|
+ const DoType = item.TopTime > 0 ? 0 : 1
|
|
|
+ postMessageTop(item.MessageId, DoType)
|
|
|
}
|
|
|
|
|
|
// 点击取消精选
|
|
|
const cancelSelectionHandler = (item: IMessageDetail) => {
|
|
|
- console.log(item)
|
|
|
Modal.confirm({
|
|
|
title: '提醒',
|
|
|
content: '取消精选后，留言将回到普通留言栏下',
|
|
|
@@ -127,62 +123,79 @@ const ColumnMessage: React.FC<IColumnCenterProps> = props => {
|
|
|
centered: true,
|
|
|
closable: true,
|
|
|
onOk: () => {
|
|
|
- console.log('点击了')
|
|
|
-
|
|
|
- // 这里就是删除的请求了
|
|
|
+ postMessagePublic([item.MessageId], 0)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
+ // 文章详情
|
|
|
+ const handleToDetail = (item: IMessageDetail) => {
|
|
|
+ window.open(`/column/detail/${item.YanxuanSpecialId}`)
|
|
|
+ }
|
|
|
const items: TabsProps['items'] = [
|
|
|
{
|
|
|
key: '1',
|
|
|
label: <span className="column-tabs">普通留言</span>,
|
|
|
children: (
|
|
|
<div className="columncenter-content">
|
|
|
- <div>
|
|
|
- <Button type="primary" size="small" disabled={!selectCheckbox.length} onClick={setupClickHandler}>
|
|
|
+ <div className="content-disclosure">
|
|
|
+ <span
|
|
|
+ className={selectCheckbox.length ? 'columncenter-content-btn' : 'columncenter-content-btn btn-disabled'}
|
|
|
+ onClick={setupClickHandler}
|
|
|
+ >
|
|
|
设为公开
|
|
|
- </Button>
|
|
|
- 留言设为公开后将在文章下展示
|
|
|
+ </span>
|
|
|
+ <span> 留言设为公开后将在文章下展示</span>
|
|
|
</div>
|
|
|
- {messageList.map(item => (
|
|
|
- <div key={item.Id}>
|
|
|
- <Checkbox
|
|
|
- key={item.Id}
|
|
|
- checked={item.CheckIds.length > 0} // 当Item有任何一个Child被选中时，Item被选中
|
|
|
- onChange={e => {
|
|
|
- const allChildIds = (item.ChildrenList || []).map(child => child.Ind)
|
|
|
- // 当Item的Checkbox被点击时，选择或取消选择所有子项
|
|
|
- handleChange(e.target.checked ? allChildIds : [], item)
|
|
|
- }}
|
|
|
- >
|
|
|
- {item.Msg}
|
|
|
- </Checkbox>
|
|
|
- <p>
|
|
|
- <Button type="primary" size="small" onClick={() => replyMsgHandler(item)}>
|
|
|
- 回复
|
|
|
- </Button>
|
|
|
- </p>
|
|
|
- {item.ChildrenList?.map(child => (
|
|
|
- <div key={child.Ind} style={{ marginLeft: 20 }}>
|
|
|
- <Checkbox
|
|
|
- disabled={item.CheckIds.length > 0}
|
|
|
- key={child.Ind}
|
|
|
- checked={item.CheckIds.includes(child.Ind)}
|
|
|
- onChange={() => handleChildChange(child.Ind, item.Id)}
|
|
|
- >
|
|
|
- {child.Msg}
|
|
|
+ {messageList.length > 0 &&
|
|
|
+ messageList.map(item => (
|
|
|
+ <div key={item.MessageId}>
|
|
|
+ <Checkbox.Group
|
|
|
+ style={{ display: 'block' }}
|
|
|
+ value={item.CheckIds}
|
|
|
+ onChange={(e: CheckboxValueType[]) => {
|
|
|
+ checkboxChange(e, item)
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Checkbox value={item.MessageId}>
|
|
|
+ <span style={{ fontWeight: '600' }}>{item.Content}</span>
|
|
|
</Checkbox>
|
|
|
- <p>
|
|
|
- <Button type="primary" size="small" onClick={() => deleteHandle(child.Ind)} danger>
|
|
|
- 删除
|
|
|
- </Button>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- ))}
|
|
|
+ <div className="columncenter-content-img-time">
|
|
|
+ <img src={item.Headimgurl} alt="" />
|
|
|
+ <span> {item.CreateTime}</span>
|
|
|
+ </div>
|
|
|
+ <div className="columncenter-content-item-title">
|
|
|
+ <p className="item-title" onClick={() => handleToDetail(item)}>
|
|
|
+ {item.SourceTitle}
|
|
|
+ </p>
|
|
|
+ <span className="columncenter-content-btn" onClick={() => replyMsgHandler(item)}>
|
|
|
+ 回复
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div className="columncenter-content-child">
|
|
|
+ {item.ChildList.length > 0 &&
|
|
|
+ item.ChildList.map(child => (
|
|
|
+ <div key={child.MessageId} style={{ marginLeft: 20 }}>
|
|
|
+ <Checkbox disabled={item.CheckIds.includes(item.MessageId)} value={child.MessageId}>
|
|
|
+ {child.Content}
|
|
|
+ </Checkbox>
|
|
|
+ <div className="child-img-time">
|
|
|
+ <div className="columncenter-content-img-time">
|
|
|
+ <img src={child.Headimgurl} alt="" />
|
|
|
+ <span> {child.CreateTime}</span>
|
|
|
+ </div>
|
|
|
+ <span
|
|
|
+ className="columncenter-content-btn detele-btn"
|
|
|
+ onClick={() => deleteHandle(child.MessageId)}
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </Checkbox.Group>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
</div>
|
|
|
)
|
|
|
},
|
|
|
@@ -192,25 +205,41 @@ const ColumnMessage: React.FC<IColumnCenterProps> = props => {
|
|
|
label: <span className="column-tabs">公开的留言</span>,
|
|
|
children: (
|
|
|
<div className="columncenter-content">
|
|
|
- {messageList.map(item => (
|
|
|
- <div key={item.Id}>
|
|
|
- {item.Msg}
|
|
|
-
|
|
|
- <p>
|
|
|
- <Button type="primary" size="small" onClick={() => toppingHandler(item)}>
|
|
|
- 置顶
|
|
|
- </Button>
|
|
|
- <Button type="primary" size="small" onClick={() => cancelSelectionHandler(item)}>
|
|
|
- 取消精选
|
|
|
- </Button>
|
|
|
- </p>
|
|
|
- {item.ChildrenList?.map(child => (
|
|
|
- <div key={child.Ind} style={{ marginLeft: 20 }}>
|
|
|
- {child.Msg}
|
|
|
+ {messageList &&
|
|
|
+ messageList.length > 0 &&
|
|
|
+ messageList.map(item => (
|
|
|
+ <div key={item.MessageId} style={{ marginBottom: 30 }}>
|
|
|
+ <div className="columncenter-content-disclosure"> {item.Content}</div>
|
|
|
+ <div className="columncenter-content-img-time">
|
|
|
+ <span> {item.RealName}</span>
|
|
|
+ <span style={{ marginLeft: 10 }}> {item.CreateTime}</span>
|
|
|
+ </div>
|
|
|
+ <div className="columncenter-content-item-title">
|
|
|
+ <p className="item-title" onClick={() => handleToDetail(item)}>
|
|
|
+ {item.SourceTitle}
|
|
|
+ </p>
|
|
|
+ <div>
|
|
|
+ <span className="columncenter-content-btn" onClick={() => toppingHandler(item)}>
|
|
|
+ {item.TopTime > 0 ? '已置顶' : '置顶'}
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ style={{ marginLeft: 10 }}
|
|
|
+ className="columncenter-content-btn"
|
|
|
+ onClick={() => cancelSelectionHandler(item)}
|
|
|
+ >
|
|
|
+ 取消精选
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- ))}
|
|
|
+ {item.ChildList.length > 0 &&
|
|
|
+ item.ChildList.map(child => (
|
|
|
+ <div key={child.MessageId} style={{ marginLeft: 20 }}>
|
|
|
+ <div className="columncenter-content-disclosure"> {child.Content}</div>
|
|
|
+ {child.CreateTime}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
@@ -218,8 +247,10 @@ const ColumnMessage: React.FC<IColumnCenterProps> = props => {
|
|
|
|
|
|
// 点击了tabs的change
|
|
|
const onChange = (key: string) => {
|
|
|
- // setMessageList()
|
|
|
- // getColumnCenterList(Number(key))
|
|
|
+ setMessageList([])
|
|
|
+ setSelectCheckbox([])
|
|
|
+ setTabsAct(Number(key))
|
|
|
+ getColumnManageList(pageSize, currentIndex, Number(key))
|
|
|
}
|
|
|
|
|
|
// 关闭了侧边Drawer
|
|
|
@@ -227,6 +258,40 @@ const ColumnMessage: React.FC<IColumnCenterProps> = props => {
|
|
|
props.onClose('openMessage')
|
|
|
}
|
|
|
|
|
|
+ // 留言的回复
|
|
|
+ const { run: applyCheckColumnNote } = useRequest(ColumnService.postMessageAdd, {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: res => {
|
|
|
+ res.data.Success ? message.success(res.data.Msg) : message.error(res.data.Msg || res.data.ErrMsg)
|
|
|
+ setMsgTextVisible(false)
|
|
|
+ getColumnManageList(pageSize, currentIndex, tabsAct)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 删除留言的接口
|
|
|
+ const { run: postMessageDelete } = useRequest(ColumnService.postMessageDelete, {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: res => {
|
|
|
+ res.data.Success ? message.success(res.data.Msg) : message.error(res.data.Msg || res.data.ErrMsg)
|
|
|
+ getColumnManageList(pageSize, currentIndex, tabsAct)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 精选留言的接口
|
|
|
+ const { run: postMessagePublic } = useRequest(ColumnService.postMessagePublic, {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: res => {
|
|
|
+ res.data.Success ? message.success(res.data.Msg) : message.error(res.data.Msg || res.data.ErrMsg)
|
|
|
+ getColumnManageList(pageSize, currentIndex, tabsAct)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 置顶留言的接口
|
|
|
+ const { run: postMessageTop } = useRequest(ColumnService.postMessageTop, {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: res => {
|
|
|
+ res.data.Success ? message.success(res.data.Msg) : message.error(res.data.Msg || res.data.ErrMsg)
|
|
|
+ getColumnManageList(pageSize, currentIndex, tabsAct)
|
|
|
+ }
|
|
|
+ })
|
|
|
return (
|
|
|
<Drawer
|
|
|
title="留言管理"
|
bding
