update:上传控件移到cid顶部
This commit is contained in:
@@ -33,7 +33,7 @@
|
||||
"dayjs": "^1.11.13",
|
||||
"driver.js": "^0.9.8",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "2.9.3",
|
||||
"element-plus": "^2.13.6",
|
||||
"form-designer-plus": "^0.1.5",
|
||||
"grid-layout-plus": "^1.1.1",
|
||||
"html2pdf.js": "^0.10.2",
|
||||
|
||||
@@ -10,6 +10,7 @@ export default {
|
||||
title5: 'Full Screen On',
|
||||
title6: 'Full Screen Off',
|
||||
title7: 'Approve',
|
||||
title8: 'Upload List',
|
||||
titleApp: 'Client',
|
||||
dropdownLarge: 'Large',
|
||||
dropdownDefault: 'Default',
|
||||
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
title5: '开全屏',
|
||||
title6: '关全屏',
|
||||
title7: '审批',
|
||||
title8: '上传列表',
|
||||
titleApp: '客户端',
|
||||
dropdownLarge: '大型',
|
||||
dropdownDefault: '默认',
|
||||
|
||||
@@ -34,6 +34,13 @@
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown> -->
|
||||
<div class="layout-navbars-breadcrumb-user-icon" @click="openUploadList" :title="$t('user.title8')">
|
||||
<el-badge :value="uploadNum" :max="99">
|
||||
<el-icon>
|
||||
<ele-Upload />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
</div>
|
||||
<div class="layout-navbars-breadcrumb-user-icon" @click="onLockClick" :title="$t('layout.threeLockScreenTime')">
|
||||
<el-icon>
|
||||
<ele-Lock />
|
||||
@@ -110,6 +117,7 @@
|
||||
<personal-drawer ref="personalDrawerRef"></personal-drawer>
|
||||
<userTenant ref="tenantRef" />
|
||||
<NewsLists ref="newsListRef" />
|
||||
<UploadList v-model="uploadListShow" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -131,6 +139,7 @@ import clientCid from '/@/assets/client-cid.svg';
|
||||
import WujieVue from 'wujie-vue3';
|
||||
import { queryMineTask } from '/@/api/flow/task';
|
||||
import { enableConfigByTenant } from '/@/spdm/utils/index'; // SPDM CODE
|
||||
import UploadList from '/@/spdm/components/common/uploadList/index.vue'; // SPDM CODE
|
||||
import { CODE_ENV } from '/@/spdm/config';
|
||||
|
||||
const { bus } = WujieVue;
|
||||
@@ -316,6 +325,21 @@ const onLockClick = () => {
|
||||
Local.set('themeConfig', themeConfig.value);
|
||||
};
|
||||
|
||||
const uploadNum = ref<any>('');
|
||||
bus.$on('OPEN_UPLOAD_LIST', () => {
|
||||
openUploadList();
|
||||
});
|
||||
|
||||
bus.$on('UPLOAD_LIST_DATA_CHANGE', (data: any) => {
|
||||
uploadNum.value = data.filter((item: any) => item.data.status !== '2').length || '';
|
||||
});
|
||||
|
||||
// 打开上传列表
|
||||
const uploadListShow = ref(false);
|
||||
const openUploadList = () => {
|
||||
uploadListShow.value = true;
|
||||
};
|
||||
|
||||
// 初始化组件大小/i18n
|
||||
const initI18nOrSize = (value: string, attr: string) => {
|
||||
state[attr] = Local.get('themeConfig')[value];
|
||||
|
||||
169
src/spdm/components/common/uploadList/index.vue
Normal file
169
src/spdm/components/common/uploadList/index.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="visible"
|
||||
title="上传列表"
|
||||
size="400"
|
||||
:modal="false"
|
||||
modal-penetrable
|
||||
@close="closeFun"
|
||||
>
|
||||
<div v-if="listData.length > 0" class="remove-btn">
|
||||
<el-link type="primary" @click="emptyFun">清空列表</el-link>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div v-if="listData.length > 0" class="list">
|
||||
<div v-for="(item, index) in listData" :key="item.file.name" class="item">
|
||||
<div class="main">
|
||||
<div class="toper">
|
||||
<div class="name">
|
||||
{{ item.file.name }}
|
||||
</div>
|
||||
<div class="status">
|
||||
{{ UPLOAD_FILE_STATUS[item.data.status] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<el-progress
|
||||
:show-text="false"
|
||||
:percentage="Number((item.data.current / item.data.total) * 100) || 0"
|
||||
:status="item.data.status === '-1' ? 'exception' : ''"
|
||||
:stroke-width="5"
|
||||
/>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="speed">{{ item.data.speed || '--' }}/s</div>
|
||||
<div class="size">
|
||||
{{
|
||||
formatFileSize((item.data.current / item.data.total) * item.file.size || 0) ||
|
||||
'--'
|
||||
}}/{{ formatFileSize(item.file.size) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="options">
|
||||
<el-icon v-if="item.data.status !== '1'" :size="16" @click="removeFun(index)">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-task">暂无上传任务</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { formatFileSize } from '/@/spdm/utils/file';
|
||||
import WujieVue from 'wujie-vue3';
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const listData = ref<any>([]);
|
||||
const visible = ref(false);
|
||||
|
||||
const { bus } = WujieVue;
|
||||
bus.$on('UPLOAD_LIST_DATA_CHANGE', (data: any) => {
|
||||
listData.value = JSON.parse(JSON.stringify(data));
|
||||
});
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: false,
|
||||
});
|
||||
|
||||
const UPLOAD_FILE_STATUS: any = {
|
||||
'-1': '上传失败',
|
||||
'0': '待上传',
|
||||
'1': '上传中',
|
||||
'2': '上传完成',
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val: any) => {
|
||||
visible.value = val;
|
||||
},
|
||||
);
|
||||
|
||||
const closeFun = () => {
|
||||
emit('update:modelValue', false);
|
||||
};
|
||||
|
||||
const emptyFun = () => {
|
||||
bus.$emit('UPLOAD_LIST_DATA_EMPTY');
|
||||
};
|
||||
|
||||
const removeFun = (index: any) => {
|
||||
bus.$emit('UPLOAD_LIST_DATA_REMOVE', index);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.remove-btn {
|
||||
text-align: right;
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
.list {
|
||||
.item {
|
||||
display: flex;
|
||||
border-bottom: solid 1px var(--el-border-color);
|
||||
padding: 10px 0;
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.main {
|
||||
padding: 0 10px;
|
||||
flex: 1;
|
||||
.toper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 4px;
|
||||
line-height: 14px;
|
||||
font-size: 12px;
|
||||
.name {
|
||||
flex: 1;
|
||||
color: var(--el-text-color-primary);
|
||||
word-break: break-word;
|
||||
}
|
||||
.status {
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
height: 5px;
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
padding-top: 4px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
.options {
|
||||
width: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--el-color-danger);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-task {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--el-text-color-placeholder);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
22
src/spdm/utils/file.ts
Normal file
22
src/spdm/utils/file.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
export const formatFileSize = (sizeInBytes: number): string => {
|
||||
if (sizeInBytes === undefined || sizeInBytes === null) {
|
||||
return '';
|
||||
}
|
||||
if (sizeInBytes < 0) {
|
||||
return '0 B';
|
||||
}
|
||||
|
||||
if (sizeInBytes < 1024) {
|
||||
return sizeInBytes + ' B';
|
||||
}
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
let size = sizeInBytes;
|
||||
let unitIndex = 0;
|
||||
|
||||
while (size >= 1024 && unitIndex < units.length - 1) {
|
||||
size /= 1024;
|
||||
unitIndex++;
|
||||
}
|
||||
|
||||
return `${size.toFixed(2)} ${units[unitIndex]}`;
|
||||
};
|
||||
Reference in New Issue
Block a user