n20-common-lib 2.22.41 → 2.22.43
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 +1 -1
- package/src/assets/css/approve-card.scss +87 -0
- package/src/components/ApprovalCard/index.vue +38 -21
- package/src/utils/theme.js +11 -5
- package/style/index.css +1 -1
- package/theme/blue.css +1 -1
- package/theme/cctcRed.css +1 -1
- package/theme/green.css +1 -1
- package/theme/lightBlue.css +1 -1
- package/theme/orange.css +1 -1
- package/theme/purple.css +1 -1
- package/theme/red.css +1 -1
- package/theme/yellow.css +1 -1
package/package.json
CHANGED
|
@@ -18,7 +18,90 @@
|
|
|
18
18
|
cursor: default;
|
|
19
19
|
}
|
|
20
20
|
.result-left-name {
|
|
21
|
+
flex: 0 0 20%;
|
|
21
22
|
width: 20%;
|
|
23
|
+
min-width: 80px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.approval-info-grid {
|
|
27
|
+
--approval-info-job-column: minmax(0, 0.9fr);
|
|
28
|
+
--approval-info-app-column: minmax(0, 0.8fr);
|
|
29
|
+
--approval-info-cost-column: minmax(170px, max-content);
|
|
30
|
+
--approval-info-detail-column: minmax(70px, max-content);
|
|
31
|
+
|
|
32
|
+
display: grid;
|
|
33
|
+
grid-template-columns:
|
|
34
|
+
minmax(0, 1.1fr)
|
|
35
|
+
minmax(0, 1.1fr)
|
|
36
|
+
var(--approval-info-job-column)
|
|
37
|
+
minmax(0, 1.4fr)
|
|
38
|
+
minmax(0, 0.8fr)
|
|
39
|
+
var(--approval-info-app-column)
|
|
40
|
+
var(--approval-info-cost-column)
|
|
41
|
+
var(--approval-info-detail-column);
|
|
42
|
+
align-items: center;
|
|
43
|
+
column-gap: 0;
|
|
44
|
+
width: 80%;
|
|
45
|
+
min-width: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.approval-info-grid > * {
|
|
49
|
+
box-sizing: border-box;
|
|
50
|
+
min-width: 0;
|
|
51
|
+
padding-right: 20px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.approval-info-grid--no-job {
|
|
55
|
+
--approval-info-job-column: 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.approval-info-grid--no-app {
|
|
59
|
+
--approval-info-app-column: 0;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.approval-info-grid--no-cost {
|
|
63
|
+
--approval-info-cost-column: 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.approval-info-grid--no-detail {
|
|
67
|
+
--approval-info-detail-column: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.approval-info-member {
|
|
71
|
+
grid-column: 1;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.approval-info-dept {
|
|
75
|
+
grid-column: 2;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.approval-info-job {
|
|
79
|
+
grid-column: 3;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.approval-info-role {
|
|
83
|
+
grid-column: 4;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.approval-info-assignee {
|
|
87
|
+
grid-column: 5;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.approval-info-app {
|
|
91
|
+
grid-column: 6;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.approval-info-cost {
|
|
95
|
+
grid-column: 7;
|
|
96
|
+
justify-self: start;
|
|
97
|
+
white-space: nowrap;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.approval-info-detail {
|
|
101
|
+
grid-column: 8;
|
|
102
|
+
justify-self: start;
|
|
103
|
+
padding-right: 0;
|
|
104
|
+
white-space: nowrap;
|
|
22
105
|
}
|
|
23
106
|
|
|
24
107
|
.n20-time {
|
|
@@ -40,6 +123,10 @@
|
|
|
40
123
|
color: $--color-text-primary;
|
|
41
124
|
}
|
|
42
125
|
|
|
126
|
+
.appOrPc-item {
|
|
127
|
+
margin-right: 0;
|
|
128
|
+
}
|
|
129
|
+
|
|
43
130
|
.worker-icon {
|
|
44
131
|
margin-right: 4px;
|
|
45
132
|
color: $--color-text-placeholder;
|
|
@@ -24,22 +24,26 @@
|
|
|
24
24
|
</div>
|
|
25
25
|
<div
|
|
26
26
|
v-title="item.assignee"
|
|
27
|
-
class="flex-
|
|
27
|
+
class="flex-item n20-worker m-r-s approval-info-grid"
|
|
28
|
+
:class="{
|
|
29
|
+
'approval-info-grid--no-job': !item.job,
|
|
30
|
+
'approval-info-grid--no-app':
|
|
31
|
+
item.result === 0 || item.appOrPc === null || item.appOrPc === '' || item.appOrPc === undefined,
|
|
32
|
+
'approval-info-grid--no-detail': item.showConnect !== '1'
|
|
33
|
+
}"
|
|
28
34
|
:show-overflow-tooltip="true"
|
|
29
35
|
>
|
|
30
36
|
<div
|
|
31
37
|
v-title="item.memberName"
|
|
32
38
|
:show-overflow-tooltip="true"
|
|
33
|
-
class="
|
|
34
|
-
style="width: 250px"
|
|
39
|
+
class="n20-worker text-ellipsis approval-info-member"
|
|
35
40
|
>
|
|
36
41
|
{{ item.memberName }}
|
|
37
42
|
</div>
|
|
38
43
|
<div
|
|
39
44
|
v-title="item.deptName"
|
|
40
45
|
:show-overflow-tooltip="true"
|
|
41
|
-
class="
|
|
42
|
-
style="width: 250px"
|
|
46
|
+
class="n20-worker text-ellipsis approval-info-dept"
|
|
43
47
|
>
|
|
44
48
|
{{ item.deptName }}
|
|
45
49
|
</div>
|
|
@@ -47,37 +51,39 @@
|
|
|
47
51
|
v-if="item.job"
|
|
48
52
|
v-title="item.job"
|
|
49
53
|
:show-overflow-tooltip="true"
|
|
50
|
-
class="
|
|
51
|
-
style="width: 250px"
|
|
54
|
+
class="n20-worker text-ellipsis approval-info-job"
|
|
52
55
|
>
|
|
53
56
|
{{ item.job }}
|
|
54
57
|
</div>
|
|
55
58
|
<div
|
|
56
59
|
v-title="item.roleName"
|
|
57
|
-
class="
|
|
60
|
+
class="n20-worker text-ellipsis approval-info-role"
|
|
58
61
|
:show-overflow-tooltip="true"
|
|
59
|
-
style="width: 250px"
|
|
60
62
|
>
|
|
61
63
|
{{ item.roleName }}
|
|
62
64
|
</div>
|
|
63
65
|
<div
|
|
64
66
|
v-if="item.result !== 0"
|
|
65
67
|
v-title="item.assignee"
|
|
66
|
-
class="n20-worker text-ellipsis"
|
|
67
|
-
style="width: 180px"
|
|
68
|
+
class="n20-worker text-ellipsis approval-info-assignee"
|
|
68
69
|
:show-overflow-tooltip="true"
|
|
69
70
|
>
|
|
70
71
|
<span class="worker-icon n20-icon-user"></span>{{ item.assignee }}
|
|
71
72
|
</div>
|
|
72
73
|
<div
|
|
73
74
|
v-if="item.result !== 0 && item.appOrPc !== null && item.appOrPc !== '' && item.appOrPc !== undefined"
|
|
75
|
+
class="n20-worker text-ellipsis appOrPc-item approval-info-app"
|
|
74
76
|
>
|
|
75
77
|
<span v-if="item.outTitle">{{ item.outTitle }}</span>
|
|
76
78
|
<span v-else>
|
|
77
79
|
{{ item.appOrPc === '1' ? 'PC端审批' : item.appOrPc === '2' ? '外部系统审批' : 'App端审批' | $lc }}
|
|
78
80
|
</span>
|
|
79
81
|
</div>
|
|
80
|
-
<div v-if="item.
|
|
82
|
+
<div v-if="item.approvalCost" class="approval-info-cost">
|
|
83
|
+
<span>审批时长：</span>
|
|
84
|
+
<span>{{ item.approvalCost }}</span>
|
|
85
|
+
</div>
|
|
86
|
+
<div v-if="item.showConnect === '1'" class="approval-info-detail">
|
|
81
87
|
<span class="pointer color-ccc f-s-s" @click="seeDetail(item)"
|
|
82
88
|
>{{ '查看详情' | $lc }} <i class="el-icon-arrow-right"></i
|
|
83
89
|
></span>
|
|
@@ -132,38 +138,48 @@
|
|
|
132
138
|
</div>
|
|
133
139
|
<div
|
|
134
140
|
v-title="row.assignee"
|
|
135
|
-
class="flex-
|
|
141
|
+
class="flex-item n20-worker m-r-s approval-info-grid"
|
|
142
|
+
:class="{
|
|
143
|
+
'approval-info-grid--no-job': !row.job,
|
|
144
|
+
'approval-info-grid--no-app': true,
|
|
145
|
+
'approval-info-grid--no-cost': true,
|
|
146
|
+
'approval-info-grid--no-detail': true
|
|
147
|
+
}"
|
|
136
148
|
:show-overflow-tooltip="true"
|
|
137
149
|
>
|
|
138
150
|
<div
|
|
139
151
|
v-title="row.memberName"
|
|
140
152
|
:show-overflow-tooltip="true"
|
|
141
|
-
class="
|
|
142
|
-
style="width: 250px"
|
|
153
|
+
class="n20-worker text-ellipsis approval-info-member"
|
|
143
154
|
>
|
|
144
155
|
{{ row.memberName }}
|
|
145
156
|
</div>
|
|
146
157
|
<div
|
|
147
158
|
v-title="row.deptName"
|
|
148
159
|
:show-overflow-tooltip="true"
|
|
149
|
-
class="
|
|
150
|
-
style="width: 250px"
|
|
160
|
+
class="n20-worker text-ellipsis approval-info-dept"
|
|
151
161
|
>
|
|
152
162
|
{{ row.deptName }}
|
|
153
163
|
</div>
|
|
164
|
+
<div
|
|
165
|
+
v-if="row.job"
|
|
166
|
+
v-title="row.job"
|
|
167
|
+
:show-overflow-tooltip="true"
|
|
168
|
+
class="n20-worker text-ellipsis approval-info-job"
|
|
169
|
+
>
|
|
170
|
+
{{ row.job }}
|
|
171
|
+
</div>
|
|
154
172
|
<div
|
|
155
173
|
v-title="row.roleName"
|
|
156
|
-
class="
|
|
174
|
+
class="n20-worker text-ellipsis approval-info-role"
|
|
157
175
|
:show-overflow-tooltip="true"
|
|
158
|
-
style="width: 250px"
|
|
159
176
|
>
|
|
160
177
|
{{ row.roleName }}
|
|
161
178
|
</div>
|
|
162
179
|
<div
|
|
163
180
|
v-if="row.result !== 0"
|
|
164
181
|
v-title="row.assignee"
|
|
165
|
-
class="n20-worker text-ellipsis"
|
|
166
|
-
style="width: 180px"
|
|
182
|
+
class="n20-worker text-ellipsis approval-info-assignee"
|
|
167
183
|
:show-overflow-tooltip="true"
|
|
168
184
|
>
|
|
169
185
|
<span class="worker-icon n20-icon-user"></span>{{ row.assignee }}
|
|
@@ -517,6 +533,7 @@ export default {
|
|
|
517
533
|
let approvalData = []
|
|
518
534
|
data?.forEach((item) => {
|
|
519
535
|
let _item = {
|
|
536
|
+
approvalCost: item.approvalCost,
|
|
520
537
|
job: item.job || '',
|
|
521
538
|
isShow: item.isShow, //是否显示
|
|
522
539
|
endTime: item.endTime || '',
|
package/src/utils/theme.js
CHANGED
|
@@ -2,20 +2,26 @@ export function setTheme(val) {
|
|
|
2
2
|
if (!val) return
|
|
3
3
|
|
|
4
4
|
var links = document.querySelectorAll('link[rel="stylesheet"]')
|
|
5
|
-
var link, newLink
|
|
5
|
+
var link, newLink
|
|
6
6
|
links.forEach(function (el) {
|
|
7
7
|
if (el.href && el.href.indexOf('/theme/') !== -1) {
|
|
8
8
|
link = el
|
|
9
9
|
}
|
|
10
10
|
})
|
|
11
11
|
if (link) {
|
|
12
|
-
pEl = link.parentNode
|
|
13
|
-
nextEl = link.nextElementSibling
|
|
14
|
-
|
|
15
12
|
newLink = document.createElement('link')
|
|
16
13
|
newLink.href = link.href.replace(/\/[^/]+$/, '/' + val + '.css')
|
|
17
14
|
newLink.rel = 'stylesheet'
|
|
18
|
-
|
|
15
|
+
|
|
16
|
+
/*
|
|
17
|
+
* 将主题 <link> 追加到 <head> 末尾，确保它位于所有 <style> 标签之后。
|
|
18
|
+
*
|
|
19
|
+
* rootvar.scss 编译后会把 :root 变量（默认蓝色）打入 <style> 标签，
|
|
20
|
+
* 主题 CSS 也使用 :root 选择器（相同特异性）。
|
|
21
|
+
* CSS 层叠规则：同特异性时，DOM 中后出现的规则胜出。
|
|
22
|
+
* 因此将主题 <link> 放在最后，即可让它覆盖 <style> 标签中的默认值。
|
|
23
|
+
*/
|
|
24
|
+
document.head.appendChild(newLink)
|
|
19
25
|
|
|
20
26
|
newLink.addEventListener('load', function () {
|
|
21
27
|
link.setAttribute('disabled', 'disabled')
|