功能：服务分类联调

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

+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

+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

+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

+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;