功能：行业新闻联调

src/api/interface/resourceManageType.ts

@@ -3,7 +3,14 @@ import { InterFunction, InterItemFunction, InterListFunction } from '~/api/inter
 //需求列表
 export type listPublishPageType = InterItemFunction<
   { requirementTypeId?: number; keyword?: string },
-  any
+  {
+    id: number;
+    publishName: string;
+    publishPhone: string;
+    requireDescription: string;
+    requirementTypeId: number;
+    requirementTypeName: string;
+  }[]
 >;
 //需求类型列表
 export type requirementsListType = InterFunction<any, { id: number; typeName: string }[]>;
@@ -30,3 +37,55 @@ export type releaseTenderNewsAdd = InterFunction<any, any>;
 export type releaseTenderNewsUpdate = InterFunction<any, any>;
 // 删除招标快讯
 export type releaseTenderNewsDelete = InterFunction<{ id: number }, any>;
+
+//行业新闻-列表
+export type industryNewsListType = InterItemFunction<
+  { newsTitle?: string },
+  {
+    id: number;
+    createTime: string;
+    newsAuthor: string;
+    newsContents: string;
+    newsTitle: string;
+    origin: string;
+    surfaceImg: string;
+  }[]
+>;
+//行业新闻-新增
+export type addIndustryNewsType = InterFunction<
+  {
+    newsAuthor: string;
+    newsContents?: string;
+    newsTitle: string;
+    origin: string;
+    surfaceImg: string;
+  },
+  any
+>;
+//行业新闻-编辑
+export type editIndustryNews = InterFunction<
+  {
+    newsAuthor: string;
+    newsContents?: string;
+    newsTitle: string;
+    origin: string;
+    surfaceImg: string;
+    id?: number;
+  },
+  any
+>;
+//行业新闻-删除
+// export type deleteIndustryNewsType = InterFunction<>;
+//行业新闻-详情
+export type industryNewsDetailType = InterFunction<
+  { id: number },
+  {
+    id: number;
+    createTime: string;
+    newsAuthor: string;
+    newsContents: string;
+    newsTitle: string;
+    origin: string;
+    surfaceImg: string;
+  }
+>;

src/api/modules/resourceManageAPI.ts

@@ -5,6 +5,10 @@ import {
   releaseTenderNewsAdd,
   releaseTenderNewsDelete,
   releaseTenderNewsUpdate,
+  addIndustryNewsType,
+  industryNewsListType,
+  editIndustryNews,
+  industryNewsDetailType,
 } from '~/api/interface/resourceManageType';
 import axios from '../request';
 
@@ -31,4 +35,16 @@ export class ResourceManageAPI {
   // 删除招标快讯
   static releaseTenderNewsDelete: releaseTenderNewsDelete = (params) =>
     axios.delete(`/release/tender/news/${params?.id}`);
+  //  行业新闻-新增
+  static addIndustryNews: addIndustryNewsType = (data) =>
+    axios.post('/release/industry-news/insertIndustryNews', data);
+  //  行业新闻-列表
+  static getIndustryNewsList: industryNewsListType = (data) =>
+    axios.post('/release/industry-news/backgroundListNewsPage', data);
+  //  行业新闻-编辑
+  static editIndustryNews: editIndustryNews = (data) =>
+    axios.post('/release/industry-news/upDateIndustryNews', data);
+  //  行业新闻-详情
+  static getIndustryNewsDetail: industryNewsDetailType = (params) =>
+    axios.get('/release/industry-news/details', { params });
 }

src/pages/resourceManage/industryNews/components/addOrEditNewsModal/index.tsx

-import { FC, useState } from 'react';
-import { Form, Input, Modal, ModalProps } from 'antd';
+import { FC, useEffect, useState } from 'react';
+import { Form, Input, message, Modal, ModalProps } from 'antd';
 import { Uploader } from '~/components/uploader';
 import { UploadOutlined } from '@ant-design/icons';
 import RichText from '~/components/richText';
+import { InterDataType, InterReqType } from '~/api/interface';
+import { addIndustryNewsType, industryNewsListType } from '~/api/interface/resourceManageType';
+import { ResourceManageAPI } from '~/api';
 
-const AddOrEditNewsModal: FC<ModalProps> = ({ open, onCancel }) => {
+//行业新闻返回类型
+type industryNewsType = InterDataType<industryNewsListType>['list'];
+//新增请求类型
+type addNewsParameters = InterReqType<addIndustryNewsType>;
+interface selfProps {
+  handleOk: () => void;
+  onCancel: () => void;
+  currentIndustryNews?: industryNewsType[0];
+}
+
+const AddOrEditNewsModal: FC<ModalProps & selfProps> = ({
+  open,
+  onCancel,
+  handleOk,
+  currentIndustryNews,
+}) => {
+  const [form] = Form.useForm<addNewsParameters>();
   const [richTextValue, setRichTextValue] = useState<string>('');
-  const richTextChange = () => {};
+  //封面图文件
+  const [surfaceImgList, setSurfaceImgList] = useState<
+    {
+      id: number;
+      name: string;
+      uid: number;
+      url: string;
+    }[]
+  >([]);
+  const richTextChange = (html?: string) => {
+    form.setFieldValue('newsContents', html || undefined);
+  };
+  //封面图-上传成功
+  const uploadSuccess = (
+    fileList: {
+      id: number;
+      name: string;
+      uid: number;
+      url: string;
+    }[],
+  ) => {
+    setSurfaceImgList(fileList);
+    form.setFieldValue('surfaceImg', fileList[0].url);
+  };
+  //提交-新增或编辑行业新闻
+  const addOrEditModalOk = () => {
+    form.validateFields().then((value: any) => {
+      ResourceManageAPI[currentIndustryNews ? 'editIndustryNews' : 'addIndustryNews']({
+        ...value,
+        id: currentIndustryNews ? currentIndustryNews.id : undefined,
+      }).then(({ code }) => {
+        if (code === '200') {
+          message.success(currentIndustryNews ? '编辑成功' : '新增成功');
+          handleOk();
+        }
+      });
+    });
+  };
+  const addOrEditModalCancel = () => {
+    form.resetFields();
+    setSurfaceImgList([]);
+    setRichTextValue('');
+    onCancel();
+  };
+  useEffect(() => {
+    if (currentIndustryNews) {
+      form.setFieldsValue({
+        newsTitle: currentIndustryNews.newsTitle,
+        origin: currentIndustryNews.origin,
+        newsAuthor: currentIndustryNews.newsAuthor,
+        surfaceImg: currentIndustryNews.surfaceImg,
+        newsContents: currentIndustryNews.newsContents || undefined,
+      });
+      setSurfaceImgList([
+        {
+          id: Math.random(),
+          name: 'surfaceImg',
+          uid: Math.random(),
+          url: currentIndustryNews.surfaceImg,
+        },
+      ]);
+      setRichTextValue(currentIndustryNews.newsContents || '');
+    }
+  }, [currentIndustryNews]);
   return (
-    <Modal open={open} onCancel={onCancel} title='新建' width={800}>
-      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
-        <Form.Item label='文章标题'>
-          <Input placeholder='请输入文章标题' />
+    <Modal
+      open={open}
+      onCancel={addOrEditModalCancel}
+      onOk={addOrEditModalOk}
+      title={currentIndustryNews ? '编辑' : '新建'}
+      width={800}
+    >
+      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} form={form}>
+        <Form.Item
+          label='文章标题'
+          name='newsTitle'
+          rules={[{ required: true, message: '请输入文章标题' }]}
+        >
+          <Input placeholder='请输入文章标题' maxLength={30} />
         </Form.Item>
-        <Form.Item label='文章来源'>
-          <Input placeholder='请输入文章来源' />
+        <Form.Item
+          label='文章来源'
+          name='origin'
+          rules={[{ required: true, message: '请输入文章来源' }]}
+        >
+          <Input placeholder='请输入文章来源' maxLength={30} />
         </Form.Item>
-        <Form.Item label='作者'>
-          <Input placeholder='请输入文章作者' />
+        <Form.Item
+          label='作者'
+          name='newsAuthor'
+          rules={[{ required: true, message: '请输入文章作者' }]}
+        >
+          <Input placeholder='请输入文章作者' maxLength={30} />
         </Form.Item>
-        <Form.Item label='封面图'>
-          <Uploader fileUpload listType='picture-card'>
+        <Form.Item
+          label='封面图'
+          name='surfaceImg'
+          rules={[{ required: true, message: '请上传封面图' }]}
+        >
+          <Uploader
+            fileUpload
+            listType='picture-card'
+            onChange={uploadSuccess}
+            defaultFileList={surfaceImgList}
+            fileType={['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp']}
+          >
             <UploadOutlined />
           </Uploader>
         </Form.Item>
-        <Form.Item label='主题内容'>
+        <Form.Item label='主题内容' name='newsContents'>
           <RichText onChange={richTextChange} value={richTextValue} />
         </Form.Item>
       </Form>
     </Modal>
   );
 };
+
 export default AddOrEditNewsModal;

src/pages/resourceManage/industryNews/components/previewNewsModal/index.scss

+.industry-news-detail{
+  width: 600px;
+  margin: 0 auto;
+  &-title{
+    font-weight: 500;
+    font-size: 18px;
+    color: #000;
+    text-align: center;
+    line-height: 50px;
+  }
+  &-img{
+    text-align: center;
+  }
+  &-content{
+    margin-top: 10px;
+  }
+}

src/pages/resourceManage/industryNews/components/previewNewsModal/index.tsx

-import { FC } from 'react';
-import { Modal, ModalProps } from 'antd';
+import { FC, useEffect, useRef, useState } from 'react';
+import { Image, Modal, ModalProps } from 'antd';
+import { InterDataType } from '~/api/interface';
+import { industryNewsDetailType, industryNewsListType } from '~/api/interface/resourceManageType';
+import { ResourceManageAPI } from '~/api';
+import './index.scss';
 
-const PreviewNewsModal: FC<ModalProps> = ({ open, onCancel }) => {
-  return <Modal open={open} onCancel={onCancel} title='预览'></Modal>;
+//行业新闻返回类型
+type industryNewsType = InterDataType<industryNewsListType>['list'];
+//行业新闻详情返回类型
+type detailType = InterDataType<industryNewsDetailType>;
+interface selfProps {
+  currentIndustryNews?: industryNewsType[0];
+}
+
+const PreviewNewsModal: FC<ModalProps & selfProps> = ({ open, onCancel, currentIndustryNews }) => {
+  const newsContentsRef = useRef<any>();
+  //行业新闻详情
+  const [industryNewsDetail, setIndustryNewsDetail] = useState<detailType>();
+  //获取行业详情
+  const getIndustryNewsDetail = (id: number) => {
+    ResourceManageAPI.getIndustryNewsDetail({ id }).then(({ result }) => {
+      setIndustryNewsDetail(result);
+      newsContentsRef.current.innerHTML = result.newsContents;
+    });
+  };
+  useEffect(() => {
+    if (currentIndustryNews) {
+      getIndustryNewsDetail(currentIndustryNews.id);
+    }
+  }, [currentIndustryNews]);
+  return (
+    <Modal open={open} onCancel={onCancel} title='预览' width={800} footer={null}>
+      <div className='industry-news-detail'>
+        <div className='industry-news-detail-title'>{industryNewsDetail?.newsTitle}</div>
+        <div className='industry-news-detail-img'>
+          <Image src={industryNewsDetail?.surfaceImg} height={200} width={600} />
+        </div>
+        <div className='industry-news-detail-content' ref={newsContentsRef}></div>
+      </div>
+    </Modal>
+  );
 };
 export default PreviewNewsModal;

src/pages/resourceManage/industryNews/index.tsx

 import SearchBox, { searchColumns } from '~/components/search-box';
-import { Button, Table } from 'antd';
+import { Button, Image, Modal, Table } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { ColumnsType } from 'antd/es/table';
 import AddOrEditNewsModal from './components/addOrEditNewsModal';
 import PreviewNewsModal from './components/previewNewsModal';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { ResourceManageAPI } from '~/api';
+import { InterDataType, InterReqListType, PaginationProps } from '~/api/interface';
+import { industryNewsListType } from '~/api/interface/resourceManageType';
+
+//行业新闻返回类型
+type industryNewsType = InterDataType<industryNewsListType>['list'];
+//行业新闻列表参数类型
+type industryNewsParameters = InterReqListType<industryNewsListType>;
 
 const IndustryNews = () => {
   const searchColumnsData: searchColumns[] = [
     {
       label: '文章名称',
       type: 'input',
-      name: '',
+      name: 'newsTitle',
       placeholder: '请输入文章名称',
     },
   ];
-  const tableColumns: ColumnsType<any> = [
+  const tableColumns: ColumnsType<industryNewsType[0]> = [
     {
       title: '序号',
       align: 'center',
+      render: (_text: string, _record, index: number) =>
+        (pagination.pageNo - 1) * pagination.pageSize + index + 1,
     },
     {
       title: '文章名称',
       align: 'center',
+      dataIndex: 'newsTitle',
     },
     {
       title: '发布时间',
       align: 'center',
+      dataIndex: 'createTime',
     },
     {
       title: '来源',
       align: 'center',
+      dataIndex: 'origin',
     },
     {
       title: '作者',
       align: 'center',
+      dataIndex: 'newsAuthor',
     },
     {
       title: '封图片',
       align: 'center',
+      dataIndex: 'surfaceImg',
+      render: (text: string) => <Image src={text} width={50} height={50} />,
     },
     {
       title: '操作',
       align: 'center',
-      render: () => (
+      render: (_text: string, record) => (
         <>
-          <Button type='link'>编辑</Button>
-          <Button type='link' onClick={previewClick}>
+          <Button type='link' onClick={() => addOrEditIndustryNewsClick(record)}>
+            编辑
+          </Button>
+          <Button type='link' onClick={() => previewClick(record)}>
             预览
           </Button>
-          <Button type='link' danger>
+          <Button type='link' danger onClick={() => deleteIndustryNews(record)}>
             删除
           </Button>
         </>
       ),
     },
   ];
-  const [tableData, setTableData] = useState<any>([{ id: 1 }]);
+  const [tableData, setTableData] = useState<industryNewsType>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [currentIndustryNews, setCurrentIndustryNews] = useState<industryNewsType[0]>();
   const [addOrEditNewsModalShow, setAddOrEditNewsModalShow] = useState<boolean>(false);
   const [previewNewsModalShow, setPreviewNewsModalShow] = useState<boolean>(false);
+  const [query, setQuery] = useState<industryNewsParameters>();
+  const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
+    pageNo: 1,
+    pageSize: 10,
+    totalCount: 0,
+  });
 
-  const addOrEditIndustryNewsClick = () => {
+  //获取行业新闻-列表
+  const getIndustryNewsList = (query?: industryNewsParameters) => {
+    setLoading(true);
+    ResourceManageAPI.getIndustryNewsList({
+      pageNo: pagination.pageNo,
+      pageSize: pagination.pageSize,
+      ...query,
+    }).then(({ result }) => {
+      setLoading(false);
+      setTableData(result.list || []);
+      pagination.totalCount = result.totalCount;
+      setPagination(pagination);
+    });
+  };
+  //分页
+  const paginationChange = (pageNo: number, pageSize: number) => {
+    pagination.pageNo = pageNo;
+    pagination.pageSize = pageSize;
+    getIndustryNewsList(query);
+  };
+  //筛选
+  const searchSuccessEvent = (value?: industryNewsParameters) => {
+    pagination.pageNo = 1;
+    pagination.pageSize = 10;
+    setQuery(value);
+    getIndustryNewsList(value);
+  };
+  //新增、编辑
+  const addOrEditIndustryNewsClick = (record?: industryNewsType[0]) => {
+    setCurrentIndustryNews(record ? { ...record } : undefined);
     setAddOrEditNewsModalShow(true);
   };
   const addOrEditNewsModalCancel = () => {
     setAddOrEditNewsModalShow(false);
   };
-  const previewClick = () => {
+  const addOrEditNewsModalOk = () => {
+    getIndustryNewsList();
+    setAddOrEditNewsModalShow(false);
+  };
+  //预览
+  const previewClick = (record: industryNewsType[0]) => {
+    setCurrentIndustryNews({ ...record });
     setPreviewNewsModalShow(true);
   };
   const previewNewsModalCancel = () => {
     setPreviewNewsModalShow(false);
   };
+  //删除
+  const deleteIndustryNews = (record: industryNewsType[0]) => {
+    Modal.confirm({
+      title: '行业新闻删除',
+      content: '确认删除该行业新闻?',
+      onOk: () => {},
+    });
+  };
+  useEffect(() => {
+    getIndustryNewsList();
+  }, []);
   return (
     <div className='industry-news'>
       <SearchBox
         search={searchColumnsData}
         child={
-          <Button type='primary' icon={<PlusOutlined />} onClick={addOrEditIndustryNewsClick}>
+          <Button
+            type='primary'
+            icon={<PlusOutlined />}
+            onClick={() => addOrEditIndustryNewsClick()}
+          >
             新建
           </Button>
         }
+        searchData={searchSuccessEvent}
+      />
+      <Table
+        bordered
+        columns={tableColumns}
+        dataSource={tableData}
+        loading={loading}
+        rowKey='id'
+        pagination={{
+          total: pagination.totalCount,
+          pageSize: pagination.pageSize,
+          current: pagination.pageNo,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
+          showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
+        }}
+      />
+      <AddOrEditNewsModal
+        open={addOrEditNewsModalShow}
+        onCancel={addOrEditNewsModalCancel}
+        handleOk={addOrEditNewsModalOk}
+        currentIndustryNews={currentIndustryNews}
+      />
+      <PreviewNewsModal
+        open={previewNewsModalShow}
+        onCancel={previewNewsModalCancel}
+        currentIndustryNews={currentIndustryNews}
       />
-      <Table bordered columns={tableColumns} dataSource={tableData} />
-      <AddOrEditNewsModal open={addOrEditNewsModalShow} onCancel={addOrEditNewsModalCancel} />
-      <PreviewNewsModal open={previewNewsModalShow} onCancel={previewNewsModalCancel} />
     </div>
   );
 };

src/pages/resourceManage/requirementsGathering/index.tsx

@@ -3,10 +3,12 @@ import { useEffect, useState } from 'react';
 import { Button, Table, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { ResourceManageAPI } from '~/api';
-import { InterReqType, PaginationProps } from '~/api/interface';
+import { InterDataType, InterReqType, PaginationProps } from '~/api/interface';
 import './index.scss';
 import { listPublishPageType } from '~/api/interface/resourceManageType';
 
+//需求列表返回类型
+type requirementsType = InterDataType<listPublishPageType>['list'];
 type requirementsParameter = Omit<InterReqType<listPublishPageType>, 'pageSize' | 'pageNo'>;
 
 const RequirementsGathering = () => {
@@ -25,7 +27,7 @@ const RequirementsGathering = () => {
       name: 'keyword',
     },
   ]);
-  const tableColumn: ColumnsType<any> = [
+  const tableColumn: ColumnsType<requirementsType[0]> = [
     {
       title: '需求类型',
       align: 'center',
@@ -58,13 +60,15 @@ const RequirementsGathering = () => {
       align: 'center',
       render: () => (
         <>
-          <Button type='link'>强制删除</Button>
+          <Button type='link' danger>
+            强制删除
+          </Button>
           <Button type='link'>联系客户</Button>
         </>
       ),
     },
   ];
-  const [tableData, setTableData] = useState<any>([{ id: 1 }]);
+  const [tableData, setTableData] = useState<requirementsType>([]);
   const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
     pageNo: 1,
     pageSize: 10,