@lx-frontend/wrap-element-ui 1.0.2-beta.5 → 1.0.2-beta.6

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.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/src/components/EditableTable/bizHooks/useDragSort.ts +2 -2
  3. package/src/components/EditableTable/features/bizColorSelect.vue +1 -1
  4. package/src/components/EditableTable/features/bizTableHeaderPopover.vue +24 -24
  5. package/src/components/EditableTable/features/bizTableOperatePopover.vue +7 -7
  6. package/src/components/EditableTable/features/bizViewSettingDialog.vue +17 -17
  7. package/src/components/EditableTable/index.less +437 -440
  8. package/src/components/EditableTable/index.vue +7 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lx-frontend/wrap-element-ui",
3
- "version": "1.0.2-beta.5",
3
+ "version": "1.0.2-beta.6",
4
4
  "description": "wrap-element-ui",
5
5
  "author": "",
6
6
  "main": "src/components/index.ts",
package/src/components/EditableTable/bizHooks/useDragSort.ts CHANGED
@@ -46,7 +46,7 @@ export function useDragSort({ props, emit, viewSettingDragSortOptions, pageSize,
46
46
  handleDragMouseDown(e, +target.dataset.index);
47
47
  }
48
48
 
49
- if ([...target.classList].includes('view-setting-drag-target')) {
49
+ if ([...target.classList].includes('editable-table__view-setting-drag-target')) {
50
50
  dragType.value = 'view-setting';
51
51
  // 处理显示设置拖拽
52
52
  handleViewSettingDragMouseDown(e, +target.dataset.index);
@@ -208,7 +208,7 @@ export function useDragSort({ props, emit, viewSettingDragSortOptions, pageSize,
208
208
  }
209
209
 
210
210
  const handleViewSettingDragMouseDown = (event, index) => {
211
- const rowDoms = [...document.getElementsByClassName('view-setting-draggable-item')]
211
+ const rowDoms = [...document.getElementsByClassName('editable-table__view-setting-draggable-item')]
212
212
  .reduce((pre, item, index) => ({ ...pre, [index]: [item] }), {});
213
213
  draggingData.value.isDragging = true;
214
214
  draggingData.value.rowDoms = rowDoms;
package/src/components/EditableTable/features/bizColorSelect.vue CHANGED
@@ -4,7 +4,7 @@
4
4
  v-model="visible"
5
5
  placement="right"
6
6
  trigger="click"
7
- popper-class="color-popover"
7
+ popper-class="editable-table__color-popover"
8
8
  >
9
9
  <div class="color-list">
10
10
  <div
package/src/components/EditableTable/features/bizTableHeaderPopover.vue CHANGED
@@ -14,26 +14,26 @@
14
14
  <div :class="['editable-table__sort-icon', headActive && 'editable-table__sort-icon--active']" />
15
15
  </span>
16
16
  </template>
17
- <div class="sort-filter">
18
- <div class="sort-filter__column-title">
17
+ <div class="editable-table__sort-filter">
18
+ <div class="editable-table__sort-filter__column-title">
19
19
  {{ column.label }}
20
20
  </div>
21
21
  <div
22
22
  v-if="column.isColumnSortable"
23
- class="sort-filter__sort"
23
+ class="editable-table__sort-filter__sort"
24
24
  >
25
- <div class="sort-filter__sort-title">
25
+ <div class="editable-table__sort-filter__sort-title">
26
26
  排序
27
27
  </div>
28
- <div class="sort-filter__sort-btns">
28
+ <div class="editable-table__sort-filter__sort-btns">
29
29
  <el-button
30
- :class="['sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'ascending' && 'sort-filter__sort-btn--active']"
30
+ :class="['editable-table__sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'ascending' && 'editable-table__sort-filter__sort-btn--active']"
31
31
  @click="() => emit('update:sort', 'ascending')"
32
32
  >
33
33
  升序
34
34
  </el-button>
35
35
  <el-button
36
- :class="['sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'descending' && 'sort-filter__sort-btn--active']"
36
+ :class="['editable-table__sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'descending' && 'editable-table__sort-filter__sort-btn--active']"
37
37
  @click="() => emit('update:sort', 'descending')"
38
38
  >
39
39
  降序
@@ -42,13 +42,13 @@
42
42
  </div>
43
43
  <div
44
44
  v-if="column.search && !Array.isArray(column.search)"
45
- class="sort-filter__search"
45
+ class="editable-table__sort-filter__search"
46
46
  >
47
- <div class="sort-filter__search-title">
47
+ <div class="editable-table__sort-filter__search-title">
48
48
  搜索
49
49
  </div>
50
50
  <el-input
51
- class="sort-filter__search-input"
51
+ class="editable-table__sort-filter__search-input"
52
52
  placeholder="请输入内容"
53
53
  :value="tempSearchValue[column.prop]"
54
54
  @input="val => emit('update:tempSearchValue', column.prop, val)"
@@ -57,18 +57,18 @@
57
57
 
58
58
  <div
59
59
  v-if="column.search && Array.isArray(column.search)"
60
- class="sort-filter__search"
60
+ class="editable-table__sort-filter__search"
61
61
  style="display: flex;flex-direction: column;gap: 12px;"
62
62
  >
63
63
  <div
64
64
  v-for="item in column.search"
65
65
  :key="item.prop"
66
66
  >
67
- <div class="sort-filter__search-title">
67
+ <div class="editable-table__sort-filter__search-title">
68
68
  {{ item.label }}
69
69
  </div>
70
70
  <el-input
71
- class="sort-filter__search-input"
71
+ class="editable-table__sort-filter__search-input"
72
72
  placeholder="请输入内容"
73
73
  :value="tempSearchValue[item.prop]"
74
74
  @input="val => emit('update:tempSearchValue', item.prop, val)"
@@ -78,14 +78,14 @@
78
78
 
79
79
  <div
80
80
  v-if="column.filters && ((Array.isArray(column.filters) ? column.filters : column.filters.options).length > 0)"
81
- class="sort-filter__filter"
81
+ class="editable-table__sort-filter__filter"
82
82
  >
83
- <div class="sort-filter__filter-title">
83
+ <div class="editable-table__sort-filter__filter-title">
84
84
  筛选
85
85
  </div>
86
86
  <el-checkbox-group
87
87
  v-if="column.filters && (Array.isArray(column.filters) || column.filters.type === 'checkbox')"
88
- class="sort-filter__filter-checkbox-group"
88
+ class="editable-table__sort-filter__filter-checkbox-group"
89
89
  :value="tempFilteredValue[column.prop]"
90
90
  @input="val => emit('update:tempFilteredValue', column.prop, val)"
91
91
  >
@@ -93,7 +93,7 @@
93
93
  v-for="item in (Array.isArray(column.filters) ? column.filters : column.filters.options)"
94
94
  :key="item.value"
95
95
  :label="item.value"
96
- class="sort-filter__filter-checkbox"
96
+ class="editable-table__sort-filter__filter-checkbox"
97
97
  >
98
98
  <slot
99
99
  name="filter-item"
@@ -126,19 +126,19 @@
126
126
  </div>
127
127
  <div
128
128
  v-if="column.summary"
129
- class="sort-filter__filter"
129
+ class="editable-table__sort-filter__filter"
130
130
  >
131
- <div class="sort-filter__filter-title">
131
+ <div class="editable-table__sort-filter__filter-title">
132
132
  统计
133
133
  </div>
134
134
  <el-checkbox-group
135
- class="sort-filter__filter-checkbox-group"
135
+ class="editable-table__sort-filter__filter-checkbox-group"
136
136
  :value="tempSummaryList"
137
137
  @input="val => emit('update:tempSummaryList', val)"
138
138
  >
139
139
  <el-checkbox
140
140
  :label="column.prop"
141
- class="sort-filter__filter-checkbox"
141
+ class="editable-table__sort-filter__filter-checkbox"
142
142
  >
143
143
  <slot
144
144
  name="summay-item"
@@ -149,15 +149,15 @@
149
149
  </el-checkbox>
150
150
  </el-checkbox-group>
151
151
  </div>
152
- <div class="sort-filter__footer">
152
+ <div class="editable-table__sort-filter__footer">
153
153
  <el-button
154
- class="sort-filter__reset-btn"
154
+ class="editable-table__sort-filter__reset-btn"
155
155
  @click="() => emit('reset')"
156
156
  >
157
157
  重置
158
158
  </el-button>
159
159
  <el-button
160
- class="sort-filter__confirm-btn"
160
+ class="editable-table__sort-filter__confirm-btn"
161
161
  type="primary"
162
162
  @click="() => emit('confirm')"
163
163
  >
package/src/components/EditableTable/features/bizTableOperatePopover.vue CHANGED
@@ -3,34 +3,34 @@
3
3
  ref="operationPopoverRef"
4
4
  placement="bottom"
5
5
  trigger="click"
6
- popper-class="operation-popover"
6
+ popper-class="editable-table__operation-popover"
7
7
  >
8
8
  <div
9
9
  slot="reference"
10
- class="operation-popover__operation-reference btn-pointer"
10
+ class="editable-table__operation-popover__operation-reference btn-pointer"
11
11
  >
12
- <el-button :class="['operation-popover__operation-btn', hoveringCellInfo.rowIndex === scope.$index && 'operation-popover__operation-btn--active']">
12
+ <el-button :class="['editable-table__operation-popover__operation-btn', hoveringCellInfo.rowIndex === scope.$index && 'editable-table__operation-popover__operation-btn--active']">
13
13
  操作
14
14
  </el-button>
15
15
  </div>
16
- <div class="operation-popover__operation">
16
+ <div class="editable-table__operation-popover__operation">
17
17
  <div
18
18
  v-if="defaultOperations.includes('delete')"
19
- class="operation-popover__operation-item btn-pointer"
19
+ class="editable-table__operation-popover__operation-item btn-pointer"
20
20
  @click="() => emit('delete')"
21
21
  >
22
22
  删除
23
23
  </div>
24
24
  <div
25
25
  v-if="defaultOperations.includes('edit')"
26
- class="operation-popover__operation-item btn-pointer"
26
+ class="editable-table__operation-popover__operation-item btn-pointer"
27
27
  @click="() => emit('edit')"
28
28
  >
29
29
  编辑
30
30
  </div>
31
31
  <div
32
32
  v-if="defaultOperations.includes('top')"
33
- class="operation-popover__operation-item btn-pointer"
33
+ class="editable-table__operation-popover__operation-item btn-pointer"
34
34
  @click="() => emit('rowPinToTop')"
35
35
  >
36
36
  置顶
package/src/components/EditableTable/features/bizViewSettingDialog.vue CHANGED
@@ -6,11 +6,11 @@
6
6
  top="12vh"
7
7
  :close-on-click-modal="false"
8
8
  append-to-body
9
- custom-class="view-setting__dialog"
9
+ custom-class="editable-table__view-setting__dialog"
10
10
  >
11
- <div class="view-setting__content">
12
- <div class="view-setting__content-left">
13
- <div class="view-setting__checkbox-wrapper">
11
+ <div class="editable-table__view-setting__content">
12
+ <div class="editable-table__view-setting__content-left">
13
+ <div class="editable-table__view-setting__checkbox-wrapper">
14
14
  <el-checkbox-group v-model="columnsToBeShown">
15
15
  <el-checkbox
16
16
  v-for="item in props.columnConfig"
@@ -18,51 +18,51 @@
18
18
  :label="item.prop"
19
19
  :disabled="item.isAlwaysShow"
20
20
  >
21
- <div class="view-setting__content-left-item">
21
+ <div class="editable-table__view-setting__content-left-item">
22
22
  {{ item.label }}
23
23
  </div>
24
24
  </el-checkbox>
25
25
  </el-checkbox-group>
26
26
  </div>
27
27
  </div>
28
- <div class="view-setting__content-right">
29
- <div class="view-setting__content-right-title">
28
+ <div class="editable-table__view-setting__content-right">
29
+ <div class="editable-table__view-setting__content-right-title">
30
30
  已选择
31
- <div class="view-setting__selected-count">
31
+ <div class="editable-table__view-setting__selected-count">
32
32
  {{ columnsToBeShown.length }}
33
33
  </div>
34
34
  </div>
35
- <div class="view-setting__content-right-frize">
35
+ <div class="editable-table__view-setting__content-right-frize">
36
36
  冻结前
37
37
  <el-input
38
- class="view-setting__content-right-input"
38
+ class="editable-table__view-setting__content-right-input"
39
39
  :value="tempLeftFixedColumnCount"
40
40
  @input="handleInputTempLeftFixedColumnCount"
41
41
  />
42
42
  列
43
43
  </div>
44
- <div class="view-setting__content-right-selected">
44
+ <div class="editable-table__view-setting__content-right-selected">
45
45
  <div
46
46
  v-for="(item, index) in viewSettingDragSortOptions"
47
47
  :key="item.prop"
48
- class="view-setting__selected-item view-setting-draggable-item"
48
+ class="editable-table__view-setting__selected-item editable-table__view-setting-draggable-item"
49
49
  >
50
- <div class="view-setting__selected-item-left">
50
+ <div class="editable-table__view-setting__selected-item-left">
51
51
  <div
52
- class="view-setting-drag-target view-setting__icon-wrapper"
52
+ class="editable-table__view-setting-drag-target editable-table__view-setting__icon-wrapper"
53
53
  :data-index="index"
54
54
  >
55
55
  <div
56
- class="view-setting-drag-target editable-table-drag-icon"
56
+ class="editable-table__view-setting-drag-target editable-table-drag-icon"
57
57
  :data-index="index"
58
58
  />
59
59
  </div>
60
- <div class="view-setting__selected-item-name">
60
+ <div class="editable-table__view-setting__selected-item-name">
61
61
  {{ item.label }}
62
62
  </div>
63
63
  </div>
64
64
  <div
65
- :class="['view-setting__selected-item-close', item.isAlwaysShow ? 'view-setting__selected-item-close--disabled' : '']"
65
+ :class="['editable-table__view-setting__selected-item-close', item.isAlwaysShow ? 'editable-table__view-setting__selected-item-close--disabled' : '']"
66
66
  @click="handleColumnClose(item)"
67
67
  >
68
68
  <i class="el-icon-close" />
package/src/components/EditableTable/index.less CHANGED
@@ -139,534 +139,566 @@
139
139
  }
140
140
  }
141
141
 
142
- &__sort-filter {
143
- padding: 0 !important;
144
- }
145
-
146
- &__pin-top {
147
- width: 24px;
148
- height: 24px;
149
- color: white;
150
- background-color: #969ca4;
151
- }
142
+ &__view-setting {
143
+ &__btn-wrapper {
144
+ display: flex;
145
+ justify-content: flex-end;
146
+ }
152
147
 
153
- & .el-table td,
154
- .el-table th.is-leaf {
155
- border-bottom: 1px solid #dfe3ec;
156
- }
148
+ &__btn {
149
+ display: flex;
150
+ justify-content: flex-end;
151
+ align-items: center;
152
+ font-weight: 400;
153
+ font-size: 14px;
154
+ color: @--theme-blue--;
155
+ margin-bottom: 17px;
156
+ margin-right: 20px;
157
+ }
157
158
 
158
- & .el-table {
159
- &__expanded-cell {
160
- background-color: #fafafa;
159
+ &__btn-text {
160
+ margin-left: 4px;
161
161
  }
162
- }
163
162
 
164
- & .el-table tr td {
165
- min-height: 45px;
166
- border-top: none;
167
- border-left: none;
168
- border-right: none;
169
- }
163
+ &__dialog {
164
+ padding: 0px;
170
165
 
171
- & thead tr th {
172
- background-color: #f3f4f8 !important;
173
- border-right: none !important;
166
+ .el-dialog__body {
167
+ max-height: 70vh;
168
+ }
174
169
 
175
- & .cell {
176
- color: #13161b;
170
+ .el-dialog__body {
171
+ padding: 0;
172
+ }
173
+
174
+ & .el-button--primary {
175
+ background-color: @--theme-blue-- !important;
176
+ border-color: @--theme-blue-- !important;
177
+ }
178
+
179
+ & .el-checkbox.is-checked:not(.is-disabled) {
180
+ .el-checkbox__input .el-checkbox__inner {
181
+ background-color: @--theme-blue-- !important;
182
+ border-color: @--theme-blue-- !important;
183
+ }
184
+
185
+ .el-checkbox__label {
186
+ color: @--theme-blue-- !important;
187
+ }
188
+ }
189
+
190
+ & .el-button {
191
+ border-radius: 2px;
192
+ }
193
+
194
+ .el-dialog__header {
195
+ display: flex;
196
+ justify-content: space-between;
197
+ align-items: center;
198
+ font-size: 14px;
199
+ background-color: #eeeeee;
200
+ height: 36px;
201
+ line-height: 36px;
202
+ padding: 0 20px;
203
+ }
204
+
205
+ .el-dialog__headerbtn {
206
+ position: inherit;
207
+ }
208
+
209
+ .el-dialog__title {
210
+ font-size: 14px;
211
+ line-height: 20px;
212
+ color: #333333;
213
+ }
214
+
215
+ .el-dialog__footer {
216
+ background-color: #eeeeee;
217
+ height: 42px;
218
+ line-height: 42px;
219
+ padding: 0 20px;
220
+
221
+ & .el-button {
222
+ height: 24px;
223
+ // line-height: 24px;
224
+ font-size: 12px;
225
+ padding: 5px 12px;
226
+ }
227
+ }
177
228
  }
178
229
 
179
- &:not(:last-child) .cell {
180
- border-right: 2px #e4e8ef solid;
230
+ &__content {
231
+ display: flex;
232
+ min-height: 500px;
181
233
  }
182
- }
183
234
 
184
- .el-table-filter,
185
- th.el-table__cell .el-table__column-filter-trigger,
186
- th.is-sortable .caret-wrapper {
187
- display: none;
188
- }
235
+ &__content-left {
236
+ min-width: 417px;
237
+ width: 417px;
189
238
 
190
- .el-table__body tr.current-row > td,
191
- .el-table__body tr.hover-row > td {
192
- background-color: #fafafa;
193
- }
239
+ display: flex;
240
+ flex-direction: column;
241
+ justify-content: flex-start;
242
+ align-items: flex-start;
243
+ }
194
244
 
195
- table tbody tr td {
196
- & .el-date-editor.el-input {
197
- width: 100%;
245
+ &__content-left-item {
246
+ width: 130px;
247
+ margin-bottom: 15px;
198
248
  }
199
249
 
200
- & .cell {
201
- font-size: 12px;
250
+ &__content-right {
251
+ border-left: 1px solid #d9d9d9;
252
+ display: flex;
253
+ flex-direction: column;
254
+ justify-content: flex-start;
255
+ align-items: flex-start;
202
256
  }
203
- }
204
257
 
205
- .el-table__fixed-body-wrapper {
206
- background: #fff;
207
- }
258
+ &__content-right-title,
259
+ &__content-left-title {
260
+ border-bottom: 1px solid #d9d9d9;
261
+ width: 100%;
262
+ height: 46px;
263
+ display: flex;
264
+ justify-content: flex-start;
265
+ align-items: center;
266
+ padding-left: 20px;
267
+ }
208
268
 
209
- .el-checkbox__input.is-checked .el-checkbox__inner,
210
- .el-checkbox__input.is-indeterminate .el-checkbox__inner {
211
- background: @--theme-blue--;
212
- border-color: @--theme-blue--;
213
- }
214
- }
269
+ &__selected-count {
270
+ margin-left: 20px;
271
+ }
215
272
 
216
- .view-setting {
217
- &__btn-wrapper {
218
- display: flex;
219
- justify-content: flex-end;
220
- }
273
+ &__checkbox-wrapper {
274
+ padding-left: 37px;
275
+ padding-top: 24px;
276
+ }
221
277
 
222
- &__btn {
223
- display: flex;
224
- justify-content: flex-end;
225
- align-items: center;
226
- font-weight: 400;
227
- font-size: 14px;
228
- color: @--theme-blue--;
229
- margin-bottom: 17px;
230
- margin-right: 20px;
231
- }
278
+ &__content-right {
279
+ flex-grow: 1;
280
+ }
232
281
 
233
- &__btn-text {
234
- margin-left: 4px;
235
- }
282
+ &__content-right-frize {
283
+ width: 100%;
284
+ display: flex;
285
+ justify-content: flex-start;
286
+ align-items: center;
287
+ height: 50px;
288
+ border-bottom: 1px solid #d9d9d9;
289
+ padding-left: 20px;
290
+ }
236
291
 
237
- &__dialog {
238
- padding: 0px;
292
+ &__content-right-input.el-input {
293
+ width: 140px;
294
+ margin: 0 4px;
239
295
 
240
- .el-dialog__body {
241
- max-height: 70vh;
296
+ .el-input__inner {
297
+ height: 28px;
298
+ line-height: 28px;
299
+ }
242
300
  }
243
301
 
244
- .el-dialog__body {
245
- padding: 0;
302
+ &__content-right-selected {
303
+ display: flex;
304
+ justify-content: flex-start;
305
+ flex-direction: column;
306
+ align-items: flex-start;
307
+ width: 100%;
308
+ flex-grow: 1;
309
+ padding-left: 18px;
310
+ padding-top: 17px;
311
+ padding-right: 23px;
246
312
  }
247
313
 
248
- & .el-button--primary {
249
- background-color: @--theme-blue-- !important;
250
- border-color: @--theme-blue-- !important;
314
+ &__selected-item-left {
315
+ display: flex;
316
+ justify-content: flex-start;
317
+ align-items: center;
251
318
  }
252
319
 
253
- & .el-checkbox.is-checked:not(.is-disabled) {
254
- .el-checkbox__input .el-checkbox__inner {
255
- background-color: @--theme-blue-- !important;
256
- border-color: @--theme-blue-- !important;
257
- }
258
- .el-checkbox__label {
259
- color: @--theme-blue-- !important;
260
- }
320
+ &__icon-wrapper {
321
+ width: 14px;
322
+ height: 14px;
323
+ line-height: 14px;
324
+ padding: 2px 4px;
325
+ margin-right: 10px;
326
+ cursor: grab;
327
+ display: flex;
328
+ flex-direction: column;
329
+ justify-content: center;
330
+ align-items: center;
261
331
  }
262
332
 
263
- & .el-button {
264
- border-radius: 2px;
333
+ &__selected-item {
334
+ display: flex;
335
+ justify-content: space-between;
336
+ align-items: center;
337
+ line-height: 30px;
338
+ height: 30px;
339
+ width: 100%;
265
340
  }
266
- }
267
341
 
268
- &__content {
269
- display: flex;
270
- min-height: 500px;
342
+ &__selected-item-close {
343
+ cursor: pointer;
344
+
345
+ &--disabled {
346
+ cursor: not-allowed;
347
+ color: #989ea9;
348
+ }
349
+ }
271
350
  }
272
351
 
273
- &__content-left {
274
- min-width: 417px;
275
- width: 417px;
352
+ &__color-popover {
353
+ min-width: 102px !important;
354
+ width: 102px !important;
355
+ padding: 0 !important;
276
356
 
277
- display: flex;
278
- flex-direction: column;
279
- justify-content: flex-start;
280
- align-items: flex-start;
281
- }
357
+ & .popper__arrow::after {
358
+ left: 0 !important;
359
+ }
282
360
 
283
- &__content-left-item {
284
- width: 130px;
285
- margin-bottom: 15px;
286
- }
361
+ .color-list {
362
+ color: #fff;
363
+ width: 102px;
364
+ border-radius: 5px;
365
+ overflow: hidden;
287
366
 
288
- &__content-right {
289
- border-left: 1px solid #d9d9d9;
290
- display: flex;
291
- flex-direction: column;
292
- justify-content: flex-start;
293
- align-items: flex-start;
367
+ &__item {
368
+ display: inline-block;
369
+ width: 100%;
370
+ height: 27px;
371
+ line-height: 27px;
372
+ padding-left: 6px;
373
+ }
374
+ }
294
375
  }
295
376
 
296
- &__content-right-title,
297
- &__content-left-title {
298
- border-bottom: 1px solid #d9d9d9;
299
- width: 100%;
300
- height: 46px;
301
- display: flex;
302
- justify-content: flex-start;
303
- align-items: center;
304
- padding-left: 20px;
305
- }
377
+ &__sort-filter {
378
+ padding: 0 !important;
379
+ width: 258px;
306
380
 
307
- &__selected-count {
308
- margin-left: 20px;
309
- }
381
+ &__column-title {
382
+ font-size: 14px;
383
+ font-weight: 600;
384
+ height: 40px;
385
+ line-height: 40px;
386
+ text-align: center;
387
+ border-bottom: 1px solid #d6dbe3;
388
+ }
310
389
 
311
- &__checkbox-wrapper {
312
- padding-left: 37px;
313
- padding-top: 24px;
314
- }
390
+ &__filter,
391
+ &__sort,
392
+ &__search {
393
+ padding: 14px;
394
+ }
315
395
 
316
- &__content-right {
317
- flex-grow: 1;
318
- }
396
+ &__filter {
397
+ padding-top: 0;
398
+ }
319
399
 
320
- &__content-right-frize {
321
- width: 100%;
322
- display: flex;
323
- justify-content: flex-start;
324
- align-items: center;
325
- height: 50px;
326
- border-bottom: 1px solid #d9d9d9;
327
- padding-left: 20px;
328
- }
400
+ &__filter-title,
401
+ &__sort-title,
402
+ &__search-title {
403
+ font-weight: 600;
404
+ font-size: 14px;
405
+ color: #1f1f1f;
406
+ margin-bottom: 10px;
407
+ }
329
408
 
330
- &__content-right-input.el-input {
331
- width: 140px;
332
- margin: 0 4px;
409
+ &__search-input {
410
+ & .el-input__inner {
411
+ height: 32px;
412
+ }
413
+ }
333
414
 
334
- .el-input__inner {
335
- height: 28px;
336
- line-height: 28px;
415
+ &__filter-title {
416
+ border-top: 1px solid #f3f3f3;
417
+ padding-top: 14px;
337
418
  }
338
- }
339
419
 
340
- &__content-right-selected {
341
- display: flex;
342
- justify-content: flex-start;
343
- flex-direction: column;
344
- align-items: flex-start;
345
- width: 100%;
346
- flex-grow: 1;
347
- padding-left: 18px;
348
- padding-top: 17px;
349
- padding-right: 23px;
350
- }
420
+ &__sort-btns {
421
+ display: flex;
422
+ justify-content: space-between;
423
+ align-items: center;
351
424
 
352
- &__selected-item-left {
353
- display: flex;
354
- justify-content: flex-start;
355
- align-items: center;
356
- }
425
+ & .el-button {
426
+ border: none;
427
+ }
428
+ }
357
429
 
358
- &__icon-wrapper {
359
- width: 14px;
360
- height: 14px;
361
- line-height: 14px;
362
- padding: 2px 4px;
363
- margin-right: 10px;
364
- cursor: grab;
365
- display: flex;
366
- flex-direction: column;
367
- justify-content: center;
368
- align-items: center;
369
- }
430
+ &__sort-btn.el-button {
431
+ width: 112px;
432
+ height: 28px;
433
+ padding: 4px 42px;
434
+ display: inline-block;
435
+ background-color: #f4f4f4;
436
+ color: #4a4a4a;
370
437
 
371
- &__selected-item {
372
- display: flex;
373
- justify-content: space-between;
374
- align-items: center;
375
- line-height: 30px;
376
- height: 30px;
377
- width: 100%;
378
- }
438
+ &:hover {
439
+ background-color: #fafafa;
440
+ }
379
441
 
380
- &__selected-item-close {
381
- cursor: pointer;
382
- &--disabled {
383
- cursor: not-allowed;
384
- color: #989ea9;
442
+ &--active {
443
+ color: @--theme-blue--;
444
+ border-color: #eef3ff;
445
+ background: #f4f7fe;
446
+
447
+ &:hover {
448
+ background-color: #f4f7fe;
449
+ }
450
+ }
385
451
  }
386
- }
387
- }
388
452
 
389
- .color-popover {
390
- min-width: 102px !important;
391
- width: 102px !important;
392
- padding: 0 !important;
453
+ &__filter-checkbox-group {
454
+ display: flex;
455
+ flex-direction: column;
456
+ justify-content: flex-start;
457
+ align-items: flex-start;
458
+ }
393
459
 
394
- & .popper__arrow::after {
395
- left: 0 !important;
396
- }
397
- }
460
+ &__filter-checkbox {
461
+ margin-top: 10px;
462
+ font-size: 14px;
398
463
 
399
- .color-list {
400
- color: #fff;
401
- width: 102px;
402
- border-radius: 5px;
403
- overflow: hidden;
404
- &__item {
405
- display: inline-block;
406
- width: 100%;
407
- height: 27px;
408
- line-height: 27px;
409
- padding-left: 6px;
410
- }
411
- }
464
+ &:first-child {
465
+ margin-top: 0;
466
+ }
467
+ }
412
468
 
413
- .sort-filter {
414
- width: 258px;
415
- padding: 0;
469
+ &__footer {
470
+ display: flex;
471
+ height: 47px;
472
+ border-top: 1px solid #d6dbe3;
473
+ justify-content: flex-end;
474
+ align-items: center;
475
+ padding: 0 15px;
476
+ }
477
+
478
+ &__reset-btn,
479
+ &__confirm-btn {
480
+ &.el-button {
481
+ width: 50px;
482
+ height: 28px;
483
+ margin-left: 10px;
484
+ display: flex;
485
+ justify-content: center;
486
+ align-items: center;
487
+ border-radius: 2px;
488
+ font-size: 14px;
489
+ font-weight: 400;
490
+ }
491
+ }
416
492
 
417
- &__column-title {
418
- font-size: 14px;
419
- font-weight: 600;
420
- height: 40px;
421
- line-height: 40px;
422
- text-align: center;
423
- border-bottom: 1px solid #d6dbe3;
424
- }
493
+ &__confirm-btn.el-button {
494
+ background-color: @--theme-blue--;
495
+ border-color: @--theme-blue--;
496
+ }
425
497
 
426
- &__filter,
427
- &__sort,
428
- &__search {
429
- padding: 14px;
498
+ .el-checkbox__input.is-checked .el-checkbox__inner,
499
+ .el-radio__input.is-checked .el-radio__inner {
500
+ background: @--theme-blue--;
501
+ border-color: @--theme-blue--;
502
+ }
430
503
  }
431
504
 
432
- &__filter {
433
- padding-top: 0;
505
+ &__pin-top {
506
+ width: 24px;
507
+ height: 24px;
508
+ color: white;
509
+ background-color: #969ca4;
434
510
  }
435
511
 
436
- &__filter-title,
437
- &__sort-title,
438
- &__search-title {
439
- font-weight: 600;
440
- font-size: 14px;
441
- color: #1f1f1f;
442
- margin-bottom: 10px;
512
+ & .el-table td,
513
+ .el-table th.is-leaf {
514
+ border-bottom: 1px solid #dfe3ec;
443
515
  }
444
516
 
445
- &__search-input {
446
- & .el-input__inner {
447
- height: 32px;
517
+ & .el-table {
518
+ &__expanded-cell {
519
+ background-color: #fafafa;
448
520
  }
449
521
  }
450
522
 
451
- &__filter-title {
452
- border-top: 1px solid #f3f3f3;
453
- padding-top: 14px;
523
+ & .el-table tr td {
524
+ min-height: 45px;
525
+ border-top: none;
526
+ border-left: none;
527
+ border-right: none;
454
528
  }
455
529
 
456
- &__sort-btns {
457
- display: flex;
458
- justify-content: space-between;
459
- align-items: center;
530
+ & thead tr th {
531
+ background-color: #f3f4f8 !important;
532
+ border-right: none !important;
460
533
 
461
- & .el-button {
462
- border: none;
534
+ & .cell {
535
+ color: #13161b;
463
536
  }
464
- }
465
-
466
- &__sort-btn.el-button {
467
- width: 112px;
468
- height: 28px;
469
- padding: 4px 42px;
470
- display: inline-block;
471
- background-color: #f4f4f4;
472
- color: #4a4a4a;
473
537
 
474
- &:hover {
475
- background-color: #fafafa;
538
+ &:not(:last-child) .cell {
539
+ border-right: 2px #e4e8ef solid;
476
540
  }
541
+ }
477
542
 
478
- &--active {
479
- color: @--theme-blue--;
480
- border-color: #eef3ff;
481
- background: #f4f7fe;
482
-
483
- &:hover {
484
- background-color: #f4f7fe;
485
- }
486
- }
543
+ .el-table-filter,
544
+ th.el-table__cell .el-table__column-filter-trigger,
545
+ th.is-sortable .caret-wrapper {
546
+ display: none;
487
547
  }
488
548
 
489
- &__filter-checkbox-group {
490
- display: flex;
491
- flex-direction: column;
492
- justify-content: flex-start;
493
- align-items: flex-start;
549
+ .el-table__body tr.current-row>td,
550
+ .el-table__body tr.hover-row>td {
551
+ background-color: #fafafa;
494
552
  }
495
553
 
496
- &__filter-checkbox {
497
- margin-top: 10px;
498
- font-size: 14px;
554
+ table tbody tr td {
555
+ & .el-date-editor.el-input {
556
+ width: 100%;
557
+ }
499
558
 
500
- &:first-child {
501
- margin-top: 0;
559
+ & .cell {
560
+ font-size: 12px;
502
561
  }
503
562
  }
504
563
 
505
- &__footer {
506
- display: flex;
507
- height: 47px;
508
- border-top: 1px solid #d6dbe3;
509
- justify-content: flex-end;
510
- align-items: center;
511
- padding: 0 15px;
564
+ & table th {
565
+ font-size: 12px;
566
+ font-weight: bold;
512
567
  }
513
568
 
514
- &__reset-btn,
515
- &__confirm-btn {
516
- &.el-button {
517
- width: 50px;
518
- height: 28px;
519
- margin-left: 10px;
520
- display: flex;
521
- justify-content: center;
522
- align-items: center;
523
- border-radius: 2px;
524
- font-size: 14px;
525
- font-weight: 400;
526
- }
569
+ & table td {
570
+ font-size: 12px;
571
+ color: #13161b;
527
572
  }
528
573
 
529
- &__confirm-btn.el-button {
530
- background-color: @--theme-blue--;
531
- border-color: @--theme-blue--;
574
+ .el-table th>.cell {
575
+ color: #5b6984
576
+ }
577
+
578
+ .el-table__fixed-body-wrapper {
579
+ background: #fff;
532
580
  }
533
581
 
534
582
  .el-checkbox__input.is-checked .el-checkbox__inner,
535
- .el-radio__input.is-checked .el-radio__inner {
583
+ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
536
584
  background: @--theme-blue--;
537
585
  border-color: @--theme-blue--;
538
586
  }
539
- }
540
-
541
- .btn-pointer {
542
- cursor: pointer;
543
- }
544
587
 
545
- .operation-popover {
546
- min-width: 120px;
547
- padding: 0;
588
+ .no-inner-cell-border {
589
+ & .cell {
590
+ border: none !important;
591
+ }
592
+ }
548
593
 
549
- &__operation {
550
- display: flex;
551
- flex-direction: column;
552
- justify-content: space-between;
553
- align-items: center;
594
+ .custom-row-classname-pinned {
595
+ & td:last-child {
596
+ background-image: url("./pin-top.png");
597
+ background-repeat: no-repeat;
598
+ background-size: 24px 24px;
599
+ background-position: right 0 top 0;
600
+ }
554
601
  }
555
602
 
556
- &__operation-reference {
557
- display: inline-block;
603
+ &__operation-popover {
604
+ min-width: 120px;
605
+ padding: 0;
558
606
 
559
- &--active {
560
- color: @--theme-blue--;
607
+ &__operation {
608
+ display: flex;
609
+ flex-direction: column;
610
+ justify-content: space-between;
611
+ align-items: center;
561
612
  }
562
613
 
563
- .el-button {
564
- background: transparent;
565
- border: none;
566
- padding: 0;
567
- font-weight: 400;
568
- color: #13161b;
569
- font-size: 14px;
614
+ &__operation-reference {
615
+ display: inline-block;
570
616
 
571
- &:focus {
617
+ &--active {
572
618
  color: @--theme-blue--;
573
619
  }
574
- }
575
- }
576
-
577
- &__operation-item {
578
- height: 40px;
579
- line-height: 40px;
580
- width: 100%;
581
- text-align: center;
582
- color: #1f1f1f;
583
- cursor: pointer;
584
620
 
585
- &:hover {
586
- background: #f4f7fe;
621
+ .el-button {
622
+ background: transparent;
623
+ border: none;
624
+ padding: 0;
625
+ font-weight: 400;
626
+ color: #13161b;
627
+ font-size: 14px;
628
+
629
+ &:focus {
630
+ color: @--theme-blue--;
631
+ }
632
+ }
587
633
  }
588
- }
589
634
 
590
- &__save-cancel {
591
- display: flex;
592
- justify-content: flex-start;
593
- align-items: center;
594
- color: @--theme-blue--;
595
- }
635
+ &__operation-item {
636
+ height: 40px;
637
+ line-height: 40px;
638
+ width: 100%;
639
+ text-align: center;
640
+ color: #1f1f1f;
641
+ cursor: pointer;
596
642
 
597
- &__btn {
598
- cursor: pointer;
599
- &:first-child {
600
- margin-right: 15px;
643
+ &:hover {
644
+ background: #f4f7fe;
645
+ }
601
646
  }
602
- }
603
647
 
604
- &__operation-btn {
605
- &--active {
606
- color: @--theme-blue-- !important;
648
+ &__save-cancel {
649
+ display: flex;
650
+ justify-content: flex-start;
651
+ align-items: center;
652
+ color: @--theme-blue--;
607
653
  }
608
- }
609
- }
610
-
611
- .pagination-wrap {
612
- display: flex;
613
- justify-content: space-between;
614
- align-items: center;
615
- margin-top: 12px;
616
-
617
- & .el-pagination.is-background {
618
- padding: 0;
619
654
 
620
- .el-pager li.number {
621
- background-color: #fff;
622
- border: 1px solid #d6dbe3;
623
- font-weight: 400;
624
- font-size: 14px;
655
+ &__btn {
656
+ cursor: pointer;
625
657
 
626
- &.active {
627
- background-color: @--theme-blue--;
628
- color: #fff;
658
+ &:first-child {
659
+ margin-right: 15px;
629
660
  }
630
661
  }
631
662
 
632
- & .btn-prev,
633
- & .btn-next,
634
- & .el-icon-more {
635
- background-color: #fff !important;
663
+ &__operation-btn {
664
+ &--active {
665
+ color: @--theme-blue-- !important;
666
+ }
636
667
  }
637
668
  }
638
- }
639
669
 
640
- .custom-row-classname-pinned {
641
- & td:last-child {
642
- background-image: url("./pin-top.png");
643
- background-repeat: no-repeat;
644
- background-size: 24px 24px;
645
- background-position: right 0 top 0;
646
- }
647
- }
670
+ .pagination-wrap {
671
+ display: flex;
672
+ justify-content: space-between;
673
+ align-items: center;
674
+ margin-top: 12px;
648
675
 
676
+ & .el-pagination.is-background {
677
+ padding: 0;
649
678
 
679
+ .el-pager li.number {
680
+ background-color: #fff;
681
+ border: 1px solid #d6dbe3;
682
+ font-weight: 400;
683
+ font-size: 14px;
650
684
 
651
- .editable-table {
652
- & table th {
653
- font-size: 12px;
654
- font-weight: bold;
655
- }
685
+ &.active {
686
+ background-color: @--theme-blue--;
687
+ color: #fff;
688
+ }
689
+ }
656
690
 
657
- & table td {
658
- font-size: 12px;
659
- color: #13161b;
660
- }
661
- .el-table th > .cell {
662
- color: #5b6984
691
+ & .btn-prev,
692
+ & .btn-next,
693
+ & .el-icon-more {
694
+ background-color: #fff !important;
695
+ }
696
+ }
663
697
  }
664
698
  }
665
699
 
666
- .no-inner-cell-border {
667
- & .cell {
668
- border: none !important;
669
- }
700
+ .btn-pointer {
701
+ cursor: pointer;
670
702
  }
671
703
 
672
704
  .editable-table-drag-icon {
@@ -697,39 +729,4 @@
697
729
  &::before {
698
730
  bottom: -4px;
699
731
  }
700
- }
701
-
702
- .el-dialog__header {
703
- display: flex;
704
- justify-content: space-between;
705
- align-items: center;
706
- font-size: 14px;
707
- background-color: #eeeeee;
708
- height: 36px;
709
- line-height: 36px;
710
- padding: 0 20px;
711
- }
712
-
713
- .el-dialog__headerbtn {
714
- position: inherit;
715
- }
716
-
717
- .el-dialog__title {
718
- font-size: 14px;
719
- line-height: 20px;
720
- color: #333333;
721
- }
722
-
723
- .el-dialog__footer {
724
- background-color: #eeeeee;
725
- height: 42px;
726
- line-height: 42px;
727
- padding: 0 20px;
728
-
729
- & .el-button {
730
- height: 24px;
731
- // line-height: 24px;
732
- font-size: 12px;
733
- padding: 5px 12px;
734
- }
735
- }
732
+ }
package/src/components/EditableTable/index.vue CHANGED
@@ -1,16 +1,16 @@
1
1
  <template>
2
2
  <div class="editable-table">
3
- <div class="view-setting">
3
+ <div class="editable-table__view-setting">
4
4
  <div
5
5
  v-if="!hideViewSettingBtn"
6
- class="view-setting__btn-wrapper"
6
+ class="editable-table__view-setting__btn-wrapper"
7
7
  >
8
8
  <div
9
- class="view-setting__btn btn-pointer"
9
+ class="editable-table__view-setting__btn btn-pointer"
10
10
  @click="handleViewSettingShow"
11
11
  >
12
12
  <i class="el-icon-setting" />
13
- <div class="view-setting__btn-text">
13
+ <div class="editable-table__view-setting__btn-text">
14
14
  显示设置
15
15
  </div>
16
16
  </div>
@@ -186,16 +186,16 @@
186
186
 
187
187
  <div
188
188
  v-else
189
- class="operation-popover__save-cancel"
189
+ class="editable-table__operation-popover__save-cancel"
190
190
  >
191
191
  <div
192
- class="btn-pointer operation-popover__btn"
192
+ class="btn-pointer editable-table__operation-popover__btn"
193
193
  @click="handleEditSave(scope.row)"
194
194
  >
195
195
  保存
196
196
  </div>
197
197
  <div
198
- class="btn-pointer operation-popover__btn"
198
+ class="btn-pointer editable-table__operation-popover__btn"
199
199
  @click="handleEditCancel(scope.row)"
200
200
  >
201
201
  取消