Initial commit
This commit is contained in:
danshihao
@@ -0,0 +1,207 @@
|
||||
<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'
|
||||
|
||||
// 菜单id或name --> 图标名
|
||||
const map = [
|
||||
{ id: '897f80938bcd2157018bcd22d1770001', name: '法规评估库', srcName: 'project-library' },
|
||||
{ id: '1696430663505027073', name: '企业标准', srcName: 'enterprise-standard' },
|
||||
{ id: '1701430695719411713', name: '企标复审计划', srcName: 'standard-review-plan' },
|
||||
{ id: '1699984911627018242', name: '企标宣贯', srcName: 'standard-promotion' },
|
||||
{ id: '1701402482251210753', name: '企标稽查', srcName: 'standard-audit' },
|
||||
{ id: '1699610110131494913', name: '企标级别映射', srcName: 'standard-level-mapping' },
|
||||
{ id: '1701846774438457346', name: '企标计划', srcName: 'standard-plan' },
|
||||
{ id: '1701129706890174465', name: '企标评审会记录', srcName: 'standard-review-minutes' },
|
||||
{ id: '1699268154566213634', name: '内部工作组', srcName: 'internal-working-group' },
|
||||
{ id: '1706216785733353474', name: '动态消息', srcName: 'dynamic-message' },
|
||||
{ id: '1699621406990196738', name: '友情链接管理', srcName: 'friend-link-management' },
|
||||
{ id: '1694954872496123906', name: '国内标准', srcName: 'domestic-standards' },
|
||||
{ id: '1702146447208464385', name: '已发分享', srcName: 'shared-items' },
|
||||
{ id: '1702153747398770689', name: '已收分享', srcName: 'received-shares' },
|
||||
{ id: '897f809c8b41f679018b41f679090000', name: '征求意见', srcName: 'soliciting-opinions' },
|
||||
{ id: '1692098082295779330', name: '我的收藏', srcName: 'my-favorites' },
|
||||
{ id: '53a9230444d33de28aa11cc108fb1dba', name: '我的消息', srcName: 'my-messages' },
|
||||
{ id: 'f1cb187abf927c88b89470d08615f5ac', name: '数据字典', srcName: 'data-dictionary' },
|
||||
{ id: '1691007717915566081', name: '文档拆分', srcName: 'document-splitting' },
|
||||
{ id: '897f89fa8b07e219018b07e4338f0001', name: '新建流程', srcName: 'new-process' },
|
||||
{ id: '1692057704023822337', name: '新旧拆分单对比', srcName: 'new-old-split-comparison' },
|
||||
{ id: '897f80938bcd2157018bcd21573b0000', name: '未符合项', srcName: 'non-compliance-items' },
|
||||
{ id: '1697502618994315265', name: '标准化活动', srcName: 'standardization-activities' },
|
||||
{ id: '897f80868b84b221018b84bb4fe20005', name: '标准预警', srcName: 'standard-warning' },
|
||||
{ id: '1689517320967122945', name: '标签管理', srcName: 'tag-management' },
|
||||
{ id: '897f89fa8b1c5a5b018b1c5a5b4c0000', name: '流程中心', srcName: 'process-center' },
|
||||
{ id: '897f809c8b0cf422018b0d1b5d790006', name: '流程配置', srcName: 'process-configuration' },
|
||||
{ id: '1702153981491265538', name: '浏览记录', srcName: 'browsing-history' },
|
||||
{ id: '1696420777130401794', name: '海外标准', srcName: 'overseas-standards' },
|
||||
{ id: '3f915b2769fc80648e92d04e84ca059d', name: '用户管理', srcName: 'user-center' },
|
||||
{ id: '897f89fa8b130b62018b130b620d0000', name: '联络人管理', srcName: 'contact-management' },
|
||||
{ id: '897f809c8b5f5aff018b5f5aff0f0000', name: '自定义比对', srcName: 'custom-comparison' },
|
||||
{ id: '190c2b43bec6a5f7a4194a85db67d96a', name: '角色管理', srcName: 'role-center' },
|
||||
{ id: '1706587922522857473', name: '资料中心', srcName: 'resource-center' },
|
||||
{ id: '1701115229728014338', name: '车型项目库', srcName: 'vehicle-project-library' },
|
||||
{ id: '45c966826eeff4c99b8f8ebfe74511fc', name: '部门管理', srcName: 'department-management' },
|
||||
{ id: '1704319763516084225', name: '问答库', srcName: 'questions-answers-library' },
|
||||
{ id: '897f89d78ca41926018ca419266c0000', name: '任务转交', srcName: 'task-transfer' },
|
||||
{ id: '897f89d78d1beaa3018d1bec513c0001', 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.id === item.id || 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>
|
||||
Reference in New Issue
Block a user