文件上传下载增加进度条显示，分页组件中通过路由参数记录分页状态，如果当前页面路由缓存了，则不记录， 手动退出登录不记录退出登录前页面，token过期退出登录记录退出登录前页面，密码登录及邮箱登录切换不会将退出登录前页面参数清空

src/components/FileUpload/index.vue

@@ -9,6 +9,7 @@
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
       :on-success="handleUploadSuccess"
+      :on-progress="handleUploadProgress"
       :show-file-list="false"
       :data="uploadData"
       :drag="drag"
@@ -51,6 +52,16 @@
         </div>
       </li>
     </transition-group>
+
+    <el-dialog
+      v-model="uploadOnProgress"
+      title="正在上传文件，请稍候..."
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      align-center>
+      <el-progress :percentage="percentage" :color="colors" :stroke-width="15" striped striped-flow />
+    </el-dialog>
   </div>
 </template>
 
@@ -130,6 +141,19 @@ watch(
   { deep: true, immediate: true }
 )
 
+const colors = [
+  { color: '#409EFF', percentage: 100 },
+  { color: '#67C23A', percentage: 80 },
+  { color: '#EBB563', percentage: 60 },
+  { color: '#E6A23C', percentage: 40 },
+  { color: '#F56C6C', percentage: 20 }
+]
+const percentage = ref(0)
+const handleUploadProgress = (evt) => {
+  percentage.value = parseInt(evt.percent, 10)
+}
+const uploadOnProgress = ref(false)
+
 // 上传前校检格式和大小
 function handleBeforeUpload(file) {
   // 校检文件类型
@@ -156,7 +180,9 @@ function handleBeforeUpload(file) {
       return false
     }
   }
-  proxy.$modal.loading('正在上传文件，请稍候...')
+  // proxy.$modal.loading('正在上传文件，请稍候...')
+  percentage.value = 0
+  uploadOnProgress.value = true
   number.value++
   return true
 }
@@ -169,7 +195,8 @@ function handleExceed() {
 // 上传失败
 function handleUploadError(err) {
   proxy.$modal.msgError('上传失败')
-  proxy.$modal.closeLoading()
+  // proxy.$modal.closeLoading()
+  uploadOnProgress.value = false
   number.value--
 }
 
@@ -178,7 +205,8 @@ function handleUploadSuccess(response, uploadFile) {
   if (response.code != 200) {
     fileList.value = []
     proxy.$modal.msgError(`上传失败，原因:${response.msg}!`)
-    proxy.$modal.closeLoading()
+    // proxy.$modal.closeLoading()
+    uploadOnProgress.value = false
     number.value--
     return
   }
@@ -191,7 +219,8 @@ function handleUploadSuccess(response, uploadFile) {
     number.value = 0
     emit('update:modelValue', listToString(fileList.value))
     emit('success', listToString(fileList.value))
-    proxy.$modal.closeLoading()
+    // proxy.$modal.closeLoading()
+    uploadOnProgress.value = false
   }
 }
 

src/components/Pagination/index.vue

@@ -18,7 +18,7 @@
 // import { scrollTo } from "@/utils/scroll-to";
 import { computed } from 'vue'
 export default {
-  name: 'pagingation',
+  name: 'Pagination',
   emits: ['update:page', 'update:limit', 'pagination'],
   props: {
     total: {
@@ -64,12 +64,17 @@ export default {
   setup(props, { ctx, emit }) {
     const router = useRouter()
     const route = useRoute()
+    const noCache = router.currentRoute.value.meta.noCache
     const currentPage = computed({
       get() {
-        if (route.query.page) {
+        if (noCache) {
-          emit('update:page', parseInt(route.query.page))
+          if (route.query.page) {
+            emit('update:page', parseInt(route.query.page))
+          }
+          return route.query.page ? parseInt(route.query.page) : props.page
+        } else {
+          return props.page
         }
-        return route.query.page ? parseInt(route.query.page) : props.page
       },
       set(val) {
         emit('update:page', val)
@@ -77,10 +82,14 @@ export default {
     })
     const pageSize = computed({
       get() {
-        if (route.query.limit) {
+        if (noCache) {
-          emit('update:limit', parseInt(route.query.limit))
+          if (route.query.limit) {
+            emit('update:limit', parseInt(route.query.limit))
+          }
+          return route.query.limit ? parseInt(route.query.limit) : props.limit
+        } else {
+          return props.limit
         }
-        return route.query.limit ? parseInt(route.query.limit) : props.limit
       },
       set(val) {
         emit('update:limit', val)
@@ -92,26 +101,30 @@ export default {
       if (props.autoScroll) {
         // scrollTo(0, 800);
       }
-      router.replace({
+      if (noCache) {
-        path: router.currentRoute.value.path,
+        router.replace({
-        query: {
+          path: router.currentRoute.value.path,
-          page: currentPage.value,
+          query: {
-          limit: val
+            page: currentPage.value,
-        }
+            limit: val
-      })
+          }
+        })
+      }
     }
     function handleCurrentChange(val) {
       emit('pagination', { page: val, limit: pageSize.value })
       if (props.autoScroll) {
         // scrollTo(0, 800);
       }
-      router.replace({
+      if (noCache) {
-        path: router.currentRoute.value.path,
+        router.replace({
-        query: {
+          path: router.currentRoute.value.path,
-          page: val,
+          query: {
-          limit: pageSize.value
+            page: val,
-        }
+            limit: pageSize.value
-      })
+          }
+        })
+      }
     }
 
     return {

src/i18n/lang/zh-cn.json

@@ -28,7 +28,7 @@
     "articleList": "文章列表",
     "formBuild": "表单构建",
     "officialWebsite": "官网地址",
-    "fileStorage": "文件存儲",
+    "fileStorage": "文件存储",
     "personalCenter": "个人中心",
     "menuPermi": "菜单权限",
     "assignUsers": "分配用户",

src/layout/components/Navbar.vue

@@ -65,6 +65,7 @@ const { proxy } = getCurrentInstance()
 const appStore = useAppStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
+const router = useRouter()
 
 const sideTheme = computed(() => settingsStore.sideTheme)
 function toggleSideBar() {
@@ -105,7 +106,8 @@ function logout() {
     })
     .then(() => {
       userStore.logOut().then(() => {
-        location.href = import.meta.env.VITE_APP_ROUTER_PREFIX + 'index'
+        // location.href = import.meta.env.VITE_APP_ROUTER_PREFIX + 'index'
+        location.href = import.meta.env.VITE_APP_ROUTER_PREFIX + router.currentRoute.value.fullPath.slice(1).replace('?', '&')
       })
     })
     .catch(() => {})

src/permission.js

@@ -34,7 +34,11 @@ router.beforeEach((to, from, next) => {
                     router.addRoute(route) // 动态添加可访问路由表
                   }
                 })
-                next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+                if (!!to.matched.find((item) => item.path === '/:pathMatch(.*)*')) {
+                  next({ path: '/index' })
+                } else {
+                  next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+                }
               })
           })
           .catch((err) => {

src/utils/request.js

@@ -5,7 +5,7 @@ import errorCode from '@/utils/errorCode'
 import useUserStore from '@/store/modules/user'
 import { blobValidate } from '@/utils/ruoyi'
 import { saveAs } from 'file-saver'
-
+import router from '@/router/index'
 let downloadLoadingInstance
 // 解决后端跨域获取不到cookie问题
 // axios.defaults.withCredentials = true
@@ -66,7 +66,8 @@ service.interceptors.response.use(
             useUserStore()
               .logOut()
               .then(() => {
-                location.href = import.meta.env.VITE_APP_ROUTER_PREFIX + 'index'
+                // location.href = import.meta.env.VITE_APP_ROUTER_PREFIX + 'index'
+                location.href = import.meta.env.VITE_APP_ROUTER_PREFIX + router.currentRoute.value.fullPath.slice(1).replace('?', '&')
               })
           })
           .catch(() => {

src/views/login.vue

@@ -7,10 +7,10 @@
         <div class="link-wrapper">
           <LangSelect title="多语言设置" class="langSet" />
           <el-text type="primary" style="margin: 0 10px">
-            <router-link :to="'/register'">{{ $t('login.register') }}</router-link>
+            <router-link :to="{ path: '/register', query: route.query }">{{ $t('login.register') }}</router-link>
           </el-text>
           <el-text type="primary">
-            <router-link :to="'/loginByEmail'">{{ $t('login.toLoginByEmail') }}</router-link>
+            <router-link :to="{ path: '/loginByEmail', query: route.query }">{{ $t('login.toLoginByEmail') }}</router-link>
           </el-text>
         </div>
         <el-divider style="margin: 12px 0" />
@@ -111,6 +111,14 @@ const register = ref(false)
 const redirect = ref()
 redirect.value = route.query.redirect
 
+const query = ref()
+query.value = Object.keys(route.query).reduce((params, key) => {
+  if (key !== 'redirect') {
+    params[key] = route.query[key]
+  }
+  return params
+}, {})
+
 function handleLogin() {
   proxy.$refs.loginRef.validate((valid) => {
     if (valid) {
@@ -131,7 +139,7 @@ function handleLogin() {
         .login(loginForm.value)
         .then(() => {
           proxy.$modal.msgSuccess(proxy.$t('login.loginSuccess'))
-          router.push({ path: redirect.value || '/' })
+          router.push({ path: redirect.value || '/', query: query.value })
         })
         .catch((error) => {
           console.error(error)

src/views/loginByEmail.vue

@@ -10,7 +10,7 @@
           <!--            <router-link :to="'/register'">{{ $t('login.register') }}</router-link>-->
           <!--          </el-text>-->
           <el-text type="primary">
-            <router-link :to="'/login'">{{ $t('loginByEmail.toLogin') }}</router-link>
+            <router-link :to="{ path: '/login', query: route.query }">{{ $t('loginByEmail.toLogin') }}</router-link>
           </el-text>
         </div>
         <el-divider style="margin: 12px 0" />
@@ -49,7 +49,7 @@
       <div v-html="defaultSettings.copyright"></div>
     </div>
     <!-- 滑块验证 -->
-    <el-dialog v-model="dragVerify" destroy-on-close width="440px" top="30vh">
+    <el-dialog v-model="dragVerify" destroy-on-close width="440px" top="30vh" @close="refreshImg">
       <DragVerifyImgChip
         :imgsrc="verifyImg.src"
         v-model:isPassing="isPassing"
@@ -179,6 +179,15 @@ function refreshImg() {
 }
 const redirect = ref()
 redirect.value = route.query.redirect
+
+const query = ref()
+query.value = Object.keys(route.query).reduce((params, key) => {
+  if (key !== 'redirect') {
+    params[key] = route.query[key]
+  }
+  return params
+}, {})
+
 interface roles {
   id: number
   name: string
@@ -233,7 +242,7 @@ function handleLogin() {
             return
           }
           globalProperties.$modal.msgSuccess(globalProperties.$t('login.loginSuccess'))
-          router.push({ path: redirect.value || '/' })
+          router.push({ path: redirect.value || '/', query: query.value })
         })
         .catch((error) => {
           console.error(error)