From 792bb5ddaf9004e214d977593b5d8c65fc9f4920 Mon Sep 17 00:00:00 2001 From: seaheart Date: Fri, 16 Jun 2023 23:03:07 +0800 Subject: [PATCH] add space file list --- src/common/model/matter/Matter.ts | 27 +++-- src/pages/Frame.tsx | 6 + src/pages/bin/List.tsx | 4 +- src/pages/matter/List.less | 3 + src/pages/matter/List.tsx | 159 ++++++++++++++------------- src/pages/space/List.less | 1 + src/pages/space/List.tsx | 29 ++++- src/pages/space/matter/List.tsx | 13 +++ src/pages/widget/BreadcrumbPanel.tsx | 4 +- 9 files changed, 156 insertions(+), 90 deletions(-) create mode 100644 src/pages/space/matter/List.tsx diff --git a/src/common/model/matter/Matter.ts b/src/common/model/matter/Matter.ts index 740a26b..07a2cd6 100644 --- a/src/common/model/matter/Matter.ts +++ b/src/common/model/matter/Matter.ts @@ -16,6 +16,7 @@ import SafeUtil from '../../util/SafeUtil'; import ImagePreviewer from '../../../pages/widget/previewer/ImagePreviewer'; import MessageBoxUtil from '../../util/MessageBoxUtil'; import PreviewerHelper from '../../../pages/widget/previewer/PreviewerHelper'; +import HttpBase from '../base/HttpBase'; export default class Matter extends BaseEntity { puuid: string = ''; @@ -34,6 +35,7 @@ export default class Matter extends BaseEntity { // 文件是否被软删除 deleted: boolean = false; deleteTime: Date | null = null; + spaceUuid: string | null = null; /* 这部分是辅助UI的字段信息 @@ -129,6 +131,7 @@ export default class Matter extends BaseEntity { new InputFilter('提取码', 'shareCode'), new InputFilter('分享根目录', 'shareRootUuid'), new SortFilter('删除时间排序', 'orderDeleteTime'), + new InputFilter('空间uuid', 'spaceUuid'), ]; } @@ -240,12 +243,12 @@ export default class Matter extends BaseEntity { ); } - httpSoftDeleteBatch( + static httpSoftDeleteBatch( uuids: string, successCallback?: any, errorCallback?: any ) { - this.httpPost( + new HttpBase().httpPost( Matter.URL_MATTER_SOFT_DELETE_BATCH, { uuids: uuids }, function (response: any) { @@ -266,8 +269,12 @@ export default class Matter extends BaseEntity { ); } - httpDeleteBatch(uuids: string, successCallback?: any, errorCallback?: any) { - this.httpPost( + static httpDeleteBatch( + uuids: string, + successCallback?: any, + errorCallback?: any + ) { + new HttpBase().httpPost( Matter.URL_MATTER_DELETE_BATCH, { uuids: uuids }, function (response: any) { @@ -288,8 +295,12 @@ export default class Matter extends BaseEntity { ); } - httpRecoveryBatch(uuids: string, successCallback?: any, errorCallback?: any) { - this.httpPost( + static httpRecoveryBatch( + uuids: string, + successCallback?: any, + errorCallback?: any + ) { + new HttpBase().httpPost( Matter.URL_MATTER_RECOVERY_BATCH, { uuids: uuids }, function (response: any) { @@ -340,7 +351,7 @@ export default class Matter extends BaseEntity { ); } - httpMove( + static httpMove( srcUuids: string, destUuid: string, successCallback?: any, @@ -352,7 +363,7 @@ export default class Matter extends BaseEntity { } else { form.destUuid = 'root'; } - this.httpPost( + new HttpBase().httpPost( Matter.URL_MATTER_MOVE, form, function (response: any) { diff --git a/src/pages/Frame.tsx b/src/pages/Frame.tsx index 3ee0763..3cafc00 100644 --- a/src/pages/Frame.tsx +++ b/src/pages/Frame.tsx @@ -46,6 +46,7 @@ import ContentLayout from './layout/ContentLayout'; import SpaceList from './space/List'; import SpaceMemberList from './space/member/List'; +import SpaceMatterList from './space/matter/List'; interface IProps extends RouteComponentProps<{}> {} @@ -182,6 +183,11 @@ class RawFrame extends TankComponent { exact component={SpaceMemberList} /> + ) : (
diff --git a/src/pages/bin/List.tsx b/src/pages/bin/List.tsx index 3d246f0..0303660 100644 --- a/src/pages/bin/List.tsx +++ b/src/pages/bin/List.tsx @@ -120,7 +120,7 @@ export default class List extends TankComponent { icon: , onOk: () => { const uuids = this.selectedMatters.map((i) => i.uuid).toString(); - this.matter.httpDeleteBatch(uuids, () => { + Matter.httpDeleteBatch(uuids, () => { MessageBoxUtil.success(Lang.t('operationSuccess')); this.refresh(); }); @@ -134,7 +134,7 @@ export default class List extends TankComponent { icon: , onOk: () => { const uuids = this.selectedMatters.map((i) => i.uuid).toString(); - this.matter.httpRecoveryBatch(uuids, () => { + Matter.httpRecoveryBatch(uuids, () => { MessageBoxUtil.success(Lang.t('operationSuccess')); this.refresh(); }); diff --git a/src/pages/matter/List.less b/src/pages/matter/List.less index 63a4767..4541f36 100644 --- a/src/pages/matter/List.less +++ b/src/pages/matter/List.less @@ -24,4 +24,7 @@ display: flex; flex-wrap: wrap; } + .matter-pagination { + margin-top: 10px; + } } diff --git a/src/pages/matter/List.tsx b/src/pages/matter/List.tsx index d79c54a..e3df121 100644 --- a/src/pages/matter/List.tsx +++ b/src/pages/matter/List.tsx @@ -1,5 +1,4 @@ import React, { Children } from 'react'; -import { RouteComponentProps } from 'react-router-dom'; import './List.less'; import TankComponent from '../../common/component/TankComponent'; import Pager from '../../common/model/base/Pager'; @@ -17,7 +16,7 @@ import { Modal, Pagination, Row, - Space, + Space as AntdSpace, Upload, } from 'antd'; import MessageBoxUtil from '../../common/util/MessageBoxUtil'; @@ -35,7 +34,6 @@ import { } from '@ant-design/icons'; import ImagePreviewer from '../widget/previewer/ImagePreviewer'; import Sun from '../../common/model/global/Sun'; -import { UserRole } from '../../common/model/user/UserRole'; import StringUtil from '../../common/util/StringUtil'; import MoveBatchModal from './widget/MoveBatchModal'; import ShareOperationModal from './widget/ShareOperationModal'; @@ -50,15 +48,22 @@ import SafeUtil from '../../common/util/SafeUtil'; import MatterSortPanel from './widget/MatterSortPanel'; import { UploadRequestOption as RcCustomRequestOptions } from 'rc-upload/lib/interface'; import Capacity from '../layout/widget/Capacity'; +import Space from '../../common/model/space/Space'; -interface IProps extends RouteComponentProps {} +interface IProps { + spaceUuid?: string; +} interface IState {} +// todo matter list 空间结构需要变更 + export default class List extends TankComponent { - //当前文件夹信息。 - matter = new Matter(); - //准备新建的文件。 + // 当前空间 + space = new Space(); + // 当前目录 + currentDirectory = new Matter(); + //准备新建的文件 newMatter = new Matter(); //当前选中的文件 @@ -137,22 +142,24 @@ export default class List extends TankComponent { }, }; - componentDidMount() { - //刷新一下列表 - if (this.user.role === UserRole.ADMINISTRATOR) { - this.pager.getFilter('userUuid')!.visible = true; - } else { - this.pager.setFilterValue('userUuid', this.user.uuid); - } + async componentDidMount() { + this.initSpace(); this.pager.enableHistory(); this.refresh(); + this.refreshBreadcrumbs(); this.drag.register(); } - componentWillReceiveProps(nextProps: Readonly, nextContext: any) { - if (this.props.location.search !== nextProps.location.search) { - this.pager.enableHistory(); - this.refresh(); + componentWillReceiveProps() { + this.pager.enableHistory(); + this.refresh(); + this.refreshBreadcrumbs(); + } + + initSpace() { + if (this.props.spaceUuid) { + this.space.uuid = this.props.spaceUuid; + this.space.httpDetail(() => this.updateUI()); } } @@ -161,19 +168,13 @@ export default class List extends TankComponent { this.selectedMatters = []; // 刷新文件列表 this.refreshPager(); - // 刷新面包屑 - this.refreshBreadcrumbs(); } refreshPager() { - // 初始化当前matter uuid - if (this.matter.uuid !== this.pager.getFilterValue('puuid')) { - this.matter.uuid = - this.pager.getFilterValue('puuid') || Matter.MATTER_ROOT; + if (!this.pager.getFilterValue('puuid')) { + this.pager.setFilterValue('puuid', Matter.MATTER_ROOT); } - this.pager.setFilterValue('puuid', this.matter.uuid); - //如果没有任何的排序，默认使用时间倒序和文件夹在顶部 if (!this.pager.getCurrentSortFilter()) { this.pager.setFilterValue('orderCreateTime', SortDirection.DESC); @@ -183,6 +184,11 @@ export default class List extends TankComponent { // 过滤掉被软删除的文件 this.pager.setFilterValue('deleted', false); + // 空间下的文件 + if (this.props.spaceUuid) { + this.pager.setFilterValue('spaceUuid', this.props.spaceUuid); + } + this.pager.httpList(); } @@ -226,14 +232,14 @@ export default class List extends TankComponent { const uuids = this.selectedMatters.map((i) => i.uuid).toString(); MatterDeleteModal.open( () => { - this.matter.httpSoftDeleteBatch(uuids, () => { + Matter.httpSoftDeleteBatch(uuids, () => { MessageBoxUtil.success(Lang.t('operationSuccess')); Capacity.instance?.refresh(); this.refresh(); }); }, () => { - this.matter.httpDeleteBatch(uuids, () => { + Matter.httpDeleteBatch(uuids, () => { MessageBoxUtil.success(Lang.t('operationSuccess')); Capacity.instance?.refresh(); this.refresh(); @@ -250,7 +256,7 @@ export default class List extends TankComponent { toggleMoveBatch() { MoveBatchModal.open((targetUuid) => { const uuids = this.selectedMatters.map((i) => i.uuid).join(','); - this.matter.httpMove(uuids, targetUuid, () => { + Matter.httpMove(uuids, targetUuid, () => { MessageBoxUtil.success(Lang.t('operationSuccess')); this.refresh(); }); @@ -318,7 +324,7 @@ export default class List extends TankComponent { m.puuid = j > 1 ? dirPathUuidMap[midPaths.slice(0, j - 1).join('/')] - : this.matter.uuid!; + : this.currentDirectory.uuid!; m.userUuid = this.user.uuid!; await m.httpCreateDirectory( () => { @@ -349,13 +355,12 @@ export default class List extends TankComponent { launchUpload( f: File | FileList, - puuid = this.matter.uuid!, + puuid = this.currentDirectory.uuid!, errHandle = () => {} ) { const files = f instanceof FileList ? f : [f]; for (let i = 0; i < files.length; i++) { const file = files[i]; - console.log(file); // 判断文件是否是文件夹，是的话则停止上传 const fileReader = new FileReader(); fileReader.readAsDataURL(files[i].slice(0, 3)); @@ -412,15 +417,9 @@ export default class List extends TankComponent { } searchFile(value?: string) { - this.pager.resetFilter(); - if (value) { - this.pager.setFilterValue('orderCreateTime', SortDirection.DESC); - this.pager.setFilterValue('orderDir', SortDirection.DESC); - this.pager.setFilterValue('name', value); - this.pager.httpList(); - } else { - this.refresh(); - } + this.pager.setFilterValue('name', value); + this.pager.setFilterValue('page', 0); + this.refresh(); } changeSearch(e: any) { @@ -437,8 +436,7 @@ export default class List extends TankComponent { this.newMatter.name = 'matter.allFiles'; this.newMatter.dir = true; this.newMatter.editMode = true; - this.newMatter.puuid = this.matter.uuid || 'root'; - this.newMatter.userUuid = this.user.uuid!; + this.newMatter.puuid = this.currentDirectory.uuid || Matter.MATTER_ROOT; this.director.createMode = true; this.updateUI(); @@ -468,33 +466,37 @@ export default class List extends TankComponent { goToDirectory(id: string) { this.searchText = null; this.pager.setFilterValue('puuid', id); - this.pager.setFilterValue('name', null); + this.pager.removeFilter('name'); this.pager.page = 0; const query = this.pager.getParams(); - Sun.navigateQueryTo({ path: '/matter/list', query }); - this.refresh(); + Sun.navigateQueryTo({ path: this.getMatterListPath(), query }); + } + + getMatterListPath() { + if (this.props.spaceUuid) + return `/space/${this.props.spaceUuid}/matter/list`; + return '/matter/list'; } //刷新面包屑 refreshBreadcrumbs() { - const uuid = this.pager.getFilterValue('puuid') || Matter.MATTER_ROOT; + this.currentDirectory.uuid = + this.pager.getFilterValue('puuid') || Matter.MATTER_ROOT; + const isRootDirectory = this.currentDirectory.uuid === Matter.MATTER_ROOT; //根目录简单处理即可。 - if (uuid === Matter.MATTER_ROOT) { - this.matter.uuid = Matter.MATTER_ROOT; - this.breadcrumbModels = [ - { - name: Lang.t('matter.allFiles'), - path: '/matter/list', - query: {}, - displayDirect: true, - }, - ]; - } else { - this.matter.uuid = uuid; - this.matter.httpDetail(() => { + const rootBreadcrumb = { + name: Lang.t('matter.allFiles'), + path: this.getMatterListPath(), + query: {}, + displayDirect: isRootDirectory, + }; + + this.breadcrumbModels = [rootBreadcrumb]; + if (!isRootDirectory) { + this.currentDirectory.httpDetail(() => { const arr = []; - let cur: Matter | null = this.matter; + let cur: Matter | null = this.currentDirectory; do { arr.push(cur); cur = cur.parent; @@ -506,26 +508,35 @@ export default class List extends TankComponent { query['puuid'] = item.uuid!; t.push({ name: item.name, - path: '/matter/list', + path: this.getMatterListPath(), query: query, displayDirect: !i, // 当前目录不需要导航 }); return t; }, - [ - { - name: Lang.t('matter.allFiles'), - path: '/matter/list', - query: {}, - displayDirect: false, - }, - ] + [rootBreadcrumb] ); + this.updateUI(); }); } } + getBreadcrumbModels(): BreadcrumbModel[] { + if (this.props.spaceUuid) { + if (!this.space.name) return []; + return [ + { + name: this.space.name, + path: `/space/${this.space.uuid}/matter/list`, + query: {}, + displayDirect: true, + }, + ].concat(this.breadcrumbModels); + } + return this.breadcrumbModels; + } + render() { const { pager, director, selectedMatters, dragEnterCount } = this; return ( @@ -535,11 +546,11 @@ export default class List extends TankComponent {
) : null} - + - + {selectedMatters.length !== pager.data.length ? ( - + { )} this.changePage(page)} current={pager.page + 1} total={pager.totalItems} diff --git a/src/pages/space/List.less b/src/pages/space/List.less index 9c77d17..ec3e906 100644 --- a/src/pages/space/List.less +++ b/src/pages/space/List.less @@ -4,6 +4,7 @@ min-height: 100%; .space-item { width: 100%; + cursor: pointer; &-name-wrapper { position: relative; display: flex; diff --git a/src/pages/space/List.tsx b/src/pages/space/List.tsx index 2b24d54..d6ad02b 100644 --- a/src/pages/space/List.tsx +++ b/src/pages/space/List.tsx @@ -27,6 +27,7 @@ import { } from '@ant-design/icons'; import { DeleteOutlined } from '@ant-design/icons/lib'; import Color from '../../common/model/base/option/Color'; +import SafeUtil from '../../common/util/SafeUtil'; interface IProps extends RouteComponentProps {} @@ -113,6 +114,10 @@ export default class List extends TankComponent { this.props.history.push(`/space/${space.uuid}/member`); } + handleSpaceMatterList(space: Space) { + this.props.history.push(`/space/${space.uuid}/matter/list`); + } + render() { const { pager, modalState } = this; @@ -130,7 +135,11 @@ export default class List extends TankComponent { return ( - + this.handleSpaceMatterList(space)} + >
{ this.handleSpaceMember(space)} + onClick={(e) => + SafeUtil.stopPropagationWrap(e)( + this.handleSpaceMember(space) + ) + } /> this.handleEdit(space)} + onClick={(e) => + SafeUtil.stopPropagationWrap(e)( + this.handleEdit(space) + ) + } /> this.handleDelete(space)} + onClick={(e) => + SafeUtil.stopPropagationWrap(e)( + this.handleDelete(space) + ) + } />
diff --git a/src/pages/space/matter/List.tsx b/src/pages/space/matter/List.tsx new file mode 100644 index 0000000..3fb8857 --- /dev/null +++ b/src/pages/space/matter/List.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import List from '../../matter/List'; +import { useParams } from 'react-router'; + +const SpaceMatterList = () => { + const params = useParams<{ + spaceUuid: string; + }>(); + + return ; +}; + +export default SpaceMatterList; diff --git a/src/pages/widget/BreadcrumbPanel.tsx b/src/pages/widget/BreadcrumbPanel.tsx index 38289ad..ad7ce4d 100644 --- a/src/pages/widget/BreadcrumbPanel.tsx +++ b/src/pages/widget/BreadcrumbPanel.tsx @@ -22,14 +22,14 @@ export default class BreadcrumbPanel extends TankComponent { render() { return ( - + {/* { Sun.navigateTo('/'); }} /> - + */} {this.props.breadcrumbModels.map( (item: BreadcrumbModel, index: number) => {