@lambo-design/pro-layout 1.0.0-beta.465 → 1.0.0-beta.467
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
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<Col class="font-padding" v-show="rightTopOptButtonList.includes('todo')">
|
|
13
13
|
<ProLayoutToolsQuickTodo></ProLayoutToolsQuickTodo>
|
|
14
14
|
</Col>
|
|
15
|
-
<Col class="
|
|
15
|
+
<Col class="font-padding" v-show="rightTopOptButtonList.includes('todoCenter')">
|
|
16
16
|
<ProLayoutToolsQuickTodoCenter></ProLayoutToolsQuickTodoCenter>
|
|
17
17
|
</Col>
|
|
18
18
|
<Col class="font-padding" v-show="shouldShowCustomSlot">
|
|
@@ -1,22 +1,26 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="pro-layout-tools-quick-todo">
|
|
3
|
-
<Dropdown
|
|
3
|
+
<Dropdown>
|
|
4
4
|
<Badge :count="todoCenterDatas.length" class-name="badge-count">
|
|
5
5
|
<Icon type="ios-list-box-outline" size="18" style="cursor: pointer"/>
|
|
6
6
|
</Badge>
|
|
7
7
|
<template #list>
|
|
8
8
|
<DropdownMenu slot="list" class="todo-dropdown-menu">
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
<!-- 滚动区域 -->
|
|
10
|
+
<div class="todo-list-scroll">
|
|
11
|
+
<DropdownItem v-for="(item, index) in displayedTodos" :key="index" class="dropdown-item" @click.native="getDetail(item)">
|
|
12
|
+
<div class="item-title" :title="item.taskTitle">
|
|
13
|
+
{{ item.taskTitle }}
|
|
14
|
+
</div>
|
|
15
|
+
<div class="item-time">
|
|
16
|
+
{{ formatTimestamp(item.taskInitTime,'YYYY-MM-DD HH:mm:ss') }}
|
|
17
|
+
</div>
|
|
18
|
+
</DropdownItem>
|
|
19
|
+
</div>
|
|
20
|
+
<!-- 固定的底部区域 -->
|
|
17
21
|
<div class="dropdown-footer" :class="[todoCenterDatas.length == 0 ? 'no-line' : '']">
|
|
18
|
-
<Button type="text" v-if="todoCenterDatas.length > 0" @click="getMore"
|
|
19
|
-
<div class="no-data" v-if="todoCenterDatas.length == 0"
|
|
22
|
+
<Button type="text" v-if="todoCenterDatas.length > 0" @click="getMore">{{ t('pro-layout.header.todo-more') }}</Button>
|
|
23
|
+
<div class="no-data" v-if="todoCenterDatas.length == 0">{{ t('pro-layout.header.todo-no-data') }}</div>
|
|
20
24
|
</div>
|
|
21
25
|
</DropdownMenu>
|
|
22
26
|
</template>
|
|
@@ -85,56 +89,87 @@ export default {
|
|
|
85
89
|
}
|
|
86
90
|
}
|
|
87
91
|
.todo-dropdown-menu {
|
|
88
|
-
max-height: 300px;
|
|
89
92
|
width: 300px;
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
flex: 1 0 auto;
|
|
105
|
-
width: 100%;
|
|
106
|
-
margin-right: auto;
|
|
107
|
-
white-space:nowrap;
|
|
108
|
-
overflow:hidden;
|
|
109
|
-
text-overflow: ellipsis;
|
|
93
|
+
display: flex;
|
|
94
|
+
flex-direction: column;
|
|
95
|
+
max-height: 300px;
|
|
96
|
+
padding: 0;
|
|
97
|
+
|
|
98
|
+
// 滚动区域
|
|
99
|
+
.todo-list-scroll {
|
|
100
|
+
flex: 1;
|
|
101
|
+
overflow-y: auto;
|
|
102
|
+
max-height: 260px; // 根据实际需要调整，留出底部footer的空间
|
|
103
|
+
|
|
104
|
+
&::-webkit-scrollbar {
|
|
105
|
+
width: 4px;
|
|
106
|
+
height: 0;
|
|
110
107
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
margin-top: 3px;
|
|
116
|
-
margin-left: auto;
|
|
117
|
-
color: #808695;
|
|
108
|
+
|
|
109
|
+
&::-webkit-scrollbar-thumb {
|
|
110
|
+
background-color: #c1c1c1;
|
|
111
|
+
border-radius: 2px;
|
|
118
112
|
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
113
|
+
|
|
114
|
+
.dropdown-item {
|
|
115
|
+
overflow: hidden;
|
|
116
|
+
padding: 8px;
|
|
117
|
+
display: flex;
|
|
118
|
+
flex-wrap: wrap;
|
|
119
|
+
align-items: flex-start;
|
|
120
|
+
cursor: pointer;
|
|
121
|
+
|
|
122
|
+
&:hover {
|
|
123
|
+
background-color: #f5f5f5;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.item-title {
|
|
127
|
+
font-family: "黑体", Arial, sans-serif;
|
|
128
|
+
margin-left: 5px;
|
|
129
|
+
flex: 1 0 auto;
|
|
130
|
+
width: 100%;
|
|
131
|
+
margin-right: auto;
|
|
132
|
+
white-space: nowrap;
|
|
133
|
+
overflow: hidden;
|
|
134
|
+
text-overflow: ellipsis;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.item-time {
|
|
138
|
+
font-family: "黑体", Arial, sans-serif;
|
|
139
|
+
font-weight: normal;
|
|
140
|
+
flex: 0 0 auto;
|
|
141
|
+
margin-top: 3px;
|
|
142
|
+
margin-left: auto;
|
|
143
|
+
color: #808695;
|
|
144
|
+
font-size: 12px;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.item-des {
|
|
148
|
+
flex: 1 0 80%;
|
|
149
|
+
height: auto;
|
|
150
|
+
margin: 3px 20px 0;
|
|
151
|
+
font-size: 12px;
|
|
152
|
+
color: #808695;
|
|
153
|
+
white-space: normal;
|
|
154
|
+
word-wrap: break-word;
|
|
155
|
+
}
|
|
127
156
|
}
|
|
128
157
|
}
|
|
129
|
-
|
|
158
|
+
|
|
159
|
+
// 固定的底部
|
|
160
|
+
.dropdown-footer {
|
|
161
|
+
flex-shrink: 0;
|
|
130
162
|
line-height: 24px;
|
|
131
|
-
border-top: 1px solid var(--layout-sider-line-color
|
|
163
|
+
border-top: 1px solid var(--layout-sider-line-color, @_layout-sider-line-color);
|
|
132
164
|
padding: 8px;
|
|
133
165
|
text-align: center;
|
|
134
|
-
|
|
135
|
-
|
|
166
|
+
background-color: #fff;
|
|
167
|
+
|
|
168
|
+
&.no-line {
|
|
169
|
+
border-top: 0;
|
|
136
170
|
}
|
|
137
|
-
|
|
171
|
+
|
|
172
|
+
.no-data {
|
|
138
173
|
text-align: center;
|
|
139
174
|
}
|
|
140
175
|
}
|