lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

文件管理添加删除、重命名文件和新建文件夹功能

This commit is contained in:
fangxiang 2021-08-18 16:00:22 +08:00
parent 2bd9a8a3ec
commit a66658e62f
5 changed files with 186 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/common/GlobalData.ts
View File

@ -1,5 +1,6 @@
import { SessionStorage } from "quasar";
import ApplicationConfigEntity from "src/entities/ApplicationConfigEntity";
import { HttpProtocol } from "src/entities/HttpProtocol";
import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
import ClientConnection from "./ClientConnection";
import EventBus, { EventNamesDefine } from "./EventBus";
@ -123,6 +124,19 @@ export default class GlobalData {
return this.getClient(this._current_client_name);
}
public createCurrentRequestUrl() {
let client = this.getCurrentClient();
if (client) {
let url = new URL(client.url);
url.port =
this.applicationConfig?.httpserver_port ??
HttpProtocol.DefaultHttpPort.toString();
url.protocol = "http:";
return url;
}
return null;
}
public addClient(name: string | null, client: ClientConnection) {
if (name) {
this.clients.set(name, client);

186
src/components/FileManageDialog.vue
View File

@ -87,9 +87,20 @@
</q-btn>
<q-btn
flat
icon="create_new_folder"
@click="onCreateNewFolder"
:disable="loading"
:label="$t('create folder')"
>
<q-tooltip>
{{ $t("create folder") }}
</q-tooltip>
</q-btn>
<q-btn
flat
v-if="status != 'uploading'"
icon="upload"
:label="$t('upload file')"
:disable="status == 'uploading'"
@click="status = 'uploading'"
>
<q-tooltip>
@ -167,6 +178,7 @@
<div v-show="status == 'uploading'" class="row q-ma-sm">
<q-space />
<q-uploader
style="height: 69vh; width: 70%"
:url="getUrl"
method="post"
:headers="generatorFileUploadHeaders"
@ -258,6 +270,7 @@ import { api } from "boot/axios";
import GlobalData from "src/common/GlobalData";
import FileEntity from "src/entities/FileEntity";
import { HttpProtocol } from "src/entities/HttpProtocol";
import NormalResult from "src/entities/NormalResult";
class _BreadcrumbItem {
name: string = "";
@ -431,19 +444,6 @@ export default defineComponent({
showDialog() {
refresh_file_list();
show_dialog.value = true;
// let client = GlobalData.getInstance().getCurrentClient();
// if (client) {
// let url = new URL(client.url);
// url.port =
// GlobalData.getInstance().applicationConfig?.httpserver_port ??
// HttpProtocol.DefaultHttpPort.toString();
// url.pathname = HttpProtocol.RequestUploadFile;
// url.protocol = "http:";
// url.searchParams.append("type", HttpProtocol.UploadTypeDatabase);
// url.searchParams.append("target_path", path.value);
// upload_url.value = url.toString();
// }
},
generatorFileUploadHeaders(files: File[]) {
if (files.length > 0) {
@ -467,8 +467,146 @@ export default defineComponent({
status.value = "normal";
upload_url.value = "";
},
deleteFile(file: FileEntity) {},
renameFile(file: FileEntity) {},
async onCreateNewFolder() {
let url = GlobalData.getInstance().createCurrentRequestUrl();
if (url) {
$q.dialog({
title: $t.t("create folder"),
message: $t.t("input folder name") + ":",
prompt: {
model: "",
isValid: (val: string) => val && val.trim().length > 0,
type: "text",
},
cancel: true,
persistent: true,
}).onOk(async (data: string) => {
if (url) {
url.pathname = HttpProtocol.RequestPathCreateDirectory;
let response = (
await api.post(url.toString(), {
base_dir: path.value,
dir_name: data,
})
).data as NormalResult;
if (response && response.success) {
refresh_file_list();
$q.notify({
type: "positive",
message: $t.t("create folder") + $t.t("success") + "!",
position: "top",
timeout: 1500,
});
} else {
$q.notify({
type: "warning",
message:
$t.t("create folder") +
$t.t("fail") +
"!" +
(response ? response.message : ""),
position: "top",
timeout: 1500,
});
}
}
});
}
},
async deleteFile(file: FileEntity) {
let url = GlobalData.getInstance().createCurrentRequestUrl();
if (url) {
url.pathname = HttpProtocol.RequestPathDeleteFile;
let response = null;
try {
response = (
await api.delete(url.toString(), {
data: {
base_dir: path.value,
file_name: file.name,
},
})
).data as NormalResult;
} catch (e) {
console.log(e);
}
if (response && response.success) {
refresh_file_list();
$q.notify({
type: "positive",
message: $t.t("delete file") + $t.t("success") + "!",
position: "top",
timeout: 1500,
});
} else {
$q.notify({
type: "warning",
message:
$t.t("delete file") +
$t.t("fail") +
"!" +
(response ? response.message : ""),
position: "top",
timeout: 1500,
});
}
}
},
renameFile(file: FileEntity) {
let url = GlobalData.getInstance().createCurrentRequestUrl();
if (url) {
$q.dialog({
title: $t.t("rename"),
message: $t.t("input new file name") + ":",
prompt: {
model: file.name,
isValid: (val: string) => val && val.trim().length > 0,
type: "text",
},
cancel: true,
persistent: true,
}).onOk(async (data: string) => {
if (data == file.name) {
return;
}
if (url) {
url.pathname = HttpProtocol.RequestPathRenameFile;
url.searchParams.append(
"type",
HttpProtocol.RequestPathRenameFile
);
let response = (
await api.put(url.toString(), {
base_dir: path.value,
file_name: file.name,
new_file_name: data,
})
).data as NormalResult;
if (response && response.success) {
refresh_file_list();
$q.notify({
type: "positive",
message: $t.t("file rename") + $t.t("success") + "!",
position: "top",
timeout: 1500,
});
} else {
$q.notify({
type: "warning",
message:
$t.t("file rename") +
$t.t("fail") +
"!" +
(response ? response.message : ""),
position: "top",
timeout: 1500,
});
}
}
});
}
},
copyStringToClipboard(value: string) {
copyToClipboard(value);
},
@ -495,27 +633,23 @@ export default defineComponent({
}
},
getUrl(file: File[]) {
let client = GlobalData.getInstance().getCurrentClient();
if (client) {
let url = new URL(client.url);
url.port =
GlobalData.getInstance().applicationConfig?.httpserver_port ??
HttpProtocol.DefaultHttpPort.toString();
let url = GlobalData.getInstance().createCurrentRequestUrl();
if (url) {
url.pathname = HttpProtocol.RequestUploadFile;
url.protocol = "http:";
url.searchParams.append("type", HttpProtocol.HttpUploadTypeNormal);
url.searchParams.append("base_dir", path.value);
console.log(url.toString());
return url.toString();
}
return "#";
},
onUploaded() {
refresh_file_list();
$q.notify({
type: "positive",
message: $t.t("file upload") + $t.t("success") + "!",
position: "top",
timeout: 1000,
timeout: 1500,
});
},
onFailed(info: any) {
@ -524,7 +658,7 @@ export default defineComponent({
type: "warning",
message: $t.t("file upload") + $t.t("fail") + "!",
position: "top",
timeout: 1000,
timeout: 1500,
});
loading.value = false;
},

2
src/entities/HttpProtocol.ts
View File

@ -4,7 +4,9 @@ export namespace HttpProtocol {
export const RequestPathUpdateDBBackupFile = "/common/update_db_backup_file";
export const RequestPathDBBackup = "/db_backup";
export const RequestPathListFile = "/list_file";
export const RequestPathCreateDirectory = "/create_directory";
export const RequestPathDeleteFile = "/delete_file";
export const RequestPathRenameFile = "/rename_file";
export const HttpUploadTypeNormal = "U_T_Normal";
export const UploadTypeBackgroundImage = "U_T_BACKGROUND_IMAGE";

4
src/entities/NormalResult.ts Normal file
View File

@ -0,0 +1,4 @@
export default class NormalResult {
success = false;
message = "";
}

6
src/i18n/zh-CN/index.ts
View File

@ -108,4 +108,10 @@ export default {
forward: "前进",
"cancel upload file": "取消文件上传",
"select file": "选择文件",
"file upload": "文件上传",
"file rename": "文件重命名",
"file delete": "文件删除",
"delete file": "文件删除",
"create folder": "新建文件夹",
"input folder name": "输入文件夹名称",
};