125 lines
3.7 KiB
Vue
125 lines
3.7 KiB
Vue
<template>
|
|
<a-card :bordered="false">
|
|
<a-spin :spinning="loading">
|
|
<div class="top-wrapper">
|
|
<p class="left-p"><i class="iconfont icon-rukou left-icon"></i>{{ this.$t('dashboard.quickEnter.quickEnter') }}</p>
|
|
<p class="right-p" @click="menuManage" v-has="'dashboard:quickEnter:menuManage'"><i class="iconfont icon-settings" style="font-size: 20px;"></i></p>
|
|
</div>
|
|
<div class="content-wrapper">
|
|
<div class="content-div" v-for="item in dataSource" :key="item.id" @click="handleTo(item.url)">
|
|
<img class="icon-img" :src="item.src" :alt="item.name" :title="item.name" v-if="item.src">
|
|
<!--<i class="iconfont" :class="'icon-' + 'shengchanliuchengguanli'"></i>-->
|
|
<a-tooltip placement="top">
|
|
<template slot="title">{{item.name}}</template>
|
|
<p class="menu-name">{{ item.name }}</p>
|
|
</a-tooltip>
|
|
</div>
|
|
<div class="plus-div" @click="menuManage" v-if="dataSource.length < 14" v-has="'dashboard:quickEnter:menuManage'">
|
|
<img class="icon-img" :src="require('@assets/image/dashboard/quickEnter/plus.png')" :alt="$t('dashboard.quickEnter.newFunction')">
|
|
<a-tooltip placement="top">
|
|
<template slot="title">{{ $t('dashboard.quickEnter.newFunction') }}</template>
|
|
<p>{{ $t('dashboard.quickEnter.newFunction') }}</p>
|
|
</a-tooltip>
|
|
</div>
|
|
</div>
|
|
</a-spin>
|
|
<!-- 菜单管理 -->
|
|
<menu-manage-modal ref="menuManageModal" @ok="loadData"/>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script>
|
|
import MenuManageModal from '@views/dashboard/modules/MenuManageModal'
|
|
import { getQuickEntryModuleList } from '@api/dashboard'
|
|
|
|
export default {
|
|
name: 'QuickEnterCard',
|
|
components: { MenuManageModal },
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
dataSource: []
|
|
}
|
|
},
|
|
created () {
|
|
this.loadData()
|
|
},
|
|
methods: {
|
|
// 获取快捷入口
|
|
loadData () {
|
|
this.loading = true
|
|
getQuickEntryModuleList().then(res => {
|
|
if (res.success) {
|
|
const data = res.result || []
|
|
this.dataSource = data.map(item => {
|
|
// homeIcon在数据库配置
|
|
item.src = require(`@/assets/image/dashboard/quickEnter/${item.homeIcon}.png`)
|
|
return item
|
|
})
|
|
} else {
|
|
this.$message.warning(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
// 点击快捷入口,跳转对应页面
|
|
handleTo (path) {
|
|
this.$router.push({ path })
|
|
},
|
|
// 菜单管理
|
|
menuManage () {
|
|
const ids = this.dataSource.map(item => item.id)
|
|
// 已经选中的菜单（之前有权限，后来没有了，这时接口不会返回没权限的菜单导致取消不了，需要前端处理）
|
|
const selectedMenu = this.dataSource.map(item => {
|
|
return {
|
|
id: item.id,
|
|
name: item.name
|
|
}
|
|
})
|
|
this.$refs.menuManageModal.show(ids, selectedMenu)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.content-wrapper {
|
|
display: grid;
|
|
margin-top: 12px;
|
|
grid-template-columns: repeat(auto-fill, calc(100% / 14));
|
|
|
|
& > .content-div,
|
|
& > .plus-div {
|
|
padding: 9px 16px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
.icon-img {
|
|
border-radius: 8px;
|
|
width: 52px;
|
|
height: 52px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
p {
|
|
height: 24px;
|
|
line-height: 24px;
|
|
margin: 0;
|
|
color: #333333;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.text-primary-color {
|
|
color: #666666;
|
|
}
|
|
</style>
|