jobdone-shared-files 1.1.3 → 1.1.5
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/ModuleInfo/LayoutNav.vue +245 -223
- package/package.json +1 -1
package/ModuleInfo/LayoutNav.vue
CHANGED
|
@@ -1,205 +1,220 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
</div>
|
|
12
|
-
<h1 class="text-line-clamp-1" v-else>
|
|
13
|
-
<span v-if="!moduleInfoData.isPersonal">{{moduleInfoData?.moduleInfo?.name}}</span>
|
|
14
|
-
<span v-else>個人方案</span>
|
|
15
|
-
</h1>
|
|
16
|
-
</a>
|
|
17
|
-
</div>
|
|
2
|
+
<aside id="col-aside" class="border-end border-white overflow-visible">
|
|
3
|
+
<div class="bg-body">
|
|
4
|
+
<div class="d-flex border-bottom">
|
|
5
|
+
<nav-button :module-info="moduleInfoData" :root-domain="finalRootDomain"></nav-button>
|
|
6
|
+
<div class="logo-content flex-grow-1">
|
|
7
|
+
<a :href="indexLink">
|
|
8
|
+
<img src="./logo-with-text.svg" alt="Jobdone Enterprise Logo">
|
|
9
|
+
<div class="placeholder-glow py-1" v-if="!moduleInfoData?.moduleInfo?.name && !moduleInfoData.isPersonal">
|
|
10
|
+
<span class="bg-secondary placeholder w-100"></span>
|
|
18
11
|
</div>
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<div>
|
|
25
|
-
<b class="text-link text-with-icon me-1">
|
|
26
|
-
<span>查看<span v-if="moduleInfoData.isPersonal">個人身份</span><span v-else>公司資訊與</span>方案</span>
|
|
27
|
-
<span class="material-icons icon-18">chevron_right</span>
|
|
28
|
-
</b>
|
|
29
|
-
</div>
|
|
30
|
-
</small>
|
|
31
|
-
</a>
|
|
32
|
-
</div>
|
|
33
|
-
<div class="overflow-auto flex-grow-1 py-1">
|
|
34
|
-
<slot name="list-content-top"></slot>
|
|
35
|
-
<template v-if="moduleInfoData.generalLinks?.length > 0">
|
|
36
|
-
<ul class="list-group list-group-aside">
|
|
37
|
-
<div class="bg-gray-100 text-gray-500 ps-4 pt-3 pb-2">
|
|
38
|
-
<small><b>我的待辦事項</b></small>
|
|
39
|
-
</div>
|
|
40
|
-
<li v-for="(item, index) in moduleInfoData.generalLinks" :key="index">
|
|
41
|
-
<a :href="item.url" class="list-group-item text-with-icon">
|
|
42
|
-
<span class="material-icons icon-18">{{ item.iconName }}</span>
|
|
43
|
-
<span class="ms-2">{{ item.name }}</span>
|
|
44
|
-
<span class="material-icons ms-1 icon-18 ms-auto">chevron_right</span>
|
|
45
|
-
</a>
|
|
46
|
-
</li>
|
|
47
|
-
</ul>
|
|
48
|
-
</template>
|
|
49
|
-
<slot name="list-content-bottom"></slot>
|
|
12
|
+
<h1 class="text-line-clamp-1" v-else>
|
|
13
|
+
<span v-if="!moduleInfoData.isPersonal">{{ moduleInfoData?.moduleInfo?.name }}</span>
|
|
14
|
+
<span v-else>個人方案</span>
|
|
15
|
+
</h1>
|
|
16
|
+
</a>
|
|
50
17
|
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<a :href="finalRootDomain + (moduleInfoData.isPersonal ? '/PersonalPlan' : '/CompanyOrderDetail')"
|
|
20
|
+
class="d-block a-reset-color a-hover-gradient border-bottom px-4 py-3 lh-1">
|
|
21
|
+
<small>
|
|
22
|
+
<div class="mb-2">
|
|
23
|
+
<b class="text-line-clamp-1">{{ moduleInfoData.isPersonal ? userDisplayName : orgName }}</b>
|
|
24
|
+
</div>
|
|
25
|
+
<div>
|
|
26
|
+
<b class="text-link text-with-icon me-1">
|
|
27
|
+
<span>查看<span v-if="moduleInfoData.isPersonal">個人身份</span><span v-else>公司資訊與</span>方案</span>
|
|
28
|
+
<span class="material-icons icon-18">chevron_right</span>
|
|
29
|
+
</b>
|
|
30
|
+
</div>
|
|
31
|
+
</small>
|
|
32
|
+
</a>
|
|
33
|
+
</div>
|
|
51
34
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
35
|
+
<div class="overflow-auto flex-grow-1 py-1">
|
|
36
|
+
<slot name="list-content-top" :moduleInfo="moduleInfoData"></slot>
|
|
37
|
+
<template v-if="moduleInfoData.generalApps?.length > 0">
|
|
38
|
+
<ul class="list-group list-group-aside">
|
|
39
|
+
<div class="bg-gray-100 text-gray-500 ps-4 pt-3 pb-2">
|
|
40
|
+
<small><b>公司通用功能</b></small>
|
|
41
|
+
</div>
|
|
42
|
+
<li v-for="(item, index) in moduleInfoData.generalApps" :key="index">
|
|
43
|
+
<a :href="item.url" class="list-group-item text-with-icon">
|
|
44
|
+
<span class="material-icons icon-18">{{ item.iconName }}</span>
|
|
45
|
+
<span class="ms-2">{{ item.name }}</span>
|
|
46
|
+
<span class="material-icons ms-1 icon-18 ms-auto">chevron_right</span>
|
|
47
|
+
</a>
|
|
48
|
+
</li>
|
|
49
|
+
</ul>
|
|
50
|
+
</template>
|
|
51
|
+
<template v-if="moduleInfoData.generalLinks?.length > 0">
|
|
52
|
+
<ul class="list-group list-group-aside">
|
|
53
|
+
<div class="bg-gray-100 text-gray-500 ps-4 pt-3 pb-2">
|
|
54
|
+
<small><b>我的待辦事項</b></small>
|
|
55
|
+
</div>
|
|
56
|
+
<li v-for="(item, index) in moduleInfoData.generalLinks" :key="index">
|
|
57
|
+
<a :href="item.url" class="list-group-item text-with-icon">
|
|
58
|
+
<span class="material-icons icon-18">{{ item.iconName }}</span>
|
|
59
|
+
<span class="ms-2">{{ item.name }}</span>
|
|
60
|
+
<span class="material-icons ms-1 icon-18 ms-auto">chevron_right</span>
|
|
61
|
+
</a>
|
|
62
|
+
</li>
|
|
63
|
+
</ul>
|
|
64
|
+
</template>
|
|
65
|
+
<slot name="list-content-bottom" :moduleInfo="moduleInfoData"></slot>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div class="bg-body sticky-bottom border-top">
|
|
69
|
+
<div class="d-flex border-bottom text-center">
|
|
70
|
+
<a :href="finalRootDomain + '/MyContacts'"
|
|
71
|
+
class="d-flex align-items-center justify-content-center a-reset-color a-hover-gradient bg-gray-100 flex-grow-1 px-3 py-2">
|
|
72
|
+
<span class="material-icons icon-18 me-1">people</span>
|
|
73
|
+
<span>我的聯絡人</span>
|
|
74
|
+
</a>
|
|
75
|
+
<slot name="bottom-link"></slot>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="d-flex">
|
|
78
|
+
<a :href="finalRootDomain + '/Profile'"
|
|
79
|
+
class="d-flex align-items-center flex-grow-1 a-reset-color a-hover-gradient px-2 py-2">
|
|
80
|
+
<div class="thumbnail-content thumbnail-50 rounded-circle"
|
|
81
|
+
:style='"background-image: url(" + userAvatar + ");"'>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="ms-2">
|
|
84
|
+
<div>
|
|
85
|
+
<b class="text-line-clamp-1 text-break">{{ userDisplayName }}</b>
|
|
80
86
|
</div>
|
|
81
|
-
|
|
87
|
+
<b>
|
|
88
|
+
<small class="text-line-clamp-1 text-muted">({{ userFullName }})</small>
|
|
89
|
+
</b>
|
|
90
|
+
</div>
|
|
91
|
+
</a>
|
|
92
|
+
<a :href="logoutLink" class="d-flex align-items-center a-hover-gradient border-start bg-gray-100 px-3 py-2">
|
|
93
|
+
<b class="text-nowrap letter-spacing-2">登出</b>
|
|
94
|
+
</a>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
82
97
|
|
|
83
|
-
|
|
98
|
+
</aside>
|
|
84
99
|
</template>
|
|
85
100
|
|
|
86
101
|
<script>
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
export default {
|
|
93
|
-
name: "LayoutNav",
|
|
94
|
-
components: {
|
|
95
|
-
navButton
|
|
96
|
-
},
|
|
97
|
-
props: {
|
|
98
|
-
rootDomain: {
|
|
99
|
-
type: String,
|
|
100
|
-
required: false,
|
|
101
|
-
default: ""
|
|
102
|
-
},
|
|
103
|
-
|
|
104
|
-
// user info
|
|
105
|
-
userAvatar: {
|
|
106
|
-
type: String,
|
|
107
|
-
required: true,
|
|
108
|
-
default: ""
|
|
109
|
-
},
|
|
110
|
-
userDisplayName: {
|
|
111
|
-
type: String,
|
|
112
|
-
required: true,
|
|
113
|
-
default: ""
|
|
114
|
-
},
|
|
115
|
-
userFullName: {
|
|
116
|
-
type: String,
|
|
117
|
-
required: true,
|
|
118
|
-
default: ""
|
|
119
|
-
},
|
|
120
|
-
orgName: {
|
|
121
|
-
type: String,
|
|
122
|
-
required: false,
|
|
123
|
-
default: ""
|
|
124
|
-
},
|
|
125
|
-
|
|
126
|
-
// module
|
|
127
|
-
moduleInfo: {
|
|
128
|
-
type: [String, Object],
|
|
129
|
-
required: true,
|
|
130
|
-
default: ""
|
|
131
|
-
},
|
|
132
|
-
|
|
133
|
-
// links
|
|
134
|
-
indexLink: {
|
|
135
|
-
type: String,
|
|
136
|
-
required: false,
|
|
137
|
-
default: "/Index"
|
|
138
|
-
},
|
|
139
|
-
logoutLink: {
|
|
140
|
-
type: String,
|
|
141
|
-
required: false,
|
|
142
|
-
default: "/Logout"
|
|
143
|
-
}
|
|
144
|
-
},
|
|
145
|
-
setup(props) {
|
|
146
|
-
|
|
147
|
-
const moduleInfoData = ref({
|
|
148
|
-
moduleInfo: {
|
|
149
|
-
name: "",
|
|
150
|
-
iconName: ""
|
|
151
|
-
}
|
|
152
|
-
});
|
|
102
|
+
import { ref, computed, onMounted, nextTick } from "vue";
|
|
103
|
+
import axios from 'axios';
|
|
104
|
+
import '../../bootstrap/js/dist/dropdown.js';
|
|
105
|
+
import navButton from './navButton.vue';
|
|
153
106
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
107
|
+
export default {
|
|
108
|
+
name: "LayoutNav",
|
|
109
|
+
components: {
|
|
110
|
+
navButton
|
|
111
|
+
},
|
|
112
|
+
props: {
|
|
113
|
+
rootDomain: {
|
|
114
|
+
type: String,
|
|
115
|
+
required: false,
|
|
116
|
+
default: ""
|
|
117
|
+
},
|
|
160
118
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
119
|
+
// user info
|
|
120
|
+
userAvatar: {
|
|
121
|
+
type: String,
|
|
122
|
+
required: true,
|
|
123
|
+
default: ""
|
|
124
|
+
},
|
|
125
|
+
userDisplayName: {
|
|
126
|
+
type: String,
|
|
127
|
+
required: true,
|
|
128
|
+
default: ""
|
|
129
|
+
},
|
|
130
|
+
userFullName: {
|
|
131
|
+
type: String,
|
|
132
|
+
required: true,
|
|
133
|
+
default: ""
|
|
134
|
+
},
|
|
135
|
+
orgName: {
|
|
136
|
+
type: String,
|
|
137
|
+
required: false,
|
|
138
|
+
default: ""
|
|
139
|
+
},
|
|
140
|
+
|
|
141
|
+
// module
|
|
142
|
+
moduleInfo: {
|
|
143
|
+
type: [String, Object],
|
|
144
|
+
required: true,
|
|
145
|
+
default: ""
|
|
146
|
+
},
|
|
147
|
+
|
|
148
|
+
// links
|
|
149
|
+
indexLink: {
|
|
150
|
+
type: String,
|
|
151
|
+
required: false,
|
|
152
|
+
default: "/Index"
|
|
153
|
+
},
|
|
154
|
+
logoutLink: {
|
|
155
|
+
type: String,
|
|
156
|
+
required: false,
|
|
157
|
+
default: "/Logout"
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
setup(props) {
|
|
161
|
+
|
|
162
|
+
const moduleInfoData = ref({
|
|
163
|
+
moduleInfo: {
|
|
164
|
+
name: "",
|
|
165
|
+
iconName: ""
|
|
166
|
+
}
|
|
167
|
+
});
|
|
196
168
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
169
|
+
const finalRootDomain = computed(() => {
|
|
170
|
+
if (props.rootDomain.substr(-1) === "/") {
|
|
171
|
+
return props.rootDomain.slice(0, -1);
|
|
172
|
+
}
|
|
173
|
+
return props.rootDomain;
|
|
174
|
+
});
|
|
175
|
+
|
|
176
|
+
onMounted(async () => {
|
|
177
|
+
try {
|
|
178
|
+
switch (typeof props.moduleInfo) {
|
|
179
|
+
case 'string':
|
|
180
|
+
axios.get(props.moduleInfo).then((res) => {
|
|
181
|
+
moduleInfoData.value = res.data;
|
|
182
|
+
});
|
|
183
|
+
break;
|
|
184
|
+
case 'object':
|
|
185
|
+
moduleInfoData.value = props.moduleInfo;
|
|
186
|
+
break;
|
|
187
|
+
default:
|
|
188
|
+
moduleInfoData.value = {
|
|
189
|
+
moduleInfo: {
|
|
190
|
+
name: "",
|
|
191
|
+
iconName: ""
|
|
192
|
+
},
|
|
193
|
+
generalLinks: [],
|
|
194
|
+
isPersonal: true,
|
|
195
|
+
isPaymentAdmin: false
|
|
200
196
|
};
|
|
201
|
-
|
|
197
|
+
break;
|
|
198
|
+
}
|
|
199
|
+
} catch (e) {
|
|
200
|
+
moduleInfoData.value = {
|
|
201
|
+
moduleInfo: {
|
|
202
|
+
name: "",
|
|
203
|
+
iconName: ""
|
|
204
|
+
},
|
|
205
|
+
generalLinks: [],
|
|
206
|
+
isPersonal: true,
|
|
207
|
+
isPaymentAdmin: false
|
|
208
|
+
};
|
|
209
|
+
}
|
|
210
|
+
});
|
|
211
|
+
|
|
212
|
+
return {
|
|
213
|
+
moduleInfoData,
|
|
214
|
+
finalRootDomain
|
|
202
215
|
};
|
|
216
|
+
},
|
|
217
|
+
};
|
|
203
218
|
</script>
|
|
204
219
|
|
|
205
220
|
<style lang="scss">
|
|
@@ -209,43 +224,50 @@
|
|
|
209
224
|
@import "../../../node_modules/jobdone-shared-files/style/scss/Settings/custom-variables";
|
|
210
225
|
@import "../../../node_modules/jobdone-shared-files/style/scss/Settings/Mixins";
|
|
211
226
|
|
|
212
|
-
#col-aside{
|
|
213
|
-
|
|
214
|
-
|
|
227
|
+
#col-aside {
|
|
228
|
+
.btn-square {
|
|
229
|
+
@include solid-size(60px, 100%);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.dropdown-main-menu .dropdown-menu {
|
|
233
|
+
--bs-dropdown-min-width: 25rem;
|
|
234
|
+
box-shadow: 0 1rem 3rem rgba(73, 85, 98, 0.35);
|
|
235
|
+
|
|
236
|
+
.dropdown-header {
|
|
237
|
+
--bs-dropdown-header-padding-x: 2rem;
|
|
215
238
|
}
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
--bs-dropdown-header-padding-x: 2rem;
|
|
221
|
-
}
|
|
222
|
-
.dropdown-item{
|
|
223
|
-
--bs-dropdown-item-padding-x: 2rem;
|
|
224
|
-
--bs-dropdown-item-padding-y: .5rem;
|
|
225
|
-
}
|
|
239
|
+
|
|
240
|
+
.dropdown-item {
|
|
241
|
+
--bs-dropdown-item-padding-x: 2rem;
|
|
242
|
+
--bs-dropdown-item-padding-y: .5rem;
|
|
226
243
|
}
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.logo-content {
|
|
247
|
+
padding: 0.75rem 1.5rem;
|
|
248
|
+
|
|
249
|
+
a {
|
|
250
|
+
position: relative;
|
|
251
|
+
display: block;
|
|
252
|
+
padding-top: 1.1rem;
|
|
253
|
+
padding-left: 3.2rem;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
img {
|
|
257
|
+
position: absolute;
|
|
258
|
+
top: 0;
|
|
259
|
+
left: 0;
|
|
260
|
+
width: 6rem;
|
|
261
|
+
pointer-events: none;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
h1 {
|
|
265
|
+
font-size: 1.3rem;
|
|
266
|
+
height: 1.5rem;
|
|
267
|
+
margin: 0;
|
|
268
|
+
font-family: "jf-openhuninn-2.0", "Noto Sans TC", sans-serif;
|
|
269
|
+
letter-spacing: 1px;
|
|
249
270
|
}
|
|
271
|
+
}
|
|
250
272
|
}
|
|
251
273
|
</style>
|