通知公告添加 2000字数限制

src/pages/Container/Notice/Add/index.js

@@ -1,6 +1,6 @@
 import { Connect } from "@cqsjjb/jjb-dva-runtime";
 import { Button, Form, message } from "antd";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Editor from "zy-react-library/components/Editor";
 import FormBuilder from "zy-react-library/components/FormBuilder";
 import Page from "zy-react-library/components/Page";
@@ -27,6 +27,8 @@ const getEditorTextLength = (html = "") => {
 function Add(props) {
   const queryParams = useGetUrlQuery();
   const [form] = Form.useForm();
+  const editorRef = useRef(null);
+  const lastValidContentRef = useRef("");
   const [corpData, setCorpData] = useState([]);
   const [submitting, setSubmitting] = useState(false);
   const contentValue = Form.useWatch("content", form);
@@ -35,6 +37,37 @@ function Add(props) {
   // 判断是否为只读模式
   const isReadOnly = queryParams["readonly"] === "true";
 
+  useEffect(() => {
+    const content = contentValue || "";
+
+    if (getEditorTextLength(content) <= NOTICE_CONTENT_MAX_LENGTH) {
+      lastValidContentRef.current = content;
+    }
+  }, [contentValue]);
+
+  useEffect(() => {
+    let timer = null;
+
+    const setEditorMaxLength = () => {
+      const editor = editorRef.current?.getEditorInstance?.();
+
+      if (editor) {
+        editor.getConfig().maxLength = NOTICE_CONTENT_MAX_LENGTH;
+        return;
+      }
+
+      timer = window.setTimeout(setEditorMaxLength, 100);
+    };
+
+    setEditorMaxLength();
+
+    return () => {
+      if (timer) {
+        window.clearTimeout(timer);
+      }
+    };
+  }, []);
+
   // 当取消勾选分子公司时，清空发布部门ID
   useEffect(() => {
     if (publishScope && !publishScope.includes("2")) {
@@ -145,6 +178,25 @@ function Add(props) {
     }
   };
 
+  const handleContentChange = (value) => {
+    if (isReadOnly) {
+      return;
+    }
+
+    const content = value || "";
+    const nextTextLength = getEditorTextLength(content);
+
+    if (nextTextLength <= NOTICE_CONTENT_MAX_LENGTH) {
+      lastValidContentRef.current = content;
+      form.setFieldValue("content", content);
+      return;
+    }
+
+    const lastValidContent = lastValidContentRef.current;
+    editorRef.current?.setHtml?.(lastValidContent);
+    form.setFieldValue("content", lastValidContent);
+  };
+
   return (
     <Page
       headerTitle={isReadOnly ? "查看" : queryParams["id"] ? "编辑" : "新增"}
@@ -209,6 +261,7 @@ function Add(props) {
                 label="公告内容"
                 labelCol={{ span: 2 }}
                 wrapperCol={{ span: 22 }}
+
                 rules={[
                   { required: true },
                   {
@@ -223,12 +276,9 @@ function Add(props) {
                 ]}
               >
                 <Editor
+                  ref={editorRef}
                   value={contentValue || ""}
-                  onChange={(value) => {
+                  onChange={handleContentChange}
-                    if (!isReadOnly) {
-                      form.setFieldValue("content", value);
-                    }
-                  }}
                   disabled={isReadOnly}
                 />
               </Form.Item>