Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
96db9287 by 任超
Options

style:路由跳转

1 parent 0f132bd5
Inline Side-by-side
Showing 6 changed files with 95 additions and 115 deletions
1 <template> 1 <template>
2 <el-image-viewer 2 <el-image-viewer :on-close="closeViewer" :url-list="urlList">
3 :on-close="closeViewer"
4 :url-list="urlList">
5 </el-image-viewer> 3 </el-image-viewer>
6 </template> 4 </template>
7
8 <script> 5 <script>
9 import ElImageViewer from 'element-ui/packages/image/src/image-viewer' 6 import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
10 export default { 7 export default {
11 components: { 8 components: {
12 ElImageViewer, 9 ElImageViewer,
13 }, 10 },
14 props: { 11 props: {
15 urlList: { 12 urlList: {
16 type: Array, 13 type: Array,
17 default: function () { 14 default: function () {
18 return [] 15 return []
19 }, 16 }
20 }, 17 }
21 }, 18 },
22 data () { 19 data () {
23 return { 20 return {
24 wrapperElem: null, 21 wrapperElem: null
22 }
23 },
24 mounted () {
25 this.$nextTick(() => {
26 let wrapper = document.getElementsByClassName(
27 'el-image-viewer__actions__inner'
28 )
29 let downImg = document.createElement('i')
30 downImg.setAttribute('class', 'el-icon-download')
31 wrapper[0].appendChild(downImg)
32 if (wrapper.length > 0) {
33 this.wrapperElem = wrapper[0]
34 this.wrapperElem.addEventListener('click', this.hideCusBtn)
25 } 35 }
36 })
37 },
38 methods: {
39 closeViewer () {
40 this.$emit('close-viewer')
26 }, 41 },
27 mounted () { 42 hideCusBtn (e) {
28 this.$nextTick(() => { 43 let className = e.target.className
29 let wrapper = document.getElementsByClassName( 44 if (className === 'el-icon-download') {
30 'el-image-viewer__actions__inner' 45 let imgUrl = document.getElementsByClassName(
31 ) 46 'el-image-viewer__canvas'
32 let downImg = document.createElement('i') 47 )[0].children[0].src
33 downImg.setAttribute('class', 'el-icon-download') 48 this.downloadImage(imgUrl)
34 wrapper[0].appendChild(downImg) 49 }
35 if (wrapper.length > 0) {
36 this.wrapperElem = wrapper[0]
37 this.wrapperElem.addEventListener('click', this.hideCusBtn)
38 }
39 })
40 }, 50 },
41 methods: { 51 downloadImage (imgUrl) {
42 closeViewer () { 52 let tmpArr = imgUrl.split('/')
43 this.$emit('close-viewer') 53 let fileName = tmpArr[tmpArr.length - 1]
44 }, 54 window.URL = window.URL || window.webkitURL
45 hideCusBtn (e) { 55 let xhr = new XMLHttpRequest()
46 let className = e.target.className 56 xhr.open('get', imgUrl, true)
47 if (className === 'el-icon-download') { 57 xhr.responseType = 'blob'
48 let imgUrl = document.getElementsByClassName( 58 xhr.onload = function () {
49 'el-image-viewer__canvas' 59 if (this.status == 200) {
50 )[0].children[0].src 60 //得到一个blob对象
51 this.downloadImage(imgUrl) 61 let blob = this.response
52 } 62 let fileUrl = window.URL.createObjectURL(blob)
53 }, 63 let a = document.createElement('a')
54 downloadImage (imgUrl) { 64 ; (document.body || document.documentElement).appendChild(a)
55 let tmpArr = imgUrl.split('/') 65 a.href = fileUrl
56 let fileName = tmpArr[tmpArr.length - 1] 66 if ('download' in a) {
57 window.URL = window.URL || window.webkitURL 67 a.download = fileName
58 let xhr = new XMLHttpRequest() 68 } else {
59 xhr.open('get', imgUrl, true) 69 a.setAttribute('download', fileName)
60 xhr.responseType = 'blob'
61 xhr.onload = function () {
62 if (this.status == 200) {
63 //得到一个blob对象
64 let blob = this.response
65 let fileUrl = window.URL.createObjectURL(blob)
66 let a = document.createElement('a')
67 ; (document.body || document.documentElement).appendChild(a)
68 a.href = fileUrl
69 if ('download' in a) {
70 a.download = fileName
71 } else {
72 a.setAttribute('download', fileName)
73 }
74 a.target = '_self'
75 a.click()
76 a.remove()
77 } 70 }
71 a.target = '_self'
72 a.click()
73 a.remove()
78 } 74 }
79 xhr.send() 75 }
80 }, 76 xhr.send()
81 }, 77 },
82 } 78 },
79 }
83 </script> 80 </script>
84 81
85 <style lang="scss" scoped> 82 <style lang="scss" scoped>
86 /deep/ .el-image-viewer__close { 83 /deep/ .el-image-viewer__close {
87 color: #ffffff; 84 color: #ffffff;
88 } 85 }
89 </style> 86 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
9 </div> 9 </div>
10 <svg-icon icon-class='close' class="closeStyle" @click="onCancel" /> 10 <svg-icon icon-class='close' class="closeStyle" @click="onCancel" />
11 </div> 11 </div>
12
13 <div class="ls-mask-content" ref='contentRef' :style="{ 'height': contentHeight }"> 12 <div class="ls-mask-content" ref='contentRef' :style="{ 'height': contentHeight }">
14 <component :is="editItem" ref='childRef' @loading='loadingFn' :key="key" :formData='formData' /> 13 <component :is="editItem" ref='childRef' @loading='loadingFn' :key="key" :formData='formData' />
15 </div> 14 </div>
...@@ -27,7 +26,7 @@ export default { ...@@ -27,7 +26,7 @@ export default {
27 data () { 26 data () {
28 return { 27 return {
29 btnShow: false, 28 btnShow: false,
30 title: '提示', 29 title: '标题',
31 cancelText: '取消', 30 cancelText: '取消',
32 confirmText: '确认', 31 confirmText: '确认',
33 isSync: false, 32 isSync: false,
......
1 弹窗封装 1 弹窗封装
2 1.在main.js中引入 import Popup from './components/tanchuang/index' 2 1.在main.js中引入 import Popup from './components/tanchuang/index'
3 Vue.prototype.$popup = Popup.install 3 Vue.prototype.$popup = Popup.install
4 2.用法以及参数： 4 2.用法以及参数：
5 this.$popup({ 5 this.$popup({
6 title: '提示', // 弹窗标题 6 title: '提示', // 弹窗标题
7 titleStyle:"", //标题存在的位置 center left 7 titleStyle:"", //标题存在的位置 center left
8 width:"", //弹窗的宽度 8 editItem: 'ywbl/dbx/aa', // 子组件的路径 相当于你平时img取的路径
9 height:"", //弹窗的高度 9 formData:this.formData, //父组件传给子组件的参数
10 editItem: 'ywbl/dbx/aa', // 子组件的路径 相当于你平时img取的路径 10 cancel: function () {}, //取消事件的回调
11 formData:this.formData, //父组件传给子组件的参数 11 confirm: function () {}, //确认事件的回调
12 btnShow:false,//按钮显隐 false隐藏 true显示 12 iconClass:"",//标题前面icon图标名称
13 confirmText:"" // 确认按钮的文字 13 })
14 cancelText:"" //取消按钮的文字
15 cancel: function () {}, //取消事件的回调
16 confirm: function () {}, //确认事件的回调
17 iconClass:"",//标题前面icon图标名称
18 })
19 3.子组件的方法名字必须统一为 childFn() 14 3.子组件的方法名字必须统一为 childFn()
20 4.子组件切记props接收 父组件传参formData 15 4.子组件切记props接收 父组件传参formData
21 以及在使用结束后传loading状态给父组件 16 以及在使用结束后传loading状态给父组件
......
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
2 <div> 2 <div>
3 <el-scrollbar wrap-class="scrollbar-wrapper"> 3 <el-scrollbar wrap-class="scrollbar-wrapper">
4 <el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText" 4 <el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
5 :unique-opened="true" @open="handleOpen" :active-text-color="variables.menuActiveText" 5 :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false"
6 :collapse-transition="false" mode="vertical"> 6 mode="vertical">
7 <!-- 权限菜单 --> 7 <!-- 权限菜单 -->
8 <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> 8 <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
9 <!-- 菜单全部展示 --> 9 <!-- 菜单全部展示 -->
...@@ -36,17 +36,7 @@ export default { ...@@ -36,17 +36,7 @@ export default {
36 }, 36 },
37 asyncRoutes () { 37 asyncRoutes () {
38 return asyncRoutes 38 return asyncRoutes
39 },
40 },
41 methods: {
42 handleOpen (key, keyPath) {
43 let that = this
44 this.permission_routes.forEach(element => {
45 if (element.path == key) {
46 that.$router.push({ path: element.redirect })
47 }
48 })
49 } 39 }
50 }, 40 }
51 } 41 }
52 </script> 42 </script>
......
...@@ -21,15 +21,20 @@ router.beforeEach(async (to, from, next) => { ...@@ -21,15 +21,20 @@ router.beforeEach(async (to, from, next) => {
21 } else { 21 } else {
22 const { result: getMenuData } = await getMenuInfo() 22 const { result: getMenuData } = await getMenuInfo()
23 const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData) 23 const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData)
24 console.log(accessRoutes);
25 router.addRoutes(accessRoutes) 24 router.addRoutes(accessRoutes)
26 next({ ...to, replace: true }) 25 const routeTo = Cookies.get('routerTo')
26 if (routeTo) {
27 next(routeTo)
28 } else {
29 next({ ...to, replace: true })
30 }
27 } 31 }
28 NProgress.done() 32 NProgress.done()
29 33
30 }) 34 })
31 router.afterEach(to => { 35 router.afterEach(to => {
32 // 解决刷新页面报404问题 36 // 解决刷新页面报404问题
37 console.log(to.fullPath);
33 Cookies.set("routerTo", to.fullPath) 38 Cookies.set("routerTo", to.fullPath)
34 NProgress.done() 39 NProgress.done()
35 }) 40 })
......
...@@ -3,6 +3,8 @@ export default function filterAsyncRouter (routers) { ...@@ -3,6 +3,8 @@ export default function filterAsyncRouter (routers) {
3 routers.forEach(item => { 3 routers.forEach(item => {
4 if (!item.children) { 4 if (!item.children) {
5 delete item.children 5 delete item.children
6 } else {
7 item.children = filterAsyncRouter(item.children)
6 } 8 }
7 item.path = JSON.parse(item.metadata).path 9 item.path = JSON.parse(item.metadata).path
8 if (!item.parentId) { 10 if (!item.parentId) {
...@@ -14,14 +16,6 @@ export default function filterAsyncRouter (routers) { ...@@ -14,14 +16,6 @@ export default function filterAsyncRouter (routers) {
14 title: item.name, 16 title: item.name,
15 icon: item.icon 17 icon: item.icon
16 } 18 }
17 if (item.children) {
18 item.children = filterAsyncRouter(item.children)
19 if (item.path !== '/') {
20 item.redirect = item.path + '/' + item.children[0].path
21 } else {
22 item.redirect = '/' + item.children[0].path
23 }
24 }
25 }) 19 })
26 return routers 20 return routers
27 } 21 }
......