fix

src/components/Wangeditor/index.jsx

@@ -7,16 +7,12 @@ import { Editor, Toolbar } from "@wangeditor/editor-for-react";
 
 function MyEditor(props) {
   const {
-    value,
+    value = "",
     onChange = (e) => {
       setHtml(e);
     },
     toolbarConfig = {
-      excludeKeys: [
-
-        "group-image",
-        "group-video",
-      ],
+      excludeKeys: ["group-image", "group-video"],
     },
     editorConfig = {
       placeholder: "请输入内容...",
@@ -25,15 +21,10 @@ function MyEditor(props) {
   } = props;
   const [editor, setEditor] = useState(null); // 存储 editor 实例
   const [html, setHtml] = useState("");
-  console.log(props, "MyEditor");
+ 
   // 模拟 ajax 请求，异步设置 html
   useEffect(() => {
-    if(editor){
-      console.log(editor,editor.getConfig(),editor.getAllMenuKeys(),editor.getMenuConfig('image')) ;
-    }
-   
-
-    setHtml(value);
+    setHtml(value || "");
   }, [value]);
 
   // 及时销毁 editor

src/pages/rotationChart/detail/index.jsx

@@ -0,0 +1,51 @@
+import { savePosts, getPostsDetail, updatePosts } from "@/services/posts";
+import {
+  addBanner,
+  getBannerdById,
+  updataBanner,
+} from "@/services/rotationChart";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { Card, Typography, message, Row, Button, Space } from "antd";
+import { useEffect, useRef, useState } from "react";
+
+const { Title } = Typography;
+export default (props) => {
+  const [searchParams] = useSearchParams();
+  const id = searchParams.get("id");
+  const [data, setData] = useState({});
+  // const [url, setUrl] = useState("");
+  const navigate = useNavigate();
+
+  const formRef = useRef();
+
+  useEffect(() => {
+    if (id) {
+      getBannerdById(id).then((res) => {
+        setData(res);
+        // setUrl(res.filesList[0]?.fileAddr);
+      });
+    }
+  }, [id]);
+
+  return (
+    <Card title={<Button onClick={() => navigate(-1)}> 返回</Button>}>
+      <div dangerouslySetInnerHTML={{ __html: data?.desc }}></div>
+      {data?.type === "1" && data?.image && (
+        <img src={data?.image} alt=""></img>
+      )}
+      {data?.type === "2" && data?.video && (
+        <video src={data?.video} autoPlay={false} controls="controls"></video>
+      )}
+      {/* {url && (
+        <div style={{marginTop:"2em"}}>
+          <a
+            href={`${url}`}
+            download
+          >
+            {url?.substring(url?.lastIndexOf("/") + 1)}
+          </a>
+        </div>
+      )} */}
+    </Card>
+  );
+};

src/pages/rotationChart/edit/index.jsx

@@ -1,7 +1,10 @@
-import UploadImage from '@/components/UploadImage';
-import UploadVideo from '@/components/UploadVideo';
-import UploadFile from '@/components/UploadFile';
-import { addBanner, getBannerdById, updataBanner } from '@/services/rotationChart';
+
+import UploadFile from "@/components/UploadFile";
+import {
+  addBanner,
+  getBannerdById,
+  updataBanner,
+} from "@/services/rotationChart";
 import {
   PageContainer,
   ProForm,
@@ -9,16 +12,17 @@ import {
   ProFormRadio,
   ProFormSelect,
   ProFormTextArea,
-} from '@ant-design/pro-components';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { Card, Col, message, Row, Space, Image } from 'antd';
-import { useEffect, useRef, useState } from 'react';
+} from "@ant-design/pro-components";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { Card, Col, message, Row, Space, Image } from "antd";
+import { useEffect, useRef, useState } from "react";
+import Wangeditor from "@/components/Wangeditor";
 
 export default (props) => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const id = searchParams.get('id');
+  const id = searchParams.get("id");
   const [data, setData] = useState({});
-  const [imgLabel, setImgLabel] = useState('图片');
+  const [imgLabel, setImgLabel] = useState("图片");
   const formRef = useRef();
   const navigate = useNavigate();
 
@@ -36,13 +40,13 @@ export default (props) => {
     if (id) {
       // 修改
       updataBanner(id, { ...values }).then((res) => {
-        message.success('修改成功');
+        message.success("修改成功");
         navigate(-1);
       });
     } else {
       // 新增
       addBanner({ ...values }).then((res) => {
-        message.success('添加成功');
+        message.success("添加成功");
         navigate(-1);
       });
     }
@@ -55,14 +59,14 @@ export default (props) => {
       <Card>
         <ProForm
           formRef={formRef}
-          layout={'horizontal'}
+          layout={"horizontal"}
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 16 }}
           onFinish={onFinish}
-          initialValues={{ type: '1', state: '1' }}
+          initialValues={{ type: "1", state: "1" }}
           submitter={{
             searchConfig: {
-              resetText: '返回',
+              resetText: "返回",
             },
             onReset: () => navigate(-1),
             render: (props, doms) => {
@@ -81,12 +85,14 @@ export default (props) => {
             width="md"
             label="轮播图类型"
             valueEnum={{
-              1: '图片',
-              2: '视频',
+              1: "图片",
+              2: "视频",
             }}
             placeholder="轮播图类型"
-            rules={[{ required: true, message: 'Please select your country!' }]}
-            onChange={({ value }) =>  setImgLabel(value === '1' ? '图片' : '封面')}
+            rules={[{ required: true, message: "Please select your country!" }]}
+            onChange={({ value }) =>
+              setImgLabel(value === "1" ? "图片" : "封面")
+            }
           />
           <ProForm.Item
             width="md"
@@ -97,12 +103,16 @@ export default (props) => {
           >
             <UploadFile
               accept="image/*"
-              preview={src => <div style={{ marginTop: '2em' }}><Image width={200} src={src} /></div>}
+              preview={(src) => (
+                <div style={{ marginTop: "2em" }}>
+                  <Image width={200} src={src} />
+                </div>
+              )}
             />
           </ProForm.Item>
           <ProForm.Item noStyle shouldUpdate>
             {(form) => {
-              return form.getFieldValue('type') == '1' ? null : (
+              return form.getFieldValue("type") == "1" ? null : (
                 <ProForm.Item
                   width="md"
                   name="video"
@@ -112,7 +122,11 @@ export default (props) => {
                 >
                   <UploadFile
                     accept="video/*"
-                    preview={src => <div style={{ marginTop: '6px' }}><video height={360} width={480} src={src} controls /></div>}
+                    preview={(src) => (
+                      <div style={{ marginTop: "6px" }}>
+                        <video height={360} width={480} src={src} controls />
+                      </div>
+                    )}
                   />
                 </ProForm.Item>
               );
@@ -124,17 +138,24 @@ export default (props) => {
             radioType="button"
             options={[
               {
-                label: '上架',
-                value: '1',
+                label: "上架",
+                value: "1",
               },
               {
-                label: '下架',
-                value: '2',
+                label: "下架",
+                value: "2",
               },
             ]}
           />
           <ProFormDigit name="qz" label="权重" width="md" />
-          <ProFormTextArea width="md" name="desc" label="描述" placeholder="请输入描述" />
+          <ProForm.Item
+            name="desc"
+            label="详情"
+            placeholder="请输入详情"
+            // rules={[{ required: true, message: "请输入详情" }]}
+          >
+            <Wangeditor></Wangeditor>
+          </ProForm.Item>
         </ProForm>
       </Card>
     </PageContainer>

src/pages/rotationChart/list/index.jsx

@@ -92,12 +92,23 @@ const RotationChartList = (props) => {
         >
           {record.state === '1' ? '下架' : '上架'}
         </Button>,
+         <Button
+         key={4}
+         style={{ padding: 0 }}
+         type="link"
+         onClick={() => {
+      
+           navigate(`/cms/rotationChart/detail?id=${record.id}`);
+         }}
+       >
+         详情
+       </Button>,
         <Button
           key={2}
           style={{ padding: 0 }}
           type="link"
           onClick={() => {
-            console.log(record, ']]');
+            
             navigate(`/cms/rotationChart/add?id=${record.id}`);
           }}
         >

src/pages/sample/home/index.jsx

@@ -3,7 +3,7 @@ import React, { useState, useRef, useEffect, useMemo } from "react";
 import { getBannerList } from "@/services/rotationChart";
 
 import VideoPlay from "./components/VideoPlay";
-
+import { useNavigate } from "react-router-dom";
 const height = "100%";
 const contentStyle = {
   height,
@@ -12,7 +12,8 @@ const contentStyle = {
 };
 
 export default (props) => {
-  const [height, setHeight] = useState('100%');
+  const navigate = useNavigate();
+  const [height, setHeight] = useState("100%");
   const [current, setCurrent] = useState(0);
   const [mouse, setMouse] = useState(false);
   const [mediaList, setMediaList] = useState([]);
@@ -23,12 +24,15 @@ export default (props) => {
   const isVideoRef = useRef(false);
   const isVideoPlayRef = useRef(false);
 
-  const itemStyle = useMemo(() => ({
-    height,
-    overflow: 'hidden',
-    width: '100%',
-    objectFit: 'contain',
-  }), [height]);
+  const itemStyle = useMemo(
+    () => ({
+      height,
+      overflow: "hidden",
+      width: "100%",
+      objectFit: "contain",
+    }),
+    [height]
+  );
 
   useEffect(() => {
     getBannerList().then((res) => {
@@ -53,7 +57,7 @@ export default (props) => {
     handNext();
 
     const boxHeight = boxRef.current.offsetHeight;
-    setHeight(boxHeight ? `${boxHeight}px` : '100%');
+    setHeight(boxHeight ? `${boxHeight}px` : "100%");
   }, []);
 
   const handNext = () => {
@@ -66,18 +70,23 @@ export default (props) => {
   };
 
   const onMouseEnter = () => {
-   
     mouseRef.current = true;
   };
   const onMouseLeave = () => {
     mouseRef.current = false;
   };
 
+  const onClick = (row) => {
+    if (row.id) {
+      navigate(`/cms/rotationChart/detail?id=${row.id}`);
+    }
+  };
+
   return (
     <div
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      style={{ height, overflow: "hidden", background: '#081A48' }}
+      style={{ height, overflow: "hidden", background: "#081A48" }}
       ref={boxRef}
     >
       <Carousel
@@ -86,20 +95,20 @@ export default (props) => {
           setCurrent(cur);
         }}
       >
-          {mediaList?.map((x, index) => (
-            <div key={index}>
-              { x.type === "image" && <img src={x.url} style={itemStyle}></img> }
-              { x.type === "video" && (
-                <VideoPlay
-                  url={x.url}
-                  isVideoPlayRef={isVideoPlayRef}
-                  index={index}
-                  current={current}
-                  style={itemStyle}
-                />
-              )}
-            </div>
-          ))}
+        {mediaList?.map((x, index) => (
+          <div key={index} onClick={()=>onClick(x)}>
+            {x.type === "image" && <img src={x.url} style={itemStyle}></img>}
+            {x.type === "video" && (
+              <VideoPlay
+                url={x.url}
+                isVideoPlayRef={isVideoPlayRef}
+                index={index}
+                current={current}
+                style={itemStyle}
+              />
+            )}
+          </div>
+        ))}
       </Carousel>
     </div>
   );

src/routes/routes.jsx

@@ -6,38 +6,39 @@ import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
   PieChartOutlined,
-} from '@ant-design/icons';
-import { Navigate } from 'react-router-dom';
-import AuthLayout from '@/layouts/AuthLayout';
-import Container from '@/layouts/Container';
-import Login from '@/pages/login';
-import Page404 from '@/pages/404';
-import Home from '@/pages/sample/home';
-import BasicForm from '@/pages/sample/form';
-import BasicTable from '@/pages/sample/table';
-import GuaranteeTaskList from '@/pages/guaranteeTask';
-import GuaranteeTaskEdit from '@/pages/guaranteeTask/Edit';
-import GuaranteeTaskPrint from '@/pages/guaranteeTask/print';
+} from "@ant-design/icons";
+import { Navigate } from "react-router-dom";
+import AuthLayout from "@/layouts/AuthLayout";
+import Container from "@/layouts/Container";
+import Login from "@/pages/login";
+import Page404 from "@/pages/404";
+import Home from "@/pages/sample/home";
+import BasicForm from "@/pages/sample/form";
+import BasicTable from "@/pages/sample/table";
+import GuaranteeTaskList from "@/pages/guaranteeTask";
+import GuaranteeTaskEdit from "@/pages/guaranteeTask/Edit";
+import GuaranteeTaskPrint from "@/pages/guaranteeTask/print";
 import GuaranteeTaskEvaluate from "@/pages/evaluate";
 import GuaranteeTaskEvaluateList from "@/pages/evaluate/evaluateList";
-import DishList from '@/pages/dish/list';
-import DishEdit from '@/pages/dish/edit';
-import PackageList from '@/pages/package';
-import StockList from '@/pages/stock/list';
-import StockEdit from '@/pages/stock/edit';
-import StockInOut from '@/pages/stock/outAndIn';
-import StockLog from '@/pages/stock/stockLog';
-import StockClassificationList from '@/pages/stockClassification/list';
-import StockClassificationEdit from '@/pages/stockClassification/edit';
-import RotationChartList from '@/pages/rotationChart/list';
-import RotationChartEdit from '@/pages/rotationChart/edit';
-import RotationChartIntroduction from '@/pages/rotationChart/introduction';
-import RotationChartIntroductionEdit from '@/pages/rotationChart/introduction/edit';
-import Roles from '@/pages/roles/index';
-import RegulationList from '@/regulation';
-import RegulationEdit from '@/regulation/edit';
-import UserList from '@/pages/user';
-import UserEdit from '@/pages/user/Edit';
+import DishList from "@/pages/dish/list";
+import DishEdit from "@/pages/dish/edit";
+import PackageList from "@/pages/package";
+import StockList from "@/pages/stock/list";
+import StockEdit from "@/pages/stock/edit";
+import StockInOut from "@/pages/stock/outAndIn";
+import StockLog from "@/pages/stock/stockLog";
+import StockClassificationList from "@/pages/stockClassification/list";
+import StockClassificationEdit from "@/pages/stockClassification/edit";
+import RotationChartList from "@/pages/rotationChart/list";
+import RotationChartEdit from "@/pages/rotationChart/edit";
+import RotationChartIntroduction from "@/pages/rotationChart/introduction";
+import RotationChartIntroductionEdit from "@/pages/rotationChart/introduction/edit";
+import RotationChartDetail from "@/pages/rotationChart/detail";
+import Roles from "@/pages/roles/index";
+import RegulationList from "@/regulation";
+import RegulationEdit from "@/regulation/edit";
+import UserList from "@/pages/user";
+import UserEdit from "@/pages/user/Edit";
 import PurchasePlanList from "@/pages/purchase/plan/list";
 import PurchasePlanEdit from "@/pages/purchase/plan/edit";
 import PurchaseBillEdit from "@/pages/purchase/bill/edit";
@@ -46,9 +47,9 @@ import EmergencyPlanList from "@/pages/cms/emergencyPlan/list";
 import EmergencyPlanEdit from "@/pages/cms/emergencyPlan/edit";
 import EmergencyPlanDetail from "@/pages/cms/emergencyPlan/detail";
 import FilesList from "@/pages/cms/files/list";
-import MessageList from '@/pages/message';
-import MessageDetail from '@/pages/message/detail';
-import StatisCharts from '@/pages/statis/charts';
+import MessageList from "@/pages/message";
+import MessageDetail from "@/pages/message/detail";
+import StatisCharts from "@/pages/statis/charts";
 
 /**
  * meta 用来扩展自定义数据数据
@@ -57,7 +58,7 @@ import StatisCharts from '@/pages/statis/charts';
  *    hideInMenu: 布尔值, 如果为 false, 菜单不会显示
  *    noLayout: 布尔值, 如果为 true, 将不会使用默认布局
  *    noSiderBar: 布尔值, 如果为 true, 将没有左侧菜单栏
- *    noFooter: 布尔值, 如果为 true, 将没有底部 footer 
+ *    noFooter: 布尔值, 如果为 true, 将没有底部 footer
  *    target: 字符串, 如果为 _blank, 将在新窗口打开
  * }
  */
@@ -197,6 +198,14 @@ export const authRoutes = [
           hideInMenu: true,
         },
       },
+      {
+        path: "rotationChart/detail",
+        element: <RotationChartDetail />,
+        meta: {
+          title: "公告详情",
+          hideInMenu: true,
+        },
+      },
       {
         path: "rotationChart/introduction",
         element: <RotationChartIntroduction />,
@@ -213,18 +222,18 @@ export const authRoutes = [
         },
       },
       {
-        path: 'regulation',
+        path: "regulation",
         element: <RegulationList />,
         meta: {
           title: "规章制度",
         },
       },
       {
-        path: 'regulation/add',
+        path: "regulation/add",
         element: <RegulationEdit />,
         meta: {
           hideInMenu: true,
-          title: '规章制度维护',
+          title: "规章制度维护",
         },
       },
       {
@@ -261,10 +270,10 @@ export const authRoutes = [
     ],
   },
   {
-    path: 'static',
+    path: "static",
     element: <StatisCharts />,
     meta: {
-      title: '数据分析',
+      title: "数据分析",
       noSiderBar: true,
       noFooter: true,
     },
@@ -417,7 +426,7 @@ export const authRoutes = [
         meta: {
           title: "操作手册",
         },
-      }
+      },
     ],
   },
 ];
@@ -457,7 +466,7 @@ export const defaultRoutes = [
   },
 ];
 
-export function mergeAuthRoutes (r1, r2) {
+export function mergeAuthRoutes(r1, r2) {
   const r = r1.slice();
   const children = r1[0].children.slice();
   r[0].children = children.concat(r2);
@@ -466,7 +475,7 @@ export function mergeAuthRoutes (r1, r2) {
 
 // 全部路由
 export const routes = mergeAuthRoutes(defaultRoutes, authRoutes);
-function getPath (parent = "/", current = "") {
+function getPath(parent = "/", current = "") {
   if (current.indexOf("/") === 0 || current.indexOf("http") === 0)
     return current;
   return `${parent}/${current}`.replace(/\/\//g, "/");