|
|
@@ -17,15 +17,33 @@
|
|
|
<!--通知-->
|
|
|
<template v-if="noticeList && noticeList.length > 0">
|
|
|
<div class="dashboard-notice" style="height: 52px;background: #F3F3F3;">
|
|
|
- <van-swipe :autoplay="6000" :height="44" :show-indicators="false" :initial-swipe="initialNotice()"
|
|
|
- style="height:44px;" vertical>
|
|
|
+ <van-swipe
|
|
|
+ :autoplay="6000"
|
|
|
+ :height="44"
|
|
|
+ :show-indicators="false"
|
|
|
+ :initial-swipe="initialNotice()"
|
|
|
+ style="height:44px;"
|
|
|
+ vertical
|
|
|
+ >
|
|
|
<van-swipe-item v-for="(notice, index) in noticeList" :key="index">
|
|
|
- <van-notice-bar background="#ffffff" style="height:44px;" color="#979797" mode="link"
|
|
|
- @click="onNotice(notice)">
|
|
|
+ <van-notice-bar
|
|
|
+ background="#ffffff"
|
|
|
+ style="height:44px;"
|
|
|
+ color="#979797"
|
|
|
+ mode="link"
|
|
|
+ @click="onNotice(notice)"
|
|
|
+ >
|
|
|
<span class="ibps-pl-10"> {{ notice.title }}</span>
|
|
|
<template #left-icon>
|
|
|
- <ibps-avatar icon="volume-o" bg-color="#3396FB" color="#ffffff" radius="8" width="24" height="24"
|
|
|
- icon-size="12" />
|
|
|
+ <ibps-avatar
|
|
|
+ icon="volume-o"
|
|
|
+ bg-color="#3396FB"
|
|
|
+ color="#ffffff"
|
|
|
+ radius="8"
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ icon-size="12"
|
|
|
+ />
|
|
|
</template>
|
|
|
</van-notice-bar>
|
|
|
</van-swipe-item>
|
|
|
@@ -39,8 +57,13 @@
|
|
|
<!--栏目-->
|
|
|
<template v-if="dashboards && dashboards.length >0">
|
|
|
<van-collapse v-model="activeDashboards" :border="false">
|
|
|
- <van-collapse-item v-for="(dashboard,index) in dashboards" :key="dashboard[aliasKey]+index"
|
|
|
- :name="dashboard[aliasKey]" :border="false" :is-link="false">
|
|
|
+ <van-collapse-item
|
|
|
+ v-for="(dashboard,index) in dashboards"
|
|
|
+ :key="dashboard[aliasKey]+index"
|
|
|
+ :name="dashboard[aliasKey]"
|
|
|
+ :border="false"
|
|
|
+ :is-link="false"
|
|
|
+ >
|
|
|
<template #title>
|
|
|
<h2 class="menus-title">
|
|
|
<van-icon :name="dashboard.icon" :color="dashboard.iconBgColor" class-prefix="ibps-icon" />
|
|
|
@@ -51,11 +74,23 @@
|
|
|
</h2>
|
|
|
</template>
|
|
|
<van-grid :column-num="4" :border="false" class="avatar-grid">
|
|
|
- <van-grid-item v-for="menu in dashboard[childrenKey]" :key="menu[aliasKey]" :badge="getBadge(menu)"
|
|
|
- :text="getText(menu)" @click.native="onClick(menu)">
|
|
|
+ <van-grid-item
|
|
|
+ v-for="menu in dashboard[childrenKey]"
|
|
|
+ :key="menu[aliasKey]"
|
|
|
+ :badge="getBadge(menu)"
|
|
|
+ :text="getText(menu)"
|
|
|
+ @click.native="onClick(menu)"
|
|
|
+ >
|
|
|
<template #icon>
|
|
|
- <ibps-avatar :icon="menu.icon" :text="getText(menu)" :bg-color="menu.iconBgColor"
|
|
|
- :color="menu.iconFontColor" icon-prefix="ibps-icon" radius="17" class="ibps-mb-10 avatar-layout" />
|
|
|
+ <ibps-avatar
|
|
|
+ :icon="menu.icon"
|
|
|
+ :text="getText(menu)"
|
|
|
+ :bg-color="menu.iconBgColor"
|
|
|
+ :color="menu.iconFontColor"
|
|
|
+ icon-prefix="ibps-icon"
|
|
|
+ radius="17"
|
|
|
+ class="ibps-mb-10 avatar-layout"
|
|
|
+ />
|
|
|
</template>
|
|
|
|
|
|
</van-grid-item>
|
|
|
@@ -87,91 +122,173 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import Vue from 'vue'
|
|
|
- import { getMenuData, getInfoCount } from '@/api/platform/auth/appres'
|
|
|
- import { queryPageList } from '@/api/platform/system/news'
|
|
|
- import ActionUtils from '@/utils/action'
|
|
|
- // import navbar from '@/mixins/navbar'
|
|
|
- import { Lazyload } from 'vant'
|
|
|
- Vue.use(Lazyload)
|
|
|
- import TreeUtils from '@/utils/tree'
|
|
|
- import i18n from '@/utils/i18n' // Internationalization 国际化
|
|
|
- import IbpsAvatar from '@/components/ibps-avatar'
|
|
|
- import NoticeDialog from '@/views/platform/notice/edit'
|
|
|
- // 透明图片
|
|
|
- const BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
|
|
- export default {
|
|
|
- name: 'dashboard',
|
|
|
- // mixins: [navbar],
|
|
|
- components: {
|
|
|
- IbpsAvatar,
|
|
|
- NoticeDialog
|
|
|
- },
|
|
|
- data() {
|
|
|
- const { userInfo } = this.$store.getters
|
|
|
- return {
|
|
|
- userInfo,
|
|
|
- idKey: 'id',
|
|
|
- aliasKey: 'alias',
|
|
|
- labelKey: 'name',
|
|
|
- parentIdKey: 'parentId',
|
|
|
- childrenKey: 'children',
|
|
|
- urlKey: 'defaultUrl',
|
|
|
- dashboards: [],
|
|
|
- emptyData: false,
|
|
|
- resultType: 'empty',
|
|
|
- resultMessage: '没有应用，请联系管理员',
|
|
|
- countInfo: {}, // 右上角图标
|
|
|
- swipes: [],
|
|
|
- blankImage: BLANK,
|
|
|
+import Vue from 'vue'
|
|
|
+import { getMenuData, getInfoCount } from '@/api/platform/auth/appres'
|
|
|
+import { queryPageList } from '@/api/platform/system/news'
|
|
|
+import ActionUtils from '@/utils/action'
|
|
|
+// import navbar from '@/mixins/navbar'
|
|
|
+import { Lazyload } from 'vant'
|
|
|
+Vue.use(Lazyload)
|
|
|
+import TreeUtils from '@/utils/tree'
|
|
|
+import i18n from '@/utils/i18n' // Internationalization 国际化
|
|
|
+import IbpsAvatar from '@/components/ibps-avatar'
|
|
|
+import NoticeDialog from '@/views/platform/notice/edit'
|
|
|
+// 透明图片
|
|
|
+const BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
|
|
+export default {
|
|
|
+ name: 'dashboard',
|
|
|
+ // mixins: [navbar],
|
|
|
+ components: {
|
|
|
+ IbpsAvatar,
|
|
|
+ NoticeDialog
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ const { userInfo } = this.$store.getters
|
|
|
+ return {
|
|
|
+ userInfo,
|
|
|
+ idKey: 'id',
|
|
|
+ aliasKey: 'alias',
|
|
|
+ labelKey: 'name',
|
|
|
+ parentIdKey: 'parentId',
|
|
|
+ childrenKey: 'children',
|
|
|
+ urlKey: 'defaultUrl',
|
|
|
+ dashboards: [],
|
|
|
+ emptyData: false,
|
|
|
+ resultType: 'empty',
|
|
|
+ resultMessage: '没有应用，请联系管理员',
|
|
|
+ countInfo: {}, // 右上角图标
|
|
|
+ swipes: [],
|
|
|
+ blankImage: BLANK,
|
|
|
|
|
|
- noticeList: [],
|
|
|
- emptyNoticeData: false,
|
|
|
- activeDashboards: [],
|
|
|
- noticeVisible: false,
|
|
|
- noticeId: ''
|
|
|
+ noticeList: [],
|
|
|
+ emptyNoticeData: false,
|
|
|
+ activeDashboards: [],
|
|
|
+ noticeVisible: false,
|
|
|
+ noticeId: '',
|
|
|
+ outList: [{
|
|
|
+ alias: 'userFeedback',
|
|
|
+ checked: 'false',
|
|
|
+ children: [{
|
|
|
+ alias: 'InfoComm',
|
|
|
+ checked: 'false',
|
|
|
+ children: [],
|
|
|
+ createBy: null,
|
|
|
+ createTime: '2016-08-26 09:48:29',
|
|
|
+ dataStatus: null,
|
|
|
+ dbType: null,
|
|
|
+ defaultUrl: '/bpmn/communication/communicationList',
|
|
|
+ desc: '',
|
|
|
+ displayInMenu: '1',
|
|
|
+ dsAlias: null,
|
|
|
+ icon: 'title',
|
|
|
+ iconBgColor: '#00aabb',
|
|
|
+ iconFontColor: '#ffffff',
|
|
|
+ iconType: 'icon',
|
|
|
+ id: '2',
|
|
|
+ ip: null,
|
|
|
+ isCommon: 'N',
|
|
|
+ isFolder: 'Y',
|
|
|
+ isOpen: 'N',
|
|
|
+ name: '信息沟通',
|
|
|
+ parentId: '1',
|
|
|
+ path: '1.1.2.1.1.2',
|
|
|
+ pk: '',
|
|
|
+ resourceType: 'menu',
|
|
|
+ sn: 1,
|
|
|
+ systemId: 'app',
|
|
|
+ tenantId: '-999',
|
|
|
+ updateBy: null,
|
|
|
+ updateTime: null
|
|
|
+ }],
|
|
|
+ createBy: null,
|
|
|
+ createTime: '2016-08-26 09:48:29',
|
|
|
+ dataStatus: null,
|
|
|
+ dbType: null,
|
|
|
+ defaultUrl: null,
|
|
|
+ desc: '',
|
|
|
+ displayInMenu: 'Y',
|
|
|
+ dsAlias: null,
|
|
|
+ icon: 'title',
|
|
|
+ iconBgColor: '#00aabb',
|
|
|
+ iconFontColor: '#ffffff',
|
|
|
+ iconType: 'icon',
|
|
|
+ id: '1',
|
|
|
+ ip: null,
|
|
|
+ isCommon: 'N',
|
|
|
+ isFolder: 'Y',
|
|
|
+ isOpen: 'N',
|
|
|
+ name: '用户反馈',
|
|
|
+ parentId: '0',
|
|
|
+ path: '1.1.2.1.1',
|
|
|
+ pk: '',
|
|
|
+ resourceType: 'dir',
|
|
|
+ sn: 1,
|
|
|
+ systemId: 'app',
|
|
|
+ tenantId: '-999',
|
|
|
+ updateBy: null,
|
|
|
+ updateTime: null
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.loadData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getIcon(data) {
|
|
|
+ return this.activeDashboards.includes(data)
|
|
|
+ },
|
|
|
+ changeIcon(data) {
|
|
|
+ console.info(data, this.activeDashboards)
|
|
|
+ },
|
|
|
+ svgName(name) {
|
|
|
+ return `#${name}`
|
|
|
+ },
|
|
|
+ getImage(menu) {
|
|
|
+ if (menu.iconType === 'image') {
|
|
|
+ return menu.icon
|
|
|
}
|
|
|
+ return
|
|
|
},
|
|
|
- created() {
|
|
|
- this.loadData()
|
|
|
+ getText(menu) {
|
|
|
+ return i18n.generateTitle(menu[this.aliasKey], menu[this.labelKey])
|
|
|
},
|
|
|
- methods: {
|
|
|
- getIcon(data) {
|
|
|
- return this.activeDashboards.includes(data)
|
|
|
- },
|
|
|
- changeIcon(data) {
|
|
|
- console.info(data, this.activeDashboards)
|
|
|
- },
|
|
|
- svgName(name) {
|
|
|
- return `#${name}`
|
|
|
- },
|
|
|
- getImage(menu) {
|
|
|
- if (menu.iconType === 'image') {
|
|
|
- return menu.icon
|
|
|
+ getBadge(menu) {
|
|
|
+ const info = this.countInfo[menu[this.aliasKey]]
|
|
|
+ if (this.$utils.isNotEmpty(info)) { return info > 99 ? '99+' : info === '0' ? '' : info }
|
|
|
+ },
|
|
|
+ loadData() {
|
|
|
+ this.loadMenus()
|
|
|
+ this.loadCountInfo()
|
|
|
+ this.loadNotice()
|
|
|
+ },
|
|
|
+ loadMenus() {
|
|
|
+ this.swipes = [{}]
|
|
|
+ this.swipes = [
|
|
|
+ { image: './images/swipes/banner1.png' },
|
|
|
+ { image: './images/swipes/banner2.png' },
|
|
|
+ { image: './images/swipes/banner3.png' }
|
|
|
+ ]
|
|
|
+ if (this.userInfo.employee.jiNengZhiCheng !== 'inside' && this.userInfo.employee.isSuper === 'N') {
|
|
|
+ this.dashboards = this.outList
|
|
|
+ if (this.$utils.isNotEmpty(this.dashboards)) {
|
|
|
+ const activeDashboards = []
|
|
|
+ this.dashboards.forEach((d) => {
|
|
|
+ activeDashboards.push(d[this.aliasKey])
|
|
|
+ })
|
|
|
+ this.activeDashboards = activeDashboards
|
|
|
}
|
|
|
- return
|
|
|
- },
|
|
|
- getText(menu) {
|
|
|
- return i18n.generateTitle(menu[this.aliasKey], menu[this.labelKey])
|
|
|
- },
|
|
|
- getBadge(menu) {
|
|
|
- const info = this.countInfo[menu[this.aliasKey]]
|
|
|
- if (this.$utils.isNotEmpty(info)) { return info > 99 ? '99+' : info === '0' ? '' : info }
|
|
|
- },
|
|
|
- loadData() {
|
|
|
- this.loadMenus()
|
|
|
- this.loadCountInfo()
|
|
|
- this.loadNotice()
|
|
|
- },
|
|
|
- loadMenus() {
|
|
|
- this.swipes = [{}]
|
|
|
- this.swipes = [
|
|
|
- { image: './images/swipes/banner1.png' },
|
|
|
- { image: './images/swipes/banner2.png' },
|
|
|
- { image: './images/swipes/banner3.png' }
|
|
|
- ]
|
|
|
- if (this.userInfo.employee.jiNengZhiCheng !== 'inside' && this.userInfo.employee.isSuper === 'N') {
|
|
|
- this.dashboards = []
|
|
|
+ this.emptyData = !(this.dashboards.length > 0)
|
|
|
+ } else {
|
|
|
+ getMenuData().then(response => {
|
|
|
+ const data = response.data
|
|
|
+ const listData = data.filter((d) => {
|
|
|
+ return d.id !== '0'
|
|
|
+ })
|
|
|
+ this.dashboards = TreeUtils.transformToTreeFormat(listData, {
|
|
|
+ idKey: this.idKey,
|
|
|
+ parentIdKey: this.parentIdKey,
|
|
|
+ childrenKey: this.childrenKey
|
|
|
+ })
|
|
|
if (this.$utils.isNotEmpty(this.dashboards)) {
|
|
|
const activeDashboards = []
|
|
|
this.dashboards.forEach((d) => {
|
|
|
@@ -179,98 +296,77 @@
|
|
|
})
|
|
|
this.activeDashboards = activeDashboards
|
|
|
}
|
|
|
- this.emptyData = !(this.dashboards.length > 0)
|
|
|
- } else {
|
|
|
- getMenuData().then(response => {
|
|
|
- const data = response.data
|
|
|
- const listData = data.filter((d) => {
|
|
|
- return d.id !== '0'
|
|
|
- })
|
|
|
- this.dashboards = TreeUtils.transformToTreeFormat(listData, {
|
|
|
- idKey: this.idKey,
|
|
|
- parentIdKey: this.parentIdKey,
|
|
|
- childrenKey: this.childrenKey
|
|
|
- })
|
|
|
- if (this.$utils.isNotEmpty(this.dashboards)) {
|
|
|
- const activeDashboards = []
|
|
|
- this.dashboards.forEach((d) => {
|
|
|
- activeDashboards.push(d[this.aliasKey])
|
|
|
- })
|
|
|
- this.activeDashboards = activeDashboards
|
|
|
- }
|
|
|
- this.emptyData = !(listData.length > 0)
|
|
|
- }).catch((e) => {
|
|
|
- this.emptyData = true
|
|
|
- this.resultType = 'error'
|
|
|
- this.resultMessage = e.message
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- loadCountInfo() {
|
|
|
- getInfoCount().then(response => {
|
|
|
- const data = response.data
|
|
|
- const countInfo = {}
|
|
|
- data.forEach((d) => {
|
|
|
- countInfo[d.alias] = d.dataText
|
|
|
- })
|
|
|
- this.countInfo = countInfo
|
|
|
+ this.emptyData = !(listData.length > 0)
|
|
|
}).catch((e) => {
|
|
|
+ this.emptyData = true
|
|
|
+ this.resultType = 'error'
|
|
|
+ this.resultMessage = e.message
|
|
|
})
|
|
|
- },
|
|
|
-
|
|
|
- loadNotice() {
|
|
|
- this.emptyNoticeData = false
|
|
|
- const params = ActionUtils.formatParams({ status: 'publish' }, { page: 1, limit: 5 })
|
|
|
- queryPageList(params).then(response => {
|
|
|
- this.noticeList = response.data.dataResult
|
|
|
- this.emptyNoticeData = !(this.noticeList.length > 0)
|
|
|
- }).catch((e) => {
|
|
|
- this.emptyNoticeData = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ loadCountInfo() {
|
|
|
+ getInfoCount().then(response => {
|
|
|
+ const data = response.data
|
|
|
+ const countInfo = {}
|
|
|
+ data.forEach((d) => {
|
|
|
+ countInfo[d.alias] = d.dataText
|
|
|
})
|
|
|
- },
|
|
|
- initialNotice() {
|
|
|
- return Math.floor((Math.random() * this.noticeList.length))
|
|
|
- },
|
|
|
- onClick(menu) {
|
|
|
- const url = (menu.alias == "myTest" ? "/bpmn/myTest/index" : menu[this.urlKey])
|
|
|
- // const url = menu[this.urlKey]
|
|
|
- console.log("url", url);
|
|
|
- if (this.$utils.isNotEmpty(url)) {
|
|
|
- if (/^https:\/\/|http:\/\//.test(url)) {
|
|
|
- this.$utils.open(url)
|
|
|
- } else {
|
|
|
- this.$router.push({ path: url })
|
|
|
- }
|
|
|
+ this.countInfo = countInfo
|
|
|
+ }).catch((e) => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ loadNotice() {
|
|
|
+ this.emptyNoticeData = false
|
|
|
+ const params = ActionUtils.formatParams({ status: 'publish' }, { page: 1, limit: 5 })
|
|
|
+ queryPageList(params).then(response => {
|
|
|
+ this.noticeList = response.data.dataResult
|
|
|
+ this.emptyNoticeData = !(this.noticeList.length > 0)
|
|
|
+ }).catch((e) => {
|
|
|
+ this.emptyNoticeData = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initialNotice() {
|
|
|
+ return Math.floor((Math.random() * this.noticeList.length))
|
|
|
+ },
|
|
|
+ onClick(menu) {
|
|
|
+ const url = menu[this.urlKey]
|
|
|
+ if (this.$utils.isNotEmpty(url)) {
|
|
|
+ if (/^https:\/\/|http:\/\//.test(url)) {
|
|
|
+ this.$utils.open(url)
|
|
|
} else {
|
|
|
- // 判断是否有下级菜单如果有
|
|
|
- if (this.$utils.isNotEmpty(menu.children)) {
|
|
|
- this.$router.push({
|
|
|
- name: 'next-menu',
|
|
|
- params: {
|
|
|
- title: menu.name,
|
|
|
- menus: menu.children
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$notify({
|
|
|
- type: 'danger',
|
|
|
- message: '未配置菜单的url路径,请在PC后台配置！'
|
|
|
- })
|
|
|
- }
|
|
|
+ this.$router.push({ path: url })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 判断是否有下级菜单如果有
|
|
|
+ if (this.$utils.isNotEmpty(menu.children)) {
|
|
|
+ this.$router.push({
|
|
|
+ name: 'next-menu',
|
|
|
+ params: {
|
|
|
+ title: menu.name,
|
|
|
+ menus: menu.children
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$notify({
|
|
|
+ type: 'danger',
|
|
|
+ message: '未配置菜单的url路径,请在PC后台配置！'
|
|
|
+ })
|
|
|
}
|
|
|
- },
|
|
|
- onNotice(item) {
|
|
|
- this.noticeId = item.id
|
|
|
- this.noticeVisible = true
|
|
|
- // this.$router.push({
|
|
|
- // name: 'noticeDetail',
|
|
|
- // query: {
|
|
|
- // id: item.id
|
|
|
- // }
|
|
|
- // })
|
|
|
}
|
|
|
+ },
|
|
|
+ onNotice(item) {
|
|
|
+ this.noticeId = item.id
|
|
|
+ this.noticeVisible = true
|
|
|
+ // this.$router.push({
|
|
|
+ // name: 'noticeDetail',
|
|
|
+ // query: {
|
|
|
+ // id: item.id
|
|
|
+ // }
|
|
|
+ // })
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
.dashboard {
|
|
|
@@ -391,4 +487,4 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
cyy