✨ feat:赛事页面

16d6477e · 肖玉娟 · 0b3d4bed · 16d6477e · 16d6477e · 16d6477e
Commit 16d6477e authored Jan 29, 2023 by 肖玉娟
7 changed files
--- a/src/pages/Match/List.tsx
+++ b/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 { Button, message } from 'antd'
-import { DTable, usePTable } from '@/components/DTable'
-// import { useAppSelector } from '@/hooks/useStore'
+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)
+  useEffect(() => {
-        // result.data = list
+    getData()
-        result.total = total
+    dispatch(getStudio())
-      } catch (error) {
+    dispatch(getinteracts())
-        console.error('请求列表失败', error)
+  }, [])
-      }
-      return result
+  const getData = async () => { // 演播室数据
-    }, []),
+    const { data } = await GetListByPageApi({
-    columns: [
+      pageBean: {
-      {
+        pageNum: 0,
-        title: 'ID',
+        pageSize: 0
-        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>
-        ]
      }
-    ],
+    })
-    toolBarRender: useCallback(() => [
+    setTab(String(data?.list[0].id))
-      <Button key='tool' type="primary" onClick={() => handleUpdateVisible(true, '')} >
+    setDataSource(data?.list)
-        创建赛事
+  }
-      </Button>
-    ], [])
-  })
  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) {
+    type === 'add' && getData()
-      setCurrentId(NaN)
-    }
-    if (type === 'add') {
-      (actionRef.current as any).reload()
-    }
  }
+  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>
+      <ProCard
-        <DTable {...tableProps} />
+        tabs={{
-      </DList>
+          type: 'card',
-      <AddUpdate visible={isModalVisible} handleUpdateVisible={handleUpdateVisible} id={currentId} />
+          tabPosition: 'top',
+          activeKey: tab,
+          onChange: (key: any) => {
+            setTab(key)
+          }
+        }}
+        extra={<Button type="primary" onClick={() => handleUpdateVisible(true, '')}>新增</Button>}
+      >
+        {data}
+      </ProCard>
+      <AddUpdate visible={isModalVisible} handleUpdateVisible={handleUpdateVisible} />
    </>
  )
 }

--- a/src/pages/Match/common/services.ts
+++ b/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 删除

--- a/src/pages/Match/common/typing.ts
+++ b/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
--- a/src/pages/Match/components/addUpdate.tsx
+++ b/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 AddUpdate = ({ visible, handleUpdateVisible }:TProps) => {
-  const [title, setTitle] = useState<string>('')
+  const title = '创建赛事'
-  const files = { // TreeSelect组件配置项
+  const { files, studios, interacts } = useAppSelector(({ match }) => (match))
-    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, '')
  }
@@ -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>

--- a/src/pages/Match/store/match.ts
+++ b/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: {},
+  reducers: {
-  extraReducers: {}
+    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
--- a/src/pages/Studio/List.tsx
+++ b/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>)

--- a/src/store/index.ts
+++ b/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