feat:增加文件筛选,以及文件排序功能

This commit is contained in:
fanxb 2021-10-24 19:09:07 +08:00
parent 81dc964dd9
commit 0f12608ef5
3 changed files with 78 additions and 16 deletions

View File

@ -8,6 +8,7 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@element-plus/icons": "^0.0.11",
"axios": "^0.21.1", "axios": "^0.21.1",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"element-plus": "^1.0.2-beta.48", "element-plus": "^1.0.2-beta.48",

View File

@ -16,6 +16,13 @@
<div class="fileList"> <div class="fileList">
<div> <div>
<el-input
style="display: inline-block; width: 150px"
type="text"
size="small"
placeholder="关键词过滤"
v-model="filterText"
/>
<el-button type="primary" @click="selectAll(true)" size="mini" <el-button type="primary" @click="selectAll(true)" size="mini"
>全选</el-button >全选</el-button
> >
@ -23,7 +30,7 @@
>全不选</el-button >全不选</el-button
> >
</div> </div>
<div v-for="(item, index) in fileList" :key="index"> <div v-for="(item, index) in filterFileList" :key="index">
<span class="folder" v-if="item.isFolder" @click="fileClick(item)">{{ <span class="folder" v-if="item.isFolder" @click="fileClick(item)">{{
item.name item.name
}}</span> }}</span>
@ -48,8 +55,17 @@ export default {
chosedFileList: [], // chosedFileList: [], //
pathList: [], // pathList: [], //
loading: false, // loading: false, //
filterText: "", //
}; };
}, },
computed: {
filterFileList() {
let text = this.filterText.trim();
return text === ""
? this.fileList
: this.fileList.filter((item) => item.name.indexOf(text) > -1);
},
},
async mounted() { async mounted() {
this.isWindows = await HttpUtil.get("/file/isWindows"); this.isWindows = await HttpUtil.get("/file/isWindows");
await this.breadcrumbClick(-1); await this.breadcrumbClick(-1);

View File

@ -50,15 +50,29 @@
> >
</div> </div>
<div class="fileBlock"> <div class="fileBlock">
<!-- 左侧原始文件名 -->
<el-checkbox <el-checkbox
style="display: block" style="display: block"
v-for="(item, index) in fileList" v-for="(item, index) in fileList"
:key="index" :key="index"
v-model="item.checked" v-model="item.checked"
>{{ item.name }}</el-checkbox ><div class="oneFileName">
> {{ item.name }}
<ArrowDownBold
style="width: 20px; padding-left: 10px"
v-if="index < fileList.length - 1"
@click.stop.prevent="moveIndex(index + 1, index)"
/>
<ArrowUpBold
style="width: 20px; padding-left: 10px"
v-if="index > 0"
@click.stop.prevent="moveIndex(index - 1, index)"
/>
</div>
</el-checkbox>
</div> </div>
<div class="fileBlock"> <div class="fileBlock">
<!-- 右侧修改后的文件名-->
<div v-for="(item, index) in changedFileList" :key="index"> <div v-for="(item, index) in changedFileList" :key="index">
{{ item.name }} {{ item.name }}
</div> </div>
@ -86,12 +100,13 @@
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import { ArrowDownBold, ArrowUpBold } from "@element-plus/icons";
import HttpUtil from "../../utils/HttpUtil"; import HttpUtil from "../../utils/HttpUtil";
import FileChose from "@/components/FileChose"; import FileChose from "@/components/FileChose";
import Rule from "@/components/Rule"; import Rule from "@/components/Rule";
export default { export default {
name: "Home", name: "Home",
components: { FileChose, Rule }, components: { FileChose, Rule, ArrowDownBold, ArrowUpBold },
data() { data() {
return { return {
loading: false, // loading: false, //
@ -155,15 +170,9 @@ export default {
}, },
// //
async showResult() { async showResult() {
if (this.fileList.length == 0) { if (!this.checkRuleAndFile()) {
this.$message({ message: "请选择文件", type: "warning" });
return; return;
} }
if (this.ruleList.filter((item) => !item.blocked).length == 0) {
this.$message({ message: "无生效规则", type: "warning" });
return;
}
this.loading = true; this.loading = true;
let body = { let body = {
fileList: this.fileList, fileList: this.fileList,
@ -178,6 +187,9 @@ export default {
this.loading = false; this.loading = false;
}, },
async submit() { async submit() {
if (!this.checkRuleAndFile()) {
return;
}
if (this.changedFileList.filter((item) => item.errorMessage).length > 0) { if (this.changedFileList.filter((item) => item.errorMessage).length > 0) {
this.$message({ message: "存在错误,无法执行操作", type: "error" }); this.$message({ message: "存在错误,无法执行操作", type: "error" });
return; return;
@ -192,13 +204,36 @@ export default {
this.$message({ message: "重命名成功", type: "success" }); this.$message({ message: "重命名成功", type: "success" });
}, },
// //
deleteCheckedFiles() { async deleteCheckedFiles() {
this.fileList = this.fileList.filter((item) => !item.checked); this.fileList = this.fileList.filter((item) => !item.checked);
this.needPreview = true;
await this.showResult();
}, },
// //
selectAllFiles() { selectAllFiles() {
this.fileList.forEach((item) => (item.checked = !item.checked)); this.fileList.forEach((item) => (item.checked = !item.checked));
}, },
//
checkRuleAndFile() {
if (this.fileList.length == 0) {
this.$message({ message: "请选择文件", type: "warning" });
return false;
}
if (this.ruleList.filter((item) => !item.blocked).length == 0) {
this.$message({ message: "无生效规则", type: "warning" });
return false;
}
return true;
},
//
async moveIndex(newIndex, index) {
let temp = this.fileList[index];
this.fileList[index] = this.fileList[newIndex];
this.fileList[newIndex] = temp;
this.fileList = [...this.fileList];
this.needPreview = true;
await this.showResult();
},
}, },
}; };
</script> </script>
@ -220,9 +255,19 @@ export default {
} }
} }
.fileBlock { .fileList {
margin-top: 20px;
text-align: left; text-align: left;
display: inline-block;
width: 50%; .fileBlock {
text-align: left;
display: inline-block;
width: 50%;
.oneFileName {
display: flex;
align-items: center;
}
}
} }
</style> </style>