root/pgserver3.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no commit message

Browse Source
This commit is contained in:
annnj-company
2026-04-24 11:28:23 +08:00
parent 49476bc357
commit 522c222ae3
11 changed files with 303 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
pgweb/src/components/menu/nxIconMenu.vue
View File

@@ -1,9 +1,8 @@
<template>
<div style="height: 100%;">
<el-menu
:default-active="'0'"
@select="handleSelect"
@open="handleOpen"
:collapse="collapse"
@@ -11,22 +10,25 @@
>
<template v-for="(menuItem, i_index) in menuData">
<el-menu-item :index="String(i_index)" :key="i_index">
<template >
<!-- <i style="margin-top: -18px;color: #444444;" :class=" replacePhrases( menuItem.title, iconsRule) "></i>
<div style="margin-top:-48px;" class="menu-custom">{{ replacePhrases( menuItem.title, replaceRule1)}}</div> -->
<template >
<div style="display: flex; align-items: center;" class="menu-custom">
<i :class="replacePhrases(menuItem.title, iconsRule)"></i>
<div style="margin-left: 8px;">{{ replacePhrases(menuItem.title, replaceRule1) }}</div>
<div style="display: flex; align-items: center; margin-left: 8px;">
{{ replacePhrases(menuItem.title, replaceRule1) }}
</div>
<div v-if="isHuiJiaMenu(menuItem) && unreturnedCount >= 1" class="push-value-badge">{{ unreturnedCount }}</div>
</div>
</template>
</el-menu-item>
</template>
</el-menu-item>
</template>
</el-menu>
</div>
</template>
<script>
import "@/styles/globalSetting.less";
import { EventBus } from '@/libs/eventBus'
import socket from '@/libs/socket'
export default {
name: 'NxIconMenu',
props: {
@@ -42,16 +44,17 @@
data() {
return {
activeMenu: '1-4-1',
unreturnedCount: 0,
replaceRule1:[
['询价项目','询价'],
['回价项目','回价'],
['预估单','预估'],
['查勘项目','查勘'],
['报告项目','报告'],
['分部管理','分部'],
['分部管理','分部'],
['财务项目','财务'],
['基础设置','设置'],
['OA办公','OA'],// 隐藏
['OA办公','OA'],
['银行对接','银行'],
],
iconsRule:[
@@ -63,36 +66,47 @@
['报告项目','el-icon-tickets'],
['财务项目','el-icon-money'],
['基础设置','el-icon-setting'],
['OA办公' , 'el-icon-bell'], // 隐藏
['OA办公' , 'el-icon-bell'],
['银行对接','el-icon-bank-card'],
]
};
},
mounted() {
// 监听EventBus事件
this.eventBusCallback = (count) => {
this.$set(this, 'unreturnedCount', count)
}
this.socketCallback = (data) => {
if (data && data.count !== undefined) {
this.$set(this, 'unreturnedCount', data.count)
}
}
EventBus.$on('updateUnreturnedCount', this.eventBusCallback)
socket.on('updateUnreturnedCount', this.socketCallback)
},
beforeDestroy() {
EventBus.$off('updateUnreturnedCount', this.eventBusCallback)
socket.off('updateUnreturnedCount', this.socketCallback)
},
methods: {
isHuiJiaMenu(menuItem) {
return menuItem.title === '回价项目' || menuItem.routerName === 'priceReturn'
},
handleSelect(key, item , externalInfo ) {
console.log('menu-select', key, item,externalInfo);
this.$emit('menu-select', key, item.routerName, externalInfo);
console.log('externalInfo menu-select', externalInfo ,key,item );
this.$emit('menu-select', key, item.routerName, externalInfo);
},
handleOpen(key, keyPath) {
console.log('menu-open', key, keyPath, externalInfo );
this.$emit('menu-open', key, keyPath, externalInfo);
console.log('externalInfo menu-open', externalInfo ,key,item );
this.$emit('menu-open', key, keyPath);
},
handleClose(key, keyPath, externalInfo ) {
console.log('menu-close', key, keyPath, externalInfo);
this.$emit('menu-close', key, keyPath, externalInfo);
},
toggleCollapse() {
// 触发事件通知父组件改变collapse状态
this.$emit('toggle-collapse', !this.collapse);
},
replacePhrases(text, replacementRules) {
// 遍历替换规则数组
for (let i=0; i< replacementRules.length; i++) {
// 使用正则表达式查找匹配的短语
if (text == replacementRules[i][0]) {
return replacementRules[i][1];
}
@@ -102,7 +116,7 @@
},
};
</script>
<style scoped>
.collapse-btn {
height: 40px;
@@ -144,6 +158,8 @@
}
.menu-custom {
color: var(--menu-font-color);
display: flex;
align-items: center;
}
:deep .el-menu-item.is-active {
background-color: var(--bg-color);
@@ -151,4 +167,20 @@
:deep .el-menu-item.is-active .menu-custom {
color: var(--main-color);
}
</style>
.push-value-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
line-height: 18px;
padding: 0 4px;
font-size: 11px;
color: #fff;
background-color: #f56c6c;
border-radius: 9px;
margin-left: 4px;
text-align: center;
flex-shrink: 0;
}
</style>

88
pgweb/src/components/menu/nxMenu.vue
View File

@@ -3,27 +3,85 @@
<div style="height: 100%;">
<!-- 如果有子菜单，则渲染子菜单 -->
<el-submenu style="height: 100%;" v-if="item.children && item.children.length > 0" :index="item.routerName" >
<template slot="title">
<template slot="title">
{{ item.title }}
<!-- 一级菜单【回价】显示无数量红点 -->
<span v-if="isHuiJiaMenu && unreturnedCount >= 1" class="push-dot-badge"></span>
<!-- 二级菜单【未回价】显示带数量红点 -->
<span v-else-if="isUnreturnedPriceMenu && unreturnedCount > 0" class="push-value-badge">{{ unreturnedCount }}</span>
</template>
<!-- 递归调用MenuItem组件 -->
<menu-item v-for="(child, index) in item.children" :key="index" :item="child" class="menu-custom"></menu-item>
</el-submenu>
<!-- 如果没有子菜单，则渲染菜单项 -->
<el-menu-item v-else :index="item.routerName" class="menu-custom">
<!-- <i class="el-icon-document"></i> -->
{{ item.title }}
<!-- 三级菜单【未回价列表】显示带数量红点 -->
<span v-if="isUnreturnedPriceListMenu && unreturnedCount > 0" class="push-value-badge">{{ unreturnedCount }}</span>
</el-menu-item>
</div>
</template>
<script>
import "@/styles/globalSetting.less";
import { EventBus } from '@/libs/eventBus'
import socket from '@/libs/socket'
export default {
name: 'MenuItem',
props: {
item: Object
},
data() {
return {
unreturnedCount: 0
}
},
computed: {
// 判断是否是一级菜单【回价项目】
isHuiJiaMenu() {
const isMatch = this.item.title === '回价项目' || this.item.routerName === 'priceReturn'
return isMatch
},
// 判断是否是二级菜单【未回价】
isUnreturnedPriceMenu() {
const isMatch = this.item.path === '/priceReturn/unreturnedPrice' || this.item.title === '未回价' || this.item.routerName === 'unreturnedPrice'
return isMatch
},
// 判断是否是三级菜单【未回价列表】
isUnreturnedPriceListMenu() {
const isMatch = this.item.title === '未回价列表'
return isMatch
}
},
mounted() {
console.log('菜单组件mounted - item:', this.item)
// 保存回调引用用于销毁时移除
this.eventBusCallback = (count) => {
this.unreturnedCount = count
console.log('EventBus收到未回价数量更新:', count, '当前item:', this.item.name || this.item.title)
}
this.socketCallback = (data) => {
if (data && data.count !== undefined) {
// 使用Vue.set确保响应式更新
this.$set(this, 'unreturnedCount', data.count)
console.log('WebSocket收到未回价数量更新:', data.count, '当前item:', this.item.name || this.item.title)
}
}
// 监听EventBus事件（页面初始化时）
EventBus.$on('updateUnreturnedCount', this.eventBusCallback)
// 监听WebSocket推送的未回价数量更新
socket.on('updateUnreturnedCount', this.socketCallback)
},
beforeDestroy() {
// 移除监听
EventBus.$off('updateUnreturnedCount', this.eventBusCallback)
socket.off('updateUnreturnedCount', this.socketCallback)
}
}
</script>
@@ -37,4 +95,26 @@
:deep .el-menu-item.is-active.menu-custom {
color: var(--main-color);
}
</style>
.push-value-badge {
display: inline-block;
min-width: 20px;
height: 20px;
line-height: 20px;
padding: 0 6px;
font-size: 12px;
color: #fff;
background-color: #f56c6c;
border-radius: 10px;
margin-left: 8px;
text-align: center;
}
.push-dot-badge {
display: inline-block;
width: 8px;
height: 8px;
background-color: #f56c6c;
border-radius: 50%;
margin-left: 8px;
margin-top: 4px;
}
</style>