Skip to content

C
config-web
Commit 0b3d4bed by 肖玉娟
Options

✨ feat:演播室页面

parent 277dfcb8
Showing with 143 additions and 195 deletions
src/pages/Studio/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, ProFormInstance } from '@ant-design/pro-components'
// import { message } from 'antd'
import { DList } from '@/components/DList'
import { DTable, usePTable } from '@/components/DTable'
// import { useAppSelector } from '@/hooks/useStore'
import { DelApi, GetListByPageApi } from './common/services'
import { Button, message } from 'antd'
import { DelApi, GetListByPageApi, UpdateApi } from './common/services'
import { TState } from './common/typing'
import AddUpdate from './components/addUpdate'
import DForm from './components/DForm'
const Studio = () => {
const [tab, setTab] = useState('')
const formRef = useRef<ProFormInstance>()
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: [],
total: 1,
success: true
}
try {
const { pageSize, current: pageNum, studioName } = params
useEffect(() => {
getData()
}, [])
const getData = async () => { // 演播室数据
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)
pageNum: 0,
pageSize: 0
}
return result
}, []),
columns: [
{
title: 'ID',
dataIndex: 'id',
width: 100,
copyable: true,
hideInSearch: true
},
{
title: '演播室名称',
key: 'studioName',
dataIndex: 'studioName',
hideInSearch: false
},
{
title: '演播室id',
key: 'studioId',
dataIndex: 'studioId',
hideInSearch: true
},
{
title: '主服务地址',
key: 'ip1',
dataIndex: 'ip1',
hideInSearch: true,
render: (text, record) => [
<span key='primaryService'>{record?.ip1}:{record?.port1}</span>
]
},
{
title: '备服务地址',
key: 'ip2',
dataIndex: 'ip2',
hideInSearch: true,
render: (text, record) => [
<span key='primaryService'>{record?.ip2}:{record?.port2}</span>
]
},
{
title: '主场景地址',
key: 'sceneNameS',
dataIndex: 'sceneNameS',
hideInSearch: true
},
{
title: '备场景地址',
key: 'sceneNameQ',
dataIndex: 'sceneNameQ',
hideInSearch: true
},
{
title: '弹幕类型',
key: 'type',
dataIndex: 'type',
hideInSearch: true,
render: (text, record) => [
<span key='type'>
{record?.type === '1' && '入库并存为txt'}
{record?.type === '2' && '只保存txt'}
{record?.type === '3' && '发送tcp并存为txt'}
</span>
]
},
{
title: '弹幕轮询时间(秒)',
key: 'intervalTime',
dataIndex: 'intervalTime',
hideInSearch: true
},
{
title: '发电时间间隔(秒)',
key: 'powerTime',
dataIndex: 'powerTime',
hideInSearch: true
},
{
title: '筛选弹幕限制条数',
key: 'bulletChatNums',
dataIndex: 'bulletChatNums',
hideInSearch: true
},
{
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>
]
}
],
toolBarRender: useCallback(() => [
<Button key='tool' type="primary" onClick={() => handleUpdateVisible(true, '')} >
创建演播室
</Button>
], [])
})
const handleClickOperation = useCallback( // 表格操作
async (type: 'Edit' | 'Del', record: TState) => {
setTab(String(data?.list[0].id))
setDataSource(data?.list)
}
const handleClickOperation = useCallback( // 操作
async (type: 'Edit' | 'Del', record: any) => {
switch (type) {
case 'Edit':
setIsModalVisible(true)
setCurrentId(record.id)
try {
const params = {
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
case 'Del':
try {
......@@ -178,7 +62,7 @@ const Studio = () => {
return
}
message.success('删除成功')
dataSource.length <= 1 ? actionRef.current?.reloadAndRest?.() : actionRef.current?.reload?.()
getData()
} catch (error) {
console.log(error)
message.error('删除失败')
......@@ -186,21 +70,56 @@ const Studio = () => {
break
}
}, [dataSource])
const handleUpdateVisible = (value: boolean, type: string) => {
const handleUpdateVisible = (value: boolean, type: string) => { // 弹窗状态
setIsModalVisible(value)
if (!value) {
setCurrentId(NaN)
type === 'Add' && getData()
}
if (type === 'add') {
(actionRef.current as any).reload()
const data = useMemo(() => {
return dataSource.map((item) => <ProCard.TabPane key={String(item.id)} tab={item?.studioName}>
<DForm
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>
]
}
}}
request={() => { return item }}
onReset={() => {
console.log('重置')
}}
onFinish={(values: any) => handleClickOperation('Edit', values)}
/>
</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/Studio/common/typing.ts
export type TStudioList = {
id?: number,
pageBean:{
pageNum: number // 当前页码，从1开始
pageSize:number // 每页显示记录数
},
studioName: string // 演播室名称
// studioName: string // 演播室名称
// limit: number // 每页显示记录数
// page: number // 当前页码，从1开始
// order: string // 排序方式，可选值(asc、desc)
......
src/pages/Studio/components/DForm.tsx 0 → 100644
import ProForm, { ProFormDigit, ProFormSelect, ProFormText } from '@ant-design/pro-form'
type Props = any
const DForm = (props:Props) => {
return (
<>
<ProForm {...props}>
<ProForm.Group>
<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>
</ProForm>
</>
)
}
export default DForm
src/pages/Studio/components/addUpdate.tsx
import { useState, useEffect, useCallback } from 'react'
import { useCallback } from 'react'
import ProForm, { ModalForm, ProFormDigit, ProFormSelect, ProFormText } from '@ant-design/pro-form'
import ProForm, { ModalForm, ProFormDigit, ProFormText, ProFormSelect } from '@ant-design/pro-form'
import { message } from 'antd'
import { GetDetailApi, UpdateApi, AddApi } from '../common/services'
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 AddUpdate = ({ visible, handleUpdateVisible }:TProps) => {
const title = '创建演播室'
useEffect(() => {
setTitle(() => {
return id ? '编辑演播室' : '创建演播室'
})
}, [visible])
const fetchDetail = useCallback(async () => {
let data:any = {
const data:any = {
studioName: '', // 演播室名称
studioId: '', // 演播室id
studioId: '', // 演播室ids
ip1: '', // 主服务ip
ip2: '', // 备服务ip
port1: '', // 主服务器端口
......@@ -37,17 +31,8 @@ const AddUpdate = ({ id, visible, handleUpdateVisible }:TProps) => {
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 cnacelClick = () => {
handleUpdateVisible(false, '')
}
......@@ -67,14 +52,11 @@ const AddUpdate = ({ id, visible, handleUpdateVisible }:TProps) => {
powerTime: values.powerTime// 发电时刻开启服务时，默认时间间隔
}
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('创建成功')
handleUpdateVisible(false, 'add')
message.success('创建成功')
handleUpdateVisible(false, 'Add')
}
} catch (error) {
console.log(error)
......
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