接口联调

src/components/Nav/index.tsx

@@ -28,8 +28,6 @@ function Nav() {
   function fetchUserInfo() {
     http.get(getAgencyInfo).then(res => {
       const { data } = res
-      console.log(1111,data)
-      
       setUserInfo(data as UserInfoType)
       setUserState(data as UserInfoType)
     })

src/lib/http/api.ts

@@ -1,25 +1,31 @@
 // Login
-
 // 登录
 export const userLogin = `${import.meta.env.VITE_API_URL}/ad/union/user/login`
-
 // 获取验证码 TODO
 export const sendVerificationCode = `${import.meta.env.VITE_API_URL}/ad/platform/user/sendVerificationCode`
-
 // 手机号登录 TODO
 export const loginPhone = `${import.meta.env.VITE_API_URL}/ad/platform/user/login/phone`
-
 // 忘记密码 TODO
 export const forgotPassword = `${import.meta.env.VITE_API_URL}/ad/platform/user/forgotPassword`
-
 // 登出
 export const userLogout = `${import.meta.env.VITE_API_URL}/ad/union/user/logout`
-
 // 修改密码
 export const changePassword = `${import.meta.env.VITE_API_URL}/ad/union/user/changePassword`
-
 // 获取用户信息 
 export const getAgencyInfo = `${import.meta.env.VITE_API_URL}/ad/union/user/findUserDetailByLogin`
 
+// 应用管理
+export const appList = `${import.meta.env.VITE_API_URL}/ad/union/application/findByConditionAndPage`
+export const createApp = `${import.meta.env.VITE_API_URL}/ad/union/application/add`
+export const updateApp = `${import.meta.env.VITE_API_URL}/ad/union/application/updateById`
+export const deleteApp = `${import.meta.env.VITE_API_URL}/ad/union/application/deleteById`
+export const allAppList = `${import.meta.env.VITE_API_URL}/ad/union/application/findAllApprovePassApplication`
+
+// 广告管理
+export const adList = `${import.meta.env.VITE_API_URL}/ad/union/ad/findByConditionAndPage`
+export const createAd = `${import.meta.env.VITE_API_URL}/ad/union/ad/add`
+export const openAd = `${import.meta.env.VITE_API_URL}/ad/union/ad/open`
+export const closeAd = `${import.meta.env.VITE_API_URL}/ad/union/ad/close`
+
 export default {
 }

src/lib/http/index.ts

@@ -60,6 +60,10 @@ class Request {
   post<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
     return this.instance.post(url, data, config)
   }
+
+  delete<T>(url: string, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
+    return this.instance.delete(url, config)
+  }
 }
 
 

src/pages/Manage/components/AdManage/components/ContentTable/index.tsx

@@ -1,9 +1,14 @@
 import { Table, Pagination, Switch } from 'antd'
-import type { ColumnsType } from 'antd/es/table'
-import type { PropsType, RowDataType, PaginationOnChangeType, TableOnChangeType } from './types'
 import { useEffect, useState } from 'react'
+import dayjs from 'dayjs'
 import { throttle } from 'lodash'
 import styles from './index.module.css'
+import { adTypes } from '../../const'
+import type { ColumnsType } from 'antd/es/table'
+import type { 
+  PropsType, RowDataType, 
+  PaginationOnChangeType, TableOnChangeType 
+} from './types'
 
 export default function ContentTable ({
   tableData,
@@ -41,6 +46,7 @@ export default function ContentTable ({
     {
       title: '广告类型',
       dataIndex: 'unionAdPosition',
+      render: (v) => adTypes[v] || v
     },
     {
       title: '状态',
@@ -52,6 +58,7 @@ export default function ContentTable ({
     {
       title: '创建时间',
       dataIndex: 'createTime',
+      render: (v) => dayjs(v).format('YYYY-MM-DD HH:mm:ss')
     }
   ]
 

src/pages/Manage/components/AdManage/components/CreateModal/index.tsx

@@ -1,9 +1,12 @@
 import { Modal, Form, Select, Input, Radio } from 'antd'
-import type { PropsType, Action, FormDataType, OptionsItemType, RadioOptionsType } from './types'
 import { forwardRef, useImperativeHandle, useState } from 'react'
-import type { RowDataType } from '../ContentTable/types'
 import { adTypes } from '../../const'
 import styles from './index.module.css'
+import type { RowDataType } from '../ContentTable/types'
+import type { 
+  PropsType, Action, FormDataType, 
+  OptionsItemType, RadioOptionsType 
+} from './types'
 
 const { Item, useForm } = Form
 const adTypesOptions:RadioOptionsType = Object.entries(adTypes).map(([value,label])=>({value: +value,label}))
@@ -11,16 +14,14 @@ const initialValues = {
   unionAdPosition: 0, // 广告类型
 }
 
-console.log(adTypesOptions)
-
-const CreateModal = forwardRef(({ onCreate, onUpdate }:PropsType, ref) => {
+const CreateModal = forwardRef(({ allAppList, onCreate, onUpdate }:PropsType, ref) => {
   const [isOpen, setIsOpen] = useState(false)
   const [action, setAction] = useState<Action>()
   const [form] = useForm()
   const [editRow, setEditRow] = useState<RowDataType>()
   const isEdit = action === 'edit'
   const title = isEdit ? '编辑广告' : '新建广告'
-  const allAppOptions:OptionsItemType[] = []
+  const allAppOptions:OptionsItemType[] = allAppList.map(({id, unionAppName})=>({label:unionAppName, value:id}))
 
   useImperativeHandle(ref,()=>({
     open: (editRow?:RowDataType) => {
@@ -42,8 +43,6 @@ const CreateModal = forwardRef(({ onCreate, onUpdate }:PropsType, ref) => {
     }
   }))
 
- 
-
   const onOk = async () => {
     try {
       const res:FormDataType =  await form.validateFields()

src/pages/Manage/components/AdManage/components/CreateModal/types.d.ts

@@ -1,6 +1,8 @@
 import { RowDataType } from '../ContentTable/types'
+import { AllAppListItemType } from '../../types'
 
 export interface PropsType {
+    allAppList: AllAppListItemType[]
     onCreate: EventFunctionType<[FormDataType,EventFunctionType<[]>]>,
     onUpdate: EventFunctionType<[RowDataType,EventFunctionType<[]>]>
 }

src/pages/Manage/components/AdManage/index.tsx

@@ -2,34 +2,60 @@ import { useEffect, useRef, useState } from 'react'
 import HeaderFilter from './components/HeaderFilter'
 import ContentTable from './components/ContentTable'
 import CreateModal from './components/CreateModal'
+import { useGlobalStateUpdate } from '@src/store/globalStates/loadingState'
+import { 
+  createAd as createAdRequest,
+  getAdList,
+  openAd,
+  clsoeAd,
+  getAllAppList
+} from './request'
 import type { 
-  RowDataType, PaginationParamsType, 
+  RowDataType, 
+  PaginationParamsType, 
 } from './components/ContentTable/types'
-import type { RefType, FormDataType } from './components/CreateModal/types'
-import { useGlobalStateUpdate } from '@src/store/globalStates/loadingState'
+import type { 
+  RefType, 
+  FormDataType 
+} from './components/CreateModal/types'
+import { AllAppListItemType } from './types'
+
 
 
 export function AdManage(){
   const [tableData, setTableData] = useState<RowDataType[]>([])
   const [total, setTotal] = useState(0)
   const [paginationParams, setPaginationParams] = useState<PaginationParamsType>({ pageNumber: 1, pageSize: 10})
+  const [allAppList, setAllAppList] = useState<AllAppListItemType[]>([])
   const createModalRef = useRef<RefType>()
   const setloading = useGlobalStateUpdate()
 
+  useEffect(()=>{
+    getAllAppList().then(res=>{
+      if (res) {
+        setAllAppList(res)
+      }
+    })
+  },[])
+
   useEffect(()=>{
     getTableData()   
   },[paginationParams])
 
   const  getTableData = async () => {
-    // TODO 获取数据
+    setloading(true)
+    
+    const {pageNumber,pageSize} = paginationParams
+    const data = await getAdList({
+      pageSize,
+      currentPage: pageNumber,
+    })
+    if (data) {
+      setTableData(data.objs)
+      setTotal(data.totalSize)
+    }
 
-    // setloading(true)
-    // const data = await getPlanList(mergeRequestParams(paginationParams, filterParams))
-    // if (data) {
-    //   setTableData(data.objs)
-    //   setTotal(data.totalSize)
-    // }
-    // setloading(false)
+    setloading(false)
   }
 
   const onPaginationChange =async (params: PaginationParamsType) => {
@@ -40,15 +66,25 @@ export function AdManage(){
     createModalRef.current?.open()
   }
 
-  const onSwitchStatus = ({row, checked}:{row:RowDataType, checked:boolean}) => {
+  const onSwitchStatus = async ({row, checked}:{row:RowDataType, checked:boolean}) => {
     console.log(row, checked)
-    // TODO 切换状态
+    setloading(true)
+    const res =  checked ? await openAd(row.id) : await clsoeAd(row.id)
+    setloading(false)
+    if (res) {
+      getTableData()
+    }
+
   }
 
-  const createAd = (form: FormDataType, cb:EventFunctionType<[]>) => {
-    console.log('创建',form)
-    // TODO 创建接口
-    cb()
+  const createAd = async (form: FormDataType, cb:EventFunctionType<[]>) => {
+    setloading(true)
+    const res = await createAdRequest(form)
+    setloading(false)
+    if (res) {
+      getTableData()
+      cb() // 关闭modal
+    }
   }
 
   const updateAd = (form: RowDataType,  cb:EventFunctionType<[]>) => {
@@ -70,6 +106,7 @@ export function AdManage(){
       />
       <CreateModal 
         ref={createModalRef}
+        allAppList={allAppList}
         onCreate={createAd}
         onUpdate={updateAd}
       />

src/pages/Manage/components/AdManage/request.ts

@@ -0,0 +1,68 @@
+import { message } from 'antd'
+import http from '@src/lib/http'
+import {
+  adList,
+  createAd as createAdPath, 
+  openAd as openAdPath,
+  closeAd as closeAdPath,
+  allAppList
+} from '@src/lib/http/api'
+import type { 
+  AdListRequestParamsType, 
+  AllAppListItemType,
+} from './types'
+import type { RowDataType } from './components/ContentTable/types'
+import type { FormDataType } from './components/CreateModal/types'
+
+export const getAdList = async (
+  params: AdListRequestParamsType
+): Promise<ApiResponseData<RowDataType[]>|undefined> => {
+  try {
+    const res = await http.get(adList, {params})
+    const {data, code, msg} = res as ApiResponse<ApiResponseData<RowDataType[]>>
+    if (code===0) return data
+    message.error(msg ||'获取广告列表失败')
+  } catch (error) { /* empty */ }
+}
+
+export const createAd = async (
+  params: FormDataType
+): Promise<boolean|undefined> => {
+  try {
+    const res = await http.post(createAdPath, params)
+    const {code, msg} = res as ApiResponse<undefined>
+    if (code===0) return true
+    message.error(msg ||'创建广告失败')
+  } catch (error) { /* empty */ }
+}
+
+export const openAd = async (
+  id: number
+): Promise<boolean|undefined> => {
+  try {
+    const res = await http.get(openAdPath, {params:{id}})
+    const {code, msg} = res as ApiResponse<undefined>
+    if (code===0) return true
+    message.error(msg ||'开启广告失败')
+  } catch (error) { /* empty */ }
+}
+
+export const clsoeAd = async (
+  id: number
+): Promise<boolean|undefined> => {
+  try {
+    const res = await http.get(closeAdPath, {params:{id}})
+    const {code, msg} = res as ApiResponse<undefined>
+    if (code===0) return true
+    message.error(msg ||'关闭广告失败')
+  } catch (error) { /* empty */ }
+}
+
+export const getAllAppList = async (): Promise<AllAppListItemType[]|undefined> => {
+  try {
+    const res = await http.get(allAppList)
+    const {data, code, msg} = res as ApiResponse<AllAppListItemType[]>
+    if (code===0) return data
+    message.error(msg ||'获取全部应用列表失败')
+  } catch (error) { /* empty */ }
+}

src/pages/Manage/components/AdManage/types.d.ts

@@ -0,0 +1,15 @@
+export interface AdListRequestParamsType {
+    currentPage: number,
+    pageSize: number,
+}
+
+export interface AllAppListItemType {
+    id: number,
+    unionAppName: string, // 应用名称
+    unionAppId: string, // 应用ID
+    thirdAppType: number, // 应用类型
+    status: number, // 状态
+    createTime: string, // 创建时间
+    thirdMpAppId?: string, // 小程序appid
+    thirdAppDomain?: string // H5链接
+}

src/pages/Manage/components/AppManage/components/ContentTable/index.tsx

@@ -1,9 +1,11 @@
-import { Space, Table, Popconfirm, Pagination } from 'antd'
-import type { ColumnsType } from 'antd/es/table'
-import type { PropsType, RowDataType, PaginationOnChangeType, TableOnChangeType } from './types'
 import { useEffect, useState } from 'react'
+import { Space, Table, Popconfirm, Pagination } from 'antd'
 import { throttle } from 'lodash'
+import dayjs from 'dayjs'
 import styles from './index.module.css'
+import { appTypes, appStatus } from '../../const'
+import type { ColumnsType } from 'antd/es/table'
+import type { PropsType, RowDataType, PaginationOnChangeType, TableOnChangeType } from './types'
 
 export default function ContentTable ({
   tableData,
@@ -38,19 +40,22 @@ export default function ContentTable ({
     {
       title: '应用类型',
       dataIndex: 'thirdAppType',
+      render: (v) => appTypes[v] || v
     },
     {
       title: '状态',
       dataIndex: 'status',
+      render: (v) => appStatus[v] || v
     },
     {
       title: '创建时间',
       dataIndex: 'createTime',
+      render: (v) => dayjs(v).format('YYYY-MM-DD HH:mm:ss')
     },
     {
       title: '操作',
       key: 'action',
-      width: 80,
+      width: 120,
       render: (_v,row) => {
         return (
           <Space size='middle' >

src/pages/Manage/components/AppManage/const.ts

@@ -1,4 +1,10 @@
 export const appTypes:MapType<string> =  {
   0: '小程序',
   1: 'H5',
+}
+
+export const appStatus:MapType<string> = {
+  0: '审核不通过',
+  1: '审核通过',
+  2: '未审核'
 }

src/pages/Manage/components/AppManage/index.tsx

@@ -2,12 +2,15 @@ import { useEffect, useRef, useState } from 'react'
 import HeaderFilter from './components/HeaderFilter'
 import ContentTable from './components/ContentTable'
 import CreateModal from './components/CreateModal'
-import type { 
-  RowDataType, PaginationParamsType 
-} from './components/ContentTable/types'
 import { useGlobalStateUpdate } from '@src/store/globalStates/loadingState'
-import { RefType, FormDataType } from './components/CreateModal/types'
-
+import { 
+  getAppList, 
+  createApp as createAppRequest,
+  updateApp as updateAppRequest,
+  deleteApp as deleteAppRequest
+} from './request'
+import type{  RefType, FormDataType } from './components/CreateModal/types'
+import type { RowDataType, PaginationParamsType } from './components/ContentTable/types'
 
 export function AppManage(){
   const [tableData, setTableData] = useState<RowDataType[]>([])
@@ -21,15 +24,19 @@ export function AppManage(){
   },[paginationParams])
 
   const  getTableData = async () => {
-    // TODO 获取数据
+    setloading(true)
+
+    const {pageNumber,pageSize} = paginationParams
+    const data = await getAppList({
+      pageSize,
+      currentPage: pageNumber,
+    })
+    if (data) {
+      setTableData(data.objs)
+      setTotal(data.totalSize)
+    }
 
-    // setloading(true)
-    // const data = await getPlanList(mergeRequestParams(paginationParams, filterParams))
-    // if (data) {
-    //   setTableData(data.objs)
-    //   setTotal(data.totalSize)
-    // }
-    // setloading(false)
+    setloading(false)
   }
 
   const onPaginationChange =async (params: PaginationParamsType) => {
@@ -44,20 +51,34 @@ export function AppManage(){
     createModalRef.current?.open(row)
   }
 
-  const deleteRow = async (row: RowDataType) => {
-    // TODO 删除
+  const deleteApp = async (row: RowDataType) => {
+    setloading(true)
+    const res = await deleteAppRequest(row.id)
+    setloading(false)
+    if (res) {
+      getTableData()
+    }
   }
 
-  const createApp = (form: FormDataType, cb:EventFunctionType<[]>) => {
-    console.log('创建',form)
-    // TODO 创建接口
-    cb()
+  const createApp = async (form: FormDataType, cb:EventFunctionType<[]>) => {
+    setloading(true)
+    const res = await createAppRequest(form)
+    setloading(false)
+    if (res) {
+      getTableData()
+      cb() // 关闭modal
+    }
   }
 
-  const updateApp = (form: RowDataType,  cb:EventFunctionType<[]>) => {
-    console.log('更新',form)
-    // TODO 更新接口
-    cb()
+  const updateApp = async (form: RowDataType,  cb:EventFunctionType<[]>) => {
+    setloading(true)
+    const {id, unionAppName} = form
+    const res = await updateAppRequest({id, unionAppName})
+    setloading(false)
+    if (res) {
+      getTableData()
+      cb() // 关闭modal
+    }
   }
 
   return (
@@ -70,7 +91,7 @@ export function AppManage(){
         tableData={ tableData } 
         onPaginationChange = { onPaginationChange }
         onEditRow={ editRow } 
-        onDeleteRow={ deleteRow }
+        onDeleteRow={ deleteApp }
       />
       <CreateModal 
         ref={createModalRef}

src/pages/Manage/components/AppManage/request.ts

@@ -0,0 +1,59 @@
+import { message } from 'antd'
+import http from '@src/lib/http'
+import {
+  appList,
+  createApp as createAppPath, 
+  updateApp as updateAppPath, 
+  deleteApp as deleteAppPath
+} from '@src/lib/http/api'
+import type { 
+  AppListRequestParamsType, 
+  UpdateAppRequestParamsType 
+} from './types'
+import type { RowDataType } from './components/ContentTable/types'
+import type { FormDataType } from './components/CreateModal/types'
+
+export const getAppList = async (
+  params: AppListRequestParamsType
+): Promise<ApiResponseData<RowDataType[]>|undefined> => {
+  try {
+    const res = await http.get(appList, {params})
+    const {data, code, msg} = res as ApiResponse<ApiResponseData<RowDataType[]>>
+    if (code===0) return data
+    message.error(msg ||'获取应用列表失败')
+  } catch (error) { /* empty */ }
+}
+
+export const createApp = async (
+  params: FormDataType
+): Promise<boolean|undefined> => {
+  try {
+    const res = await http.post(createAppPath, params)
+    const {code, msg} = res as ApiResponse<undefined>
+    if (code===0) return true
+    message.error(msg ||'创建应用失败')
+  } catch (error) { /* empty */ }
+}
+
+export const updateApp = async (
+  params: UpdateAppRequestParamsType
+): Promise<boolean|undefined> => {
+  try {
+    const res = await http.post(updateAppPath, params)
+    const {code, msg} = res as ApiResponse<undefined>
+    if (code===0) return true
+    message.error(msg ||'修改应用失败')
+  } catch (error) { /* empty */ }
+}
+
+export const deleteApp = async (
+  id: number
+): Promise<boolean|undefined> => {
+  try {
+    const res = await http.delete(deleteAppPath, {params:{id}})
+    const {code, msg} = res as ApiResponse<undefined>
+    if (code===0) return true
+    message.error(msg ||'删除应用失败')
+  } catch (error) { /* empty */ }
+}
+

src/pages/Manage/components/AppManage/types.d.ts

@@ -0,0 +1,9 @@
+export interface AppListRequestParamsType {
+    currentPage: number,
+    pageSize: number,
+}
+
+export interface UpdateAppRequestParamsType {
+    id: number,
+    unionAppName: string,
+}

types/lib/index.d.ts

@@ -5,7 +5,7 @@ interface ApiResponse<T> {
   success: boolean
 }
 
-interface AdResponseData<T> {
+interface ApiResponseData<T> {
   objs: T
   totalSize: number,
   totalPage?: number