Skip to content

C
config-web
Commit 11a9d647 by 肖玉娟
Options

✨ feat:演播室管理 + 赛事管理页面

parent 16d6477e
Showing with 264 additions and 239 deletions
src/pages/Match/List.tsx
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { ProCard } from '@ant-design/pro-components' import { ProCard } from '@ant-design/pro-components'
import ProForm, { ProFormInstance, ProFormText, ProFormTextArea, ProFormTreeSelect } from '@ant-design/pro-form' import ProForm, { ProFormInstance } from '@ant-design/pro-form'
import styled from 'styled-components'
import { Button, message } from 'antd' import { Button, message } from 'antd'
import { useAppDispatch, useAppSelector } from '@/hooks/useStore' import { useAppDispatch } from '@/hooks/useStore'
import { DelApi, GetListByPageApi } from './common/services' import { DelApi, GetListByPageApi } from './common/services'
import { TState } from './common/typing' import { TState } from './common/typing'
import AddUpdate from './components/addUpdate' import AddUpdate from './components/addUpdate'
import { getinteracts, getStudio } from './store/match' import DForm from './components/DForm'
import { getStudioModels } from './store/match'
const Match = () => { const Match = () => {
const [tab, setTab] = useState('')
const formRef = useRef<ProFormInstance>()
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const { files, studios, interacts } = useAppSelector(({ match }) => (match)) const formRef = useRef<ProFormInstance>()
const [dataSource, setDataSource] = useState<TState[]>([]) const [currentId, setCurrentId] = useState<number>(NaN)
const [tab, setTab] = useState<string>('')
const [isModalVisible, setIsModalVisible] = useState<boolean>(false) const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
const [dataSource, setDataSource] = useState<TState[]>([])
useEffect(() => { useEffect(() => {
getData() getData()
dispatch(getStudio()) dispatch(getStudioModels())
dispatch(getinteracts())
}, []) }, [])
const getData = async () => { // 演播室数据 const getData = async () => { // 演播室数据
setDataSource([])
const { data } = await GetListByPageApi({ const { data } = await GetListByPageApi({
pageBean: { pageBean: {
pageNum: 0, pageNum: 0,
...@@ -36,15 +38,16 @@ const Match = () => { ...@@ -36,15 +38,16 @@ const Match = () => {
setTab(String(data?.list[0].id)) setTab(String(data?.list[0].id))
setDataSource(data?.list) setDataSource(data?.list)
} }
const handleClickOperation = useCallback( // 表格操作 const handleClickOperation = useCallback( // 操作
async (type: 'Edit' | 'Del', record: TState) => { async (type: 'Edit' | 'Del' | 'Cancel', record: any) => {
switch (type) { switch (type) {
case 'Edit': case 'Edit':
setCurrentId(record.id)
setIsModalVisible(true)
break break
case 'Del': case 'Del':
try { try {
const { status } = await DelApi({ id: record.id }) const { status } = await DelApi({ id: Number(record.id) })
if (status !== 200) { if (status !== 200) {
message.error('删除失败') message.error('删除失败')
return return
...@@ -56,11 +59,17 @@ const Match = () => { ...@@ -56,11 +59,17 @@ const Match = () => {
message.error('删除失败') message.error('删除失败')
} }
break break
case 'Cancel':
getData()
break
} }
}, [dataSource]) }, [dataSource])
const handleUpdateVisible = (value: boolean, type: string) => { const handleUpdateVisible = (value: boolean, type: string) => {
setIsModalVisible(value) setIsModalVisible(value)
type === 'add' && getData() type === 'add' && getData()
if (!value) {
setCurrentId(NaN)
}
} }
const data = useMemo(() => { const data = useMemo(() => {
return dataSource.map((item) => <ProCard.TabPane key={String(item.id)} tab={item?.name}> return dataSource.map((item) => <ProCard.TabPane key={String(item.id)} tab={item?.name}>
...@@ -68,52 +77,24 @@ const Match = () => { ...@@ -68,52 +77,24 @@ const Match = () => {
formRef={formRef} formRef={formRef}
autoFocusFirstInput autoFocusFirstInput
submitter={{ submitter={{
searchConfig: {
submitText: '保存'
},
resetButtonProps: { // 配置按钮的属性
style: {
display: 'none' // 隐藏重置按钮
}
},
render: (props: any, doms: any) => { render: (props: any, doms: any) => {
return [ return [
...doms, <div key='operation'>
<Button type="primary" key='delete' danger onClick={() => handleClickOperation('Del', item)}>删除</Button> <Button type="primary" className='button' onClick={() => handleClickOperation('Edit', item)}>编辑</Button>
<Button type="primary" danger onClick={() => handleClickOperation('Del', item)}>删除</Button>
</div>
] ]
} }
}} }}
initialValues={item} initialValues={item}
onFinish={(values: any) => handleClickOperation('Edit', values)}
> >
<ProFormText width="md" name="name" label="赛事名称" placeholder="请输入赛事名称" /> <DForm status={true} />
<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> </ProForm>
</ProCard.TabPane>) </ProCard.TabPane>)
}, [dataSource]) }, [dataSource])
return ( return (
<> <Wrapper>
<ProCard <ProCard
tabs={{ tabs={{
type: 'card', type: 'card',
...@@ -127,8 +108,13 @@ const Match = () => { ...@@ -127,8 +108,13 @@ const Match = () => {
> >
{data} {data}
</ProCard> </ProCard>
<AddUpdate visible={isModalVisible} handleUpdateVisible={handleUpdateVisible} /> <AddUpdate visible={isModalVisible} handleUpdateVisible={handleUpdateVisible} id={currentId} />
</> </Wrapper>
) )
} }
export default Match export default Match
const Wrapper = styled.div`
.button{
margin-right: 10px;
}
`
src/pages/Match/common/services.ts
import { Get, Post } from '@/utils/request' import { Get, Post } from '@/utils/request'
import { TMatchList, TMatchUpdate } from './typing' import { TDelete, TMatchList, TMatchUpdate } from './typing'
/** /**
* @description 列表查询 * @description 列表查询
...@@ -11,25 +11,31 @@ export const GetListByPageApi = (params: TMatchList): Promise<any> => { ...@@ -11,25 +11,31 @@ export const GetListByPageApi = (params: TMatchList): Promise<any> => {
/** /**
* @description 删除 * @description 删除
*/ */
export const DelApi = (params:{}): Promise<any> => { export const DelApi = (params:Partial<TDelete>): Promise<any> => {
return Post('/type/del', { params }) return Get('/type/deleteGameType', { params })
} }
/** /**
* @description 修改 * @description 修改
*/ */
export const UpdateApi = (params: Partial<TMatchUpdate>): Promise<any> => { export const UpdateApi = (params: Partial<TMatchUpdate>): Promise<any> => {
return Post('/type/update', { params }) return Post('/type/updateGameType', { params })
} }
/** /**
* @description 添加 * @description 添加
*/ */
export const AddApi = (params: Partial<TMatchUpdate>): Promise<any> => { export const AddApi = (params: Partial<TMatchUpdate>): Promise<any> => {
return Post('/type/add', { params }) return Post('/type/insertGameType', { params })
} }
/** /**
* @description 详情 * @description 获取所有演播室/互动数据
*/ */
export const GetDetailApi = (id: number): Promise<any> => { export const getStudiosModels = (): Promise<any> => {
return Get(`/hzy-admin/sys/user/${id}`) return Get('/type/getAllStudiosGameType')
} }
/**
// /**
// * @description 详情
// */
// export const GetDetailApi = (id: number): Promise<any> => {
// return Get(`/hzy-admin/sys/user/${id}`)
// }
src/pages/Match/common/typing.ts
...@@ -18,5 +18,8 @@ export type TMatchUpdate = { ...@@ -18,5 +18,8 @@ export type TMatchUpdate = {
createTime: string createTime: string
updateTime: string updateTime: string
} }
export type TDelete = {
id:number
}
export type TState = TMatchUpdate export type TState = TMatchUpdate
src/pages/Match/components/DForm.tsx 0 → 100644
import { ProFormText, ProFormTextArea, ProFormTreeSelect } from '@ant-design/pro-form'
import { useAppSelector } from '@/hooks/useStore'
type Tprops = {
status: boolean
}
const DForm = ({ status }: Tprops) => {
const { files, studios, models } = useAppSelector(({ match }) => (match))
return (
<>
<ProFormText disabled={status} width="md" name="name" label="赛事名称" placeholder="请输入赛事名称" rules={[{ required: true, message: '请输入赛事名称' }]}/>
<ProFormTextArea disabled={status} width="xl" name="info" label="赛事说明" placeholder="请输入赛事说明" />
<ProFormTreeSelect
disabled={status}
name="studioList"
label="关联演播室"
placeholder="请选择演播室"
allowClear
width="lg"
secondary
fieldProps={files}
request={async () => { return studios }}
rules={[{ required: true, message: '请关联演播室' }]}
/>
<ProFormTreeSelect
disabled={status}
name="modelsList"
label="关联互动模块"
placeholder="请选择互动模块"
allowClear
width="lg"
secondary
fieldProps={files}
request={async () => { return models }}
rules={[{ required: true, message: '请关联互动模块' }]}
/></>
)
}
export default DForm
src/pages/Match/components/addUpdate.tsx
import { ModalForm, ProFormText, ProFormTreeSelect } from '@ant-design/pro-form' import { useCallback, useEffect, useState } from 'react'
import { message } from 'antd' import { ModalForm } from '@ant-design/pro-form'
import { useAppSelector } from '@/hooks/useStore' import { message } from 'antd'
import { AddApi } from '../common/services' import { AddApi, GetListByPageApi, UpdateApi } from '../common/services'
import DForm from './DForm'
type TProps = { type TProps = {
visible: boolean, visible: boolean,
id: number,
handleUpdateVisible: (value:boolean, type: string) => void handleUpdateVisible: (value:boolean, type: string) => void
} }
const AddUpdate = ({ visible, handleUpdateVisible }:TProps) => { const AddUpdate = ({ id, visible, handleUpdateVisible }:TProps) => {
const title = '创建赛事' const [title, setTitle] = useState<string>('')
const { files, studios, interacts } = useAppSelector(({ match }) => (match)) useEffect(() => {
setTitle(() => {
return id ? '编辑赛事' : '创建赛事'
})
}, [visible])
const fetchDetail = useCallback(async () => {
let data:any = {
name: '',
info: '',
studioList: [],
modelsList: []
}
if (id) {
try {
const res = await GetListByPageApi({
id,
pageBean: {
pageNum: 0,
pageSize: 0
}
})
if (res.status !== 200) return
data = res?.data?.list[0]
} catch (error) {
console.log(error)
}
}
return data
}, [id])
const cnacelClick = () => { const cnacelClick = () => {
handleUpdateVisible(false, '') handleUpdateVisible(false, '')
} }
const okClick = async (values:any) => { const okClick = async (values:any) => {
console.log(values, 9999) console.log(values, 9999)
const params:any = {
const params:any = {} name: values.name,
info: values.info,
studioList: values.studioList,
modelsList: values.modelsList
}
try { try {
if (id) {
params.id = id
}
console.log('params===>', params) console.log('params===>', params)
const { status } = await AddApi(params) const { status } = id ? await UpdateApi(params) : await AddApi(params)
if (status === 200) { if (status === 200) {
message.success('创建成功') id ? message.success('编辑成功') : message.success('创建成功')
handleUpdateVisible(false, 'add') handleUpdateVisible(false, 'add')
} }
} catch (error) { } catch (error) {
...@@ -46,29 +82,9 @@ const AddUpdate = ({ visible, handleUpdateVisible }:TProps) => { ...@@ -46,29 +82,9 @@ const AddUpdate = ({ visible, handleUpdateVisible }:TProps) => {
onFinish={async (e) => { onFinish={async (e) => {
okClick(e) okClick(e)
}} }}
request={fetchDetail}
> >
<ProFormText width="md" name="studioName" label="赛事名称" placeholder="请输入演播室名称" /> <DForm status={false}/>
<ProFormText width="md" name="studioId" label="赛事说明" placeholder="请输入演播室id" />
<ProFormTreeSelect
name="studio"
label="关联演播室"
placeholder="请选择演播室"
allowClear
width="lg"
secondary
request={async () => { return studios }}
fieldProps={files}
/>
<ProFormTreeSelect
name="name"
label="关联互动模块"
placeholder="请选择互动模块"
allowClear
width="lg"
secondary
request={async () => { return interacts }}
fieldProps={files}
/>
</ModalForm> </ModalForm>
) )
} }
......
src/pages/Match/store/match.ts
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit' import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { getStudiosModels } from '../common/services'
// import { GetListByPageApi } from '../common/services'
type TMatch = { type TMatch = {
data: string data: string
files: object files: object
studios: Array<any> // 演播室数组 studios: Array<any> // 演播室数组
interacts: Array<any> // 互动模块数组 models: Array<any> // 互动模块数组
} }
const initialState:TMatch = { const initialState: TMatch = {
data: '', data: '',
files: { // TreeSelect组件配置项 files: { // TreeSelect组件配置项
showArrow: false, showArrow: false,
...@@ -22,54 +26,26 @@ const initialState:TMatch = { ...@@ -22,54 +26,26 @@ const initialState:TMatch = {
} }
}, },
studios: [], // 演播室数组 studios: [], // 演播室数组
interacts: [] // 互动模块数组 models: [] // 互动模块数组
} }
export const getStudio = createAsyncThunk('studios', async () => { export const getStudioModels = createAsyncThunk('studios', async () => {
// const { data } = await MenuPerApi() const { data } = await getStudiosModels()
// 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 return data
}) })
export const { reducer: matchReducer, actions } = createSlice({ export const { reducer: matchReducer, actions } = createSlice({
name: 'match', name: 'match',
initialState, initialState,
reducers: { reducers: {
setMenus: (state, { payload: any }) => {} setMenus: (state, { payload: any }) => { }
}, },
extraReducers: { extraReducers: {
[getStudio.pending.type] () { }, [getStudioModels.pending.type] () { },
[getStudio.rejected.type] () { }, [getStudioModels.rejected.type] () { },
[getStudio.fulfilled.type] (state, { payload }) { [getStudioModels.fulfilled.type] (state, { payload }) {
state.studios = payload console.log('获取演播室互动', payload)
}, state.studios = payload.studios
[getinteracts.pending.type] () {}, state.models = payload.models
[getinteracts.rejected.type] () {},
[getinteracts.fulfilled.type] (state, { payload }) {
state.interacts = payload
} }
} }
}) })
......
src/pages/Studio/List.tsx
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { ProCard, ProFormInstance } from '@ant-design/pro-components' import { ProCard, ProForm, ProFormInstance } from '@ant-design/pro-components'
import styled from 'styled-components'
// import { message } from 'antd'
// import { useAppSelector } from '@/hooks/useStore'
import { Button, message } from 'antd' import { Button, message } from 'antd'
import { DelApi, GetListByPageApi, UpdateApi } from './common/services' import { DelApi, GetListByPageApi } from './common/services'
import { TState } from './common/typing' import { TState } from './common/typing'
import AddUpdate from './components/addUpdate' import AddUpdate from './components/addUpdate'
import DForm from './components/DForm' import DForm from './components/DForm'
const Studio = () => { const Studio = () => {
const [tab, setTab] = useState('')
const formRef = useRef<ProFormInstance>() const formRef = useRef<ProFormInstance>()
const [dataSource, setDataSource] = useState<TState[]>([]) const [currentId, setCurrentId] = useState<number>(NaN)
const [tab, setTab] = useState<string>('')
const [isModalVisible, setIsModalVisible] = useState<boolean>(false) const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
const [dataSource, setDataSource] = useState<TState[]>([])
useEffect(() => { useEffect(() => {
getData() getData()
}, []) }, [])
const getData = async () => { // 演播室数据 const getData = async () => { // 演播室数据
setDataSource([])
const { data } = await GetListByPageApi({ const { data } = await GetListByPageApi({
pageBean: { pageBean: {
pageNum: 0, pageNum: 0,
...@@ -37,22 +36,8 @@ const Studio = () => { ...@@ -37,22 +36,8 @@ const Studio = () => {
async (type: 'Edit' | 'Del', record: any) => { async (type: 'Edit' | 'Del', record: any) => {
switch (type) { switch (type) {
case 'Edit': case 'Edit':
try { setIsModalVisible(true)
const params = { setCurrentId(record.id)
id: Number(tab),
...record
}
const { status } = await UpdateApi(params)
if (status !== 200) {
message.error('编辑失败')
return
}
message.success('编辑成功')
getData()
} catch (error) {
console.log(error)
message.error('编辑失败')
}
break break
case 'Del': case 'Del':
try { try {
...@@ -73,36 +58,32 @@ const Studio = () => { ...@@ -73,36 +58,32 @@ const Studio = () => {
const handleUpdateVisible = (value: boolean, type: string) => { // 弹窗状态 const handleUpdateVisible = (value: boolean, type: string) => { // 弹窗状态
setIsModalVisible(value) setIsModalVisible(value)
type === 'Add' && getData() type === 'Add' && getData()
if (!value) {
setCurrentId(NaN)
}
} }
const data = useMemo(() => { const data = useMemo(() => {
return dataSource.map((item) => <ProCard.TabPane key={String(item.id)} tab={item?.studioName}> return dataSource.map((item) => <ProCard.TabPane key={String(item.id)} tab={item?.studioName}>
<DForm <ProForm formRef={formRef}
formRef={formRef}
autoFocusFirstInput autoFocusFirstInput
submitter={{ submitter={{
searchConfig: {
submitText: '保存'
},
resetButtonProps: { // 配置按钮的属性
style: {
display: 'none' // 隐藏重置按钮
}
},
render: (props: any, doms: any) => { render: (props: any, doms: any) => {
return [ return [
...doms, <div key='operation'>
<Button type="primary" key='delete' danger onClick={() => handleClickOperation('Del', item)}>删除</Button> <Button type="primary" className='button' onClick={() => handleClickOperation('Edit', item)}>编辑</Button>
<Button type="primary" danger onClick={() => handleClickOperation('Del', item)}>删除</Button>
</div>
] ]
} }
}} }}
request={() => { return item }} initialValues={item}>
onFinish={(values: any) => handleClickOperation('Edit', values)} <DForm status={true} />
/> </ProForm>
</ProCard.TabPane>) </ProCard.TabPane>)
}, [dataSource]) }, [dataSource])
return ( return (
<> <Wrapper>
<ProCard <ProCard
tabs={{ tabs={{
type: 'card', type: 'card',
...@@ -116,8 +97,13 @@ const Studio = () => { ...@@ -116,8 +97,13 @@ const Studio = () => {
> >
{data} {data}
</ProCard> </ProCard>
<AddUpdate visible={isModalVisible} handleUpdateVisible={handleUpdateVisible} /> <AddUpdate visible={isModalVisible} handleUpdateVisible={handleUpdateVisible} id={currentId} />
</> </Wrapper>
) )
} }
export default Studio export default Studio
const Wrapper = styled.div`
.button{
margin-right: 10px;
}
`
src/pages/Studio/components/DForm.tsx
import ProForm, { ProFormDigit, ProFormSelect, ProFormText } from '@ant-design/pro-form' import ProForm, { ProFormDigit, ProFormSelect, ProFormText } from '@ant-design/pro-form'
type Tprops = {
type Props = any status: boolean
const DForm = (props:Props) => { }
const DForm = ({ status }: Tprops) => {
return ( return (
<> <>
<ProForm {...props}> <ProForm.Group>
<ProForm.Group> <ProFormText disabled={status} width="md" name="studioName" label="演播室名称" placeholder="请输入演播室名称"
<ProFormText width="md" name="studioName" label="演播室名称" placeholder="请输入演播室名称" /> rules={[{ required: true, message: '请输入演播室名称' }]} />
<ProFormDigit width="md" name="studioId" label="演播室id" placeholder="请输入演播室id" /> <ProFormDigit disabled={status} width="md" name="studioId" label="演播室id" placeholder="请输入演播室id" rules={[{ required: true, message: '请输入演播室id' }]} />
</ProForm.Group> </ProForm.Group>
<ProForm.Group> <ProForm.Group>
<ProFormText width="md" name="ip1" label="主服务ip" placeholder="请输入主服务ip" /> <ProFormText disabled={status} width="md" name="ip1" label="主服务ip" placeholder="请输入主服务ip" rules={[{ required: true, message: '请输入主服务ip' }]} />
<ProFormText width="md" name="port1" label="主服务器端口" placeholder="请输入主服务器端口" /> <ProFormText disabled={status} width="md" name="port1" label="主服务器端口" placeholder="请输入主服务器端口" rules={[{ required: true, message: '请输入主服务器端口' }]} />
</ProForm.Group> </ProForm.Group>
<ProForm.Group> <ProForm.Group>
<ProFormText width="md" name="ip2" label="备服务ip" placeholder="请输入备服务ip" /> <ProFormText disabled={status} width="md" name="ip2" label="备服务ip" placeholder="请输入备服务ip" />
<ProFormText width="md" name="port2" label="备服务器端口" placeholder="请输入备服务器端口" /> <ProFormText disabled={status} width="md" name="port2" label="备服务器端口" placeholder="请输入备服务器端口" />
</ProForm.Group> </ProForm.Group>
<ProForm.Group> <ProForm.Group>
<ProFormText width="md" name="sceneNameS" label="主场景地址" placeholder="请输入主场景地址" /> <ProFormText disabled={status} width="md" name="sceneNameS" label="主场景地址" placeholder="请输入主场景地址" rules={[{ required: true, message: '请输入主场景地址' }]} />
<ProFormText width="md" name="sceneNameQ" label="备场景地址" placeholder="请输入备场景地址" /> <ProFormText disabled={status} width="md" name="sceneNameQ" label="备场景地址" placeholder="请输入备场景地址" />
</ProForm.Group> </ProForm.Group>
<ProForm.Group> <ProForm.Group>
<ProFormSelect <ProFormSelect
disabled={status}
width="md" width="md"
label="弹幕类型" label="弹幕类型"
name="type" name="type"
...@@ -32,14 +34,24 @@ const DForm = (props:Props) => { ...@@ -32,14 +34,24 @@ const DForm = (props:Props) => {
2: '只保存txt', 2: '只保存txt',
3: '发送tcp并存为txt' 3: '发送tcp并存为txt'
}} }}
rules={[{ required: true, message: '请选择弹幕类型' }]}
/> />
<ProFormDigit width="md" name="intervalTime" label="弹幕轮询时间间隔" addonAfter="秒" placeholder="请输入弹幕轮询时间间隔" /> <ProFormDigit disabled={status} width="md" name="intervalTime" label="弹幕轮询时间间隔" addonAfter="秒" placeholder="请输入弹幕轮询时间间隔" />
</ProForm.Group> </ProForm.Group>
<ProForm.Group> <ProForm.Group>
<ProFormDigit width="md" name="bulletChatNums" label="筛选弹幕限制条数" placeholder="请输入筛选弹幕限制数量" /> <ProFormSelect
<ProFormDigit width="md" name="powerTime" label="发电轮询时间间隔" addonAfter="秒" placeholder="请输入发电轮询时间间隔" /> disabled={status}
width="md"
name="bulletChatNums"
label="筛选弹幕限制条数"
options={[
{ label: '6', value: 6 },
{ label: '8', value: 8 }
]}
placeholder="请输入筛选弹幕限制数量"
rules={[{ required: true, message: '请输入筛选弹幕限制条数' }]} />
<ProFormDigit disabled={status} width="md" name="powerTime" label="发电轮询时间间隔" addonAfter="秒" placeholder="请输入发电轮询时间间隔" />
</ProForm.Group> </ProForm.Group>
</ProForm>
</> </>
) )
} }
......
src/pages/Studio/components/addUpdate.tsx
import { useCallback } from 'react' import { useCallback, useEffect, useState } from 'react'
import ProForm, { ModalForm, ProFormDigit, ProFormText, ProFormSelect } from '@ant-design/pro-form' import { ModalForm } from '@ant-design/pro-form'
import { message } from 'antd' import { message } from 'antd'
import { AddApi } from '../common/services' import { AddApi, GetListByPageApi, UpdateApi } from '../common/services'
import DForm from './DForm'
type TProps = { type TProps = {
id:number,
visible: boolean, visible: boolean,
handleUpdateVisible: (value:boolean, type: string) => void handleUpdateVisible: (value:boolean, type: string) => void
} }
const AddUpdate = ({ visible, handleUpdateVisible }:TProps) => { const AddUpdate = ({ id, visible, handleUpdateVisible }:TProps) => {
const title = '创建演播室' const [title, setTitle] = useState<string>('')
useEffect(() => {
setTitle(() => {
return id ? '编辑演播室' : '创建演播室'
})
}, [visible])
const fetchDetail = useCallback(async () => { const fetchDetail = useCallback(async () => {
const data:any = { let data:any = {
studioName: '', // 演播室名称 studioName: '', // 演播室名称
studioId: '', // 演播室ids studioId: '', // 演播室id
ip1: '', // 主服务ip ip1: '', // 主服务ip
ip2: '', // 备服务ip ip2: '', // 备服务ip
port1: '', // 主服务器端口 port1: '', // 主服务器端口
...@@ -28,11 +36,26 @@ const AddUpdate = ({ visible, handleUpdateVisible }:TProps) => { ...@@ -28,11 +36,26 @@ const AddUpdate = ({ visible, handleUpdateVisible }:TProps) => {
updateTime: '', // 修改时间 updateTime: '', // 修改时间
type: '', // 弹幕类型 type: '', // 弹幕类型
intervalTime: 3, // 弹幕轮询时间间隔 intervalTime: 3, // 弹幕轮询时间间隔
bulletChatNums: 0, // 筛选弹幕限制数量 bulletChatNums: 6, // 筛选弹幕限制数量
powerTime: 3 // 发电时刻开启服务时，默认时间间隔 powerTime: 3 // 发电时刻开启服务时，默认时间间隔
} }
if (id) {
try {
const res = await GetListByPageApi({
id,
pageBean: {
pageNum: 0,
pageSize: 0
}
})
if (res.status !== 200) return
data = res?.data?.list[0]
} catch (error) {
console.log(error)
}
}
return data return data
}, []) }, [id])
const cnacelClick = () => { const cnacelClick = () => {
handleUpdateVisible(false, '') handleUpdateVisible(false, '')
} }
...@@ -49,13 +72,21 @@ const AddUpdate = ({ visible, handleUpdateVisible }:TProps) => { ...@@ -49,13 +72,21 @@ const AddUpdate = ({ visible, handleUpdateVisible }:TProps) => {
type: values.type, // 弹幕类型 type: values.type, // 弹幕类型
intervalTime: values.intervalTime, // 弹幕轮询时间间隔 intervalTime: values.intervalTime, // 弹幕轮询时间间隔
bulletChatNums: values.bulletChatNums, // 筛选弹幕限制数量 bulletChatNums: values.bulletChatNums, // 筛选弹幕限制数量
powerTime: values.powerTime// 发电时刻开启服务时，默认时间间隔 powerTime: values.powerTime // 发电时刻开启服务时，默认时间间隔
// config: {
// ip1: values.ip1, // 主服务ip
// ip2: values.ip2, // 备服务ip
// port1: values.port1, // 主服务器端口
// port2: values.port2 // 备服务器端口
// }
} }
try { try {
console.log('params===>', params) if (id) {
const { status } = await AddApi(params) params.id = id
}
const { status } = id ? await UpdateApi(params) : await AddApi(params)
if (status === 200) { if (status === 200) {
message.success('创建成功') id ? message.success('编辑成功') : message.success('创建成功')
handleUpdateVisible(false, 'Add') handleUpdateVisible(false, 'Add')
} }
} catch (error) { } catch (error) {
...@@ -76,40 +107,7 @@ const AddUpdate = ({ visible, handleUpdateVisible }:TProps) => { ...@@ -76,40 +107,7 @@ const AddUpdate = ({ visible, handleUpdateVisible }:TProps) => {
okClick(e) okClick(e)
}} }}
request={fetchDetail}> request={fetchDetail}>
<ProForm.Group> <DForm status={false}/>
<ProFormText width="md" name="studioName" label="演播室名称" placeholder="请输入演播室名称" />
<ProFormDigit width="md" name="studioId" label="演播室id" placeholder="请输入演播室id" />
</ProForm.Group>
<ProForm.Group>
<ProFormText width="md" name="ip1" label="主服务ip" placeholder="请输入主服务ip" />
<ProFormText width="md" name="port1" label="主服务器端口" placeholder="请输入主服务器端口" />
</ProForm.Group>
<ProForm.Group>
<ProFormText width="md" name="ip2" label="备服务ip" placeholder="请输入备服务ip" />
<ProFormText width="md" name="port2" label="备服务器端口" placeholder="请输入备服务器端口" />
</ProForm.Group>
<ProForm.Group>
<ProFormText width="md" name="sceneNameS" label="主场景地址" placeholder="请输入主场景地址" />
<ProFormText width="md" name="sceneNameQ" label="备场景地址" placeholder="请输入备场景地址" />
</ProForm.Group>
<ProForm.Group>
<ProFormSelect
width="md"
label="弹幕类型"
name="type"
placeholder='请选择弹幕类型'
valueEnum={{
1: '入库并存为txt',
2: '只保存txt',
3: '发送tcp并存为txt'
}}
/>
<ProFormDigit width="md" name="intervalTime" label="弹幕轮询时间间隔" addonAfter="秒" placeholder="请输入弹幕轮询时间间隔" />
</ProForm.Group>
<ProForm.Group>
<ProFormDigit width="md" name="bulletChatNums" label="筛选弹幕限制条数" placeholder="请输入筛选弹幕限制数量" />
<ProFormDigit width="md" name="powerTime" label="发电轮询时间间隔" addonAfter="秒" placeholder="请输入发电轮询时间间隔" />
</ProForm.Group>
</ModalForm> </ModalForm>
) )
} }
......
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