upp

后台/src/pages/BZ2Qhistory/AddPage.tsx

@@ -0,0 +1,209 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import styles from "./index.module.scss";
+import { Button, Form, FormInstance, Modal, Popconfirm, Select } from "antd";
+import { BZ2AgeType, BZ2ListType } from "@/types";
+import { DatePicker } from "antd";
+import dayjs from "dayjs";
+import { timeObj } from "./time";
+import TextArea from "antd/es/input/TextArea";
+import UpFileOne from "@/components/Z_upFileOne";
+import { BZ2_APIadd } from "@/store/action/BZ2Qhistory";
+import { MessageFu } from "@/utils/message";
+
+type Props = {
+  ageData: BZ2AgeType[];
+  info: BZ2ListType;
+  closeFu: () => void;
+  addFu: () => void;
+};
+
+function AddPage({ info, closeFu, addFu, ageData }: Props) {
+  useEffect(() => {
+    if (info.id > 0) {
+      setCover(info.thumb);
+      const time = info.date.split("-");
+      FormBoxRef.current?.setFieldsValue({ ...info, time1: dayjs(time[0]) });
+
+      if (time[1]) setmyTime1(time[1]);
+      if (time[2]) setmyTime2(time[2]);
+    } else setDirCode(Date.now() + "");
+  }, [info]);
+
+  const [myTime1, setmyTime1] = useState<null | string>(null);
+  const [myTime2, setmyTime2] = useState<null | string>(null);
+
+  // 文件的code码
+  const [dirCode, setDirCode] = useState("");
+
+  // 表单的ref
+  const FormBoxRef = useRef<FormInstance>(null);
+
+  // 封面图
+  const [cover, setCover] = useState("");
+
+  // 文件的校验
+  const [check, setCheck] = useState(false);
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    setCheck(true);
+  }, []);
+
+  const onFinish = useCallback(
+    async (values: any) => {
+      setCheck(true);
+
+      if (!cover) return;
+
+      const year = dayjs(values.time1).format("YYYY");
+
+      let time = year;
+
+      if (myTime1) {
+        time += `-${myTime1}`;
+        if (myTime2) time += `-${myTime2}`;
+      }
+
+      const obj = {
+        ...values,
+        id: info.id > 0 ? info.id : null,
+        date: time,
+        thumb: cover,
+      };
+
+      const res = await BZ2_APIadd(obj);
+
+      if (res.code === 0) {
+        MessageFu.success(info.id > 0 ? "编辑成功!" : "新增成功!");
+        addFu();
+        closeFu();
+      }
+    },
+    [addFu, closeFu, cover, info.id, myTime1, myTime2]
+  );
+
+  return (
+    <Modal
+      wrapClassName={styles.AddPage}
+      destroyOnClose
+      open={true}
+      title={info.id > 0 ? "编辑企业历史" : "新增企业历史"}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <Form
+        scrollToFirstError={true}
+        ref={FormBoxRef}
+        name="basic"
+        labelCol={{ span: 3 }}
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete="off"
+      >
+        <Form.Item
+          label="日期"
+          name="time1"
+          rules={[{ required: true, message: "年份不能为空!" }]}
+        >
+          <DatePicker style={{ width: 100 }} picker="year" />
+        </Form.Item>
+
+        {/* 月 日 自定义*/}
+        <div className="myTimeBox">
+          年&emsp;&emsp;
+          <Select
+            allowClear
+            placeholder="请选择"
+            style={{ width: 100 }}
+            options={timeObj["月"].map((v) => ({ value: v, label: v }))}
+            value={myTime1}
+            onChange={(e) => setmyTime1(e)}
+          />{" "}
+          月&emsp;&emsp;
+          <Select
+            allowClear
+            placeholder="请选择"
+            style={{ width: 100 }}
+            options={timeObj["日"].map((v) => ({ value: v, label: v }))}
+            value={myTime2}
+            onChange={(e) => setmyTime2(e)}
+          />{" "}
+          日&emsp;&emsp;
+        </div>
+
+        <Form.Item
+          label="所属专题"
+          name="ageDictId"
+          rules={[{ required: true, message: "请选择所属专题!" }]}
+        >
+          <Select
+            placeholder="请选择"
+            style={{ width: 200 }}
+            options={ageData.map((v) => ({ value: v.id, label: v.name }))}
+          />
+        </Form.Item>
+
+        <Form.Item
+          label="正文"
+          name="content"
+          rules={[
+            { required: true, message: "请输入正文!" },
+            {
+              validator: (rule, value) => {
+                if (value) {
+                  const txt = value.replaceAll(" ", "").replaceAll("\n", "");
+                  return txt === ""
+                    ? Promise.reject("请输入有效字符!")
+                    : Promise.resolve();
+                } else return Promise.resolve();
+              },
+            },
+          ]}
+        >
+          <TextArea placeholder="请输入内容" showCount maxLength={1000} />
+        </Form.Item>
+
+        {/* 封面图 */}
+        <div className="e_row">
+          <div className="e_rowL">
+            <span>* </span>图片：
+          </div>
+          <div className="e_rowR">
+            <UpFileOne
+              myUrl="cms/config/upload"
+              cover={cover}
+              setCover={(val) => setCover(val)}
+              isLook={false}
+              coverCheck={check}
+              size={5}
+              dirCode={dirCode}
+              checkTxt="请上传图片!"
+            />
+          </div>
+        </div>
+
+        {/* 确定和取消按钮 */}
+        <br />
+        <Form.Item wrapperCol={{ offset: 9, span: 16 }} className="closeLook">
+          <Button type="primary" htmlType="submit">
+            提交
+          </Button>
+          &emsp;
+          <Popconfirm
+            title="放弃编辑后，信息将不会保存!"
+            okText="放弃"
+            cancelText="取消"
+            onConfirm={closeFu}
+          >
+            <Button>取消</Button>
+          </Popconfirm>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+
+const MemoAddPage = React.memo(AddPage);
+
+export default MemoAddPage;

后台/src/pages/BZ2Qhistory/AgePage.tsx

@@ -0,0 +1,289 @@
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import styles from "./index.module.scss";
+import { Button, Input, Modal, Popconfirm, Table, Tooltip } from "antd";
+import { BZ2AgeType } from "@/types";
+// 表格拖动排序-----------------
+import { DndProvider, useDrag, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { ExclamationCircleFilled } from "@ant-design/icons";
+import {
+  BZ2_APIaddAge,
+  BZ2_APIageDel,
+  BZ2_APIsort,
+} from "@/store/action/BZ2Qhistory";
+import { MessageFu } from "@/utils/message";
+import classNames from "classnames";
+
+type Props = {
+  data: BZ2AgeType[];
+  closeFu: () => void;
+  addFu: () => void;
+};
+
+function AgePage({ data, closeFu, addFu }: Props) {
+  // 表格拖动排序
+  interface DraggableBodyRowProps
+    extends React.HTMLAttributes<HTMLTableRowElement> {
+    index: number;
+    moveRow: (dragIndex: number, hoverIndex: number) => void;
+  }
+
+  const type = "DraggableBodyRow";
+
+  const DraggableBodyRow = useCallback(
+    ({
+      index,
+      moveRow,
+      className,
+      style,
+      ...restProps
+    }: DraggableBodyRowProps) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const ref = useRef<HTMLTableRowElement>(null);
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const [{ isOver, dropClassName }, drop] = useDrop({
+        accept: type,
+        collect: (monitor) => {
+          const { index: dragIndex } = monitor.getItem() || {};
+          if (dragIndex === index) {
+            return {};
+          }
+          return {
+            isOver: monitor.isOver(),
+            dropClassName:
+              dragIndex < index ? " drop-over-downward" : " drop-over-upward",
+          };
+        },
+        drop: (item: { index: number }) => {
+          if (moveRow) moveRow(item.index, index);
+        },
+      });
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const [, drag] = useDrag({
+        type,
+        item: { index },
+        collect: (monitor) => ({
+          isDragging: monitor.isDragging(),
+        }),
+      });
+      drop(drag(ref));
+
+      return (
+        <tr
+          ref={ref}
+          className={`${className}${isOver ? dropClassName : ""}`}
+          style={{ cursor: "move", ...style }}
+          {...restProps}
+        />
+      );
+    },
+    []
+  );
+
+  const components = {
+    body: {
+      row: DraggableBodyRow,
+    },
+  };
+
+  const moveRow = useCallback(
+    async (dragIndex: number, hoverIndex: number) => {
+      if (dragIndex === hoverIndex) return;
+      // 交互位置-之前的id
+      const beforeId = data[dragIndex].id;
+      const afterId = data[hoverIndex].id;
+      // console.log("交换位置", beforeId, afterId);
+      const res = await BZ2_APIsort(beforeId, afterId);
+
+      if (res.code === 0) addFu();
+    },
+    [addFu, data]
+  );
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res = await BZ2_APIageDel(id);
+      if (res.code === 0) {
+        MessageFu.success("删除成功!");
+        addFu();
+      }
+    },
+    [addFu]
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        width: 100,
+        title: (
+          <div className="moveTit">
+            序号
+            <Tooltip title="按住鼠标可拖动表格调整顺序">
+              <div className="inco" hidden={data.length < 2}>
+                <ExclamationCircleFilled />
+              </div>
+            </Tooltip>
+          </div>
+        ),
+        render: (_1: any, _2: any, index: number) => index + 1,
+      },
+      {
+        title: "专题名称",
+        dataIndex: "name",
+      },
+      {
+        title: "操作",
+        render: (item: BZ2AgeType) => (
+          <>
+            <Button
+              size="small"
+              type="text"
+              onClick={() =>
+                setAddInfo({ name: item.name, id: item.id, oldName: item.name })
+              }
+            >
+              编辑
+            </Button>
+            <Popconfirm
+              title="删除后无法恢复，是否删除?"
+              okText="删除"
+              cancelText="取消"
+              onConfirm={() => delTableFu(item.id)}
+            >
+              <Button size="small" type="text" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </>
+        ),
+      },
+    ];
+  }, [data.length, delTableFu]);
+
+  // 点击新增和编辑
+  const [addInfo, setAddInfo] = useState({ name: "", id: 0, oldName: "" });
+
+  const addNameChange = useCallback(
+    (val: string) => {
+      setAddInfo({
+        id: addInfo.id,
+        oldName: addInfo.oldName,
+        name: val.replace(/\s+/g, ""),
+      });
+    },
+    [addInfo.id, addInfo.oldName]
+  );
+
+  // 点击提交
+  const nameBtnOk = useCallback(async () => {
+    if (addInfo.name === "") return MessageFu.warning("不能为空!");
+
+    const obj = {
+      id: addInfo.id > 0 ? addInfo.id : null,
+      type: "age",
+      name: addInfo.name,
+    };
+
+    const res = await BZ2_APIaddAge(obj);
+
+    if (res.code === 0) {
+      addFu();
+      MessageFu.success(addInfo.id > 0 ? "编辑成功!" : "新增成功!");
+      setAddInfo({ name: "", id: 0, oldName: "" });
+    }
+  }, [addFu, addInfo.id, addInfo.name]);
+
+  return (
+    <Modal
+      wrapClassName={styles.AgePage}
+      destroyOnClose
+      open={true}
+      title="年代专题设置"
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className="AgePageMain">
+        {/* 新增按钮 */}
+        <div className="ageAddBtn">
+          <Button
+            type="primary"
+            onClick={() => {
+              if (data.length >= 10)
+                return MessageFu.warning("最多支持10条数据!");
+              setAddInfo({ name: "", id: -1, oldName: "" });
+            }}
+          >
+            新增
+          </Button>
+        </div>
+
+        {/* 表格主体 */}
+        <div className="tableBox">
+          <DndProvider backend={HTML5Backend}>
+            <Table
+              scroll={{ y: 470 }}
+              columns={columns}
+              dataSource={data}
+              components={components}
+              rowKey="id"
+              pagination={false}
+              onRow={(_, index) => {
+                const attr = {
+                  index,
+                  moveRow,
+                };
+                return attr as React.HTMLAttributes<any>;
+              }}
+            />
+          </DndProvider>
+        </div>
+
+        <div className="ageBtn">
+          <Button onClick={closeFu}>关闭</Button>
+        </div>
+      </div>
+
+      {/* 点击新增从右侧出来的弹窗 */}
+      <div
+        className={classNames(
+          "ageRightBox",
+          addInfo.id ? "ageRightBoxShow" : ""
+        )}
+      >
+        <div className="ageRightBoxmain" hidden={addInfo.id === 0}>
+          <div className="ageRtit">
+            {addInfo.id > 0 ? `编辑 ${addInfo.oldName}` : "新增"}
+          </div>
+          <Input
+            maxLength={20}
+            showCount
+            placeholder="请输入专题名称"
+            value={addInfo.name}
+            onChange={(e) => addNameChange(e.target.value)}
+          />
+
+          <div className="ageRbtn">
+            <Button type="primary" onClick={nameBtnOk}>
+              提交
+            </Button>
+            &emsp;
+            <Popconfirm
+              title="放弃编辑后，信息将不会保存!"
+              okText="放弃"
+              cancelText="取消"
+              onConfirm={() => setAddInfo({ name: "", id: 0, oldName: "" })}
+            >
+              <Button>取消</Button>
+            </Popconfirm>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+const MemoAgePage = React.memo(AgePage);
+
+export default MemoAgePage;

后台/src/pages/BZ2Qhistory/index.module.scss

@@ -1,5 +1,217 @@
-.BZ2Qhistory{
-  :global{
-    
+.BZ2Qhistory {
+
+  :global {
+    .BZ2top {
+      display: flex;
+      align-items: center;
+      background-color: #fff;
+      border-radius: 10px;
+      padding: 20px 15px;
+      position: relative;
+
+      .BZ2topRow {
+        margin-right: 30px;
+      }
+
+      .BZ2topBtn {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        z-index: 10;
+
+      }
+    }
+
+    .tableBox {
+      border-radius: 10px;
+      overflow: hidden;
+      margin-top: 15px;
+      height: calc(100% - 80px);
+      background-color: #fff;
+
+      .ant-table-body {
+        height: 617px;
+        overflow-y: auto !important;
+
+        .ant-table-row {
+          .ant-table-cell {
+            padding: 10px;
+          }
+        }
+      }
+
+    }
+  }
+}
+
+
+// -----------年代专题 弹窗
+.AgePage {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+    }
+
+    .AgePageMain {
+      border-top: 1px solid #999999;
+      padding-top: 15px;
+      width: 100%;
+      position: relative;
+      height: 600px;
+      padding-bottom: 40px;
+
+      .ageAddBtn {
+        position: absolute;
+        z-index: 10;
+        right: 0;
+        top: -40px;
+      }
+
+      .ageBtn {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        text-align: center;
+      }
+
+      .tableBox {
+        border-radius: 10px;
+        overflow: hidden;
+        background-color: #fff;
+
+        .ant-table-body {
+          height: 470px;
+          overflow-y: auto !important;
+
+          .ant-table-row {
+            .ant-table-cell {
+              padding: 10px;
+            }
+          }
+        }
+
+        .moveTit {
+          justify-content: center;
+          position: relative;
+          display: flex;
+
+          .inco {
+            cursor: pointer;
+            margin-left: 10px;
+            font-size: 14px;
+            color: #7e8293;
+          }
+        }
+
+        .ant-table-cell {
+          text-align: center !important;
+        }
+
+      }
+    }
+
+    .ageRightBox {
+      transition: all .3s;
+      width: 50%;
+      height: 50%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: rgba(0, 0, 0, .6);
+      opacity: 0;
+      pointer-events: none;
+      position: absolute;
+      z-index: 10;
+      border-radius: 8px;
+
+      .ageRightBoxmain {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 400px;
+        background-color: #fff;
+        border-radius: 10px;
+        padding: 15px;
+
+        .ageRtit {
+          font-size: 16px;
+          font-weight: 700;
+          margin-bottom: 20px;
+        }
+
+        .ageRbtn {
+          margin-top: 20px;
+          text-align: center;
+          padding-bottom: 20px;
+        }
+      }
+    }
+
+
+
+    .ageRightBoxShow {
+      width: 100%;
+      height: 100%;
+      opacity: 1;
+      pointer-events: auto;
+
+    }
+  }
+}
+
+
+// ------------------新增和编辑的弹窗-------------------
+.AddPage {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+    }
+
+    .ant-form {
+      border-top: 1px solid #999999;
+      padding-top: 15px;
+      position: relative;
+
+      .myTimeBox {
+        position: absolute;
+        z-index: 10;
+        top: 15px;
+        left: 198px;
+      }
+
+      textarea {
+        min-height: 200px !important;
+      }
+
+      .e_row {
+        display: flex;
+
+        .e_rowL {
+          width: 94px;
+          text-align: right;
+
+          &>span {
+            color: #ff4d4f;
+            position: relative;
+            top: 3px;
+          }
+        }
+
+        .e_rowR {
+          width: calc(100% - 94px);
+        }
+
+      }
+    }
   }
 }

后台/src/pages/BZ2Qhistory/index.tsx

@@ -1,12 +1,247 @@
-import React from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import styles from "./index.module.scss";
- function BZ2Qhistory() {
-  
+import { Button, Input, Popconfirm, Select, Table } from "antd";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  BZ2_APIdel,
+  BZ2_APIgetAgeList,
+  BZ2_APIgetList,
+} from "@/store/action/BZ2Qhistory";
+import { RootState } from "@/store";
+import { BZ2ListType } from "@/types";
+import { MessageFu } from "@/utils/message";
+import AgePage from "./AgePage";
+import AddPage from "./AddPage";
+function BZ2Qhistory() {
+  const dispatch = useDispatch();
+
+  const [fromData, setFromData] = useState({
+    ageDictId: 0,
+    pageNum: 1,
+    pageSize: 10,
+    searchKey: "",
+  });
+
+  const [inputKey, setInputKey] = useState(1);
+
+  // 正文的输入
+  const nameTime = useRef(-1);
+  const nameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      clearTimeout(nameTime.current);
+      nameTime.current = window.setTimeout(() => {
+        setFromData({ ...fromData, pageNum: 1, searchKey: e.target.value });
+      }, 500);
+    },
+    [fromData]
+  );
+
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+    setInputKey(Date.now());
+    setFromData({
+      ageDictId: 0,
+      pageNum: 1,
+      pageSize: 10,
+      searchKey: "",
+    });
+  }, []);
+
+  // 获取下拉框
+  const getAgeListFu = useCallback(() => {
+    dispatch(BZ2_APIgetAgeList());
+  }, [dispatch]);
+
+  useEffect(() => {
+    getAgeListFu();
+  }, [getAgeListFu]);
+
+  const { ageList, tableInfo } = useSelector(
+    (state: RootState) => state.BZ2Qhistory
+  );
+
+  // 获取列表
+  const getListFu = useCallback(() => {
+    dispatch(
+      BZ2_APIgetList({
+        ...fromData,
+        ageDictId: fromData.ageDictId ? fromData.ageDictId : null,
+      })
+    );
+  }, [dispatch, fromData]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu]);
+
+  // 页码变化
+  const paginationChange = useCallback(
+    () => (pageNum: number, pageSize: number) => {
+      setFromData({ ...fromData, pageNum, pageSize });
+    },
+    [fromData]
+  );
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res = await BZ2_APIdel(id);
+      if (res.code === 0) {
+        MessageFu.success("删除成功!");
+        getListFu();
+      }
+    },
+    [getListFu]
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "日期",
+        dataIndex: "date",
+      },
+      {
+        title: "所属年代专题",
+        dataIndex: "ageName",
+      },
+      {
+        title: "正文",
+        render: (item: BZ2ListType) =>
+          item.content.length >= 50 ? (
+            <span style={{ cursor: "pointer" }} title={item.content}>
+              {item.content.substring(0, 50) + "..."}
+            </span>
+          ) : (
+            item.content
+          ),
+      },
+      {
+        title: "操作",
+        render: (item: BZ2ListType) => (
+          <>
+            <Button size="small" type="text" onClick={() => setEditInfo(item)}>
+              编辑
+            </Button>
+            <Popconfirm
+              title="删除后无法恢复，是否删除?"
+              okText="删除"
+              cancelText="取消"
+              onConfirm={() => delTableFu(item.id)}
+            >
+              <Button size="small" type="text" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </>
+        ),
+      },
+    ];
+  }, [delTableFu]);
+
+  // 年代专题的弹窗
+  const [ageShow, setAgeShow] = useState(false);
+
+  // 新增和编辑的弹窗
+  const [editInfo, setEditInfo] = useState({ id: 0 } as BZ2ListType);
+
   return (
     <div className={styles.BZ2Qhistory}>
-      <h1>BZ2Qhistory</h1>
+      <div className="pageTitle">企业历史</div>
+
+      <div className="BZ2top">
+        <div className="BZ2topRow">
+          <span>年代专题：</span>
+          <Select
+            placeholder="请选择"
+            style={{ width: 200 }}
+            options={[
+              { value: 0, label: "全部" },
+              ...ageList.map((v) => ({ value: v.id, label: v.name })),
+            ]}
+            value={fromData.ageDictId}
+            onChange={(e) =>
+              setFromData({ ...fromData, pageNum: 1, ageDictId: e })
+            }
+          />
+        </div>
+
+        <div className="BZ2topRow">
+          <span>正文：</span>
+          <Input
+            key={inputKey}
+            maxLength={50}
+            style={{ width: 300 }}
+            placeholder="请输入关键字"
+            allowClear
+            onChange={(e) => nameChange(e)}
+          />
+        </div>
+
+        <div className="BZ2topRow">
+          <Button onClick={resetSelectFu}>重置</Button>
+        </div>
+
+        {/* 右侧按钮 */}
+        <div className="BZ2topBtn">
+          <Button
+            type="primary"
+            onClick={() => setEditInfo({ id: -1 } as BZ2ListType)}
+          >
+            新增
+          </Button>
+          &emsp;&emsp;
+          <Button type="primary" onClick={() => setAgeShow(true)}>
+            年代专题设置
+          </Button>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <div className="tableBox">
+        <Table
+          scroll={{ y: 617 }}
+          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>
+
+      {/* 年代专题的弹窗 */}
+      {ageShow ? (
+        <AgePage
+          data={ageList}
+          closeFu={() => setAgeShow(false)}
+          addFu={() => getAgeListFu()}
+        />
+      ) : null}
+
+      {/* 新增和编辑 */}
+
+      {editInfo.id ? (
+        <AddPage
+          ageData={ageList}
+          info={editInfo}
+          closeFu={() => setEditInfo({ id: 0 } as BZ2ListType)}
+          addFu={() => getListFu()}
+        />
+      ) : null}
     </div>
-  )
+  );
 }
 
 const MemoBZ2Qhistory = React.memo(BZ2Qhistory);

后台/src/pages/BZ2Qhistory/time.ts

@@ -0,0 +1,36 @@
+export const timeObj = {
+  月: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
+  日: [
+    "01",
+    "02",
+    "03",
+    "04",
+    "05",
+    "06",
+    "07",
+    "08",
+    "09",
+    "10",
+    "11",
+    "12",
+    "13",
+    "14",
+    "15",
+    "16",
+    "17",
+    "18",
+    "19",
+    "20",
+    "21",
+    "22",
+    "23",
+    "24",
+    "25",
+    "26",
+    "27",
+    "28",
+    "29",
+    "30",
+    "31",
+  ],
+};

后台/src/store/action/BZ2Qhistory.ts

@@ -0,0 +1,69 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+// -----------------------1111111111------------------------------
+
+/**
+ * BZ2-获取外层列表
+ */
+export const BZ2_APIgetList = (data: any) => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("cms/companyHistory/pageList", data);
+    if (res.code === 0) {
+      const { records, total } = res.data;
+      dispatch({
+        type: "BZ2/getList",
+        payload: { list: records, total: total },
+      });
+    }
+  };
+};
+
+/**
+ * 一级删除
+ */
+export const BZ2_APIdel = (id: number) => {
+  return http.get(`cms/companyHistory/del/${id}`);
+};
+
+/**
+ * 一级新增
+ */
+export const BZ2_APIadd = (data: any) => {
+  return http.post("cms/companyHistory/save", data);
+};
+
+// -----------------------2222222222222------------------------------
+
+/**
+ * BZ2-获取下拉框（里层）列表
+ */
+export const BZ2_APIgetAgeList = () => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.get(`cms/dict/getList?type=age`);
+    if (res.code === 0) {
+      dispatch({ type: "BZ2/getAgeList", payload: res.data });
+    }
+  };
+};
+
+/**
+ * 二级删除
+ */
+export const BZ2_APIageDel = (id: number) => {
+  return http.get(`cms/dict/remove/${id}`);
+};
+
+/**
+ * 新增年代
+ */
+export const BZ2_APIaddAge = (data: any) => {
+  return http.post("cms/dict/save", data);
+};
+
+/**
+ * 年代排序
+ */
+export const BZ2_APIsort = (id1: number, id2: number) => {
+  return http.get(`cms/dict/sort/${id1}/${id2}`);
+};

后台/src/store/reducer/BZ2Qhistory.ts

@@ -0,0 +1,36 @@
+import { BZ2AgeType, BZ2ListType } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  tableInfo: {
+    list: [] as BZ2ListType[],
+    total: 0,
+  },
+  // 下拉框数据
+  ageList: [] as BZ2AgeType[],
+};
+
+// 定义 action 类型
+type Props =
+  | {
+      type: "BZ2/getList";
+      payload: { list: BZ2ListType[]; total: number };
+    }
+  | { type: "BZ2/getAgeList"; payload: BZ2AgeType[] };
+
+// 频道 reducer
+export default function Reducer(state = initState, action: Props) {
+  switch (action.type) {
+    // 获取列表数据
+    case "BZ2/getList":
+      return { ...state, tableInfo: action.payload };
+
+    // 获取下拉框数据
+    case "BZ2/getAgeList":
+      return { ...state, ageList: action.payload };
+
+    default:
+      return state;
+  }
+}

后台/src/store/reducer/index.ts

@@ -12,6 +12,7 @@ import A6Custom from "./A6Custom";
 import A7Project from "./A7Project";
 import B1Plate from "./B1Plate";
 import B2Goods from "./B2Goods";
+import BZ2Qhistory from "./BZ2Qhistory";
 import C0Tripartite from "./C0Tripartite";
 import C1Message from "./C1Message";
 import D1User from "./D1User";
@@ -29,6 +30,7 @@ const rootReducer = combineReducers({
   A7Project,
   B1Plate,
   B2Goods,
+  BZ2Qhistory,
   C0Tripartite,
   C1Message,
   D1User,

后台/src/types/api/BZ2Qhistory.d.ts

@@ -0,0 +1,19 @@
+export type BZ2AgeType ={
+	id: number;
+	name: string;
+	sort: number;
+}
+
+export type BZ2ListType = {
+	ageDictId: number;
+	ageName: string;
+	content: string;
+	createTime: string;
+	creatorName: string;
+	date: string;
+	dirCode: string;
+	fileIds: string;
+	id: number;
+	thumb: string;
+	updateTime: string;
+}

后台/src/types/index.d.ts

@@ -2,6 +2,7 @@ export * from './api/layot'
 export * from './api/A1Plate'
 export * from './api/A2Country'
 export * from './api/B2Goods'
+export * from './api/BZ2Qhistory'
 export * from './api/C0Tripartite'
 export * from './api/D1User'
 export * from './api/D2Log'