mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-01-31 22:18:07 +08:00
feat: 优化文件选择逻辑 (#1532)
This commit is contained in:
parent
a0ceb62372
commit
3cbaa052c8
@ -11,7 +11,7 @@
|
|||||||
<el-button :icon="Folder" @click="popoverVisible = true"></el-button>
|
<el-button :icon="Folder" @click="popoverVisible = true"></el-button>
|
||||||
</template>
|
</template>
|
||||||
<div>
|
<div>
|
||||||
<el-button class="close" link @click="popoverVisible = false">
|
<el-button class="close" link @click="closePage">
|
||||||
<el-icon><Close /></el-icon>
|
<el-icon><Close /></el-icon>
|
||||||
</el-button>
|
</el-button>
|
||||||
<BreadCrumbs>
|
<BreadCrumbs>
|
||||||
@ -67,6 +67,22 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="file-list-bottom">
|
||||||
|
<div v-if="selectRow?.path">
|
||||||
|
{{ $t('file.currentSelect') }}
|
||||||
|
<el-tooltip :content="selectRow.path" placement="top">
|
||||||
|
<el-tag type="success">
|
||||||
|
<div class="path">
|
||||||
|
<span>{{ selectRow.path }}</span>
|
||||||
|
</div>
|
||||||
|
</el-tag>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<el-button @click="closePage">{{ $t('commons.button.cancel') }}</el-button>
|
||||||
|
<el-button type="primary" @click="selectFile">{{ $t('commons.button.confirm') }}</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -78,11 +94,12 @@ import BreadCrumbs from '@/components/bread-crumbs/index.vue';
|
|||||||
import BreadCrumbItem from '@/components/bread-crumbs/bread-crumbs-item.vue';
|
import BreadCrumbItem from '@/components/bread-crumbs/bread-crumbs-item.vue';
|
||||||
import { onMounted, onUpdated, reactive, ref } from 'vue';
|
import { onMounted, onUpdated, reactive, ref } from 'vue';
|
||||||
|
|
||||||
let rowName = ref('');
|
const rowName = ref('');
|
||||||
let data = ref();
|
const data = ref();
|
||||||
let loading = ref(false);
|
const loading = ref(false);
|
||||||
let paths = ref<string[]>([]);
|
const paths = ref<string[]>([]);
|
||||||
let req = reactive({ path: '/', expand: true, page: 1, pageSize: 300 });
|
const req = reactive({ path: '/', expand: true, page: 1, pageSize: 300 });
|
||||||
|
const selectRow = ref();
|
||||||
|
|
||||||
const popoverVisible = ref(false);
|
const popoverVisible = ref(false);
|
||||||
|
|
||||||
@ -100,9 +117,20 @@ const props = defineProps({
|
|||||||
const em = defineEmits(['choose']);
|
const em = defineEmits(['choose']);
|
||||||
|
|
||||||
const checkFile = (row: any) => {
|
const checkFile = (row: any) => {
|
||||||
rowName.value = row.name;
|
selectRow.value = row;
|
||||||
em('choose', row.path);
|
rowName.value = selectRow.value.name;
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectFile = () => {
|
||||||
|
if (selectRow.value) {
|
||||||
|
em('choose', selectRow.value.path);
|
||||||
|
}
|
||||||
|
closePage();
|
||||||
|
};
|
||||||
|
|
||||||
|
const closePage = () => {
|
||||||
popoverVisible.value = false;
|
popoverVisible.value = false;
|
||||||
|
selectRow.value = {};
|
||||||
};
|
};
|
||||||
|
|
||||||
const open = async (row: File.File) => {
|
const open = async (row: File.File) => {
|
||||||
@ -116,6 +144,7 @@ const open = async (row: File.File) => {
|
|||||||
}
|
}
|
||||||
search(req);
|
search(req);
|
||||||
}
|
}
|
||||||
|
rowName.value = '';
|
||||||
};
|
};
|
||||||
|
|
||||||
const jump = async (index: number) => {
|
const jump = async (index: number) => {
|
||||||
@ -172,4 +201,17 @@ onUpdated(() => {
|
|||||||
top: 10px;
|
top: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.file-list-bottom {
|
||||||
|
margin-top: 10px;
|
||||||
|
.path {
|
||||||
|
width: 250px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
margin-top: 10px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -867,6 +867,7 @@ const message = {
|
|||||||
searchHelper: 'Support wildcards such as *',
|
searchHelper: 'Support wildcards such as *',
|
||||||
uploadFailed: '[{0}] File Upload file',
|
uploadFailed: '[{0}] File Upload file',
|
||||||
fileUploadStart: 'Uploading [{0}]....',
|
fileUploadStart: 'Uploading [{0}]....',
|
||||||
|
currentSelect: 'Current Select: ',
|
||||||
},
|
},
|
||||||
ssh: {
|
ssh: {
|
||||||
sshAlert:
|
sshAlert:
|
||||||
|
@ -837,6 +837,7 @@ const message = {
|
|||||||
searchHelper: '支持 * 等通配符',
|
searchHelper: '支持 * 等通配符',
|
||||||
uploadFailed: '[{0}] 文件上傳失敗',
|
uploadFailed: '[{0}] 文件上傳失敗',
|
||||||
fileUploadStart: '正在上傳[{0}]....',
|
fileUploadStart: '正在上傳[{0}]....',
|
||||||
|
currentSelect: '當前選中: ',
|
||||||
},
|
},
|
||||||
ssh: {
|
ssh: {
|
||||||
sshAlert: '列表數據根據登錄時間排序,但請註意,切換時區或其他操作可能導致登錄日誌的時間出現偏差。',
|
sshAlert: '列表數據根據登錄時間排序,但請註意,切換時區或其他操作可能導致登錄日誌的時間出現偏差。',
|
||||||
|
@ -837,6 +837,7 @@ const message = {
|
|||||||
searchHelper: '支持 * 等通配符',
|
searchHelper: '支持 * 等通配符',
|
||||||
uploadFailed: '[{0}] 文件上传失败',
|
uploadFailed: '[{0}] 文件上传失败',
|
||||||
fileUploadStart: '正在上传[{0}]....',
|
fileUploadStart: '正在上传[{0}]....',
|
||||||
|
currentSelect: '当前选中: ',
|
||||||
},
|
},
|
||||||
ssh: {
|
ssh: {
|
||||||
sshAlert: '列表数据根据登录时间排序,但请注意,切换时区或其他操作可能导致登录日志的时间出现偏差。',
|
sshAlert: '列表数据根据登录时间排序,但请注意,切换时区或其他操作可能导致登录日志的时间出现偏差。',
|
||||||
|
@ -45,7 +45,16 @@
|
|||||||
</template>
|
</template>
|
||||||
<template #main>
|
<template #main>
|
||||||
<el-row :gutter="5">
|
<el-row :gutter="5">
|
||||||
<el-col v-for="(app, index) in apps" :key="index" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
<el-col
|
||||||
|
class="app-col-12"
|
||||||
|
v-for="(app, index) in apps"
|
||||||
|
:key="index"
|
||||||
|
:xs="24"
|
||||||
|
:sm="12"
|
||||||
|
:md="8"
|
||||||
|
:lg="8"
|
||||||
|
:xl="8"
|
||||||
|
>
|
||||||
<div class="app-card">
|
<div class="app-card">
|
||||||
<el-card class="e-card">
|
<el-card class="e-card">
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
@ -177,20 +186,15 @@ const getAppDetail = (key: string) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const sync = () => {
|
const sync = () => {
|
||||||
loading.value = true;
|
SyncApp().then((res) => {
|
||||||
SyncApp()
|
if (res.message != '') {
|
||||||
.then((res) => {
|
MsgSuccess(res.message);
|
||||||
if (res.message != '') {
|
} else {
|
||||||
MsgSuccess(res.message);
|
MsgSuccess(i18n.global.t('app.syncStart'));
|
||||||
} else {
|
}
|
||||||
MsgSuccess(i18n.global.t('app.syncStart'));
|
canUpdate.value = false;
|
||||||
}
|
search(req);
|
||||||
canUpdate.value = false;
|
});
|
||||||
search(req);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
loading.value = false;
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const changeTag = (key: string) => {
|
const changeTag = (key: string) => {
|
||||||
@ -288,4 +292,11 @@ onMounted(() => {
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 768px) and (max-width: 1200px) {
|
||||||
|
.app-col-12 {
|
||||||
|
max-width: 50%;
|
||||||
|
flex: 0 0 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -16,13 +16,13 @@ const buttons = [
|
|||||||
label: i18n.global.t('menu.config'),
|
label: i18n.global.t('menu.config'),
|
||||||
path: '/hosts/ssh/ssh',
|
path: '/hosts/ssh/ssh',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
label: i18n.global.t('ssh.loginLogs'),
|
|
||||||
path: '/hosts/ssh/log',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: i18n.global.t('ssh.session'),
|
label: i18n.global.t('ssh.session'),
|
||||||
path: '/hosts/ssh/session',
|
path: '/hosts/ssh/session',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: i18n.global.t('ssh.loginLogs'),
|
||||||
|
path: '/hosts/ssh/log',
|
||||||
|
},
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
|
@ -26,7 +26,7 @@
|
|||||||
<template #main>
|
<template #main>
|
||||||
<ComplexTable :data="data" ref="tableRef" v-loading="loading">
|
<ComplexTable :data="data" ref="tableRef" v-loading="loading">
|
||||||
<el-table-column :label="$t('commons.table.user')" fix prop="username"></el-table-column>
|
<el-table-column :label="$t('commons.table.user')" fix prop="username"></el-table-column>
|
||||||
<el-table-column :label="'PTS'" fix prop="terminal"></el-table-column>
|
<el-table-column :label="'TTY'" fix prop="terminal"></el-table-column>
|
||||||
<el-table-column :label="$t('ssh.loginIP')" fix prop="host"></el-table-column>
|
<el-table-column :label="$t('ssh.loginIP')" fix prop="host"></el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
:label="$t('ssh.loginTime')"
|
:label="$t('ssh.loginTime')"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user