功能：服务管理

src/api/interface/mallManageType.ts

@@ -97,3 +97,17 @@ export type queryCategoryInfoByType = InterFunction<
     }>;
   }[]
 >;
+//服务-新增
+export type addServiceType = InterFunction<
+  {
+    applicationId: number;
+    coverPlan: string;
+    displayState: number;
+    industryId: number;
+    serviceIntroduction?: string;
+    serviceName: string;
+    shareCard: string;
+    video: string;
+  },
+  any
+>;

src/api/modules/mallManage.ts

 import axios from '~/api/request';
 import {
   addCurriculumType,
+  addServiceType,
   queryCategoryInfoByType,
   queryCurriculumInfoListType,
   removeCurriculumType,
@@ -28,4 +29,7 @@ export class MallManageAPI {
   // 根据类型获取各个目录及分类信息
   static queryCategoryInfoByType: queryCategoryInfoByType = (params) =>
     axios.get('/pms/classify/queryCategoryInfoByType', { params });
+  //  服务-新增
+  static addService: addServiceType = (data) =>
+    axios.post('/pms/backstage/work/addWorkService', data);
 }

src/pages/mallManage/serviceManage/serviceList/components/addOrEditServiceModal/index.tsx

@@ -2,47 +2,64 @@ import { FC } from 'react';
 import { Button, Col, Form, Input, Modal, Row, Select, Upload } from 'antd';
 import { ModalProps } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import { Uploader } from '~/components/uploader';
 
 const AddOrEditServiceModal: FC<ModalProps> = ({ open, title, onCancel }) => {
   return (
     <Modal open={open} title={title} onCancel={onCancel}>
       <Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
-        <Form.Item label='服务名称'>
+        <Form.Item
+          label='服务名称'
+          name='serviceName'
+          rules={[{ required: true, message: '请输入服务名称' }]}
+        >
           <Input placeholder='请输入服务名称' />
         </Form.Item>
-        <Form.Item label='应用'>
+        <Form.Item
+          label='应用'
+          name='applicationId'
+          rules={[{ required: true, message: '请选择应用' }]}
+        >
           <Select placeholder='请选择应用'>
             <Select.Option>111</Select.Option>
           </Select>
         </Form.Item>
-        <Form.Item label='对应行业'>
+        <Form.Item
+          label='对应行业'
+          name='industryId'
+          rules={[{ required: true, message: '请选择对应行业' }]}
+        >
           <Select placeholder='请选择对应行业'>
             <Select.Option>111</Select.Option>
           </Select>
         </Form.Item>
-        <Form.Item label='封面图'>
-          <Upload listType='picture-card'>
+        <Form.Item
+          label='封面图'
+          name='coverPlan'
+          rules={[{ required: true, message: '请上传封面图' }]}
+        >
+          <Uploader listType='picture-card' fileUpload>
             <UploadOutlined />
-          </Upload>
+          </Uploader>
         </Form.Item>
-        <Form.Item label='分享卡片'>
-          <Upload listType='picture-card'>
+        <Form.Item label='分享卡片' name='shareCard'>
+          <Uploader listType='picture-card' fileUpload>
             <UploadOutlined />
-          </Upload>
+          </Uploader>
         </Form.Item>
-        <Form.Item label='视频'>
+        <Form.Item label='视频' name='video'>
           <Row>
             <Col></Col>
             <Col>
-              <Upload>
+              <Uploader listType='text' fileUpload>
                 <Button icon={<UploadOutlined />} size='small' type='primary'>
                   上传
                 </Button>
-              </Upload>
+              </Uploader>
             </Col>
           </Row>
         </Form.Item>
-        <Form.Item label='展示状态'>
+        <Form.Item label='展示状态' name='displayState'>
           <Select placeholder='请选择展示状态'>
             <Select.Option>上架</Select.Option>
             <Select.Option>下架</Select.Option>

src/pages/mallManage/serviceManage/serviceList/index.tsx

-import { FC, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { searchColumns } from '~/components/search-box';
 import SearchBox from '~/components/search-box';
@@ -11,6 +11,12 @@ import {
   DeleteOutlined,
 } from '@ant-design/icons';
 import { ColumnsType } from 'antd/es/table';
+import { CategoryManageAPI } from '~/api';
+import { InterDataType } from '~/api/interface';
+import { categoryListType } from '~/api/interface/categoryManage';
+
+//分类返回类型
+type categoryType = InterDataType<categoryListType>['list'];
 
 const ServiceList: FC<any> = () => {
   const navigate = useNavigate();
@@ -82,6 +88,8 @@ const ServiceList: FC<any> = () => {
     },
   ];
   const [tableData] = useState<{ id: number }[]>([{ id: 1 }]);
+  //行业分类列表
+  const [industryCategoryList, setIndustryCategoryList] = useState<categoryType>([]);
   //新增、编辑服务弹窗
   const [addOrEditServiceModalOpen, setAddOrEditServiceModalOpen] = useState<boolean>(false);
   const [addOrEditServiceModalTitle, setAddOrEditServiceModalTitle] = useState<string>('新增服务');
@@ -98,6 +106,18 @@ const ServiceList: FC<any> = () => {
   const addOrEditServiceModalCancel = () => {
     setAddOrEditServiceModalOpen(false);
   };
+  //行业分类列表
+  const getIndustryCategoryList = () => {
+    CategoryManageAPI.getCategoryList({ directoryId: 2, pageSize: 99999, pageNo: 1 }).then(
+      () => {},
+    );
+  };
+  //应用分类列表
+  const getApplicationCategoryList = () => {
+    CategoryManageAPI.getCategoryList({ directoryId: 3, pageSize: 99999, pageNo: 1 }).then(
+      () => {},
+    );
+  };
   //服务详情
   const toServiceDetail = () => {
     navigate({ pathname: '/mallManage/serviceDetail' });
@@ -106,6 +126,10 @@ const ServiceList: FC<any> = () => {
   const toServiceIntroduce = () => {
     navigate({ pathname: '/mallManage/serviceIntroduce' });
   };
+  useEffect(() => {
+    getIndustryCategoryList();
+    getApplicationCategoryList();
+  }, []);
 
   return (
     <div className='service-list'>