vue_zhongyou 1.0.3 → 1.0.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/package.json
CHANGED
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FilterSortPanel class="filter-sort-toolbar">
|
|
3
|
+
<template #filter>
|
|
4
|
+
<div class="panel-section">
|
|
5
|
+
<div class="panel-title">筛选方式</div>
|
|
6
|
+
<van-radio-group v-model="filterValue" direction="vertical">
|
|
7
|
+
<van-radio
|
|
8
|
+
v-for="item in filterOptions"
|
|
9
|
+
:key="item.value"
|
|
10
|
+
:name="item.value"
|
|
11
|
+
>
|
|
12
|
+
{{ item.label }}
|
|
13
|
+
</van-radio>
|
|
14
|
+
</van-radio-group>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<div class="panel-section">
|
|
18
|
+
<div class="panel-title">时间范围</div>
|
|
19
|
+
<div class="quick-range">
|
|
20
|
+
<van-button
|
|
21
|
+
v-for="item in quickRanges"
|
|
22
|
+
:key="item.value"
|
|
23
|
+
size="small"
|
|
24
|
+
round
|
|
25
|
+
plain
|
|
26
|
+
:type="selectedQuickRange === item.value ? 'primary' : 'default'"
|
|
27
|
+
@click="selectQuickRange(item)"
|
|
28
|
+
>
|
|
29
|
+
{{ item.label }}
|
|
30
|
+
</van-button>
|
|
31
|
+
</div>
|
|
32
|
+
<van-field
|
|
33
|
+
label="自定义"
|
|
34
|
+
is-link
|
|
35
|
+
readonly
|
|
36
|
+
:model-value="rangeText"
|
|
37
|
+
placeholder="请选择时间范围"
|
|
38
|
+
@click="showCalendar = true"
|
|
39
|
+
/>
|
|
40
|
+
<van-calendar
|
|
41
|
+
v-model:show="showCalendar"
|
|
42
|
+
type="range"
|
|
43
|
+
:min-date="minDate"
|
|
44
|
+
:max-date="maxDate"
|
|
45
|
+
color="#1989fa"
|
|
46
|
+
@confirm="onCalendarConfirm"
|
|
47
|
+
@cancel="showCalendar = false"
|
|
48
|
+
/>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<div class="panel-actions">
|
|
52
|
+
<van-button size="small" type="default" round plain @click="resetFilters">
|
|
53
|
+
重置
|
|
54
|
+
</van-button>
|
|
55
|
+
<van-button size="small" type="primary" round @click="applyFilters">
|
|
56
|
+
完成
|
|
57
|
+
</van-button>
|
|
58
|
+
</div>
|
|
59
|
+
</template>
|
|
60
|
+
<template #sort>
|
|
61
|
+
<div class="panel-section">
|
|
62
|
+
<div class="panel-title">排序方式</div>
|
|
63
|
+
<van-radio-group v-model="sortValue" direction="vertical">
|
|
64
|
+
<van-radio
|
|
65
|
+
v-for="item in sortOptions"
|
|
66
|
+
:key="item.value"
|
|
67
|
+
:name="item.value"
|
|
68
|
+
>
|
|
69
|
+
{{ item.label }}
|
|
70
|
+
</van-radio>
|
|
71
|
+
</van-radio-group>
|
|
72
|
+
</div>
|
|
73
|
+
</template>
|
|
74
|
+
</FilterSortPanel>
|
|
75
|
+
|
|
76
|
+
</template>
|
|
77
|
+
<script setup>
|
|
78
|
+
import { computed, ref, watch } from 'vue'
|
|
79
|
+
import FilterSortPanel from '@/components/FilterSortPanel.vue'
|
|
80
|
+
|
|
81
|
+
const sortValue = ref('latestCreated')
|
|
82
|
+
const filterValue = ref('all')
|
|
83
|
+
const startDate = ref('')
|
|
84
|
+
const endDate = ref('')
|
|
85
|
+
const selectedQuickRange = ref('')
|
|
86
|
+
const showCalendar = ref(false)
|
|
87
|
+
const today = new Date()
|
|
88
|
+
const minDate = ref(new Date(today.getFullYear() - 1, 0, 1))
|
|
89
|
+
const maxDate = ref(today)
|
|
90
|
+
|
|
91
|
+
const sortOptions = [
|
|
92
|
+
{ label: '最新创建', value: 'latestCreated' },
|
|
93
|
+
{ label: '最早创建', value: 'earliestCreated' },
|
|
94
|
+
{ label: '最近更新', value: 'latestUpdated' },
|
|
95
|
+
{ label: '最早更新', value: 'earliestUpdated' }
|
|
96
|
+
]
|
|
97
|
+
|
|
98
|
+
const filterOptions = [
|
|
99
|
+
{ label: '全部公文', value: 'all' },
|
|
100
|
+
{ label: '待审公文', value: 'pending' },
|
|
101
|
+
{ label: '已审公文', value: 'approved' },
|
|
102
|
+
{ label: '签报公文', value: 'sign' }
|
|
103
|
+
]
|
|
104
|
+
|
|
105
|
+
const quickRanges = [
|
|
106
|
+
{ label: '近一周', value: '7d', days: 7 },
|
|
107
|
+
{ label: '近一月', value: '30d', days: 30 }
|
|
108
|
+
]
|
|
109
|
+
|
|
110
|
+
const rangeText = computed(() => {
|
|
111
|
+
if (startDate.value && endDate.value) {
|
|
112
|
+
return `${startDate.value} ~ ${endDate.value}`
|
|
113
|
+
}
|
|
114
|
+
return ''
|
|
115
|
+
})
|
|
116
|
+
|
|
117
|
+
const formatDate = (date) => {
|
|
118
|
+
const year = date.getFullYear()
|
|
119
|
+
const month = `${date.getMonth() + 1}`.padStart(2, '0')
|
|
120
|
+
const day = `${date.getDate()}`.padStart(2, '0')
|
|
121
|
+
return `${year}-${month}-${day}`
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
const selectQuickRange = (range) => {
|
|
125
|
+
const today = new Date()
|
|
126
|
+
const start = new Date()
|
|
127
|
+
start.setDate(today.getDate() - (range.days - 1))
|
|
128
|
+
startDate.value = formatDate(start)
|
|
129
|
+
endDate.value = formatDate(today)
|
|
130
|
+
selectedQuickRange.value = range.value
|
|
131
|
+
showCalendar.value = false
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
const onCalendarConfirm = (values) => {
|
|
135
|
+
if (!values || values.length !== 2) return
|
|
136
|
+
const [start, end] = values
|
|
137
|
+
startDate.value = formatDate(start)
|
|
138
|
+
endDate.value = formatDate(end)
|
|
139
|
+
selectedQuickRange.value = ''
|
|
140
|
+
showCalendar.value = false
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
const resetFilters = () => {
|
|
144
|
+
filterValue.value = 'all'
|
|
145
|
+
startDate.value = ''
|
|
146
|
+
endDate.value = ''
|
|
147
|
+
selectedQuickRange.value = ''
|
|
148
|
+
showCalendar.value = false
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
const applyFilters = () => {
|
|
152
|
+
// 在此处触发实际的筛选逻辑
|
|
153
|
+
// 例如：emit('filter-change', {
|
|
154
|
+
// filter: filterValue.value,
|
|
155
|
+
// sort: sortValue.value,
|
|
156
|
+
// startDate: startDate.value,
|
|
157
|
+
// endDate: endDate.value
|
|
158
|
+
// })
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
watch([startDate, endDate], ([start, end]) => {
|
|
162
|
+
if (start && end && start > end) {
|
|
163
|
+
endDate.value = start
|
|
164
|
+
}
|
|
165
|
+
})
|
|
166
|
+
</script>
|
|
167
|
+
<style lang='scss' scoped>
|
|
168
|
+
.filter-sort-toolbar {
|
|
169
|
+
margin-bottom: 10px;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.panel-section {
|
|
173
|
+
display: flex;
|
|
174
|
+
flex-direction: column;
|
|
175
|
+
gap: 12px;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.quick-range {
|
|
179
|
+
display: flex;
|
|
180
|
+
gap: 8px;
|
|
181
|
+
flex-wrap: wrap;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.panel-title {
|
|
185
|
+
font-size: 16px;
|
|
186
|
+
font-weight: 600;
|
|
187
|
+
color: #333;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.panel-actions {
|
|
191
|
+
display: flex;
|
|
192
|
+
justify-content: flex-end;
|
|
193
|
+
gap: 10px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
</style>
|