wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YUN-PC5\user 2024-02-28 13:46:10 +08:00
parent 2bf5a087cf
commit 1a4c184423
8 changed files with 102 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/FileUpload/index.vue
View File

@ -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
}
}

55
src/components/Pagination/index.vue
View File

@ -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) {
emit('update:page', parseInt(route.query.page))
if (noCache) {
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) {
emit('update:limit', parseInt(route.query.limit))
if (noCache) {
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({
path: router.currentRoute.value.path,
query: {
page: currentPage.value,
limit: val
}
})
if (noCache) {
router.replace({
path: router.currentRoute.value.path,
query: {
page: currentPage.value,
limit: val
}
})
}
}
function handleCurrentChange(val) {
emit('pagination', { page: val, limit: pageSize.value })
if (props.autoScroll) {
// scrollTo(0, 800);
}
router.replace({
path: router.currentRoute.value.path,
query: {
page: val,
limit: pageSize.value
}
})
if (noCache) {
router.replace({
path: router.currentRoute.value.path,
query: {
page: val,
limit: pageSize.value
}
})
}
}
return {

2
src/i18n/lang/zh-cn.json
View File

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

4
src/layout/components/Navbar.vue
View File

@ -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(() => {})

6
src/permission.js
View File

@ -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) => {

5
src/utils/request.js
View File

@ -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(() => {

14
src/views/login.vue
View File

@ -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)

15
src/views/loginByEmail.vue
View File

@ -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)