优化：论坛贴子编辑

src/api/interface/forumManageType.ts

@@ -152,3 +152,12 @@ export type countGambitType = InterFunction<
     unDynamicAuditSum: number;
   }
 >;
+// 动态修改
+export type updateDynamicType = InterFunction<
+  {
+    id: number;
+    description: string;
+    mediaVO: { type: number; url: string }[];
+  },
+  any
+>;

src/api/modules/forumManageAPI.ts

@@ -9,6 +9,7 @@ import {
   hiddenForumType,
   likeUserInfoType,
   listGambitType,
+  updateDynamicType,
   updateGambitType,
 } from '~/api/interface/forumManageType';
 import axios from '~/api/request';
@@ -45,4 +46,8 @@ export class ForumManageAPI {
   // 话题-统计个数
   static getCountGambit: countGambitType = () =>
     axios.get('/release/backstage/forum/getDynamicAuditSum');
+
+  // 动态修改
+  static updateDynamic: updateDynamicType = (data) =>
+    axios.post('/release/dynamic/updateDynamic', data);
 }

src/pages/categoryManage/category/components/addCgyDailog/index.tsx

-import React, { useEffect, useImperativeHandle, useState } from 'react';
-import { Modal, Form, Input, Row, Col, Upload, message, Button } from 'antd';
-import { LoadingOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import { useEffect, useImperativeHandle, useState } from 'react';
+import { Modal, Form, Input, Upload, message, Button } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
 import Cookies from 'js-cookie';
 import { uploadImgURL } from '~/api/request';
 import events from '~/events';
@@ -32,11 +32,12 @@ function Index(props: any) {
   }));
   function onFinish() {}
   function onFinishFailed() {}
-  function getBase64(img: any, callback: Function) {
-    const reader = new FileReader();
-    reader.addEventListener('load', () => callback(reader.result));
-    reader.readAsDataURL(img);
-  }
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  // function getBase64(img: any, callback: Function) {
+  //   const reader = new FileReader();
+  //   reader.addEventListener('load', () => callback(reader.result));
+  //   reader.readAsDataURL(img);
+  // }
   function handleChange(val: any) {
     // console.log("上传图片-->", val);
     if (!['image/jpg', 'image/jpeg', 'image/png'].includes(val.file.type)) {
@@ -69,13 +70,13 @@ function Index(props: any) {
       setFileList(val.fileList);
     }
   }
-  const beforeUpload = (file: any) => {
-    // const isPNG = file.type === 'image/png';
-    // if (!isPNG) {
-    //   message.error(`${file.name}`);
-    // }
-    // return isPNG || Upload.LIST_IGNORE;
-  };
+  // const beforeUpload = (file: any) => {
+  // const isPNG = file.type === 'image/png';
+  // if (!isPNG) {
+  //   message.error(`${file.name}`);
+  // }
+  // return isPNG || Upload.LIST_IGNORE;
+  // };
   // 图片删除
   const deleteImg = () => {
     setImageUrl('');
@@ -127,8 +128,13 @@ function Index(props: any) {
           {imageUrl ? (
             <div className='img-wrap'>
               <div className='img-content'>
-                <img src={imageUrl} className='img' onClick={() => props.imgClick(imageUrl)} />
-                <img src={deletePng} alt='' className='delete-img' onClick={deleteImg} />
+                <img
+                  src={imageUrl}
+                  alt='图片'
+                  className='img'
+                  onClick={() => props.imgClick(imageUrl)}
+                />
+                <img src={deletePng} alt='图片' className='delete-img' onClick={deleteImg} />
               </div>
             </div>
           ) : (
@@ -138,7 +144,7 @@ function Index(props: any) {
               fileList={fileList}
               action={uploadImgURL}
               maxCount={1}
-              beforeUpload={beforeUpload}
+              // beforeUpload={beforeUpload}
               onChange={handleChange}
               headers={headers}
               accept='image/*'

src/pages/forumManage/dynamicList/components/dynamicEditModal/index.tsx

+import React, { useState } from 'react';
+import { Form, Input, message, Modal, ModalProps } from 'antd';
+import { InterDataType } from '~/api/interface';
+import { forumDetailType } from '~/api/interface/forumManageType';
+import { Uploader } from '~/components/uploader';
+import { PlusOutlined } from '@ant-design/icons';
+import { ForumManageAPI } from '~/api';
+
+//论坛详情返回类型
+type DetailType = InterDataType<forumDetailType>;
+// 参数类型
+type PropsType = ModalProps & { detail?: DetailType; onCancel: () => void };
+
+const DynamicEditModal: React.FC<PropsType> = ({ open, onCancel, detail, onOk }) => {
+  // 表单钩子
+  const [form] = Form.useForm();
+  // 图片文件列表
+  const [imgFileList, setImgFileList] = useState<any>([]);
+  // 关闭事件
+  const handleCancel = () => {
+    form.resetFields();
+    onCancel?.();
+  };
+  //确定事件
+  const handleOk = () => {
+    form.validateFields().then(async (values) => {
+      const res = await ForumManageAPI.updateDynamic({
+        id: Number(detail?.id),
+        description: values.description,
+        mediaVO: values.mediaVO,
+      });
+      if (res && res.code === '200') {
+        message.success('编辑成功');
+        onOk?.(values);
+      }
+    });
+  };
+  // 组件挂载
+  React.useEffect(() => {
+    if (!detail?.id) return;
+    form.setFieldsValue({
+      description: detail?.description,
+      mediaVO: detail?.mediaVO,
+    });
+    setImgFileList(
+      detail?.mediaVO?.filter((i) => i.type === 0).map((i, j) => ({ url: i.url, id: j })),
+    );
+  }, [detail]);
+  return (
+    <Modal open={open} title='编辑贴子' width={520} onCancel={handleCancel} onOk={handleOk}>
+      <Form
+        name='basic'
+        labelCol={{ span: 4 }}
+        wrapperCol={{ span: 16 }}
+        autoComplete='off'
+        form={form}
+      >
+        <Form.Item
+          label='详情'
+          name='description'
+          rules={[{ required: true, message: '请输入贴子详情' }]}
+        >
+          <Input.TextArea
+            placeholder='请输入贴子详情'
+            showCount
+            rows={3}
+            maxLength={140}
+            allowClear
+          />
+        </Form.Item>
+        <Form.Item
+          label='图片'
+          name='mediaVO'
+          rules={[{ required: false, message: '请上传贴子图片' }]}
+        >
+          <Uploader
+            listType={'picture-card'}
+            fileUpload
+            fileLength={1}
+            fileSize={10}
+            fileType={['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp']}
+            onChange={(e) => {
+              setImgFileList(e);
+              form.setFieldValue('mediaVO', e?.map((i) => ({ type: 0, url: i.url })));
+            }}
+            defaultFileList={imgFileList}
+          >
+            <PlusOutlined />
+          </Uploader>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default DynamicEditModal;

src/pages/forumManage/dynamicList/index.tsx

@@ -7,6 +7,7 @@ import { ForumManageAPI } from '~/api';
 import { InterDataType, InterListType, InterReqListType, PaginationProps } from '~/api/interface';
 import { countGambitType, forumDetailType, forumListType } from '~/api/interface/forumManageType';
 import './index.scss';
+import DynamicEditModal from '~/pages/forumManage/dynamicList/components/dynamicEditModal';
 
 // 动态审核状态
 const checkStatusList = [
@@ -101,7 +102,7 @@ const DynamicList = () => {
       title: '操作',
       align: 'center',
       fixed: 'right',
-      width: 180,
+      width: 220,
       render: (_text: string, record) => (
         <>
           <Button
@@ -114,6 +115,9 @@ const DynamicList = () => {
           <Button type='link' onClick={() => lookDynamicDetail(record)}>
             详情
           </Button>
+          <Button type='link' onClick={() => editDynamicDetail(record)}>
+            编辑
+          </Button>
           <Button
             type='link'
             onClick={() => deleteForumClick(record)}
@@ -270,6 +274,18 @@ const DynamicList = () => {
       ),
     });
   };
+  // 编辑弹窗是否显示
+  const [editModalShow, setEditModalShow] = useState<boolean>(false);
+  // 编辑贴子
+  const editDynamicDetail = (record: forumType[0]) => {
+    ForumManageAPI.getForumDetail({ dynamicId: record?.id }).then(({ code, result }) => {
+      if (code === '200') {
+        setForumDetail(result);
+        setEditModalShow(true);
+        // console.log('运行到此处 --->', result);
+      }
+    });
+  };
   // 组件挂载
   useEffect(() => {
     getDynamicList();
@@ -318,6 +334,18 @@ const DynamicList = () => {
         onCancel={dynamicDetailModalOnCancel}
         forumDetail={forumDetail}
       />
+      <DynamicEditModal
+        open={editModalShow}
+        detail={forumDetail}
+        onCancel={() => {
+          setEditModalShow(false);
+          paginationChange(pagination.pageNo, pagination.pageSize);
+        }}
+        onOk={() => {
+          setEditModalShow(false);
+          paginationChange(pagination.pageNo, pagination.pageSize);
+        }}
+      />
     </div>
   );
 };