移动文件夹对话框组件中 添加新增文件夹功能

src/components/File/AddFolderDialog.vue

@@ -0,0 +1,115 @@
+<template>
+  <!-- 新建文件夹对话框 -->
+  <el-dialog
+    title="新建文件夹"
+    :visible.sync="dialogStatus"
+    :close-on-click-modal="false"
+    width="550px"
+  >
+    <el-form
+      class="add-folder-form"
+      :model="form"
+      :rules="formRules"
+      ref="addFolderForm"
+      label-width="100px"
+      label-position="top"
+    >
+      <el-form-item label="文件夹名称" prop="fileName">
+        <el-input
+          v-model="form.fileName"
+          placeholder="请输入文件夹名称"
+          type="textarea"
+          autosize
+          maxlength="255"
+          show-word-limit
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleAddFolderDialogCancel('addFolderForm')">取 消</el-button>
+      <el-button type="primary" :loading="loading" @click="handleAddFolderDialogOk('addFolderForm')">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { createFold } from '@/request/file.js'
+
+export default {
+  name: 'AddFolderDialog',
+  props: {
+    // 对话框是否可见
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    // 文件路径
+    filePath: {
+      required: true,
+      type: String
+    }
+  },
+  data() {
+    return {
+      form: {
+        fileName: ''
+      },
+      formRules: {
+        fileName: [{ required: true, message: '请输入文件夹名称', trigger: 'blur' }]
+      },
+      loading: false
+    }
+  },
+  computed: {
+    // 对话框是否可见
+    dialogStatus: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  methods: {
+    /**
+     * 新建文件夹对话框 | 取消按钮点击事件
+     * @description 关闭对话框，重置表单
+     * @param {string} formName 表单ref值
+     */
+    handleAddFolderDialogCancel(formName) {
+      this.dialogStatus = false
+      this.$refs[formName].resetFields()
+    },
+    /**
+     * 新建文件夹对话框 | 确定按钮点击事件
+     * @description 校验表单，校验通过后调用新建文件夹接口
+     * @param {string} formName 表单ref值
+     */
+    handleAddFolderDialogOk(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          createFold({
+            fileName: this.form.fileName,
+            filePath: this.filePath,
+            isDir: 1
+          }).then((res) => {
+            this.loading = false
+            if (res.success) {
+              this.$message.success('添加成功')
+              this.dialogStatus = false
+              this.$refs[formName].resetFields()
+              this.$emit('confirmDialog')
+            } else {
+              this.$message.warning(res.message)
+            }
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>

src/components/FileTable.vue

@@ -399,22 +399,19 @@ export default {
      * 文件路径变化时清空表格已选行
      */
     filePath() {
-      this.$refs.multipleTable.clearSelection()
-      this.$emit('setSelectionFile', [])
+      this.clearSelectedTable()
     },
     /**
      * 文件类型变化时清空表格已选行
      */
     fileType() {
-      this.$refs.multipleTable.clearSelection()
-      this.$emit('setSelectionFile', [])
+      this.clearSelectedTable()
     },
     /**
      * 文件列表变化时清空表格已选行
      */
     fileList() {
-      this.$refs.multipleTable.clearSelection()
-      this.$emit('setSelectionFile', [])
+      this.clearSelectedTable()
     },
     /**
      * 监听表格操作列按钮折叠状态变化
@@ -429,6 +426,14 @@ export default {
     this.operaColumnExpand = this.getCookies('operaColumnExpand') === 'true' //  读取保存的状态
   },
   methods: {
+    /**
+     * 清空表格已选行
+     * @description 用于父组件调用 | 本组件调用，请勿删除
+     */
+    clearSelectedTable() {
+      this.$refs.multipleTable.clearSelection()
+      this.$emit('setSelectionFile', [])
+    },
     /**
      * 根据文件扩展名设置文件图片
      * @param {object} row 文件信息

src/components/Header.vue

@@ -5,7 +5,7 @@
       <el-menu-item index="Home" :route="{ name: 'Home' }">首页</el-menu-item>
       <el-menu-item index="File" :route="{ name: 'File', query: { fileType: 0, filePath: '/' } }">网盘</el-menu-item>
       <el-menu-item index="MyShare" :route="{ name: 'MyShare', query: { filePath: '/' } }" >我的分享</el-menu-item>
-      <el-menu-item><a href="https://www.qiwenshare.com/topic/detail/6/24" target="_blank">帮助文档</a></el-menu-item>
+      <div class="el-menu-item"><a href="https://www.qiwenshare.com/topic/detail/6/24" target="_blank">帮助文档</a></div>
       <!-- 为了和其他菜单样式保持一致，请一定要添加类名 el-menu-item -->
       <div class="el-menu-item exit" @click="exitButton()" v-show="isLogin">
         退出

src/components/MoveFileDialog.vue

@@ -3,22 +3,44 @@
     <!-- 移动文件-选择目标路径 -->
     <el-dialog title="选择目标路径" :visible.sync="dialogData.visible" @open="handleDialogOpen">
       <div class="el-dialog-div">
+        <!-- 选择的目标路径 -->
+        <div class="target-path">
+          <span class="label">目标路径：</span>
+          <el-input class="content" v-model="targetPath" readonly size="small"></el-input>
+        </div>
+        <!-- 文件目录树 -->
         <el-tree
           :data="fileTree"
           :props="defaultProps"
           :highlight-current="true"
+          :expand-on-click-node="false"
+          node-key="attributes.filePath"
           @node-click="handleNodeClick"
-        ></el-tree>
+        >
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <span class="label">{{ node.label }}</span>
+            <el-button class="add-folder-btn" type="text" size="mini" @click.stop="handleAddFolderBtnClick(data)">
+              新建文件夹
+            </el-button>
+          </span>
+        </el-tree>
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="$emit('setDialogData', null, false)">取 消</el-button>
         <el-button type="primary" @click="$emit('confirmDialog')">确 定</el-button>
       </div>
     </el-dialog>
+    <!-- 新建文件夹对话框 -->
+    <AddFolderDialog
+      :visible.sync="dialogAddFolder.visible"
+      :filePath="dialogAddFolder.filePath"
+      @confirmDialog="initFileTree(dialogAddFolder.filePath)"
+    ></AddFolderDialog>
   </div>
 </template>
 
 <script>
+import AddFolderDialog from '@/components/File/AddFolderDialog.vue'
 import { getFoldTree } from '@/request/file.js'
 
 export default {
@@ -26,13 +48,22 @@ export default {
   props: {
     dialogData: Object
   },
+  components: {
+    AddFolderDialog
+  },
   data() {
     return {
+      targetPath: '/', //  目标路径
       defaultProps: {
         children: 'children',
         label: 'label'
       },
-      fileTree: []
+      fileTree: [], //  文件夹目录树
+      // 新建文件夹对话框数据
+      dialogAddFolder: {
+        visible: false,
+        filePath: '/' //  新增文件夹的父级路径
+      }
     }
   },
   methods: {
@@ -60,14 +91,22 @@ export default {
      * @param {object} data 当前点击的节点信息
      */
     handleNodeClick(data) {
-      let selectFilePath = data.attributes.filePath ? data.attributes.filePath : '/'
-      this.$emit('setSelectFilePath', selectFilePath)
+      this.targetPath = data.attributes.filePath ? data.attributes.filePath : '/'
+      this.$emit('setSelectFilePath', this.targetPath)
+    },
+    /**
+     * 新建文件夹按钮点击事件
+     */
+    handleAddFolderBtnClick(data) {
+      this.dialogAddFolder.filePath = data.attributes.filePath ? data.attributes.filePath : '/'
+      this.dialogAddFolder.visible = true
     }
   }
 }
 </script>
 
 <style lang="stylus" scoped>
+@import '~@/assets/styles/varibles.styl';
 @import '~@/assets/styles/mixins.styl';
 
 .move-dialog-wrapper {
@@ -84,6 +123,19 @@ export default {
         overflow: auto;
         setScrollbar(6px);
 
+        .target-path {
+          display: flex;
+          align-items: center;
+
+          .label {
+            width: 80px;
+          }
+
+          .content {
+            flex: 1;
+          }
+        }
+
         .el-tree {
           .el-tree-node__content {
             height: 34px;
@@ -92,14 +144,29 @@ export default {
             .el-icon-caret-right {
               font-size: 18px;
             }
+
+            .custom-tree-node {
+              flex: 1;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              font-size: 14px;
+              padding-right: 8px;
+            }
+
+            .add-folder-btn {
+              display: none;
+            }
+
+            &:hover {
+              .add-folder-btn {
+                display: block;
+              }
+            }
           }
 
           .el-tree-node.is-current>.el-tree-node__content {
             color: $Primary;
-
-            .el-tree-node__expand-icon {
-              color: inherit;
-            }
           }
         }
       }

src/views/Share/index.vue

@@ -10,6 +10,7 @@
       </div>
       <!-- 文件列表-表格模式 -->
       <FileTable
+        ref="fileTableInstance"
         :fileType="7"
         :filePath="filePath"
         :fileList="fileList"
@@ -269,9 +270,8 @@ export default {
       }).then((res) => {
         if (res.success) {
           this.$message.success('保存成功')
-          // this.getTableDataByType()
           this.dialogSelectPath.visible = false
-          this.selectionFile = []
+          this.$refs.fileTableInstance.clearSelectedTable() //  清空表格已选项
         } else {
           this.$message.error(res.message)
         }

src/views/file/components/FileList/components/OperationMenu.vue

@@ -104,39 +104,11 @@
     </el-popover>
 
     <!-- 新建文件夹对话框 -->
-    <el-dialog
-      title="新建文件夹"
+    <AddFolderDialog
       :visible.sync="dialogAddFolder.visible"
-      :close-on-click-modal="false"
-      width="550px"
-      @close="handleAddFolderDialogCancel('addFolderForm')"
-    >
-      <el-form
-        class="add-folder-form"
-        :model="dialogAddFolder.form"
-        :rules="dialogAddFolder.formRules"
-        ref="addFolderForm"
-        label-width="100px"
-        label-position="top"
-      >
-        <el-form-item label="文件夹名称" prop="fileName">
-          <el-input
-            v-model="dialogAddFolder.form.fileName"
-            placeholder="请输入文件夹名称"
-            type="textarea"
-            autosize
-            maxlength="255"
-            show-word-limit
-          ></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="handleAddFolderDialogCancel('addFolderForm')">取 消</el-button>
-        <el-button type="primary" :loading="dialogAddFolder.loading" @click="handleAddFolderDialogOk('addFolderForm')"
-          >确 定</el-button
-        >
-      </div>
-    </el-dialog>
+      :filePath="filePath"
+      @confirmDialog="$emit('getTableDataByType')"
+    ></AddFolderDialog>
 
     <!-- 多选文件下载，页面隐藏 -->
     <a
@@ -152,7 +124,8 @@
 </template>
 
 <script>
-import { batchDeleteFile, createFold, batchDeleteRecoveryFile } from '@/request/file.js'
+import { batchDeleteFile, batchDeleteRecoveryFile } from '@/request/file.js'
+import AddFolderDialog from '@/components/File/AddFolderDialog.vue'
 import SelectColumn from './SelectColumn'
 
 export default {
@@ -173,6 +146,7 @@ export default {
     batchOperate: Boolean
   },
   components: {
+    AddFolderDialog,
     SelectColumn
   },
   data() {
@@ -183,14 +157,7 @@ export default {
       },
       // 新建文件夹对话框数据
       dialogAddFolder: {
-        visible: false,
-        form: {
-          fileName: ''
-        },
-        formRules: {
-          fileName: [{ required: true, message: '请输入文件夹名称', trigger: 'blur' }]
-        },
-        loading: false
+        visible: false
       },
       batchDeleteFileDialog: false,
       fileGroupLable: 0 //  文件展示模式
@@ -253,45 +220,7 @@ export default {
     handleUploadFileBtnClick(type) {
       this.$EventBus.$emit('openUploader', this.uploadFileData, type)
     },
-    /**
-     * 新建文件夹对话框 | 取消按钮点击事件
-     * @description 关闭对话框，重置表单
-     * @param {string} formName 表单ref值
-     */
-    handleAddFolderDialogCancel(formName) {
-      this.dialogAddFolder.visible = false
-      this.$refs[formName].resetFields()
-    },
-    /**
-     * 新建文件夹对话框 | 确定按钮点击事件
-     * @description 校验表单，校验通过后调用新建文件夹接口
-     * @param {string} formName 表单ref值
-     */
-    handleAddFolderDialogOk(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.dialogAddFolder.loading = true
-          let data = {
-            fileName: this.dialogAddFolder.form.fileName,
-            filePath: this.filePath,
-            isDir: 1
-          }
-          createFold(data).then((res) => {
-            this.dialogAddFolder.loading = false
-            if (res.success) {
-              this.$message.success('添加成功')
-              this.dialogAddFolder.visible = false
-              this.$refs[formName].resetFields()
-              this.$emit('getTableDataByType')
-            } else {
-              this.$message.warning(res.message)
-            }
-          })
-        } else {
-          return false
-        }
-      })
-    },
+
     /**
      * 批量删除按钮点击事件
      * @description 区分 删除到回收站中 | 在回收站中彻底删除，调用相应的删除文件接口
@@ -385,7 +314,7 @@ export default {
      * 分享按钮点击事件
      */
     handleBatchShareBtnClick() {
-      this.$emit("setShareFileDialogData")
+      this.$emit('setShareFileDialogData')
     },
     /**
      * 批量下载按钮点击事件