@lx-frontend/wrap-element-ui 1.0.14-beta.2 → 1.0.14-beta.4

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": "@lx-frontend/wrap-element-ui",
3
- "version": "1.0.14-beta.2",
3
+ "version": "1.0.14-beta.4",
4
4
  "description": "wrap-element-ui",
5
5
  "author": "",
6
6
  "main": "src/components/index.ts",
@@ -0,0 +1,62 @@
1
+ <template>
2
+ <div class="editable-table-sort-filter__filter">
3
+ <div class="editable-table-sort-filter__filter-title">
4
+ 筛选
5
+ </div>
6
+ <el-checkbox-group
7
+ v-if="column.filters && (Array.isArray(column.filters) || column.filters.type === 'checkbox')"
8
+ class="editable-table-sort-filter__filter-checkbox-group"
9
+ :value="tempFilteredValue[column.filters.prop || column.prop]"
10
+ @input="val => emit('update:tempFilteredValue', column.filters?.prop || column.prop, val)"
11
+ >
12
+ <el-checkbox
13
+ v-for="item in (Array.isArray(column.filters) ? column.filters : column.filters.options)"
14
+ :key="item.value"
15
+ :label="item.value"
16
+ :title="item.text"
17
+ class="editable-table-sort-filter__filter-checkbox"
18
+ >
19
+ <slot
20
+ name="filter-item"
21
+ v-bind="item"
22
+ >
23
+ {{ item.text }}
24
+ </slot>
25
+ </el-checkbox>
26
+ </el-checkbox-group>
27
+
28
+ <el-radio-group
29
+ v-if="column.filters && !Array.isArray(column.filters) && column.filters.type === 'radio'"
30
+ style="display: flex;flex-direction: column;gap: 6px;"
31
+ :value="tempFilteredValue[column.filters.prop || column.prop]"
32
+ @input="val => emit('update:tempFilteredValue', column.filters?.prop || column.prop, val)"
33
+ >
34
+ <el-radio
35
+ v-for="item in column.filters.options"
36
+ :key="item.value"
37
+ :label="item.value"
38
+ :title="item.text"
39
+ >
40
+ <slot
41
+ name="filter-item"
42
+ v-bind="item"
43
+ >
44
+ {{ item.text }}
45
+ </slot>
46
+ </el-radio>
47
+ </el-radio-group>
48
+ </div>
49
+ </template>
50
+
51
+ <script setup lang="ts">
52
+ import { IColumnConfig } from '../../types';
53
+
54
+ defineProps<{
55
+ column: IColumnConfig
56
+ tempFilteredValue: Record<string, string | number | number[] | string[]>
57
+ }>()
58
+
59
+ const emit = defineEmits<{
60
+ (e: 'update:tempFilteredValue', key: string, value: string): void
61
+ }>()
62
+ </script>
@@ -0,0 +1,232 @@
1
+ <template>
2
+ <el-popover
3
+ ref="popoverRef"
4
+ placement="bottom"
5
+ trigger="click"
6
+ popper-class="editable-table-sort-filter"
7
+ data-popper-name="editable-table-sort-filter"
8
+ :data-prop="column.prop"
9
+ @show="() => emit('popover-show')"
10
+ >
11
+ <template slot="reference">
12
+ <slot
13
+ v-if="column.customColorLabel"
14
+ name="custom"
15
+ />
16
+ <!-- 筛选中,或排序中,高亮 -->
17
+ <span
18
+ v-else
19
+ :class="['editable-table__sort-reference', headActive && 'editable-table__sort-reference--active']"
20
+ >
21
+ {{ column.label }}
22
+ <div :class="['editable-table__sort-icon', headActive && 'editable-table__sort-icon--active']" />
23
+ </span>
24
+ </template>
25
+ <div class="editable-table-sort-filter">
26
+ <div class="editable-table-sort-filter__column-title">
27
+ {{ column.label }}
28
+ </div>
29
+
30
+ <Sort
31
+ v-if="column.isColumnSortable"
32
+ :column="column"
33
+ :temp-sort-prop="tempSortProp"
34
+ :temp-sort-type="tempSortType"
35
+ @update:sort="(type, prop) => emit('update:sort', type, prop)"
36
+ />
37
+
38
+ <Search
39
+ v-if="!!column.search"
40
+ :column="column"
41
+ :temp-search-value="tempSearchValue"
42
+ @update:tempSearchValue="(key, val) => emit('update:tempSearchValue', key, val)"
43
+ >
44
+ <template
45
+ v-for="searchOption in (Array.isArray(column.search) ? column.search : []).filter(v => v.type === 'slot')"
46
+ #[searchOption.slotName]="rest"
47
+ >
48
+ <slot
49
+ :name="searchOption.slotName"
50
+ v-bind="rest"
51
+ />
52
+ </template>
53
+ </Search>
54
+
55
+ <div
56
+ v-if="column.doubleDatePicker"
57
+ class="editable-table-sort-filter__sort"
58
+ >
59
+ <div class="editable-table-sort-filter__search-title">
60
+ {{ column.doubleDatePicker.label }}
61
+ </div>
62
+ <div
63
+ class="editable-table-sort-filter__date-picker-content"
64
+ style="display: flex;flex-direction: column;gap: 12px;"
65
+ >
66
+ <el-date-picker
67
+ @input="val => emit('update:tempSearchValue', column.doubleDatePicker.props[0], val || '')"
68
+ :value="tempSearchValue[column.doubleDatePicker.props[0]]"
69
+ value-format="yyyy-MM-dd"
70
+ format="yyyy-MM-dd"
71
+ type="date"
72
+ size="small"
73
+ placeholder="开始日期"
74
+ />
75
+ <el-date-picker
76
+ @input="val => emit('update:tempSearchValue', column.doubleDatePicker.props[1], val || '')"
77
+ :value="tempSearchValue[column.doubleDatePicker.props[1]]"
78
+ value-format="yyyy-MM-dd"
79
+ format="yyyy-MM-dd"
80
+ size="small"
81
+ type="date"
82
+ placeholder="结束日期"
83
+ />
84
+ </div>
85
+ </div>
86
+
87
+ <Filter
88
+ v-if="column.filters && ((Array.isArray(column.filters) ? column.filters : column.filters.options).length > 0)"
89
+ :column="column"
90
+ :temp-filtered-value="tempFilteredValue"
91
+ @update:tempFilteredValue="(key, val) => emit('update:tempFilteredValue', key, val)"
92
+ >
93
+ <template #filter-item="item">
94
+ <slot
95
+ name="filter-item"
96
+ v-bind="item"
97
+ />
98
+ </template>
99
+ </Filter>
100
+
101
+ <!-- <div
102
+ v-if="column.filters && ((Array.isArray(column.filters) ? column.filters : column.filters.options).length > 0)"
103
+ class="editable-table-sort-filter__filter"
104
+ >
105
+ <div class="editable-table-sort-filter__filter-title">
106
+ 筛选
107
+ </div>
108
+ <el-checkbox-group
109
+ v-if="column.filters && (Array.isArray(column.filters) || column.filters.type === 'checkbox')"
110
+ class="editable-table-sort-filter__filter-checkbox-group"
111
+ :value="tempFilteredValue[column.filters.prop || column.prop]"
112
+ @input="val => emit('update:tempFilteredValue', column.filters?.prop || column.prop, val)"
113
+ >
114
+ <el-checkbox
115
+ v-for="item in (Array.isArray(column.filters) ? column.filters : column.filters.options)"
116
+ :key="item.value"
117
+ :label="item.value"
118
+ :title="item.text"
119
+ class="editable-table-sort-filter__filter-checkbox"
120
+ >
121
+ <slot
122
+ name="filter-item"
123
+ v-bind="item"
124
+ >
125
+ {{ item.text }}
126
+ </slot>
127
+ </el-checkbox>
128
+ </el-checkbox-group>
129
+
130
+ <el-radio-group
131
+ v-if="column.filters && !Array.isArray(column.filters) && column.filters.type === 'radio'"
132
+ style="display: flex;flex-direction: column;gap: 6px;"
133
+ :value="tempFilteredValue[column.filters.prop || column.prop]"
134
+ @input="val => emit('update:tempFilteredValue', column.filters?.prop || column.prop, val)"
135
+ >
136
+ <el-radio
137
+ v-for="item in column.filters.options"
138
+ :key="item.value"
139
+ :label="item.value"
140
+ :title="item.text"
141
+ >
142
+ <slot
143
+ name="filter-item"
144
+ v-bind="item"
145
+ >
146
+ {{ item.text }}
147
+ </slot>
148
+ </el-radio>
149
+ </el-radio-group>
150
+ </div> -->
151
+
152
+ <div
153
+ v-if="column.summary"
154
+ class="editable-table-sort-filter__filter"
155
+ >
156
+ <div class="editable-table-sort-filter__filter-title">
157
+ 统计
158
+ </div>
159
+ <el-checkbox-group
160
+ class="editable-table-sort-filter__filter-checkbox-group"
161
+ :value="tempSummaryList"
162
+ @input="val => emit('update:tempSummaryList', val)"
163
+ >
164
+ <el-checkbox
165
+ :label="column.prop"
166
+ class="editable-table-sort-filter__filter-checkbox"
167
+ >
168
+ <slot
169
+ name="summay-item"
170
+ v-bind="column"
171
+ >
172
+ {{ column.label }}
173
+ </slot>
174
+ </el-checkbox>
175
+ </el-checkbox-group>
176
+ </div>
177
+
178
+ <div class="editable-table-sort-filter__footer">
179
+ <el-button
180
+ class="editable-table-sort-filter__reset-btn"
181
+ @click="() => emit('reset')"
182
+ >
183
+ 重置
184
+ </el-button>
185
+ <el-button
186
+ class="editable-table-sort-filter__confirm-btn"
187
+ type="primary"
188
+ @click="() => emit('confirm')"
189
+ >
190
+ 确定
191
+ </el-button>
192
+ </div>
193
+ </div>
194
+ </el-popover>
195
+ </template>
196
+
197
+ <script setup lang="ts">
198
+ import Search from './search.vue'
199
+ import Sort from './sort.vue'
200
+ import Filter from './filter.vue'
201
+
202
+ import { ref } from 'vue'
203
+ import { IColumnConfig } from '../../types'
204
+
205
+ defineProps<{
206
+ headActive: boolean
207
+ column: IColumnConfig
208
+ tempSummaryList: string[]
209
+ tempSortType: 'ascending' | 'descending' | ''
210
+ tempSortProp: string
211
+ tempSearchValue: Record<string, string>
212
+ tempFilteredValue: Record<string, string | number | number[] | string[]>
213
+ }>()
214
+
215
+ const emit = defineEmits<{
216
+ (e: 'update:tempSearchValue', key: string, value: string): void
217
+ (e: 'update:tempFilteredValue', key: string, value: string): void
218
+ (e: 'update:tempSummaryList', value: string[]): void
219
+ (e: 'update:sort', type: 'ascending' | 'descending', prop: string): void
220
+ (e: 'popover-show'): void
221
+ (e: 'reset'): void
222
+ (e: 'confirm'): void
223
+ }>()
224
+
225
+ const popoverRef = ref(null as any)
226
+
227
+ defineExpose({
228
+ close: () => {
229
+ popoverRef.value?.doClose()
230
+ }
231
+ })
232
+ </script>
@@ -0,0 +1,74 @@
1
+ <template>
2
+ <div
3
+ class="editable-table-sort-filter__search"
4
+ style="display: flex;flex-direction: column;gap: 12px;"
5
+ >
6
+ <div
7
+ v-for="item in searchConfigs"
8
+ :key="item.label"
9
+ >
10
+ <div class="editable-table-sort-filter__search-title">
11
+ {{ item.label }}
12
+ </div>
13
+ <template v-if="!('type' in item) || item.type === 'input'">
14
+ <el-input
15
+ class="editable-table-sort-filter__search-input"
16
+ placeholder="请输入内容"
17
+ :value="tempSearchValue[item.prop]"
18
+ @input="val => emit('update:tempSearchValue', item.prop, val)"
19
+ />
20
+ </template>
21
+ <template v-if="item.type === 'doubleDatePicker'">
22
+ <div class="editable-table-sort-filter__search__date-range">
23
+ <el-date-picker
24
+ @input="val => emit('update:tempSearchValue', item.prop[0], val || '')"
25
+ :value="tempSearchValue[item.prop[0]]"
26
+ value-format="yyyy-MM-dd"
27
+ format="yyyy-MM-dd"
28
+ type="date"
29
+ size="small"
30
+ placeholder="开始日期"
31
+ :picker-options="item.pickerOptions ?? {}"
32
+ />
33
+ <el-date-picker
34
+ @input="val => emit('update:tempSearchValue', item.prop[1], val || '')"
35
+ :value="tempSearchValue[item.prop[1]]"
36
+ value-format="yyyy-MM-dd"
37
+ format="yyyy-MM-dd"
38
+ size="small"
39
+ type="date"
40
+ placeholder="结束日期"
41
+ :picker-options="item.pickerOptions ?? {}"
42
+ />
43
+ </div>
44
+ </template>
45
+ <template v-if="item.type === 'slot'">
46
+ <slot
47
+ :name="item.slotName"
48
+ :data="tempSearchValue"
49
+ :set="(key, value) => emit('update:tempSearchValue', key, value)"
50
+ />
51
+ </template>
52
+ </div>
53
+ </div>
54
+ </template>
55
+
56
+ <script setup lang="ts">
57
+ import { computed } from 'vue';
58
+ import { IColumnConfig } from '../../types';
59
+
60
+
61
+ const props = defineProps<{
62
+ column: IColumnConfig
63
+ tempSearchValue: Record<string, string>
64
+ }>()
65
+
66
+ const emit = defineEmits<{
67
+ (e: 'update:tempSearchValue', key: string, value: string): void
68
+ }>()
69
+
70
+ const searchConfigs = computed(() => {
71
+ if (Array.isArray(props.column.search)) return props.column.search
72
+ return [{ prop: props.column.prop, label: '搜索' }]
73
+ })
74
+ </script>
@@ -0,0 +1,50 @@
1
+ <template>
2
+ <div class="editable-table-sort-filter__sort">
3
+ <div
4
+ v-for="item in sortConfigs"
5
+ :key="item.prop"
6
+ >
7
+ <div class="editable-table-sort-filter__sort-title">
8
+ {{ item.label }}
9
+ </div>
10
+ <div class="editable-table-sort-filter__sort-btns">
11
+ <el-button
12
+ :class="['editable-table-sort-filter__sort-btn', checkActiveProp('ascending', item.prop) && 'editable-table-sort-filter__sort-btn--active']"
13
+ @click="() => emit('update:sort', 'ascending', item.prop)"
14
+ >
15
+ 升序
16
+ </el-button>
17
+ <el-button
18
+ :class="['editable-table-sort-filter__sort-btn', checkActiveProp('descending', item.prop) && 'editable-table-sort-filter__sort-btn--active']"
19
+ @click="() => emit('update:sort', 'descending', item.prop)"
20
+ >
21
+ 降序
22
+ </el-button>
23
+ </div>
24
+ </div>
25
+ </div>
26
+ </template>
27
+
28
+ <script setup lang="ts">
29
+ import { computed } from 'vue';
30
+ import { IColumnConfig } from '../../types';
31
+
32
+ const props = defineProps<{
33
+ column: IColumnConfig
34
+ tempSortType: 'ascending' | 'descending' | ''
35
+ tempSortProp: string
36
+ }>()
37
+
38
+ const emit = defineEmits<{
39
+ (e: 'update:sort', type: 'ascending' | 'descending', prop: string): void
40
+ }>()
41
+
42
+ const checkActiveProp = (type: 'ascending' | 'descending', prop: string) => {
43
+ return props.tempSortType === type && props.tempSortProp === prop
44
+ }
45
+
46
+ const sortConfigs = computed(() => {
47
+ if (Array.isArray(props.column._sortable)) return props.column._sortable
48
+ return [{ ...props.column, label: '排序' }]
49
+ })
50
+ </script>
@@ -99,6 +99,13 @@
99
99
  />
100
100
  </div>
101
101
  </template>
102
+ <template v-if="item.type === 'slot'">
103
+ <slot
104
+ :name="item.slotName"
105
+ :data="tempSearchValue"
106
+ :set="(key, value) => emit('update:tempSearchValue', key, value)"
107
+ />
108
+ </template>
102
109
  </div>
103
110
  </div>
104
111
 
@@ -114,7 +121,7 @@
114
121
  style="display: flex;flex-direction: column;gap: 12px;"
115
122
  >
116
123
  <el-date-picker
117
- @input="val => emit('update:tempSearchValue', column.doubleDatePicker!.props[0], val || '')"
124
+ @input="val => emit('update:tempSearchValue', column.doubleDatePicker.props[0], val || '')"
118
125
  :value="tempSearchValue[column.doubleDatePicker.props[0]]"
119
126
  value-format="yyyy-MM-dd"
120
127
  format="yyyy-MM-dd"
@@ -123,7 +130,7 @@
123
130
  placeholder="开始日期"
124
131
  />
125
132
  <el-date-picker
126
- @input="val => emit('update:tempSearchValue', column.doubleDatePicker!.props[1], val || '')"
133
+ @input="val => emit('update:tempSearchValue', column.doubleDatePicker.props[1], val || '')"
127
134
  :value="tempSearchValue[column.doubleDatePicker.props[1]]"
128
135
  value-format="yyyy-MM-dd"
129
136
  format="yyyy-MM-dd"
@@ -194,6 +194,15 @@
194
194
  {{ column.label }}
195
195
  </slot>
196
196
  </template>
197
+ <template
198
+ v-for="searchOption in (Array.isArray(column.search) ? column.search : []).filter(v => v.type === 'slot')"
199
+ #[searchOption.slotName]="rest"
200
+ >
201
+ <slot
202
+ :name="searchOption.slotName"
203
+ v-bind="rest"
204
+ />
205
+ </template>
197
206
  </biz-table-header-popover>
198
207
  </template>
199
208
  <!-- 默认操作按钮,defaultOperations属性不为空数组时展示。编辑状态下隐藏 -->
@@ -331,7 +340,8 @@
331
340
  <script lang="ts" setup>
332
341
  import BizColorSelect from './features/bizColorSelect.vue';
333
342
  import BizViewSettingDialog from './features/bizViewSettingDialog.vue'
334
- import BizTableHeaderPopover from './features/bizTableHeaderPopover.vue'
343
+ // import BizTableHeaderPopover from './features/bizTableHeaderPopover.vue'
344
+ import BizTableHeaderPopover from './features/bizTableHeaderPopover/index.vue'
335
345
  import BizEditCell from './features/bizEditCell.vue'
336
346
  import BizTableOperatePopover from './features/bizTableOperatePopover.vue'
337
347
 
@@ -68,7 +68,14 @@ type DoubleDatePickerSearchOption = {
68
68
  pickerOptions?: DatePicker['pickerOptions']
69
69
  }
70
70
 
71
- type ISearchOptions = (InputSearchOption | DoubleDatePickerSearchOption)[]
71
+ type SlotSearchOption = {
72
+ prop: string | string[]
73
+ label: string
74
+ type: 'slot',
75
+ slotName: '',
76
+ }
77
+
78
+ type ISearchOptions = (InputSearchOption | DoubleDatePickerSearchOption | SlotSearchOption)[]
72
79
 
73
80
  type IInputColumn = IColumnConfigRequired & {
74
81
  inputType: string | number;