208 lines
7.1 KiB
Vue
208 lines
7.1 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"></i>{{ this.$t('dashboard.quickEnter.menuManage') }}</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" v-if="item.src">
|
|
<!--<i class="iconfont" :class="'icon-' + 'shengchanliuchengguanli'"></i>-->
|
|
<a-tooltip placement="top">
|
|
<template slot="title">{{item.name}}</template>
|
|
<p>{{ item.name }}</p>
|
|
</a-tooltip>
|
|
</div>
|
|
<div class="plus-div" @click="menuManage" v-if="dataSource.length < 9" v-has="'dashboard:quickEnter:menuManage'">
|
|
<a-icon type="plus" class="text-primary-color" />
|
|
</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'
|
|
|
|
// 菜单名 --> 图标名
|
|
const map = [
|
|
{ name: '专项项目库', srcName: 'project-library' },
|
|
{ name: '企业标准', srcName: 'enterprise-standard' },
|
|
{ name: '企标复审计划', srcName: 'standard-review-plan' },
|
|
{ name: '企标宣贯', srcName: 'standard-promotion' },
|
|
{ name: '企标稽查', srcName: 'standard-audit' },
|
|
{ name: '企标级别映射', srcName: 'standard-level-mapping' },
|
|
{ name: '企标计划', srcName: 'standard-plan' },
|
|
{ name: '企标评审会记录', srcName: 'standard-review-minutes' },
|
|
{ name: '内部工作组', srcName: 'internal-working-group' },
|
|
{ name: '动态消息', srcName: 'dynamic-message' },
|
|
{ name: '友情链接管理', srcName: 'friend-link-management' },
|
|
{ name: '国内标准', srcName: 'domestic-standards' },
|
|
{ name: '已发分享', srcName: 'shared-items' },
|
|
{ name: '已收分享', srcName: 'received-shares' },
|
|
{ name: '征求意见', srcName: 'soliciting-opinions' },
|
|
{ name: '我的收藏', srcName: 'my-favorites' },
|
|
{ name: '我的消息', srcName: 'my-messages' },
|
|
{ name: '数据字典', srcName: 'data-dictionary' },
|
|
{ name: '文档拆分', srcName: 'document-splitting' },
|
|
{ name: '新建流程', srcName: 'new-process' },
|
|
{ name: '新旧拆分单对比', srcName: 'new-old-split-comparison' },
|
|
{ name: '未符合项', srcName: 'non-compliance-items' },
|
|
{ name: '标准化活动', srcName: 'standardization-activities' },
|
|
{ name: '标准预警', srcName: 'standard-warning' },
|
|
{ name: '标签管理', srcName: 'tag-management' },
|
|
{ name: '流程中心', srcName: 'process-center' },
|
|
{ name: '流程配置', srcName: 'process-configuration' },
|
|
{ name: '浏览记录', srcName: 'browsing-history' },
|
|
{ name: '海外标准', srcName: 'overseas-standards' },
|
|
{ name: '用户管理', srcName: 'user-center' },
|
|
{ name: '联络人管理', srcName: 'contact-management' },
|
|
{ name: '自定义比对', srcName: 'custom-comparison' },
|
|
{ name: '角色管理', srcName: 'role-center' },
|
|
{ name: '资料中心', srcName: 'resource-center' },
|
|
{ name: '车型项目库', srcName: 'vehicle-project-library' },
|
|
{ name: '部门管理', srcName: 'department-management' },
|
|
{ name: '问答库', srcName: 'questions-answers-library' },
|
|
{ name: '任务转交', srcName: 'task-transfer' },
|
|
{ name: '文档动态', srcName: 'document-dynamics' }
|
|
]
|
|
|
|
export default {
|
|
name: 'QuickEnterCard',
|
|
components: { MenuManageModal },
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
dataSource: [
|
|
// { iconName: 'shengchanliuchengguanli', name: '新建流程' },
|
|
// { iconName: 'a-moxingkuaisuchaifen1', name: '标准拆分' },
|
|
// { iconName: 'shoucang', name: '我的收藏' },
|
|
// { iconName: 'a-fagui1', name: '国内法规' },
|
|
// { iconName: 'a-moxingkuaisuchaifen1', name: '征求意见' },
|
|
// { iconName: 'jiaoseguanli', name: '角色管理' },
|
|
// { iconName: 'wenda1', name: '我的问答' }
|
|
]
|
|
}
|
|
},
|
|
created () {
|
|
this.loadData()
|
|
},
|
|
methods: {
|
|
// 获取快捷入口
|
|
loadData () {
|
|
this.loading = true
|
|
getQuickEntryModuleList().then(res => {
|
|
if (res.success) {
|
|
const data = res.result || []
|
|
this.dataSource = data.map(item => {
|
|
// 如果能找到菜单名，就用对应图标
|
|
const findMap = map.find(m => m.name === item.name)
|
|
if (findMap) {
|
|
item.src = require(`@/assets/image/dashboard/${findMap.srcName}.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: flex;
|
|
//flex-direction: row;
|
|
//flex-wrap: wrap;
|
|
//justify-content: space-between;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, calc((100% - 20px) / 3));
|
|
grid-gap: 10px;
|
|
grid-auto-flow: row;
|
|
margin-top: 10px;
|
|
& > div {
|
|
//width: 100px;
|
|
//height: 100px;
|
|
min-height: 50px;
|
|
border-radius: 8px 8px 8px 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.content-div {
|
|
// （总高度 - 内边距 - 标题 - 上下边距） / 3
|
|
height: calc((306px - 48px - 31px - 20px) / 3);
|
|
cursor: pointer;
|
|
background: rgba(213,44,38,0.08);
|
|
.icon-img {
|
|
width: 27px;
|
|
}
|
|
.iconfont {
|
|
font-size: 27px;
|
|
color: @primary-color;
|
|
}
|
|
p {
|
|
width: 90%;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-bottom: 0;
|
|
font-size: 16px;
|
|
font-family: PingFang SC, PingFang SC, sans-serif;
|
|
font-weight: 400;
|
|
color: #000000;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
.plus-div {
|
|
// （总高度 - 内边距 - 标题 - 上下边距） / 3
|
|
height: calc((306px - 48px - 31px - 20px) / 3);
|
|
cursor: pointer;
|
|
border: 1px dashed @primary-color;
|
|
box-sizing: border-box;
|
|
.anticon {
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
}
|
|
.text-primary-color {
|
|
color: @primary-color
|
|
}
|
|
|
|
@media screen and (max-width: 1366px) {
|
|
.content-wrapper {
|
|
.content-div {
|
|
p {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|