文件上传下载增加进度条显示，分页组件中通过路由参数记录分页状态，如果当前页面路由缓存了，则不记录， 手动退出登录不记录退出登录前页面，token过期退出登录记录退出登录前页面，密码登录及邮箱登录切换不会将退出登录前页面参数清空
This commit is contained in:
parent
2bf5a087cf
commit
1a4c184423
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 (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
|
||||
}
|
||||
},
|
||||
set(val) {
|
||||
emit('update:page', val)
|
||||
@ -77,10 +82,14 @@ export default {
|
||||
})
|
||||
const pageSize = computed({
|
||||
get() {
|
||||
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
|
||||
}
|
||||
},
|
||||
set(val) {
|
||||
emit('update:limit', val)
|
||||
@ -92,6 +101,7 @@ export default {
|
||||
if (props.autoScroll) {
|
||||
// scrollTo(0, 800);
|
||||
}
|
||||
if (noCache) {
|
||||
router.replace({
|
||||
path: router.currentRoute.value.path,
|
||||
query: {
|
||||
@ -100,11 +110,13 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
function handleCurrentChange(val) {
|
||||
emit('pagination', { page: val, limit: pageSize.value })
|
||||
if (props.autoScroll) {
|
||||
// scrollTo(0, 800);
|
||||
}
|
||||
if (noCache) {
|
||||
router.replace({
|
||||
path: router.currentRoute.value.path,
|
||||
query: {
|
||||
@ -113,6 +125,7 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
currentPage,
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
"articleList": "文章列表",
|
||||
"formBuild": "表单构建",
|
||||
"officialWebsite": "官网地址",
|
||||
"fileStorage": "文件存儲",
|
||||
"fileStorage": "文件存储",
|
||||
"personalCenter": "个人中心",
|
||||
"menuPermi": "菜单权限",
|
||||
"assignUsers": "分配用户",
|
||||
|
||||
@ -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(() => {})
|
||||
|
||||
@ -34,7 +34,11 @@ router.beforeEach((to, from, next) => {
|
||||
router.addRoute(route) // 动态添加可访问路由表
|
||||
}
|
||||
})
|
||||
if (!!to.matched.find((item) => item.path === '/:pathMatch(.*)*')) {
|
||||
next({ path: '/index' })
|
||||
} else {
|
||||
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
|
||||
@ -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(() => {
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user