upp

后台/src/components/ZA_Table/index.tsx

@@ -51,7 +51,7 @@ function ZA_Table({ myType, setEditId, tableInfo }: Props, ref: any) {
     else if (myType === "custom") dispatch(A6_APIgetList(getData));
     else if (myType === "project") dispatch(A7_APIgetList(getData));
     else if (myType === "craft") dispatch(A4_APIgetList(getData));
-    else if (myType === 'master') dispatch(A5_APIgetList(getData));
+    else if (myType === "master") dispatch(A5_APIgetList(getData));
   }, [dispatch, getData, myType]);
 
   useEffect(() => {
@@ -160,37 +160,30 @@ function ZA_Table({ myType, setEditId, tableInfo }: Props, ref: any) {
       title: "操作",
       render: (item: A2TableType) => (
         <>
-          <>
-            <Button
-              size="small"
-              type="text"
-              onClick={() => setEditId(item.id, true)}
-            >
-              查看
+          <Button
+            size="small"
+            type="text"
+            onClick={() => setEditId(item.id, true)}
+          >
+            查看
+          </Button>
+          <Button
+            size="small"
+            type="text"
+            onClick={() => setEditId(item.id, false)}
+          >
+            编辑
+          </Button>
+          <Popconfirm
+            title="删除后无法恢复，是否删除?"
+            okText="删除"
+            cancelText="取消"
+            onConfirm={() => delTableFu(item.id!)}
+          >
+            <Button size="small" type="text" danger hidden={myType === "craft"}>
+              删除
             </Button>
-            <Button
-              size="small"
-              type="text"
-              onClick={() => setEditId(item.id, false)}
-            >
-              编辑
-            </Button>
-            <Popconfirm
-              title="删除后无法恢复，是否删除?"
-              okText="删除"
-              cancelText="取消"
-              onConfirm={() => delTableFu(item.id!)}
-            >
-              <Button
-                size="small"
-                type="text"
-                danger
-                hidden={myType === "craft"}
-              >
-                删除
-              </Button>
-            </Popconfirm>
-          </>
+          </Popconfirm>
         </>
       ),
     });

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

@@ -1,5 +1,66 @@
-.B1Plate{
-  :global{
-    
+.B1Plate {
+  :global {
+    .top {
+      display: flex;
+      align-items: center;
+      background-color: #fff;
+      border-radius: 10px;
+      padding: 20px 15px;
+    }
+
+    .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;
+          }
+        }
+      }
+    }
+  }
+}
+
+.B1Modal {
+
+  :global {
+
+    .ant-modal {
+      width: 800px !important;
+    }
+
+    .ant-modal-close {
+      display: none;
+    }
+
+    .main {
+      border-top: 1px solid #999999;
+      padding-top: 15px;
+      width: 100%;
+
+      .imgListBox {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+
+        .imgListRow {
+          width: 200px;
+          height: 200px;
+
+          img {
+            object-fit: contain;
+          }
+        }
+      }
+    }
+
   }
 }

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

@@ -1,9 +1,220 @@
-import React from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import styles from "./index.module.scss";
+import {
+  Button,
+  Form,
+  FormInstance,
+  Input,
+  Modal,
+  Popconfirm,
+  Table,
+} from "antd";
+import { useDispatch, useSelector } from "react-redux";
+import { B1_APIgetList } from "@/store/action/B1Plate";
+import { RootState } from "@/store";
+import { A1ListType } from "@/types";
+import { A1_APIgetInfo, A1_APIsave } from "@/store/action/A1Plate";
+import TextArea from "antd/es/input/TextArea";
+import { MessageFu } from "@/utils/message";
 function B1Plate() {
+  const dispatch = useDispatch();
+
+  const [name, setName] = useState("");
+  const [inputKey, setInputKey] = useState(1);
+
+  useEffect(() => {
+    dispatch(B1_APIgetList(name));
+  }, [dispatch, name]);
+
+  // 标题的输入
+  const nameTime = useRef(-1);
+  const nameChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    clearTimeout(nameTime.current);
+    nameTime.current = window.setTimeout(() => {
+      setName(e.target.value);
+    }, 500);
+  }, []);
+
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+    setInputKey(Date.now());
+    setName("");
+  }, []);
+
+  // 从仓库获取表格数据
+  const { list } = useSelector((state: RootState) => state.B1Plate);
+
+  // 表单的ref
+  const FormBoxRef = useRef<FormInstance>(null);
+
+  // 点击编辑
+  const openModel = useCallback(async (id: number) => {
+    const res = await A1_APIgetInfo(id);
+    if (res.code === 0) setInfo(res.data.entity);
+  }, []);
+
+  const [info, setInfo] = useState({} as A1ListType);
+
+  useEffect(() => {
+    if (info.content) {
+      FormBoxRef.current?.setFieldsValue({
+        content: info.content,
+      });
+    }
+  }, [info]);
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "标题",
+        dataIndex: "name",
+      },
+      {
+        title: "简介",
+        render: (item: A1ListType) =>
+          item.content.length >= 50 ? (
+            <span style={{ cursor: "pointer" }} title={item.content}>
+              {item.content.substring(0, 50) + "..."}
+            </span>
+          ) : (
+            item.content
+          ),
+      },
+      {
+        title: "操作",
+        render: (item: A1ListType) => (
+          <Button size="small" type="text" onClick={() => openModel(item.id)}>
+            编辑
+          </Button>
+        ),
+      },
+    ];
+  }, [openModel]);
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {}, []);
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (value: any) => {
+      const obj = {
+        ...value,
+        id: info.id,
+        type: "appreciate",
+      };
+      const res = await A1_APIsave(obj);
+      if (res.code === 0) {
+        MessageFu.success("编辑成功!");
+        dispatch(B1_APIgetList(name));
+        setInfo({} as A1ListType);
+      }
+    },
+    [dispatch, info.id, name]
+  );
+
   return (
     <div className={styles.B1Plate}>
       <div className="pageTitle">板块</div>
+      {/* 顶部搜索 */}
+      <div className="top">
+        <span>标题：</span>
+        <Input
+          key={inputKey}
+          maxLength={50}
+          style={{ width: 300 }}
+          placeholder="请输入关键字"
+          allowClear
+          onChange={(e) => nameChange(e)}
+        />
+        &emsp;&emsp;
+        <Button onClick={resetSelectFu}>重置</Button>
+      </div>
+
+      {/* 表格主体 */}
+      <div className="tableBox">
+        <Table
+          scroll={{ y: 617 }}
+          dataSource={list}
+          columns={columns}
+          rowKey="id"
+          pagination={false}
+        />
+      </div>
+
+      {/* 点击编辑出来的弹窗 */}
+      {info.id ? (
+        <Modal
+          wrapClassName={styles.B1Modal}
+          destroyOnClose
+          open={true}
+          title={info.name}
+          footer={
+            [] // 设置footer为空，去掉 取消 确定默认按钮
+          }
+        >
+          <div className="main">
+            <Form
+              ref={FormBoxRef}
+              name="basic"
+              labelCol={{ span: 2 }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
+            >
+              <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
+                  autoSize
+                  placeholder="请输入内容"
+                  showCount
+                  maxLength={500}
+                />
+              </Form.Item>
+              {/* 确定和取消按钮 */}
+              <br />
+              <Form.Item
+                wrapperCol={{ offset: 10, span: 20 }}
+                className="closeLook"
+              >
+                <Button type="primary" htmlType="submit">
+                  提交
+                </Button>
+                &emsp;
+                <Popconfirm
+                  title="放弃编辑后，信息将不会保存!"
+                  okText="放弃"
+                  cancelText="取消"
+                  onConfirm={() => setInfo({} as A1ListType)}
+                >
+                  <Button>取消</Button>
+                </Popconfirm>
+              </Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </div>
   );
 }

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

@@ -0,0 +1,17 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+/**
+ * 获取赏析-板块列表
+ */
+export const B1_APIgetList = (searchKey: string) => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("cms/config/getList", {
+      searchKey,
+      type: "appreciate",
+    });
+    if (res.code === 0) {
+      dispatch({ type: "B1Plate/getList", payload: res.data });
+    }
+  };
+};

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

@@ -0,0 +1,25 @@
+import { A1ListType } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  list: [] as A1ListType[],
+};
+
+// 定义 action 类型
+type Props = {
+  type: "B1Plate/getList";
+  payload: A1ListType[];
+};
+
+// 频道 reducer
+export default function Reducer(state = initState, action: Props) {
+  switch (action.type) {
+    // 获取列表数据
+    case "B1Plate/getList":
+      return { ...state, list: action.payload };
+
+    default:
+      return state;
+  }
+}

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

@@ -10,6 +10,7 @@ import A4Craft from "./A4Craft";
 import A5Maestro from "./A5Maestro";
 import A6Custom from "./A6Custom";
 import A7Project from "./A7Project";
+import B1Plate from "./B1Plate";
 import D1User from "./D1User";
 import D2Log from "./D2Log";
 
@@ -23,6 +24,7 @@ const rootReducer = combineReducers({
   A5Maestro,
   A6Custom,
   A7Project,
+  B1Plate,
   D1User,
   D2Log,
 });