mirror of
https://gitee.com/dromara/mayfly-go
synced 2026-05-07 03:25:19 +08:00
886 lines
32 KiB
Vue
Executable File
886 lines
32 KiB
Vue
Executable File
<template>
|
||
<div class="machine-file">
|
||
<div>
|
||
<el-progress v-if="uploadProgressShow" style="width: 90%; margin-left: 20px" :text-inside="true" :stroke-width="20" :percentage="progressNum" />
|
||
|
||
<el-row class="mb10">
|
||
<el-breadcrumb separator-icon="ArrowRight">
|
||
<el-breadcrumb-item v-for="path in filePathNav" :key="path">
|
||
<el-link @click="setFiles(path.path)" style="font-weight: bold">{{ path.name }}</el-link>
|
||
</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</el-row>
|
||
|
||
<el-table
|
||
ref="fileTableRef"
|
||
@cell-dblclick="cellDbclick"
|
||
@selection-change="handleSelectionChange"
|
||
height="65vh"
|
||
:data="filterFiles"
|
||
highlight-current-row
|
||
v-loading="loading"
|
||
>
|
||
<el-table-column type="selection" width="30" />
|
||
|
||
<el-table-column prop="name" label="名称" min-width="380">
|
||
<template #header>
|
||
<div class="machine-file-table-header">
|
||
<div>
|
||
<el-button :disabled="nowPath == basePath" type="primary" circle size="small" icon="Back" @click="back()"> </el-button>
|
||
<el-button class="ml5" type="primary" circle size="small" icon="Refresh" @click="refresh()"> </el-button>
|
||
|
||
<!-- 文件&文件夹上传 -->
|
||
<el-dropdown class="machine-file-upload-exec" trigger="click" size="small">
|
||
<span>
|
||
<el-button
|
||
v-auth="'machine:file:upload'"
|
||
class="ml5"
|
||
type="primary"
|
||
circle
|
||
size="small"
|
||
icon="Upload"
|
||
title="上传"
|
||
></el-button>
|
||
</span>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item>
|
||
<el-upload
|
||
:before-upload="beforeUpload"
|
||
:on-success="uploadSuccess"
|
||
action=""
|
||
:http-request="uploadFile"
|
||
:headers="{ token }"
|
||
:show-file-list="false"
|
||
name="file"
|
||
class="machine-file-upload-exec"
|
||
>
|
||
<el-link>文件</el-link>
|
||
</el-upload>
|
||
</el-dropdown-item>
|
||
|
||
<el-dropdown-item>
|
||
<div>
|
||
<el-link @click="addFinderToList">文件夹</el-link>
|
||
<input
|
||
type="file"
|
||
id="folderUploadInput"
|
||
ref="folderUploadRef"
|
||
webkitdirectory
|
||
directory
|
||
@change="uploadFolder"
|
||
style="display: none"
|
||
/>
|
||
</div>
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
|
||
<el-button
|
||
:disabled="state.selectionFiles.length == 0"
|
||
v-auth="'machine:file:rm'"
|
||
@click="copyFile(state.selectionFiles)"
|
||
class="ml5"
|
||
type="primary"
|
||
circle
|
||
size="small"
|
||
icon="CopyDocument"
|
||
title="复制"
|
||
>
|
||
</el-button>
|
||
|
||
<el-button
|
||
:disabled="state.selectionFiles.length == 0"
|
||
v-auth="'machine:file:rm'"
|
||
@click="mvFile(state.selectionFiles)"
|
||
class="ml5"
|
||
type="primary"
|
||
circle
|
||
size="small"
|
||
icon="Rank"
|
||
title="移动"
|
||
>
|
||
</el-button>
|
||
|
||
<el-button
|
||
v-auth="'machine:file:write'"
|
||
@click="showCreateFileDialog()"
|
||
class="ml5"
|
||
type="primary"
|
||
circle
|
||
size="small"
|
||
icon="FolderAdd"
|
||
title="新建"
|
||
>
|
||
</el-button>
|
||
|
||
<el-button
|
||
:disabled="state.selectionFiles.length == 0"
|
||
v-auth="'machine:file:rm'"
|
||
@click="deleteFile(state.selectionFiles)"
|
||
class="ml5"
|
||
type="danger"
|
||
circle
|
||
size="small"
|
||
icon="delete"
|
||
title="删除"
|
||
>
|
||
</el-button>
|
||
|
||
<el-button-group v-if="state.copyOrMvFile.paths.length > 0" size="small" class="ml5">
|
||
<el-tooltip effect="customized" raw-content placement="top">
|
||
<template #content>
|
||
<div v-for="path in state.copyOrMvFile.paths" v-bind:key="path">{{ path }}</div>
|
||
</template>
|
||
|
||
<el-button @click="pasteFile" type="primary"
|
||
>{{ isCpFile() ? '复制' : '移动' }}粘贴{{ state.copyOrMvFile.paths.length }}</el-button
|
||
>
|
||
</el-tooltip>
|
||
|
||
<el-button icon="CloseBold" @click="cancelCopy" />
|
||
</el-button-group>
|
||
</div>
|
||
|
||
<div style="width: 150px">
|
||
<el-input v-model="fileNameFilter" size="small" placeholder="名称: 输入可过滤" clearable />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template #default="scope">
|
||
<span v-if="scope.row.isFolder">
|
||
<SvgIcon :size="15" name="folder" color="#007AFF" />
|
||
</span>
|
||
<span v-else>
|
||
<SvgIcon :size="15" :name="scope.row.icon" />
|
||
</span>
|
||
|
||
<span class="ml5" style="display: inline-block; width: 90%">
|
||
<div v-if="scope.row.nameEdit">
|
||
<el-input
|
||
@keyup.enter="fileRename(scope.row)"
|
||
:ref="(el: any) => el?.focus()"
|
||
@blur="filenameBlur(scope.row)"
|
||
v-model="scope.row.name"
|
||
/>
|
||
</div>
|
||
<el-link v-else @click="getFile(scope.row)" style="font-weight: bold" :underline="false">{{ scope.row.name }}</el-link>
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="size" label="大小" min-width="90" sortable>
|
||
<template #default="scope">
|
||
<span style="color: #67c23a; font-weight: bold" v-if="scope.row.type == '-'"> {{ formatByteSize(scope.row.size) }} </span>
|
||
<span style="color: #67c23a; font-weight: bold" v-if="scope.row.type == 'd' && scope.row.dirSize"> {{ scope.row.dirSize }} </span>
|
||
<span style="color: #67c23a; font-weight: bold" v-if="scope.row.type == 'd' && !scope.row.dirSize">
|
||
<el-button @click="getDirSize(scope.row)" type="primary" link :loading="scope.row.loadingDirSize">计算</el-button>
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="mode" label="属性" width="110"> </el-table-column>
|
||
<el-table-column v-if="$props.protocol == MachineProtocolEnum.Ssh.value" prop="username" label="用户" min-width="55" show-overflow-tooltip>
|
||
</el-table-column>
|
||
<el-table-column v-if="$props.protocol == MachineProtocolEnum.Ssh.value" prop="groupname" label="组" min-width="55" show-overflow-tooltip>
|
||
</el-table-column>
|
||
<el-table-column prop="modTime" label="修改时间" width="160" sortable> </el-table-column>
|
||
|
||
<el-table-column width="100">
|
||
<template #header>
|
||
<el-popover placement="top" :width="270" trigger="hover">
|
||
<template #reference>
|
||
<SvgIcon name="QuestionFilled" :size="18" class="pointer-icon mr10" />
|
||
</template>
|
||
<div>rename: 双击文件名单元格修改后回车</div>
|
||
</el-popover>
|
||
操作
|
||
</template>
|
||
<template #default="scope">
|
||
<el-link
|
||
@click="deleteFile([scope.row])"
|
||
v-if="!dontOperate(scope.row)"
|
||
v-auth="'machine:file:rm'"
|
||
type="danger"
|
||
icon="delete"
|
||
:underline="false"
|
||
title="删除"
|
||
></el-link>
|
||
|
||
<el-link
|
||
@click="downloadFile(scope.row)"
|
||
v-if="scope.row.type == '-'"
|
||
v-auth="'machine:file:write'"
|
||
type="primary"
|
||
icon="download"
|
||
:underline="false"
|
||
class="ml10"
|
||
title="下载"
|
||
></el-link>
|
||
|
||
<el-popover placement="top-start" :title="`${scope.row.path}-文件详情`" :width="520" trigger="click" @show="showFileStat(scope.row)">
|
||
<template #reference>
|
||
<span style="color: #67c23a; font-weight: bold">
|
||
<el-link
|
||
@click="showFileStat(scope.row)"
|
||
icon="InfoFilled"
|
||
:underline="false"
|
||
link
|
||
class="ml10"
|
||
:loading="scope.row.loadingStat"
|
||
></el-link>
|
||
</span>
|
||
</template>
|
||
<el-input disabled autosize v-model="scope.row.stat" type="textarea" />
|
||
</el-popover>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<el-dialog
|
||
:destroy-on-close="true"
|
||
title="新建文件"
|
||
v-model="createFileDialog.visible"
|
||
:before-close="closeCreateFileDialog"
|
||
:close-on-click-modal="false"
|
||
top="5vh"
|
||
width="400px"
|
||
>
|
||
<div>
|
||
<el-form-item prop="name" label="名称">
|
||
<el-input v-model.trim="createFileDialog.name" placeholder="请输入名称" auto-complete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="type" label="类型">
|
||
<el-radio-group v-model="createFileDialog.type">
|
||
<el-radio value="d" label="d">文件夹</el-radio>
|
||
<el-radio value="-" label="-">文件</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<div>
|
||
<el-button @click="closeCreateFileDialog">关闭</el-button>
|
||
<el-button v-auth="'machine:file:write'" type="primary" @click="createFile">确定</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<machine-file-content
|
||
v-model:visible="fileContent.contentVisible"
|
||
:machine-id="machineId"
|
||
:auth-cert-name="props.authCertName"
|
||
:file-id="fileId"
|
||
:path="fileContent.path"
|
||
:protocol="protocol"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { computed, onMounted, reactive, ref, toRefs } from 'vue';
|
||
import { ElInput, ElMessage, ElMessageBox } from 'element-plus';
|
||
import { machineApi } from '../api';
|
||
|
||
import { joinClientParams } from '@/common/request';
|
||
import config from '@/common/config';
|
||
import { isTrue, notBlank } from '@/common/assert';
|
||
import MachineFileContent from './MachineFileContent.vue';
|
||
import { getToken } from '@/common/utils/storage';
|
||
import { convertToBytes, formatByteSize } from '@/common/utils/format';
|
||
import { getMachineConfig } from '@/common/sysconfig';
|
||
import { MachineProtocolEnum } from '../enums';
|
||
import { fuzzyMatchField } from '@/common/utils/string';
|
||
|
||
const props = defineProps({
|
||
machineId: { type: Number },
|
||
authCertName: { type: String },
|
||
protocol: { type: Number, default: 1 },
|
||
fileId: { type: Number, default: 0 },
|
||
path: { type: String, default: '' },
|
||
isFolder: { type: Boolean, default: true },
|
||
});
|
||
|
||
const token = getToken();
|
||
const folderUploadRef: any = ref();
|
||
|
||
const folderType = 'd';
|
||
|
||
const userMap = new Map<number, any>();
|
||
const groupMap = new Map<number, any>();
|
||
|
||
// 路径分隔符
|
||
const pathSep = '/';
|
||
|
||
const state = reactive({
|
||
basePath: '', // 基础路径
|
||
nowPath: '', // 当前路径
|
||
loading: true,
|
||
progressNum: 0,
|
||
uploadProgressShow: false,
|
||
fileNameFilter: '',
|
||
files: [] as any,
|
||
selectionFiles: [] as any,
|
||
copyOrMvFile: {
|
||
paths: [] as any,
|
||
type: 'cp',
|
||
fromPath: '',
|
||
},
|
||
renameFile: {
|
||
oldname: '',
|
||
},
|
||
fileContent: {
|
||
content: '',
|
||
contentVisible: false,
|
||
dialogTitle: '',
|
||
path: '',
|
||
type: 'shell',
|
||
},
|
||
createFileDialog: {
|
||
visible: false,
|
||
name: '',
|
||
type: folderType,
|
||
data: null as any,
|
||
},
|
||
machineConfig: { uploadMaxFileSize: '1GB' },
|
||
});
|
||
|
||
const { basePath, nowPath, loading, fileNameFilter, progressNum, uploadProgressShow, fileContent, createFileDialog } = toRefs(state);
|
||
|
||
onMounted(async () => {
|
||
state.basePath = props.path;
|
||
const machineId = props.machineId;
|
||
|
||
if (props.protocol == MachineProtocolEnum.Ssh.value) {
|
||
machineApi.users.request({ id: machineId }).then((res: any) => {
|
||
for (let user of res) {
|
||
userMap.set(user.uid, user);
|
||
}
|
||
});
|
||
|
||
machineApi.groups.request({ id: machineId }).then((res: any) => {
|
||
for (let group of res) {
|
||
groupMap.set(group.gid, group);
|
||
}
|
||
});
|
||
}
|
||
|
||
setFiles(props.path);
|
||
state.machineConfig = await getMachineConfig();
|
||
});
|
||
|
||
const filterFiles = computed(() => fuzzyMatchField(state.fileNameFilter, state.files, (file: any) => file.name));
|
||
|
||
const filePathNav = computed(() => {
|
||
let basePath = state.basePath;
|
||
const pathNavs = [
|
||
{
|
||
path: basePath,
|
||
name: basePath,
|
||
},
|
||
];
|
||
if (basePath == state.nowPath) {
|
||
return pathNavs;
|
||
}
|
||
|
||
const paths = state.nowPath.split(pathSep).splice(1);
|
||
let nowPath = '';
|
||
for (let path of paths) {
|
||
if (!nowPath) {
|
||
nowPath = pathSep + path;
|
||
} else {
|
||
nowPath = nowPath + pathSep + path;
|
||
}
|
||
// 最多只能点击到basePath
|
||
if (nowPath.length <= basePath.length) {
|
||
continue;
|
||
}
|
||
|
||
pathNavs.push({
|
||
name: path,
|
||
path: nowPath,
|
||
});
|
||
}
|
||
|
||
return pathNavs;
|
||
});
|
||
|
||
const handleSelectionChange = (val: any) => {
|
||
state.selectionFiles = val;
|
||
};
|
||
|
||
const isCpFile = () => {
|
||
return state.copyOrMvFile.type == 'cp';
|
||
};
|
||
|
||
const copyFile = (files: any[]) => {
|
||
setCopyOrMvFile(files);
|
||
};
|
||
|
||
const mvFile = (files: any[]) => {
|
||
setCopyOrMvFile(files, 'mv');
|
||
};
|
||
|
||
const setCopyOrMvFile = (files: any[], type = 'cp') => {
|
||
for (let file of files) {
|
||
const path = file.path;
|
||
if (!state.copyOrMvFile.paths.includes(path)) {
|
||
state.copyOrMvFile.paths.push(path);
|
||
}
|
||
}
|
||
state.copyOrMvFile.type = type;
|
||
state.copyOrMvFile.fromPath = state.nowPath;
|
||
};
|
||
|
||
const pasteFile = async () => {
|
||
const cmFile = state.copyOrMvFile;
|
||
isTrue(state.nowPath != cmFile.fromPath, '同目录下不能粘贴');
|
||
const api = isCpFile() ? machineApi.cpFile : machineApi.mvFile;
|
||
try {
|
||
state.loading = true;
|
||
await api.request({
|
||
machineId: props.machineId,
|
||
fileId: props.fileId,
|
||
authCertName: props.authCertName,
|
||
paths: cmFile.paths,
|
||
toPath: state.nowPath,
|
||
protocol: props.protocol,
|
||
});
|
||
ElMessage.success('粘贴成功');
|
||
state.copyOrMvFile.paths = [];
|
||
refresh();
|
||
} finally {
|
||
state.loading = false;
|
||
}
|
||
};
|
||
|
||
const cancelCopy = () => {
|
||
state.copyOrMvFile.paths = [];
|
||
};
|
||
|
||
const cellDbclick = (row: any, column: any) => {
|
||
// 双击名称列可修改名称
|
||
if (column.property == 'name') {
|
||
state.renameFile.oldname = row.name;
|
||
row.nameEdit = true;
|
||
}
|
||
};
|
||
|
||
const filenameBlur = (row: any) => {
|
||
const oldname = state.renameFile.oldname;
|
||
// 如果存在旧名称，则说明未回车修改文件名，则还原旧文件名
|
||
if (oldname) {
|
||
row.name = oldname;
|
||
state.renameFile.oldname = '';
|
||
}
|
||
row.nameEdit = false;
|
||
};
|
||
|
||
const fileRename = async (row: any) => {
|
||
if (row.name == state.renameFile.oldname) {
|
||
row.nameEdit = false;
|
||
return;
|
||
}
|
||
notBlank(row.name, '新名称不能为空');
|
||
try {
|
||
await machineApi.renameFile.request({
|
||
machineId: parseInt(props.machineId + ''),
|
||
authCertName: props.authCertName,
|
||
fileId: parseInt(props.fileId + ''),
|
||
path: state.nowPath + pathSep + state.renameFile.oldname,
|
||
newname: state.nowPath + pathSep + row.name,
|
||
protocol: props.protocol,
|
||
});
|
||
ElMessage.success('重命名成功');
|
||
await refresh();
|
||
} catch (e) {
|
||
row.name = state.renameFile.oldname;
|
||
}
|
||
row.nameEdit = false;
|
||
};
|
||
|
||
const showFileContent = async (path: string) => {
|
||
state.fileContent.dialogTitle = path;
|
||
state.fileContent.path = path;
|
||
state.fileContent.contentVisible = true;
|
||
};
|
||
|
||
const getFile = async (row: any) => {
|
||
if (row.type == folderType) {
|
||
await setFiles(row.path);
|
||
} else {
|
||
isTrue(row.size < 1 * 1024 * 1024, '文件太大, 请下载使用');
|
||
await showFileContent(row.path);
|
||
}
|
||
};
|
||
|
||
const setFiles = async (path: string) => {
|
||
try {
|
||
if (!path) {
|
||
path = pathSep;
|
||
}
|
||
state.fileNameFilter = '';
|
||
state.loading = true;
|
||
state.files = await lsFile(path);
|
||
state.nowPath = path;
|
||
} finally {
|
||
state.loading = false;
|
||
}
|
||
};
|
||
|
||
const lsFile = async (path: string) => {
|
||
const res = await machineApi.lsFile.request({
|
||
fileId: props.fileId,
|
||
machineId: props.machineId,
|
||
authCertName: props.authCertName,
|
||
protocol: props.protocol,
|
||
path,
|
||
});
|
||
for (const file of res) {
|
||
if (props.protocol == MachineProtocolEnum.Ssh.value) {
|
||
file.username = userMap.get(file.uid)?.uname || file.uid;
|
||
file.groupname = groupMap.get(file.gid)?.gname || file.gid;
|
||
}
|
||
|
||
const type = file.type;
|
||
if (type == folderType) {
|
||
file.isFolder = true;
|
||
file.iocn = 'folder';
|
||
} else {
|
||
file.isFolder = false;
|
||
const fileExtension = file.name.split('.').pop().toLowerCase();
|
||
|
||
switch (fileExtension) {
|
||
case 'doc':
|
||
case 'docx':
|
||
file.icon = 'iconfont icon-word';
|
||
break;
|
||
case 'xls':
|
||
case 'xlsx':
|
||
file.icon = 'iconfont icon-excel';
|
||
break;
|
||
case 'ppt':
|
||
case 'pptx':
|
||
file.icon = 'iconfont icon-ppt';
|
||
break;
|
||
case 'pdf':
|
||
file.icon = 'iconfont icon-pdf';
|
||
break;
|
||
case 'xml':
|
||
file.icon = 'iconfont icon-xml';
|
||
break;
|
||
case 'html':
|
||
file.icon = 'iconfont icon-html';
|
||
break;
|
||
case 'yaml':
|
||
case 'yml':
|
||
file.icon = 'iconfont icon-yaml';
|
||
break;
|
||
case 'css':
|
||
file.icon = 'iconfont icon-file-css';
|
||
break;
|
||
case 'js':
|
||
case 'ts':
|
||
file.icon = 'iconfont icon-file-js';
|
||
break;
|
||
case 'mp4':
|
||
case 'rmvb':
|
||
file.icon = 'iconfont icon-file-video';
|
||
break;
|
||
case 'mp3':
|
||
file.icon = 'iconfont icon-file-audio';
|
||
break;
|
||
case 'bmp':
|
||
case 'jpg':
|
||
case 'jpeg':
|
||
case 'png':
|
||
case 'tif':
|
||
case 'gif':
|
||
case 'pcx':
|
||
case 'tga':
|
||
case 'exif':
|
||
case 'svg':
|
||
case 'psd':
|
||
case 'ai':
|
||
case 'webp':
|
||
file.icon = 'iconfont icon-file-image';
|
||
break;
|
||
case 'md':
|
||
file.icon = 'iconfont icon-md';
|
||
break;
|
||
case 'txt':
|
||
file.icon = 'iconfont icon-txt';
|
||
break;
|
||
case 'zip':
|
||
case 'rar':
|
||
case '7z':
|
||
case 'gz':
|
||
case 'tar':
|
||
case 'tgz':
|
||
file.icon = 'iconfont icon-file-zip';
|
||
break;
|
||
default:
|
||
file.icon = 'iconfont icon-file';
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
return res;
|
||
};
|
||
|
||
const back = () => {
|
||
setFiles(getParentPath(state.nowPath));
|
||
};
|
||
|
||
const refresh = async () => {
|
||
setFiles(state.nowPath);
|
||
};
|
||
|
||
const getDirSize = async (data: any) => {
|
||
try {
|
||
data.loadingDirSize = true;
|
||
const res = await machineApi.dirSize.request({
|
||
machineId: props.machineId,
|
||
fileId: props.fileId,
|
||
path: data.path,
|
||
protocol: props.protocol,
|
||
authCertName: props.authCertName,
|
||
});
|
||
data.dirSize = res;
|
||
} finally {
|
||
data.loadingDirSize = false;
|
||
}
|
||
};
|
||
|
||
const showFileStat = async (data: any) => {
|
||
try {
|
||
if (data.stat) {
|
||
return;
|
||
}
|
||
data.loadingStat = true;
|
||
const res = await machineApi.fileStat.request({
|
||
machineId: props.machineId,
|
||
fileId: props.fileId,
|
||
path: data.path,
|
||
protocol: props.protocol,
|
||
authCertName: props.authCertName,
|
||
});
|
||
data.stat = res;
|
||
} finally {
|
||
data.loadingStat = false;
|
||
}
|
||
};
|
||
|
||
const showCreateFileDialog = () => {
|
||
state.createFileDialog.data = {};
|
||
state.createFileDialog.visible = true;
|
||
};
|
||
|
||
const createFile = async () => {
|
||
const name = state.createFileDialog.name;
|
||
const type = state.createFileDialog.type;
|
||
const path = state.nowPath + pathSep + name;
|
||
await machineApi.createFile.request({
|
||
machineId: props.machineId,
|
||
authCertName: props.authCertName,
|
||
id: props.fileId,
|
||
protocol: props.protocol,
|
||
path,
|
||
type,
|
||
});
|
||
|
||
closeCreateFileDialog();
|
||
refresh();
|
||
};
|
||
|
||
const closeCreateFileDialog = () => {
|
||
state.createFileDialog.visible = false;
|
||
state.createFileDialog.data = null;
|
||
state.createFileDialog.name = '';
|
||
state.createFileDialog.type = folderType;
|
||
};
|
||
|
||
function getParentPath(filePath: string) {
|
||
const segments = filePath.split(pathSep);
|
||
segments.pop(); // 移除最后一个路径段
|
||
return segments.join(pathSep);
|
||
}
|
||
|
||
const deleteFile = async (files: any) => {
|
||
try {
|
||
await ElMessageBox.confirm(`此操作将删除 ${files.map((x: any) => `[${x.path}]`).join('\n')}, 是否继续?`, '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
});
|
||
state.loading = true;
|
||
await machineApi.rmFile.request({
|
||
fileId: props.fileId,
|
||
paths: files.map((x: any) => x.path),
|
||
machineId: props.machineId,
|
||
authCertName: props.authCertName,
|
||
protocol: props.protocol,
|
||
});
|
||
ElMessage.success('删除成功');
|
||
refresh();
|
||
} catch (e) {
|
||
//
|
||
} finally {
|
||
state.loading = false;
|
||
}
|
||
};
|
||
|
||
const downloadFile = (data: any) => {
|
||
const a = document.createElement('a');
|
||
a.setAttribute(
|
||
'href',
|
||
`${config.baseApiUrl}/machines/${props.machineId}/files/${props.fileId}/download?path=${data.path}&machineId=${props.machineId}&authCertName=${props.authCertName}&fileId=${props.fileId}&protocol=${props.protocol}&${joinClientParams()}`
|
||
);
|
||
a.setAttribute('target', '_blank');
|
||
a.click();
|
||
};
|
||
|
||
function addFinderToList() {
|
||
folderUploadRef.value.click();
|
||
}
|
||
|
||
function uploadFolder(e: any) {
|
||
//e.target.files为文件夹里面的文件
|
||
// 把文件夹数据放到formData里面，下面的files和paths字段根据接口来定
|
||
var form = new FormData();
|
||
form.append('basePath', state.nowPath);
|
||
form.append('authCertName', props.authCertName as any);
|
||
form.append('machineId', props.machineId as any);
|
||
form.append('protocol', props.protocol as any);
|
||
form.append('fileId', props.fileId as any);
|
||
|
||
let totalFileSize = 0;
|
||
for (let file of e.target.files) {
|
||
totalFileSize += file.size;
|
||
form.append('files', file);
|
||
form.append('paths', file.webkitRelativePath);
|
||
}
|
||
|
||
try {
|
||
if (!checkUploadFileSize(totalFileSize)) {
|
||
return;
|
||
}
|
||
|
||
// 上传操作
|
||
machineApi.uploadFile
|
||
.xhrReq(form, {
|
||
url: `${config.baseApiUrl}/machines/${props.machineId}/files/${props.fileId}/upload-folder?${joinClientParams()}`,
|
||
headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryF1uyUD0tWdqmJqpl' },
|
||
onUploadProgress: onUploadProgress,
|
||
baseURL: '',
|
||
timeout: 3 * 60 * 60 * 1000,
|
||
})
|
||
.then(() => {
|
||
ElMessage.success('上传成功');
|
||
setTimeout(() => {
|
||
refresh();
|
||
state.uploadProgressShow = false;
|
||
}, 3000);
|
||
})
|
||
.catch(() => {
|
||
state.uploadProgressShow = false;
|
||
});
|
||
} finally {
|
||
//无论上传成功与否，都把已选择的文件夹清空，否则选择同一文件夹没有反应
|
||
const folderEle: any = document.getElementById('folderUploadInput');
|
||
if (folderEle) {
|
||
folderEle.value = '';
|
||
}
|
||
}
|
||
}
|
||
|
||
const onUploadProgress = (progressEvent: any) => {
|
||
state.uploadProgressShow = true;
|
||
let complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
|
||
state.progressNum = complete;
|
||
};
|
||
|
||
const uploadFile = (content: any) => {
|
||
const params = new FormData();
|
||
const path = state.nowPath;
|
||
params.append('file', content.file);
|
||
params.append('path', path);
|
||
params.append('authCertName', props.authCertName as any);
|
||
params.append('machineId', props.machineId as any);
|
||
params.append('protocol', props.protocol as any);
|
||
params.append('fileId', props.fileId as any);
|
||
params.append('token', token);
|
||
machineApi.uploadFile
|
||
.xhrReq(params, {
|
||
url: `${config.baseApiUrl}/machines/${props.machineId}/files/${props.fileId}/upload?${joinClientParams()}`,
|
||
headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryF1uyUD0tWdqmJqpl' },
|
||
onUploadProgress: onUploadProgress,
|
||
baseURL: '',
|
||
timeout: 3 * 60 * 60 * 1000,
|
||
})
|
||
.then(() => {
|
||
ElMessage.success('上传成功');
|
||
setTimeout(() => {
|
||
refresh();
|
||
state.uploadProgressShow = false;
|
||
}, 3000);
|
||
})
|
||
.catch(() => {
|
||
state.uploadProgressShow = false;
|
||
});
|
||
};
|
||
|
||
const uploadSuccess = (res: any) => {
|
||
if (res.code !== 200) {
|
||
ElMessage.error(res.msg);
|
||
}
|
||
};
|
||
|
||
const beforeUpload = (file: File) => {
|
||
return checkUploadFileSize(file.size);
|
||
};
|
||
|
||
const checkUploadFileSize = (fileSize: number) => {
|
||
const bytes = convertToBytes(state.machineConfig.uploadMaxFileSize);
|
||
if (fileSize > bytes) {
|
||
ElMessage.error(`上传的文件超过系统配置的[${state.machineConfig.uploadMaxFileSize}]`);
|
||
return false;
|
||
}
|
||
return true;
|
||
};
|
||
|
||
const dontOperate = (data: any) => {
|
||
const path = data.path;
|
||
const ls = ['/', '//', '/usr', '/usr/', '/usr/bin', '/opt', '/run', '/etc', '/proc', '/var', '/mnt', '/boot', '/dev', '/home', '/media', '/root'];
|
||
return ls.indexOf(path) != -1;
|
||
};
|
||
|
||
defineExpose({ showFileContent });
|
||
</script>
|
||
<style lang="scss">
|
||
.machine-file-upload-exec {
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
vertical-align: middle;
|
||
position: relative;
|
||
text-decoration: none;
|
||
}
|
||
.machine-file-table-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 16px;
|
||
|
||
.title-right-fixed {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 20px;
|
||
text-align: end;
|
||
}
|
||
}
|
||
</style>
|