upp

src/components/ZRichText/index.module.scss

@@ -1,7 +1,8 @@
 .ZRichText {
+  width: 1000px;
   :global {
     .txtBox {
-      width: 1000px;
+      width: 100%;
       border: 1px solid #ccc;
 
       // 隐藏媒体功能

src/components/ZRichText/index.tsx

@@ -30,9 +30,10 @@ type Props = {
   isLook: boolean; //是否是查看进来
   ref: any; //当前自己的ref，给父组件调用
   myUrl: string; //上传的api地址
+  full?: boolean;
 };
 
-function ZRichText({ check, dirCode, isLook, myUrl }: Props, ref: any) {
+function ZRichText({ check, dirCode, isLook, myUrl, full }: Props, ref: any) {
   // 添加 上传 图片的dom
   useEffect(() => {
     if (!isLook) {
@@ -159,7 +160,10 @@ function ZRichText({ check, dirCode, isLook, myUrl }: Props, ref: any) {
   }));
 
   return (
-    <div className={styles.ZRichText}>
+    <div
+      className={styles.ZRichText}
+      style={{ width: full ? "100%" : "", height: full ? "100%" : "" }}
+    >
       <input
         id="upInput"
         type="file"
@@ -168,7 +172,7 @@ function ZRichText({ check, dirCode, isLook, myUrl }: Props, ref: any) {
         onChange={(e) => handeUpPhoto(e)}
       />
 
-      <div className="txtBox">
+      <div className="txtBox" style={{ height: full ? "100%" : "" }}>
         <BraftEditor
           readOnly={isLook}
           placeholder="请输入内容"

src/pages/A1outline/index.module.scss

@@ -1,11 +1,17 @@
-.A1outline{
+.A1outline {
   background-color: #fff;
   border-radius: 10px;
   padding: 24px;
-  :global{
-    .A1top{
+
+  :global {
+    .A1top {
       text-align: right;
       margin-bottom: 15px;
     }
+
+    .A1main {
+      width: calc(100% - 150px);
+      height: calc(100% - 50px);
+    }
   }
 }

src/pages/A1outline/index.tsx

@@ -1,13 +1,55 @@
-import React from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import { Button } from "antd";
+import { useDispatch, useSelector } from "react-redux";
+import { A1_APIgetInfo } from "@/store/action/A1outline";
+import ZRichText from "@/components/ZRichText";
+import { RootState } from "@/store";
+
 function A1outline() {
+  // 富文本的ref
+  const ZRichTextRef = useRef<any>(null);
+
+  const dispatch = useDispatch();
+
+  const getInfoFu = useCallback(() => {
+    dispatch(A1_APIgetInfo());
+  }, [dispatch]);
+
+  useEffect(() => {
+    getInfoFu();
+  }, [getInfoFu]);
+
+  const text = useSelector((state: RootState) => state.A1outline.data);
+
+  useEffect(() => {
+    ZRichTextRef.current?.ritxtShowFu(text);
+  }, [text]);
+
+  // 是否是查看
+  const [isEdit, setIsEdit] = useState(true);
+
+  // 点击确定
+  const btnOkFu = useCallback(() => {
+    const rtf = ZRichTextRef.current?.fatherBtnOkFu();
+  }, []);
+
   return (
     <div className={styles.A1outline}>
       <div className="pageTitle">概述管理</div>
       <div className="A1top">
         <Button type="primary">编辑</Button>
       </div>
+      <div className="A1main">
+        <ZRichText
+          check={false}
+          dirCode="A1outline"
+          isLook={isEdit}
+          ref={ZRichTextRef}
+          myUrl="cms/intro/upload"
+          full={true}
+        />
+      </div>
     </div>
   );
 }

src/store/action/A1outline.ts

@@ -3,16 +3,11 @@ import { AppDispatch } from "..";
 /**
  * 获取用户管理表格列表
  */
-export const getUserListAPI = (data: string) => {
+export const A1_APIgetInfo = () => {
   return async (dispatch: AppDispatch) => {
-    const res = await http.post("sys/user/list", data);
+    const res = await http.get("cms/intro/detail");
     if (res.code === 0) {
-      const obj = {
-        list: res.data.records,
-        total: res.data.total,
-      };
-
-      dispatch({ type: "Z1/getList", payload: obj });
+      dispatch({ type: "A1/data", payload: res.data.rtf });
     }
   };
-};
+};

src/store/reducer/A1outline.ts

@@ -14,7 +14,7 @@ export default function userReducer(state = initState, action: Props) {
   switch (action.type) {
     // 获取列表数据
     case "A1/data":
-      return { ...state, tableInfo: action.payload };
+      return { ...state, data: action.payload };
 
     default:
       return state;