a

src/layout/navBars/breadcrumb/asyncTaskDrawer.vue

@@ -0,0 +1,150 @@
+<template>
+	<el-drawer
+		v-model="visible"
+		title="上传和下载任务"
+		direction="rtl"
+		size="50%"
+		destroy-on-close
+		@open="onOpen"
+	>
+		<el-tabs v-model="activeTab">
+			<el-tab-pane label="上传" name="upload" />
+			<el-tab-pane label="下载" name="download" />
+			<el-tab-pane label="其他" name="other" />
+		</el-tabs>
+
+		<div class="task-table-wrap">
+			<el-table
+				v-loading="loading[activeTab]"
+				:data="list[activeTab]"
+				height="calc(100vh - 240px)"
+				row-key="id"
+				:empty-text="emptyText"
+				size="small"
+				stripe
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+			>
+				<el-table-column label="所属模块" prop="moduleName" width="120" show-overflow-tooltip />
+				<el-table-column label="任务类型" prop="typeLabel" width="100" show-overflow-tooltip />
+				<el-table-column label="任务名称" prop="detailType" min-width="150" show-overflow-tooltip />
+				<el-table-column label="任务状态" align="center" show-overflow-tooltip>
+					<template #default="{ row }">
+						<el-tag>{{ row.status }}</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="时间" width="150" show-overflow-tooltip>
+					<template #default="{ row }">
+						{{ formatTime(row) }}
+					</template>
+				</el-table-column>
+			</el-table>
+			<div class="task-pagination">
+				<el-pagination
+					v-model:current-page="pagination[activeTab].current"
+					v-model:page-size="pagination[activeTab].size"
+					:page-sizes="[10, 20, 50]"
+					:total="pagination[activeTab].total"
+					layout="prev, pager, next, sizes"
+					small
+					@current-change="onPageChange"
+					@size-change="onSizeChange"
+				/>
+			</div>
+		</div>
+	</el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, computed } from 'vue'
+import { fetchList } from '/@/api/basic/basicasynctask'
+
+type TaskTab = 'upload' | 'download' | 'other'
+
+const visible = ref(false)
+const activeTab = ref<TaskTab>('upload')
+const loading = reactive<Record<TaskTab, boolean>>({ upload: false, download: false, other: false })
+const list = reactive<Record<TaskTab, any[]>>({ upload: [], download: [], other: [] })
+const pagination = reactive<Record<TaskTab, { current: number; size: number; total: number }>>({
+	upload: { current: 1, size: 10, total: 0 },
+	download: { current: 1, size: 10, total: 0 },
+	other: { current: 1, size: 10, total: 0 },
+})
+
+/** Tab 对应接口 type：1 上传 2 下载 3 其他 */
+const TAB_TYPE_MAP: Record<TaskTab, number> = { upload: 1, download: 2, other: 3 }
+const EMPTY_TEXT_MAP: Record<TaskTab, string> = { upload: '暂无上传任务', download: '暂无下载任务', other: '暂无其他任务' }
+
+// 表格样式，参考主列表页通用样式
+const tableStyle = {
+	cellStyle: { textAlign: 'center' },
+	headerCellStyle: {
+		textAlign: 'center',
+		background: 'var(--el-table-row-hover-bg-color)',
+		color: 'var(--el-text-color-primary)',
+	},
+}
+
+const emptyText = computed(() => EMPTY_TEXT_MAP[activeTab.value])
+
+const loadList = async () => {
+	const type = activeTab.value
+	const p = pagination[type]
+	loading[type] = true
+	try {
+		const res = await fetchList({ type: TAB_TYPE_MAP[type], current: p.current, size: p.size })
+		const data = res?.data ?? res
+		const records = data?.records ?? []
+		const total = data?.total ?? 0
+		list[type] = Array.isArray(records) ? records : []
+		p.total = Number(total) || 0
+	} catch {
+		list[type] = []
+	} finally {
+		loading[type] = false
+	}
+}
+
+const onPageChange = (page: number) => {
+	pagination[activeTab.value].current = page
+	loadList()
+}
+
+const onSizeChange = (size: number) => {
+	pagination[activeTab.value].size = size
+	pagination[activeTab.value].current = 1
+	loadList()
+}
+
+const onOpen = () => {
+	loadList()
+}
+
+// 切换 Tab 时加载对应列表
+watch(activeTab, () => {
+	if (visible.value) loadList()
+})
+
+const formatTime = (item: any) => {
+	const t = item?.createTime ?? item?.create_time ?? item?.updateTime ?? item?.update_time ?? ''
+	return t ? (t.slice(0, 16).replace('T', ' ')) : '-'
+}
+
+const open = () => {
+	visible.value = true
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss">
+.task-table-wrap {
+	padding: 0 4px;
+}
+.task-pagination {
+	padding: 12px 0;
+	display: flex;
+	justify-content: flex-end;
+}
+</style>

src/layout/navBars/breadcrumb/user.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
-		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
+		<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
 			<div class="layout-navbars-breadcrumb-user-icon">
 				<i class="iconfont" :class="state.disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('user.title1')"></i>
 			</div>
@@ -10,7 +10,12 @@
 					<el-dropdown-item command="en" :disabled="state.disabledI18n === 'en'">English</el-dropdown-item>
 				</el-dropdown-menu>
 			</template>
-		</el-dropdown>
+		</el-dropdown> -->
+		<div class="layout-navbars-breadcrumb-user-icon" @click="onAsyncTaskClick">
+			<el-icon title="上传和下载任务">
+				<ele-FolderOpened />
+			</el-icon>
+		</div>
 		<div class="layout-navbars-breadcrumb-user-icon" @click="onLockClick">
 			<el-icon :title="$t('layout.threeLockScreenTime')">
 				<ele-Lock />
@@ -76,6 +81,7 @@
 		<personal-drawer ref="personalDrawerRef"></personal-drawer>
 
     <change-role ref="ChangeRoleRef" />
+		<AsyncTaskDrawer ref="asyncTaskDrawerRef" />
 	</div>
 </template>
 
@@ -95,8 +101,10 @@ import { fetchUserMessageList } from '/@/api/admin/message';
 import {useFlowJob} from "/@/flow/stores/flowJob";
 
 
-const ChangeRoleRef=ref()
+const ChangeRoleRef = ref()
 const ChangeRole = defineAsyncComponent(() => import('/@/views/admin/system/role/change-role.vue'))
+const asyncTaskDrawerRef = ref()
+const AsyncTaskDrawer = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/asyncTaskDrawer.vue'))
 // 引入组件
 const GlobalWebsocket = defineAsyncComponent(() => import('/@/components/Websocket/index.vue'));
 const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/userNews.vue'));
@@ -207,6 +215,10 @@ const onHandleCommandClick = (path: string) => {
 const onSearchClick = () => {
 	searchRef.value.openSearch();
 };
+// 上传/下载任务点击
+const onAsyncTaskClick = () => {
+	asyncTaskDrawerRef.value?.open();
+};
 // 语言切换
 const onLanguageChange = (lang: string) => {
 	Local.remove('themeConfig');
@@ -241,15 +253,25 @@ const getIsDot = () => {
 	});
 };
 
+// 登录后若存储中无角色信息则弹出角色切换框
+const openChangeRoleIfMissing = () => {
+	const hasRole = Local.get('roleCode') && Local.get('roleName') && Local.get('roleId')
+	if (!hasRole) {
+		nextTick(() => {
+			setTimeout(() => ChangeRoleRef.value?.open(), 100)
+		})
+	}
+}
+
 // 页面加载时
 onMounted(() => {
 	if (Local.get('themeConfig')) {
 		initI18nOrSize('globalComponentSize', 'disabledSize');
 		initI18nOrSize('globalI18n', 'disabledI18n');
 	}
-    useFlowJob().topJobList()
-
-	getIsDot();
+	useFlowJob().topJobList()
+	getIsDot()
+	openChangeRoleIfMissing()
 });
 </script>