fix some matter panel logic

src/common/model/matter/Matter.ts

@@ -378,7 +378,7 @@ export default class Matter extends BaseEntity {
     let that = this;
     this.httpPost(
       Matter.URL_CHANGE_PRIVACY,
-      { uuid: this.uuid, privacy: privacy },
+      { uuid: this.uuid, privacy: privacy, spaceUuid: this.spaceUuid },
       function (response: any) {
         that.privacy = privacy;
         if (typeof successCallback === 'function') {

src/pages/matter/Detail.tsx

@@ -17,6 +17,7 @@ import TankContentCard from '../widget/TankContentCard';
 import Color from '../../common/model/base/option/Color';
 
 interface RouteParam {
+  spaceUuid?: string;
   uuid: string;
 }
 
@@ -34,13 +35,13 @@ export default class Detail extends TankComponent<IProps, IState> {
   }
 
   componentDidMount() {
-    const { uuid } = this.props.match.params;
+    const { spaceUuid, uuid } = this.props.match.params;
     this.matter.uuid = uuid;
-    let that = this;
+    this.matter.spaceUuid = spaceUuid as string | null;
     this.matter.httpDetail((response: any) => {
-      that.updateUI();
+      this.updateUI();
       if (!response.data.data.dir) {
-        that.downloadToken.httpFetchDownloadToken(that.matter.uuid!);
+        this.downloadToken.httpFetchDownloadToken(this.matter.uuid!);
       }
     });
   }

src/pages/matter/List.tsx

@@ -15,7 +15,6 @@ import {
   Empty,
   Input,
   Menu,
-  message,
   Modal,
   Pagination,
   Row,
@@ -54,7 +53,9 @@ 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';
-import MatterCrawlModal, { ICrawlFormValues } from './widget/MatterCrawlModal';
+import MatterCrawlModal from './widget/MatterCrawlModal';
+import SpaceMember from '../../common/model/space/member/SpaceMember';
+import { SpaceMemberRole } from '../../common/model/space/member/SpaceMemberRole';
 
 interface IProps {
   spaceUuid?: string;
@@ -63,9 +64,11 @@ interface IProps {
 interface IState {}
 
 export default class List extends TankComponent<IProps, IState> {
+  isInSpace = !!this.props.spaceUuid; // 是否在空间中
   // 当前空间
   space = new Space();
-  isInSpace = !!this.props.spaceUuid; // 是否在空间中
+  // 当前用户在当前空间下的成员信息
+  spaceMember = new SpaceMember();
   // 当前目录
   currentDirectory = new Matter();
   //准备新建的文件
@@ -208,6 +211,7 @@ export default class List extends TankComponent<IProps, IState> {
     if (this.props.spaceUuid) {
       this.space.uuid = this.props.spaceUuid;
       this.space.httpDetail(() => this.updateUI());
+      this.spaceMember.httpMine(this.props.spaceUuid, () => this.updateUI());
     }
   }
 
@@ -518,13 +522,22 @@ export default class List extends TankComponent<IProps, IState> {
     ImagePreviewer.showMultiPhoto(imageArray, startIndex);
   }
 
+  goDetail(matter: Matter) {
+    const prefix = this.isInSpace ? `/space/${this.getSpaceUuid()}` : '';
+    Sun.navigateTo(`${prefix}/matter/detail/${matter.uuid}`);
+  }
+
   pagerAndCapacityRefresh() {
     Capacity.instance?.refresh();
     this.refresh();
   }
 
+  // 如果在空间下，有些操作权限只对管理员和读写成员开放
   checkHandlePermission() {
-    return true;
+    if (!this.isInSpace) return true;
+    return [SpaceMemberRole.ADMIN, SpaceMemberRole.READ_WRITE].includes(
+      this.spaceMember.role!
+    );
   }
 
   handleCloseMatterCrawlModal() {
@@ -788,6 +801,7 @@ export default class List extends TankComponent<IProps, IState> {
 
         {director.createMode ? (
           <MatterPanel
+            mode="normal"
             ref={this.newMatterRef}
             matter={this.newMatter}
             director={director}
@@ -798,14 +812,18 @@ export default class List extends TankComponent<IProps, IState> {
           {pager.loading || pager.data.length ? (
             pager.data.map((matter) => (
               <MatterPanel
+                mode={this.isInSpace ? 'space' : 'normal'}
+                spaceMemberRole={
+                  this.isInSpace ? this.spaceMember.role! : undefined
+                }
                 key={matter.uuid!}
                 director={director}
                 matter={matter}
-                isSpace={this.isInSpace}
                 onGoToDirectory={(id) => this.goToDirectory(id)}
                 onDeleteSuccess={() => this.pagerAndCapacityRefresh()}
                 onCheckMatter={(m) => this.checkMatter(m)}
                 onPreviewImage={(m) => this.previewImage(m)}
+                onGoDetail={(m) => this.goDetail(m)}
               />
             ))
           ) : (

src/pages/matter/widget/MatterPanel.tsx

@@ -3,43 +3,40 @@ import Matter from '../../../common/model/matter/Matter';
 import TankComponent from '../../../common/component/TankComponent';
 import Director from './Director';
 import './MatterPanel.less';
-import Sun from '../../../common/model/global/Sun';
 import StringUtil from '../../../common/util/StringUtil';
 import DateUtil from '../../../common/util/DateUtil';
 import AnimateUtil from '../../../common/util/AnimateUtil';
 import MessageBoxUtil from '../../../common/util/MessageBoxUtil';
 import Expanding from '../../widget/Expanding';
 import {
-  CloseCircleOutlined,
   DeleteOutlined,
   DownloadOutlined,
   EditOutlined,
   EllipsisOutlined,
-  ExclamationCircleFilled,
   InfoCircleOutlined,
   LinkOutlined,
   LockOutlined,
-  RedoOutlined,
   UnlockOutlined,
 } from '@ant-design/icons';
-import { Checkbox, Dropdown, Menu, Modal, Tooltip } from 'antd';
+import { Checkbox, Dropdown, Menu, Tooltip } from 'antd';
 import { CheckboxChangeEvent } from 'antd/es/checkbox';
 import SafeUtil from '../../../common/util/SafeUtil';
 import ClipboardUtil from '../../../common/util/ClipboardUtil';
 import Lang from '../../../common/model/global/Lang';
 import MatterDeleteModal from './MatterDeleteModal';
+import { SpaceMemberRole } from '../../../common/model/space/member/SpaceMemberRole';
 
 interface IProps {
   matter: Matter;
-  recycleMode?: boolean; // 回收站模式，默认false，简化相关操作，不可进入文件夹里
-  isSpace?: boolean; // 是否共享空间下
+  mode: 'normal' | 'space'; // normal:正常模式，space:空间模式
+  spaceMemberRole?: SpaceMemberRole; // 用户在当前空间下的角色,只有在space模式下才有值
   director?: Director;
   onCreateDirectoryCallback?: () => any;
   onDeleteSuccess?: () => any;
-  onRecoverySuccess?: () => any;
   onCheckMatter?: (matter?: Matter) => any;
   onPreviewImage?: (matter: Matter) => any;
   onGoToDirectory?: (id: string) => any;
+  onGoDetail?: (matter: Matter) => any;
 }
 
 interface IState {}
@@ -59,6 +56,14 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
     this.state = {};
   }
 
+  // 如果在空间下，有些操作权限只对管理员和读写成员开放
+  checkHandlePermission() {
+    if (this.props.mode !== 'space') return true;
+    return [SpaceMemberRole.ADMIN, SpaceMemberRole.READ_WRITE].includes(
+      this.props.spaceMemberRole!
+    );
+  }
+
   prepareRename() {
     const { matter, director } = this.props;
     if (director!.isEditing()) {
@@ -96,7 +101,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
 
   deleteMatter() {
     MatterDeleteModal.open(
-      !!this.props.isSpace,
+      this.props.mode === 'space',
       () => {
         this.props.matter.httpSoftDelete(() => {
           MessageBoxUtil.success(Lang.t('operationSuccess'));
@@ -112,32 +117,6 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
     );
   }
 
-  hardDeleteMatter() {
-    Modal.confirm({
-      title: Lang.t('actionCanNotRevertConfirm'),
-      icon: <ExclamationCircleFilled twoToneColor="#FFDC00" />,
-      onOk: () => {
-        this.props.matter.httpDelete(() => {
-          MessageBoxUtil.success(Lang.t('operationSuccess'));
-          this.props.onDeleteSuccess!();
-        });
-      },
-    });
-  }
-
-  recoveryMatter() {
-    Modal.confirm({
-      title: Lang.t('actionRecoveryConfirm'),
-      icon: <ExclamationCircleFilled twoToneColor="#FFDC00" />,
-      onOk: () => {
-        this.props.matter.httpRecovery(() => {
-          MessageBoxUtil.success(Lang.t('operationSuccess'));
-          this.props.onRecoverySuccess!();
-        });
-      },
-    });
-  }
-
   changeMatterName(e: any) {
     this.renameMatterName = e.currentTarget.value;
     this.updateUI();
@@ -222,20 +201,14 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
   }
 
   clickRow() {
-    const {
-      matter,
-      recycleMode = false,
-      director,
-      onGoToDirectory,
-      onPreviewImage,
-    } = this.props;
+    const { matter, director, onGoToDirectory, onPreviewImage, mode } =
+      this.props;
     if (director && director.isEditing()) {
       console.error('导演正忙着，不予执行');
       return;
     }
 
     if (matter.dir) {
-      if (recycleMode) return;
       onGoToDirectory!(matter.uuid!);
     } else {
       //图片进行预览操作
@@ -253,197 +226,93 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
   }
 
   renderPcOperation() {
-    const { matter, recycleMode = false } = this.props;
-
-    // 文件操作在正常模式 or 回收站模式下不同，其中回收站模式只保留查看信息与彻底删除操作
-    const handles = recycleMode ? (
-      <>
-        <Tooltip title={Lang.t('matter.recovery')}>
-          <RedoOutlined
-            className="btn-action"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(this.recoveryMatter())
-            }
-          />
-        </Tooltip>
-        <Tooltip title={Lang.t('matter.fileDetail')}>
-          <InfoCircleOutlined
-            className="btn-action"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(
-                Sun.navigateTo('/matter/detail/' + matter.uuid)
-              )
-            }
-          />
-        </Tooltip>
-        <Tooltip title={Lang.t('matter.hardDelete')}>
-          <CloseCircleOutlined
-            className="btn-action text-danger"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(this.hardDeleteMatter())
-            }
-          />
-        </Tooltip>
-      </>
-    ) : (
-      <>
-        {!matter.dir && matter.privacy && (
-          <Tooltip title={Lang.t('matter.setPublic')}>
-            <UnlockOutlined
-              className="btn-action"
-              onClick={(e) =>
-                SafeUtil.stopPropagationWrap(e)(this.changePrivacy(false))
-              }
-            />
-          </Tooltip>
-        )}
-        {!matter.dir && !matter.privacy && (
-          <Tooltip title={Lang.t('matter.setPrivate')}>
-            <LockOutlined
-              className="btn-action"
-              onClick={(e) =>
-                SafeUtil.stopPropagationWrap(e)(this.changePrivacy(true))
-              }
-            />
-          </Tooltip>
-        )}
-        <Tooltip title={Lang.t('matter.fileDetail')}>
-          <InfoCircleOutlined
-            className="btn-action"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(
-                Sun.navigateTo('/matter/detail/' + matter.uuid)
-              )
-            }
-          />
-        </Tooltip>
-        <Tooltip title={Lang.t('matter.rename')}>
-          <EditOutlined
-            className="btn-action"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(this.prepareRename())
-            }
-          />
-        </Tooltip>
-        <Tooltip title={Lang.t('matter.copyPath')}>
-          <LinkOutlined
-            className="btn-action"
-            onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.clipboard())}
-          />
-        </Tooltip>
-        <Tooltip title={Lang.t('matter.download')}>
-          <DownloadOutlined
-            className="btn-action"
-            onClick={(e) => SafeUtil.stopPropagationWrap(e)(matter.download())}
-          />
-        </Tooltip>
-        <Tooltip title={Lang.t('matter.delete')}>
-          <DeleteOutlined
-            className="btn-action text-danger"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(this.deleteMatter())
-            }
-          />
-        </Tooltip>
-      </>
-    );
+    const { matter } = this.props;
 
     return (
       <div className="right-part">
-        <span className="matter-operation text-theme">{handles}</span>
+        <span className="matter-operation text-theme">
+          {!matter.dir && matter.privacy && (
+            <Tooltip title={Lang.t('matter.setPublic')}>
+              <UnlockOutlined
+                className="btn-action"
+                onClick={(e) =>
+                  SafeUtil.stopPropagationWrap(e)(this.changePrivacy(false))
+                }
+              />
+            </Tooltip>
+          )}
+          {!matter.dir && !matter.privacy && (
+            <Tooltip title={Lang.t('matter.setPrivate')}>
+              <LockOutlined
+                className="btn-action"
+                onClick={(e) =>
+                  SafeUtil.stopPropagationWrap(e)(this.changePrivacy(true))
+                }
+              />
+            </Tooltip>
+          )}
+          <Tooltip title={Lang.t('matter.fileDetail')}>
+            <InfoCircleOutlined
+              className="btn-action"
+              onClick={(e) =>
+                SafeUtil.stopPropagationWrap(e)(this.props.onGoDetail?.(matter))
+              }
+            />
+          </Tooltip>
+          <Tooltip title={Lang.t('matter.rename')}>
+            <EditOutlined
+              className="btn-action"
+              onClick={(e) =>
+                SafeUtil.stopPropagationWrap(e)(this.prepareRename())
+              }
+            />
+          </Tooltip>
+          <Tooltip title={Lang.t('matter.copyPath')}>
+            <LinkOutlined
+              className="btn-action"
+              onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.clipboard())}
+            />
+          </Tooltip>
+          <Tooltip title={Lang.t('matter.download')}>
+            <DownloadOutlined
+              className="btn-action"
+              onClick={(e) =>
+                SafeUtil.stopPropagationWrap(e)(matter.download())
+              }
+            />
+          </Tooltip>
+          <Tooltip title={Lang.t('matter.delete')}>
+            <DeleteOutlined
+              className="btn-action text-danger"
+              onClick={(e) =>
+                SafeUtil.stopPropagationWrap(e)(this.deleteMatter())
+              }
+            />
+          </Tooltip>
+        </span>
         <Tooltip title={Lang.t('matter.size')}>
           <span className="matter-size">
             {StringUtil.humanFileSize(matter.size)}
           </span>
         </Tooltip>
-        {recycleMode ? (
-          <Tooltip title={Lang.t('matter.deleteTime')}>
-            <span className="matter-date mr10">
-              {DateUtil.simpleDateHourMinute(matter.deleteTime)}
-            </span>
-          </Tooltip>
-        ) : (
-          <Tooltip title={Lang.t('matter.updateTime')}>
-            <span className="matter-date mr10">
-              {DateUtil.simpleDateHourMinute(matter.updateTime)}
-            </span>
-          </Tooltip>
-        )}
+        <Tooltip title={Lang.t('matter.updateTime')}>
+          <span className="matter-date mr10">
+            {DateUtil.simpleDateHourMinute(matter.updateTime)}
+          </span>
+        </Tooltip>
       </div>
     );
   }
 
-  // 文件操作在正常模式 or 回收站模式下不同，其中回收站模式只保留查看信息与彻底删除操作
   getHandles() {
-    const { matter, recycleMode = false } = this.props;
-    // 回收站模式
-    if (recycleMode)
-      return [
-        <div
-          className="cell-btn navy"
-          onClick={(e) =>
-            SafeUtil.stopPropagationWrap(e)(
-              Sun.navigateTo('/matter/detail/' + this.props.matter.uuid)
-            )
-          }
-        >
-          <InfoCircleOutlined className="btn-action mr5" />
-          {Lang.t('matter.fileDetail')}
-        </div>,
-        <div
-          className="cell-btn navy"
-          onClick={(e) =>
-            SafeUtil.stopPropagationWrap(e)(this.recoveryMatter())
-          }
-        >
-          <RedoOutlined className="btn-action mr5" />
-          {Lang.t('matter.recovery')}
-        </div>,
-        <div
-          className="cell-btn text-danger"
-          onClick={(e) =>
-            SafeUtil.stopPropagationWrap(e)(this.hardDeleteMatter())
-          }
-        >
-          <CloseCircleOutlined className="btn-action mr5" />
-          {Lang.t('matter.hardDelete')}
-        </div>,
-      ];
+    const { matter } = this.props;
 
     // 普通模式
-    const handles = [];
-    if (!matter.dir) {
-      handles.push(
-        matter.privacy ? (
-          <div
-            className="cell-btn navy"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(this.changePrivacy(false))
-            }
-          >
-            <UnlockOutlined className="btn-action mr5" />
-            {Lang.t('matter.setPublic')}
-          </div>
-        ) : (
-          <div
-            className="cell-btn navy"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(this.changePrivacy(true))
-            }
-          >
-            <LockOutlined className="btn-action mr5" />
-            {Lang.t('matter.setPrivate')}
-          </div>
-        )
-      );
-    }
-    handles.push(
+    const handles = [
       <div
         className="cell-btn navy"
         onClick={(e) =>
-          SafeUtil.stopPropagationWrap(e)(
-            Sun.navigateTo('/matter/detail/' + matter.uuid)
-          )
+          SafeUtil.stopPropagationWrap(e)(this.props.onGoDetail?.(matter))
         }
       >
         <InfoCircleOutlined className="btn-action mr5" />
@@ -476,22 +345,44 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
       >
         <DeleteOutlined className="btn-action mr5" />
         {Lang.t('matter.delete')}
-      </div>
-    );
+      </div>,
+    ];
+    if (!matter.dir) {
+      handles.unshift(
+        matter.privacy ? (
+          <div
+            className="cell-btn navy"
+            onClick={(e) =>
+              SafeUtil.stopPropagationWrap(e)(this.changePrivacy(false))
+            }
+          >
+            <UnlockOutlined className="btn-action mr5" />
+            {Lang.t('matter.setPublic')}
+          </div>
+        ) : (
+          <div
+            className="cell-btn navy"
+            onClick={(e) =>
+              SafeUtil.stopPropagationWrap(e)(this.changePrivacy(true))
+            }
+          >
+            <LockOutlined className="btn-action mr5" />
+            {Lang.t('matter.setPrivate')}
+          </div>
+        )
+      );
+    }
+
     return handles;
   }
 
   renderMobileOperation() {
-    const { matter, recycleMode = false } = this.props;
+    const { matter } = this.props;
 
     return (
       <div className="more-panel">
         <div className="cell-btn navy text">
-          <span>
-            {DateUtil.simpleDateHourMinute(
-              recycleMode ? matter.deleteTime : matter.updateTime
-            )}
-          </span>
+          <span>{DateUtil.simpleDateHourMinute(matter.updateTime)}</span>
           <span className="matter-size">
             {StringUtil.humanFileSize(matter.size)}
           </span>