前端展示ftp文件目录

1.前言

项目需求：后端发送ftp目录tree需要前端展示出来，可以搜索文件，并且可以对文件进行操作（创建文件夹，删除文件，重命名等一些操作），这里用用的是element-ui tree控件！技术上没有什么难度！

2. 思路

展示目录结构应该很简单，需要对文件做一些操作，这里可以想象下window系统是怎么操作文件，鼠标右键，弹框显示，我们也可以模拟下，鼠标右键可以获取到tree得当前坐标，然后可以根据坐标显示弹框，当前点击其他地方弹框也要消失！先看下效果图!

这里作了一些判断，如果是文件夹都显示新建文件夹，删除文件夹，文件夹重命名，如果是文件就显示，删除文件，文件重命名

下面是后端传过来的数据，这个是我自己定义的，你需要什么数据可以和后端商量

let data = [
 {
   id: 1,
   fileName: "文件夹1",
   path: "c:/文件夹1",
   type: "folder",
   children: [
     {
       id: 4,
       fileName: "文件夹2",
       path: "c:/文件夹1/文件夹2",
       type: "folder",
       children: [
         {
           id: 9,
           fileName: "1.js",
           path: "c:/文件夹1/文件夹2/1.js",
           type: "file"
         },
         {
           id: 10,
           fileName: "文件夹3",
           path: "c:/文件夹1/文件夹2",
           type: "folder"
         }
       ]
     }
   ]
 },
 {
   id: 2,
   fileName: "文件夹4",
   path: "c:/文件夹1/文件夹4",
   type: "folder",
   children: [
     {
       id: 5,
       fileName: "2.js",
       path: "c:/文件夹1/文件夹4/2.js",
       type: "file"
     },
     {
       id: 6,
       fileName: "3.js",
       path: "c:/文件夹1/文件夹4/3.js",
       type: "file"
     }
   ]
 },
 {
   id: 3,
   fileName: "文件夹5",
   path: "c:/文件夹1/文件夹4",
   type: "folder",
   children: [
     {
       id: 7,
       fileName: "4.js",
       path: "c:/文件夹1/文件夹5/4.js",
       type: "file"
     },
     {
       id: 8,
       fileName: "5.js",
       path: "c:/文件夹1/文件夹5/5.js",
       type: "file"
     }
   ]
 }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

html部分

 <div class="tab-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="视频管理" name="first">视频管理el-tab-pane>
      <el-tab-pane label="图片管理" name="second">图片管理el-tab-pane>
      <el-tab-pane label="文件列表" name="third">
        <div class="custom-tree-container">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          el-input>
          
          <div class="block">
            <el-tree
              :data="data"
              node-key="id"
              default-expand-all
              :filter-node-method="filterNode"
              ref="tree"
              @node-contextmenu="operationFile"
              @node-click="operationClose"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <i
                  :class="[
                    data.type == 'folder'
                      ? 'el-icon-folder'
                      : 'el-icon-notebook-2'
                  ]"
                  style="color: #FFE791; margin-right: 5px;"
                >i>
                <span style="font-size: 15px;">{{ data.fileName }}span>
              span>
            el-tree>
          div>
        div>el-tab-pane
      >
      <el-tab-pane label="文件位置" name="fourth">文件位置el-tab-pane>
    el-tabs>

    <div
      :style="{
        left: btnX + 'px',
        top: btnY + 'px'
      }"
      v-show="dialogVisible"
      id="operation-list"
    >
      <el-button
        v-if="isFolder"
        @click="append"
        class="operation-btn"
        size="small"
        >新建文件夹
      el-button>
      <el-button
        v-if="isFolder"
        @click="remove"
        class="operation-btn"
        size="small"
        >删除文件夹
      el-button>

      <el-button v-else @click="remove" class="operation-btn" size="small"
        >删除文件
      el-button>

      <el-button
        v-if="isFolder"
        @click="rename"
        class="operation-btn"
        size="small"
        >文件夹重命名
      el-button>
      <el-button v-else @click="rename" class="operation-btn" size="small"
        >文件重命名
      el-button>
    div>
  div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

js部分：

let id = 100,
  data = [
    {
      id: 1,
      fileName: "文件夹1",
      path: "c:/文件夹1",
      type: "folder",
      children: [
        {
          id: 4,
          fileName: "文件夹2",
          path: "c:/文件夹1/文件夹2",
          type: "folder",
          children: [
            {
              id: 9,
              fileName: "1.js",
              path: "c:/文件夹1/文件夹2/1.js",
              type: "file"
            },
            {
              id: 10,
              fileName: "文件夹3",
              path: "c:/文件夹1/文件夹2",
              type: "folder"
            }
          ]
        }
      ]
    },
    {
      id: 2,
      fileName: "文件夹4",
      path: "c:/文件夹1/文件夹4",
      type: "folder",
      children: [
        {
          id: 5,
          fileName: "2.js",
          path: "c:/文件夹1/文件夹4/2.js",
          type: "file"
        },
        {
          id: 6,
          fileName: "3.js",
          path: "c:/文件夹1/文件夹4/3.js",
          type: "file"
        }
      ]
    },
    {
      id: 3,
      fileName: "文件夹5",
      path: "c:/文件夹1/文件夹4",
      type: "folder",
      children: [
        {
          id: 7,
          fileName: "4.js",
          path: "c:/文件夹1/文件夹5/4.js",
          type: "file"
        },
        {
          id: 8,
          fileName: "5.js",
          path: "c:/文件夹1/文件夹5/5.js",
          type: "file"
        }
      ]
    }
  ];
export default {
  name: "tree",
  data() {
    return {
      activeName: "second", //tab栏被选中的模块
      filterText: "", //搜索过滤
      dialogVisible: false, //弹框是否显示
      btnX: "", //显示框x坐标
      btnY: "", //显示框y坐标
      operationFileData: "", //右键选中节点属性
      node: "", //右键选中节点所有信息
      isFolder: false, //是否是文件夹
      data: JSON.parse(JSON.stringify(data)) //拷贝一份tree数据，不影响之前的
    };
  },

  mounted() {
    let that = this;
    $(document).on("click", function(event) {
      if (event.target != document.getElementById("operation-list")) {
        that.dialogVisible = false;
      }
    });
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.fileName.indexOf(value) !== -1;
    },

    //关闭操作
    operationClose(evt, data, node) {
      this.dialogVisible = false;
    },

    // 操作tree列表鼠标右键触发
    operationFile(event, data, node, context) {
      this.btnX = event.x;
      this.btnY = event.y;
      this.operationFileData = data; //当前节点数据
      this.node = node; // 将当前节点所有信息
      this.isFolder = data.type == "folder"; //是否是文件夹
      this.dialogVisible = true; // 展示右键菜单
      console.log(event, data, node, context == this);
    },

    //添加文件夹
    append() {
      this.dialogVisible = false;
      this.$prompt("请输入文件名", "提示", {
        // 弹出框用于输入文件名
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[^/\\\:\*\?\"\<\>\|\\]{1,255}$/,
        inputErrorMessage: "文件名格式不对"
      })
        .then(({ value }) => {
          //添加新节点
          let child = {
            id: id++,
            fileName: value,
            type: "folder",
            children: []
          };
          if (!this.operationFileData.children) {
            this.$set(this.operationFileData, "children", []);
          }
          this.operationFileData.children.push(child);
          //展开节点
          if (!this.node.expanded) {
            this.node.expanded = true;
          }
          this.$message({
            type: "success",
            message: "文件夹新建成功！"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },

    //删除文件夹/文件
    remove() {
      this.dialogVisible = false;
      this.$confirm("此操作将永久删除该文件夹/文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const parent = this.node.parent;
          const children = parent.data.children || parent.data;

          const index = children.findIndex(
            d => d.id === this.operationFileData.id
          );
          children.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //给文件/文件夹重新命名
    rename() {
      this.dialogVisible = false;
      this.$prompt("请输入文件名", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: this.node.data.fileName,
        inputPattern: /^[^/\\\:\*\?\"\<\>\|\\]{1,255}$/,
        inputErrorMessage: "文件名格式不对"
      })
        .then(({ value }) => {
          this.node.data.fileName = value;
          this.$message({
            type: "success",
            message: "重命名成功！"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消重命名"
          });
        });
    }
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217

style部分：

.tab-container {
  width: 400px;
  height: 500px;
  margin: 100px auto;
  border: 1px solid #eee;
  padding: 20px;
}

.el-tabs.el-tabs--top {
  height: 100%;
}

.el-tabs__content {
  height: calc(100% - 55px);
  border: 1px solid #eee;
  padding: 10px;
}

.operation-btn {
  width: 100%;
  margin-left: 0 !important;
  font-size: 10px;
  border-radius: 0;
  border-top: none;
}

#operation-list {
  z-index: 999999;
  position: absolute;
  width: 100px;
  background: white;
  box-shadow: 1px 1px 5px #aaa;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

源码已经奉上，效果图如下：