Skip to content

A
admin-ci-test
提交 0aaa48e7 作者: 龚洪江
操作

功能：服务管理

上级 8c485f0c
正在显示 包含 168 行增加 和 80 行删除
env/.env.development
#请求接口地址
VITE_REQUEST_BASE_URL='https://www.iuav.shop'
#VITE_REQUEST_BASE_URL='https://www.iuav.shop'
#VITE_REQUEST_BASE_URL='https://test.iuav.shop'
#VITE_REQUEST_BASE_URL='https://iuav.mmcuav.cn'
#VITE_REQUEST_BASE_URL='/api'
VITE_REQUEST_BASE_URL='/api'
#旧版接口地址
#VITE_REQUEST_BASE_URL='https://iuav.mmcuav.cn'
#VITE_REQUEST_BASE_URL='https://test.iuav.mmcuav.cn'
......
src/api/interface/mallManageType.ts
......@@ -114,12 +114,12 @@ export type addServiceType = InterFunction<
//服务-更新
export type editServiceType = InterFunction<
{
applicationId: number;
coverPlan: string;
displayState: number;
industryId: number;
applicationId?: number;
coverPlan?: string;
displayState?: number;
industryId?: number;
serviceIntroduction?: string;
serviceName: string;
serviceName?: string;
shareCard?: string;
video?: string;
id: number;
......
src/components/previewImageVideo/index.tsx 0 → 100644
import { FC } from 'react';
import { Modal, ModalProps, Image } from 'antd';
type selfProps = {
type: 'video' | 'image';
url: string;
};
const PreviewImageVideo: FC<ModalProps & selfProps> = ({ open, type, url, onCancel }) => {
return (
<Modal open={open} onCancel={onCancel} footer={null} title='预览'>
{type === 'video' ? (
<video src={url} style={{ width: '100%', height: '200px' }} controls />
) : (
''
)}
{type === 'image' ? <Image src={url} width={100} height={100} /> : ''}
</Modal>
);
};
export default PreviewImageVideo;
src/pages/mallManage/mallGoods/goodsList/index.tsx
import SearchBox, { searchColumns } from '~/components/search-box';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Card, Image, message, Table } from 'antd';
import { Button, Card, Image, message, Modal, Table } from 'antd';
import {
ArrowDownOutlined,
ArrowUpOutlined,
......@@ -193,14 +193,20 @@ const GoodsList = () => {
if (selectedRowKeys.length === 0) {
return message.warning('请先选择商品');
}
GoodsAPI.batchRemoveWareInfo(selectedRowKeys as number[]).then(({ code }) => {
if (code === '200') {
if (pagination.pageNo !== 1 && tableData.length == 1) {
pagination.pageNo -= 1;
}
message.success('删除成功');
getGoodsList(query);
}
Modal.confirm({
title: '提示',
content: '删除后数据将会丢失，确定删除吗？',
onOk() {
GoodsAPI.batchRemoveWareInfo(selectedRowKeys as number[]).then(({ code }) => {
if (code === '200') {
if (pagination.pageNo !== 1 && tableData.length == 1) {
pagination.pageNo -= 1;
}
message.success('删除成功');
getGoodsList(query);
}
});
},
});
};
useEffect(() => {
......
src/pages/mallManage/rentGoods/rentList/index.tsx
import SearchBox, { searchColumns } from '~/components/search-box';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Card, Image, message, Table } from 'antd';
import { Button, Card, Image, message, Modal, Table } from 'antd';
import {
ArrowDownOutlined,
ArrowUpOutlined,
......@@ -192,14 +192,20 @@ const RentList = () => {
if (selectedRowKeys.length === 0) {
return message.warning('请先选择商品');
}
GoodsAPI.batchRemoveWareInfo(selectedRowKeys as number[]).then(({ code }) => {
if (code === '200') {
if (pagination.pageNo !== 1 && tableData.length == 1) {
pagination.pageNo -= 1;
}
message.success('删除成功');
getGoodsList(query);
}
Modal.confirm({
title: '提示',
content: '删除后数据将会丢失，确定删除吗？',
onOk() {
GoodsAPI.batchRemoveWareInfo(selectedRowKeys as number[]).then(({ code }) => {
if (code === '200') {
if (pagination.pageNo !== 1 && tableData.length == 1) {
pagination.pageNo -= 1;
}
message.success('删除成功');
getGoodsList(query);
}
});
},
});
};
useEffect(() => {
......
src/pages/mallManage/serviceManage/serviceDetail/index.tsx
import { Button, Form } from 'antd';
import { Button, Form, Image } from 'antd';
import { useNavigate, useSearchParams } from 'react-router-dom';
import './index.scss';
import { MallManageAPI } from '~/api';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { InterDataType } from '~/api/interface';
import { serviceDetailType } from '~/api/interface/mallManageType';
......@@ -22,25 +22,38 @@ const ServiceDetail = () => {
//返回
const backRoute = () => {
navigate(-1);
getServiceDetail(Number(searchParams.get('id')));
};
useEffect(() => {
getServiceDetail(Number(searchParams.get('id')));
}, []);
return (
<div className='service-detail'>
<div className='service-detail-operate'>
<Button type='primary'>修改</Button>
<Button type='primary' onClick={backRoute}>
返回
</Button>
</div>
<div className='service-detail-form'>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 16 }}>
<Form.Item label='服务名称'>哈哈</Form.Item>
<Form.Item label='应用类型'>哈哈</Form.Item>
<Form.Item label='对应行业'>哈哈</Form.Item>
<Form.Item label='展示状态'>哈哈</Form.Item>
<Form.Item label='封面图'></Form.Item>
<Form.Item label='分享卡片'></Form.Item>
<Form.Item label='视频'></Form.Item>
<Form.Item label='服务名称'>{serviceDetail?.serviceName}</Form.Item>
<Form.Item label='应用类型'>{serviceDetail?.applicationName}</Form.Item>
<Form.Item label='对应行业'>{serviceDetail?.industryName}</Form.Item>
<Form.Item label='展示状态'>
{serviceDetail?.displayState === 0 ? '上架' : '下架'}
</Form.Item>
<Form.Item label='封面图'>
<Image src={serviceDetail?.coverPlan} width={100} height={100} />
</Form.Item>
<Form.Item label='分享卡片'>
{serviceDetail?.shareCard ? (
<Image src={serviceDetail.shareCard} width={100} height={100} />
) : (
'暂无'
)}
</Form.Item>
<Form.Item label='视频'>
{serviceDetail?.video ? <video src={serviceDetail?.video} /> : '暂无'}
</Form.Item>
</Form>
</div>
</div>
......
src/pages/mallManage/serviceManage/serviceIntroduce/index.tsx
import { Button } from 'antd';
import { Button, message } from 'antd';
import { useNavigate, useSearchParams } from 'react-router-dom';
import './index.scss';
import { useEffect, useState } from 'react';
......@@ -13,6 +13,8 @@ const ServiceIntroduce = () => {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [serviceDetail, setServiceDetail] = useState<detailType>();
const [serviceId, setServiceId] = useState<number>(0);
const [serviceIntroduction, setServiceIntroduction] = useState<string>('');
//服务详情
const getServiceDetail = (id: number) => {
......@@ -20,25 +22,38 @@ const ServiceIntroduce = () => {
setServiceDetail(result);
});
};
const richTextChange = (text?: string) => {};
const richTextChange = (text?: string) => {
setServiceIntroduction(text || '');
};
//保存服务介绍
const saveIntroduce = () => {
MallManageAPI.editService({ id: serviceId, serviceIntroduction }).then(({ code }) => {
if (code === '200') {
message.success('修改成功');
}
});
};
//返回
const backRoute = () => {
navigate(-1);
};
useEffect(() => {
setServiceId(Number(searchParams.get('id')));
getServiceDetail(Number(searchParams.get('id')));
});
}, []);
return (
<div className='service-introduce'>
<div className='service-introduce-operate'>
<Button type='primary'>保存修改</Button>
<Button type='primary' onClick={saveIntroduce}>
保存修改
</Button>
<Button type='primary' onClick={backRoute}>
返回
</Button>
</div>
<div className='service-introduce-title'></div>
<div className='service-introduce-rich-text'>
<RichText value={serviceDetail.serviceIntroduction} onChange={richTextChange} />
<RichText value={serviceDetail?.serviceIntroduction} onChange={richTextChange} />
</div>
</div>
);
......
src/pages/mallManage/serviceManage/serviceList/components/addOrEditServiceModal/index.tsx
......@@ -180,7 +180,7 @@ const AddOrEditServiceModal: FC<ModalProps & selfProps> = ({
name='serviceName'
rules={[{ required: true, message: '请输入服务名称' }]}
>
<Input placeholder='请输入服务名称' />
<Input placeholder='请输入服务名称' maxLength={30} />
</Form.Item>
<Form.Item
label='应用'
......@@ -239,6 +239,7 @@ const AddOrEditServiceModal: FC<ModalProps & selfProps> = ({
onChange={videoUploadSuccess}
fileType={['video/mp4', 'video/avi', 'video/wmv', 'video/rmvb']}
defaultFileList={videoFileList}
fileSize={50}
>
<Button icon={<UploadOutlined />} size='small' type='primary'>
上传
......
src/pages/mallManage/serviceManage/serviceList/index.tsx
......@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
import { searchColumns } from '~/components/search-box';
import SearchBox from '~/components/search-box';
import AddOrEditServiceModal from './components/addOrEditServiceModal';
import PreviewImageVideo from '~/components/previewImageVideo';
import { Button, Card, Image, message, Modal, Table } from 'antd';
import {
PlusOutlined,
......@@ -88,7 +89,14 @@ const ServiceList: FC<any> = () => {
title: '视频',
align: 'center',
dataIndex: 'video',
render: (text: string) => (text ? '--' : '暂无'),
render: (text: string) =>
text ? (
<Button type='link' onClick={() => previewVideo(text)}>
查看
</Button>
) : (
'暂无'
),
},
{
title: '服务介绍',
......@@ -145,6 +153,9 @@ const ServiceList: FC<any> = () => {
//新增、编辑服务弹窗
const [addOrEditServiceModalOpen, setAddOrEditServiceModalOpen] = useState<boolean>(false);
const [addOrEditServiceModalTitle, setAddOrEditServiceModalTitle] = useState<string>('新增服务');
//预览视频、图片
const [previewShow, setPreviewShow] = useState<boolean>(false);
const [previewUrl, setPreviewUrl] = useState<string>('');
const onTabChange = (key: string) => {
pagination.pageNo = 1;
......@@ -233,7 +244,7 @@ const ServiceList: FC<any> = () => {
const deleteService = () => {
Modal.confirm({
title: '提示',
content: '删除后此数据将会丢失，确定删除吗？',
content: '删除后数据将会丢失，确定删除吗？',
onOk() {
MallManageAPI.deleteService(selectedRowKeys as number[]).then(({ code }) => {
if (code === '200') {
......@@ -263,6 +274,14 @@ const ServiceList: FC<any> = () => {
setQuery(data);
getServiceList(data);
};
//预览视频
const previewVideo = (url: string) => {
setPreviewShow(true);
setPreviewUrl(url);
};
const previewCancel = () => {
setPreviewShow(false);
};
useEffect(() => {
getServiceList();
getIndustryCategoryList();
......@@ -346,6 +365,13 @@ const ServiceList: FC<any> = () => {
handleOk={addOrEditServiceModalOk}
currentServiceData={currentServiceData}
/>
{/* 预览*/}
<PreviewImageVideo
open={previewShow}
onCancel={previewCancel}
type='video'
url={previewUrl}
/>
</div>
);
};
......
src/router/router.tsx
......@@ -50,13 +50,13 @@ import CourseManageView from '~/pages/mallManage/courseManage';
// const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList')); //活动管理
//商品管理
// const ServiceListView = React.lazy(() => import('~/pages/mallManage/serviceManage/serviceList')); //服务列表
// const ServiceDetailView = React.lazy(
// () => import('~/pages/mallManage/serviceManage/serviceDetail'),
// ); //服务详情
// const ServiceIntroduceView = React.lazy(
// () => import('~/pages/mallManage/serviceManage/serviceIntroduce'),
// ); //服务介绍
const ServiceListView = React.lazy(() => import('~/pages/mallManage/serviceManage/serviceList')); //服务列表
const ServiceDetailView = React.lazy(
() => import('~/pages/mallManage/serviceManage/serviceDetail'),
); //服务详情
const ServiceIntroduceView = React.lazy(
() => import('~/pages/mallManage/serviceManage/serviceIntroduce'),
); //服务介绍
const RentListView = React.lazy(() => import('~/pages/mallManage/rentGoods/rentList')); //租赁列表
const RentAddOrEditOrDetailView = React.lazy(
() => import('~/pages/mallManage/rentGoods/rentAddOrEditOrDetail'),
......@@ -236,35 +236,35 @@ export const routerList: Array<RouteObjectType> = [
title: '课程管理',
},
},
// {
// path: '/mallManage/serviceList',
// element: withLoadingComponent(<ServiceListView />),
// meta: {
// id: 10110,
// icon: <SmileOutlined />,
// title: '服务管理',
// },
// },
// {
// path: '/mallManage/serviceDetail',
// element: withLoadingComponent(<ServiceDetailView />),
// meta: {
// id: 10120,
// icon: <SmileOutlined />,
// title: '服务详情',
// hidden: true,
// },
// },
// {
// path: '/mallManage/serviceIntroduce',
// element: withLoadingComponent(<ServiceIntroduceView />),
// meta: {
// id: 10120,
// icon: <SmileOutlined />,
// title: '服务介绍',
// hidden: true,
// },
// },
{
path: '/mallManage/serviceList',
element: withLoadingComponent(<ServiceListView />),
meta: {
id: 10110,
icon: <SmileOutlined />,
title: '服务管理',
},
},
{
path: '/mallManage/serviceDetail',
element: withLoadingComponent(<ServiceDetailView />),
meta: {
id: 10120,
icon: <SmileOutlined />,
title: '服务详情',
hidden: true,
},
},
{
path: '/mallManage/serviceIntroduce',
element: withLoadingComponent(<ServiceIntroduceView />),
meta: {
id: 10120,
icon: <SmileOutlined />,
title: '服务介绍',
hidden: true,
},
},
{
path: '/mallManage/rentGoods',
element: withLoadingComponent(<RentListView />),
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论