upp

houtai/src/assets/styles/base.css

@@ -75,6 +75,10 @@ textarea {
 #root .ant-btn-text {
   color: #99b8dd;
 }
+#root .ant-btn-text:disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
 #root .ant-btn-text.ant-btn-dangerous {
   color: var(--themeColor2);
 }

houtai/src/assets/styles/base.less

@@ -90,6 +90,10 @@ textarea {
   .ant-btn-text {
     color: #99b8dd;
   }
+  .ant-btn-text:disabled {
+    cursor: not-allowed;
+    color: rgba(0, 0, 0, 0.25);
+}
 
   /* 按钮的危险颜色 */
   .ant-btn-text.ant-btn-dangerous {

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

@@ -393,7 +393,7 @@ function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
           <Form.Item
             label="名称"
             name="name"
-            rules={[{ required: true, message: "请输名称!" }]}
+            rules={[{ required: true, message: "请输入名称!" }]}
             getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
           >
             <Input maxLength={25} showCount placeholder="请输入内容" />

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

@@ -179,7 +179,7 @@ function WallAdd({ id, closeMoalFu }: Props) {
           <Form.Item
             label="名称"
             name="name"
-            rules={[{ required: true, message: "请输名称!" }]}
+            rules={[{ required: true, message: "请输入名称!" }]}
             getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
           >
             <Input maxLength={25} showCount placeholder="请输入内容" />

houtai/src/pages/B6Smart/SmartAutoAdd/index.css

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

houtai/src/pages/B6Smart/SmartAutoAdd/index.less

@@ -0,0 +1,31 @@
+.SmartAutoAdd {
+  .ant-modal-close {
+    display: none;
+  }
+
+  .ant-modal {
+    width: 1000px !important;
+  }
+
+  .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/B6Smart/SmartAutoAdd/index.tsx

@@ -0,0 +1,120 @@
+import { Button, Form, Input, Modal, Popconfirm } from "antd";
+import React, { useCallback, useEffect, useRef } from "react";
+import TextArea from "antd/es/input/TextArea";
+import "./index.css";
+import { getSmartDetailAPI, smartSaveAPI } from "@/store/action/B6Smart";
+import { MessageFu } from "@/utils/message";
+import { SmartSaveDataType } from "@/types";
+
+type Props = {
+  id: number;
+  closeMoalFu: () => void;
+  addTableFu: () => void;
+  editTableFu: () => void;
+};
+
+function SmartAutoAdd({ id, closeMoalFu, addTableFu, editTableFu }: Props) {
+  // 表单的ref
+  const FormBoxRef = useRef<any>({});
+
+  // 是编辑，通过id获取详情
+  const getInfoByIdFu = useCallback(async (id: number) => {
+    const res = await getSmartDetailAPI(id);
+    FormBoxRef.current.setFieldsValue(res.data);
+  }, []);
+
+  useEffect(() => {
+    if (id > 0) getInfoByIdFu(id);
+  }, [getInfoByIdFu, id]);
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {}, []);
+
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (value: SmartSaveDataType) => {
+      const obj: SmartSaveDataType = {
+        ...value,
+        id: id > 0 ? id : null,
+        type: "play",
+      };
+      const res = await smartSaveAPI(obj);
+      if (res.code === 0) {
+        MessageFu.success(id > 0 ? "编辑成功!" : "新增成功!");
+        if (id < 0) addTableFu();
+        else editTableFu();
+        closeMoalFu();
+      }
+
+      console.log("通过校验，点击确定");
+    },
+    [addTableFu, closeMoalFu, editTableFu, id]
+  );
+
+  return (
+    <Modal
+      wrapClassName="SmartAutoAdd"
+      destroyOnClose
+      open={true}
+      title={id > 0 ? "编辑播报" : "新增播报"}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className="main">
+        <Form
+          ref={FormBoxRef}
+          name="basic"
+          labelCol={{ span: 2 }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete="off"
+        >
+          <Form.Item
+            label="标题"
+            name="name"
+            rules={[{ required: true, message: "请输入标题!" }]}
+            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+          >
+            <Input maxLength={25} showCount placeholder="请输入内容" />
+          </Form.Item>
+
+          <Form.Item
+            label="正文"
+            name="description"
+            rules={[{ required: true, message: "请输入简介!" }]}
+            getValueFromEvent={(e) => e.target.value.trim()}
+          >
+            <TextArea
+              rows={10}
+              placeholder="请输入内容"
+              showCount
+              maxLength={2000}
+            />
+          </Form.Item>
+
+          {/* 确定和取消按钮 */}
+          <br />
+          <Form.Item wrapperCol={{ offset: 10, span: 20 }}>
+            <Button type="primary" htmlType="submit">
+              提交
+            </Button>
+            &emsp; &emsp;
+            <Popconfirm
+              title="放弃编辑后，信息将不会保存!"
+              okText="放弃"
+              cancelText="取消"
+              onConfirm={closeMoalFu}
+            >
+              <Button>取消</Button>
+            </Popconfirm>
+          </Form.Item>
+        </Form>
+      </div>
+    </Modal>
+  );
+}
+
+const MemoSmartAutoAdd = React.memo(SmartAutoAdd);
+
+export default MemoSmartAutoAdd;

houtai/src/pages/B6Smart/SmartHotTable/index.module.scss

@@ -0,0 +1,58 @@
+.SmartHotTable{
+  border-radius: 10px;
+  background-color: #fff;
+  padding: 10px 15px;
+  height: calc(100% - 485px);
+  :global{
+    .topTit{
+      width: 1000px;
+      display: flex;
+      height: 40px;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .tableHotBox {
+      margin-top: 15px;
+      width: 1000px;
+      .ant-table-body {
+        height: 215px;
+        overflow-y: auto !important;
+        overflow-y: overlay !important;
+
+        .ant-table-row {
+          .ant-table-cell {
+            padding: 8px;
+          }
+        }
+      }
+      .tableRow{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .rowTit {
+          padding-left: 10px;
+          margin-top: 5px;
+          position: relative;
+          opacity: 0;
+          transition: top .2s;
+          color: #ff4d4f;
+          top: -10px;
+          font-size: 14px;
+        }
+    
+        .rowTitAc {
+          top: -2px;
+          opacity: 1;
+        }
+      }
+    }
+        // 表头拖拽样式
+        .drop-over-downward td {
+          border-bottom: 2px dashed var(--themeColor2) !important;
+        }
+    
+        .drop-over-upward td {
+          border-top: 2px dashed var(--themeColor2) !important;
+        }
+  }
+}

houtai/src/pages/B6Smart/SmartHotTable/index.tsx

@@ -0,0 +1,246 @@
+import { Button, Input, Popconfirm, Table } from "antd";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import styles from "./index.module.scss";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/store";
+import classNames from "classnames";
+import {
+  smartGetListAPI,
+  smartRemoveAPI,
+  smartSaveAPI,
+  smartSortAPI,
+} from "@/store/action/B6Smart";
+// 表格拖动排序-----------------
+import { SmartTableType } from "@/types";
+import { MessageFu } from "@/utils/message";
+
+function SmartHotTable() {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(smartGetListAPI("hot"));
+  }, [dispatch]);
+
+  // 从仓库中获取列表数据
+  const results = useSelector((state: RootState) => state.smartReducer.hotList);
+
+  // 点击编辑或者新增
+  const editIdRef = useRef(0);
+
+  const editTableFu = useCallback(
+    (id: number) => {
+      if (id === -1 && results.length >= 5)
+        return MessageFu.warning("最多可配置5个搜索热词！");
+      editIdRef.current = id;
+      setValueOk(false);
+
+      if (id === -1) {
+        setValue("");
+        const newList: SmartTableType[] = [
+          { id: Date.now(), type: "edit", name: "" },
+          ...results,
+        ];
+        dispatch({ type: "smart/getHotList", payload: newList });
+      } else {
+        const newList = [...results];
+        newList.forEach((v) => {
+          if (v.id === id) {
+            setValue(v.name);
+            v.type = "edit";
+          }
+        });
+        dispatch({ type: "smart/getHotList", payload: newList });
+      }
+    },
+    [dispatch, results]
+  );
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res: any = await smartRemoveAPI(id);
+      if (res.code === 0) {
+        MessageFu.success("删除成功!");
+        dispatch(smartGetListAPI("hot"));
+      }
+    },
+    [dispatch]
+  );
+
+  // 新增和编辑点击完成
+
+  const [value, setValue] = useState("");
+  const [valueOk, setValueOk] = useState(false);
+
+  const btnOk = useCallback(async () => {
+    setValueOk(true);
+    if (value === "") return;
+    const res = await smartSaveAPI({
+      name: value,
+      id: editIdRef.current > 0 ? editIdRef.current : null,
+      type: "hot",
+    });
+    if (res.code === 0) {
+      MessageFu.success(editIdRef.current > 0 ? "编辑成功!" : "新增成功!");
+      dispatch(smartGetListAPI("hot"));
+    }
+  }, [dispatch, value]);
+
+  // 点击上移和下移动
+  const moveTableFu = useCallback(
+    async (id1: number, id2: number) => {
+      const res = await smartSortAPI(id1, id2);
+      if (res.code === 0) dispatch(smartGetListAPI("hot"));
+    },
+    [dispatch]
+  );
+
+  // --------表格数据
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "内容",
+        render: (item: SmartTableType) => {
+          if (item.type === "edit") {
+            return (
+              <div className="tableRow">
+                <Input
+                  style={{ width: 200 }}
+                  value={value}
+                  onChange={(e) => setValue(e.target.value.replace(/\s+/g, ""))}
+                  maxLength={6}
+                  showCount
+                  placeholder="请输入关键字"
+                />
+                <div
+                  className={classNames(
+                    "rowTit",
+                    valueOk && value === "" ? "rowTitAc" : ""
+                  )}
+                >
+                  内容不能为空!
+                </div>
+              </div>
+            );
+          } else {
+            return item.name;
+          }
+        },
+      },
+      {
+        title: "操作",
+        render: (item: SmartTableType, record: any, index: number) => {
+          if (item.type === "edit") {
+            return (
+              <>
+                <Button size="small" type="text" onClick={btnOk}>
+                  完成
+                </Button>
+                <Button
+                  size="small"
+                  type="text"
+                  danger
+                  onClick={() => dispatch(smartGetListAPI("hot"))}
+                >
+                  取消
+                </Button>
+              </>
+            );
+          } else {
+            return (
+              <>
+                <Button
+                  size="small"
+                  type="text"
+                  onClick={() => moveTableFu(item.id, results[index - 1].id)}
+                  disabled={index === 0}
+                >
+                  上移
+                </Button>
+                <Button
+                  size="small"
+                  type="text"
+                  onClick={() => moveTableFu(item.id, results[index + 1].id)}
+                  disabled={index === results.length - 1}
+                >
+                  下移
+                </Button>
+                <Button
+                  size="small"
+                  type="text"
+                  onClick={() => editTableFu(item.id)}
+                  disabled={
+                    results &&
+                    results.length > 0 &&
+                    results.some((v) => v.type === "edit")
+                  }
+                >
+                  编辑
+                </Button>
+
+                <Popconfirm
+                  title="删除后无法恢复，是否删除?"
+                  okText="删除"
+                  cancelText="取消"
+                  onConfirm={() => delTableFu(item.id)}
+                >
+                  <Button size="small" type="text" danger>
+                    删除
+                  </Button>
+                </Popconfirm>
+              </>
+            );
+          }
+        },
+      },
+    ];
+  }, [
+    btnOk,
+    delTableFu,
+    dispatch,
+    editTableFu,
+    moveTableFu,
+    results,
+    value,
+    valueOk,
+  ]);
+
+  return (
+    <div className={styles.SmartHotTable}>
+      <div className="topTit">
+        <div className="titleTxt">搜索热词</div>
+        <Button
+          type="primary"
+          disabled={
+            results &&
+            results.length > 0 &&
+            results.some((v) => v.type === "edit")
+          }
+          onClick={() => editTableFu(-1)}
+        >
+          新增热词
+        </Button>
+      </div>
+      {/* 表格主体 */}
+      <div className="tableHotBox">
+        <Table
+          scroll={{ y: 215 }}
+          columns={columns}
+          dataSource={results}
+          rowKey="id"
+          pagination={false}
+        />
+      </div>
+    </div>
+  );
+}
+
+const MemoSmartHotTable = React.memo(SmartHotTable);
+
+export default MemoSmartHotTable;

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

@@ -1,5 +1,86 @@
-.Smart{
-  :global{
-    
+.Smart {
+  :global {
+    .titleTxt {
+      padding-left: 15px;
+      position: relative;
+      z-index: 10;
+      font-weight: 700;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+
+      .inco {
+        cursor: pointer;
+        margin-left: 10px;
+        font-size: 14px;
+        color: #7e8293;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 5px;
+        height: 22px;
+        background-color: var(--themeColor2);
+      }
+    }
+
+    .smartTopBox {
+      border-radius: 10px;
+      background-color: #fff;
+      padding: 10px 80px 10px 15px;
+      margin-bottom: 20px;
+
+      .openOrCloseBox {
+        margin-top: 10px;
+        height: 40px;
+        display: flex;
+        justify-content: space-between;
+
+        .openOrCloseBoxLL {
+          height: 40px;
+          display: flex;
+          align-items: center;
+        }
+
+        .openOrCloseBoxRR {
+          display: flex;
+          align-items: center;
+        }
+
+        .tit {
+          margin-left: 20px;
+          font-size: 14px;
+          color: rgb(126, 124, 124);
+        }
+      }
+
+      .tableAutoBox {
+        margin-top: 15px;
+
+        .ant-table-body {
+          height: 300px;
+          overflow-y: auto !important;
+          overflow-y: overlay !important;
+
+          .ant-table-row {
+            .ant-table-cell {
+              padding: 8px;
+            }
+          }
+        }
+      }
+    }
+
+    // 表头拖拽样式
+    .drop-over-downward td {
+      border-bottom: 2px dashed var(--themeColor2) !important;
+    }
+
+    .drop-over-upward td {
+      border-top: 2px dashed var(--themeColor2) !important;
+    }
   }
 }

houtai/src/pages/B6Smart/index.tsx

@@ -1,12 +1,311 @@
-import React from "react";
+import {
+  smartDisplayAPI,
+  smartGetConfigAPI,
+  smartGetListAPI,
+  smartRemoveAPI,
+  smartSetConfigAPI,
+  smartSortAPI,
+} from "@/store/action/B6Smart";
+import { MessageFu } from "@/utils/message";
+import { Button, Popconfirm, Switch, Table, Tooltip } from "antd";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { ExclamationCircleFilled } from "@ant-design/icons";
 import styles from "./index.module.scss";
- function Smart() {
-  
+
+// 表格拖动排序-----------------
+import { DndProvider, useDrag, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/store";
+import SmartAutoAdd from "./SmartAutoAdd";
+import { SmartTableType } from "@/types";
+import SmartHotTable from "./SmartHotTable";
+
+function Smart() {
+  const dispatch = useDispatch();
+  // 进页面获取配置信息
+  const smartGetConfigFu = useCallback(async () => {
+    const res = await smartGetConfigAPI();
+    const data = JSON.parse(res.data.content);
+    setValue(data.value);
+  }, []);
+
+  useEffect(() => {
+    smartGetConfigFu();
+    dispatch(smartGetListAPI("play"));
+  }, [dispatch, smartGetConfigFu]);
+
+  // 开启和关闭自动播报
+  const [value, setValue] = useState(true);
+
+  const isAutoFu = useCallback(
+    async (val: boolean) => {
+      const obj = {
+        content: JSON.stringify({ value: val }),
+      };
+      const res = await smartSetConfigAPI(obj);
+      if (res.code === 0) {
+        MessageFu.success("操作成功!");
+        smartGetConfigFu();
+      }
+    },
+    [smartGetConfigFu]
+  );
+
+  // 切换表格中的启用停用状态
+  const isEnabledClickFu = useCallback(
+    async (val: boolean, id: number) => {
+      const isDisable = val ? 1 : 0;
+      const res: any = await smartDisplayAPI(id, isDisable);
+      if (res.code === 0) dispatch(smartGetListAPI("play"));
+    },
+    [dispatch]
+  );
+
+  // 从仓库中获取列表数据
+  const results = useSelector(
+    (state: RootState) => state.smartReducer.autoList
+  );
+
+  // 点击编辑或者新增
+  const editTableFu = useCallback(
+    (id: number) => {
+      if (id === -1 && results.length >= 20)
+        return MessageFu.warning("最多支持上传20条播报！");
+      setEditId(id);
+    },
+    [results.length]
+  );
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res: any = await smartRemoveAPI(id);
+      if (res.code === 0) {
+        MessageFu.success("删除成功!");
+        dispatch(smartGetListAPI("play"));
+      }
+    },
+    [dispatch]
+  );
+
+  // --------表格数据
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "活动标题",
+        dataIndex: "name",
+      },
+      {
+        title: "活动正文",
+        render: (item: SmartTableType) =>
+          item.description!.length >= 50 ? (
+            <span style={{ cursor: "pointer" }} title={item.description}>
+              {item.description!.substring(0, 50) + "..."}
+            </span>
+          ) : (
+            item.description
+          ),
+      },
+      {
+        title: "展示状态",
+        render: (item: SmartTableType) => (
+          <Switch
+            checkedChildren="启用"
+            unCheckedChildren="停用"
+            checked={item.display === 1}
+            onChange={(val) => isEnabledClickFu(val, item.id)}
+          />
+        ),
+      },
+      {
+        title: "操作",
+        render: (item: SmartTableType) => (
+          <>
+            <Button
+              size="small"
+              type="text"
+              onClick={() => editTableFu(item.id)}
+            >
+              编辑
+            </Button>
+
+            <Popconfirm
+              title="删除后无法恢复，是否删除?"
+              okText="删除"
+              cancelText="取消"
+              onConfirm={() => delTableFu(item.id)}
+            >
+              <Button size="small" type="text" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </>
+        ),
+      },
+    ];
+  }, [delTableFu, editTableFu, isEnabledClickFu]);
+
+  // 表格拖动排序-----------------
+  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 }) => {
+          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 = results[dragIndex].id;
+      const afterId = results[hoverIndex].id;
+
+      const res = await smartSortAPI(beforeId, afterId);
+
+      if (res.code === 0) dispatch(smartGetListAPI("play"));
+    },
+    [dispatch, results]
+  );
+
+  // 新增和编辑播报
+  const [editId, setEditId] = useState(0);
+
+  const addTableFu = useCallback(() => {
+    // 先把仓库表格的数据清空，在发请求重新拿数据，让表格滚动到顶部
+    dispatch({ type: "smart/getAutoList", payload: [] });
+    dispatch(smartGetListAPI("play"));
+  }, [dispatch]);
+
   return (
     <div className={styles.Smart}>
-      <h1>Smart</h1>
+      <div className="pageTitlt">智能导览管理</div>
+      {/* 上面的表格 */}
+      <div className="smartTopBox">
+        <div className="titleTxt">
+          导览播报
+          <Tooltip title="按住鼠标可拖动表格调整顺序">
+            <div className="inco" hidden={results.length < 2}>
+              <ExclamationCircleFilled />
+            </div>
+          </Tooltip>
+        </div>
+        <div className="openOrCloseBox">
+          <div className="openOrCloseBoxLL">
+            自动播报：
+            <Switch
+              checkedChildren="开启"
+              unCheckedChildren="关闭"
+              checked={value}
+              onChange={(val) => isAutoFu(val)}
+            />
+            <div className="tit">
+              功能开启后，智能导览将按序自动播放下述内容
+            </div>
+          </div>
+          <div className="openOrCloseBoxRR">
+            <Button type="primary" onClick={() => editTableFu(-1)}>
+              新增播报
+            </Button>
+          </div>
+        </div>
+        {/* 表格主体 */}
+        <div className="tableAutoBox">
+          <DndProvider backend={HTML5Backend}>
+            <Table
+              scroll={{ y: 300 }}
+              columns={columns}
+              dataSource={results}
+              components={components}
+              rowKey="id"
+              pagination={false}
+              onRow={(_, index) => {
+                const attr = {
+                  index,
+                  moveRow,
+                };
+                return attr as React.HTMLAttributes<any>;
+              }}
+            />
+          </DndProvider>
+        </div>
+      </div>
+      {/* 下面的表格 */}
+      <SmartHotTable />
+      {/* 新增和编辑播报 */}
+      {editId ? (
+        <SmartAutoAdd
+          id={editId}
+          closeMoalFu={() => setEditId(0)}
+          addTableFu={addTableFu}
+          editTableFu={() => dispatch(smartGetListAPI("play"))}
+        />
+      ) : null}
     </div>
-  )
+  );
 }
 
 const MemoSmart = React.memo(Smart);

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

@@ -1,23 +1,33 @@
-.Log{
-  :global{
-    .logTop{
+.Log {
+  :global {
+    .logTop {
       margin-top: 15px;
       border-radius: 10px;
       background-color: #fff;
-      .tableSelectBox{
+
+      .tableSelectBox {
         padding: 20px 24px;
         display: flex;
         align-items: center;
-        .row{
+
+        .row {
           margin-right: 20px;
         }
       }
     }
-    .tableMain{
+
+    .tableMain {
       border-radius: 10px;
       margin-top: 15px;
-      height: calc(100% - 128px);
+      height: calc(100% - 104px);
       background-color: #fff;
+
+      .ant-table-body {
+        height: 608px;
+        overflow-y: auto !important;
+        overflow-y: overlay !important;
+
+      }
     }
   }
 }

houtai/src/pages/C3Log/index.tsx

@@ -109,7 +109,7 @@ function Log() {
       {/* 表格主体 */}
       <div className="tableMain">
         <Table
-          scroll={{ y: 570 }}
+          scroll={{ y: 608 }}
           dataSource={results.list}
           columns={columns}
           rowKey="id"

houtai/src/store/action/B6Smart.ts

@@ -0,0 +1,65 @@
+import { SmartSaveDataType } from "@/types";
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+/**
+ * 配置-获取
+ */
+export const smartGetConfigAPI = () => {
+  return http.get("cms/guide/getConfig");
+};
+
+/**
+ * 配置-修改
+ */
+export const smartSetConfigAPI = (data: { content: string }) => {
+  return http.post("cms/guide/setConfig", data);
+};
+
+/**
+ * 播报表格-是否显示
+ */
+export const smartDisplayAPI = (id: number, display: number) => {
+  return http.get(`cms/guide/display/${id}/${display}`);
+};
+
+/**
+ * 获取表格列表
+ */
+export const smartGetListAPI = (type: "hot" | "play") => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.get(`cms/guide/list/${type}`);
+    dispatch({
+      type: type === "hot" ? "smart/getHotList" : "smart/getAutoList",
+      payload: res.data,
+    });
+  };
+};
+
+/**
+ * 内容-排序
+ */
+export const smartSortAPI = (id1: number, id2: number) => {
+  return http.get(`cms/guide/sort/${id1}/${id2}`);
+};
+
+/**
+ * 内容-删除
+ */
+export const smartRemoveAPI = (id: number) => {
+  return http.get(`cms/guide/remove/${id}`);
+};
+
+/**
+ * 内容-新增、编辑
+ */
+export const smartSaveAPI = (data: SmartSaveDataType) => {
+  return http.post("cms/guide/save", data);
+};
+
+/**
+ * 内容-删除
+ */
+export const getSmartDetailAPI = (id: number) => {
+  return http.get(`cms/guide/detail/${id}`);
+};

houtai/src/store/reducer/B6Smart.ts

@@ -0,0 +1,29 @@
+import { SmartTableType } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  autoList: [] as SmartTableType[],
+  hotList: [] as SmartTableType[],
+};
+
+// 定义 action 类型
+type SmartActionType =
+  | { type: "smart/getAutoList"; payload: SmartTableType[] }
+  | { type: "smart/getHotList"; payload: SmartTableType[] };
+
+// 频道 reducer
+export default function smartReducer(
+  state = initState,
+  action: SmartActionType
+) {
+  switch (action.type) {
+    // 获取列表数据
+    case "smart/getAutoList":
+      return { ...state, autoList: action.payload };
+      case "smart/getHotList":
+        return { ...state, hotList: action.payload };
+      default:
+      return state;
+  }
+}

houtai/src/store/reducer/C3log.ts

@@ -1,3 +1,5 @@
+import { LogTableType } from "@/types";
+
 // 初始化状态
 const initState = {
   // 列表数据

houtai/src/store/reducer/index.ts

@@ -3,6 +3,7 @@ import { combineReducers } from 'redux'
 import goodsReducer from './B2Goods'
 import wallReducer from './B3Wall'
 import barrageReducer from './B4Barrage'
+import smartReducer from './B6Smart'
 import logReducer from './C3log'
 
 // 导入 登录 模块的 reducer
@@ -14,7 +15,8 @@ const rootReducer = combineReducers({
   logReducer:logReducer,
   goodsReducer:goodsReducer,
   wallReducer:wallReducer,
-  barrageReducer:barrageReducer
+  barrageReducer:barrageReducer,
+  smartReducer:smartReducer
 })
 
 // 默认导出

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

@@ -1,4 +1,4 @@
-type LogTableType = {
+export type LogTableType = {
   createTime: string;
   creatorId: null;
   creatorName: string;

houtai/src/types/api/smart.ts

@@ -0,0 +1,14 @@
+export type SmartSaveDataType ={
+  id:number|null
+  name:string
+  description?:string
+  type:'hot'|'play'
+}
+
+export type SmartTableType={
+  description?: string;
+  display?: number;
+  id: number;
+  name: string;
+  type: 'play'|'hot'|'edit';
+}

houtai/src/types/index.d.ts

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