upp

houtai/src/pages/B2Goods/GoodsAdd/index.module.scss

@@ -188,6 +188,18 @@
         top:0;
         opacity: 1;
       }
+      .myformBox{
+        .laseFormRight{
+          .laseFormRightRow{
+            display: flex;
+            align-items: center;
+          }
+          .laseFormRightTit{
+            font-size: 14px;
+            color: rgb(126, 124, 124);
+          }
+        }
+      }
     }
   }
 }

houtai/src/pages/B2Goods/GoodsAdd/index.tsx

@@ -5,6 +5,7 @@ import {
   Form,
   Input,
   Popconfirm,
+  Radio,
   Select,
   Switch,
 } from "antd";
@@ -37,7 +38,6 @@ import {
 import { baseURL } from "@/utils/http";
 import { FileListType, GoodsTableType } from "@/types";
 
-
 type Props = {
   id: number;
   closeMoalFu: () => void;
@@ -52,6 +52,10 @@ const progressDom: any = document.querySelector("#progress");
 function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
   const dispatch = useDispatch();
 
+  // 后面添加的的知识驿站
+  const [valueZS1, setValueZS1] = useState("");
+  const [valueZS2, setValueZS2] = useState<any>([]);
+
   // 上传附件的信息
   const [fileList, setFileList] = useState({
     model: {} as FileListType,
@@ -71,7 +75,11 @@ function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
     FormBoxRef.current.setFieldsValue(res.data.entity);
     setCover(res.data.entity.thumb);
 
-    setTypeCheck(res.data.entity.type.split(","));
+    if (res.data.entity.type) setTypeCheck(res.data.entity.type.split(","));
+
+    setValueZS1(res.data.entity.tagType);
+    if (res.data.entity.tagCountry)
+      setValueZS2(res.data.entity.tagCountry.split(","));
 
     const data: FileListType[] = res.data.file;
     const obj = {
@@ -342,6 +350,8 @@ function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
         fileIds: fileIds.join(","),
         thumb: cover,
         type: typeCheck.join(","),
+        tagType: valueZS1,
+        tagCountry: valueZS2.join(","),
       } as GoodsTableType;
       const res = await getGoodsSaveAPI(obj);
       if (res.code === 0) {
@@ -361,6 +371,8 @@ function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
       fileList.img,
       id,
       dirCode,
+      valueZS1,
+      valueZS2,
       closeMoalFu,
       editListFu,
       addListFu,
@@ -811,6 +823,42 @@ function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
             />
           </Form.Item>
 
+          <div className="myformBox">
+            <div className="label">知识驿站：</div>
+            <div className="laseFormRight">
+              <div className="laseFormRightRow">
+                <div className="laseFormRightLabel">类别标签：</div>
+                <Radio.Group
+                  onChange={(e) => setValueZS1(e.target.value)}
+                  value={valueZS1}
+                >
+                  <Radio value={"军事"}>军事</Radio>
+                  <Radio value={"历史"}>历史</Radio>
+                  <Radio value={"人物"}>人物</Radio>
+                  <Radio value={"科学"}>科学</Radio>
+                  <Radio value={"教育"}>教育</Radio>
+                  <Radio value={"经济"}>经济</Radio>
+                </Radio.Group>
+              </div>
+              <div className="laseFormRightTit">
+                如需文物关联知识驿站，请至少标注类别标签
+              </div>
+              <br />
+              <div className="laseFormRightRow">
+                <div className="laseFormRightLabel">国家标签：</div>
+                <Checkbox.Group
+                  value={valueZS2}
+                  onChange={(e) => setValueZS2(e)}
+                  options={[
+                    { label: "清朝", value: "清朝", disabled: !valueZS1 },
+                    { label: "美国", value: "美国", disabled: !valueZS1 },
+                    { label: "西方", value: "西方", disabled: !valueZS1 },
+                  ]}
+                />
+              </div>
+            </div>
+          </div>
+
           {/* 确定和取消按钮 */}
           <br />
           <Form.Item wrapperCol={{ offset: 9, span: 16 }}>

houtai/src/pages/B2Goods/index.tsx

@@ -238,7 +238,7 @@ function Goods() {
   const isEnabledClickFu = useCallback(
     async (val: boolean, id: number) => {
       const isDisable = val ? 1 : 0;
-      const res: any = await goodsDisplayAPI(id, isDisable);
+      const res = await goodsDisplayAPI(id, isDisable);
       if (res.code === 0) getList();
     },
     [getList]
@@ -248,7 +248,7 @@ function Goods() {
   const isBarrageFu = useCallback(
     async (val: boolean, id: number) => {
       const isDisable = val ? 1 : 0;
-      const res: any = await goodsBarrageAPI(id, isDisable);
+      const res = await goodsBarrageAPI(id, isDisable);
       if (res.code === 0) getList();
     },
     [getList]
@@ -267,7 +267,7 @@ function Goods() {
   // 点击删除
   const delTableFu = useCallback(
     async (id: number) => {
-      const res: any = await goodsRemoveAPI(id);
+      const res = await goodsRemoveAPI(id);
       if (res.code === 0) {
         MessageFu.success("删除成功!");
         getList();
@@ -278,19 +278,13 @@ function Goods() {
 
   const columns = useMemo(() => {
     return [
-      // {
-      //   width: 80,
-      //   title: "序号",
-      //   render: (text: any, record: any, index: any) =>
-      //     index + 1 + (pageNumRef.current - 1) * pagePageRef.current,
-      // },
       {
         title: "名称",
         dataIndex: "name",
       },
       {
         title: "登记编号",
-        render: (item: any) => (item.num ? item.num : "（空）"),
+        render: (item: GoodsTableType) => (item.num ? item.num : "（空）"),
       },
       {
         title: "类别",
@@ -310,7 +304,7 @@ function Goods() {
       },
       {
         title: "简介",
-        render: (item: any) =>
+        render: (item: GoodsTableType) =>
           item.description ? (
             item.description.length >= 20 ? (
               <span style={{ cursor: "pointer" }} title={item.description}>
@@ -325,16 +319,12 @@ function Goods() {
       },
       {
         title: "封面图",
-        render: (item: any) => (
+        render: (item: GoodsTableType) => (
           <div className="tableImgAuto">
             <ImageLazy width={60} height={60} src={item.thumb!} />
           </div>
         ),
       },
-      // {
-      //   title: "类型",
-      //   render: (item: any) => typeChangeObj[item.type!],
-      // },
       {
         title: "最近编辑时间",
         dataIndex: "updateTime",
@@ -345,7 +335,7 @@ function Goods() {
       },
       {
         title: "展示状态",
-        render: (item: any) => (
+        render: (item: GoodsTableType) => (
           <Switch
             checkedChildren="启用"
             unCheckedChildren="停用"
@@ -356,7 +346,7 @@ function Goods() {
       },
       {
         title: "弹幕留言",
-        render: (item: any) => (
+        render: (item: GoodsTableType) => (
           <Switch
             checkedChildren="启用"
             unCheckedChildren="停用"
@@ -368,7 +358,7 @@ function Goods() {
 
       {
         title: "操作",
-        render: (item: any) => (
+        render: (item: GoodsTableType) => (
           <>
             <Button
               style={{ opacity: item.type.includes("img") ? "1" : "0.5" }}

houtai/src/pages/B3Wall/WallAdd/index.tsx

@@ -15,7 +15,7 @@ import {
 } from "@/store/action/B3Wall";
 type Props = {
   id: number;
-  closeMoalFu: () => void;
+  closeMoalFu: (txt:string) => void;
 };
 
 // 上传附件的进度条
@@ -156,7 +156,7 @@ function WallAdd({ id, closeMoalFu }: Props) {
 
       if (res.code === 0) {
         MessageFu.success(id > 0 ? "编辑成功!" : "新增成功!");
-        closeMoalFu();
+        closeMoalFu(id>0?'编辑':'新增');
       }
     },
     [closeMoalFu, id, imgList, imgNum]
@@ -296,7 +296,7 @@ function WallAdd({ id, closeMoalFu }: Props) {
               title="放弃编辑后，信息将不会保存!"
               okText="放弃"
               cancelText="取消"
-              onConfirm={closeMoalFu}
+              onConfirm={()=>closeMoalFu('取消')}
             >
               <Button>取消</Button>
             </Popconfirm>

houtai/src/pages/B3Wall/WallTable/index.module.scss

@@ -3,7 +3,7 @@
   border-radius: 10px;
   background-color: #fff;
   padding: 20px 15px 0;
-  height: calc(100% - 135px);
+  height: calc(100% - 134px);
 
   :global {
     .titleTxt {
@@ -26,6 +26,11 @@
         height: 560px;
         overflow-y: auto !important;
         overflow-y: overlay !important;
+        .ant-table-row{
+          .ant-table-cell{
+            padding: 8px;
+          }
+        }
       }
     }
 

houtai/src/pages/B3Wall/WallTable/index.tsx

@@ -25,15 +25,27 @@ import {
 import WallLook from "../WallLook";
 
 type Props = {
-  tablePageIdFu: (id: number) => void;
+  tablePageIdFu: (id: number, scrollNum: number) => void;
+  scrollNumInfo: {
+    txt: string;
+    num: number;
+  };
 };
 
-function WallTable({ tablePageIdFu }: Props) {
+function WallTable({ tablePageIdFu, scrollNumInfo }: Props) {
   const dispatch = useDispatch();
 
   useEffect(() => {
+    // 如果是编辑，或者是进新增/编辑页面点击了取消。控制表格滚动到之前的位置
+    if (scrollNumInfo.txt === "取消" || scrollNumInfo.txt === "编辑") {
+      if (scrollNumInfo.num > 0) {
+        const dom: any = document.querySelector("#wallTable .ant-table-body");
+        dom.scrollTop = scrollNumInfo.num;
+      }
+    }
+
     dispatch(getWallTableListAPI());
-  }, [dispatch]);
+  }, [dispatch, scrollNumInfo]);
 
   // 从仓库中获取列表数据
   const results = useSelector((state: RootState) => state.wallReducer.list);
@@ -42,7 +54,10 @@ function WallTable({ tablePageIdFu }: Props) {
     (id: number) => {
       if (id === -1 && results.length >= 20)
         return MessageFu.warning("最多支持上传20个内容！");
-      tablePageIdFu(id);
+
+      // 获取当前表格的滚动位置
+      const dom: any = document.querySelector("#wallTable .ant-table-body");
+      tablePageIdFu(id, dom.scrollTop);
     },
     [results.length, tablePageIdFu]
   );
@@ -228,6 +243,7 @@ function WallTable({ tablePageIdFu }: Props) {
       <div className="table">
         <DndProvider backend={HTML5Backend}>
           <Table
+            id="wallTable"
             scroll={{ y: 560 }}
             columns={columns}
             dataSource={results}

houtai/src/pages/B3Wall/index.tsx

@@ -1,5 +1,5 @@
 import { Button, Radio, Tooltip, DatePicker, Popconfirm } from "antd";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { ExclamationCircleFilled } from "@ant-design/icons";
 import styles from "./index.module.scss";
 import dayjs from "dayjs";
@@ -68,10 +68,22 @@ function Wall() {
   // 点击新增或者编辑
   const [editId, setEditId] = useState(0);
 
-  const tablePageIdFu = useCallback((id: number) => {
+  const scrollRef = useRef({
+    txt: "",
+    num: 0,
+  });
+
+  const tablePageIdFu = useCallback((id: number, scrollNum: number) => {
+    scrollRef.current = { ...scrollRef.current, num: scrollNum };
     setEditId(id);
   }, []);
 
+  // 从新增/编辑页面点击取消或者提交
+  const closeWallAddFu = useCallback((txt: string) => {
+    scrollRef.current = { ...scrollRef.current, txt };
+    setEditId(0);
+  }, []);
+
   return (
     <div className={styles.Wall}>
       <div className="pageTitlt">
@@ -140,10 +152,13 @@ function Wall() {
             )}
           </div>
           {/* 表格相关 */}
-          <WallTable tablePageIdFu={tablePageIdFu} />
+          <WallTable
+            tablePageIdFu={tablePageIdFu}
+            scrollNumInfo={scrollRef.current}
+          />
         </>
       ) : (
-        <WallAdd id={editId} closeMoalFu={() => setEditId(0)} />
+        <WallAdd id={editId} closeMoalFu={closeWallAddFu} />
       )}
     </div>
   );

houtai/src/pages/B4Barrage/BarrageSet/index.css

@@ -0,0 +1,21 @@
+.BarrageSet .ant-modal-close {
+  display: none;
+}
+.BarrageSet .main {
+  border-top: 1px solid #999999;
+  padding-top: 15px;
+  width: 100%;
+}
+.BarrageSet .main .row {
+  display: flex;
+  align-items: center;
+  height: 40px;
+}
+.BarrageSet .main .row .txtTit {
+  padding-left: 20px;
+  font-size: 12px;
+  color: #999999;
+}
+.BarrageSet .button {
+  text-align: center;
+}

houtai/src/pages/B4Barrage/BarrageSet/index.less

@@ -0,0 +1,25 @@
+.BarrageSet {
+  .ant-modal-close {
+    display: none;
+  }
+
+  .main {
+    border-top: 1px solid #999999;
+    padding-top: 15px;
+    width: 100%;
+    .row{
+      display: flex;
+      align-items: center;
+      height: 40px;
+      .txtTit{
+        padding-left: 20px;
+        font-size: 12px;
+        color: #999999;
+      }
+    }
+  }
+
+  .button {
+    text-align: center;
+  }
+}

houtai/src/pages/B4Barrage/BarrageSet/index.tsx

@@ -0,0 +1,65 @@
+import { barrageSetConfigAPI } from "@/store/action/B4Barrage";
+import { MessageFu } from "@/utils/message";
+import { Button, Modal, Switch } from "antd";
+import React, { useCallback, useEffect, useState } from "react";
+import "./index.css";
+
+type Props = {
+  closeMoalFu: () => void;
+  upBarrageFu:()=>void
+  barrageValue: boolean;
+};
+
+function BarrageSet({ closeMoalFu, barrageValue,upBarrageFu }: Props) {
+  const [value, setValue] = useState(false);
+
+  useEffect(() => {
+    setValue(barrageValue);
+  }, [barrageValue]);
+
+  const isEnabledClickFu = useCallback(
+    async (val: boolean) => {
+      const obj = {
+        content: JSON.stringify({ value:val }),
+      };
+      const res = await barrageSetConfigAPI(obj);
+
+      if (res.code === 0) {
+        MessageFu.success("操作成功!");
+        setValue(val)
+        upBarrageFu()
+      }
+    },
+    [upBarrageFu]
+  );
+
+  return (
+    <Modal
+      wrapClassName="BarrageSet"
+      destroyOnClose
+      open={true}
+      title="弹幕功能设置"
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className="main">
+        <div className="row">
+          <div className="tit">开关：</div>
+          <Switch checked={value} onChange={(val) => isEnabledClickFu(val)} />
+          <div className="txtTit">
+            关闭后，将屏蔽场馆所有弹幕，并禁止发布弹幕留言
+          </div>
+        </div>
+        <br />
+        <div className="button">
+          <Button onClick={closeMoalFu}>关闭</Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+const MemoBarrageSet = React.memo(BarrageSet);
+
+export default MemoBarrageSet;

houtai/src/pages/B4Barrage/index.module.scss

@@ -13,11 +13,32 @@
         .searchRow {
           margin-right: 30px;
         }
-        .searchBtn{
+
+        .searchBtn {
           margin-left: 166px;
         }
       }
 
     }
+
+    .tableBox {
+      border-radius: 10px;
+      overflow: hidden;
+      margin-top: 20px;
+      height: calc(100% - 129px);
+      background-color: #fff;
+
+      .ant-table-body {
+        height: 580px;
+        overflow-y: auto !important;
+        overflow-y: overlay !important;
+
+        .ant-table-row {
+          .ant-table-cell {
+            padding: 8px;
+          }
+        }
+      }
+    }
   }
 }

houtai/src/pages/B4Barrage/index.tsx

@@ -1,8 +1,22 @@
 import { RootState } from "@/store";
-import { getBarrageListAPI } from "@/store/action/B4Barrage";
-import { Input, DatePicker, Select, Button } from "antd";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  barrageAuditAPI,
+  barrageGetConfigAPI,
+  barrageGetUnauditedAPI,
+  barrageRemoveAPI,
+  getBarrageListAPI,
+} from "@/store/action/B4Barrage";
+import { BarrageTableType } from "@/types";
+import { Input, DatePicker, Select, Button, Table, Popconfirm } from "antd";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useDispatch, useSelector } from "react-redux";
+import BarrageSet from "./BarrageSet";
 import styles from "./index.module.scss";
 const { RangePicker } = DatePicker;
 
@@ -11,6 +25,24 @@ function Barrage() {
   const pageNumRef = useRef(1);
   const pagePageRef = useRef(10);
 
+  // 进页面获取弹幕管未审核个数
+  useEffect(() => {
+    dispatch(barrageGetUnauditedAPI());
+  }, [dispatch]);
+
+  const [barrageValue, setBarrageValue] = useState(false);
+
+  // 进页面获取弹幕功能设置信息
+  const getBarrageSetFu = useCallback(async () => {
+    const res = await barrageGetConfigAPI();
+    const dataRes = JSON.parse(res.data.content);
+    setBarrageValue(dataRes.value);
+  }, []);
+
+  useEffect(() => {
+    getBarrageSetFu();
+  }, [getBarrageSetFu]);
+
   // 从仓库获取表格列表信息
   const tableInfo = useSelector(
     (state: RootState) => state.barrageReducer.tableInfo
@@ -18,15 +50,15 @@ function Barrage() {
 
   // 顶部筛选
   const [tableSelect, setTableSelect] = useState({
-    name: "",
-    name2: "",
-    name3: "",
-    startTime: "",
-    endTime: "",
-    startTime2: "",
-    endTime2: "",
-    topic: -1,
+    searchKey: "",
+    barrageStartTime: "",
+    barrageEndTime: "",
+    authorName: "",
+    auditName: "",
+    status: -1,
     display: -1,
+    auditStartTime: "",
+    auditEndTime: "",
     pageSize: 10,
     pageNum: 1,
   });
@@ -36,7 +68,7 @@ function Barrage() {
   const getList = useCallback(async () => {
     const data = {
       ...tableSelect,
-      topic: tableSelect.topic === -1 ? null : tableSelect.topic,
+      status: tableSelect.status === -1 ? null : tableSelect.status,
       display: tableSelect.display === -1 ? null : tableSelect.display,
       pageNum: pageNumRef.current,
     };
@@ -61,7 +93,7 @@ function Barrage() {
       nameTime.current = window.setTimeout(() => {
         setTableSelect({
           ...tableSelect,
-          name: e.target.value,
+          searchKey: e.target.value,
           pageNum: 1,
         });
       }, 500);
@@ -71,13 +103,18 @@ function Barrage() {
 
   // 弹幕日期的改变
   const barrageTimeChange = (date: any, dateString: any) => {
-    let startTime2 = "";
-    let endTime2 = "";
+    let barrageStartTime = "";
+    let barrageEndTime = "";
     if (dateString[0] && dateString[1]) {
-      startTime2 = dateString[0] + " 00:00:00";
-      endTime2 = dateString[1] + " 23:59:59";
+      barrageStartTime = dateString[0] + " 00:00:00";
+      barrageEndTime = dateString[1] + " 23:59:59";
     }
-    setTableSelect({ ...tableSelect, startTime2, endTime2, pageNum: 1 });
+    setTableSelect({
+      ...tableSelect,
+      barrageStartTime,
+      barrageEndTime,
+      pageNum: 1,
+    });
   };
 
   // 作者称呼的输入
@@ -88,7 +125,7 @@ function Barrage() {
       nameTime2.current = window.setTimeout(() => {
         setTableSelect({
           ...tableSelect,
-          name2: e.target.value,
+          authorName: e.target.value,
           pageNum: 1,
         });
       }, 500);
@@ -104,7 +141,7 @@ function Barrage() {
       nameTime3.current = window.setTimeout(() => {
         setTableSelect({
           ...tableSelect,
-          name3: e.target.value,
+          auditName: e.target.value,
           pageNum: 1,
         });
       }, 500);
@@ -114,13 +151,18 @@ function Barrage() {
 
   // 审核日期的改变
   const timeChange = (date: any, dateString: any) => {
-    let startTime = "";
-    let endTime = "";
+    let auditStartTime = "";
+    let auditEndTime = "";
     if (dateString[0] && dateString[1]) {
-      startTime = dateString[0] + " 00:00:00";
-      endTime = dateString[1] + " 23:59:59";
+      auditStartTime = dateString[0] + " 00:00:00";
+      auditEndTime = dateString[1] + " 23:59:59";
     }
-    setTableSelect({ ...tableSelect, startTime, endTime, pageNum: 1 });
+    setTableSelect({
+      ...tableSelect,
+      auditStartTime,
+      auditEndTime,
+      pageNum: 1,
+    });
   };
 
   // 点击重置
@@ -129,20 +171,139 @@ function Barrage() {
     // 把2个输入框和时间选择器清空
     setInputKey(Date.now());
     setTableSelect({
-      name: "",
-      name2: "",
-      name3: "",
-      startTime: "",
-      endTime: "",
-      startTime2: "",
-      endTime2: "",
-      topic: -1,
+      searchKey: "",
+      barrageStartTime: "",
+      barrageEndTime: "",
+      authorName: "",
+      auditName: "",
+      status: -1,
       display: -1,
+      auditStartTime: "",
+      auditEndTime: "",
       pageSize: 10,
       pageNum: 1,
     });
   }, []);
 
+  // -----------表格数据
+
+  // 采纳状态的下拉框返回值
+  const tableSelectRes = useCallback((status: number) => {
+    const arr = [
+      { value: 1, label: "采纳" },
+      { value: 0, label: "不采纳" },
+    ];
+    if (status !== 2) arr.unshift({ value: -1, label: "请选择" });
+    return arr;
+  }, []);
+
+  // 采纳状态的下拉选择
+  const tableSelectFu = useCallback(
+    async (id: number, val: number) => {
+      const res = await barrageAuditAPI(id, val);
+      if (res.code === 0) {
+        getList();
+        dispatch(barrageGetUnauditedAPI());
+      }
+    },
+    [dispatch, getList]
+  );
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res = await barrageRemoveAPI(id);
+      if (res.code === 0) {
+        getList();
+        dispatch(barrageGetUnauditedAPI());
+      }
+    },
+    [dispatch, getList]
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "弹幕内容",
+        render: (item: BarrageTableType) =>
+          item.name.length >= 30 ? (
+            <span style={{ cursor: "pointer" }} title={item.name}>
+              {item.name.substring(0, 30) + "..."}
+            </span>
+          ) : (
+            item.name
+          ),
+      },
+      {
+        title: "关联文物",
+        dataIndex: "goodsName",
+      },
+      {
+        title: "弹幕时间",
+        dataIndex: "createTime",
+      },
+      {
+        title: "作者称呼",
+        dataIndex: "authorName",
+      },
+      {
+        title: "审核状态",
+        render: (item: BarrageTableType) =>
+          item.status === 2 ? "已审核" : "待审核",
+      },
+      {
+        title: "采纳状态",
+        render: (item: BarrageTableType) => (
+          <Select
+            placeholder="请选择"
+            style={{ width: 90 }}
+            value={item.display}
+            onChange={(e) => tableSelectFu(item.id, e)}
+            options={tableSelectRes(item.status)}
+          />
+        ),
+      },
+      {
+        title: "最近审核时间",
+        render: (item: BarrageTableType) =>
+          item.status === 2 ? item.updateTime : "（空）",
+      },
+      {
+        title: "审核人",
+        render: (item: BarrageTableType) =>
+          item.status === 2 ? item.auditName : "（空）",
+      },
+      {
+        title: "操作",
+        render: (item: BarrageTableType) => (
+          <Popconfirm
+            title="删除后无法恢复，是否删除?"
+            okText="删除"
+            cancelText="取消"
+            onConfirm={() => delTableFu(item.id)}
+          >
+            <Button size="small" type="text" danger>
+              删除
+            </Button>
+          </Popconfirm>
+        ),
+      },
+    ];
+  }, [delTableFu, tableSelectFu, tableSelectRes]);
+
+  // 页码变化
+  const paginationChange = useCallback(
+    () => (pageNum: number, pageSize: number) => {
+      pageNumRef.current = pageNum;
+      pagePageRef.current = pageSize;
+      setTableSelect({ ...tableSelect, pageNum, pageSize });
+    },
+    [tableSelect]
+  );
+
+  // 弹幕功能设置的弹窗
+  const [barrageSet, setBarrageSet] = useState(0);
+
   return (
     <div className={styles.Barrage}>
       <div className="pageTitlt">弹幕管理</div>
@@ -201,9 +362,9 @@ function Barrage() {
             <Select
               placeholder="请选择"
               style={{ width: 90 }}
-              value={tableSelect.topic}
+              value={tableSelect.status}
               onChange={(e) =>
-                setTableSelect({ ...tableSelect, topic: e, pageNum: 1 })
+                setTableSelect({ ...tableSelect, status: e, pageNum: 1 })
               }
               options={[
                 { value: -1, label: "全部" },
@@ -224,7 +385,7 @@ function Barrage() {
               options={[
                 { value: -1, label: "全部" },
                 { value: 1, label: "采纳" },
-                { value: 2, label: "不采纳" },
+                { value: 0, label: "不采纳" },
               ]}
             />
           </div>
@@ -240,10 +401,38 @@ function Barrage() {
           {/* 按钮 */}
           <div className="searchBtn">
             <Button onClick={resetSelectFu}>重置</Button>&emsp;
-            <Button>弹幕功能设置（当前：关闭）</Button>
+            <Button onClick={() => setBarrageSet(1)}>
+              弹幕功能设置（当前：{barrageValue ? "开启" : "关闭"}）
+            </Button>
           </div>
         </div>
       </div>
+      {/* 表格主体 */}
+      <div className="tableBox">
+        <Table
+          scroll={{ y: 580 }}
+          dataSource={tableInfo.list}
+          columns={columns}
+          rowKey="id"
+          pagination={{
+            showQuickJumper: true,
+            position: ["bottomCenter"],
+            showSizeChanger: true,
+            current: tableSelect.pageNum,
+            pageSize: tableSelect.pageSize,
+            total: tableInfo.total,
+            onChange: paginationChange(),
+          }}
+        />
+      </div>
+
+      {barrageSet ? (
+        <BarrageSet
+          closeMoalFu={() => setBarrageSet(0)}
+          barrageValue={barrageValue}
+          upBarrageFu={() => getBarrageSetFu()}
+        />
+      ) : null}
     </div>
   );
 }

houtai/src/pages/Layout/index.tsx

@@ -18,16 +18,27 @@ import { Base64 } from "js-base64";
 import encodeStr from "@/utils/pass";
 import { getDictListAPI, passWordEditAPI } from "@/store/action/login";
 import { getTokenInfo, removeTokenInfo } from "@/utils/storage";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import inco1Ac from "@/assets/img/inco1Ac.png";
 import inco2Ac from "@/assets/img/inco2Ac.png";
 import inco3Ac from "@/assets/img/inco3Ac.png";
 import { MessageFu } from "@/utils/message";
 import logoImg from "@/assets/img/logo.png";
+import { barrageGetUnauditedAPI } from "@/store/action/B4Barrage";
+import { RootState } from "@/store";
 
 function Layout() {
   const dispatch = useDispatch();
 
+  // 进页面获取弹幕管未审核个数
+  useEffect(() => {
+    dispatch(barrageGetUnauditedAPI());
+  }, [dispatch]);
+
+  const barrageNum = useSelector(
+    (state: RootState) => state.barrageReducer.stateNum
+  );
+
   type ListTempType = {
     title: string;
     incoAc: any;
@@ -39,7 +50,6 @@ function Layout() {
       Com: React.LazyExoticComponent<
         React.MemoExoticComponent<() => JSX.Element>
       >;
-      num?: number;
     }[];
   }[];
 
@@ -89,7 +99,6 @@ function Layout() {
             path: "/barrage",
             done: false,
             Com: React.lazy(() => import("../B4Barrage")),
-            num: 0,
           },
           {
             id: 600,
@@ -272,8 +281,8 @@ function Layout() {
                     v2.path === path ? "active" : ""
                   )}
                 >
-                  {v2.id === 500 ? (
-                    <div className="rowTip">{v2.num}</div>
+                  {v2.id === 500 && barrageNum ? (
+                    <div className="rowTip">{barrageNum}</div>
                   ) : null}
                   <div className="txt">{v2.name}</div>
                 </div>

houtai/src/store/action/B4Barrage.ts

@@ -5,10 +5,48 @@ import { AppDispatch } from "..";
  */
 export const getBarrageListAPI = (data: any) => {
   return async (dispatch: AppDispatch) => {
-    const res = await http.post("cms/goods/pageList", data);
+    const res = await http.post("cms/barrage/pageList", data);
     dispatch({
       type: "barrage/getList",
       payload: { list: res.data.records, total: res.data.total },
     });
   };
-};
+};
+
+/**
+ * 审核弹幕
+ */
+export const barrageAuditAPI = (id: number, display: number) => {
+  return http.get(`cms/barrage/audit/${id}/${display}`);
+};
+
+/**
+ * 删除弹幕
+ */
+export const barrageRemoveAPI = (id: number) => {
+  return http.get(`cms/barrage/remove/${id}`);
+};
+
+/**
+ * 弹幕功能设置修改
+ */
+export const barrageSetConfigAPI = (data: { content: string }) => {
+  return http.post("cms/barrage/setConfig", data);
+};
+
+/**
+ * 弹幕功能设置获取
+ */
+export const barrageGetConfigAPI = () => {
+  return http.get("cms/barrage/getConfig");
+};
+
+/**
+ * 获取弹幕未审核个数
+ */
+export const barrageGetUnauditedAPI = () => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.get("cms/barrage/getUnaudited");
+    dispatch({ type: "barrage/stateNum", payload: res.data });
+  };
+};

houtai/src/store/reducer/B4Barrage.ts

@@ -1,18 +1,23 @@
+import { BarrageTableType } from "@/types";
 
 // 初始化状态
 const initState = {
   // 列表数据
   tableInfo: {
-    list: [] as any[],
+    list: [] as BarrageTableType[],
     total: 0,
   },
+  // 弹幕未审核个数
+  stateNum: 0,
 };
 
 // 定义 action 类型
-type BarrageActionType = {
-  type: "barrage/getList";
-  payload: { list: any[]; total: number };
-};
+type BarrageActionType =
+  | {
+      type: "barrage/getList";
+      payload: { list: BarrageTableType[]; total: number };
+    }
+  | { type: "barrage/stateNum"; payload: number };
 
 // 频道 reducer
 export default function barrageReducer(
@@ -23,6 +28,9 @@ export default function barrageReducer(
     // 获取列表数据
     case "barrage/getList":
       return { ...state, tableInfo: action.payload };
+    // 弹幕未审核个数
+    case "barrage/stateNum":
+      return { ...state, stateNum: action.payload };
     default:
       return state;
   }

houtai/src/types/api/barrage.ts

@@ -0,0 +1,14 @@
+export type BarrageTableType = {
+  auditName: string;
+  authorName: string;
+  createTime: string;
+  creatorId: null;
+  creatorName: string;
+  display: number;
+  goodsId: number;
+  goodsName: string;
+  id: number;
+  name: string;
+  status: number;
+  updateTime: string;
+};

houtai/src/types/api/goods.d.ts

@@ -18,6 +18,8 @@ export type GoodsTableType = {
   topic: string;
   type: string;
   updateTime: string;
+  tagType?:string
+  tagCountry?:string
 };
 
 export type FileListType = {

houtai/src/types/index.d.ts

@@ -2,4 +2,5 @@ export * from './api/log'
 export * from './api/login'
 export * from './api/wall'
 export * from './api/hot'
-export * from './api/goods'
+export * from './api/goods'
+export * from './api/barrage'