@lambo-design/pro-layout 1.0.0-beta.365 → 1.0.0-beta.366
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lambo-design/pro-layout",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.366",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "lambo",
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"registry": "https://registry.npmjs.org/"
|
|
11
11
|
},
|
|
12
12
|
"devDependencies": {
|
|
13
|
-
"@lambo-design/
|
|
14
|
-
"@lambo-design/
|
|
13
|
+
"@lambo-design/shared": "^1.0.0-beta.247",
|
|
14
|
+
"@lambo-design/core": "^4.7.1-beta.156"
|
|
15
15
|
},
|
|
16
16
|
"scripts": {
|
|
17
17
|
"release-pro-layout": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
|
|
@@ -1,16 +1,52 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="pro-layout-nav-wrapper">
|
|
3
|
-
<Menu
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
<Menu
|
|
4
|
+
ref="topNav"
|
|
5
|
+
mode="horizontal"
|
|
6
|
+
theme="dark"
|
|
7
|
+
:active-name="activeName"
|
|
8
|
+
@on-select="selectApp"
|
|
9
|
+
>
|
|
10
|
+
<template v-for="item in topMenList">
|
|
11
|
+
<MenuItem v-if="!item.children" :key="item.appId" :name="item.appId">
|
|
12
|
+
<Icon
|
|
13
|
+
:type="item.icon"
|
|
14
|
+
:size="20"
|
|
15
|
+
v-show="systemInfo.navLogo === '1'"
|
|
16
|
+
></Icon
|
|
17
|
+
>{{ item.name }}
|
|
18
|
+
<div class="line"></div>
|
|
19
|
+
</MenuItem>
|
|
20
|
+
<Submenu class="ibp-nav-sub-menu" v-else :key="item.name">
|
|
21
|
+
<template slot="title">
|
|
22
|
+
{{ item.name }}
|
|
23
|
+
</template>
|
|
24
|
+
<MenuItem
|
|
25
|
+
v-for="itemL2 in item.children"
|
|
26
|
+
:key="itemL2.appId"
|
|
27
|
+
:name="itemL2.appId"
|
|
28
|
+
><Icon
|
|
29
|
+
:type="itemL2.icon"
|
|
30
|
+
:size="20"
|
|
31
|
+
v-show="systemInfo.navLogo === '1'"
|
|
32
|
+
></Icon
|
|
33
|
+
>{{ itemL2.name }}</MenuItem
|
|
34
|
+
>
|
|
35
|
+
</Submenu>
|
|
36
|
+
</template>
|
|
8
37
|
<Submenu name="other" v-if="otherList.length > 0">
|
|
9
|
-
<template slot="title">
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
38
|
+
<template slot="title"> ... </template>
|
|
39
|
+
<MenuItem
|
|
40
|
+
:name="item.appId"
|
|
41
|
+
v-for="item in otherList"
|
|
42
|
+
:key="item.appId"
|
|
43
|
+
>
|
|
44
|
+
<Icon
|
|
45
|
+
:type="item.icon"
|
|
46
|
+
:size="20"
|
|
47
|
+
v-show="systemInfo.navLogo === '1'"
|
|
48
|
+
></Icon
|
|
49
|
+
>{{ item.name }}
|
|
14
50
|
</MenuItem>
|
|
15
51
|
</Submenu>
|
|
16
52
|
</Menu>
|
|
@@ -18,126 +54,160 @@
|
|
|
18
54
|
</template>
|
|
19
55
|
|
|
20
56
|
<script>
|
|
21
|
-
import Bus from
|
|
22
|
-
import { deepCopy } from
|
|
23
|
-
import {arraysEqual} from "@lambo-design/shared/utils/platform";
|
|
57
|
+
import Bus from "@lambo-design/shared/utils/bus";
|
|
58
|
+
import { deepCopy } from "@lambo-design/shared/utils/assist";
|
|
59
|
+
import { arraysEqual } from "@lambo-design/shared/utils/platform";
|
|
60
|
+
import _ from 'lodash';
|
|
24
61
|
|
|
25
62
|
export default {
|
|
26
|
-
name:
|
|
27
|
-
props: {
|
|
28
|
-
|
|
29
|
-
},
|
|
63
|
+
name: "pro-layout-nav",
|
|
64
|
+
props: {},
|
|
30
65
|
data() {
|
|
31
66
|
return {
|
|
32
|
-
systemInfo:{},
|
|
67
|
+
systemInfo: {},
|
|
33
68
|
navList: [],
|
|
34
69
|
topMenList: [],
|
|
35
70
|
otherList: [],
|
|
36
|
-
activeName:
|
|
71
|
+
activeName: "",
|
|
37
72
|
topMenuNum: 4,
|
|
38
|
-
lastTopMenuNum
|
|
39
|
-
acceptAppId:
|
|
40
|
-
originMenuList: []
|
|
41
|
-
}
|
|
73
|
+
lastTopMenuNum: -1,
|
|
74
|
+
acceptAppId: "",
|
|
75
|
+
originMenuList: [],
|
|
76
|
+
};
|
|
42
77
|
},
|
|
43
78
|
methods: {
|
|
44
79
|
initListener() {
|
|
45
|
-
Bus.$on(
|
|
80
|
+
Bus.$on("system-info", (data) => {
|
|
46
81
|
this.initSystemInfo(data);
|
|
47
|
-
})
|
|
48
|
-
Bus.$on(
|
|
49
|
-
this.initNav(data)
|
|
50
|
-
})
|
|
51
|
-
Bus.$on(
|
|
52
|
-
this.changeApp(appId, appInfo)
|
|
53
|
-
})
|
|
54
|
-
Bus.$on(
|
|
55
|
-
this.initMenu(data)
|
|
56
|
-
})
|
|
57
|
-
|
|
82
|
+
});
|
|
83
|
+
Bus.$on("nav-list", (data) => {
|
|
84
|
+
this.initNav(data);
|
|
85
|
+
});
|
|
86
|
+
Bus.$on("change-app", ({ appId, appInfo }) => {
|
|
87
|
+
this.changeApp(appId, appInfo);
|
|
88
|
+
});
|
|
89
|
+
Bus.$on("menu-list", (data) => {
|
|
90
|
+
this.initMenu(data);
|
|
91
|
+
});
|
|
58
92
|
},
|
|
59
93
|
destroyListener() {
|
|
60
|
-
Bus.$off(
|
|
61
|
-
Bus.$off(
|
|
62
|
-
Bus.$off(
|
|
63
|
-
Bus.$off(
|
|
94
|
+
Bus.$off("system-info");
|
|
95
|
+
Bus.$off("nav-list");
|
|
96
|
+
Bus.$off("menu-list");
|
|
97
|
+
Bus.$off("change-app");
|
|
64
98
|
},
|
|
65
99
|
initSystemInfo(data) {
|
|
66
100
|
if (data) {
|
|
67
|
-
this.systemInfo=data
|
|
101
|
+
this.systemInfo = data;
|
|
68
102
|
this.topMenuNum = data.topMenu ? data.topMenu : 4;
|
|
69
|
-
this.acceptAppId = data.acceptAppId ? data.acceptAppId :
|
|
103
|
+
this.acceptAppId = data.acceptAppId ? data.acceptAppId : "";
|
|
70
104
|
if (!this.activeName) {
|
|
71
105
|
this.activeName = this.acceptAppId;
|
|
72
106
|
}
|
|
73
|
-
this.initNav(this.navList)
|
|
107
|
+
this.initNav(this.navList);
|
|
74
108
|
}
|
|
75
109
|
},
|
|
76
110
|
initNav(data) {
|
|
77
|
-
if (
|
|
78
|
-
|
|
111
|
+
if (
|
|
112
|
+
arraysEqual(this.navList, data) &&
|
|
113
|
+
this.topMenuNum === this.lastTopMenuNum
|
|
114
|
+
) {
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
_.forEach(data, (app) => {
|
|
118
|
+
let extendProps = app.extendProps;
|
|
119
|
+
let extendPropsL2 = extendProps?.extendProps;
|
|
120
|
+
app.parentName = extendPropsL2
|
|
121
|
+
? JSON.parse(extendPropsL2)?.parentName
|
|
122
|
+
: "";
|
|
123
|
+
});
|
|
124
|
+
// 如果组织了二级菜单展现，则对菜单进行分组
|
|
125
|
+
if (_.some(data, (app) => app.parentName)) {
|
|
126
|
+
let rlt = _.reduce(
|
|
127
|
+
data,
|
|
128
|
+
(acc, cur) => {
|
|
129
|
+
if (cur.parentName) {
|
|
130
|
+
let curApp = _.find(acc, { name: cur.parentName });
|
|
131
|
+
if (curApp) {
|
|
132
|
+
curApp.children.push(cur);
|
|
133
|
+
} else {
|
|
134
|
+
acc.push({
|
|
135
|
+
name: cur.parentName,
|
|
136
|
+
children: [cur],
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
} else {
|
|
140
|
+
acc.push(cur);
|
|
141
|
+
}
|
|
142
|
+
return acc;
|
|
143
|
+
},
|
|
144
|
+
[]
|
|
145
|
+
);
|
|
146
|
+
this.navList = rlt;
|
|
147
|
+
} else {
|
|
148
|
+
this.navList = data;
|
|
79
149
|
}
|
|
80
|
-
|
|
81
|
-
this.lastTopMenuNum = this.topMenuNum
|
|
150
|
+
|
|
151
|
+
this.lastTopMenuNum = this.topMenuNum;
|
|
82
152
|
if (data.length > this.topMenuNum) {
|
|
83
|
-
let navList = deepCopy(data)
|
|
84
|
-
this.topMenList = navList.splice(0, this.topMenuNum)
|
|
85
|
-
this.otherList = navList
|
|
153
|
+
let navList = deepCopy(data);
|
|
154
|
+
this.topMenList = navList.splice(0, this.topMenuNum);
|
|
155
|
+
this.otherList = navList;
|
|
86
156
|
} else {
|
|
87
|
-
this.topMenList = this.navList
|
|
88
|
-
this.otherList = []
|
|
157
|
+
this.topMenList = this.navList;
|
|
158
|
+
this.otherList = [];
|
|
89
159
|
}
|
|
90
160
|
if (this.navList.length > 0) {
|
|
91
|
-
let appId = this.navList[0].appId
|
|
161
|
+
let appId = this.navList[0].appId;
|
|
92
162
|
for (let i = 0; i < this.navList.length; i++) {
|
|
93
163
|
if (this.navList[i].selected == true) {
|
|
94
|
-
appId = this.navList[i].appId
|
|
164
|
+
appId = this.navList[i].appId;
|
|
95
165
|
}
|
|
96
166
|
}
|
|
97
167
|
if (this.activeName) {
|
|
98
|
-
appId = this.activeName
|
|
168
|
+
appId = this.activeName;
|
|
99
169
|
}
|
|
100
|
-
this.selectApp(appId)
|
|
170
|
+
this.selectApp(appId);
|
|
101
171
|
}
|
|
102
172
|
},
|
|
103
173
|
initMenu(data) {
|
|
104
|
-
this.originMenuList = deepCopy(data)
|
|
174
|
+
this.originMenuList = deepCopy(data);
|
|
105
175
|
},
|
|
106
176
|
selectApp(appId) {
|
|
107
177
|
if (appId) {
|
|
108
|
-
let res = this.navList.filter(app => app.appId == appId)
|
|
178
|
+
let res = this.navList.filter((app) => app.appId == appId);
|
|
109
179
|
if (res && res.length > 0) {
|
|
110
|
-
Bus.$emit(
|
|
180
|
+
Bus.$emit("change-app", { appId, appInfo: res[0] });
|
|
111
181
|
}
|
|
112
182
|
}
|
|
113
183
|
},
|
|
114
184
|
changeApp(appId, appInfo) {
|
|
115
185
|
if (appId) {
|
|
116
|
-
this.activeName = appId
|
|
186
|
+
this.activeName = appId;
|
|
117
187
|
this.$nextTick(() => {
|
|
118
|
-
this.$refs.topNav.updateActiveName()
|
|
119
|
-
})
|
|
188
|
+
this.$refs.topNav.updateActiveName();
|
|
189
|
+
});
|
|
120
190
|
}
|
|
121
|
-
}
|
|
191
|
+
},
|
|
122
192
|
},
|
|
123
193
|
watch: {
|
|
124
194
|
activeName() {
|
|
125
195
|
this.$nextTick(() => {
|
|
126
|
-
this.$refs.topNav.updateActiveName()
|
|
127
|
-
})
|
|
128
|
-
}
|
|
196
|
+
this.$refs.topNav.updateActiveName();
|
|
197
|
+
});
|
|
198
|
+
},
|
|
129
199
|
},
|
|
130
200
|
created() {
|
|
131
|
-
this.initListener()
|
|
201
|
+
this.initListener();
|
|
132
202
|
},
|
|
133
203
|
beforeDestroy() {
|
|
134
|
-
this.destroyListener()
|
|
135
|
-
}
|
|
136
|
-
}
|
|
204
|
+
this.destroyListener();
|
|
205
|
+
},
|
|
206
|
+
};
|
|
137
207
|
</script>
|
|
138
208
|
|
|
139
209
|
<style scoped lang="less">
|
|
140
|
-
@import
|
|
210
|
+
@import "@lambo-design/core/src/styles/default.less";
|
|
141
211
|
.pro-layout-nav-wrapper {
|
|
142
212
|
.ivu-menu {
|
|
143
213
|
.ivu-menu-item {
|
|
@@ -148,7 +218,8 @@ export default {
|
|
|
148
218
|
right: 0;
|
|
149
219
|
}
|
|
150
220
|
}
|
|
151
|
-
&.ivu-menu-item-active,
|
|
221
|
+
&.ivu-menu-item-active,
|
|
222
|
+
&.ivu-menu-item-selected {
|
|
152
223
|
.line {
|
|
153
224
|
position: absolute;
|
|
154
225
|
left: 0;
|
|
@@ -157,6 +228,24 @@ export default {
|
|
|
157
228
|
}
|
|
158
229
|
}
|
|
159
230
|
}
|
|
231
|
+
.ibp-nav-sub-menu {
|
|
232
|
+
.ivu-select-dropdown {
|
|
233
|
+
margin-top: 0 !important;
|
|
234
|
+
width: fit-content !important;
|
|
235
|
+
}
|
|
236
|
+
.ivu-menu-drop-list {
|
|
237
|
+
padding: 10px !important;
|
|
238
|
+
display: flex !important;
|
|
239
|
+
}
|
|
240
|
+
.ivu-menu-item {
|
|
241
|
+
color: #333 !important;
|
|
242
|
+
border-radius: 4px !important;
|
|
243
|
+
background-color: var(--ind-bg-color-dark) !important;
|
|
244
|
+
margin-right: 10px;
|
|
245
|
+
&:hover {
|
|
246
|
+
color: var(--ind-blue) !important;
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
}
|
|
160
250
|
}
|
|
161
|
-
|
|
162
251
|
</style>
|
|
@@ -1,131 +1,131 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="pro-layout-tools-quick-notice">
|
|
3
|
-
<Dropdown >
|
|
4
|
-
<Badge :count="noticeDatas.length" class-name="badge-count">
|
|
5
|
-
<Icon type="ios-notifications-outline" size="20" style="cursor: pointer"></Icon>
|
|
6
|
-
</Badge>
|
|
7
|
-
<template #list>
|
|
8
|
-
<DropdownMenu slot="list" class="notice-dropdown-menu">
|
|
9
|
-
<DropdownItem v-for="(item, index) in noticeDatas" :key="index" class="dropdown-item" @click.native="getDetail(item)" >
|
|
10
|
-
<div class="item-image">
|
|
11
|
-
<Icon type="ios-mail" size="24"/>
|
|
12
|
-
</div>
|
|
13
|
-
<div class="item-title" :title="item.noticeTitle">
|
|
14
|
-
{{ item.noticeTitle }}
|
|
15
|
-
</div>
|
|
16
|
-
<div class="item-time">
|
|
17
|
-
{{ item.publishTime }}
|
|
18
|
-
</div>
|
|
19
|
-
</DropdownItem>
|
|
20
|
-
<div class="dropdown-footer" :class="[noticeDatas.length == 0 ? 'no-line' : '']">
|
|
21
|
-
<Button type="text" v-if="noticeDatas.length > 0" @click="getMore" class="display-more" >查看更多</Button>
|
|
22
|
-
<Button type="text" v-if="noticeDatas.length > 0" @click="markRead" class="mark-read" >一键已读</Button>
|
|
23
|
-
<div class="no-data" v-if="noticeDatas.length == 0" >暂无未读通知</div>
|
|
24
|
-
</div>
|
|
25
|
-
</DropdownMenu>
|
|
26
|
-
</template>
|
|
27
|
-
</Dropdown>
|
|
28
|
-
</div>
|
|
29
|
-
</template>
|
|
30
|
-
|
|
31
|
-
<script>
|
|
32
|
-
import Bus from '@lambo-design/shared/utils/bus';
|
|
33
|
-
import {deepCopy} from '@lambo-design/shared/utils/assist';
|
|
34
|
-
export default {
|
|
35
|
-
name: "pro-layout-tools-quick-notice",
|
|
36
|
-
data() {
|
|
37
|
-
return {
|
|
38
|
-
noticeDatas:[]
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
methods: {
|
|
42
|
-
initListener() {
|
|
43
|
-
Bus.$on('other-datas',(data) => {
|
|
44
|
-
this.initNoticeList(data);
|
|
45
|
-
})
|
|
46
|
-
},
|
|
47
|
-
destroyListener() {
|
|
48
|
-
Bus.$off('other-datas')
|
|
49
|
-
},
|
|
50
|
-
initNoticeList(data) {
|
|
51
|
-
if (data && data.noticeDatas) {
|
|
52
|
-
this.noticeDatas = deepCopy(data.noticeDatas);
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
getDetail(item){
|
|
56
|
-
Bus.$emit('other-operate','notice-detail',item)
|
|
57
|
-
},
|
|
58
|
-
markRead(){
|
|
59
|
-
Bus.$emit('other-operate','notice-mark-read')
|
|
60
|
-
},
|
|
61
|
-
getMore() {
|
|
62
|
-
Bus.$emit('other-operate','notice-more')
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
created() {
|
|
66
|
-
this.initListener()
|
|
67
|
-
},
|
|
68
|
-
beforeDestroy() {
|
|
69
|
-
this.destroyListener()
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
</script>
|
|
73
|
-
|
|
74
|
-
<style lang="less">
|
|
75
|
-
@import "@lambo-design/core/src/styles/default";
|
|
76
|
-
.pro-layout-tools-quick-notice{
|
|
77
|
-
.badge-count{
|
|
78
|
-
top:12px;
|
|
79
|
-
height: 10px;
|
|
80
|
-
line-height: 8px;
|
|
81
|
-
min-width: 8px;
|
|
82
|
-
padding: 0;
|
|
83
|
-
font-size: 8px;
|
|
84
|
-
width: 10px;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
.notice-dropdown-menu {
|
|
88
|
-
max-height: 300px;
|
|
89
|
-
width: 300px;
|
|
90
|
-
&::-webkit-scrollbar {
|
|
91
|
-
width: 0;
|
|
92
|
-
height: 0;
|
|
93
|
-
}
|
|
94
|
-
.dropdown-item {
|
|
95
|
-
overflow: hidden;
|
|
96
|
-
line-height: 24px;
|
|
97
|
-
padding: 8px;
|
|
98
|
-
.item-image{
|
|
99
|
-
float: left;
|
|
100
|
-
}
|
|
101
|
-
.item-title{
|
|
102
|
-
float: left;
|
|
103
|
-
margin-left: 5px;
|
|
104
|
-
width: 120px;
|
|
105
|
-
white-space:nowrap;
|
|
106
|
-
overflow:hidden;
|
|
107
|
-
text-overflow: ellipsis;
|
|
108
|
-
}
|
|
109
|
-
.item-time{
|
|
110
|
-
float: right;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
.dropdown-footer{
|
|
114
|
-
line-height: 24px;
|
|
115
|
-
border-top: 1px solid var(--layout-sider-line-color,@_layout-sider-line-color);
|
|
116
|
-
padding: 8px;
|
|
117
|
-
&.no-line{
|
|
118
|
-
border: 0;
|
|
119
|
-
}
|
|
120
|
-
.display-more{
|
|
121
|
-
float: left;
|
|
122
|
-
}
|
|
123
|
-
.mark-read{
|
|
124
|
-
float: right;
|
|
125
|
-
}
|
|
126
|
-
.no-data{
|
|
127
|
-
text-align: center;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="pro-layout-tools-quick-notice">
|
|
3
|
+
<Dropdown >
|
|
4
|
+
<Badge :count="noticeDatas.length" class-name="badge-count">
|
|
5
|
+
<Icon type="ios-notifications-outline" size="20" style="cursor: pointer"></Icon>
|
|
6
|
+
</Badge>
|
|
7
|
+
<template #list>
|
|
8
|
+
<DropdownMenu slot="list" class="notice-dropdown-menu">
|
|
9
|
+
<DropdownItem v-for="(item, index) in noticeDatas" :key="index" class="dropdown-item" @click.native="getDetail(item)" >
|
|
10
|
+
<div class="item-image">
|
|
11
|
+
<Icon type="ios-mail" size="24"/>
|
|
12
|
+
</div>
|
|
13
|
+
<div class="item-title" :title="item.noticeTitle">
|
|
14
|
+
{{ item.noticeTitle }}
|
|
15
|
+
</div>
|
|
16
|
+
<div class="item-time">
|
|
17
|
+
{{ item.publishTime }}
|
|
18
|
+
</div>
|
|
19
|
+
</DropdownItem>
|
|
20
|
+
<div class="dropdown-footer" :class="[noticeDatas.length == 0 ? 'no-line' : '']">
|
|
21
|
+
<Button type="text" v-if="noticeDatas.length > 0" @click="getMore" class="display-more" >查看更多</Button>
|
|
22
|
+
<Button type="text" v-if="noticeDatas.length > 0" @click="markRead" class="mark-read" >一键已读</Button>
|
|
23
|
+
<div class="no-data" v-if="noticeDatas.length == 0" >暂无未读通知</div>
|
|
24
|
+
</div>
|
|
25
|
+
</DropdownMenu>
|
|
26
|
+
</template>
|
|
27
|
+
</Dropdown>
|
|
28
|
+
</div>
|
|
29
|
+
</template>
|
|
30
|
+
|
|
31
|
+
<script>
|
|
32
|
+
import Bus from '@lambo-design/shared/utils/bus';
|
|
33
|
+
import {deepCopy} from '@lambo-design/shared/utils/assist';
|
|
34
|
+
export default {
|
|
35
|
+
name: "pro-layout-tools-quick-notice",
|
|
36
|
+
data() {
|
|
37
|
+
return {
|
|
38
|
+
noticeDatas:[]
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
methods: {
|
|
42
|
+
initListener() {
|
|
43
|
+
Bus.$on('other-datas',(data) => {
|
|
44
|
+
this.initNoticeList(data);
|
|
45
|
+
})
|
|
46
|
+
},
|
|
47
|
+
destroyListener() {
|
|
48
|
+
Bus.$off('other-datas')
|
|
49
|
+
},
|
|
50
|
+
initNoticeList(data) {
|
|
51
|
+
if (data && data.noticeDatas) {
|
|
52
|
+
this.noticeDatas = deepCopy(data.noticeDatas);
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
getDetail(item){
|
|
56
|
+
Bus.$emit('other-operate','notice-detail',item)
|
|
57
|
+
},
|
|
58
|
+
markRead(){
|
|
59
|
+
Bus.$emit('other-operate','notice-mark-read')
|
|
60
|
+
},
|
|
61
|
+
getMore() {
|
|
62
|
+
Bus.$emit('other-operate','notice-more')
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
created() {
|
|
66
|
+
this.initListener()
|
|
67
|
+
},
|
|
68
|
+
beforeDestroy() {
|
|
69
|
+
this.destroyListener()
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
</script>
|
|
73
|
+
|
|
74
|
+
<style lang="less">
|
|
75
|
+
@import "@lambo-design/core/src/styles/default";
|
|
76
|
+
.pro-layout-tools-quick-notice{
|
|
77
|
+
.badge-count{
|
|
78
|
+
top:12px;
|
|
79
|
+
height: 10px;
|
|
80
|
+
line-height: 8px;
|
|
81
|
+
min-width: 8px;
|
|
82
|
+
padding: 0;
|
|
83
|
+
font-size: 8px;
|
|
84
|
+
width: 10px;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
.notice-dropdown-menu {
|
|
88
|
+
max-height: 300px;
|
|
89
|
+
width: 300px;
|
|
90
|
+
&::-webkit-scrollbar {
|
|
91
|
+
width: 0;
|
|
92
|
+
height: 0;
|
|
93
|
+
}
|
|
94
|
+
.dropdown-item {
|
|
95
|
+
overflow: hidden;
|
|
96
|
+
line-height: 24px;
|
|
97
|
+
padding: 8px;
|
|
98
|
+
.item-image{
|
|
99
|
+
float: left;
|
|
100
|
+
}
|
|
101
|
+
.item-title{
|
|
102
|
+
float: left;
|
|
103
|
+
margin-left: 5px;
|
|
104
|
+
width: 120px;
|
|
105
|
+
white-space:nowrap;
|
|
106
|
+
overflow:hidden;
|
|
107
|
+
text-overflow: ellipsis;
|
|
108
|
+
}
|
|
109
|
+
.item-time{
|
|
110
|
+
float: right;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
.dropdown-footer{
|
|
114
|
+
line-height: 24px;
|
|
115
|
+
border-top: 1px solid var(--layout-sider-line-color,@_layout-sider-line-color);
|
|
116
|
+
padding: 8px;
|
|
117
|
+
&.no-line{
|
|
118
|
+
border: 0;
|
|
119
|
+
}
|
|
120
|
+
.display-more{
|
|
121
|
+
float: left;
|
|
122
|
+
}
|
|
123
|
+
.mark-read{
|
|
124
|
+
float: right;
|
|
125
|
+
}
|
|
126
|
+
.no-data{
|
|
127
|
+
text-align: center;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
</style>
|