mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2024-11-25 19:49:14 +08:00
feat: 修改文件页面样式
This commit is contained in:
zhengkunwang223
zhengkunwang223
parent
71b17a0930
commit
5100865f7e
@ -6,7 +6,7 @@
|
||||
<el-col :span="3">
|
||||
<el-avatar shape="square" :size="180" :src="'data:image/png;base64,' + app.icon" />
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-col :span="18">
|
||||
<div class="detail">
|
||||
<div class="name">
|
||||
<span>{{ app.name }}</span>
|
||||
@ -78,7 +78,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-loading="loadingDetail">
|
||||
<div v-loading="loadingDetail" style="margin-left: -32px">
|
||||
<v-md-preview :text="appDetail.readme"></v-md-preview>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="open"
|
||||
:before-close="handleClose"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:title="$t('file.setRole')"
|
||||
width="50%"
|
||||
@open="onOpen"
|
||||
>
|
||||
<FileRole v-loading="loading" :mode="mode" @get-mode="getMode"></FileRole>
|
||||
<el-drawer v-model="open" :before-close="handleClose" :close-on-click-modal="false" width="50%">
|
||||
<template #header>
|
||||
<DrawerHeader :header="$t('file.setRole')" :back="handleClose" />
|
||||
</template>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="22" :offset="1">
|
||||
<FileRole v-loading="loading" :mode="mode" @get-mode="getMode"></FileRole>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit()">{{ $t('commons.button.confirm') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -26,33 +26,24 @@ import i18n from '@/lang';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import FileRole from '@/components/file-role/index.vue';
|
||||
|
||||
const props = defineProps({
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
file: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
let open = ref(false);
|
||||
let form = ref<File.FileCreate>({ path: '', isDir: false, mode: 0o755 });
|
||||
let loading = ref<Boolean>(false);
|
||||
let mode = ref('0755');
|
||||
|
||||
const em = defineEmits(['close']);
|
||||
const handleClose = () => {
|
||||
open.value = false;
|
||||
em('close', false);
|
||||
};
|
||||
|
||||
const onOpen = () => {
|
||||
const f = props.file as File.FileCreate;
|
||||
form.value.isDir = f.isDir;
|
||||
form.value.path = f.path;
|
||||
mode.value = String(f.mode);
|
||||
const acceptParams = (create: File.FileCreate) => {
|
||||
open.value = true;
|
||||
form.value.isDir = create.isDir;
|
||||
form.value.path = create.path;
|
||||
form.value.isLink = false;
|
||||
|
||||
mode.value = String(create.mode);
|
||||
};
|
||||
|
||||
const getMode = (val: number) => {
|
||||
@ -70,4 +61,6 @@ const submit = async () => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({ acceptParams });
|
||||
</script>
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
<el-dialog
|
||||
v-model="open"
|
||||
:title="$t('commons.button.edit')"
|
||||
@opened="onOpen"
|
||||
:before-close="handleClose"
|
||||
destroy-on-close
|
||||
width="70%"
|
||||
draggable
|
||||
@opened="onOpen"
|
||||
>
|
||||
<div>
|
||||
<div v-loading="loading">
|
||||
@ -16,43 +16,38 @@
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="save()">{{ $t('commons.button.confirm') }}</el-button>
|
||||
<el-button type="primary" @click="saveContent(true)">{{ $t('commons.button.confirm') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { SaveFileContent } from '@/api/modules/files';
|
||||
import i18n from '@/lang';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import * as monaco from 'monaco-editor';
|
||||
import { reactive } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
let editor: monaco.editor.IStandaloneCodeEditor | undefined;
|
||||
|
||||
const props = defineProps({
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
language: {
|
||||
type: String,
|
||||
default: 'json',
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
interface EditProps {
|
||||
language: string;
|
||||
content: string;
|
||||
path: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
let data = reactive({
|
||||
let open = ref(false);
|
||||
let loading = ref(false);
|
||||
let language = ref('json');
|
||||
|
||||
let form = ref({
|
||||
content: '',
|
||||
language: '',
|
||||
path: '',
|
||||
});
|
||||
|
||||
const em = defineEmits(['close', 'qsave', 'save']);
|
||||
const em = defineEmits(['close']);
|
||||
|
||||
const handleClose = () => {
|
||||
if (editor) {
|
||||
@ -61,14 +56,6 @@ const handleClose = () => {
|
||||
em('close', false);
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
em('save', data.content);
|
||||
};
|
||||
|
||||
const saveNotClose = () => {
|
||||
em('qsave', data.content);
|
||||
};
|
||||
|
||||
const initEditor = () => {
|
||||
if (editor) {
|
||||
editor.dispose();
|
||||
@ -76,26 +63,45 @@ const initEditor = () => {
|
||||
const codeBox = document.getElementById('codeBox');
|
||||
editor = monaco.editor.create(codeBox as HTMLElement, {
|
||||
theme: 'vs-dark', //官方自带三种主题vs, hc-black, or vs-dark
|
||||
value: data.content,
|
||||
value: form.value.content,
|
||||
readOnly: false,
|
||||
automaticLayout: true,
|
||||
language: data.language,
|
||||
language: language.value,
|
||||
folding: true, //代码折叠
|
||||
roundedSelection: false, // 右侧不显示编辑器预览框
|
||||
});
|
||||
|
||||
editor.onDidChangeModelContent(() => {
|
||||
if (editor) {
|
||||
data.content = editor.getValue();
|
||||
form.value.content = editor.getValue();
|
||||
}
|
||||
});
|
||||
|
||||
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, saveNotClose);
|
||||
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave);
|
||||
};
|
||||
|
||||
const quickSave = () => {
|
||||
saveContent(false);
|
||||
};
|
||||
|
||||
const saveContent = (closePage: boolean) => {
|
||||
loading.value = true;
|
||||
SaveFileContent(form.value).finally(() => {
|
||||
loading.value = false;
|
||||
open.value = !closePage;
|
||||
ElMessage.success(i18n.global.t('commons.msg.updateSuccess'));
|
||||
});
|
||||
};
|
||||
|
||||
const acceptParams = (props: EditProps) => {
|
||||
form.value.content = props.content;
|
||||
form.value.path = props.path;
|
||||
open.value = true;
|
||||
};
|
||||
|
||||
const onOpen = () => {
|
||||
data.content = props.content;
|
||||
data.language = props.language;
|
||||
initEditor();
|
||||
};
|
||||
|
||||
defineExpose({ acceptParams });
|
||||
</script>
|
||||
|
||||
@ -1,52 +1,55 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
<el-drawer
|
||||
v-model="open"
|
||||
:title="title"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="handleClose"
|
||||
width="30%"
|
||||
@open="onOpen"
|
||||
size="50%"
|
||||
>
|
||||
<el-form
|
||||
ref="fileForm"
|
||||
label-position="left"
|
||||
:model="form"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form-item :label="$t('file.compressType')" prop="type">
|
||||
<el-select v-model="form.type">
|
||||
<el-option v-for="item in options" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.name')" prop="name">
|
||||
<el-input v-model="form.name">
|
||||
<template #append>{{ extension }}</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.compressDst')" prop="dst">
|
||||
<el-input v-model="form.dst" disabled>
|
||||
<template #append><FileList :path="props.dst" @choose="getLinkPath"></FileList></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="form.replace" :label="$t('file.replace')"></el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="22" :offset="1">
|
||||
<el-form
|
||||
ref="fileForm"
|
||||
label-position="top"
|
||||
:model="form"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form-item :label="$t('file.compressType')" prop="type">
|
||||
<el-select v-model="form.type">
|
||||
<el-option v-for="item in options" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.name')" prop="name">
|
||||
<el-input v-model="form.name">
|
||||
<template #append>{{ extension }}</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.compressDst')" prop="dst">
|
||||
<el-input v-model="form.dst" disabled>
|
||||
<template #append><FileList :path="form.dst" @choose="getLinkPath"></FileList></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="form.replace" :label="$t('file.replace')"></el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import i18n from '@/lang';
|
||||
import { computed, reactive, ref, toRefs } from 'vue';
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import { File } from '@/api/interface/file';
|
||||
import { ElMessage, FormInstance, FormRules } from 'element-plus';
|
||||
import { Rules } from '@/global/form-rules';
|
||||
@ -54,30 +57,12 @@ import { CompressExtention, CompressType } from '@/enums/files';
|
||||
import { CompressFile } from '@/api/modules/files';
|
||||
import FileList from '@/components/file-list/index.vue';
|
||||
|
||||
const props = defineProps({
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
files: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'compress',
|
||||
},
|
||||
dst: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
interface CompressProps {
|
||||
files: Array<any>;
|
||||
dst: string;
|
||||
name: string;
|
||||
operate: string;
|
||||
}
|
||||
|
||||
const rules = reactive<FormRules>({
|
||||
type: [Rules.requiredSelect],
|
||||
@ -85,18 +70,16 @@ const rules = reactive<FormRules>({
|
||||
name: [Rules.requiredInput],
|
||||
});
|
||||
|
||||
const { open, files, type, dst, name } = toRefs(props);
|
||||
const fileForm = ref<FormInstance>();
|
||||
let loading = ref(false);
|
||||
let form = ref<File.FileCompress>({ files: [], type: 'zip', dst: '', name: '', replace: false });
|
||||
let options = ref<string[]>([]);
|
||||
let open = ref(false);
|
||||
let title = ref('');
|
||||
let operate = ref('compress');
|
||||
|
||||
const em = defineEmits(['close']);
|
||||
|
||||
const title = computed(() => {
|
||||
return i18n.global.t('file.' + type.value);
|
||||
});
|
||||
|
||||
const extension = computed(() => {
|
||||
return CompressExtention[form.value.type];
|
||||
});
|
||||
@ -106,26 +89,13 @@ const handleClose = () => {
|
||||
fileForm.value.resetFields();
|
||||
}
|
||||
em('close', open);
|
||||
open.value = false;
|
||||
};
|
||||
|
||||
const getLinkPath = (path: string) => {
|
||||
form.value.dst = path;
|
||||
};
|
||||
|
||||
const onOpen = () => {
|
||||
form.value = {
|
||||
dst: dst.value,
|
||||
type: 'zip',
|
||||
files: files.value as string[],
|
||||
name: name.value,
|
||||
replace: false,
|
||||
};
|
||||
options.value = [];
|
||||
for (const t in CompressType) {
|
||||
options.value.push(CompressType[t]);
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid) => {
|
||||
@ -146,4 +116,21 @@ const submit = async (formEl: FormInstance | undefined) => {
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const acceptParams = (props: CompressProps) => {
|
||||
form.value.files = props.files;
|
||||
form.value.dst = props.dst;
|
||||
form.value.name = props.name;
|
||||
|
||||
operate.value = props.operate;
|
||||
options.value = [];
|
||||
for (const t in CompressType) {
|
||||
options.value.push(CompressType[t]);
|
||||
}
|
||||
open.value = true;
|
||||
|
||||
title.value = i18n.global.t('file.' + props.operate);
|
||||
};
|
||||
|
||||
defineExpose({ acceptParams });
|
||||
</script>
|
||||
|
||||
@ -1,46 +1,54 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
<el-drawer
|
||||
v-model="open"
|
||||
:before-close="handleClose"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:title="$t('commons.button.create')"
|
||||
width="50%"
|
||||
@open="onOpen"
|
||||
size="40%"
|
||||
>
|
||||
<el-form
|
||||
ref="fileForm"
|
||||
label-position="left"
|
||||
:model="addForm"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form-item :label="$t('file.path')" prop="path"><el-input v-model="getPath" disabled /></el-form-item>
|
||||
<el-form-item :label="$t('file.name')" prop="name"><el-input v-model="addForm.name" /></el-form-item>
|
||||
<el-form-item v-if="!addForm.isDir">
|
||||
<el-checkbox v-model="addForm.isLink" :label="$t('file.link')"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.linkType')" v-if="addForm.isLink" prop="linkType">
|
||||
<el-radio-group v-model="addForm.isSymlink">
|
||||
<el-radio :label="true">{{ $t('file.softLink') }}</el-radio>
|
||||
<el-radio :label="false">{{ $t('file.hardLink') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="addForm.isLink" :label="$t('file.linkPath')" prop="linkPath">
|
||||
<el-input v-model="addForm.linkPath">
|
||||
<template #append>
|
||||
<FileList @choose="getLinkPath"></FileList>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox v-if="addForm.isDir" v-model="setRole" :label="$t('file.setRole')"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<template #header>
|
||||
<DrawerHeader :header="$t('commons.button.create')" :back="handleClose" />
|
||||
</template>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="22" :offset="1">
|
||||
<el-form
|
||||
ref="fileForm"
|
||||
label-position="top"
|
||||
:model="addForm"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form-item :label="$t('file.path')" prop="path">
|
||||
<el-input v-model="getPath" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.name')" prop="name">
|
||||
<el-input v-model="addForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!addForm.isDir">
|
||||
<el-checkbox v-model="addForm.isLink" :label="$t('file.link')"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.linkType')" v-if="addForm.isLink" prop="linkType">
|
||||
<el-radio-group v-model="addForm.isSymlink">
|
||||
<el-radio :label="true">{{ $t('file.softLink') }}</el-radio>
|
||||
<el-radio :label="false">{{ $t('file.hardLink') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="addForm.isLink" :label="$t('file.linkPath')" prop="linkPath">
|
||||
<el-input v-model="addForm.linkPath">
|
||||
<template #append>
|
||||
<FileList @choose="getLinkPath"></FileList>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox v-if="addForm.isDir" v-model="setRole" :label="$t('file.setRole')"></el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<FileRole v-if="setRole" :mode="'0755'" @get-mode="getMode"></FileRole>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
@ -48,11 +56,11 @@
|
||||
<el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { toRefs, ref, reactive, computed } from 'vue';
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { File } from '@/api/interface/file';
|
||||
import { ElMessage, FormInstance, FormRules } from 'element-plus';
|
||||
import { CreateFile } from '@/api/modules/files';
|
||||
@ -65,16 +73,18 @@ const fileForm = ref<FormInstance>();
|
||||
let loading = ref(false);
|
||||
let setRole = ref(false);
|
||||
|
||||
const props = defineProps({
|
||||
open: Boolean,
|
||||
file: Object,
|
||||
interface CreateProps {
|
||||
file: Object;
|
||||
}
|
||||
const propData = ref<CreateProps>({
|
||||
file: {},
|
||||
});
|
||||
const { open, file } = toRefs(props);
|
||||
|
||||
let addForm = reactive({ path: '', name: '', isDir: false, mode: 0o755, isLink: false, isSymlink: true, linkPath: '' });
|
||||
|
||||
let open = ref(false);
|
||||
const em = defineEmits(['close']);
|
||||
const handleClose = () => {
|
||||
open.value = false;
|
||||
if (fileForm.value) {
|
||||
fileForm.value.resetFields();
|
||||
}
|
||||
@ -126,16 +136,20 @@ const submit = async (formEl: FormInstance | undefined) => {
|
||||
});
|
||||
};
|
||||
|
||||
const onOpen = () => {
|
||||
const f = file?.value as File.FileCreate;
|
||||
addForm.isDir = f.isDir;
|
||||
addForm.path = f.path;
|
||||
const acceptParams = (create: File.FileCreate) => {
|
||||
propData.value.file = create;
|
||||
open.value = true;
|
||||
addForm.isDir = create.isDir;
|
||||
addForm.path = create.path;
|
||||
addForm.name = '';
|
||||
addForm.isLink = false;
|
||||
|
||||
init();
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
setRole.value = false;
|
||||
};
|
||||
|
||||
defineExpose({ acceptParams });
|
||||
</script>
|
||||
|
||||
@ -1,44 +1,41 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-model="open"
|
||||
:title="$t('file.deCompress')"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="handleClose"
|
||||
width="30%"
|
||||
@open="onOpen"
|
||||
<el-drawer
|
||||
v-model="open"
|
||||
:title="$t('file.deCompress')"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="handleClose"
|
||||
size="30%"
|
||||
>
|
||||
<el-form
|
||||
ref="fileForm"
|
||||
label-position="left"
|
||||
:model="form"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form
|
||||
ref="fileForm"
|
||||
label-position="left"
|
||||
:model="form"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form-item :label="$t('file.name')">
|
||||
<el-input v-model="name" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.deCompressDst')" prop="dst">
|
||||
<el-input v-model="form.dst" disabled>
|
||||
<template #append><FileList :path="props.dst" @choose="getLinkPath"></FileList></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<el-form-item :label="$t('file.name')">
|
||||
<el-input v-model="name" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.deCompressDst')" prop="dst">
|
||||
<el-input v-model="form.dst" disabled>
|
||||
<template #append><FileList :path="form.dst" @choose="getLinkPath"></FileList></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import i18n from '@/lang';
|
||||
import { reactive, ref, toRefs } from 'vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { File } from '@/api/interface/file';
|
||||
import { ElMessage, FormInstance, FormRules } from 'element-plus';
|
||||
import { Rules } from '@/global/form-rules';
|
||||
@ -46,37 +43,23 @@ import { DeCompressFile } from '@/api/modules/files';
|
||||
import { Mimetypes } from '@/global/mimetype';
|
||||
import FileList from '@/components/file-list/index.vue';
|
||||
|
||||
const props = defineProps({
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
dst: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
mimeType: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
interface CompressProps {
|
||||
files: Array<any>;
|
||||
dst: string;
|
||||
name: string;
|
||||
path: string;
|
||||
mimeType: string;
|
||||
}
|
||||
|
||||
const rules = reactive<FormRules>({
|
||||
dst: [Rules.requiredInput],
|
||||
});
|
||||
|
||||
const { open, dst, path, name, mimeType } = toRefs(props);
|
||||
const fileForm = ref<FormInstance>();
|
||||
let loading = ref(false);
|
||||
let form = ref<File.FileDeCompress>({ type: 'zip', dst: '', path: '' });
|
||||
let open = ref(false);
|
||||
let name = ref('');
|
||||
|
||||
const em = defineEmits(['close']);
|
||||
|
||||
@ -84,6 +67,7 @@ const handleClose = () => {
|
||||
if (fileForm.value) {
|
||||
fileForm.value.resetFields();
|
||||
}
|
||||
open.value = false;
|
||||
em('close', open);
|
||||
};
|
||||
|
||||
@ -99,14 +83,6 @@ const getLinkPath = (path: string) => {
|
||||
form.value.dst = path;
|
||||
};
|
||||
|
||||
const onOpen = () => {
|
||||
form.value = {
|
||||
dst: dst.value,
|
||||
type: getFileType(mimeType.value),
|
||||
path: path.value,
|
||||
};
|
||||
};
|
||||
|
||||
const submit = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid) => {
|
||||
@ -124,4 +100,14 @@ const submit = async (formEl: FormInstance | undefined) => {
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const acceptParams = (props: CompressProps) => {
|
||||
form.value.type = getFileType(props.mimeType);
|
||||
form.value.dst = props.dst;
|
||||
form.value.path = props.path;
|
||||
name.value = props.name;
|
||||
open.value = true;
|
||||
};
|
||||
|
||||
defineExpose({ acceptParams });
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-dialog v-model="open" :title="$t('file.info')" :column="1" width="30%">
|
||||
<el-drawer v-model="open" :title="$t('file.info')" :column="1" width="30%">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-descriptions :column="1" border>
|
||||
@ -16,7 +16,7 @@
|
||||
</el-descriptions>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -1,80 +1,70 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-model="open"
|
||||
:title="$t('file.download')"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="handleClose"
|
||||
width="30%"
|
||||
@open="onOpen"
|
||||
>
|
||||
<el-form
|
||||
ref="fileForm"
|
||||
label-position="left"
|
||||
:model="addForm"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form-item :label="$t('file.compressType')" prop="type">
|
||||
<el-select v-model="addForm.type">
|
||||
<el-option v-for="item in options" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.name')" prop="name">
|
||||
<el-input v-model="addForm.name">
|
||||
<template #append>{{ extension }}</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<el-drawer
|
||||
v-model="open"
|
||||
:title="$t('file.download')"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="handleClose"
|
||||
size="30%"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="11" :offset="1">
|
||||
<el-form
|
||||
ref="fileForm"
|
||||
label-position="top"
|
||||
:model="addForm"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form-item :label="$t('file.compressType')" prop="type">
|
||||
<el-select v-model="addForm.type">
|
||||
<el-option v-for="item in options" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.name')" prop="name">
|
||||
<el-input v-model="addForm.name">
|
||||
<template #append>{{ extension }}</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormInstance, FormRules } from 'element-plus';
|
||||
import { CompressExtention, CompressType } from '@/enums/files';
|
||||
import { computed, PropType, reactive, ref, toRefs } from 'vue';
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import { DownloadFile } from '@/api/modules/files';
|
||||
import { File } from '@/api/interface/file';
|
||||
import { Rules } from '@/global/form-rules';
|
||||
|
||||
const props = defineProps({
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
paths: {
|
||||
type: Array as PropType<string[]>,
|
||||
default: function () {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
interface DownloadProps {
|
||||
paths: Array<string>;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const rules = reactive<FormRules>({
|
||||
name: [Rules.requiredInput],
|
||||
type: [Rules.requiredInput],
|
||||
});
|
||||
|
||||
const { open } = toRefs(props);
|
||||
const fileForm = ref<FormInstance>();
|
||||
const options = ref<string[]>([]);
|
||||
let loading = ref(false);
|
||||
let open = ref(false);
|
||||
|
||||
const em = defineEmits(['close']);
|
||||
const handleClose = () => {
|
||||
open.value = false;
|
||||
if (fileForm.value) {
|
||||
fileForm.value.resetFields();
|
||||
}
|
||||
@ -91,18 +81,18 @@ const extension = computed(() => {
|
||||
return CompressExtention[addForm.value.type];
|
||||
});
|
||||
|
||||
const onOpen = () => {
|
||||
addForm.value = {
|
||||
type: 'zip',
|
||||
paths: props.paths,
|
||||
name: props.name,
|
||||
};
|
||||
console.log(addForm);
|
||||
options.value = [];
|
||||
for (const t in CompressType) {
|
||||
options.value.push(CompressType[t]);
|
||||
}
|
||||
};
|
||||
// const onOpen = () => {
|
||||
// addForm.value = {
|
||||
// type: 'zip',
|
||||
// paths: props.paths,
|
||||
// name: props.name,
|
||||
// };
|
||||
// console.log(addForm);
|
||||
// options.value = [];
|
||||
// for (const t in CompressType) {
|
||||
// options.value.push(CompressType[t]);
|
||||
// }
|
||||
// };
|
||||
|
||||
const submit = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
@ -130,4 +120,16 @@ const submit = async (formEl: FormInstance | undefined) => {
|
||||
});
|
||||
});
|
||||
};
|
||||
const acceptParams = (props: DownloadProps) => {
|
||||
addForm.value.paths = props.paths;
|
||||
addForm.value.name = props.name;
|
||||
addForm.value.type = 'zip';
|
||||
options.value = [];
|
||||
for (const t in CompressType) {
|
||||
options.value.push(CompressType[t]);
|
||||
}
|
||||
open.value = true;
|
||||
};
|
||||
|
||||
defineExpose({ acceptParams });
|
||||
</script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<el-button :icon="Refresh" circle @click="search" />
|
||||
</el-col>
|
||||
<el-col :span="22">
|
||||
<div style="background-color: #ffffff">
|
||||
<div class="path">
|
||||
<BreadCrumbs>
|
||||
<BreadCrumbItem @click="jump(-1)" :right="paths.length == 0">/</BreadCrumbItem>
|
||||
<BreadCrumbItem
|
||||
@ -23,7 +23,7 @@
|
||||
<LayoutContent :title="$t('file.file')" v-loading="loading">
|
||||
<template #toolbar>
|
||||
<el-dropdown @command="handleCreate">
|
||||
<el-button type="primary" icon="Plus">
|
||||
<el-button type="primary">
|
||||
{{ $t('commons.button.create') }}
|
||||
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||
</el-button>
|
||||
@ -114,55 +114,24 @@
|
||||
</ComplexTable>
|
||||
</template>
|
||||
|
||||
<CreateFile :open="filePage.open" :file="filePage.createForm" @close="closeCreate"></CreateFile>
|
||||
<ChangeRole :open="modePage.open" :file="modePage.modeForm" @close="closeMode"></ChangeRole>
|
||||
<Compress
|
||||
:open="compressPage.open"
|
||||
:files="compressPage.files"
|
||||
:dst="compressPage.dst"
|
||||
:name="compressPage.name"
|
||||
@close="closeCompress"
|
||||
></Compress>
|
||||
<Decompress
|
||||
:open="deCompressPage.open"
|
||||
:dst="deCompressPage.dst"
|
||||
:path="deCompressPage.path"
|
||||
:name="deCompressPage.name"
|
||||
:mimeType="deCompressPage.mimeType"
|
||||
@close="closeDeCompress"
|
||||
></Decompress>
|
||||
<CodeEditor
|
||||
:open="editorPage.open"
|
||||
:language="'json'"
|
||||
:content="editorPage.content"
|
||||
:loading="editorPage.loading"
|
||||
@close="closeCodeEditor"
|
||||
@qsave="quickSave"
|
||||
@save="saveContent"
|
||||
></CodeEditor>
|
||||
<FileRename
|
||||
:open="renamePage.open"
|
||||
:path="renamePage.path"
|
||||
:oldName="renamePage.oldName"
|
||||
@close="closeRename"
|
||||
></FileRename>
|
||||
<Upload :open="uploadPage.open" :path="uploadPage.path" @close="closeUpload"></Upload>
|
||||
<Wget :open="wgetPage.open" :path="wgetPage.path" @close="closeWget"></Wget>
|
||||
<Move :open="movePage.open" :oldPaths="movePage.oldPaths" :type="movePage.type" @close="clodeMove"></Move>
|
||||
<Download
|
||||
:open="downloadPage.open"
|
||||
:paths="downloadPage.paths"
|
||||
:name="downloadPage.name"
|
||||
@close="closeDownload"
|
||||
></Download>
|
||||
<Process :open="processPage.open" @close="closeProcess"></Process>
|
||||
<Detail ref="detailRef"></Detail>
|
||||
<CreateFile ref="createRef" @close="search" />
|
||||
<ChangeRole ref="roleRef" @close="search" />
|
||||
<Compress ref="compressRef" @close="search" />
|
||||
<Decompress ref="deCompressRef" @close="search" />
|
||||
<CodeEditor ref="codeEditorRef" @close="search" />
|
||||
<FileRename ref="renameRef" @close="search" />
|
||||
<Upload ref="uploadRef" @close="search" />
|
||||
<Wget ref="wgetRef" @close="closeWget" />
|
||||
<Move ref="moveRef" @close="search" />
|
||||
<Download ref="downloadRef" @close="search" />
|
||||
<Process :open="processPage.open" @close="closeProcess" />
|
||||
<Detail ref="detailRef" />
|
||||
</LayoutContent>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from '@vue/runtime-core';
|
||||
import { GetFilesList, DeleteFile, GetFileContent, SaveFileContent, ComputeDirSize } from '@/api/modules/files';
|
||||
import { GetFilesList, DeleteFile, GetFileContent, ComputeDirSize } from '@/api/modules/files';
|
||||
import { computeSize, dateFormat, getIcon, getRandomStr } from '@/utils/util';
|
||||
import { File } from '@/api/interface/file';
|
||||
import { useDeleteData } from '@/hooks/use-delete-data';
|
||||
@ -195,19 +164,29 @@ let req = reactive({ path: '/', expand: true, showHidden: false, page: 1, pageSi
|
||||
let loading = ref(false);
|
||||
const paths = ref<string[]>([]);
|
||||
|
||||
const filePage = reactive({ open: false, createForm: { path: '/', isDir: false, mode: 0o755 } });
|
||||
const modePage = reactive({ open: false, modeForm: { path: '/', isDir: false, mode: 0o755 } });
|
||||
const compressPage = reactive({ open: false, files: [''], name: '', dst: '' });
|
||||
const deCompressPage = reactive({ open: false, path: '', name: '', dst: '', mimeType: '' });
|
||||
const editorPage = reactive({ open: false, content: '', loading: false });
|
||||
const fileCreate = reactive({ path: '/', isDir: false, mode: 0o755 });
|
||||
const fileCompress = reactive({ files: [''], name: '', dst: '', operate: 'compress' });
|
||||
const fileDeCompress = reactive({ path: '', name: '', dst: '', mimeType: '' });
|
||||
const fileEdit = reactive({ content: '', path: '', name: '' });
|
||||
const codeReq = reactive({ path: '', expand: false, page: 1, pageSize: 100 });
|
||||
const uploadPage = reactive({ open: false, path: '' });
|
||||
const renamePage = reactive({ open: false, path: '', oldName: '' });
|
||||
const wgetPage = reactive({ open: false, path: '' });
|
||||
const movePage = reactive({ open: false, oldPaths: [''], type: '' });
|
||||
const downloadPage = reactive({ open: false, paths: [''], name: '' });
|
||||
const fileUpload = reactive({ path: '' });
|
||||
const fileRename = reactive({ path: '', oldName: '' });
|
||||
const fileWget = reactive({ path: '' });
|
||||
const fileMove = reactive({ oldPaths: [''], type: '' });
|
||||
const fileDownload = reactive({ paths: [''], name: '' });
|
||||
const processPage = reactive({ open: false });
|
||||
|
||||
const createRef = ref();
|
||||
const roleRef = ref();
|
||||
const detailRef = ref();
|
||||
const compressRef = ref();
|
||||
const deCompressRef = ref();
|
||||
const codeEditorRef = ref();
|
||||
const renameRef = ref();
|
||||
const uploadRef = ref();
|
||||
const wgetRef = ref();
|
||||
const moveRef = ref();
|
||||
const downloadRef = ref();
|
||||
|
||||
const paginationConfig = reactive({
|
||||
currentPage: 1,
|
||||
@ -269,12 +248,12 @@ const jump = async (index: number) => {
|
||||
};
|
||||
|
||||
const handleCreate = (commnad: string) => {
|
||||
filePage.createForm.path = req.path;
|
||||
filePage.createForm.isDir = false;
|
||||
fileCreate.path = req.path;
|
||||
fileCreate.isDir = false;
|
||||
if (commnad === 'dir') {
|
||||
filePage.createForm.isDir = true;
|
||||
fileCreate.isDir = true;
|
||||
}
|
||||
filePage.open = true;
|
||||
createRef.value.acceptParams(fileCreate);
|
||||
};
|
||||
|
||||
const delFile = async (row: File.File | null) => {
|
||||
@ -304,39 +283,24 @@ const getIconName = (extension: string) => {
|
||||
return getIcon(extension);
|
||||
};
|
||||
|
||||
const closeCreate = () => {
|
||||
filePage.open = false;
|
||||
search();
|
||||
};
|
||||
|
||||
const openMode = (item: File.File) => {
|
||||
modePage.modeForm = item;
|
||||
modePage.open = true;
|
||||
};
|
||||
|
||||
const closeMode = () => {
|
||||
modePage.open = false;
|
||||
search();
|
||||
roleRef.value.acceptParams(item);
|
||||
};
|
||||
|
||||
const openCompress = (items: File.File[]) => {
|
||||
compressPage.open = true;
|
||||
const paths = [];
|
||||
for (const item of items) {
|
||||
paths.push(item.path);
|
||||
}
|
||||
compressPage.files = paths;
|
||||
fileCompress.files = paths;
|
||||
if (paths.length === 1) {
|
||||
compressPage.name = items[0].name;
|
||||
fileCompress.name = items[0].name;
|
||||
} else {
|
||||
compressPage.name = getRandomStr(6);
|
||||
fileCompress.name = getRandomStr(6);
|
||||
}
|
||||
compressPage.dst = req.path;
|
||||
};
|
||||
fileCompress.dst = req.path;
|
||||
|
||||
const closeCompress = () => {
|
||||
compressPage.open = false;
|
||||
search();
|
||||
compressRef.value.acceptParams(fileCompress);
|
||||
};
|
||||
|
||||
const openDeCompress = (item: File.File) => {
|
||||
@ -345,48 +309,36 @@ const openDeCompress = (item: File.File) => {
|
||||
return;
|
||||
}
|
||||
|
||||
deCompressPage.open = true;
|
||||
deCompressPage.name = item.name;
|
||||
deCompressPage.path = item.path;
|
||||
deCompressPage.dst = req.path;
|
||||
deCompressPage.mimeType = item.mimeType;
|
||||
};
|
||||
fileDeCompress.name = item.name;
|
||||
fileDeCompress.path = item.path;
|
||||
fileDeCompress.dst = req.path;
|
||||
fileDeCompress.mimeType = item.mimeType;
|
||||
|
||||
const closeDeCompress = () => {
|
||||
deCompressPage.open = false;
|
||||
search();
|
||||
deCompressRef.value.acceptParams(fileDeCompress);
|
||||
};
|
||||
|
||||
const openCodeEditor = (row: File.File) => {
|
||||
codeReq.path = row.path;
|
||||
codeReq.expand = true;
|
||||
GetFileContent(codeReq).then((res) => {
|
||||
editorPage.content = res.data.content;
|
||||
editorPage.open = true;
|
||||
fileEdit.content = res.data.content;
|
||||
fileEdit.path = res.data.path;
|
||||
fileEdit.name = res.data.name;
|
||||
codeEditorRef.value.acceptParams(fileEdit);
|
||||
});
|
||||
};
|
||||
|
||||
const closeCodeEditor = () => {
|
||||
editorPage.open = false;
|
||||
};
|
||||
|
||||
const openUpload = () => {
|
||||
uploadPage.open = true;
|
||||
uploadPage.path = req.path;
|
||||
};
|
||||
|
||||
const closeUpload = () => {
|
||||
uploadPage.open = false;
|
||||
search();
|
||||
fileUpload.path = req.path;
|
||||
uploadRef.value.acceptParams(fileUpload);
|
||||
};
|
||||
|
||||
const openWget = () => {
|
||||
wgetPage.open = true;
|
||||
wgetPage.path = req.path;
|
||||
fileWget.path = req.path;
|
||||
wgetRef.value.acceptParams(fileWget);
|
||||
};
|
||||
|
||||
const closeWget = (submit: any) => {
|
||||
wgetPage.open = false;
|
||||
search();
|
||||
if (submit) {
|
||||
openProcess();
|
||||
@ -402,29 +354,19 @@ const closeProcess = () => {
|
||||
};
|
||||
|
||||
const openRename = (item: File.File) => {
|
||||
renamePage.open = true;
|
||||
renamePage.path = req.path;
|
||||
renamePage.oldName = item.name;
|
||||
};
|
||||
|
||||
const closeRename = () => {
|
||||
renamePage.open = false;
|
||||
search();
|
||||
fileRename.path = req.path;
|
||||
fileRename.oldName = item.name;
|
||||
renameRef.value.acceptParams(fileRename);
|
||||
};
|
||||
|
||||
const openMove = (type: string) => {
|
||||
movePage.type = type;
|
||||
fileMove.type = type;
|
||||
const oldpaths = [];
|
||||
for (const s of selects.value) {
|
||||
oldpaths.push(s['path']);
|
||||
}
|
||||
movePage.oldPaths = oldpaths;
|
||||
movePage.open = true;
|
||||
};
|
||||
|
||||
const clodeMove = () => {
|
||||
movePage.open = false;
|
||||
search();
|
||||
fileMove.oldPaths = oldpaths;
|
||||
moveRef.value.acceptParams(fileMove);
|
||||
};
|
||||
|
||||
const openDownload = () => {
|
||||
@ -432,31 +374,31 @@ const openDownload = () => {
|
||||
for (const s of selects.value) {
|
||||
paths.push(s['path']);
|
||||
}
|
||||
downloadPage.paths = paths;
|
||||
downloadPage.name = getRandomStr(6);
|
||||
downloadPage.open = true;
|
||||
fileDownload.paths = paths;
|
||||
fileDownload.name = getRandomStr(6);
|
||||
downloadRef.value.acceptParams(fileDownload);
|
||||
};
|
||||
|
||||
const closeDownload = () => {
|
||||
downloadPage.open = false;
|
||||
search();
|
||||
};
|
||||
const saveContent = (content: string) => {
|
||||
editorPage.loading = true;
|
||||
SaveFileContent({ path: codeReq.path, content: content }).finally(() => {
|
||||
editorPage.loading = false;
|
||||
editorPage.open = false;
|
||||
ElMessage.success(i18n.global.t('commons.msg.updateSuccess'));
|
||||
});
|
||||
};
|
||||
// const closeDownload = () => {
|
||||
// downloadPage.open = false;
|
||||
// search();
|
||||
// };
|
||||
// const saveContent = (content: string) => {
|
||||
// editorPage.loading = true;
|
||||
// SaveFileContent({ path: codeReq.path, content: content }).finally(() => {
|
||||
// editorPage.loading = false;
|
||||
// editorPage.open = false;
|
||||
// ElMessage.success(i18n.global.t('commons.msg.updateSuccess'));
|
||||
// });
|
||||
// };
|
||||
|
||||
const quickSave = (content: string) => {
|
||||
editorPage.loading = true;
|
||||
SaveFileContent({ path: codeReq.path, content: content }).finally(() => {
|
||||
editorPage.loading = false;
|
||||
ElMessage.success(i18n.global.t('commons.msg.updateSuccess'));
|
||||
});
|
||||
};
|
||||
// const quickSave = (content: string) => {
|
||||
// editorPage.loading = true;
|
||||
// SaveFileContent({ path: codeReq.path, content: content }).finally(() => {
|
||||
// editorPage.loading = false;
|
||||
// ElMessage.success(i18n.global.t('commons.msg.updateSuccess'));
|
||||
// });
|
||||
// };
|
||||
|
||||
const openDetail = (row: File.File) => {
|
||||
detailRef.value.acceptParams({ path: row.path });
|
||||
@ -508,8 +450,7 @@ onMounted(() => {
|
||||
|
||||
<style>
|
||||
.path {
|
||||
height: 30px;
|
||||
margin-bottom: 5px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
<el-drawer
|
||||
v-model="open"
|
||||
:title="title"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="handleClose"
|
||||
width="30%"
|
||||
@open="onOpen"
|
||||
size="30%"
|
||||
>
|
||||
<el-form
|
||||
ref="fileForm"
|
||||
@ -30,7 +29,7 @@
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -38,32 +37,21 @@ import { MoveFile } from '@/api/modules/files';
|
||||
import { Rules } from '@/global/form-rules';
|
||||
import i18n from '@/lang';
|
||||
import { ElMessage, FormInstance, FormRules } from 'element-plus';
|
||||
import { toRefs, ref, reactive, PropType, computed } from 'vue';
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import FileList from '@/components/file-list/index.vue';
|
||||
|
||||
const props = defineProps({
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
oldPaths: {
|
||||
type: Array as PropType<string[]>,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
interface MoveProps {
|
||||
oldPaths: Array<string>;
|
||||
type: string;
|
||||
}
|
||||
|
||||
const { open } = toRefs(props);
|
||||
const fileForm = ref<FormInstance>();
|
||||
const loading = ref(false);
|
||||
let open = ref(false);
|
||||
let type = ref('cut');
|
||||
|
||||
const title = computed(() => {
|
||||
if (props.type === 'cut') {
|
||||
if (type.value === 'cut') {
|
||||
return i18n.global.t('file.move');
|
||||
} else {
|
||||
return i18n.global.t('file.copy');
|
||||
@ -83,6 +71,7 @@ const rules = reactive<FormRules>({
|
||||
const em = defineEmits(['close']);
|
||||
|
||||
const handleClose = () => {
|
||||
open.value = false;
|
||||
if (fileForm.value) {
|
||||
fileForm.value.resetFields();
|
||||
}
|
||||
@ -111,8 +100,12 @@ const submit = async (formEl: FormInstance | undefined) => {
|
||||
});
|
||||
};
|
||||
|
||||
const onOpen = () => {
|
||||
const acceptParams = (props: MoveProps) => {
|
||||
addForm.oldPaths = props.oldPaths;
|
||||
addForm.type = props.type;
|
||||
type.value = props.type;
|
||||
open.value = true;
|
||||
};
|
||||
|
||||
defineExpose({ acceptParams });
|
||||
</script>
|
||||
|
||||
@ -1,53 +1,50 @@
|
||||
<template>
|
||||
<el-dialog v-model="open" :before-close="handleClose" :title="$t('file.setRole')" width="30%" @open="onOpen">
|
||||
<el-form
|
||||
ref="fileForm"
|
||||
label-position="left"
|
||||
:model="addForm"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form-item :label="$t('file.path')" prop="path">
|
||||
<el-input v-model="props.path" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.name')" prop="newName"><el-input v-model="addForm.newName" /></el-form-item>
|
||||
</el-form>
|
||||
<el-drawer v-model="open" :before-close="handleClose" :title="$t('file.rename')" size="30%">
|
||||
<el-row>
|
||||
<el-col :span="22" :offset="1">
|
||||
<el-form
|
||||
ref="fileForm"
|
||||
label-position="top"
|
||||
:model="addForm"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form-item :label="$t('file.path')" prop="path">
|
||||
<el-input v-model="addForm.path" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.name')" prop="newName">
|
||||
<el-input v-model="addForm.newName" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { RenameRile } from '@/api/modules/files';
|
||||
import { Rules } from '@/global/form-rules';
|
||||
import { ElMessage, FormInstance, FormRules } from 'element-plus';
|
||||
import { reactive, ref, toRefs } from 'vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { File } from '@/api/interface/file';
|
||||
import i18n from '@/lang';
|
||||
|
||||
const props = defineProps({
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
oldName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
interface RenameProps {
|
||||
path: string;
|
||||
oldName: string;
|
||||
}
|
||||
|
||||
const { open } = toRefs(props);
|
||||
const fileForm = ref<FormInstance>();
|
||||
const loading = ref(false);
|
||||
let open = ref(false);
|
||||
const oldName = ref('');
|
||||
|
||||
const addForm = reactive({
|
||||
newName: '',
|
||||
@ -60,6 +57,7 @@ const rules = reactive<FormRules>({
|
||||
|
||||
const em = defineEmits(['close']);
|
||||
const handleClose = () => {
|
||||
open.value = false;
|
||||
if (fileForm.value) {
|
||||
fileForm.value.resetFields();
|
||||
}
|
||||
@ -78,8 +76,8 @@ const submit = async (formEl: FormInstance | undefined) => {
|
||||
|
||||
let addItem = {};
|
||||
Object.assign(addItem, addForm);
|
||||
addItem['oldName'] = getPath(props.path, props.oldName);
|
||||
addItem['newName'] = getPath(props.path, addForm.newName);
|
||||
addItem['oldName'] = getPath(addForm.path, oldName.value);
|
||||
addItem['newName'] = getPath(addForm.path, addForm.newName);
|
||||
loading.value = true;
|
||||
RenameRile(addItem as File.FileRename)
|
||||
.then(() => {
|
||||
@ -92,7 +90,12 @@ const submit = async (formEl: FormInstance | undefined) => {
|
||||
});
|
||||
};
|
||||
|
||||
const onOpen = () => {
|
||||
const acceptParams = (props: RenameProps) => {
|
||||
oldName.value = props.oldName;
|
||||
addForm.newName = props.oldName;
|
||||
addForm.path = props.path;
|
||||
open.value = true;
|
||||
};
|
||||
|
||||
defineExpose({ acceptParams });
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-dialog v-model="open" :title="$t('file.upload')" :before-close="handleClose" width="30%" :file-list="files">
|
||||
<el-drawer v-model="open" :title="$t('file.upload')" :before-close="handleClose" size="40%" :file-list="files">
|
||||
<el-upload
|
||||
action="#"
|
||||
:auto-upload="false"
|
||||
@ -21,7 +21,7 @@
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -30,24 +30,20 @@ import { ElMessage, UploadFile, UploadFiles, UploadInstance } from 'element-plus
|
||||
import { UploadFileData } from '@/api/modules/files';
|
||||
import i18n from '@/lang';
|
||||
|
||||
const props = defineProps({
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
interface UploadProps {
|
||||
path: string;
|
||||
}
|
||||
|
||||
const uploadRef = ref<UploadInstance>();
|
||||
const files = ref();
|
||||
const loading = ref(false);
|
||||
let uploadPrecent = ref(0);
|
||||
let open = ref(false);
|
||||
let path = ref();
|
||||
|
||||
const em = defineEmits(['close']);
|
||||
const handleClose = () => {
|
||||
open.value = false;
|
||||
uploadRef.value!.clearFiles();
|
||||
em('close', false);
|
||||
};
|
||||
@ -70,7 +66,7 @@ const submit = () => {
|
||||
formData.append('file', file.raw);
|
||||
}
|
||||
}
|
||||
formData.append('path', props.path);
|
||||
formData.append('path', path.value);
|
||||
loading.value = true;
|
||||
UploadFileData(formData, { onUploadProgress: onProcess })
|
||||
.then(() => {
|
||||
@ -81,4 +77,11 @@ const submit = () => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const acceptParams = (props: UploadProps) => {
|
||||
path.value = props.path;
|
||||
open.value = true;
|
||||
};
|
||||
|
||||
defineExpose({ acceptParams });
|
||||
</script>
|
||||
|
||||
@ -1,34 +1,38 @@
|
||||
<template>
|
||||
<el-dialog v-model="open" :before-close="handleClose" :title="$t('file.download')" width="30%" @open="onOpen">
|
||||
<el-form
|
||||
ref="fileForm"
|
||||
label-position="left"
|
||||
:model="addForm"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form-item :label="$t('file.downloadUrl')" prop="url">
|
||||
<el-input v-model="addForm.url" @input="getFileName" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.path')" prop="path">
|
||||
<el-input v-model="addForm.path" disabled>
|
||||
<template #append><FileList :path="path" @choose="getPath"></FileList></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.name')" prop="name">
|
||||
<el-input v-model="addForm.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-drawer v-model="open" :before-close="handleClose" :title="$t('file.download')" size="50%">
|
||||
<el-row>
|
||||
<el-col :span="22" :offset="1">
|
||||
<el-form
|
||||
ref="fileForm"
|
||||
label-position="top"
|
||||
:model="addForm"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form-item :label="$t('file.downloadUrl')" prop="url">
|
||||
<el-input v-model="addForm.url" @input="getFileName" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.path')" prop="path">
|
||||
<el-input v-model="addForm.path" disabled>
|
||||
<template #append><FileList :path="addForm.path" @choose="getPath"></FileList></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.name')" prop="name">
|
||||
<el-input v-model="addForm.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose(false)" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button @click="handleClose()" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit(fileForm)" :disabled="loading">
|
||||
{{ $t('commons.button.confirm') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -36,22 +40,17 @@ import { WgetFile } from '@/api/modules/files';
|
||||
import { Rules } from '@/global/form-rules';
|
||||
import i18n from '@/lang';
|
||||
import { ElMessage, FormInstance, FormRules } from 'element-plus';
|
||||
import { reactive, ref, toRefs } from 'vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
import FileList from '@/components/file-list/index.vue';
|
||||
|
||||
const props = defineProps({
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
const { open } = toRefs(props);
|
||||
interface WgetProps {
|
||||
path: string;
|
||||
}
|
||||
|
||||
const fileForm = ref<FormInstance>();
|
||||
const loading = ref(false);
|
||||
let open = ref(false);
|
||||
let submitData = ref(false);
|
||||
|
||||
const rules = reactive<FormRules>({
|
||||
name: [Rules.requiredInput],
|
||||
@ -67,15 +66,12 @@ const addForm = reactive({
|
||||
|
||||
const em = defineEmits(['close']);
|
||||
|
||||
const handleClose = (submit: boolean) => {
|
||||
const handleClose = () => {
|
||||
if (fileForm.value) {
|
||||
fileForm.value.resetFields();
|
||||
}
|
||||
if (submit != true) {
|
||||
em('close', false);
|
||||
} else {
|
||||
em('close', true);
|
||||
}
|
||||
open.value = false;
|
||||
em('close', submitData);
|
||||
};
|
||||
|
||||
const getPath = (path: string) => {
|
||||
@ -92,7 +88,8 @@ const submit = async (formEl: FormInstance | undefined) => {
|
||||
WgetFile(addForm)
|
||||
.then(() => {
|
||||
ElMessage.success(i18n.global.t('file.downloadStart'));
|
||||
handleClose(true);
|
||||
submitData.value = true;
|
||||
handleClose();
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
@ -105,7 +102,10 @@ const getFileName = (url: string) => {
|
||||
addForm.name = paths[paths.length - 1];
|
||||
};
|
||||
|
||||
const onOpen = () => {
|
||||
const acceptParams = (props: WgetProps) => {
|
||||
addForm.path = props.path;
|
||||
open.value = true;
|
||||
};
|
||||
|
||||
defineExpose({ acceptParams });
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user