最难受的事件管理ok

src/components/ZRichTexts/index.module.scss

@@ -11,6 +11,18 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+      height: 32px;
+
+      .formRightZWRR {
+        display: flex;
+      }
+    }
+
+    // 从查看进来
+    .formRightZWLook{
+      .ant-checkbox-wrapper{
+        pointer-events: none;
+      }
     }
 
     .txtBox {
@@ -69,6 +81,7 @@
 
           .zztxtRow1_1 {
             display: flex;
+            align-items: center;
 
             .zztxtRow1_1_1 {
               font-weight: 700;
@@ -77,7 +90,10 @@
             }
 
             .zztxtRow1_1_2 {
-              width: 550px;
+              display: flex;
+              align-items: center;
+              width: 580px;
+              height: 32px;
             }
 
           }
@@ -103,11 +119,37 @@
           }
         }
       }
-      .zztxtRowErr{
+
+      .zztxtRowErr {
         border-color: #ff4d4f;
       }
     }
 
+    // 从查看进来
+    .txtBoxLook{
+      .button-remove{
+        display: none !important;
+        
+      }
+      .bf-controlbar {
+        pointer-events: auto !important;
+        display: flex;
+        justify-content: flex-end;
+        button{
+          display: none;
+          &:last-child{
+            display: inline-block;
+          }
+        }
+        div{
+          display: none;
+        }
+        .separator-line{
+          display: none;
+        }
+      }
+    }
+
     .noUpThumb {
       position: relative;
       overflow: hidden;

src/components/ZRichTexts/index.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import styles from "./index.module.scss";
 
 // 引入编辑器组件
@@ -63,46 +57,6 @@ function ZRichTexts({ check, dirCode, isLook, myUrl }: Props, ref: any) {
   // 当前上传 图片 视频的索引
   const nowIndexRef = useRef(0);
 
-  const addDomFu = useCallback((index: number) => {
-    setTimeout(() => {
-      const domAll = document.querySelectorAll(".bf-controlbar");
-      const dom = domAll[index];
-
-      const div = document.createElement("div");
-      div.className = "upImgBox";
-      div.innerHTML = "上传图片/视频";
-      div.onclick = () => {
-        myInput.current?.click();
-      };
-      dom.appendChild(div);
-    }, 20);
-  }, []);
-
-  // 为富文本添加 上传图片/视频 的dom
-  useEffect(() => {
-    addDomFu(sectionArr.length - 1);
-    // 新增的富文本 也要初始化数据
-  }, [addDomFu, sectionArr.length]);
-
-  // useEffect(() => {
-  //   const controlbarDom = document.querySelectorAll(".txtBox .bf-controlbar ");
-  //   const contentDom = document.querySelectorAll(".txtBox .bf-content ");
-  //   if (controlbarDom) {
-  //     controlbarDom.forEach((v: any) => {
-  //       v.style.display = isLook ? "none" : "block";
-  //     });
-  //     contentDom.forEach((v: any) => {
-  //       v.style.height = isLook ? "100%" : "";
-  //     });
-  //   }
-  // }, [isLook]);
-
-  // 编辑器文本
-  // const [editorValue, setEditorValue] = useState<any[]>(
-  //   // 初始内容
-  //   [BraftEditor.createEditorState("")]
-  // );
-
   // 判断 富文本是否为空
   const isTxtFlag = useMemo(() => {
     let flag = false;
@@ -135,7 +89,7 @@ function ZRichTexts({ check, dirCode, isLook, myUrl }: Props, ref: any) {
 
   const myInput = useRef<HTMLInputElement>(null);
 
-  // 上传图片
+  // 上传图片、视频
   const handeUpPhoto = useCallback(
     async (e: React.ChangeEvent<HTMLInputElement>) => {
       if (e.target.files) {
@@ -149,18 +103,19 @@ function ZRichTexts({ check, dirCode, isLook, myUrl }: Props, ref: any) {
 
         const isVideoFlag = filesInfo.name.endsWith(".mp4");
 
+        if (isVideoFlag) {
+          // 上传视频
+          size = 500;
+          txt = "视频只支持mp4格式!";
+          txt2 = "视频最大支持500M!";
+        }
+
         // 校验格式
         if (!type.includes(filesInfo.type)) {
           e.target.value = "";
-          if (isVideoFlag) {
-            // 上传视频
-            size = 500;
-            txt = "视频只支持mp4格式!";
-            txt2 = "视频最大支持500M!";
-          }
-
           return MessageFu.warning(txt);
         }
+
         // 校验大小
         if (filesInfo.size > size * 1024 * 1024) {
           e.target.value = "";
@@ -323,7 +278,9 @@ function ZRichTexts({ check, dirCode, isLook, myUrl }: Props, ref: any) {
         onChange={(e) => handeUpPhoto(e)}
       />
 
-      <div className="formRightZW">
+      <div
+        className={classNames("formRightZW", isLook ? "formRightZWLook" : "")}
+      >
         <Checkbox
           checked={isSection}
           onChange={(e) => setIsSection(e.target.checked)}
@@ -332,22 +289,35 @@ function ZRichTexts({ check, dirCode, isLook, myUrl }: Props, ref: any) {
         </Checkbox>
 
         {isSection ? (
-          <Button type="primary" onClick={addSectionFu}>
+          <Button hidden={isLook} type="primary" onClick={addSectionFu}>
             新增章节
           </Button>
         ) : (
-          <ZupAudio
-            fileInfo={sectionArr[0].fileInfo}
-            upDataFu={(info) => upSectionFu(info, 0)}
-            delFu={() => delSectionFu(0)}
-            dirCode={dirCode}
-            myUrl="cms/event/upload"
-            isLook={isLook}
-          />
+          <div className="formRightZWRR">
+            <ZupAudio
+              fileInfo={sectionArr[0].fileInfo}
+              upDataFu={(info) => upSectionFu(info, 0)}
+              delFu={() => delSectionFu(0)}
+              dirCode={dirCode}
+              myUrl="cms/event/upload"
+              isLook={isLook}
+            />
+
+            <div hidden={isLook} style={{ marginLeft: 20 }}>
+              <Button
+                onClick={() => {
+                  nowIndexRef.current = 0;
+                  myInput.current?.click();
+                }}
+              >
+                上传图片/视频
+              </Button>
+            </div>
+          </div>
         )}
       </div>
 
-      <div className="txtBox">
+      <div className={classNames("txtBox", isLook ? "txtBoxLook" : "")}>
         {sectionArr.map((item, index) => (
           <div
             className={classNames(
@@ -356,7 +326,6 @@ function ZRichTexts({ check, dirCode, isLook, myUrl }: Props, ref: any) {
             )}
             key={item.id}
             hidden={!isSection && index > 0}
-            onMouseOver={() => (nowIndexRef.current = index)}
           >
             {/* 顶部 */}
             <div className="zztxtRow1" hidden={!isSection && index === 0}>
@@ -365,17 +334,28 @@ function ZRichTexts({ check, dirCode, isLook, myUrl }: Props, ref: any) {
                 <div className="zztxtRow1_1_2">
                   标题：
                   <Input
+                    readOnly={isLook}
                     value={item.name}
                     placeholder="请输入内容"
                     maxLength={30}
                     showCount
-                    style={{ width: 500 }}
+                    style={{ width: 400 }}
                     onChange={(e) => {
                       const arr = [...sectionArr];
                       arr[index].name = e.target.value.replace(/\s+/g, "");
                       setSectionArr(arr);
                     }}
                   />
+                  &emsp;
+                  <Button
+                    hidden={isLook}
+                    onClick={() => {
+                      nowIndexRef.current = index;
+                      myInput.current?.click();
+                    }}
+                  >
+                    上传图片/视频
+                  </Button>
                 </div>
               </div>
               <div className="zztxtRow1_2">
@@ -389,6 +369,7 @@ function ZRichTexts({ check, dirCode, isLook, myUrl }: Props, ref: any) {
                 />
                 &emsp;
                 <div
+                  hidden={isLook}
                   className={classNames(
                     "zztxtRow1_2Icon",
                     index === 0 ? "zztxtRow1_2IconNo" : ""
@@ -399,6 +380,7 @@ function ZRichTexts({ check, dirCode, isLook, myUrl }: Props, ref: any) {
                 </div>
                 &emsp;
                 <div
+                  hidden={isLook}
                   className={classNames(
                     "zztxtRow1_2Icon",
                     index === sectionArr.length - 1 ? "zztxtRow1_2IconNo" : ""
@@ -408,11 +390,13 @@ function ZRichTexts({ check, dirCode, isLook, myUrl }: Props, ref: any) {
                   <ArrowDownOutlined title="下移" />
                 </div>
                 &emsp;
-                <MyPopconfirm
-                  txtK="删除"
-                  onConfirm={() => delSectionAllFu(item.id)}
-                  Dom={<DeleteOutlined title="删除" className="ZTbox2X" />}
-                />
+                {isLook ? null : (
+                  <MyPopconfirm
+                    txtK="删除"
+                    onConfirm={() => delSectionAllFu(item.id)}
+                    Dom={<DeleteOutlined title="删除" className="ZTbox2X" />}
+                  />
+                )}
               </div>
             </div>
             {/* 主体 */}

src/components/ZupAudio/index.tsx

@@ -14,7 +14,7 @@ export type ZupAudioType = {
 
 type Props = {
   fileInfo: ZupAudioType;
-  upDataFu: (info: ZupAudioType,index:number) => void;
+  upDataFu: (info: ZupAudioType, index: number) => void;
   delFu: (index: number) => void;
   dirCode: string;
   myUrl: string;
@@ -66,7 +66,7 @@ function ZupAudio({
           if (res.code === 0) {
             MessageFu.success("上传成功!");
             // console.log(res);
-            upDataFu(res.data,index);
+            upDataFu(res.data, index);
           }
           fileDomInitialFu();
         } catch (error) {
@@ -81,7 +81,11 @@ function ZupAudio({
   const myInput = useRef<HTMLInputElement>(null);
 
   return (
-    <div className={styles.ZupAudio} id="upInputAudioBox">
+    <div
+      className={styles.ZupAudio}
+      id="upInputAudioBox"
+      hidden={isLook && !fileInfo.filePath}
+    >
       {/* 上传无障碍音频 */}
       <input
         id="upInputAudio"
@@ -102,18 +106,23 @@ function ZupAudio({
               })
             }
           />
-          &nbsp;
-          <MyPopconfirm
-            txtK="删除"
-            onConfirm={() => delFu(index)}
-            Dom={
-              <DeleteOutlined
-                title="删除"
-                className="ZTbox2X"
-                rev={undefined}
+
+          {isLook ? null : (
+            <>
+              &nbsp;
+              <MyPopconfirm
+                txtK="删除"
+                onConfirm={() => delFu(index)}
+                Dom={
+                  <DeleteOutlined
+                    title="删除"
+                    className="ZTbox2X"
+                    rev={undefined}
+                  />
+                }
               />
-            }
-          />
+            </>
+          )}
         </div>
       ) : (
         <div className="ZupAudio1" onClick={() => myInput.current?.click()}>

src/pages/A1event/A1add/index.module.scss

@@ -83,5 +83,22 @@
         }
       }
     }
+
+
+    // 从查看进入
+    .A1eMainLook{
+      .ant-picker{
+        pointer-events: none;
+      }
+      .ant-checkbox-wrapper{
+        pointer-events: none;
+      }
+      .ant-input-number{
+        pointer-events: none;
+      }
+      .ant-select{
+        pointer-events: none;
+      }
+    }
   }
 }

src/pages/A1event/A1add/index.tsx

@@ -18,6 +18,8 @@ import MyPopconfirm from "@/components/MyPopconfirm";
 import ZupAudio, { ZupAudioType } from "@/components/ZupAudio";
 import ZupOne from "@/components/ZupOne";
 import ZRichTexts from "@/components/ZRichTexts";
+import classNames from "classnames";
+
 const { RangePicker } = DatePicker;
 
 type Props = {
@@ -63,11 +65,8 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
           filePath: data.filePath,
         });
       }
-      // 待完善
-      const temp =
-        '{"isSection":true,"txtArr":[{"id":1719837651225,"name":"1213","txt":"<p>123213</p>","fileInfo":{"fileName":"","filePath":""}}]}';
       // 设置富文本
-      ZRichTextRef.current?.ritxtShowFu(JSON.parse(temp));
+      ZRichTextRef.current?.ritxtShowFu(JSON.parse(data.rtf));
 
       const obj = {
         ...data,
@@ -146,12 +145,6 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
 
       if (rtf.flag) return MessageFu.warning("请输入完整正文!");
 
-      // if(rtf) {
-      //   console.log(123,rtf);
-      //   return
-
-      // }
-
       const obj = {
         ...values,
         id: editInfo.id > 0 ? editInfo.id : null,
@@ -164,11 +157,6 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
         filePath: nameAudio.filePath,
       };
 
-      // if (obj) {
-      //   console.log(123, obj);
-      //   return;
-      // }
-
       const res = await A1_APIsave(obj);
 
       if (res.code === 0) {
@@ -191,7 +179,12 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
 
   return (
     <div className={styles.A1add}>
-      <div className="A1eMain">
+      <div
+        className={classNames(
+          "A1eMain",
+          editInfo.txt === "查看" ? "A1eMainLook" : ""
+        )}
+      >
         <Form
           ref={FormBoxRef}
           name="basic"
@@ -209,6 +202,7 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
               getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
             >
               <Input
+                readOnly={editInfo.txt === "查看"}
                 style={{ width: "500px" }}
                 maxLength={50}
                 showCount
@@ -260,7 +254,6 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
             <div className="formRight">
               <ZRichTexts
                 check={fileCheck}
-                // check={true}
                 dirCode={dirCode}
                 isLook={editInfo.txt === "查看"}
                 ref={ZRichTextRef}
@@ -342,12 +335,18 @@ function A1add({ editInfo, closeFu, editTableFu, addTableFu }: Props) {
 
           {/* 确定和取消按钮 */}
           <Form.Item className="A1Ebtn">
-            <Button type="primary" htmlType="submit">
-              提交
-            </Button>
-            <br />
-            <br />
-            <MyPopconfirm txtK="取消" onConfirm={closeFu} />
+            {editInfo.txt === "查看" ? (
+              <Button onClick={closeFu}>返回</Button>
+            ) : (
+              <>
+                <Button type="primary" htmlType="submit">
+                  提交
+                </Button>
+                <br />
+                <br />
+                <MyPopconfirm txtK="取消" onConfirm={closeFu} />
+              </>
+            )}
           </Form.Item>
         </Form>
       </div>

src/utils/storage.ts

@@ -1,7 +1,7 @@
 // ------------------------------------token的本地存储------------------------------------
 
 // 用户 Token 的本地缓存键名，自己定义
-const TOKEN_KEY = "NGSBWG_HT_USER_INFO";
+const TOKEN_KEY = "BJSDBWG_HT_USER_INFO";
 
 /**
  * 从本地缓存中获取 用户 信息