|
@@ -0,0 +1,219 @@
|
|
|
+import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
|
+import styles from "./index.module.scss";
|
|
|
+import { A1EditInfoType } from "@/pages/A1event/data";
|
|
|
+import { Button, Form, FormInstance, InputNumber } from "antd";
|
|
|
+import { A6_APIgetInfo, A6_APIsave } from "@/store/action/A6home";
|
|
|
+import { MessageFu } from "@/utils/message";
|
|
|
+import classNames from "classnames";
|
|
|
+import TextArea from "antd/es/input/TextArea";
|
|
|
+import ZupOne from "@/components/ZupOne";
|
|
|
+import MyPopconfirm from "@/components/MyPopconfirm";
|
|
|
+
|
|
|
+type Props = {
|
|
|
+ editInfo: A1EditInfoType;
|
|
|
+ closeFu: () => void;
|
|
|
+ upTableFu: () => void;
|
|
|
+};
|
|
|
+
|
|
|
+function A6add({ editInfo, closeFu, upTableFu }: Props) {
|
|
|
+ // 表单的ref
|
|
|
+ const FormBoxRef = useRef<FormInstance>(null);
|
|
|
+
|
|
|
+ // 封面图图的ref
|
|
|
+ const ZupPcRef = useRef<any>(null);
|
|
|
+ const ZupAppRef = useRef<any>(null);
|
|
|
+
|
|
|
+ // 编辑/查看 进入页面 获取信息
|
|
|
+ const getInfoFu = useCallback(async (id: number) => {
|
|
|
+ const res = await A6_APIgetInfo(id);
|
|
|
+ if (res.code === 0) {
|
|
|
+ const data = res.data;
|
|
|
+
|
|
|
+ FormBoxRef.current?.setFieldsValue(data);
|
|
|
+
|
|
|
+ // 设置封面图
|
|
|
+ ZupPcRef.current?.setFileComFileFu({
|
|
|
+ fileName: "",
|
|
|
+ filePath: data.thumbPc,
|
|
|
+ });
|
|
|
+
|
|
|
+ ZupAppRef.current?.setFileComFileFu({
|
|
|
+ fileName: "",
|
|
|
+ filePath: data.thumbApp,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 附件 是否 已经点击过确定
|
|
|
+ const [fileCheck, setFileCheck] = useState(false);
|
|
|
+
|
|
|
+ // 没有通过校验
|
|
|
+ const onFinishFailed = useCallback(() => {
|
|
|
+ setFileCheck(true);
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 通过校验点击确定
|
|
|
+ const onFinish = useCallback(
|
|
|
+ async (values: any) => {
|
|
|
+ setFileCheck(true);
|
|
|
+
|
|
|
+ const thumbPc = ZupPcRef.current?.fileComFileResFu();
|
|
|
+ // 没有传 封面图
|
|
|
+ if (!thumbPc.filePath) return MessageFu.warning("请上传PC端封面!");
|
|
|
+
|
|
|
+ const thumbApp = ZupAppRef.current?.fileComFileResFu();
|
|
|
+ // 没有传 封面图
|
|
|
+ if (!thumbApp.filePath) return MessageFu.warning("请上传移动端封面!");
|
|
|
+
|
|
|
+ const obj = {
|
|
|
+ ...values,
|
|
|
+ id: editInfo.id > 0 ? editInfo.id : null,
|
|
|
+ thumbPc: thumbPc.filePath,
|
|
|
+ thumbApp: thumbApp.filePath,
|
|
|
+ };
|
|
|
+
|
|
|
+ // if (obj) {
|
|
|
+ // console.log(123, obj);
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+
|
|
|
+ const res = await A6_APIsave(obj);
|
|
|
+
|
|
|
+ if (res.code === 0) {
|
|
|
+ MessageFu.success(`${editInfo.txt}成功!`);
|
|
|
+ upTableFu();
|
|
|
+ closeFu();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [closeFu, editInfo.id, editInfo.txt, upTableFu]
|
|
|
+ );
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (editInfo.id > 0) {
|
|
|
+ getInfoFu(editInfo.id);
|
|
|
+ } else {
|
|
|
+ FormBoxRef.current?.setFieldsValue({
|
|
|
+ sort: 999,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, [editInfo.id, getInfoFu]);
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={styles.A6add}>
|
|
|
+ <div
|
|
|
+ className={classNames(
|
|
|
+ "A6eMain",
|
|
|
+ editInfo.txt === "查看" ? "A6eMainLook" : ""
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ <Form
|
|
|
+ ref={FormBoxRef}
|
|
|
+ name="basic"
|
|
|
+ labelCol={{ span: 3 }}
|
|
|
+ onFinish={onFinish}
|
|
|
+ onFinishFailed={onFinishFailed}
|
|
|
+ autoComplete="off"
|
|
|
+ scrollToFirstError
|
|
|
+ >
|
|
|
+ {/* 封面 */}
|
|
|
+ <div className="formRow">
|
|
|
+ <div className="formLeft">
|
|
|
+ <span>* </span>
|
|
|
+ PC端封面:
|
|
|
+ </div>
|
|
|
+ <div className="formRight">
|
|
|
+ <ZupOne
|
|
|
+ ref={ZupPcRef}
|
|
|
+ isLook={editInfo.txt === "查看"}
|
|
|
+ fileCheck={fileCheck}
|
|
|
+ size={5}
|
|
|
+ dirCode="indexThumbPc"
|
|
|
+ myUrl="cms/index/upload"
|
|
|
+ format={["image/jpeg", "image/png"]}
|
|
|
+ formatTxt="png、jpg和jpeg"
|
|
|
+ checkTxt="请上传PC端封面!"
|
|
|
+ upTxt="最多1张"
|
|
|
+ myType="thumb"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="formRow">
|
|
|
+ <div className="formLeft">
|
|
|
+ <span>* </span>
|
|
|
+ 移动端封面:
|
|
|
+ </div>
|
|
|
+ <div className="formRight">
|
|
|
+ <ZupOne
|
|
|
+ ref={ZupAppRef}
|
|
|
+ isLook={editInfo.txt === "查看"}
|
|
|
+ fileCheck={fileCheck}
|
|
|
+ size={5}
|
|
|
+ dirCode="indexThumbApp"
|
|
|
+ myUrl="cms/index/upload"
|
|
|
+ format={["image/jpeg", "image/png"]}
|
|
|
+ formatTxt="png、jpg和jpeg"
|
|
|
+ checkTxt="请上传移动端封面!"
|
|
|
+ upTxt="最多1张"
|
|
|
+ myType="thumb"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {editInfo.txt === "查看" ? <br /> : null}
|
|
|
+ <Form.Item
|
|
|
+ label="跳转链接"
|
|
|
+ name="link"
|
|
|
+ rules={[{ required: true, message: "请输入跳转链接!" }]}
|
|
|
+ getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
|
|
|
+ >
|
|
|
+ <TextArea
|
|
|
+ readOnly={editInfo.txt === "查看"}
|
|
|
+ maxLength={200}
|
|
|
+ showCount
|
|
|
+ placeholder="请输入内容"
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <div className="A6fromRow">
|
|
|
+ <Form.Item
|
|
|
+ label="排序值"
|
|
|
+ name="sort"
|
|
|
+ rules={[{ required: true, message: "请输入排序值!" }]}
|
|
|
+ >
|
|
|
+ <InputNumber
|
|
|
+ min={1}
|
|
|
+ max={999}
|
|
|
+ precision={0}
|
|
|
+ placeholder="请输入"
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <div className="A6_6Frow" hidden={editInfo.txt === "查看"}>
|
|
|
+ 请输入1~999的数字。数字越小,排序越靠前。数字相同时,更新发布的内容排在前面
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 确定和取消按钮 */}
|
|
|
+ <Form.Item className="A6Ebtn">
|
|
|
+ {editInfo.txt === "查看" ? (
|
|
|
+ <Button onClick={closeFu}>返回</Button>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <Button type="primary" htmlType="submit">
|
|
|
+ 提交
|
|
|
+ </Button>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <MyPopconfirm txtK="取消" onConfirm={closeFu} />
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+const MemoA6add = React.memo(A6add);
|
|
|
+
|
|
|
+export default MemoA6add;
|