Skip to content

A
admin-ci-test
提交 94926d2f 作者: ZhangLingKun
操作

功能：服务分类联调

上级 5c7dc778
正在显示 包含 736 行增加 和 46 行删除
src/api/interface/categoryManage.ts
import { InterFunction, InterItemFunction } from '~/api/interface';
import { InterFunction, InterItemFunction, InterListFunction } from '~/api/interface';
// 分类列表
export interface categoryEntity {
id: number;
......@@ -131,3 +131,89 @@ export type updateSubCategoryType = InterFunction<
>;
//分类管理-2级分类删除（新）
export type deleteSubCategoryType = InterFunction<{ id: number }, any>;
// 一级行业列表
export type industryListPagesType = InterListFunction<
{
id?: number;
typeName?: string;
},
{
id: number;
typeName: string;
typeImg: string;
description: string;
saleState: number;
createTime: string;
inspectionDTOS: Array<{
id: number;
inspectionNo: string;
inspectionName: string;
industryTypeId: number;
inspectionImg: string;
inspectionDescription: string;
saleState: null;
caseImg: string;
caseVideo: string;
companyInspectionDTOS: null;
}>;
inspectionName: string;
inspectionImg: string;
inspectionDescription: string;
}
>;
// 新增行业
export type industryInsertType = InterFunction<
{
description?: string;
id?: number;
saleState?: number;
typeImg?: string;
typeName?: string;
},
NonNullable<unknown>
>;
// 修改行业
export type industryUpdateType = InterFunction<
{
description?: string;
id?: number;
saleState?: number;
typeImg?: string;
typeName?: string;
},
NonNullable<unknown>
>;
// 新增服务
export type inspectionInsertType = InterFunction<
{
caseImg?: string;
caseVideo?: string;
id?: number;
industryTypeId?: number;
inspectionDescription?: string;
inspectionImg?: string;
inspectionName?: string;
inspectionNo?: string;
saleState?: number;
},
NonNullable<unknown>
>;
// 修改服务
export type inspectionUpdateType = InterFunction<
{
caseImg?: string;
caseVideo?: string;
id?: number;
industryTypeId?: number;
inspectionDescription?: string;
inspectionImg?: string;
inspectionName?: string;
inspectionNo?: string;
saleState?: number;
},
NonNullable<unknown>
>;
// 删除行业
export type industryRemoveType = InterFunction<{ id: number }, NonNullable<unknown>>;
// 删除服务
export type inspectionRemoveType = InterFunction<{ id: number }, NonNullable<unknown>>;
src/api/modules/categoryManage.ts
......@@ -11,6 +11,13 @@ import {
directoryListType,
directoryPageListType,
exchangeType,
industryInsertType,
industryListPagesType,
industryRemoveType,
industryUpdateType,
inspectionInsertType,
inspectionRemoveType,
inspectionUpdateType,
updatePrimaryCategoryType,
updateSubCategoryType,
} from '~/api/interface/categoryManage';
......@@ -129,4 +136,25 @@ export class CategoryManageAPI {
// 分类管理-2级分类删除（新）
static deleteSubCategory: deleteSubCategoryType = (params) =>
axios.get('/pms/category/deleteSubCategory', { params });
// 一级行业列表
static industryListPages: industryListPagesType = (params) =>
axios.post('/pms/industry/listPages', params);
// 新增行业
static industryInsert: industryInsertType = (params) =>
axios.post('/pms/industry/insert', params);
// 修改行业
static industryUpdate: industryUpdateType = (params) =>
axios.post('/pms/industry/update', params);
// 新增服务
static inspectionInsert: inspectionInsertType = (params) =>
axios.post('/pms/inspection/insert', params);
// 修改服务
static inspectionUpdate: inspectionUpdateType = (params) =>
axios.post('/pms/inspection/update', params);
// 删除行业
static industryRemove: industryRemoveType = (params) =>
axios.get('/pms/industry/remove', { params });
// 删除服务
static inspectionRemove: inspectionRemoveType = (params) =>
axios.get('/pms/inspection/remove', { params });
}
src/components/uploader/index.tsx
......@@ -54,6 +54,7 @@ export const Uploader: React.FC<PropsType> = (props) => {
listType,
fileList,
beforeUpload: (res) => {
// console.log('文件类型-->', res);
const isType = fileType?.includes(res.type);
const isSize = res.size / 1024 / 1024 < (fileSize || 2);
if (!isType) {
......
src/components/video/index.tsx 0 → 100644
import React from 'react';
import { Image } from 'antd';
// 参数类型
interface propsType {
src: string;
width?: number;
height?: number;
autoPlay?: boolean;
loop?: boolean;
controls?: boolean;
}
const Video: React.FC<propsType> = (props) => {
// 组件的默认值
Video.defaultProps = {
src: 'http://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/3505c402-cbf9-41a5-9d6f-bdb350625bea.jpg',
width: 40,
height: 40,
};
// 视频是否预览
const [isPreview, setIsPreview] = React.useState<boolean>(false);
return (
<>
<Image
src={`${props?.src}?x-oss-process=video/snapshot,t_3618&x-oss-process=image/quality,q_25`}
width={props?.width}
height={props?.height}
preview={false}
onClick={() => {
setIsPreview(true);
}}
/>
{isPreview && <div className='video-preview'>12312</div>}
</>
);
};
export default Video;
src/pages/categoryManage/serviceCategoryList/comp/addEditChildren/index.tsx 0 → 100644
import React, { useEffect } from 'react';
import { Form, Input, message, Modal, ModalProps } from 'antd';
import { InterListType, InterReqType } from '~/api/interface';
import { industryListPagesType, inspectionInsertType } from '~/api/interface/categoryManage';
import { PlusOutlined } from '@ant-design/icons';
import { Uploader } from '~/components/uploader';
import { CategoryManageAPI } from '~/api';
// 列表的类型
type TableType = InterListType<industryListPagesType>;
// 表单参数
type ReqType = InterReqType<inspectionInsertType>;
// 参数类型
interface selfProps {
id: number;
data?: TableType[0]['inspectionDTOS'][0];
onCancel: () => void;
}
const AddEditChildrenView: React.FC<ModalProps & selfProps> = ({
id,
open,
title,
onCancel,
data,
}) => {
// 表格数据类型
const [form] = Form.useForm<ReqType>();
// 关闭事件
const handleCancel = () => {
form.resetFields();
onCancel();
};
// 确定事件
const handleOk = () => {
form
.validateFields()
.then(async (values) => {
await handleSubmit(values);
})
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then();
});
};
// 提交数据
const handleSubmit = async (values: ReqType) => {
const res = await CategoryManageAPI[data?.id ? 'inspectionUpdate' : 'inspectionInsert']({
...values,
id: data?.id || undefined,
industryTypeId: data?.id ? data?.industryTypeId : id,
saleState: 1,
});
if (res && res.code === '200') {
handleCancel();
}
};
// componentDidMount
useEffect(() => {
if (!open) return;
if (!data) return;
form.setFieldsValue(data);
console.log('data --->', data);
}, [open]);
return (
<Modal title={title} open={open} onCancel={handleCancel} onOk={handleOk} destroyOnClose>
<Form form={form} labelAlign='right' labelCol={{ span: 5 }} wrapperCol={{ span: 10 }}>
<Form.Item
label='分类名称'
name='inspectionName'
rules={[{ required: true, message: '请输入分类名称' }]}
>
<Input placeholder='请输入分类名称' maxLength={15} allowClear />
</Form.Item>
<Form.Item
label='分类图标'
name='inspectionImg'
rules={[{ required: true, message: '请上传分类图标' }]}
>
<Uploader
listType={'picture-card'}
fileUpload
fileLength={1}
fileSize={10}
fileType={['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp']}
onChange={(e) =>
form.setFieldValue('inspectionImg', e.at(0) ? e.at(0)?.url : undefined)
}
defaultFileList={data?.inspectionImg ? [{ url: data?.inspectionImg }] : []}
>
<PlusOutlined />
</Uploader>
</Form.Item>
<Form.Item
label='分类描述'
name='inspectionDescription'
rules={[{ required: true, message: '请输入分类描述' }]}
>
<Input placeholder='请输入分类名称' maxLength={25} allowClear />
</Form.Item>
<Form.Item
label='服务编号'
name='inspectionNo'
rules={[{ required: true, message: '请输入分类名称' }]}
>
<Input placeholder='请输入分类名称' maxLength={15} allowClear />
</Form.Item>
<Form.Item
label='业务案例图片'
name='caseImg'
rules={[{ required: true, message: '请上传业务案例图片' }]}
>
<Uploader
listType={'picture-card'}
fileUpload
fileLength={1}
fileSize={10}
fileType={['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp']}
onChange={(e) => form.setFieldValue('caseImg', e.at(0) ? e.at(0)?.url : undefined)}
defaultFileList={data?.caseImg ? [{ url: data?.caseImg }] : []}
>
<PlusOutlined />
</Uploader>
</Form.Item>
<Form.Item
label='业务案例视频'
name='caseVideo'
rules={[{ required: false, message: '请上传业务案例视频' }]}
>
<Uploader
listType={'picture-card'}
fileUpload
fileLength={1}
fileSize={10}
fileType={['video/mp4', 'video/wmv', 'video/avi', 'video/mov', 'video/flv']}
onChange={(e) => form.setFieldValue('caseVideo', e.at(0) ? e.at(0)?.url : undefined)}
defaultFileList={data?.caseVideo ? [{ url: data?.caseVideo }] : []}
>
<PlusOutlined />
</Uploader>
</Form.Item>
</Form>
</Modal>
);
};
export default AddEditChildrenView;
src/pages/categoryManage/serviceCategoryList/comp/addEditModal/index.tsx 0 → 100644
import React, { useEffect } from 'react';
import { Form, Input, message, Modal, ModalProps } from 'antd';
import { InterListType, InterReqType } from '~/api/interface';
import { industryListPagesType, industryUpdateType } from '~/api/interface/categoryManage';
import { PlusOutlined } from '@ant-design/icons';
import { Uploader } from '~/components/uploader';
import { CategoryManageAPI } from '~/api';
// 列表的类型
type TableType = InterListType<industryListPagesType>;
// 表单参数
type ReqType = InterReqType<industryUpdateType>;
// 参数类型
interface selfProps {
data?: TableType[0];
onCancel: () => void;
}
const AddEditModalView: React.FC<ModalProps & selfProps> = ({ open, title, onCancel, data }) => {
// 表格数据类型
const [form] = Form.useForm<ReqType>();
// 关闭事件
const handleCancel = () => {
form.resetFields();
onCancel();
};
// 确定事件
const handleOk = () => {
form
.validateFields()
.then(async (values) => {
await handleSubmit(values);
})
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then();
});
};
// 提交数据
const handleSubmit = async (values: ReqType) => {
const res = await CategoryManageAPI[data?.id ? 'industryUpdate' : 'industryInsert']({
...values,
id: data?.id || undefined,
saleState: 1,
});
if (res && res.code === '200') {
handleCancel();
}
};
// componentDidMount
useEffect(() => {
if (!open) return;
if (!data) return;
form.setFieldsValue(data);
// console.log('data --->', data);
}, [open]);
return (
<Modal title={title} open={open} onCancel={handleCancel} onOk={handleOk} destroyOnClose>
<Form form={form} labelAlign='right' labelCol={{ span: 4 }} wrapperCol={{ span: 10 }}>
<Form.Item
label='分类名称'
name='typeName'
rules={[{ required: true, message: '请输入分类名称' }]}
>
<Input placeholder='请输入分类名称' maxLength={15} allowClear />
</Form.Item>
<Form.Item
label='分类图标'
name='typeImg'
rules={[{ required: true, message: '请上传分类图标' }]}
>
<Uploader
listType={'picture-card'}
fileUpload
fileLength={1}
fileSize={10}
fileType={['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp']}
onChange={(e) => form.setFieldValue('typeImg', e.at(0) ? e.at(0)?.url : undefined)}
defaultFileList={data?.typeImg ? [{ url: data?.typeImg }] : []}
>
<PlusOutlined />
</Uploader>
</Form.Item>
<Form.Item
label='分类描述'
name='description'
rules={[{ required: true, message: '请输入分类描述' }]}
>
<Input placeholder='请输入分类名称' maxLength={25} allowClear />
</Form.Item>
</Form>
</Modal>
);
};
export default AddEditModalView;
src/pages/categoryManage/serviceCategoryList/index_old.tsx 0 → 100644
import { Button, Table } from 'antd';
import { ArrowDownOutlined, ArrowUpOutlined, PlusOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
import AddOrEditModal from './components/addOrEditModal';
import { useState } from 'react';
const ServiceCategoryList = () => {
const tableColumns: ColumnsType<any> = [
{
title: '分类名称',
align: 'center',
},
{
title: '图片',
align: 'center',
},
{
title: '描述',
align: 'center',
},
{
title: '业务案例图片',
align: 'center',
},
{
title: '业务案例视频',
align: 'center',
},
{
title: '创建时间',
align: 'center',
},
{
title: '操作',
align: 'center',
render: () => (
<>
<Button type='link'>新增子分类</Button>
<Button type='link'>编辑</Button>
<Button type='link'>删除</Button>
</>
),
},
];
// const [tableData, setTableData] = useState<any>([{ id: 1 }]);
const [addOrEditModalShow, setAddOrEditModalShow] = useState<boolean>(false);
//新增分类弹窗
const addOrEditModalClick = () => {
setAddOrEditModalShow(true);
};
const addOrEditModalOk = () => {
setAddOrEditModalShow(false);
};
const addOrEditModalCancel = () => {
setAddOrEditModalShow(false);
};
return (
<div className='service-category-list'>
<div className='list-operate' style={{ marginBottom: '10px' }}>
<Button
type='primary'
icon={<PlusOutlined />}
style={{ marginRight: '10px' }}
onClick={addOrEditModalClick}
>
新增分类
</Button>
<Button icon={<ArrowUpOutlined />} style={{ marginRight: '10px' }} type='primary'></Button>
<Button icon={<ArrowDownOutlined />} type='primary'></Button>
</div>
<Table columns={tableColumns} bordered rowKey='id' />
<AddOrEditModal
open={addOrEditModalShow}
onOk={addOrEditModalOk}
onCancel={addOrEditModalCancel}
/>
</div>
);
};
export default ServiceCategoryList;
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论