功能：服务管理

src/api/interface/mallManageType.ts

-import { InterFunction, InterListFunction } from '~/api/interface';
+import { InterFunction, InterItemFunction, InterListFunction } from '~/api/interface';
 // V1.0.1课程视频列表
 export type queryCurriculumInfoListType = InterListFunction<
   {
@@ -106,8 +106,64 @@ export type addServiceType = InterFunction<
     industryId: number;
     serviceIntroduction?: string;
     serviceName: string;
+    shareCard?: string;
+    video?: string;
+  },
+  any
+>;
+//服务-更新
+export type editServiceType = InterFunction<
+  {
+    applicationId: number;
+    coverPlan: string;
+    displayState: number;
+    industryId: number;
+    serviceIntroduction?: string;
+    serviceName: string;
+    shareCard?: string;
+    video?: string;
+    id: number;
+  },
+  any
+>;
+//服务-列表
+export type serviceType = InterItemFunction<
+  { applicationId?: number; industryId?: number; serviceName?: string; displayState?: number },
+  {
+    applicationName: string;
+    serviceName: string;
+    industryName: string;
+    coverPlan: string;
     shareCard: string;
     video: string;
-  },
+    serviceIntroduction: string;
+    displayState: number;
+    applicationId: number;
+    industryId: number;
+    id: number;
+  }[]
+>;
+//服务-上下架-批量
+export type batchUpAndDownWorkServiceType = InterFunction<
+  { displayState: number; ids: number[] },
   any
 >;
+//服务-删除-批量
+export type deleteServiceType = InterFunction<number[], any>;
+//服务-详情
+export type serviceDetailType = InterFunction<
+  { id: number },
+  {
+    applicationName: string;
+    serviceName: string;
+    industryName: string;
+    coverPlan: string;
+    shareCard: string;
+    video: string;
+    serviceIntroduction: string;
+    displayState: number;
+    applicationId: number;
+    industryId: number;
+    id: number;
+  }
+>;

src/api/modules/mallManage.ts

@@ -5,8 +5,13 @@ import {
   queryCategoryInfoByType,
   queryCurriculumInfoListType,
   removeCurriculumType,
+  serviceType,
   treeCurriculumSkillType,
   updateCurriculumType,
+  editServiceType,
+  batchUpAndDownWorkServiceType,
+  deleteServiceType,
+  serviceDetailType,
 } from '~/api/interface/mallManageType';
 
 export class MallManageAPI {
@@ -32,4 +37,19 @@ export class MallManageAPI {
   //  服务-新增
   static addService: addServiceType = (data) =>
     axios.post('/pms/backstage/work/addWorkService', data);
+  //服务-编辑
+  static editService: editServiceType = (data) =>
+    axios.post('/pms/backstage/work/updateWorkService', data);
+  //  服务-列表
+  static getServiceList: serviceType = (data) =>
+    axios.post('/pms/backstage/work/queryServiceManagerList', data);
+  //  服务-上下架
+  static batchUpAndDownWorkService: batchUpAndDownWorkServiceType = (data) =>
+    axios.post('/pms/backstage/work/batchUpAndDownWorkService', data);
+  //  服务-删除-批量
+  static deleteService: deleteServiceType = (data) =>
+    axios.post('/pms/backstage/work/deleteWorkService', data);
+  //  服务-详情
+  static getServiceDetail: serviceDetailType = (params) =>
+    axios.get('/pms/backstage/work/queryWorkService', { params });
 }

src/components/uploader/index.tsx

@@ -115,6 +115,8 @@ export const Uploader: React.FC<PropsType> = (props) => {
     // 如果有默认文件列表
     if (defaultFileList?.length) {
       setFileList(defaultFileList);
+    } else {
+      setFileList([]);
     }
   }, [defaultFileList]);
   return (

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

 import { Button, Form } from 'antd';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import './index.scss';
+import { MallManageAPI } from '~/api';
+import { useState } from 'react';
+import { InterDataType } from '~/api/interface';
+import { serviceDetailType } from '~/api/interface/mallManageType';
 
+//服务详情-返回类型
+type detailType = InterDataType<serviceDetailType>;
 const ServiceDetail = () => {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
 
+  const [serviceDetail, setServiceDetail] = useState<detailType>();
+  //服务详情
+  const getServiceDetail = (id: number) => {
+    MallManageAPI.getServiceDetail({ id }).then(({ result }) => {
+      setServiceDetail(result);
+    });
+  };
   //返回
   const backRoute = () => {
     navigate(-1);
+    getServiceDetail(Number(searchParams.get('id')));
   };
   return (
     <div className='service-detail'>

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

 import { Button } from 'antd';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import './index.scss';
+import { useEffect, useState } from 'react';
+import { MallManageAPI } from '~/api';
+import RichText from '~/components/richText';
+import { InterDataType } from '~/api/interface';
+import { serviceDetailType } from '~/api/interface/mallManageType';
 
+//服务详情-返回类型
+type detailType = InterDataType<serviceDetailType>;
 const ServiceIntroduce = () => {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [serviceDetail, setServiceDetail] = useState<detailType>();
+
+  //服务详情
+  const getServiceDetail = (id: number) => {
+    MallManageAPI.getServiceDetail({ id }).then(({ result }) => {
+      setServiceDetail(result);
+    });
+  };
+  const richTextChange = (text?: string) => {};
   //返回
   const backRoute = () => {
     navigate(-1);
   };
-
+  useEffect(() => {
+    getServiceDetail(Number(searchParams.get('id')));
+  });
   return (
     <div className='service-introduce'>
       <div className='service-introduce-operate'>
@@ -18,7 +37,9 @@ const ServiceIntroduce = () => {
         </Button>
       </div>
       <div className='service-introduce-title'></div>
-      <div className='service-introduce-rich-text'></div>
+      <div className='service-introduce-rich-text'>
+        <RichText value={serviceDetail.serviceIntroduction} onChange={richTextChange} />
+      </div>
     </div>
   );
 };

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

-import { FC, useState } from 'react';
-import { Button, Col, Form, Input, Modal, Row, Select, Upload } from 'antd';
+import { FC, useEffect, useState } from 'react';
+import { Button, Form, Input, message, Modal, Select } from 'antd';
 import { ModalProps } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 import { Uploader } from '~/components/uploader';
 import { InterDataType, InterReqType } from '~/api/interface';
 import { categoryListType } from '~/api/interface/categoryManage';
-import { addServiceType } from '~/api/interface/mallManageType';
+import { addServiceType, serviceType } from '~/api/interface/mallManageType';
+import { MallManageAPI } from '~/api';
 
 //分类返回类型
 type categoryType = InterDataType<categoryListType>['list'];
+//服务返回类型
+type serviceListType = InterDataType<serviceType>['list'];
+
 interface selfProps {
   industryCategoryList: categoryType;
   applicationCategoryList: categoryType;
+  handleOk: () => void;
+  handleCancel: () => void;
+  currentServiceData: serviceListType[0] | undefined;
 }
 //新增服务参数类型
 type addServiceParametersType = InterReqType<addServiceType>;
@@ -19,9 +26,11 @@ type addServiceParametersType = InterReqType<addServiceType>;
 const AddOrEditServiceModal: FC<ModalProps & selfProps> = ({
   open,
   title,
-  onCancel,
+  handleCancel,
+  handleOk,
   industryCategoryList,
   applicationCategoryList,
+  currentServiceData,
 }) => {
   const [form] = Form.useForm<addServiceParametersType>();
   //封面图文件
@@ -94,8 +103,72 @@ const AddOrEditServiceModal: FC<ModalProps & selfProps> = ({
     });
     setVideoFileList(fileList);
   };
+  const onOk = () => {
+    form.validateFields().then((value: any) => {
+      MallManageAPI[currentServiceData ? 'editService' : 'addService']({
+        id: currentServiceData ? currentServiceData.id : undefined,
+        ...value,
+      }).then(({ code }) => {
+        if (code === '200') {
+          message.success(currentServiceData ? '编辑服务成功' : '新增服务成功');
+          form.resetFields();
+          handleOk();
+        }
+      });
+    });
+  };
+  const onCancel = () => {
+    form.resetFields();
+    handleCancel();
+  };
+  useEffect(() => {
+    if (currentServiceData) {
+      form.setFieldsValue({
+        serviceName: currentServiceData.serviceName,
+        applicationId: currentServiceData.applicationId,
+        industryId: currentServiceData.industryId,
+        coverPlan: currentServiceData.coverPlan,
+        shareCard: currentServiceData.shareCard || undefined,
+        video: currentServiceData.video || undefined,
+        displayState: currentServiceData.displayState,
+      });
+      setCoverPlanFileList([
+        {
+          id: Math.random(),
+          uid: Math.random(),
+          url: currentServiceData.coverPlan,
+          name: 'coverPlan',
+        },
+      ]);
+      if (currentServiceData.shareCard) {
+        setShareCardFileList([
+          {
+            id: Math.random(),
+            uid: Math.random(),
+            url: currentServiceData.shareCard,
+            name: 'shareCard',
+          },
+        ]);
+      }
+      if (currentServiceData.video) {
+        setVideoFileList([
+          {
+            id: Math.random(),
+            uid: Math.random(),
+            url: currentServiceData.video,
+            name: 'shareCard',
+          },
+        ]);
+      }
+    } else {
+      setCoverPlanFileList([]);
+      setVideoFileList([]);
+      setShareCardFileList([]);
+    }
+  }, [currentServiceData]);
+
   return (
-    <Modal open={open} title={title} onCancel={onCancel}>
+    <Modal open={open} title={title} onCancel={onCancel} onOk={onOk}>
       <Form
         labelCol={{ span: 4 }}
         wrapperCol={{ span: 16 }}
@@ -140,31 +213,37 @@ const AddOrEditServiceModal: FC<ModalProps & selfProps> = ({
           name='coverPlan'
           rules={[{ required: true, message: '请上传封面图' }]}
         >
-          <Uploader listType='picture-card' fileUpload onChange={coverPlanUploadSuccess}>
+          <Uploader
+            listType='picture-card'
+            fileUpload
+            onChange={coverPlanUploadSuccess}
+            defaultFileList={coverPlanFileList}
+          >
             <UploadOutlined />
           </Uploader>
         </Form.Item>
         <Form.Item label='分享卡片' name='shareCard'>
-          <Uploader listType='picture-card' fileUpload onChange={shareCardUploadSuccess}>
+          <Uploader
+            listType='picture-card'
+            fileUpload
+            onChange={shareCardUploadSuccess}
+            defaultFileList={shareCardFileList}
+          >
             <UploadOutlined />
           </Uploader>
         </Form.Item>
         <Form.Item label='视频' name='video'>
-          <Row>
-            <Col></Col>
-            <Col>
-              <Uploader
-                listType='text'
-                fileUpload
-                onChange={videoUploadSuccess}
-                fileType={['video/mp4', 'video/avi', 'video/wmv', 'video/rmvb']}
-              >
-                <Button icon={<UploadOutlined />} size='small' type='primary'>
-                  上传
-                </Button>
-              </Uploader>
-            </Col>
-          </Row>
+          <Uploader
+            listType='text'
+            fileUpload
+            onChange={videoUploadSuccess}
+            fileType={['video/mp4', 'video/avi', 'video/wmv', 'video/rmvb']}
+            defaultFileList={videoFileList}
+          >
+            <Button icon={<UploadOutlined />} size='small' type='primary'>
+              上传
+            </Button>
+          </Uploader>
         </Form.Item>
         <Form.Item label='展示状态' name='displayState'>
           <Select placeholder='请选择展示状态'>