feat:只有点击文件时打开

This commit is contained in:
shixiaohua 2024-01-25 17:56:53 +08:00
parent 34fb22536f
commit a178134507
5 changed files with 54 additions and 35 deletions

View File

@ -1,7 +1,8 @@
import React, {useEffect, useMemo, useState} from 'react'; import React, {useEffect, useMemo, useState} from 'react';
import { Input, Tree } from 'antd'; import {Input, Tree} from 'antd';
import {FolderOutlined,FileMarkdownOutlined} from '@ant-design/icons'; import {FolderOutlined, FileMarkdownOutlined} from '@ant-design/icons';
const { Search } = Input;
const {Search} = Input;
import store from "../../redux/store"; import store from "../../redux/store";
import {clickFile} from "../../redux/clickFile_reducer"; import {clickFile} from "../../redux/clickFile_reducer";
@ -11,7 +12,7 @@ const dataList = [];
const generateList = (data) => { const generateList = (data) => {
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
const node = data[i]; const node = data[i];
const { key,title,icon } = node; const {key, title, icon} = node;
dataList.push({ dataList.push({
key, key,
title, title,
@ -38,61 +39,62 @@ const getParentKey = (key, tree) => {
return parentKey; return parentKey;
}; };
function generateChildList(fileList){ function generateChildList(fileList) {
const result = [] const result = []
for (let i = 0; i < fileList.length; i++) { for (let i = 0; i < fileList.length; i++) {
const {fileName,filePath,dirFlag}=fileList[i]; const {fileName, filePath, dirFlag} = fileList[i];
result.push({ result.push({
"key":filePath, "key": filePath,
"title":fileName, "title": fileName,
"icon":<FolderOutlined />, "icon": <FolderOutlined/>,
"dirFlag":dirFlag, "dirFlag": dirFlag,
"children":[] "children": []
}); });
} }
return result; return result;
} }
const ItemTree = () => { const ItemTree = () => {
const [expandedKeys, setExpandedKeys] = useState([]); const [expandedKeys, setExpandedKeys] = useState([]);
const [searchValue, setSearchValue] = useState(''); const [searchValue, setSearchValue] = useState('');
const [defaultValueState, setDefaultValueState] = useState([]); const [defaultValueState, setDefaultValueState] = useState([]);
const [autoExpandParent, setAutoExpandParent] = useState(true); const [autoExpandParent, setAutoExpandParent] = useState(true);
useEffect(()=>{ useEffect(() => {
store.subscribe(() =>{ store.subscribe(() => {
let fileDirDate = store.getState().dirMessage.data; let fileDirDate = store.getState().dirMessage.data;
console.log("打开目录fileDirDate:",fileDirDate) console.log("打开目录fileDirDate:", fileDirDate)
for (let i = 0; i < fileDirDate.length; i++) { for (let i = 0; i < fileDirDate.length; i++) {
const node = fileDirDate[i]; const node = fileDirDate[i];
console.log("node:",node) console.log("node:", node)
const { fileName,filePath,childList,dirFlag } = node; const {fileName, filePath, childList, dirFlag} = node;
const childListM=[] const childListM = []
if (childList.length>0) { if (childList.length > 0) {
childListM.push(...generateChildList(childList)); childListM.push(...generateChildList(childList));
} }
if (defaultData.filter(fileMessage=> if (defaultData.filter(fileMessage =>
fileMessage.key===filePath fileMessage.key === filePath
).length===0){ ).length === 0) {
defaultData.push({ defaultData.push({
"key":filePath, "key": filePath,
"title":fileName, "title": fileName,
"icon":<FolderOutlined />, "icon": <FolderOutlined/>,
"dirFlag":dirFlag, "dirFlag": dirFlag,
"children":childListM "children": childListM
}); });
} }
} }
console.log("Array.from(new Set(defaultData)):",Array.from(new Set(defaultData))) console.log("Array.from(new Set(defaultData)):", Array.from(new Set(defaultData)))
setDefaultValueState(Array.from(new Set(defaultData))) setDefaultValueState(Array.from(new Set(defaultData)))
}) })
},[]) }, [])
const onExpand = (newExpandedKeys) => { const onExpand = (newExpandedKeys) => {
setExpandedKeys(newExpandedKeys); setExpandedKeys(newExpandedKeys);
setAutoExpandParent(false); setAutoExpandParent(false);
}; };
const onChange = (e) => { const onChange = (e) => {
const { value } = e.target; const {value} = e.target;
const newExpandedKeys = dataList const newExpandedKeys = dataList
.map((item) => { .map((item) => {
if (item.title.indexOf(value) > -1) { if (item.title.indexOf(value) > -1) {
@ -105,10 +107,10 @@ const ItemTree = () => {
setSearchValue(value); setSearchValue(value);
setAutoExpandParent(true); setAutoExpandParent(true);
}; };
const onSelect = (selectedKeys,e) =>{ const onSelect = (selectedKeys, e) => {
if (e.selected){ if (e.selected && !e.node.dirFlag) {
console.log('onSelect.selectedKeys',selectedKeys,e) console.log('onSelect.selectedKeys', selectedKeys, e)
store.dispatch(clickFile({"fileName":e.node.title,"filePath":e.node.key})) store.dispatch(clickFile({"fileName": e.node.title, "filePath": e.node.key}))
} }
} }
// const treeData = useMemo(() => { // const treeData = useMemo(() => {
@ -155,7 +157,7 @@ const ItemTree = () => {
expandedKeys={expandedKeys} expandedKeys={expandedKeys}
// //
autoExpandParent={autoExpandParent} autoExpandParent={autoExpandParent}
showIcon ={true} showIcon={true}
// treeNodes TreeNode key // treeNodes TreeNode key
treeData={defaultValueState} treeData={defaultValueState}
onSelect={onSelect} onSelect={onSelect}

View File

@ -11,6 +11,7 @@ import Hlexical from './Hlexical';
import ItemTree from "../../components/ItemTree"; import ItemTree from "../../components/ItemTree";
import './index.less' import './index.less'
import store from "../../redux/store"; import store from "../../redux/store";
import {isEmpty} from "../../utils/ObjectUtils";
const {Header, Sider, Content} = Layout; const {Header, Sider, Content} = Layout;
const Note = () => { const Note = () => {
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
@ -24,7 +25,7 @@ const Note = () => {
store.subscribe(() => { store.subscribe(() => {
const openFile = store.getState().clickFileMessage.data; const openFile = store.getState().clickFileMessage.data;
console.log("store.getState().clickFileMessage.data:",openFile,items) console.log("store.getState().clickFileMessage.data:",openFile,items)
if (items.filter(fileItem => fileItem.key === openFile.filePath).length === 0) { if (items.filter(fileItem => fileItem.key === openFile.filePath).length === 0&& !isEmpty(openFile)) {
setItems([...items, setItems([...items,
{ {
label: openFile.fileName, label: openFile.fileName,

View File

@ -3,6 +3,7 @@ import { createSlice } from '@reduxjs/toolkit'
export const clickFileSlice = createSlice({ export const clickFileSlice = createSlice({
name: 'clickFile', name: 'clickFile',
initialState: { initialState: {
type:"clickFile",
data: {} data: {}
}, },
reducers: { reducers: {

View File

@ -0,0 +1,8 @@
const schema = {
"fileId": {
type: 'number',
maximum: 100,
minimum: 1,
default: 50
}
}

7
src/utils/ObjectUtils.js Normal file
View File

@ -0,0 +1,7 @@
export const isEmpty =(object)=>{
for(let key in object) {
if(object.hasOwnProperty(key))
return false;
}
return true;
}