|
@@ -0,0 +1,356 @@
|
|
|
+import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
|
+import styles from "./index.module.scss";
|
|
|
+import { A1EditInfoType } from "@/pages/A1event/data";
|
|
|
+import { A5topType } from "../data";
|
|
|
+import {
|
|
|
+ Button,
|
|
|
+ DatePicker,
|
|
|
+ Form,
|
|
|
+ FormInstance,
|
|
|
+ Input,
|
|
|
+ InputNumber,
|
|
|
+ Select,
|
|
|
+} from "antd";
|
|
|
+import { A5_APIgetInfo, A5_APIsave } from "@/store/action/A5publish";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import { MessageFu } from "@/utils/message";
|
|
|
+import classNames from "classnames";
|
|
|
+import ZupOne from "@/components/ZupOne";
|
|
|
+import ZRichTexts from "@/components/ZRichTexts";
|
|
|
+import MyPopconfirm from "@/components/MyPopconfirm";
|
|
|
+
|
|
|
+type Props = {
|
|
|
+ topType: A5topType;
|
|
|
+ editInfo: A1EditInfoType;
|
|
|
+ closeFu: () => void;
|
|
|
+ editTableFu: () => void;
|
|
|
+ addTableFu: () => void;
|
|
|
+};
|
|
|
+
|
|
|
+function A5add({ editInfo, topType, closeFu, editTableFu, addTableFu }: Props) {
|
|
|
+ const [dirCode, setDirCode] = useState("");
|
|
|
+
|
|
|
+ // 表单的ref
|
|
|
+ const FormBoxRef = useRef<FormInstance>(null);
|
|
|
+
|
|
|
+ // 封面图的ref
|
|
|
+ const ZupThumbRef = useRef<any>(null);
|
|
|
+
|
|
|
+ // 富文本的ref
|
|
|
+ const ZRichTextRef = useRef<any>(null);
|
|
|
+
|
|
|
+ // pdf的ref
|
|
|
+ const ZupPdfRef = useRef<any>(null);
|
|
|
+
|
|
|
+ // 编辑/查看 进入页面 获取信息
|
|
|
+ const getInfoFu = useCallback(async (id: number) => {
|
|
|
+ const res = await A5_APIgetInfo(id);
|
|
|
+ if (res.code === 0) {
|
|
|
+ const data = res.data;
|
|
|
+
|
|
|
+ setDirCode(data.dirCode);
|
|
|
+
|
|
|
+ // 设置富文本
|
|
|
+ ZRichTextRef.current?.ritxtShowFu(JSON.parse(data.rtf));
|
|
|
+
|
|
|
+ const obj = {
|
|
|
+ ...data,
|
|
|
+ myTime: dayjs(data.datePublish),
|
|
|
+ };
|
|
|
+
|
|
|
+ FormBoxRef.current?.setFieldsValue(obj);
|
|
|
+
|
|
|
+ // 设置封面图
|
|
|
+ ZupThumbRef.current?.setFileComFileFu({
|
|
|
+ fileName: "",
|
|
|
+ filePath: data.thumb,
|
|
|
+ });
|
|
|
+
|
|
|
+ // 设置Pdf
|
|
|
+ ZupPdfRef.current?.setFileComFileFu({
|
|
|
+ fileName: data.fileName,
|
|
|
+ filePath: data.filePath,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 附件 是否 已经点击过确定
|
|
|
+ const [fileCheck, setFileCheck] = useState(false);
|
|
|
+
|
|
|
+ // 没有通过校验
|
|
|
+ const onFinishFailed = useCallback(() => {
|
|
|
+ setFileCheck(true);
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 通过校验点击确定
|
|
|
+ const onFinish = useCallback(
|
|
|
+ async (values: any) => {
|
|
|
+ setFileCheck(true);
|
|
|
+
|
|
|
+ const coverUrl1 = ZupThumbRef.current?.fileComFileResFu();
|
|
|
+ // 没有传 封面图
|
|
|
+ if (!coverUrl1.filePath) return MessageFu.warning("请上传封面图!");
|
|
|
+
|
|
|
+ // 发布日期
|
|
|
+ const datePublish = dayjs(values.myTime).format("YYYY-MM-DD");
|
|
|
+
|
|
|
+ let rtf = { flag: true, val: "" };
|
|
|
+
|
|
|
+ let fileName = "";
|
|
|
+ let filePath = "";
|
|
|
+
|
|
|
+ if (topType === "Magazines") {
|
|
|
+ // 有富文本---富文本校验不通过
|
|
|
+ rtf = ZRichTextRef.current?.fatherBtnOkFu() || { flag: true };
|
|
|
+
|
|
|
+ if (rtf.flag) return MessageFu.warning("请输入完整正文!");
|
|
|
+ } else {
|
|
|
+ // 有pdf附件
|
|
|
+ const ZupPdfRefObj = ZupPdfRef.current?.fileComFileResFu();
|
|
|
+ fileName = ZupPdfRefObj.fileName;
|
|
|
+ filePath = ZupPdfRefObj.filePath;
|
|
|
+ if (!filePath) return MessageFu.warning("请上传pdf附件!");
|
|
|
+ }
|
|
|
+
|
|
|
+ const obj = {
|
|
|
+ ...values,
|
|
|
+ id: editInfo.id > 0 ? editInfo.id : null,
|
|
|
+ datePublish,
|
|
|
+ thumb: coverUrl1.filePath,
|
|
|
+ rtf: JSON.stringify(rtf.val || ""),
|
|
|
+ dirCode,
|
|
|
+ fileName,
|
|
|
+ filePath,
|
|
|
+ type: topType,
|
|
|
+ };
|
|
|
+
|
|
|
+ // if (obj) {
|
|
|
+ // console.log(123, obj);
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+
|
|
|
+ const res = await A5_APIsave(obj);
|
|
|
+
|
|
|
+ if (res.code === 0) {
|
|
|
+ MessageFu.success(`${editInfo.txt}成功!`);
|
|
|
+ editInfo.id > 0 ? editTableFu() : addTableFu();
|
|
|
+ closeFu();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [
|
|
|
+ addTableFu,
|
|
|
+ closeFu,
|
|
|
+ dirCode,
|
|
|
+ editInfo.id,
|
|
|
+ editInfo.txt,
|
|
|
+ editTableFu,
|
|
|
+ topType,
|
|
|
+ ]
|
|
|
+ );
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (editInfo.id > 0) {
|
|
|
+ getInfoFu(editInfo.id);
|
|
|
+ } else {
|
|
|
+ setDirCode(Date.now() + "");
|
|
|
+ FormBoxRef.current?.setFieldsValue({
|
|
|
+ myTime: dayjs(Date.now()),
|
|
|
+ sort: 999,
|
|
|
+ display: 1,
|
|
|
+ year: dayjs().get("year"),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, [editInfo.id, getInfoFu]);
|
|
|
+
|
|
|
+ const [ageSelect, setAgeSelect] = useState<
|
|
|
+ { value: string; label: string }[]
|
|
|
+ >([]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (topType === "Magazines") {
|
|
|
+ // 有分份
|
|
|
+ const arr: { value: string; label: string }[] = [];
|
|
|
+ const nowYear = dayjs().get("year");
|
|
|
+ const num = nowYear - 2010;
|
|
|
+ for (let i = 0; i <= num; i++) {
|
|
|
+ const temp = nowYear - i + "";
|
|
|
+ arr.push({
|
|
|
+ value: temp,
|
|
|
+ label: temp,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ setAgeSelect(arr);
|
|
|
+ }
|
|
|
+ }, [topType]);
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={styles.A5add}>
|
|
|
+ <div
|
|
|
+ className={classNames(
|
|
|
+ "A5eMain",
|
|
|
+ editInfo.txt === "查看" ? "A5eMainLook" : ""
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ <Form
|
|
|
+ ref={FormBoxRef}
|
|
|
+ name="basic"
|
|
|
+ labelCol={{ span: 3 }}
|
|
|
+ onFinish={onFinish}
|
|
|
+ onFinishFailed={onFinishFailed}
|
|
|
+ autoComplete="off"
|
|
|
+ scrollToFirstError
|
|
|
+ >
|
|
|
+ <Form.Item
|
|
|
+ label="标题"
|
|
|
+ name="name"
|
|
|
+ rules={[{ required: true, message: "请输入标题!" }]}
|
|
|
+ // getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
|
|
|
+ getValueFromEvent={(e) => e.target.value.trim()}
|
|
|
+ >
|
|
|
+ <Input
|
|
|
+ readOnly={editInfo.txt === "查看"}
|
|
|
+ maxLength={50}
|
|
|
+ showCount
|
|
|
+ placeholder="请输入内容"
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ {topType === "Magazines" ? (
|
|
|
+ <Form.Item
|
|
|
+ label="年份"
|
|
|
+ name="year"
|
|
|
+ rules={[{ required: true, message: "请选择年份!" }]}
|
|
|
+ >
|
|
|
+ <Select
|
|
|
+ placeholder="请选择年份"
|
|
|
+ style={{ width: 200 }}
|
|
|
+ options={ageSelect}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ ) : null}
|
|
|
+
|
|
|
+ {/* 封面 */}
|
|
|
+ <div className="formRow">
|
|
|
+ <div className="formLeft">
|
|
|
+ <span>* </span>
|
|
|
+ 封面:
|
|
|
+ </div>
|
|
|
+ <div className="formRight">
|
|
|
+ <ZupOne
|
|
|
+ ref={ZupThumbRef}
|
|
|
+ isLook={editInfo.txt === "查看"}
|
|
|
+ fileCheck={fileCheck}
|
|
|
+ size={5}
|
|
|
+ dirCode={dirCode}
|
|
|
+ myUrl="cms/publish/upload"
|
|
|
+ format={["image/jpeg", "image/png"]}
|
|
|
+ formatTxt="png、jpg和jpeg"
|
|
|
+ checkTxt="请上传封面图!"
|
|
|
+ upTxt="最多1张"
|
|
|
+ myType="thumb"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {editInfo.txt === "查看" ? <br /> : null}
|
|
|
+
|
|
|
+ <div className="formRow">
|
|
|
+ <div className="formLeft">
|
|
|
+ <span>* </span>
|
|
|
+ {topType === "Magazines" ? "正文" : "附件"}:
|
|
|
+ </div>
|
|
|
+ <div className="formRight">
|
|
|
+ {topType === "Magazines" ? (
|
|
|
+ <ZRichTexts
|
|
|
+ check={fileCheck}
|
|
|
+ dirCode={dirCode}
|
|
|
+ isLook={editInfo.txt === "查看"}
|
|
|
+ ref={ZRichTextRef}
|
|
|
+ myUrl="cms/publish/upload"
|
|
|
+ isOne={true}
|
|
|
+ upAudioBtnNone={true}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <ZupOne
|
|
|
+ ref={ZupPdfRef}
|
|
|
+ isLook={editInfo.txt === "查看"}
|
|
|
+ fileCheck={fileCheck}
|
|
|
+ size={10}
|
|
|
+ dirCode={dirCode}
|
|
|
+ myUrl="cms/publish/upload"
|
|
|
+ format={["application/pdf"]}
|
|
|
+ formatTxt="pdf"
|
|
|
+ checkTxt="请上传pdf附件!"
|
|
|
+ upTxt="最多1个"
|
|
|
+ myType="pdf"
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label="发布日期"
|
|
|
+ name="myTime"
|
|
|
+ rules={[{ required: true, message: "请选择发布日期!" }]}
|
|
|
+ >
|
|
|
+ <DatePicker />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <div className="A5fromRow">
|
|
|
+ <Form.Item
|
|
|
+ label="排序值"
|
|
|
+ name="sort"
|
|
|
+ rules={[{ required: true, message: "请输入排序值!" }]}
|
|
|
+ >
|
|
|
+ <InputNumber
|
|
|
+ min={1}
|
|
|
+ max={999}
|
|
|
+ precision={0}
|
|
|
+ placeholder="请输入"
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <div className="A5_6Frow" hidden={editInfo.txt === "查看"}>
|
|
|
+ 请输入1~999的数字。数字越小,排序越靠前。数字相同时,更新发布的内容排在前面
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label="状态"
|
|
|
+ name="display"
|
|
|
+ rules={[{ required: true, message: "请选择状态!" }]}
|
|
|
+ >
|
|
|
+ <Select
|
|
|
+ placeholder="请选择状态"
|
|
|
+ style={{ width: 149 }}
|
|
|
+ options={[
|
|
|
+ { value: 1, label: "发布" },
|
|
|
+ { value: 0, label: "不发布" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ {/* 确定和取消按钮 */}
|
|
|
+ <Form.Item className="A5Ebtn">
|
|
|
+ {editInfo.txt === "查看" ? (
|
|
|
+ <Button onClick={closeFu}>返回</Button>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <Button type="primary" htmlType="submit">
|
|
|
+ 提交
|
|
|
+ </Button>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <MyPopconfirm txtK="取消" onConfirm={closeFu} />
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+const MemoA5add = React.memo(A5add);
|
|
|
+
|
|
|
+export default MemoA5add;
|