|
@@ -1,12 +1,205 @@
|
|
-import React from "react";
|
|
|
|
|
|
+import React, {
|
|
|
|
+ useCallback,
|
|
|
|
+ useEffect,
|
|
|
|
+ useMemo,
|
|
|
|
+ useRef,
|
|
|
|
+ useState,
|
|
|
|
+} from "react";
|
|
import styles from "./index.module.scss";
|
|
import styles from "./index.module.scss";
|
|
- function A4exhibit() {
|
|
|
|
-
|
|
|
|
|
|
+import { Button, Input, Popconfirm, Table } from "antd";
|
|
|
|
+import { useDispatch, useSelector } from "react-redux";
|
|
|
|
+import { A4_APIdel, A4_APIgetList } from "@/store/action/A4exhibit";
|
|
|
|
+import { RootState } from "@/store";
|
|
|
|
+import { A4tableType } from "@/types";
|
|
|
|
+import ImageLazy from "@/components/ImageLazy";
|
|
|
|
+import { MessageFu } from "@/utils/message";
|
|
|
|
+import A4add from "./A4add";
|
|
|
|
+
|
|
|
|
+function A4exhibit() {
|
|
|
|
+ const dispatch = useDispatch();
|
|
|
|
+
|
|
|
|
+ const [fromData, setFromData] = useState({
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ searchKey: "",
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ const getListFu = useCallback(() => {
|
|
|
|
+ dispatch(A4_APIgetList(fromData));
|
|
|
|
+ }, [dispatch, fromData]);
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ getListFu();
|
|
|
|
+ }, [getListFu]);
|
|
|
|
+
|
|
|
|
+ const [inputKey, setInputKey] = useState(1);
|
|
|
|
+
|
|
|
|
+ // 标题的输入
|
|
|
|
+ const timeRef = useRef(-1);
|
|
|
|
+ const fromKeyChangeFu = useCallback(
|
|
|
|
+ (e: React.ChangeEvent<HTMLInputElement>, key: "searchKey") => {
|
|
|
|
+ clearTimeout(timeRef.current);
|
|
|
|
+ timeRef.current = window.setTimeout(() => {
|
|
|
|
+ setFromData({ ...fromData, [key]: e.target.value, pageNum: 1 });
|
|
|
|
+ }, 500);
|
|
|
|
+ },
|
|
|
|
+ [fromData]
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ // 点击重置
|
|
|
|
+ const resetSelectFu = useCallback(() => {
|
|
|
|
+ setInputKey(Date.now());
|
|
|
|
+ setFromData({
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ searchKey: "",
|
|
|
|
+ });
|
|
|
|
+ }, []);
|
|
|
|
+
|
|
|
|
+ // 页码变化
|
|
|
|
+ const paginationChange = useCallback(
|
|
|
|
+ () => (pageNum: number, pageSize: number) => {
|
|
|
|
+ setFromData({ ...fromData, pageNum, pageSize });
|
|
|
|
+ },
|
|
|
|
+ [fromData]
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ const tableInfo = useSelector(
|
|
|
|
+ (state: RootState) => state.A4exhibit.tableInfo
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ // 点击删除
|
|
|
|
+ const delTableFu = useCallback(
|
|
|
|
+ async (id: number) => {
|
|
|
|
+ const res = await A4_APIdel(id);
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ MessageFu.success("删除成功!");
|
|
|
|
+ getListFu();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ [getListFu]
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ const columns = useMemo(() => {
|
|
|
|
+ return [
|
|
|
|
+ {
|
|
|
|
+ title: "名称",
|
|
|
|
+ dataIndex: "name",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: "封面",
|
|
|
|
+ render: (item: A4tableType) => (
|
|
|
|
+ <div className="tableImgAuto">
|
|
|
|
+ <ImageLazy width={60} height={60} src={item.thumb} />
|
|
|
|
+ </div>
|
|
|
|
+ ),
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: "简介",
|
|
|
|
+ render: (item: A4tableType) =>
|
|
|
|
+ item.description ? (
|
|
|
|
+ item.description.length >= 50 ? (
|
|
|
|
+ <span style={{ cursor: "pointer" }} title={item.description}>
|
|
|
|
+ {item.description.substring(0, 50) + "..."}
|
|
|
|
+ </span>
|
|
|
|
+ ) : (
|
|
|
|
+ item.description
|
|
|
|
+ )
|
|
|
|
+ ) : (
|
|
|
|
+ "(空)"
|
|
|
|
+ ),
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: "发布日期",
|
|
|
|
+ dataIndex: "releaseDate",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: "点赞数",
|
|
|
|
+ dataIndex: "pcs",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: "操作",
|
|
|
|
+ render: (item: A4tableType) => (
|
|
|
|
+ <>
|
|
|
|
+ <Button size="small" type="text" onClick={() => setAddId(item.id)}>
|
|
|
|
+ 编辑
|
|
|
|
+ </Button>
|
|
|
|
+
|
|
|
|
+ <Popconfirm
|
|
|
|
+ title="删除后无法恢复,是否删除?"
|
|
|
|
+ okText="删除"
|
|
|
|
+ cancelText="取消"
|
|
|
|
+ onConfirm={() => delTableFu(item.id)}
|
|
|
|
+ >
|
|
|
|
+ <Button size="small" type="text" danger>
|
|
|
|
+ 删除
|
|
|
|
+ </Button>
|
|
|
|
+ </Popconfirm>
|
|
|
|
+ </>
|
|
|
|
+ ),
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
|
|
+ }, [delTableFu]);
|
|
|
|
+
|
|
|
|
+ // 点击新增和编辑
|
|
|
|
+ const [addId, setAddId] = useState(0);
|
|
|
|
+
|
|
return (
|
|
return (
|
|
<div className={styles.A4exhibit}>
|
|
<div className={styles.A4exhibit}>
|
|
- <h1>A4exhibit</h1>
|
|
|
|
|
|
+ <div className="pageTitle">云展管理</div>
|
|
|
|
+
|
|
|
|
+ {/* 顶部筛选 */}
|
|
|
|
+ <div className="A4top">
|
|
|
|
+ <div>
|
|
|
|
+ <span>搜索项:</span>
|
|
|
|
+ <Input
|
|
|
|
+ key={inputKey}
|
|
|
|
+ maxLength={20}
|
|
|
|
+ style={{ width: 300 }}
|
|
|
|
+ placeholder="请输入名称"
|
|
|
|
+ allowClear
|
|
|
|
+ onChange={(e) => fromKeyChangeFu(e, "searchKey")}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <Button onClick={resetSelectFu}>重置</Button>
|
|
|
|
+   
|
|
|
|
+ <Button type="primary" onClick={() => setAddId(-1)}>
|
|
|
|
+ 新增
|
|
|
|
+ </Button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ {/* 表格主体 */}
|
|
|
|
+ <div className="A4tableBox">
|
|
|
|
+ <Table
|
|
|
|
+ scroll={{ y: 625 }}
|
|
|
|
+ dataSource={tableInfo.list}
|
|
|
|
+ columns={columns}
|
|
|
|
+ rowKey="id"
|
|
|
|
+ pagination={{
|
|
|
|
+ showQuickJumper: true,
|
|
|
|
+ position: ["bottomCenter"],
|
|
|
|
+ showSizeChanger: true,
|
|
|
|
+ current: fromData.pageNum,
|
|
|
|
+ pageSize: fromData.pageSize,
|
|
|
|
+ total: tableInfo.total,
|
|
|
|
+ onChange: paginationChange(),
|
|
|
|
+ }}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ {/* 新增和编辑 */}
|
|
|
|
+ {addId ? (
|
|
|
|
+ <A4add
|
|
|
|
+ addId={addId}
|
|
|
|
+ closeFu={() => setAddId(0)}
|
|
|
|
+ addTableFu={() => resetSelectFu()}
|
|
|
|
+ editTableFu={() => getListFu()}
|
|
|
|
+ />
|
|
|
|
+ ) : null}
|
|
</div>
|
|
</div>
|
|
- )
|
|
|
|
|
|
+ );
|
|
}
|
|
}
|
|
|
|
|
|
const MemoA4exhibit = React.memo(A4exhibit);
|
|
const MemoA4exhibit = React.memo(A4exhibit);
|