|
|
@@ -0,0 +1,122 @@
|
|
|
+import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|
|
+import styles from "./index.module.scss";
|
|
|
+import { getSceneListAPI, isTokenFlagAPI } from "@/store/action/A8Scene";
|
|
|
+import { useDispatch, useSelector } from "react-redux";
|
|
|
+import { RootState } from "@/store";
|
|
|
+import { Button, Table } from "antd";
|
|
|
+import { SceneListType } from "@/types";
|
|
|
+import history from "@/utils/history";
|
|
|
+import { removeTokenInfo } from "@/utils/storage";
|
|
|
+import { MessageFu } from "@/utils/message";
|
|
|
+import { baseURL } from "@/utils/http";
|
|
|
+function A8Scene() {
|
|
|
+ const dispatch = useDispatch();
|
|
|
+
|
|
|
+ // 筛选和分页
|
|
|
+ const [tableSelect, setTableSelect] = useState({
|
|
|
+ searchKey: "",
|
|
|
+ pageSize: 10000,
|
|
|
+ pageNum: 1,
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ });
|
|
|
+ const getList = useCallback(() => {
|
|
|
+ dispatch(getSceneListAPI(tableSelect));
|
|
|
+ }, [dispatch, tableSelect]);
|
|
|
+
|
|
|
+ const isTokenFlagFu = (val: boolean, url: string) => {
|
|
|
+ if (val) {
|
|
|
+ // token 有效
|
|
|
+ window.open(url);
|
|
|
+ } else {
|
|
|
+ // token 失效
|
|
|
+ MessageFu.warning("登录失效,请重新登录!");
|
|
|
+ removeTokenInfo();
|
|
|
+ history.push("/login");
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const lookFu = useCallback(async (code: string) => {
|
|
|
+ const res = await isTokenFlagAPI();
|
|
|
+ if (res.code === 0) {
|
|
|
+ isTokenFlagFu(res.data, baseURL + `/scene/index.html?m=${code}`);
|
|
|
+ }
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ const editFu = useCallback(async (code: string) => {
|
|
|
+ const res = await isTokenFlagAPI();
|
|
|
+ if (res.code === 0) {
|
|
|
+ isTokenFlagFu(res.data, baseURL + `/editScene/edit.html?m=${code}`);
|
|
|
+ }
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ const tableInfo = useSelector((state: RootState) => state.A8Scene.tableInfo);
|
|
|
+
|
|
|
+ const columns = useMemo(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ width: 100,
|
|
|
+ title: "序号",
|
|
|
+ render: (text: any, record: any, index: any) => index + 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "场景名称",
|
|
|
+ dataIndex: "name",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "操作",
|
|
|
+ render: (item: SceneListType) => {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <Button
|
|
|
+ size="small"
|
|
|
+ type="text"
|
|
|
+ onClick={() => editFu(item.sceneCode)}
|
|
|
+ >
|
|
|
+ 编辑
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ size="small"
|
|
|
+ type="text"
|
|
|
+ onClick={() => lookFu(item.sceneCode)}
|
|
|
+ >
|
|
|
+ 查看
|
|
|
+ </Button>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }, [editFu, lookFu]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getList();
|
|
|
+ }, [getList]);
|
|
|
+ return (
|
|
|
+ <div className={styles.A8Scene}>
|
|
|
+ <div className="ruleTop">
|
|
|
+ <div className="pageTitle">场景管理</div>
|
|
|
+ {/* 表格主体 */}
|
|
|
+ <div className="tableBox1">
|
|
|
+ <Table
|
|
|
+ scroll={{ y: 500 }}
|
|
|
+ bordered={false}
|
|
|
+ dataSource={tableInfo.list}
|
|
|
+ columns={columns}
|
|
|
+ rowKey="id"
|
|
|
+ pagination={{
|
|
|
+ showQuickJumper: true,
|
|
|
+ position: ["bottomCenter"],
|
|
|
+ showSizeChanger: true,
|
|
|
+ total: tableInfo.total,
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+const MemoA8Scene = React.memo(A8Scene);
|
|
|
+
|
|
|
+export default MemoA8Scene;
|