文件管理器记录历史路径

spug_web/src/pages/ssh/FileManager.js

@@ -18,13 +18,14 @@ import { AuthButton, Action } from 'components';
 import { http, uniqueId, X_TOKEN } from 'libs';
 import lds from 'lodash';
 import styles from './index.module.less'
+import moment from 'moment';
 
 
 class FileManager extends React.Component {
   constructor(props) {
     super(props);
     this.input = null;
-    this.input2 = null
+    this.pwdHistoryCaches = new Map()
     this.state = {
       fetching: false,
       showDot: false,
@@ -43,8 +44,9 @@ class FileManager extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.id !== prevProps.id) {
-      this.fetchFiles()
+      let pwd = this.pwdHistoryCaches.get(this.props.id) || []
-      this.setState({objects: []})
+      this.setState({objects: [], pwd})
+      this.fetchFiles(pwd)
     }
   }
 
@@ -72,6 +74,7 @@ class FileManager extends React.Component {
   }, {
     title: '修改时间',
     dataIndex: 'date',
+    sorter: (a, b) => moment(a.date).unix() - moment(b.date).unix(),
     width: 190
   }, {
     title: '属性',
@@ -97,13 +100,14 @@ class FileManager extends React.Component {
   };
 
   fetchFiles = (pwd) => {
-    this.setState({fetching: true});
+    this.setState({ fetching: true });
     pwd = pwd || this.state.pwd;
     const path = '/' + pwd.join('/');
     return http.get('/api/file/', {params: {id: this.props.id, path}})
       .then(res => {
         const objects = lds.orderBy(res, [this._kindSort, 'name'], ['desc', 'asc']);
         this.setState({objects, pwd})
+        this.pwdHistoryCaches.set(this.props.id, pwd)
         this.state.inputPath !== null && this.setState({inputPath: path})
       })
       .finally(() => this.setState({fetching: false}))
@@ -123,19 +127,19 @@ class FileManager extends React.Component {
     this.fetchFiles(pwd)
   };
 
-  handleInputEnter = () => {
+  handleInputEdit = () => {
-    if (this.state.inputPath === null) {
+    let inputPath = '/' + this.state.pwd.join('/')
-      if (this.state.pwd.length > 0) {
+    this.setState({inputPath})
-        this.setState({inputPath: `/${this.state.pwd.join('/')}/`})
-      } else {
-        this.setState({inputPath: '/'})
   }
-      setTimeout(() => this.input2.focus(), 100)
+
-    } else {
+  handleInputEnter = () => {
+    if (this.state.inputPath) {
       let pwdStr = this.state.inputPath.replace(/^\/+/, '')
       pwdStr = pwdStr.replace(/\/+$/, '')
       this.fetchFiles(pwdStr.split('/'))
         .then(() => this.setState({inputPath: null}))
+    } else {
+      this.setState({inputPath: null})
     }
   }
 
@@ -220,7 +224,7 @@ class FileManager extends React.Component {
         <input style={{display: 'none'}} type="file" ref={ref => this.input = ref}/>
         <div className={styles.drawerHeader}>
           {this.state.inputPath !== null ? (
-            <Input ref={ref => this.input2 = ref} size="small" className={styles.input}
+            <Input size="small" className={styles.input}
                    suffix={<div style={{color: '#999', fontSize: 12}}>回车确认</div>}
                    value={this.state.inputPath} onChange={e => this.setState({inputPath: e.target.value})}
                    onBlur={this.handleInputEnter}
@@ -235,7 +239,7 @@ class FileManager extends React.Component {
                   <span>{item}</span>
                 </Breadcrumb.Item>
               ))}
-              <Breadcrumb.Item onClick={this.handleInputEnter}>
+              <Breadcrumb.Item onClick={this.handleInputEdit}>
                 <EditOutlined className={styles.edit}/>
               </Breadcrumb.Item>
             </Breadcrumb>