✨ feat:赛事管理页面

src/layouts/Menu/index.tsx

@@ -58,8 +58,12 @@ const LayoutMenu = () => {
       label: '首页'
     },
     {
-      path: '/parameter',
+      path: '/studio',
       label: '演播室管理'
+    },
+    {
+      path: '/match',
+      label: '赛事管理'
     }
   ]
 

src/pages/Match/List.tsx

+import React, { useCallback, useState } from 'react'
+
+import { Button, message, Popconfirm, Space } 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 { TState } from './common/typing'
+import AddUpdate from './components/addUpdate'
+
+const 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: [],
+        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}:{record?.port1}</span>
+        ]
+      },
+      {
+        title: '所关联互动模块',
+        key: 'ip2',
+        dataIndex: 'ip2',
+        hideInSearch: true,
+        render: (text, record) => [
+          <span key='primaryService'>{record?.ip2}:{record?.port2}</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>
+        ]
+      }
+    ],
+    toolBarRender: useCallback(() => [
+      <Button key='tool' type="primary" onClick={() => handleUpdateVisible(true, '')} >
+        创建演播室
+      </Button>
+    ], [])
+  })
+  const handleClickOperation = useCallback( // 表格操作
+    async (type: 'Edit' | 'Del', record: TState) => {
+      switch (type) {
+        case 'Edit':
+          setIsModalVisible(true)
+          setCurrentId(record.id)
+          break
+        case 'Del':
+          try {
+            const { status } = await DelApi({ id: record.id })
+            if (status !== 200) {
+              message.error('删除失败')
+              return
+            }
+            message.success('删除成功')
+            dataSource.length <= 1 ? actionRef.current?.reloadAndRest?.() : actionRef.current?.reload?.()
+          } catch (error) {
+            console.log(error)
+            message.error('删除失败')
+          }
+          break
+      }
+    }, [dataSource])
+  const handleUpdateVisible = (value: boolean, type: string) => {
+    setIsModalVisible(value)
+    if (!value) {
+      setCurrentId(NaN)
+    }
+    if (type === 'add') {
+      (actionRef.current as any).reload()
+    }
+  }
+  return (
+    <>
+      <DList>
+        <DTable {...tableProps} />
+      </DList>
+      <AddUpdate visible={isModalVisible} handleUpdateVisible={handleUpdateVisible} id={currentId} />
+    </>
+  )
+}
+export default Match

src/pages/Match/common/router.tsx

+import { lazy } from 'react'
+
+const List = lazy(() => import('../List'))
+
+export default [
+  {
+    path: '/match',
+    name: '赛事管理',
+    element: <List />,
+    meta: {
+      requiresAuth: true,
+      title: '赛事管理',
+      key: 'match'
+    }
+  }
+]

src/pages/Parameter/common/services.ts → src/pages/Match/common/services.ts

 import { Get, Post } from '@/utils/request'
 
-import { TParameterList, TParameterUpdate } from './typing'
+import { TMatchList, TMatchUpdate } from './typing'
 
 /**
  * @description 列表查询
  */
-export const GetListByPageApi = (params: TParameterList): Promise<any> => {
+export const GetListByPageApi = (params: TMatchList): Promise<any> => {
   return Post('/studio/list', { params })
 }
 /**
@@ -17,14 +17,14 @@ export const DelApi = (params:{}): Promise<any> => {
 /**
  * @description 修改
  */
-export const UpdateApi = (params: Partial<TParameterUpdate>): Promise<any> => {
+export const UpdateApi = (params: Partial<TMatchUpdate>): Promise<any> => {
   return Post('/type/update', { params })
 }
 
 /**
  * @description 添加
  */
-export const AddApi = (params: Partial<TParameterUpdate>): Promise<any> => {
+export const AddApi = (params: Partial<TMatchUpdate>): Promise<any> => {
   return Post('/type/add', { params })
 }
 /**

src/pages/Parameter/common/typing.ts → src/pages/Match/common/typing.ts

-export type TParameterList = {
+export type TMatchList = {
   pageBean:{
     pageNum: number // 当前页码，从1开始
     pageSize:number // 每页显示记录数
@@ -11,7 +11,7 @@ export type TParameterList = {
   // username: string // 用户名
 }
 
-export type TParameterUpdate = {
+export type TMatchUpdate = {
   studioName: string // 演播室名称
   studioId: string // 演播室id
   ip1: string // 主服务ip
@@ -29,4 +29,4 @@ export type TParameterUpdate = {
   id: number
 }
 
-export type TState = TParameterUpdate
+export type TState = TMatchUpdate

src/pages/Match/components/addUpdate.tsx

+
+import { useState, useEffect, useCallback } from 'react'
+
+import { ModalForm, ProFormDigit, ProFormText, ProFormTreeSelect } from '@ant-design/pro-form'
+
+import { message } from 'antd'
+
+import { GetDetailApi, UpdateApi, 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'
+    }
+  }
+
+  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, '')
+  }
+  const okClick = async (values:any) => {
+    console.log(values, 9999)
+
+    const params:any = {}
+    try {
+      if (id) {
+        params.id = id
+      }
+      console.log('params===>', params)
+      const { status } = id ? await UpdateApi(params) : await AddApi(params)
+      if (status === 200) {
+        id ? message.success('编辑成功') : message.success('创建成功')
+        handleUpdateVisible(false, 'add')
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  return (
+    <ModalForm
+    title={title}
+    visible={visible}
+    autoFocusFirstInput
+    modalProps={{
+      onCancel: cnacelClick,
+      destroyOnClose: true
+    }}
+    onFinish={async (e) => {
+      okClick(e)
+    }}
+    request={fetchDetail}>
+      <ProFormText width="md" name="studioName" label="赛事名称" placeholder="请输入演播室名称" />
+      <ProFormDigit width="md" name="studioId" label="赛事说明" placeholder="请输入演播室id" />
+      <ProFormTreeSelect
+        name="studio"
+        label="关联演播室"
+        placeholder="请选择演播室"
+        allowClear
+        width="lg"
+        secondary
+        request={getStudios}
+        fieldProps={files}
+      />
+      <ProFormTreeSelect
+        name="name"
+        label="关联互动模块"
+        placeholder="请选择互动模块"
+        allowClear
+        width="lg"
+        secondary
+        request={getMenus}
+        fieldProps={files}
+      />
+    </ModalForm>
+  )
+}
+export default AddUpdate

src/pages/Match/store/match.ts

+import { createSlice } from '@reduxjs/toolkit'
+
+type TMatch = {}
+const initialState:TMatch = {
+  data: ''
+}
+export const { reducer: matchReducer, actions } = createSlice({
+  name: 'match',
+  initialState,
+  reducers: {},
+  extraReducers: {}
+})
+export default matchReducer

src/pages/Parameter/List.tsx → src/pages/Studio/List.tsx

@@ -10,7 +10,7 @@ import { DelApi, GetListByPageApi } from './common/services'
 import { TState } from './common/typing'
 import AddUpdate from './components/addUpdate'
 
-const Parameter = () => {
+const Studio = () => {
   const [dataSource, setDataSource] = useState<TState[]>([])
   const [currentId, setCurrentId] = useState<number>(NaN)
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
@@ -204,4 +204,4 @@ const Parameter = () => {
     </>
   )
 }
-export default Parameter
+export default Studio

src/pages/Parameter/common/router.tsx → src/pages/Studio/common/router.tsx

@@ -4,13 +4,13 @@ const List = lazy(() => import('../List'))
 
 export default [
   {
-    path: '/parameter',
+    path: '/studio',
     name: '演播室管理',
     element: <List />,
     meta: {
       requiresAuth: true,
       title: '演播室管理',
-      key: 'parameter'
+      key: 'studio'
     }
   }
 ]

src/pages/Studio/common/services.ts

+import { Get, Post } from '@/utils/request'
+
+import { TStudioList, TStudioUpdate } from './typing'
+
+/**
+ * @description 列表查询
+ */
+export const GetListByPageApi = (params: TStudioList): Promise<any> => {
+  return Post('/studio/list', { params })
+}
+/**
+ * @description 删除
+ */
+export const DelApi = (params:{}): Promise<any> => {
+  return Post('/type/del', { params })
+}
+/**
+ * @description 修改
+ */
+export const UpdateApi = (params: Partial<TStudioUpdate>): Promise<any> => {
+  return Post('/type/update', { params })
+}
+
+/**
+ * @description 添加
+ */
+export const AddApi = (params: Partial<TStudioUpdate>): Promise<any> => {
+  return Post('/type/add', { params })
+}
+/**
+ * @description 详情
+ */
+export const GetDetailApi = (id: number): Promise<any> => {
+  return Get(`/hzy-admin/sys/user/${id}`)
+}

src/pages/Studio/common/typing.ts

+export type TStudioList = {
+  pageBean:{
+    pageNum: number // 当前页码，从1开始
+    pageSize:number // 每页显示记录数
+  },
+  studioName: string // 演播室名称
+  // limit: number // 每页显示记录数
+  // page: number // 当前页码，从1开始
+  // order: string // 排序方式，可选值(asc、desc)
+  // orderField: string // 排序字段
+  // username: string // 用户名
+}
+
+export type TStudioUpdate = {
+  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
+}
+
+export type TState = TStudioUpdate

src/router/index.tsx

@@ -4,7 +4,8 @@ import { Navigate, useRoutes } from 'react-router-dom'
 import BaseLayout from '@/layouts/BaseLayout'
 import AccountRouter from '@/pages/Account/common/router'
 import Login from '@/pages/Login'
-import ParameterRouter from '@/pages/Parameter/common/router'
+import MatchRouter from '@/pages/Match/common/router'
+import StudioRouter from '@/pages/Studio/common/router'
 
 import { RouteObject } from './interface'
 
@@ -29,7 +30,8 @@ export const rootRouter: RouteObject[] = [
         }
       },
       ...AccountRouter,
-      ...ParameterRouter
+      ...StudioRouter,
+      ...MatchRouter
     ]
   },
   {