修复脚本管理删除

This commit is contained in:
whyour 2022-09-23 23:16:57 +08:00
parent dfc706e16d
commit ba43882c0b
2 changed files with 75 additions and 42 deletions

View File

@ -1,5 +1,15 @@
import { useState, useEffect, useCallback, Key, useRef } from 'react'; import { useState, useEffect, useCallback, Key, useRef } from 'react';
import { TreeSelect, Tree, Input, Empty, Button, message, Modal, Tooltip, Typography } from 'antd'; import {
TreeSelect,
Tree,
Input,
Empty,
Button,
message,
Modal,
Tooltip,
Typography,
} from 'antd';
import config from '@/utils/config'; import config from '@/utils/config';
import { PageContainer } from '@ant-design/pro-layout'; import { PageContainer } from '@ant-design/pro-layout';
import Editor from '@monaco-editor/react'; import Editor from '@monaco-editor/react';
@ -45,9 +55,8 @@ function getFilterData(keyword: string, data: any) {
const Log = () => { const Log = () => {
const { headerStyle, isPhone, theme } = useOutletContext<SharedContext>(); const { headerStyle, isPhone, theme } = useOutletContext<SharedContext>();
const [title, setTitle] = useState('请选择日志文件');
const [value, setValue] = useState('请选择日志文件'); const [value, setValue] = useState('请选择日志文件');
const [select, setSelect] = useState<any>(); const [select, setSelect] = useState<string>('');
const [data, setData] = useState<any[]>([]); const [data, setData] = useState<any[]>([]);
const [filterData, setFilterData] = useState<any[]>([]); const [filterData, setFilterData] = useState<any[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@ -81,18 +90,18 @@ const Log = () => {
}; };
const onSelect = (value: any, node: any) => { const onSelect = (value: any, node: any) => {
setCurrentNode(node);
setSelect(value);
if (node.key === select || !value) { if (node.key === select || !value) {
return; return;
} }
setCurrentNode(node);
setSelect(value);
setTitle(node.key);
if (node.type === 'directory') { if (node.type === 'directory') {
setValue('请选择日志文件'); setValue('请选择日志文件');
return; return;
} }
setValue('加载中...'); setValue('加载中...');
getLog(node); getLog(node);
}; };
@ -131,7 +140,8 @@ const Log = () => {
<Text style={{ wordBreak: 'break-all' }} type="warning"> <Text style={{ wordBreak: 'break-all' }} type="warning">
{select} {select}
</Text> </Text>
{currentNode.type === 'directory' ? '夹下所以日志':''} {currentNode.type === 'directory' ? '夹下所以日志' : ''}
</> </>
), ),
onOk() { onOk() {
@ -140,7 +150,7 @@ const Log = () => {
data: { data: {
filename: currentNode.title, filename: currentNode.title,
path: currentNode.parent || '', path: currentNode.parent || '',
type: currentNode.type type: currentNode.type,
}, },
}) })
.then(({ code }) => { .then(({ code }) => {
@ -148,7 +158,10 @@ const Log = () => {
message.success(`删除成功`); message.success(`删除成功`);
let newData = [...data]; let newData = [...data];
if (currentNode.parent) { if (currentNode.parent) {
newData = depthFirstSearch(newData, (c) => c.key === currentNode.key); newData = depthFirstSearch(
newData,
(c) => c.key === currentNode.key,
);
} else { } else {
const index = newData.findIndex( const index = newData.findIndex(
(x) => x.key === currentNode.key, (x) => x.key === currentNode.key,
@ -158,6 +171,7 @@ const Log = () => {
} }
} }
setData(newData); setData(newData);
initState();
} }
}); });
}, },
@ -167,6 +181,12 @@ const Log = () => {
}); });
}; };
const initState = () => {
setSelect('');
setCurrentNode(null);
setValue('请选择脚本文件');
};
useEffect(() => { useEffect(() => {
const word = searchValue || ''; const word = searchValue || '';
const { tree } = getFilterData(word.toLocaleLowerCase(), data); const { tree } = getFilterData(word.toLocaleLowerCase(), data);
@ -183,30 +203,32 @@ const Log = () => {
return ( return (
<PageContainer <PageContainer
className="ql-container-wrapper log-wrapper" className="ql-container-wrapper log-wrapper"
title={title} title={select}
loading={loading} loading={loading}
extra={ extra={
isPhone ? [ isPhone
<TreeSelect ? [
className="log-select" <TreeSelect
value={select} className="log-select"
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} value={select}
treeData={data} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="请选择日志" treeData={data}
fieldNames={{ value: 'key', label: 'title' }} placeholder="请选择日志"
showSearch fieldNames={{ value: 'key', label: 'title' }}
onSelect={onSelect} showSearch
/>, onSelect={onSelect}
] : [ />,
<Tooltip title="删除"> ]
<Button : [
type="primary" <Tooltip title="删除">
disabled={!select} <Button
onClick={deleteFile} type="primary"
icon={<DeleteOutlined />} disabled={!select}
/> onClick={deleteFile}
</Tooltip>, icon={<DeleteOutlined />}
] />
</Tooltip>,
]
} }
header={{ header={{
style: headerStyle, style: headerStyle,
@ -282,7 +304,7 @@ const Log = () => {
onBeforeChange={(editor, data, value) => { onBeforeChange={(editor, data, value) => {
setValue(value); setValue(value);
}} }}
onChange={(editor, data, value) => { }} onChange={(editor, data, value) => {}}
/> />
)} )}
</div> </div>

View File

@ -78,9 +78,8 @@ const LangMap: any = {
const Script = () => { const Script = () => {
const { headerStyle, isPhone, theme, socketMessage } = const { headerStyle, isPhone, theme, socketMessage } =
useOutletContext<SharedContext>(); useOutletContext<SharedContext>();
const [title, setTitle] = useState('请选择脚本文件');
const [value, setValue] = useState('请选择脚本文件'); const [value, setValue] = useState('请选择脚本文件');
const [select, setSelect] = useState<any>(); const [select, setSelect] = useState<string>('');
const [data, setData] = useState<any[]>([]); const [data, setData] = useState<any[]>([]);
const [filterData, setFilterData] = useState<any[]>([]); const [filterData, setFilterData] = useState<any[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@ -136,12 +135,13 @@ const Script = () => {
}; };
const onSelect = (value: any, node: any) => { const onSelect = (value: any, node: any) => {
setSelect(node.key);
setCurrentNode(node);
if (node.key === select || !value) { if (node.key === select || !value) {
return; return;
} }
setSelect(node.key);
setTitle(node.key);
setCurrentNode(node);
if (node.type === 'directory') { if (node.type === 'directory') {
setValue('请选择脚本文件'); setValue('请选择脚本文件');
return; return;
@ -266,7 +266,8 @@ const Script = () => {
<Text style={{ wordBreak: 'break-all' }} type="warning"> <Text style={{ wordBreak: 'break-all' }} type="warning">
{select} {select}
</Text> </Text>
{currentNode.type === 'directory' ? '夹及其子文件':''} {currentNode.type === 'directory' ? '夹及其子文件' : ''}
</> </>
), ),
onOk() { onOk() {
@ -275,7 +276,7 @@ const Script = () => {
data: { data: {
filename: currentNode.title, filename: currentNode.title,
path: currentNode.parent || '', path: currentNode.parent || '',
type: currentNode.type type: currentNode.type,
}, },
}) })
.then(({ code }) => { .then(({ code }) => {
@ -283,7 +284,10 @@ const Script = () => {
message.success(`删除成功`); message.success(`删除成功`);
let newData = [...data]; let newData = [...data];
if (currentNode.parent) { if (currentNode.parent) {
newData = depthFirstSearch(newData, (c) => c.key === currentNode.key); newData = depthFirstSearch(
newData,
(c) => c.key === currentNode.key,
);
} else { } else {
const index = newData.findIndex( const index = newData.findIndex(
(x) => x.key === currentNode.key, (x) => x.key === currentNode.key,
@ -293,6 +297,7 @@ const Script = () => {
} }
} }
setData(newData); setData(newData);
initState();
} }
}); });
}, },
@ -356,6 +361,12 @@ const Script = () => {
}); });
}; };
const initState = () => {
setSelect('');
setCurrentNode(null);
setValue('请选择脚本文件');
};
useEffect(() => { useEffect(() => {
const word = searchValue || ''; const word = searchValue || '';
const { tree } = getFilterData(word.toLocaleLowerCase(), data); const { tree } = getFilterData(word.toLocaleLowerCase(), data);
@ -436,7 +447,7 @@ const Script = () => {
return ( return (
<PageContainer <PageContainer
className="ql-container-wrapper log-wrapper" className="ql-container-wrapper log-wrapper"
title={title} title={select}
loading={loading} loading={loading}
extra={ extra={
isPhone isPhone