增加错误页面

2022-05-01 23:06:11 +08:00 · 2022-05-01 23:06:11 +08:00 · cac3f19080
parent 646748f381
commit cac3f19080
15 changed files with 304 additions and 5 deletions
--- a/src/assets/image/error/401.gif
+++ b/src/assets/image/error/401.gif
--- a/src/assets/image/error/404.jpeg
+++ b/src/assets/image/error/404.jpeg
--- a/src/assets/image/error/404s.png
+++ b/src/assets/image/error/404s.png
--- a/src/components/u-upload/index.vue
+++ b/src/components/u-upload/index.vue
@ -0,0 +1,73 @@
+<template>
+    <el-upload
+            action=""
+            :before-upload="beforeUploadAction"
+            list-type="picture-card"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
+            :file-list="fileList"
+    >
+        <el-icon><Plus /></el-icon>
+    </el-upload>
+
+    <el-dialog v-model="dialogVisible" width="50%" top="80px">
+        <img w-full :src="dialogImageUrl" alt="预览图片" style="width: 100%"/>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+    import {onMounted, ref, watch} from 'vue'
+    import { Plus } from '@element-plus/icons-vue'
+
+    import type { UploadProps, UploadUserFile } from 'element-plus'
+    import {ElMessage} from "element-plus";
+    let emit = defineEmits(['update'])
+    let props = defineProps({
+        modelValue:Array
+    })
+    let fileList = ref([
+
+    ])
+
+    const dialogImageUrl = ref('')
+    const dialogVisible = ref(false)
+
+    const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+        console.log(uploadFile, uploadFiles)
+    }
+
+    const beforeUploadAction = (file, fileLi)=>{
+        return new Promise((resolve, reject) => {
+            var reader = new FileReader()
+            let reg = (/\.jpg$|\.jpeg$|\.gif$|\.png$/i)
+            reader.readAsDataURL(file)
+            let name = file.name
+            if(reg.test(name)){
+                reader.onload = (e:FileReader)=>{
+                    fileList.value.push({
+                        name:name,
+                        url:e.target.result
+                    })
+                    emit('update',fileList.value)
+                    resolve(e.target.result)
+                }
+            }else{
+                ElMessage.error('请上传图片')
+                reject()
+            }
+        })
+    }
+
+    const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
+        dialogImageUrl.value = uploadFile.url!
+        dialogVisible.value = true
+    }
+
+    onMounted(()=>{
+        watch(()=>props.modelValue,(value)=>{
+            fileList.value = value
+        },{
+            immediate:true
+        })
+    })
+</script>
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@ -19,7 +19,7 @@
 </template>

 <script lang="ts" setup>
-import {computed, nextTick, onMounted, reactive, ref, watch} from "vue";
+  import {computed, nextTick, onMounted, reactive, ref, watch} from "vue";
  import ScrollPane from "./ScrollPane.vue";
  import { useStore } from 'vuex'
  import {useRoute,useRouter} from 'vue-router'
@ -145,8 +145,16 @@ import {computed, nextTick, onMounted, reactive, ref, watch} from "vue";
      addTags()
      moveToCurrentTag()
    })
+
+    router.beforeEach(async (to, from, next)=>{
+      if(from.fullPath==='/error/404'&&to.fullPath==="/home") {
+        await store.dispatch('tagsView/removeView', [from.fullPath])
+      }
+      next()
+    })
  })

+
 </script>

 <style lang="scss" scoped>
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -102,6 +102,7 @@
    padding: 20px;
    /*background: #f6f8f9;*/
    padding-top: 110px;
+    position: relative;
  }
  .app-main-hide-tag{
    padding-top: 80px;
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -9,6 +9,7 @@ import othersRouter from './modules/other'
 import externalLink from './modules/externalLink'
 import permissionRouter from './modules/permission'
 import tableRouter from './modules/table'
+import errorRouter from './modules/error'


 interface extendRoute {
@ -23,6 +24,7 @@ export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
    hidden: true,
    meta: { title: '登录',}
  },
+
  {
    path: '/',
    name: 'layout',
@ -44,14 +46,17 @@ export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
 export const asyncRoutes = [
  tableRouter,
  chartsRouter,
-
  chatRouter,
  componentsRouter,
  othersRouter,
-
  externalLink,
+  errorRouter,
  permissionRouter,

+  {
+    path: '/:pathMatch(.*)',
+    redirect: '/error/404'
+  }
 ]


--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@ -43,6 +43,12 @@ const componentsRouter = {
            name: 'button',
            meta: { title: '按钮', noCache: true  }
        },
+        {
+            path: 'upload',
+            component: () => import('@/views/components-demo/upload.vue'),
+            name: 'upload',
+            meta: { title: '上传图片', noCache: true  }
+        },
    ]
 }

--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@ -0,0 +1,32 @@
+
+
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from "@/layout/index.vue";
+
+const errorRouter = {
+    path: '/error',
+    component: Layout,
+    redirect: 'noRedirect',
+    name: 'error',
+    meta: {
+        title: '错误页面',
+        icon: 'School'
+    },
+    children: [
+        {
+            path: '404',
+            component: () => import('@/views/error/404.vue'),
+            name: '404',
+            meta: { title: '404', noCache: true }
+        },
+        {
+            path: '401',
+            component: () => import('@/views/error/401.vue'),
+            name: '401',
+            meta: { title: '401', noCache: true }
+        },
+    ]
+}
+
+export default errorRouter
--- a/src/store/modules/tagsView.ts
+++ b/src/store/modules/tagsView.ts
@ -14,6 +14,9 @@ const mutations = {
            })
        )
    },
+    REMOVE_VISITED_VIEW: (state, routes) => {
+        state.visitedViews = state.visitedViews.filter(item=>!routes.includes(item.path))
+    },
    CLEAR_VISITED_VIEW:(state, view) => {
        state.visitedViews = []
        state.cachedViews = []
@ -44,6 +47,13 @@ const actions = {
        dispatch('addVisitedView', view)
        // dispatch('addCachedView', view)
    },
+    removeView({ commit }, views){
+        return new Promise((resolve, reject) => {
+            commit('REMOVE_VISITED_VIEW', views)
+            resolve(null)
+        })
+
+    },
    addVisitedView({ commit }, view) {
        commit('ADD_VISITED_VIEW', view)
    },
--- a/src/views/components-demo/upload.vue
+++ b/src/views/components-demo/upload.vue
@ -0,0 +1,25 @@
+<template>
+    <div>
+        <u-upload @update="update" v-model="imgs"/>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import UUpload from '@/components/u-upload/index.vue'
+    import TwoPng from '@/assets/3.png'
+    import {reactive, ref} from 'vue'
+    const imgs  = ref([{
+        url:TwoPng,
+        name:'female.png',
+        uid:'1651408956803',
+        status:'success'
+    }])
+
+    const update = (val)=>{
+        console.log('valll======',val)
+    }
+</script>
+
+<style>
+
+</style>
--- a/src/views/error/401.vue
+++ b/src/views/error/401.vue
@ -0,0 +1,70 @@
+
+<template>
+    <div class="m-error-page">
+        <div class="error-page">
+            <div class="img">
+                <img :src="fourPng" style="width: 100%">
+            </div>
+            <div>
+                <div class="oops">抱歉!</div>
+                <div class="text" style="margin-bottom: 20px">你没有权限去该页面...</div>
+                <el-button type="primary" @click="goBackHome">返回首页</el-button></div>
+
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import fourPng from '@/assets/image/error/401.gif'
+    import {useRouter} from 'vue-router'
+    const router = useRouter()
+
+    const goBackHome = ()=>{
+        router.push({
+            path:'/'
+        })
+    }
+</script>
+
+<style lang="scss" scoped>
+    .m-error-page{
+        width:100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        min-height: calc(100vh - 205px);
+        justify-content: center;
+    }
+    .error-page{
+        /*position: absolute;*/
+        /*top: 0;*/
+        padding-top: 20px;
+        /*left: 0;*/
+        /*right: 0;*/
+        /*background: white;*/
+        /*bottom: 0;*/
+        display: flex;
+        align-items: center;
+        .img{
+            width: 500px;
+        }
+        .oops{
+            font-size: 32px;
+            line-height: 40px;
+            color: #1482f0;
+            margin-bottom: 20px;
+            -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards;
+        }
+        .text{
+            font-size: 20px;
+            line-height: 24px;
+            color: #222;
+            margin-bottom: 10px;
+            -webkit-animation-delay: .1s;
+            animation-delay: .1s;
+            -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards;
+        }
+    }
+</style>
--- a/src/views/error/403.vue
+++ b/src/views/error/403.vue
@ -1 +0,0 @@
-
--- a/src/views/error/404.vue
+++ b/src/views/error/404.vue
@ -1 +1,71 @@

+<template>
+    <div class="m-error-page">
+        <div class="error-page">
+            <div class="img">
+                <img :src="fourPng" style="width: 100%">
+            </div>
+            <div>
+                <div class="oops">抱歉!</div>
+                <div class="text">当前页面不存在...</div>
+                <div style="margin-bottom: 20px;font-size: 13px;color: grey;">请检查您输入的URL是否正确，或单击下面的按钮返回主页。</div>
+                <el-button type="primary" @click="goBackHome">返回首页</el-button></div>
+
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import fourPng from '@/assets/image/error/404s.png'
+    import {useRouter} from 'vue-router'
+    const router = useRouter()
+
+    const goBackHome = ()=>{
+        router.push({
+            path:'/'
+        })
+    }
+</script>
+
+<style lang="scss" scoped>
+    .m-error-page{
+        width:100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        min-height: calc(100vh - 205px);
+        justify-content: center;
+    }
+    .error-page{
+        /*position: absolute;*/
+        /*top: 0;*/
+        padding-top: 20px;
+        /*left: 0;*/
+        /*right: 0;*/
+        /*background: white;*/
+        /*bottom: 0;*/
+        display: flex;
+        align-items: center;
+        .img{
+            width: 500px;
+        }
+        .oops{
+            font-size: 32px;
+            line-height: 40px;
+            color: #1482f0;
+            margin-bottom: 20px;
+            -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards;
+        }
+        .text{
+            font-size: 20px;
+            line-height: 24px;
+            color: #222;
+            margin-bottom: 10px;
+            -webkit-animation-delay: .1s;
+            animation-delay: .1s;
+            -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards;
+        }
+    }
+</style>
--- a/src/views/other/cropper/index.vue
+++ b/src/views/other/cropper/index.vue
@ -189,7 +189,7 @@
 }
 .m-cropper{
  width: 100%;
-  height: 500px;
+  /*height: 500px;*/
  display: flex;
  .left{
    width: 400px;