|
|
@@ -4,8 +4,8 @@
|
|
|
<el-header height="45px" style="background-color: #fafafa; padding: 0 10px;">
|
|
|
<soft-header ref="headerRef" @update-soft="updateSoft()" @export-file="exportFile"></soft-header>
|
|
|
</el-header>
|
|
|
- <el-main ref="el-main" style="background-color: #fafafa;">
|
|
|
- <div v-if="!menuIndex" style="padding: 0 30px; position: absolute; height: 50%; margin: auto 0; top: 0; bottom: 0; width: 100%;">
|
|
|
+ <el-main ref="el-main" style="background-color: #fafafa; position: relative;">
|
|
|
+ <div v-if="!menuIndex" style="padding: 30px; position: absolute; top: 0; bottom: 0; margin: auto; height: fit-content;">
|
|
|
<div class="cmenu-item">
|
|
|
<el-row :gutter="30">
|
|
|
<el-col :span="6">
|
|
|
@@ -33,37 +33,68 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <el-row :gutter="30" style="margin-top: 30px;">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="citem-nav" @click="menuIndex = '5'">
|
|
|
+ <img src="../assets/image/a-tifile.png" class="citem-img" />
|
|
|
+ <p class="citem-name">提取文件名</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="citem-nav" @click="menuIndex = '6'">
|
|
|
+ <img src="../assets/image/a-tifolder.png" class="citem-img" />
|
|
|
+ <p class="citem-name">提取文件夹名</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="citem-nav" @click="menuIndex = '7'">
|
|
|
+ <img src="../assets/image/a-create.png" class="citem-img" />
|
|
|
+ <p class="citem-name">批量创建文件</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<template v-else>
|
|
|
+ <el-row type="flex" class="row-bg">
|
|
|
+ <el-button style="margin: 8px 15px 0 15px;" type="danger" size="mini" icon="el-icon-arrow-left" circle @click="menuIndex=''"></el-button>
|
|
|
+ <el-tabs v-model="menuIndex">
|
|
|
+ <el-tab-pane name="1">
|
|
|
+ <span slot="label"><img src="../assets/image/a-file.png" class="tab-img"/>文件重命名</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane name="2">
|
|
|
+ <span slot="label"><img src="../assets/image/a-folder.png" class="tab-img"/>文件夹重命名</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane name="3">
|
|
|
+ <span slot="label"><img src="../assets/image/a-timefile.png" class="tab-img"/>文件时间属性</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane name="4">
|
|
|
+ <span slot="label"><img src="../assets/image/a-timefolder.png" class="tab-img"/>文件夹时间属性</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane name="5">
|
|
|
+ <span slot="label"><img src="../assets/image/a-tifile.png" class="tab-img"/>提取文件名</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane name="6">
|
|
|
+ <span slot="label"><img src="../assets/image/a-tifolder.png" class="tab-img"/>提取文件夹名</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane name="7">
|
|
|
+ <span slot="label"><img src="../assets/image/a-create.png" class="tab-img"/>批量创建文件</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-row>
|
|
|
<div class="content-top">
|
|
|
<el-button-group>
|
|
|
- <el-button type="primary" size="mini" icon="el-icon-document" v-if="menuIndex == '1' || menuIndex == '3'"
|
|
|
+ <el-button type="primary" size="mini" icon="el-icon-document" v-if="['1','3','5'].indexOf(menuIndex) > -1"
|
|
|
@click="pickFile()">添加文件</el-button>
|
|
|
- <el-button type="primary" size="mini" icon="el-icon-document" v-if="menuIndex == '1' || menuIndex == '3'"
|
|
|
+ <el-button type="primary" size="mini" icon="el-icon-document" v-if="['1','3','5'].indexOf(menuIndex) > -1"
|
|
|
@click="pickDir()">添加目录</el-button>
|
|
|
- <el-button type="primary" size="mini" icon="el-icon-folder" v-if="menuIndex == '2' || menuIndex == '4'"
|
|
|
+ <el-button type="primary" size="mini" icon="el-icon-folder" v-if="['2','4','6'].indexOf(menuIndex) > -1"
|
|
|
@click="addDir()">添加文件夹</el-button>
|
|
|
<el-button type="primary" size="mini" icon="el-icon-delete"
|
|
|
@click="clearList()">清空文件</el-button>
|
|
|
</el-button-group>
|
|
|
|
|
|
- <el-row type="flex" class="row-bg">
|
|
|
- <el-col :span="2" style="text-align: right;">
|
|
|
- <el-button style="margin-top: 8px;" type="danger" size="mini"
|
|
|
- icon="el-icon-arrow-left" circle @click="menuIndex=''"></el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="22" style="padding: 0 15px;">
|
|
|
- <el-tabs v-model="menuIndex">
|
|
|
- <el-tab-pane label="文件重命名" name="1"></el-tab-pane>
|
|
|
- <el-tab-pane label="文件夹重命名" name="2"></el-tab-pane>
|
|
|
- <el-tab-pane label="文件时间属性" name="3"></el-tab-pane>
|
|
|
- <el-tab-pane label="文件夹时间属性" name="4"></el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
<div>
|
|
|
<el-popover placement="bottom" popper-class="popper-open" trigger="hover" content="命名撤回一次">
|
|
|
<i slot="reference" class="el-icon-refresh-left icon-back icon-back-grey" v-if="backFileList.length == 0" ></i>
|
|
|
@@ -71,18 +102,17 @@
|
|
|
</el-popover>
|
|
|
<el-button type="danger" style="margin-left: 20px;" @click="exportFile()" >开始处理</el-button>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
|
|
|
- <div v-if="(menuIndex != '2' && menuIndex != '4' && fileList.length == 0) || (menuIndex != '1' && menuIndex != '3' && dirList.length == 0)" class="upload-area">
|
|
|
- <div class="file-area" v-if="menuIndex == '1' || menuIndex == '3'" @click="pickFile()" id="drag-audio" @dragover.prevent @drop="handleDrop">
|
|
|
+ <div v-if="(['1','3','5'].indexOf(menuIndex) > -1 && fileList.length == 0) || (['2','4','6'].indexOf(menuIndex) > -1 && dirList.length == 0)" class="upload-area">
|
|
|
+ <div class="file-area" v-if="['1','3','5'].indexOf(menuIndex) > -1" @click="pickFile()" id="drag-audio" @dragover.prevent @drop="handleDrop">
|
|
|
<div class="file-area-pos">
|
|
|
<img src="../assets/image/a-file.png" class="upload-img"/>
|
|
|
<p style="font-size: 16px;">点击添加文件或拖拽文件到此</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="file-area" v-if="menuIndex == '2' || menuIndex == '4'" @click="addDir()" id="drag-audio" @dragover.prevent @drop="handleDrop">
|
|
|
+ <div class="file-area" v-if="['2','4','6'].indexOf(menuIndex) > -1" @click="addDir()" id="drag-audio" @dragover.prevent @drop="handleDrop">
|
|
|
<div class="file-area-pos">
|
|
|
<img src="../assets/image/a-folder.png" class="upload-img"/>
|
|
|
<p style="font-size: 16px;">点击添加文件夹或拖拽文件夹到此</p>
|
|
|
@@ -93,14 +123,14 @@
|
|
|
<div class="soft-content" v-else>
|
|
|
<div class="content-left">
|
|
|
<div class="table-scroll" @dragover.prevent @drop="handleDrop">
|
|
|
- <!-- 1、文件重命名 :sort-config="{remote: false, sortMethod: sortMethod}" -->
|
|
|
+ <!-- 1、文件重命名 @sort-change="sortChange" sortMethod: customSortMethod-->
|
|
|
<vxe-table
|
|
|
- v-show="menuIndex == '1'" @sort-change="sortChange"
|
|
|
+ v-show="['1','5'].indexOf(menuIndex) > -1"
|
|
|
show-overflow class="img-table" max-height="100%" empty-text="没有更多数据了！" :loading="tabLoading"
|
|
|
:loading-config="{icon: 'vxe-icon-indicator roll', text: '文件加载中...'}" :row-config="{isHover: true}"
|
|
|
:edit-config="{trigger: 'click', mode: 'cell'}" :data="fileList" :scroll-y="{enabled: true}">
|
|
|
- <vxe-column field="name" :title="'原文件名'+'(' + fileList.length + ')'" sortable></vxe-column>
|
|
|
- <vxe-column field="newName" title="新文件名" :edit-render="{}">
|
|
|
+ <vxe-column field="name" :title="'原文件名'+'(' + fileList.length + ')'"></vxe-column>
|
|
|
+ <vxe-column field="newName" title="新文件名" :edit-render="{}" v-if="menuIndex == '1'">
|
|
|
<template #edit="{ row, rowIndex }">
|
|
|
<div style="display: flex; justify-content: space-between;">
|
|
|
<vxe-input v-model="row.modifyName" type="text" placeholder="请输入新文件名" @input="modifyChange(row, rowIndex)"></vxe-input>
|
|
|
@@ -188,7 +218,7 @@
|
|
|
</vxe-table>
|
|
|
<!-- 3、文件时间属性-->
|
|
|
<vxe-table
|
|
|
- v-show="menuIndex == '3'"
|
|
|
+ v-show="menuIndex == '33'"
|
|
|
show-overflow class="img-table" max-height="100%" empty-text="没有更多数据了！" :loading="tabLoading"
|
|
|
:loading-config="{icon: 'vxe-icon-indicator roll', text: '文件加载中...'}" :row-config="{isHover: true}"
|
|
|
:edit-config="{trigger: 'click', mode: 'cell'}" :data="fileList" :scroll-y="{enabled: true}">
|
|
|
@@ -557,7 +587,7 @@ export default {
|
|
|
tipsModal: true,
|
|
|
tipsDesc: '非会员不支持修改时间属性，如需完整功能请开通会员',
|
|
|
imgUrl: this.$api.imgUrl,
|
|
|
- menuIndex: '', // 重命名类型 1 or 2
|
|
|
+ menuIndex: '1', // 重命名类型 1 or 2
|
|
|
fileList: [], // 文件列表
|
|
|
fileTimeList: [], // 文件的时间列表
|
|
|
backFileList: [], // 回撤文件列表
|
|
|
@@ -798,8 +828,10 @@ export default {
|
|
|
let lastIndex = path.lastIndexOf(filename);
|
|
|
let suffix = filename.lastIndexOf('.') > -1 ? filename.substr(filename.lastIndexOf('.')) : '';
|
|
|
let modifyName = filename.lastIndexOf('.') > -1 ? filename.substr(0,filename.lastIndexOf('.')) : filename;
|
|
|
+
|
|
|
let fileInfo = {
|
|
|
name: filename,
|
|
|
+ aloneName: modifyName,
|
|
|
modifyName: modifyName,
|
|
|
newName: filename,
|
|
|
path: path.slice(0, lastIndex),
|
|
|
@@ -1251,34 +1283,60 @@ export default {
|
|
|
this.handleDir();
|
|
|
}
|
|
|
},
|
|
|
- sortMethod({ column, property, order }){
|
|
|
- console.log({ column, property, order });
|
|
|
- const isAsc = order === 'asc';
|
|
|
- this.fileList.sort((a, b) => {
|
|
|
- // 自定义排序规则，例如文件夹名称特殊处理
|
|
|
- if (isAsc) {
|
|
|
- if (a[property] === b[property]) {
|
|
|
- return 0;
|
|
|
- }
|
|
|
- return a[property] < b[property] ? -1 : 1;
|
|
|
- } else {
|
|
|
- if (a[property] === b[property]) {
|
|
|
- return 0;
|
|
|
- }
|
|
|
- return a[property] > b[property] ? -1 : 1;
|
|
|
- }
|
|
|
- });
|
|
|
+ customSortMethod({ data, sortList }){
|
|
|
+ const sortItem = sortList[0]
|
|
|
+ const { field, order } = sortItem;
|
|
|
+ console.log(order);
|
|
|
+ // const isAsc = order === 'asc';
|
|
|
+ // this.fileList.sort((a, b) => {
|
|
|
+ // // 自定义排序规则，例如文件夹名称特殊处理
|
|
|
+ // if (isAsc) {
|
|
|
+ // if (a[property] === b[property]) {
|
|
|
+ // return 0;
|
|
|
+ // }
|
|
|
+ // return a[property] < b[property] ? -1 : 1;
|
|
|
+ // } else {
|
|
|
+ // if (a[property] === b[property]) {
|
|
|
+ // return 0;
|
|
|
+ // }
|
|
|
+ // return a[property] > b[property] ? -1 : 1;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ let list = [];
|
|
|
+ if(order === 'asc'){
|
|
|
+ list = data.sort((a, b) => {
|
|
|
+ return a.name.localeCompare(b.name, 'en')
|
|
|
+ })
|
|
|
+ }else if(order === 'desc'){ // desc
|
|
|
+ list = data.sort((a, b) => {
|
|
|
+ return b.name.localeCompare(a.name, 'en')
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ list = data;
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ // this.setChange();
|
|
|
+
|
|
|
},
|
|
|
// 排序 { column, field, order, sortBy, sortList, $event }
|
|
|
sortChange({ column, field, order, sortBy, sortList, $event }){
|
|
|
- console.log(field, order, sortList);
|
|
|
- this.fileList.sort((a, b) => {
|
|
|
- if (order === 'asc') {
|
|
|
- return a[field] > b[field] ? 1 : -1;
|
|
|
- } else {
|
|
|
- return a[field] < b[field] ? 1 : -1;
|
|
|
- }
|
|
|
- });
|
|
|
+ const collator = new Intl.Collator('zh-Hans-CN', { sensitivity: 'case', numeric: true });
|
|
|
+ this.fileList.sort(collator.compare);
|
|
|
+
|
|
|
+ // let a = [{name: '1'},{name: '2'},{name: '11'},{name: '100'},{name: 'a'},{name: '啊'},{name: '张韶涵 - 欧若拉 (Live).mp3'}];
|
|
|
+
|
|
|
+ // if(order === 'asc'){
|
|
|
+ // this.fileList.sort((a, b) => {
|
|
|
+ // return a[field] > b[field] ? 1 : -1;
|
|
|
+ // });
|
|
|
+ // }else if(order == 'desc'){
|
|
|
+ // this.fileList.sort((a, b) => {
|
|
|
+ // return a[field] < b[field] ? 1 : -1;
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+
|
|
|
+ console.log(field, order, this.fileList);
|
|
|
+ this.setChange();
|
|
|
},
|
|
|
// 操作文件
|
|
|
handleFile() {
|
|
|
@@ -1664,7 +1722,7 @@ export default {
|
|
|
text-align: center;
|
|
|
border-radius: 10px;
|
|
|
min-height: 110px;
|
|
|
- padding: 60px 0;
|
|
|
+ padding: 25px 0;
|
|
|
background-color: #fff;
|
|
|
font-size: 15px;
|
|
|
cursor: pointer;
|
|
|
@@ -1677,7 +1735,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.citem-img {
|
|
|
- width: 65%;
|
|
|
+ width: 55%;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
@@ -1763,4 +1821,10 @@ export default {
|
|
|
color: #ccc;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
+
|
|
|
+ .tab-img{
|
|
|
+ width: 20px;
|
|
|
+ margin-right: 5px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
</style>
|
