Skip to content

C
config-web
Commit 16d6477e by 肖玉娟
Options

✨ feat:赛事页面

parent 0b3d4bed
Showing with 187 additions and 253 deletions
src/pages/Match/List.tsx
import React, { useCallback, useState } from 'react'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Button, message, Popconfirm, Space } from 'antd'
import { ProCard } from '@ant-design/pro-components'
import ProForm, { ProFormInstance, ProFormText, ProFormTextArea, ProFormTreeSelect } from '@ant-design/pro-form'
import { DList } from '@/components/DList'
import { DTable, usePTable } from '@/components/DTable'
// import { useAppSelector } from '@/hooks/useStore'
import { Button, message } from 'antd'
import { useAppDispatch, useAppSelector } from '@/hooks/useStore'
import { DelApi, GetListByPageApi } from './common/services'
import { TState } from './common/typing'
import AddUpdate from './components/addUpdate'
import { getinteracts, getStudio } from './store/match'
const Match = () => {
const [tab, setTab] = useState('')
const formRef = useRef<ProFormInstance>()
const dispatch = useAppDispatch()
const { files, studios, interacts } = useAppSelector(({ match }) => (match))
const [dataSource, setDataSource] = useState<TState[]>([])
const [currentId, setCurrentId] = useState<number>(NaN)
const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
const { tableProps, actionRef } = usePTable<TState>({
headerTitle: '赛事列表',
request: useCallback(async (params: any) => {
const result = {
data: [
{
id: 1,
studioName: 'NBA',
studioId: 'NBA赛事描述内容',
ip1: '260 ,242 ,250',
ip2: '发电时刻， 球员评分，选帖上暂停'
},
{
id: 2,
studioName: 'BOOM',
studioId: 'BOOM赛事描述内容',
ip1: '400',
ip2: '发电时刻， 球员评分，选帖上暂停,商业广告'
}
],
total: 1,
success: true
}
try {
const { pageSize, current: pageNum, studioName } = params
const { data } = await GetListByPageApi({
pageBean: {
pageNum,
pageSize
},
studioName
})
const { list, total } = data
setDataSource(list)
// result.data = list
result.total = total
} catch (error) {
console.error('请求列表失败', error)
}
return result
}, []),
columns: [
{
title: 'ID',
dataIndex: 'id',
width: 100,
copyable: true,
hideInSearch: true
},
{
title: '赛事名称',
key: 'studioName',
dataIndex: 'studioName',
hideInSearch: false
},
{
title: '赛事说明',
key: 'studioId',
dataIndex: 'studioId',
hideInSearch: true
},
{
title: '关联直播间',
key: 'ip1',
dataIndex: 'ip1',
hideInSearch: true,
render: (text, record) => [
<span key='primaryService'>{record?.ip1}</span>
]
},
{
title: '所关联互动模块',
key: 'ip2',
dataIndex: 'ip2',
hideInSearch: true,
render: (text, record) => [
<span key='primaryService'>{record?.ip2}</span>
]
},
{
title: '创建时间',
key: 'create_time',
dataIndex: 'create_time',
valueType: 'dateTime',
hideInSearch: true
},
{
title: '修改时间',
key: 'update_time',
dataIndex: 'update_time',
valueType: 'dateTime',
hideInSearch: true
},
{
title: '操作',
valueType: 'option',
render: (text, record) => [
<Space key="option" size={20}>
<a key="editable">
编辑
</a>
<Popconfirm
title="确认删除该条数据？"
onConfirm={() => handleClickOperation('Del', record)}
okText="Yes"
cancelText='No'>
<a key="delete">
删除
</a>
</Popconfirm>
</Space>
]
useEffect(() => {
getData()
dispatch(getStudio())
dispatch(getinteracts())
}, [])
const getData = async () => { // 演播室数据
const { data } = await GetListByPageApi({
pageBean: {
pageNum: 0,
pageSize: 0
}
],
toolBarRender: useCallback(() => [
<Button key='tool' type="primary" onClick={() => handleUpdateVisible(true, '')} >
创建赛事
</Button>
], [])
})
})
setTab(String(data?.list[0].id))
setDataSource(data?.list)
}
const handleClickOperation = useCallback( // 表格操作
async (type: 'Edit' | 'Del', record: TState) => {
switch (type) {
case 'Edit':
setIsModalVisible(true)
setCurrentId(record.id)
break
case 'Del':
try {
......@@ -150,7 +50,7 @@ const Match = () => {
return
}
message.success('删除成功')
dataSource.length <= 1 ? actionRef.current?.reloadAndRest?.() : actionRef.current?.reload?.()
getData()
} catch (error) {
console.log(error)
message.error('删除失败')
......@@ -160,19 +60,74 @@ const Match = () => {
}, [dataSource])
const handleUpdateVisible = (value: boolean, type: string) => {
setIsModalVisible(value)
if (!value) {
setCurrentId(NaN)
}
if (type === 'add') {
(actionRef.current as any).reload()
}
type === 'add' && getData()
}
const data = useMemo(() => {
return dataSource.map((item) => <ProCard.TabPane key={String(item.id)} tab={item?.name}>
<ProForm
formRef={formRef}
autoFocusFirstInput
submitter={{
searchConfig: {
submitText: '保存'
},
resetButtonProps: { // 配置按钮的属性
style: {
display: 'none' // 隐藏重置按钮
}
},
render: (props: any, doms: any) => {
return [
...doms,
<Button type="primary" key='delete' danger onClick={() => handleClickOperation('Del', item)}>删除</Button>
]
}
}}
initialValues={item}
onFinish={(values: any) => handleClickOperation('Edit', values)}
>
<ProFormText width="md" name="name" label="赛事名称" placeholder="请输入赛事名称" />
<ProFormTextArea width="xl" name="" label="赛事说明" placeholder="请输入赛事说明" />
<ProFormTreeSelect
name="studio"
label="关联演播室"
placeholder="请选择演播室"
allowClear
width="lg"
secondary
request={async () => { return studios }}
fieldProps={files}
/>
<ProFormTreeSelect
name="studio"
label="关联互动模块"
placeholder="请选择互动模块"
allowClear
width="lg"
secondary
request={async () => { return interacts }}
fieldProps={files}
/>
</ProForm>
</ProCard.TabPane>)
}, [dataSource])
return (
<>
<DList>
<DTable {...tableProps} />
</DList>
<AddUpdate visible={isModalVisible} handleUpdateVisible={handleUpdateVisible} id={currentId} />
<ProCard
tabs={{
type: 'card',
tabPosition: 'top',
activeKey: tab,
onChange: (key: any) => {
setTab(key)
}
}}
extra={<Button type="primary" onClick={() => handleUpdateVisible(true, '')}>新增</Button>}
>
{data}
</ProCard>
<AddUpdate visible={isModalVisible} handleUpdateVisible={handleUpdateVisible} />
</>
)
}
......
src/pages/Match/common/services.ts
......@@ -6,7 +6,7 @@ import { TMatchList, TMatchUpdate } from './typing'
* @description 列表查询
*/
export const GetListByPageApi = (params: TMatchList): Promise<any> => {
return Post('/studio/list', { params })
return Post('type/getGameTypeList', { params })
}
/**
* @description 删除
......
src/pages/Match/common/typing.ts
export type TMatchList = {
id?:number
pageBean:{
pageNum: number // 当前页码，从1开始
pageSize:number // 每页显示记录数
},
studioName: string // 演播室名称
// limit: number // 每页显示记录数
// page: number // 当前页码，从1开始
// order: string // 排序方式，可选值(asc、desc)
// orderField: string // 排序字段
// username: string // 用户名
}
export type TMatchUpdate = {
studioName: string // 演播室名称
studioId: string // 演播室id
ip1: string // 主服务ip
ip2: string // 备服务ip
port1: string // 主服务器端口
port2: string // 备服务器端口
sceneNameS: string // 主场景地址
sceneNameQ: string // 备场景地址
createTime: string // 创建时间
updateTime: string // 修改时间
type:string // 弹幕类型 1.入库并存为TXT,2.只保存txt,3.发送tcp并存为txt
intervalTime: number // 弹幕轮询时间间隔
bulletChatNums: number // 筛选弹幕限制数量
powerTime: number // 发电时刻开启服务时，默认时间间隔
id: number
info: string
name: string // 演播室名称
models: string
modelsList: Array<any>
pageBean: object
studioList: Array<any>
studios: string
createTime: string
updateTime: string
}
export type TState = TMatchUpdate
src/pages/Match/components/addUpdate.tsx
import { useState, useEffect, useCallback } from 'react'
import { ModalForm, ProFormText, ProFormTreeSelect } from '@ant-design/pro-form'
import { message } from 'antd'
import { GetDetailApi, UpdateApi, AddApi } from '../common/services'
import { useAppSelector } from '@/hooks/useStore'
import { AddApi } from '../common/services'
type TProps = {
visible: boolean,
id: number,
handleUpdateVisible: (value:boolean, type: string) => void
}
const AddUpdate = ({ id, visible, handleUpdateVisible }:TProps) => {
const [title, setTitle] = useState<string>('')
const files = { // TreeSelect组件配置项
showArrow: false,
filterTreeNode: true,
showSearch: true,
dropdownMatchSelectWidth: false,
labelInValue: true,
autoClearSearchValue: true,
multiple: true,
treeNodeFilterProp: 'label',
fieldNames: {
label: 'label'
}
}
const AddUpdate = ({ visible, handleUpdateVisible }:TProps) => {
const title = '创建赛事'
const { files, studios, interacts } = useAppSelector(({ match }) => (match))
useEffect(() => {
getMenus()
setTitle(() => {
return id ? '编辑赛事' : '创建赛事'
})
}, [visible])
const fetchDetail = useCallback(async () => {
let data:any = {
studioName: '', // 演播室名称
studioId: '', // 演播室id
ip1: '', // 主服务ip
ip2: '', // 备服务ip
port1: '', // 主服务器端口
port2: '', // 备服务器端口
sceneNameS: '', // 主场景地址
sceneNameQ: '', // 备场景地址
createTime: '', // 创建时间
updateTime: '', // 修改时间
type: '', // 弹幕类型
intervalTime: 3, // 弹幕轮询时间间隔
bulletChatNums: 0, // 筛选弹幕限制数量
powerTime: 3 // 发电时刻开启服务时，默认时间间隔
}
if (id) {
try {
const res = await GetDetailApi(id)
if (res.status !== 200) return
data = res?.data
} catch (error) {
console.log(error)
}
}
return data
}, [id])
const getMenus = async () => { // 获取所有业务模块
return [
{
label: 'Node1',
value: '0-0'
},
{
label: 'Node2',
value: '0-1'
}
]
}
const getStudios = async () => { // 获取所有业务模块
return [
{
label: 'Node1',
value: '0-0'
},
{
label: 'Node2',
value: '0-1'
}
]
}
const cnacelClick = () => {
handleUpdateVisible(false, '')
}
......@@ -94,13 +23,10 @@ const AddUpdate = ({ id, visible, handleUpdateVisible }:TProps) => {
const params:any = {}
try {
if (id) {
params.id = id
}
console.log('params===>', params)
const { status } = id ? await UpdateApi(params) : await AddApi(params)
const { status } = await AddApi(params)
if (status === 200) {
id ? message.success('编辑成功') : message.success('创建成功')
message.success('创建成功')
handleUpdateVisible(false, 'add')
}
} catch (error) {
......@@ -120,7 +46,7 @@ const AddUpdate = ({ id, visible, handleUpdateVisible }:TProps) => {
onFinish={async (e) => {
okClick(e)
}}
request={fetchDetail}>
>
<ProFormText width="md" name="studioName" label="赛事名称" placeholder="请输入演播室名称" />
<ProFormText width="md" name="studioId" label="赛事说明" placeholder="请输入演播室id" />
<ProFormTreeSelect
......@@ -130,7 +56,7 @@ const AddUpdate = ({ id, visible, handleUpdateVisible }:TProps) => {
allowClear
width="lg"
secondary
request={getStudios}
request={async () => { return studios }}
fieldProps={files}
/>
<ProFormTreeSelect
......@@ -140,7 +66,7 @@ const AddUpdate = ({ id, visible, handleUpdateVisible }:TProps) => {
allowClear
width="lg"
secondary
request={getMenus}
request={async () => { return interacts }}
fieldProps={files}
/>
</ModalForm>
......
src/pages/Match/store/match.ts
import { createSlice } from '@reduxjs/toolkit'
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
type TMatch = {}
type TMatch = {
data: string
files: object
studios: Array<any> // 演播室数组
interacts: Array<any> // 互动模块数组
}
const initialState:TMatch = {
data: ''
data: '',
files: { // TreeSelect组件配置项
showArrow: false,
filterTreeNode: true,
showSearch: true,
dropdownMatchSelectWidth: false,
labelInValue: true,
autoClearSearchValue: true,
multiple: true,
treeNodeFilterProp: 'label',
fieldNames: {
label: 'label'
}
},
studios: [], // 演播室数组
interacts: [] // 互动模块数组
}
export const getStudio = createAsyncThunk('studios', async () => {
// const { data } = await MenuPerApi()
// const data = []
const data:Array<{ label: string, value: string | number }> = [
{
label: 'Node1',
value: 1
},
{
label: 'Node2',
value: 2
}
]
return data
})
export const getinteracts = createAsyncThunk('interacts', async () => {
// const { data } = await MenuPerApi()
// const data = []
const data:Array<{ label: string, value: string | number }> = [
{
label: 'Node1',
value: 1
},
{
label: 'Node2',
value: 2
}
]
return data
})
export const { reducer: matchReducer, actions } = createSlice({
name: 'match',
initialState,
reducers: {},
extraReducers: {}
reducers: {
setMenus: (state, { payload: any }) => {}
},
extraReducers: {
[getStudio.pending.type] () { },
[getStudio.rejected.type] () { },
[getStudio.fulfilled.type] (state, { payload }) {
state.studios = payload
},
[getinteracts.pending.type] () {},
[getinteracts.rejected.type] () {},
[getinteracts.fulfilled.type] (state, { payload }) {
state.interacts = payload
}
}
})
export default matchReducer
src/pages/Studio/List.tsx
......@@ -96,9 +96,6 @@ const Studio = () => {
}
}}
request={() => { return item }}
onReset={() => {
console.log('重置')
}}
onFinish={(values: any) => handleClickOperation('Edit', values)}
/>
</ProCard.TabPane>)
......
src/store/index.ts
......@@ -6,6 +6,8 @@ import storage from 'redux-persist/es/storage'
// import RoomReducer from '@/pages/Room/store/room'
// import IconReducer from '../pages/System/Menus/store/icon'
import MatchReducer from '@/pages/Match/store/match'
import BreadcrumbReducer from './breadcrumb'
import MenuReducer from './menu'
import UserReducer from './user'
......@@ -14,7 +16,8 @@ import UserReducer from './user'
const reducer = combineReducers({
user: UserReducer,
menu: MenuReducer,
breadcrumb: BreadcrumbReducer
breadcrumb: BreadcrumbReducer,
match: MatchReducer
// icon: IconReducer
// room: RoomReducer,
// game: GameReducer
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment