|
@@ -22,12 +22,13 @@
|
|
|
</li>
|
|
|
<li
|
|
|
class="folder-item"
|
|
|
+ v-loading="loading"
|
|
|
:class="{ 'folder-select': folder.checked }"
|
|
|
v-for="folder in folderData"
|
|
|
:key="folder.id"
|
|
|
:title="folder.name"
|
|
|
@contextmenu.prevent="openMenu($event, folder)"
|
|
|
- @click="handleCheckFolder(folder)"
|
|
|
+ @click="handleCheckFolder(folder.id)"
|
|
|
>
|
|
|
<span v-show="!folder.showInput" class="folder-item-text">{{ folder.name }}</span>
|
|
|
<!-- <el-badge is-dot class="folder-item-number">103</el-badge> -->
|
|
@@ -41,8 +42,8 @@
|
|
|
@keyup.native.enter="handleUpdateFolderName(folder)"
|
|
|
placeholder="请输入文件夹名称"
|
|
|
></el-input>
|
|
|
- <i v-show="folder.showInput" class="el-icon-refresh-left revoke-icon" title="撤销" @click="handleRevokeUpdateFolder(folder)"></i>
|
|
|
- <i v-show="folder.showInput" class="el-icon-check confirm-icon" title="确认" @click="handleUpdateFolderName(folder)"></i>
|
|
|
+ <i v-show="folder.showInput" class="el-icon-refresh-left revoke-icon" title="撤销" @click.stop="handleRevokeUpdateFolder(folder)"></i>
|
|
|
+ <i v-show="folder.showInput" class="el-icon-check confirm-icon" title="确认" @click.stop="handleUpdateFolderName(folder)"></i>
|
|
|
</li>
|
|
|
<!-- 右键菜单部分 -->
|
|
|
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
|
|
@@ -58,52 +59,57 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
showAddFolder: false,
|
|
|
+ loading: false,
|
|
|
folderName: "未命名文件夹",
|
|
|
- folderData: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- name: "能源系统",
|
|
|
- updateName: "能源系统",
|
|
|
- checked: false,
|
|
|
- showInput: false,
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "排水系统",
|
|
|
- updateName: "排水系统",
|
|
|
- checked: false,
|
|
|
- showInput: false,
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: "消防水系统",
|
|
|
- updateName: "消防水系统",
|
|
|
- checked: false,
|
|
|
- showInput: false,
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- name: "公共照明系统公共照明系统公共照明系统公共照明系统",
|
|
|
- updateName: "公共照明系统公共照明系统公共照明系统公共照明系统",
|
|
|
- checked: false,
|
|
|
- showInput: false,
|
|
|
- },
|
|
|
- {
|
|
|
- id: 5,
|
|
|
- name: "暖通空调系统",
|
|
|
- updateName: "暖通空调系统",
|
|
|
- checked: false,
|
|
|
- showInput: false,
|
|
|
- },
|
|
|
- ],
|
|
|
+ folderData: [],
|
|
|
visible: false,
|
|
|
top: 0,
|
|
|
left: 0,
|
|
|
rightClickFolder: null,
|
|
|
};
|
|
|
},
|
|
|
- mounted() {},
|
|
|
+ created() {
|
|
|
+ this.getFolderData();
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ // 获取文件夹数据
|
|
|
+ getFolderData(folderId) {
|
|
|
+ this.loading = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ const res = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "能源系统",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "排水系统",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "消防水系统",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: "公共照明系统公共照明系统公共照明系统公共照明系统",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ name: "暖通空调系统",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.folderData = res.map(folder => {
|
|
|
+ folder.updateName = folder.name;
|
|
|
+ folder.checked = false;
|
|
|
+ folder.showInput = false;
|
|
|
+ return folder
|
|
|
+ })
|
|
|
+ if (folderId) {// 如果参数传入文件夹Id,则选中对应的文件夹
|
|
|
+ this.handleCheckFolder(folderId)
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
// 点击添加文件夹icon打开弹窗
|
|
|
handleShowAddFolder() {
|
|
|
this.showAddFolder = true;
|
|
@@ -123,8 +129,9 @@ export default {
|
|
|
this.$message({ showClose: true, message: "您输入的文件夹已存在!" });
|
|
|
} else {
|
|
|
setTimeout(() => {
|
|
|
+ const folderId = Math.floor(Math.random() * 1000);
|
|
|
this.folderData.unshift({
|
|
|
- id: Math.floor(Math.random() * 1000),
|
|
|
+ id: folderId,
|
|
|
name: this.folderName,
|
|
|
updateName: this.folderName,
|
|
|
checked: false,
|
|
@@ -132,6 +139,7 @@ export default {
|
|
|
});
|
|
|
this.$message.success("添加文件夹成功!");
|
|
|
this.handleRevokeAddFolder();
|
|
|
+ this.handleCheckFolder(folderId);
|
|
|
}, 1000);
|
|
|
}
|
|
|
},
|
|
@@ -142,11 +150,11 @@ export default {
|
|
|
this.folderName = "未命名文件夹";
|
|
|
},
|
|
|
// 点击文件夹
|
|
|
- handleCheckFolder(folder) {
|
|
|
- this.$emit("changeFolder", folder);
|
|
|
+ handleCheckFolder(folderId) {
|
|
|
this.folderData.forEach((item) => {
|
|
|
- if (item.id === folder.id) {
|
|
|
+ if (item.id === folderId) {
|
|
|
item.checked = true;
|
|
|
+ this.$emit("changeFolder", item);
|
|
|
} else {
|
|
|
item.checked = false;
|
|
|
}
|