|
@@ -1,209 +1,191 @@
|
|
-import React, {
|
|
|
|
- useCallback,
|
|
|
|
- useEffect,
|
|
|
|
- useMemo,
|
|
|
|
- useRef,
|
|
|
|
- useState,
|
|
|
|
-} from "react";
|
|
|
|
-import styles from "./index.module.scss";
|
|
|
|
-import { Button, Input, Popconfirm, Table } from "antd";
|
|
|
|
-import { useDispatch, useSelector } from "react-redux";
|
|
|
|
-import { RootState } from "@/store";
|
|
|
|
-import { A1tableType } from "@/types";
|
|
|
|
-import {
|
|
|
|
- A1_APIdel,
|
|
|
|
- A1_APIgetList,
|
|
|
|
- isTokenFlagAPI,
|
|
|
|
-} from "@/store/action/A1List";
|
|
|
|
-import { MessageFu } from "@/utils/message";
|
|
|
|
-import history from "@/utils/history";
|
|
|
|
-import { getTokenInfo, removeTokenInfo } from "@/utils/storage";
|
|
|
|
-import clasNames from "classnames";
|
|
|
|
|
|
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
|
|
+import styles from './index.module.scss'
|
|
|
|
+import { Button, Input, Popconfirm, Table } from 'antd'
|
|
|
|
+import { useDispatch, useSelector } from 'react-redux'
|
|
|
|
+import { RootState } from '@/store'
|
|
|
|
+import { A1tableType } from '@/types'
|
|
|
|
+import { A1_APIdel, A1_APIgetList, isTokenFlagAPI } from '@/store/action/A1List'
|
|
|
|
+import { MessageFu } from '@/utils/message'
|
|
|
|
+import history from '@/utils/history'
|
|
|
|
+import { getTokenInfo, removeTokenInfo } from '@/utils/storage'
|
|
|
|
+import clasNames from 'classnames'
|
|
|
|
|
|
const isTokenFlagFu = (val: boolean, url: string) => {
|
|
const isTokenFlagFu = (val: boolean, url: string) => {
|
|
if (val) {
|
|
if (val) {
|
|
// token 有效
|
|
// token 有效
|
|
- window.open(url);
|
|
|
|
|
|
+ window.open(url)
|
|
} else {
|
|
} else {
|
|
// token 失效
|
|
// token 失效
|
|
- MessageFu.warning("登录失效,请重新登录!");
|
|
|
|
- removeTokenInfo();
|
|
|
|
- history.push("/login");
|
|
|
|
|
|
+ MessageFu.warning('登录失效,请重新登录!')
|
|
|
|
+ removeTokenInfo()
|
|
|
|
+ history.push('/login')
|
|
}
|
|
}
|
|
-};
|
|
|
|
|
|
+}
|
|
|
|
|
|
function A1List() {
|
|
function A1List() {
|
|
const userInfo = useMemo(() => {
|
|
const userInfo = useMemo(() => {
|
|
- return getTokenInfo().user;
|
|
|
|
- }, []);
|
|
|
|
|
|
+ return getTokenInfo().user
|
|
|
|
+ }, [])
|
|
|
|
|
|
- const dispatch = useDispatch();
|
|
|
|
|
|
+ const dispatch = useDispatch()
|
|
|
|
|
|
// 顶部筛选
|
|
// 顶部筛选
|
|
const [tableSelect, setTableSelect] = useState({
|
|
const [tableSelect, setTableSelect] = useState({
|
|
pageNum: 1,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
pageSize: 10,
|
|
- searchKey: "",
|
|
|
|
- });
|
|
|
|
|
|
+ searchKey: ''
|
|
|
|
+ })
|
|
|
|
|
|
const getListFu = useCallback(() => {
|
|
const getListFu = useCallback(() => {
|
|
- dispatch(A1_APIgetList(tableSelect));
|
|
|
|
- }, [dispatch, tableSelect]);
|
|
|
|
|
|
+ dispatch(A1_APIgetList(tableSelect))
|
|
|
|
+ }, [dispatch, tableSelect])
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
- getListFu();
|
|
|
|
- }, [getListFu]);
|
|
|
|
|
|
+ getListFu()
|
|
|
|
+ }, [getListFu])
|
|
|
|
|
|
// 场景名称的输入
|
|
// 场景名称的输入
|
|
- const nameTime = useRef(-1);
|
|
|
|
|
|
+ const nameTime = useRef(-1)
|
|
const nameChange = useCallback(
|
|
const nameChange = useCallback(
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
- clearTimeout(nameTime.current);
|
|
|
|
|
|
+ clearTimeout(nameTime.current)
|
|
nameTime.current = window.setTimeout(() => {
|
|
nameTime.current = window.setTimeout(() => {
|
|
setTableSelect({
|
|
setTableSelect({
|
|
...tableSelect,
|
|
...tableSelect,
|
|
searchKey: e.target.value,
|
|
searchKey: e.target.value,
|
|
- pageNum: 1,
|
|
|
|
- });
|
|
|
|
- }, 500);
|
|
|
|
|
|
+ pageNum: 1
|
|
|
|
+ })
|
|
|
|
+ }, 500)
|
|
},
|
|
},
|
|
[tableSelect]
|
|
[tableSelect]
|
|
- );
|
|
|
|
|
|
+ )
|
|
|
|
|
|
- const { tableInfo } = useSelector((state: RootState) => state.A1List);
|
|
|
|
|
|
+ const { tableInfo } = useSelector((state: RootState) => state.A1List)
|
|
|
|
|
|
// 页码变化
|
|
// 页码变化
|
|
const paginationChange = useCallback(
|
|
const paginationChange = useCallback(
|
|
() => (pageNum: number, pageSize: number) => {
|
|
() => (pageNum: number, pageSize: number) => {
|
|
- setTableSelect({ ...tableSelect, pageNum, pageSize });
|
|
|
|
|
|
+ setTableSelect({ ...tableSelect, pageNum, pageSize })
|
|
},
|
|
},
|
|
[tableSelect]
|
|
[tableSelect]
|
|
- );
|
|
|
|
|
|
+ )
|
|
|
|
|
|
const lookFu = useCallback(async (code: string) => {
|
|
const lookFu = useCallback(async (code: string) => {
|
|
- const res = await isTokenFlagAPI();
|
|
|
|
|
|
+ const res = await isTokenFlagAPI()
|
|
if (res.code === 0) {
|
|
if (res.code === 0) {
|
|
- isTokenFlagFu(res.data, `/scene/index.html?m=${code}`);
|
|
|
|
|
|
+ isTokenFlagFu(res.data, `/webScene/index.html?m=${code}`)
|
|
}
|
|
}
|
|
- }, []);
|
|
|
|
|
|
+ }, [])
|
|
|
|
|
|
const editFu = useCallback(async (code: string) => {
|
|
const editFu = useCallback(async (code: string) => {
|
|
- const res = await isTokenFlagAPI();
|
|
|
|
|
|
+ const res = await isTokenFlagAPI()
|
|
if (res.code === 0) {
|
|
if (res.code === 0) {
|
|
- isTokenFlagFu(res.data, `/scene/edit.html?m=${code}`);
|
|
|
|
|
|
+ isTokenFlagFu(res.data, `/scene/edit.html?m=${code}`)
|
|
}
|
|
}
|
|
- }, []);
|
|
|
|
|
|
+ }, [])
|
|
|
|
|
|
const delTableFu = useCallback(
|
|
const delTableFu = useCallback(
|
|
async (id: number) => {
|
|
async (id: number) => {
|
|
- const res = await A1_APIdel(id);
|
|
|
|
|
|
+ const res = await A1_APIdel(id)
|
|
if (res.code === 0) {
|
|
if (res.code === 0) {
|
|
- MessageFu.success("删除成功!");
|
|
|
|
- getListFu();
|
|
|
|
|
|
+ MessageFu.success('删除成功!')
|
|
|
|
+ getListFu()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
[getListFu]
|
|
[getListFu]
|
|
- );
|
|
|
|
|
|
+ )
|
|
|
|
|
|
const columns = useMemo(() => {
|
|
const columns = useMemo(() => {
|
|
return [
|
|
return [
|
|
{
|
|
{
|
|
- title: "编号",
|
|
|
|
- dataIndex: "sceneCode",
|
|
|
|
|
|
+ title: '编号',
|
|
|
|
+ dataIndex: 'sceneCode'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: "场景名称",
|
|
|
|
- dataIndex: "name",
|
|
|
|
|
|
+ title: '场景名称',
|
|
|
|
+ dataIndex: 'name'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: "发布时间",
|
|
|
|
- dataIndex: "createTime",
|
|
|
|
|
|
+ title: '发布时间',
|
|
|
|
+ dataIndex: 'createTime'
|
|
},
|
|
},
|
|
|
|
|
|
{
|
|
{
|
|
- title: "操作",
|
|
|
|
|
|
+ title: '操作',
|
|
render: (item: A1tableType) => (
|
|
render: (item: A1tableType) => (
|
|
<>
|
|
<>
|
|
- <Button
|
|
|
|
- size="small"
|
|
|
|
- type="text"
|
|
|
|
- onClick={() => lookFu(item.sceneCode)}
|
|
|
|
- >
|
|
|
|
|
|
+ <Button size='small' type='text' onClick={() => lookFu(item.sceneCode)}>
|
|
查看
|
|
查看
|
|
</Button>
|
|
</Button>
|
|
|
|
|
|
- <Button
|
|
|
|
- size="small"
|
|
|
|
- type="text"
|
|
|
|
- onClick={() => editFu(item.sceneCode)}
|
|
|
|
- >
|
|
|
|
|
|
+ <Button size='small' type='text' onClick={() => editFu(item.sceneCode)}>
|
|
编辑
|
|
编辑
|
|
</Button>
|
|
</Button>
|
|
<Popconfirm
|
|
<Popconfirm
|
|
- title="删除后无法恢复,是否删除?"
|
|
|
|
- okText="删除"
|
|
|
|
- cancelText="取消"
|
|
|
|
|
|
+ title='删除后无法恢复,是否删除?'
|
|
|
|
+ okText='删除'
|
|
|
|
+ cancelText='取消'
|
|
okButtonProps={{ loading: false }}
|
|
okButtonProps={{ loading: false }}
|
|
onConfirm={() => delTableFu(item.id)}
|
|
onConfirm={() => delTableFu(item.id)}
|
|
>
|
|
>
|
|
- <Button size="small" type="text" danger>
|
|
|
|
|
|
+ <Button size='small' type='text' danger>
|
|
删除
|
|
删除
|
|
</Button>
|
|
</Button>
|
|
</Popconfirm>
|
|
</Popconfirm>
|
|
</>
|
|
</>
|
|
- ),
|
|
|
|
- },
|
|
|
|
- ];
|
|
|
|
- }, [delTableFu, editFu, lookFu]);
|
|
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }, [delTableFu, editFu, lookFu])
|
|
|
|
|
|
return (
|
|
return (
|
|
<div className={styles.A1List}>
|
|
<div className={styles.A1List}>
|
|
<div
|
|
<div
|
|
className={clasNames(
|
|
className={clasNames(
|
|
- "pageTitle",
|
|
|
|
- userInfo.isAdmin !== 1 ? "pageTitleToLeft" : ""
|
|
|
|
|
|
+ 'pageTitle',
|
|
|
|
+ userInfo.isAdmin !== 1 ? 'pageTitleToLeft' : ''
|
|
)}
|
|
)}
|
|
>
|
|
>
|
|
场景管理
|
|
场景管理
|
|
</div>
|
|
</div>
|
|
- <div className="A1Top">
|
|
|
|
- <div className="selectBox">
|
|
|
|
- <div className="selectBoxL">
|
|
|
|
- <div className="row">
|
|
|
|
|
|
+ <div className='A1Top'>
|
|
|
|
+ <div className='selectBox'>
|
|
|
|
+ <div className='selectBoxL'>
|
|
|
|
+ <div className='row'>
|
|
<span>场景名称:</span>
|
|
<span>场景名称:</span>
|
|
<Input
|
|
<Input
|
|
maxLength={30}
|
|
maxLength={30}
|
|
style={{ width: 300 }}
|
|
style={{ width: 300 }}
|
|
- placeholder="请输入"
|
|
|
|
|
|
+ placeholder='请输入'
|
|
allowClear
|
|
allowClear
|
|
- onChange={(e) => nameChange(e)}
|
|
|
|
|
|
+ onChange={e => nameChange(e)}
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* 表格主体 */}
|
|
{/* 表格主体 */}
|
|
- <div className="tableBox">
|
|
|
|
|
|
+ <div className='tableBox'>
|
|
<Table
|
|
<Table
|
|
scroll={{ y: 605 }}
|
|
scroll={{ y: 605 }}
|
|
dataSource={tableInfo.list}
|
|
dataSource={tableInfo.list}
|
|
columns={columns}
|
|
columns={columns}
|
|
- rowKey="id"
|
|
|
|
|
|
+ rowKey='id'
|
|
pagination={{
|
|
pagination={{
|
|
showQuickJumper: true,
|
|
showQuickJumper: true,
|
|
- position: ["bottomCenter"],
|
|
|
|
|
|
+ position: ['bottomCenter'],
|
|
// showSizeChanger: true,
|
|
// showSizeChanger: true,
|
|
current: tableSelect.pageNum,
|
|
current: tableSelect.pageNum,
|
|
pageSize: tableSelect.pageSize,
|
|
pageSize: tableSelect.pageSize,
|
|
total: tableInfo.total,
|
|
total: tableInfo.total,
|
|
- onChange: paginationChange(),
|
|
|
|
|
|
+ onChange: paginationChange()
|
|
}}
|
|
}}
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- );
|
|
|
|
|
|
+ )
|
|
}
|
|
}
|
|
|
|
|
|
-const MemoA1List = React.memo(A1List);
|
|
|
|
|
|
+const MemoA1List = React.memo(A1List)
|
|
|
|
|
|
-export default MemoA1List;
|
|
|
|
|
|
+export default MemoA1List
|