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>
 

src/views/admin/system/role/change-role.vue

@@ -1,5 +1,13 @@
 <template>
-  <el-dialog v-model="visible" title="角色切换" width="50%">
+  <el-dialog
+    v-model="visible"
+    title="角色切换"
+    width="50%"
+    :show-close="false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :before-close="handleBeforeClose"
+  >
     <el-form>
 <!--      <el-form-item label="学校">-->
 <!--        <el-tag>{{schoolName}}</el-tag>-->
@@ -19,32 +27,48 @@
 
 
     <template #footer>
-<!--      <el-button type="primary" @click="handleChangeRole">切换</el-button>-->
-      <el-button  @click="visible=false">关 闭</el-button>
+      <!--      <el-button type="primary" @click="handleChangeRole">切换</el-button>-->
+      <el-button @click="handleFooterClose">关 闭</el-button>
     </template>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
-import {listAllRole} from '/@/api/admin/role'
-import {Local, Session} from '/@/utils/storage';
-import {useMessage} from "/@/hooks/message";
-// import {querySchoolName} from "/@/api/admin/tenant"
+import { listAllRole } from '/@/api/admin/role'
+import { Local } from '/@/utils/storage'
+import { useMessage } from '/@/hooks/message'
 
-const visible=ref(false)
-const radio=ref('')
-const allRole=reactive([])
-// const schoolName=ref('')
+const visible = ref(false)
+const radio = ref('')
+const allRole = reactive<any[]>([])
 
-const open=()=>{
-  visible.value=true
-  // handleQuerySchoolName()
-  listAllRole().then(res=>{
-    Object.assign(allRole,res.data)
-    radio.value=Local.get("roleCode")
-    visible.value=true
+const open = () => {
+  visible.value = true
+  listAllRole().then((res) => {
+    Object.assign(allRole, res.data)
+    radio.value = Local.get('roleCode')
+    visible.value = true
   })
 }
+
+const canClose = () => {
+  if (!radio.value) {
+    useMessage().warning('请选择一个角色')
+    return false
+  }
+  return true
+}
+
+const handleBeforeClose = (done: () => void) => {
+  if (!canClose()) return
+  done()
+}
+
+const handleFooterClose = () => {
+  if (!canClose()) return
+  visible.value = false
+}
+
 const handleChangeRole = (label: string) => {
   const obj = allRole.find((v: any) => v.roleCode === label)
   if (!obj) return
@@ -53,16 +77,12 @@ const handleChangeRole = (label: string) => {
   Local.set('roleId', obj.roleId)
   useMessage().success('操作成功')
   setTimeout(() => {
+    // 切换角色后统一回到首页，避免停留在诸如 jsonflow/run-job/do-job 等内部路由
+    window.location.hash = '#/'
     window.location.reload()
   }, 500)
 }
 
-const handleQuerySchoolName=()=>{
-  // querySchoolName({id:Session.get("tenantId")}).then((res:any)=>{
-  //   schoolName.value=res.data
-  // })
-}
-
 defineExpose({
   open
 })