mirror of
https://github.com/MCSManager/UI.git
synced 2024-11-27 08:39:51 +08:00
Feat: 新增解压文件时选择编码
This commit is contained in:
Suwings
parent
90049b3bb8
commit
603ad5a725
@ -20,153 +20,157 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<Panel>
|
||||
<template #title>文件管理</template>
|
||||
<template #default>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :md="6" :offset="0">
|
||||
<ItemGroup>
|
||||
<el-button size="small" @click="back">
|
||||
<i class="el-icon-pie-chart"></i> 回到控制台
|
||||
</el-button>
|
||||
<el-button size="small" @click="refresh">
|
||||
<i class="el-icon-refresh"></i> 刷新
|
||||
</el-button>
|
||||
</ItemGroup>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="18" :offset="0" class="text-align-right">
|
||||
<ItemGroup>
|
||||
<el-button size="small" @click="toUpDir">
|
||||
<i class="el-icon-pie-chart"></i> 上层目录
|
||||
</el-button>
|
||||
<el-button size="small" @click="mkdir">
|
||||
<i class="el-icon-folder-add"></i> 新建目录
|
||||
</el-button>
|
||||
<el-button size="small" @click="compress(1)">
|
||||
<i class="el-icon-box"></i> 压缩
|
||||
</el-button>
|
||||
<el-button size="small" @click="compress(2)">
|
||||
<i class="el-icon-files"></i> 解压
|
||||
</el-button>
|
||||
<el-button size="small" @click="rename">
|
||||
<i class="el-icon-document"></i> 重命名
|
||||
</el-button>
|
||||
<el-button size="small" @click="move">
|
||||
<i class="el-icon-scissors"></i> 剪切
|
||||
</el-button>
|
||||
<el-button size="small" @click="copy">
|
||||
<i class="el-icon-document-copy"></i> 复制
|
||||
</el-button>
|
||||
<el-button size="small" @click="paste">
|
||||
<i class="el-icon-tickets"></i> 粘贴
|
||||
</el-button>
|
||||
<el-button size="small" type="success" @click="upload">
|
||||
<i class="el-icon-plus"></i> 上传文件
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteFiles">
|
||||
<i class="el-icon-document-delete"></i> 删除
|
||||
</el-button>
|
||||
</ItemGroup>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>
|
||||
<Panel>
|
||||
<template #title>文件管理</template>
|
||||
<template #default>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :md="6" :offset="0">
|
||||
<ItemGroup>
|
||||
<el-button size="small" @click="back">
|
||||
<i class="el-icon-pie-chart"></i> 回到控制台
|
||||
</el-button>
|
||||
<el-button size="small" @click="refresh">
|
||||
<i class="el-icon-refresh"></i> 刷新
|
||||
</el-button>
|
||||
</ItemGroup>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="18" :offset="0" class="text-align-right">
|
||||
<ItemGroup>
|
||||
<el-button size="small" @click="toUpDir">
|
||||
<i class="el-icon-pie-chart"></i> 上层目录
|
||||
</el-button>
|
||||
<el-button size="small" @click="mkdir">
|
||||
<i class="el-icon-folder-add"></i> 新建目录
|
||||
</el-button>
|
||||
<el-button size="small" @click="compress(1)">
|
||||
<i class="el-icon-box"></i> 压缩
|
||||
</el-button>
|
||||
<el-button size="small" @click="compress(2)">
|
||||
<i class="el-icon-files"></i> 解压
|
||||
</el-button>
|
||||
<el-button size="small" @click="rename">
|
||||
<i class="el-icon-document"></i> 重命名
|
||||
</el-button>
|
||||
<el-button size="small" @click="move">
|
||||
<i class="el-icon-scissors"></i> 剪切
|
||||
</el-button>
|
||||
<el-button size="small" @click="copy">
|
||||
<i class="el-icon-document-copy"></i> 复制
|
||||
</el-button>
|
||||
<el-button size="small" @click="paste">
|
||||
<i class="el-icon-tickets"></i> 粘贴
|
||||
</el-button>
|
||||
<el-button size="small" type="success" @click="upload">
|
||||
<i class="el-icon-plus"></i> 上传文件
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteFiles">
|
||||
<i class="el-icon-document-delete"></i> 删除
|
||||
</el-button>
|
||||
</ItemGroup>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="row-mt page-pagination">
|
||||
<el-pagination
|
||||
small
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
v-model:currentPage="pageParam.page"
|
||||
:page-size="pageParam.pageSize"
|
||||
:total="pageParam.total"
|
||||
@current-change="currentChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="row-mt page-pagination">
|
||||
<el-pagination
|
||||
small
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
v-model:currentPage="pageParam.page"
|
||||
:page-size="pageParam.pageSize"
|
||||
:total="pageParam.total"
|
||||
@current-change="currentChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row-mt" v-show="percentComplete > 0">
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="14"
|
||||
:percentage="percentComplete"
|
||||
></el-progress>
|
||||
</div>
|
||||
<div class="row-mt" v-show="percentComplete > 0">
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="14"
|
||||
:percentage="percentComplete"
|
||||
></el-progress>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<el-tag type="success" size="small">当前目录</el-tag>
|
||||
|
||||
<el-tag type="info" size="small"> {{ currentDir }}</el-tag>
|
||||
</p>
|
||||
<p>
|
||||
<el-tag type="success" size="small">当前目录</el-tag>
|
||||
|
||||
<el-tag type="info" size="small"> {{ currentDir }}</el-tag>
|
||||
</p>
|
||||
|
||||
<el-table
|
||||
:data="files"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
size="mini"
|
||||
ref="multipleTable"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55"> </el-table-column>
|
||||
<el-table-column prop="name" label="文件命令" min-width="240">
|
||||
<template #default="scope">
|
||||
<div
|
||||
v-if="scope.row.type == 0"
|
||||
class="filemanager-item-dir"
|
||||
@click="toDir(scope.row.name)"
|
||||
>
|
||||
<i class="el-icon-folder"></i>
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</div>
|
||||
<div v-if="scope.row.type == 1" class="filemanager-item-file">
|
||||
<i class="el-icon-document"></i>
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="typeText"
|
||||
label="文件类型"
|
||||
width="120"
|
||||
class="only-pc-display"
|
||||
></el-table-column>
|
||||
<el-table-column label="文件大小" width="140">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.size > 1024 * 1024"
|
||||
>{{ Number(Number(scope.row.size) / 1024 / 1024).toFixed(0) }} MB</span
|
||||
>
|
||||
<span v-else-if="scope.row.size > 1024"
|
||||
>{{ Number(Number(scope.row.size) / 1024).toFixed(0) }} KB</span
|
||||
>
|
||||
<span v-else-if="scope.row.size > 0"
|
||||
>{{ Number(Number(scope.row.size)).toFixed(0) }} B</span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="timeText" label="最后修改" width="160"></el-table-column>
|
||||
<el-table-column label="操作" style="text-align: center" width="180">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
:disabled="scope.row.type != 1"
|
||||
@click="toEditFilePage(scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button size="mini" :disabled="scope.row.type != 1" @click="download(scope.row)">
|
||||
下载
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</Panel>
|
||||
<el-table
|
||||
:data="files"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
size="mini"
|
||||
ref="multipleTable"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55"> </el-table-column>
|
||||
<el-table-column prop="name" label="文件命令" min-width="240">
|
||||
<template #default="scope">
|
||||
<div
|
||||
v-if="scope.row.type == 0"
|
||||
class="filemanager-item-dir"
|
||||
@click="toDir(scope.row.name)"
|
||||
>
|
||||
<i class="el-icon-folder"></i>
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</div>
|
||||
<div v-if="scope.row.type == 1" class="filemanager-item-file">
|
||||
<i class="el-icon-document"></i>
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="typeText"
|
||||
label="文件类型"
|
||||
width="120"
|
||||
class="only-pc-display"
|
||||
></el-table-column>
|
||||
<el-table-column label="文件大小" width="140">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.size > 1024 * 1024"
|
||||
>{{ Number(Number(scope.row.size) / 1024 / 1024).toFixed(0) }} MB</span
|
||||
>
|
||||
<span v-else-if="scope.row.size > 1024"
|
||||
>{{ Number(Number(scope.row.size) / 1024).toFixed(0) }} KB</span
|
||||
>
|
||||
<span v-else-if="scope.row.size > 0"
|
||||
>{{ Number(Number(scope.row.size)).toFixed(0) }} B</span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="timeText" label="最后修改" width="160"></el-table-column>
|
||||
<el-table-column label="操作" style="text-align: center" width="180">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
:disabled="scope.row.type != 1"
|
||||
@click="toEditFilePage(scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button size="mini" :disabled="scope.row.type != 1" @click="download(scope.row)">
|
||||
下载
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</Panel>
|
||||
|
||||
<!-- 隐藏的文件上传按钮 -->
|
||||
<form ref="fileForm" action="" method="post">
|
||||
<input type="file" ref="fileButtonHidden" @change="selectedFile" hidden="hidden" />
|
||||
</form>
|
||||
<!-- 隐藏的文件上传按钮 -->
|
||||
<form ref="fileForm" action="" method="post">
|
||||
<input type="file" ref="fileButtonHidden" @change="selectedFile" hidden="hidden" />
|
||||
</form>
|
||||
|
||||
<SelecctUnzipCode v-model:visible="visibleUnzipCode"></SelecctUnzipCode>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Panel from "../../components/Panel";
|
||||
import Panel from "@/components/Panel";
|
||||
import axios from "axios";
|
||||
import {
|
||||
API_FILE_COMPRESS,
|
||||
@ -177,12 +181,13 @@ import {
|
||||
API_FILE_MOVE,
|
||||
API_FILE_UPLOAD,
|
||||
API_FILE_URL
|
||||
} from "../service/common";
|
||||
} from "@/app/service/common";
|
||||
import path from "path";
|
||||
import { parseforwardAddress, request } from "../service/protocol";
|
||||
import { parseforwardAddress, request } from "@/app/service/protocol";
|
||||
import SelecctUnzipCode from "./selecctUnzipCode";
|
||||
|
||||
export default {
|
||||
components: { Panel },
|
||||
components: { Panel, SelecctUnzipCode },
|
||||
data() {
|
||||
return {
|
||||
serviceUuid: this.$route.params.serviceUuid,
|
||||
@ -208,7 +213,9 @@ export default {
|
||||
tmpFileNames: null,
|
||||
tmpOperationMode: -1,
|
||||
tmpDir: null
|
||||
}
|
||||
},
|
||||
|
||||
visibleUnzipCode: false
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
@ -525,6 +532,8 @@ export default {
|
||||
cancelButtonText: "取消"
|
||||
});
|
||||
if (!text.value) throw new Error("请输入一个有效值");
|
||||
this.visibleUnzipCode = true;
|
||||
if (this.visibleUnzipCode) return;
|
||||
const dirName = text.value;
|
||||
await request({
|
||||
method: "POST",
|
||||
91
src/app/views/FileManager/selecctUnzipCode.vue
Normal file
91
src/app/views/FileManager/selecctUnzipCode.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<!--
|
||||
Copyright (C) 2022 Suwings <Suwings@outlook.com>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
According to the AGPL, it is forbidden to delete all copyright notices,
|
||||
and if you modify the source code, you must open source the
|
||||
modified source code.
|
||||
|
||||
版权所有 (C) 2022 Suwings <Suwings@outlook.com>
|
||||
|
||||
该程序是免费软件，您可以重新分发和/或修改据 GNU Affero 通用公共许可证的条款，
|
||||
由自由软件基金会，许可证的第 3 版，或（由您选择）任何更高版本。
|
||||
|
||||
根据 AGPL 与用户协议，您必须保留所有版权声明，如果修改源代码则必须开源修改后的源代码。
|
||||
可以前往 https://mcsmanager.com/ 阅读用户协议，申请闭源开发授权等。
|
||||
-->
|
||||
|
||||
<template>
|
||||
<Dialog v-model="v" :cancel="close">
|
||||
<template #title>选择解压文件编码</template>
|
||||
<template #default>
|
||||
<div class="components-warpper">
|
||||
<el-select v-model="selected" class="m-2" placeholder="请选择一个解压编码" size="large">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="btn-area">
|
||||
<el-button size="small" type="primary" @click="sumbit">确定</el-button>
|
||||
<el-button size="small" type="danger" @click="close">取消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Dialog from "@/components/Dialog";
|
||||
export default {
|
||||
components: { Dialog },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
v: this.visible,
|
||||
options: [
|
||||
{ label: "简体中文（GBK）", value: "gbk" },
|
||||
{ label: "繁体中文（BIG5）", value: "big5" },
|
||||
{ label: "UTF8", value: "UTF8" }
|
||||
],
|
||||
selected: ""
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
visible(n) {
|
||||
this.v = n;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.v = true;
|
||||
this.$emit("update:visible", true);
|
||||
},
|
||||
close() {
|
||||
this.v = false;
|
||||
this.$emit("update:visible", false);
|
||||
},
|
||||
sumbit() {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.btn-area {
|
||||
margin-top: 8px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user