af-mobile-client-vue3 1.0.57 → 1.0.58
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/.env
CHANGED
package/package.json
CHANGED
|
@@ -1,392 +1,392 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { defineEmits, defineProps, onMounted, ref, watch } from 'vue'
|
|
3
|
-
import {
|
|
4
|
-
Button as VanButton,
|
|
5
|
-
Calendar as VanCalendar,
|
|
6
|
-
Col as VanCol,
|
|
7
|
-
Dialog as VanDialog,
|
|
8
|
-
DropdownItem as VanDropdownItem,
|
|
9
|
-
DropdownMenu as VanDropdownMenu,
|
|
10
|
-
Icon as VanIcon,
|
|
11
|
-
Radio as VanRadio,
|
|
12
|
-
RadioGroup as VanRadioGroup,
|
|
13
|
-
Row as VanRow,
|
|
14
|
-
showFailToast,
|
|
15
|
-
} from 'vant'
|
|
16
|
-
|
|
17
|
-
const { orderList, orderVal, sortordVal, formQuery } = defineProps<{
|
|
18
|
-
orderVal?: string
|
|
19
|
-
sortordVal?: string
|
|
20
|
-
orderList?: any[]
|
|
21
|
-
formQuery?: any[]
|
|
22
|
-
}>()
|
|
23
|
-
|
|
24
|
-
const emit = defineEmits([
|
|
25
|
-
'update:orderVal',
|
|
26
|
-
'update:sortordVal',
|
|
27
|
-
'update:conditionParams',
|
|
28
|
-
'onRefresh',
|
|
29
|
-
])
|
|
30
|
-
|
|
31
|
-
// 下拉菜单元素
|
|
32
|
-
const listFilterMenu = ref(null)
|
|
33
|
-
|
|
34
|
-
// 排序字段
|
|
35
|
-
const currentOrderVal = ref('')
|
|
36
|
-
// 排序规则
|
|
37
|
-
const currentSortordVal = ref('')
|
|
38
|
-
// 排序规则列表
|
|
39
|
-
const sortordList = ref([
|
|
40
|
-
{ title: '正序', value: 'ascend' },
|
|
41
|
-
{ title: '倒序', value: 'descend' },
|
|
42
|
-
])
|
|
43
|
-
|
|
44
|
-
// 查询条件参数 !!!!!建议最后点击确认的时候完成这个的整理
|
|
45
|
-
const conditionParams = ref({})
|
|
46
|
-
|
|
47
|
-
// 日期选择集合
|
|
48
|
-
const rangePickerList = ref([])
|
|
49
|
-
// 日期区间值
|
|
50
|
-
const calendarVal = ref([])
|
|
51
|
-
// 展示日历选择器
|
|
52
|
-
const calendarShow = ref(false)
|
|
53
|
-
// 当前选择的日期选择器下标
|
|
54
|
-
const rangePickerIndex = ref(0)
|
|
55
|
-
// 最小日期
|
|
56
|
-
const minDate = ref(new Date(2020, 0, 1))
|
|
57
|
-
// 最大日期
|
|
58
|
-
const maxDate = ref(null)
|
|
59
|
-
|
|
60
|
-
// 格式化日期
|
|
61
|
-
function formatCalendarVal(valList) {
|
|
62
|
-
const res = []
|
|
63
|
-
valList.forEach((val) => {
|
|
64
|
-
const date = new Date(val)
|
|
65
|
-
const yyyy = date.getFullYear()
|
|
66
|
-
const mm = (`0${date.getMonth() + 1}`).slice(-2)
|
|
67
|
-
const dd = (`0${date.getDate()}`).slice(-2)
|
|
68
|
-
const hh = (`0${date.getHours()}`).slice(-2)
|
|
69
|
-
const min = (`0${date.getMinutes()}`).slice(-2)
|
|
70
|
-
const ss = (`0${date.getSeconds()}`).slice(-2)
|
|
71
|
-
res.push(`${yyyy}-${mm}-${dd} ${hh}:${min}:${ss}`)
|
|
72
|
-
})
|
|
73
|
-
return res
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
// 打开日期选择器并获取值
|
|
77
|
-
function getRangePickerValue(item, index) {
|
|
78
|
-
if (item.value)
|
|
79
|
-
calendarVal.value = item.calendar
|
|
80
|
-
calendarShow.value = true
|
|
81
|
-
rangePickerIndex.value = index
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// 选择日期
|
|
85
|
-
function calendarValueOnConfirm(value) {
|
|
86
|
-
calendarVal.value = value
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
// 取消选择日期
|
|
90
|
-
function calendarValueOnCancel() {
|
|
91
|
-
calendarVal.value = rangePickerList.value[rangePickerIndex.value].calendar
|
|
92
|
-
calendarShow.value = false
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
// 更新日期值
|
|
96
|
-
function updateRangePickerValue() {
|
|
97
|
-
rangePickerList.value[rangePickerIndex.value].value = formatCalendarVal(calendarVal.value)
|
|
98
|
-
rangePickerList.value[rangePickerIndex.value].calendar = calendarVal.value
|
|
99
|
-
// 给条件参数赋值
|
|
100
|
-
const key = rangePickerList.value[rangePickerIndex.value].model
|
|
101
|
-
conditionParams.value[key] = formatCalendarVal(calendarVal.value)
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
// 重置某个选项
|
|
105
|
-
function resetOptionItem(type, item) {
|
|
106
|
-
switch (type) {
|
|
107
|
-
case 'rangePicker':
|
|
108
|
-
item.value = undefined
|
|
109
|
-
item.calendar = undefined
|
|
110
|
-
break
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
// 重置所有选项
|
|
115
|
-
function resetOption() {
|
|
116
|
-
currentOrderVal.value = undefined
|
|
117
|
-
currentSortordVal.value = undefined
|
|
118
|
-
// 条件参数
|
|
119
|
-
conditionParams.value = {}
|
|
120
|
-
// 日期选择器
|
|
121
|
-
calendarVal.value = []
|
|
122
|
-
rangePickerList.value.forEach((item) => {
|
|
123
|
-
item.value = undefined
|
|
124
|
-
item.calendar = undefined
|
|
125
|
-
})
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
function checkOrderOption() {
|
|
129
|
-
let isCheck = true
|
|
130
|
-
if (currentOrderVal.value) {
|
|
131
|
-
if (!currentSortordVal.value) {
|
|
132
|
-
showFailToast('排序规则不能为空')
|
|
133
|
-
isCheck = false
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
else if (currentSortordVal.value) {
|
|
137
|
-
if (!currentOrderVal.value) {
|
|
138
|
-
showFailToast('排序字段不能为空')
|
|
139
|
-
isCheck = false
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
return isCheck
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
// 确认筛选条件
|
|
146
|
-
function confirmOption() {
|
|
147
|
-
const isCheck = checkOrderOption()
|
|
148
|
-
if (isCheck) {
|
|
149
|
-
const isEmptyObject = Object.keys(conditionParams.value).length === 0
|
|
150
|
-
emit('update:conditionParams', isEmptyObject ? undefined : conditionParams.value)
|
|
151
|
-
emit('onRefresh', {})
|
|
152
|
-
listFilterMenu.value.toggle(false)
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
onMounted(() => {
|
|
157
|
-
currentOrderVal.value = orderVal
|
|
158
|
-
currentSortordVal.value = sortordVal
|
|
159
|
-
disposalData()
|
|
160
|
-
// 处理最大日期 —— 6个月之后
|
|
161
|
-
const now = new Date()
|
|
162
|
-
now.setMonth(now.getMonth() + 6)
|
|
163
|
-
maxDate.value = now
|
|
164
|
-
})
|
|
165
|
-
|
|
166
|
-
watch(() => currentOrderVal.value, (val) => {
|
|
167
|
-
emit('update:orderVal', val)
|
|
168
|
-
})
|
|
169
|
-
|
|
170
|
-
watch(() => currentSortordVal.value, (val) => {
|
|
171
|
-
emit('update:sortordVal', val)
|
|
172
|
-
})
|
|
173
|
-
|
|
174
|
-
// 整理数据formQuery
|
|
175
|
-
function disposalData() {
|
|
176
|
-
rangePickerList.value = formQuery.filter((item) => {
|
|
177
|
-
return item.type === 'rangePicker'
|
|
178
|
-
})
|
|
179
|
-
}
|
|
180
|
-
</script>
|
|
181
|
-
|
|
182
|
-
<template>
|
|
183
|
-
<div id="XCellListFilter">
|
|
184
|
-
<VanDropdownMenu :close-on-click-outside="false">
|
|
185
|
-
<VanDropdownItem ref="listFilterMenu">
|
|
186
|
-
<template #title>
|
|
187
|
-
<VanIcon name="filter-o" size="20" />
|
|
188
|
-
</template>
|
|
189
|
-
<div class="order-condition">
|
|
190
|
-
<VanRow justify="space-between" class="filter-title">
|
|
191
|
-
<VanCol span="10">
|
|
192
|
-
排序字段
|
|
193
|
-
</VanCol>
|
|
194
|
-
<VanCol span="2">
|
|
195
|
-
<div class="reset-item" @click.stop="currentOrderVal = undefined">
|
|
196
|
-
重置
|
|
197
|
-
</div>
|
|
198
|
-
</VanCol>
|
|
199
|
-
</VanRow>
|
|
200
|
-
<VanRadioGroup v-model="currentOrderVal">
|
|
201
|
-
<VanRadio
|
|
202
|
-
v-for="(item) in orderList"
|
|
203
|
-
:key="item.value"
|
|
204
|
-
:name="item.value"
|
|
205
|
-
@click="currentOrderVal = item.value"
|
|
206
|
-
>
|
|
207
|
-
<VanButton type="default">
|
|
208
|
-
<span :class="currentOrderVal === item.value ? 'filter-active' : ''">{{ item.title }}</span>
|
|
209
|
-
</VanButton>
|
|
210
|
-
</VanRadio>
|
|
211
|
-
</VanRadioGroup>
|
|
212
|
-
<VanRow justify="space-between" class="filter-title">
|
|
213
|
-
<VanCol span="10">
|
|
214
|
-
排序规则
|
|
215
|
-
</VanCol>
|
|
216
|
-
<VanCol span="2">
|
|
217
|
-
<div class="reset-item" @click.stop="currentSortordVal = undefined">
|
|
218
|
-
重置
|
|
219
|
-
</div>
|
|
220
|
-
</VanCol>
|
|
221
|
-
</VanRow>
|
|
222
|
-
<VanRadioGroup v-model="currentSortordVal">
|
|
223
|
-
<VanRadio
|
|
224
|
-
v-for="(item) in sortordList"
|
|
225
|
-
:key="item.value"
|
|
226
|
-
:name="item.value"
|
|
227
|
-
@click="currentSortordVal = item.value"
|
|
228
|
-
>
|
|
229
|
-
<VanButton type="default">
|
|
230
|
-
<span :class="currentSortordVal === item.value ? 'filter-active' : ''">{{ item.title }}</span>
|
|
231
|
-
</VanButton>
|
|
232
|
-
</VanRadio>
|
|
233
|
-
</VanRadioGroup>
|
|
234
|
-
<div v-for="(item, index) in rangePickerList" :key="item.model" class="range-picker-list" @click="getRangePickerValue(item, index)">
|
|
235
|
-
<VanRow justify="space-between" class="range-picker-title">
|
|
236
|
-
<VanCol span="10">
|
|
237
|
-
{{ item.name }}
|
|
238
|
-
</VanCol>
|
|
239
|
-
<VanCol span="2">
|
|
240
|
-
<div class="reset-item" @click.stop="resetOptionItem('rangePicker', item)">
|
|
241
|
-
重置
|
|
242
|
-
</div>
|
|
243
|
-
</VanCol>
|
|
244
|
-
</VanRow>
|
|
245
|
-
<div :class="item.value ? 'active-picker-time range-picker-time' : 'range-picker-time'">
|
|
246
|
-
{{ item.value ? item.value[0].substr(0, 10) : '开始时间' }}
|
|
247
|
-
</div>
|
|
248
|
-
<span>~</span>
|
|
249
|
-
<div :class="item.value ? 'active-picker-time range-picker-time' : 'range-picker-time'">
|
|
250
|
-
{{ item.value ? item.value[1].substr(0, 10) : '结束时间' }}
|
|
251
|
-
</div>
|
|
252
|
-
</div>
|
|
253
|
-
</div>
|
|
254
|
-
<div class="operations-panel">
|
|
255
|
-
<VanButton type="default" @click="resetOption">
|
|
256
|
-
重置
|
|
257
|
-
</VanButton>
|
|
258
|
-
<VanButton type="primary" @click="confirmOption">
|
|
259
|
-
确认
|
|
260
|
-
</VanButton>
|
|
261
|
-
</div>
|
|
262
|
-
</VanDropdownItem>
|
|
263
|
-
</VanDropdownMenu>
|
|
264
|
-
<!-- 日期选择器 —— 日历 -->
|
|
265
|
-
<div class="rangePicker-comp-box">
|
|
266
|
-
<VanDialog
|
|
267
|
-
v-model:show="calendarShow"
|
|
268
|
-
show-cancel-button
|
|
269
|
-
@confirm="updateRangePickerValue"
|
|
270
|
-
>
|
|
271
|
-
<VanCalendar
|
|
272
|
-
:poppable="false"
|
|
273
|
-
:show-confirm="false"
|
|
274
|
-
switch-mode="year-month"
|
|
275
|
-
:min-date="minDate"
|
|
276
|
-
:max-date="maxDate"
|
|
277
|
-
:default-date="calendarVal"
|
|
278
|
-
type="range"
|
|
279
|
-
@confirm="calendarValueOnConfirm"
|
|
280
|
-
@cancel="calendarValueOnCancel"
|
|
281
|
-
/>
|
|
282
|
-
</VanDialog>
|
|
283
|
-
</div>
|
|
284
|
-
</div>
|
|
285
|
-
</template>
|
|
286
|
-
|
|
287
|
-
<style scoped lang="less">
|
|
288
|
-
#XCellListFilter {
|
|
289
|
-
.order-condition {
|
|
290
|
-
padding-bottom: 10px;
|
|
291
|
-
max-height: calc(var(--van-picker-toolbar-height) + var(--van-padding-base) + var(--van-tabs-line-height) + 35vh);
|
|
292
|
-
overflow-y: auto;
|
|
293
|
-
width: 100%;
|
|
294
|
-
background-color: white;
|
|
295
|
-
.filter-title {
|
|
296
|
-
height: 2rem;
|
|
297
|
-
font-size: 13px;
|
|
298
|
-
font-weight: 600;
|
|
299
|
-
line-height: 2rem;
|
|
300
|
-
margin: 5px 1rem 1px 1rem;
|
|
301
|
-
color: black;
|
|
302
|
-
}
|
|
303
|
-
:deep(.van-radio__icon) {
|
|
304
|
-
display: none;
|
|
305
|
-
}
|
|
306
|
-
:deep(.van-radio) {
|
|
307
|
-
display: inline;
|
|
308
|
-
}
|
|
309
|
-
:deep(.van-button--default) {
|
|
310
|
-
background: #f8f8f8;
|
|
311
|
-
border-color: #f8f8f8;
|
|
312
|
-
}
|
|
313
|
-
.filter-active {
|
|
314
|
-
color: #1989fa;
|
|
315
|
-
font-weight: 600;
|
|
316
|
-
}
|
|
317
|
-
:deep(.van-button) {
|
|
318
|
-
display: inline-block;
|
|
319
|
-
height: 2rem;
|
|
320
|
-
font-size: 13px;
|
|
321
|
-
font-weight: 500;
|
|
322
|
-
}
|
|
323
|
-
:deep(.van-cell) {
|
|
324
|
-
padding: 0 0 1rem 0;
|
|
325
|
-
}
|
|
326
|
-
:deep(.van-icon) {
|
|
327
|
-
display: none;
|
|
328
|
-
}
|
|
329
|
-
.range-picker-list {
|
|
330
|
-
.range-picker-title {
|
|
331
|
-
height: 2rem;
|
|
332
|
-
font-size: 13px;
|
|
333
|
-
font-weight: 600;
|
|
334
|
-
line-height: 2rem;
|
|
335
|
-
margin: 5px 1rem 1px 1rem;
|
|
336
|
-
color: black;
|
|
337
|
-
}
|
|
338
|
-
.range-picker-time {
|
|
339
|
-
display: inline-block;
|
|
340
|
-
background: #f8f8f8;
|
|
341
|
-
border-radius: 8px;
|
|
342
|
-
font-size: 13px;
|
|
343
|
-
margin: 0 1rem;
|
|
344
|
-
height: 2rem;
|
|
345
|
-
line-height: 2rem;
|
|
346
|
-
width: 40vw;
|
|
347
|
-
text-align: center;
|
|
348
|
-
}
|
|
349
|
-
/* 已完成选择的时间 */
|
|
350
|
-
.active-picker-time {
|
|
351
|
-
color: #1989fa;
|
|
352
|
-
font-weight: 600;
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
/* 重置元素按钮 */
|
|
356
|
-
.reset-item {
|
|
357
|
-
font-weight: 500;
|
|
358
|
-
color: #1989fa;
|
|
359
|
-
}
|
|
360
|
-
}
|
|
361
|
-
/* 下拉菜单的操作面板 */
|
|
362
|
-
.operations-panel {
|
|
363
|
-
display: flex;
|
|
364
|
-
overflow: hidden;
|
|
365
|
-
user-select: none;
|
|
366
|
-
padding: 10px;
|
|
367
|
-
|
|
368
|
-
& > .van-button {
|
|
369
|
-
flex: 1;
|
|
370
|
-
margin: 0;
|
|
371
|
-
|
|
372
|
-
&:first-child {
|
|
373
|
-
margin-right: 12px;
|
|
374
|
-
}
|
|
375
|
-
}
|
|
376
|
-
}
|
|
377
|
-
/* 时间范围组件 */
|
|
378
|
-
.rangePicker-comp-box {
|
|
379
|
-
:deep(.van-calendar) {
|
|
380
|
-
height: 58vh;
|
|
381
|
-
}
|
|
382
|
-
:deep(.van-calendar__header-title) {
|
|
383
|
-
background-color: rgba(25, 137, 250, 0.1);
|
|
384
|
-
height: 8vh;
|
|
385
|
-
line-height: 8vh;
|
|
386
|
-
}
|
|
387
|
-
:deep(.van-calendar__month-mark) {
|
|
388
|
-
color: rgba(25, 137, 250, 0.1);
|
|
389
|
-
}
|
|
390
|
-
}
|
|
391
|
-
}
|
|
392
|
-
</style>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { defineEmits, defineProps, onMounted, ref, watch } from 'vue'
|
|
3
|
+
import {
|
|
4
|
+
Button as VanButton,
|
|
5
|
+
Calendar as VanCalendar,
|
|
6
|
+
Col as VanCol,
|
|
7
|
+
Dialog as VanDialog,
|
|
8
|
+
DropdownItem as VanDropdownItem,
|
|
9
|
+
DropdownMenu as VanDropdownMenu,
|
|
10
|
+
Icon as VanIcon,
|
|
11
|
+
Radio as VanRadio,
|
|
12
|
+
RadioGroup as VanRadioGroup,
|
|
13
|
+
Row as VanRow,
|
|
14
|
+
showFailToast,
|
|
15
|
+
} from 'vant'
|
|
16
|
+
|
|
17
|
+
const { orderList, orderVal, sortordVal, formQuery } = defineProps<{
|
|
18
|
+
orderVal?: string
|
|
19
|
+
sortordVal?: string
|
|
20
|
+
orderList?: any[]
|
|
21
|
+
formQuery?: any[]
|
|
22
|
+
}>()
|
|
23
|
+
|
|
24
|
+
const emit = defineEmits([
|
|
25
|
+
'update:orderVal',
|
|
26
|
+
'update:sortordVal',
|
|
27
|
+
'update:conditionParams',
|
|
28
|
+
'onRefresh',
|
|
29
|
+
])
|
|
30
|
+
|
|
31
|
+
// 下拉菜单元素
|
|
32
|
+
const listFilterMenu = ref(null)
|
|
33
|
+
|
|
34
|
+
// 排序字段
|
|
35
|
+
const currentOrderVal = ref('')
|
|
36
|
+
// 排序规则
|
|
37
|
+
const currentSortordVal = ref('')
|
|
38
|
+
// 排序规则列表
|
|
39
|
+
const sortordList = ref([
|
|
40
|
+
{ title: '正序', value: 'ascend' },
|
|
41
|
+
{ title: '倒序', value: 'descend' },
|
|
42
|
+
])
|
|
43
|
+
|
|
44
|
+
// 查询条件参数 !!!!!建议最后点击确认的时候完成这个的整理
|
|
45
|
+
const conditionParams = ref({})
|
|
46
|
+
|
|
47
|
+
// 日期选择集合
|
|
48
|
+
const rangePickerList = ref([])
|
|
49
|
+
// 日期区间值
|
|
50
|
+
const calendarVal = ref([])
|
|
51
|
+
// 展示日历选择器
|
|
52
|
+
const calendarShow = ref(false)
|
|
53
|
+
// 当前选择的日期选择器下标
|
|
54
|
+
const rangePickerIndex = ref(0)
|
|
55
|
+
// 最小日期
|
|
56
|
+
const minDate = ref(new Date(2020, 0, 1))
|
|
57
|
+
// 最大日期
|
|
58
|
+
const maxDate = ref(null)
|
|
59
|
+
|
|
60
|
+
// 格式化日期
|
|
61
|
+
function formatCalendarVal(valList) {
|
|
62
|
+
const res = []
|
|
63
|
+
valList.forEach((val) => {
|
|
64
|
+
const date = new Date(val)
|
|
65
|
+
const yyyy = date.getFullYear()
|
|
66
|
+
const mm = (`0${date.getMonth() + 1}`).slice(-2)
|
|
67
|
+
const dd = (`0${date.getDate()}`).slice(-2)
|
|
68
|
+
const hh = (`0${date.getHours()}`).slice(-2)
|
|
69
|
+
const min = (`0${date.getMinutes()}`).slice(-2)
|
|
70
|
+
const ss = (`0${date.getSeconds()}`).slice(-2)
|
|
71
|
+
res.push(`${yyyy}-${mm}-${dd} ${hh}:${min}:${ss}`)
|
|
72
|
+
})
|
|
73
|
+
return res
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// 打开日期选择器并获取值
|
|
77
|
+
function getRangePickerValue(item, index) {
|
|
78
|
+
if (item.value)
|
|
79
|
+
calendarVal.value = item.calendar
|
|
80
|
+
calendarShow.value = true
|
|
81
|
+
rangePickerIndex.value = index
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// 选择日期
|
|
85
|
+
function calendarValueOnConfirm(value) {
|
|
86
|
+
calendarVal.value = value
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// 取消选择日期
|
|
90
|
+
function calendarValueOnCancel() {
|
|
91
|
+
calendarVal.value = rangePickerList.value[rangePickerIndex.value].calendar
|
|
92
|
+
calendarShow.value = false
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// 更新日期值
|
|
96
|
+
function updateRangePickerValue() {
|
|
97
|
+
rangePickerList.value[rangePickerIndex.value].value = formatCalendarVal(calendarVal.value)
|
|
98
|
+
rangePickerList.value[rangePickerIndex.value].calendar = calendarVal.value
|
|
99
|
+
// 给条件参数赋值
|
|
100
|
+
const key = rangePickerList.value[rangePickerIndex.value].model
|
|
101
|
+
conditionParams.value[key] = formatCalendarVal(calendarVal.value)
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// 重置某个选项
|
|
105
|
+
function resetOptionItem(type, item) {
|
|
106
|
+
switch (type) {
|
|
107
|
+
case 'rangePicker':
|
|
108
|
+
item.value = undefined
|
|
109
|
+
item.calendar = undefined
|
|
110
|
+
break
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// 重置所有选项
|
|
115
|
+
function resetOption() {
|
|
116
|
+
currentOrderVal.value = undefined
|
|
117
|
+
currentSortordVal.value = undefined
|
|
118
|
+
// 条件参数
|
|
119
|
+
conditionParams.value = {}
|
|
120
|
+
// 日期选择器
|
|
121
|
+
calendarVal.value = []
|
|
122
|
+
rangePickerList.value.forEach((item) => {
|
|
123
|
+
item.value = undefined
|
|
124
|
+
item.calendar = undefined
|
|
125
|
+
})
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
function checkOrderOption() {
|
|
129
|
+
let isCheck = true
|
|
130
|
+
if (currentOrderVal.value) {
|
|
131
|
+
if (!currentSortordVal.value) {
|
|
132
|
+
showFailToast('排序规则不能为空')
|
|
133
|
+
isCheck = false
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
else if (currentSortordVal.value) {
|
|
137
|
+
if (!currentOrderVal.value) {
|
|
138
|
+
showFailToast('排序字段不能为空')
|
|
139
|
+
isCheck = false
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
return isCheck
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// 确认筛选条件
|
|
146
|
+
function confirmOption() {
|
|
147
|
+
const isCheck = checkOrderOption()
|
|
148
|
+
if (isCheck) {
|
|
149
|
+
const isEmptyObject = Object.keys(conditionParams.value).length === 0
|
|
150
|
+
emit('update:conditionParams', isEmptyObject ? undefined : conditionParams.value)
|
|
151
|
+
emit('onRefresh', {})
|
|
152
|
+
listFilterMenu.value.toggle(false)
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
onMounted(() => {
|
|
157
|
+
currentOrderVal.value = orderVal
|
|
158
|
+
currentSortordVal.value = sortordVal
|
|
159
|
+
disposalData()
|
|
160
|
+
// 处理最大日期 —— 6个月之后
|
|
161
|
+
const now = new Date()
|
|
162
|
+
now.setMonth(now.getMonth() + 6)
|
|
163
|
+
maxDate.value = now
|
|
164
|
+
})
|
|
165
|
+
|
|
166
|
+
watch(() => currentOrderVal.value, (val) => {
|
|
167
|
+
emit('update:orderVal', val)
|
|
168
|
+
})
|
|
169
|
+
|
|
170
|
+
watch(() => currentSortordVal.value, (val) => {
|
|
171
|
+
emit('update:sortordVal', val)
|
|
172
|
+
})
|
|
173
|
+
|
|
174
|
+
// 整理数据formQuery
|
|
175
|
+
function disposalData() {
|
|
176
|
+
rangePickerList.value = formQuery.filter((item) => {
|
|
177
|
+
return item.type === 'rangePicker'
|
|
178
|
+
})
|
|
179
|
+
}
|
|
180
|
+
</script>
|
|
181
|
+
|
|
182
|
+
<template>
|
|
183
|
+
<div id="XCellListFilter">
|
|
184
|
+
<VanDropdownMenu :close-on-click-outside="false">
|
|
185
|
+
<VanDropdownItem ref="listFilterMenu">
|
|
186
|
+
<template #title>
|
|
187
|
+
<VanIcon name="filter-o" size="20" />
|
|
188
|
+
</template>
|
|
189
|
+
<div class="order-condition">
|
|
190
|
+
<VanRow justify="space-between" class="filter-title">
|
|
191
|
+
<VanCol span="10">
|
|
192
|
+
排序字段
|
|
193
|
+
</VanCol>
|
|
194
|
+
<VanCol span="2">
|
|
195
|
+
<div class="reset-item" @click.stop="currentOrderVal = undefined">
|
|
196
|
+
重置
|
|
197
|
+
</div>
|
|
198
|
+
</VanCol>
|
|
199
|
+
</VanRow>
|
|
200
|
+
<VanRadioGroup v-model="currentOrderVal">
|
|
201
|
+
<VanRadio
|
|
202
|
+
v-for="(item) in orderList"
|
|
203
|
+
:key="item.value"
|
|
204
|
+
:name="item.value"
|
|
205
|
+
@click="currentOrderVal = item.value"
|
|
206
|
+
>
|
|
207
|
+
<VanButton type="default">
|
|
208
|
+
<span :class="currentOrderVal === item.value ? 'filter-active' : ''">{{ item.title }}</span>
|
|
209
|
+
</VanButton>
|
|
210
|
+
</VanRadio>
|
|
211
|
+
</VanRadioGroup>
|
|
212
|
+
<VanRow justify="space-between" class="filter-title">
|
|
213
|
+
<VanCol span="10">
|
|
214
|
+
排序规则
|
|
215
|
+
</VanCol>
|
|
216
|
+
<VanCol span="2">
|
|
217
|
+
<div class="reset-item" @click.stop="currentSortordVal = undefined">
|
|
218
|
+
重置
|
|
219
|
+
</div>
|
|
220
|
+
</VanCol>
|
|
221
|
+
</VanRow>
|
|
222
|
+
<VanRadioGroup v-model="currentSortordVal">
|
|
223
|
+
<VanRadio
|
|
224
|
+
v-for="(item) in sortordList"
|
|
225
|
+
:key="item.value"
|
|
226
|
+
:name="item.value"
|
|
227
|
+
@click="currentSortordVal = item.value"
|
|
228
|
+
>
|
|
229
|
+
<VanButton type="default">
|
|
230
|
+
<span :class="currentSortordVal === item.value ? 'filter-active' : ''">{{ item.title }}</span>
|
|
231
|
+
</VanButton>
|
|
232
|
+
</VanRadio>
|
|
233
|
+
</VanRadioGroup>
|
|
234
|
+
<div v-for="(item, index) in rangePickerList" :key="item.model" class="range-picker-list" @click="getRangePickerValue(item, index)">
|
|
235
|
+
<VanRow justify="space-between" class="range-picker-title">
|
|
236
|
+
<VanCol span="10">
|
|
237
|
+
{{ item.name }}
|
|
238
|
+
</VanCol>
|
|
239
|
+
<VanCol span="2">
|
|
240
|
+
<div class="reset-item" @click.stop="resetOptionItem('rangePicker', item)">
|
|
241
|
+
重置
|
|
242
|
+
</div>
|
|
243
|
+
</VanCol>
|
|
244
|
+
</VanRow>
|
|
245
|
+
<div :class="item.value ? 'active-picker-time range-picker-time' : 'range-picker-time'">
|
|
246
|
+
{{ item.value ? item.value[0].substr(0, 10) : '开始时间' }}
|
|
247
|
+
</div>
|
|
248
|
+
<span>~</span>
|
|
249
|
+
<div :class="item.value ? 'active-picker-time range-picker-time' : 'range-picker-time'">
|
|
250
|
+
{{ item.value ? item.value[1].substr(0, 10) : '结束时间' }}
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
<div class="operations-panel">
|
|
255
|
+
<VanButton type="default" @click="resetOption">
|
|
256
|
+
重置
|
|
257
|
+
</VanButton>
|
|
258
|
+
<VanButton type="primary" @click="confirmOption">
|
|
259
|
+
确认
|
|
260
|
+
</VanButton>
|
|
261
|
+
</div>
|
|
262
|
+
</VanDropdownItem>
|
|
263
|
+
</VanDropdownMenu>
|
|
264
|
+
<!-- 日期选择器 —— 日历 -->
|
|
265
|
+
<div class="rangePicker-comp-box">
|
|
266
|
+
<VanDialog
|
|
267
|
+
v-model:show="calendarShow"
|
|
268
|
+
show-cancel-button
|
|
269
|
+
@confirm="updateRangePickerValue"
|
|
270
|
+
>
|
|
271
|
+
<VanCalendar
|
|
272
|
+
:poppable="false"
|
|
273
|
+
:show-confirm="false"
|
|
274
|
+
switch-mode="year-month"
|
|
275
|
+
:min-date="minDate"
|
|
276
|
+
:max-date="maxDate"
|
|
277
|
+
:default-date="calendarVal"
|
|
278
|
+
type="range"
|
|
279
|
+
@confirm="calendarValueOnConfirm"
|
|
280
|
+
@cancel="calendarValueOnCancel"
|
|
281
|
+
/>
|
|
282
|
+
</VanDialog>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
</template>
|
|
286
|
+
|
|
287
|
+
<style scoped lang="less">
|
|
288
|
+
#XCellListFilter {
|
|
289
|
+
.order-condition {
|
|
290
|
+
padding-bottom: 10px;
|
|
291
|
+
max-height: calc(var(--van-picker-toolbar-height) + var(--van-padding-base) + var(--van-tabs-line-height) + 35vh);
|
|
292
|
+
overflow-y: auto;
|
|
293
|
+
width: 100%;
|
|
294
|
+
background-color: white;
|
|
295
|
+
.filter-title {
|
|
296
|
+
height: 2rem;
|
|
297
|
+
font-size: 13px;
|
|
298
|
+
font-weight: 600;
|
|
299
|
+
line-height: 2rem;
|
|
300
|
+
margin: 5px 1rem 1px 1rem;
|
|
301
|
+
color: black;
|
|
302
|
+
}
|
|
303
|
+
:deep(.van-radio__icon) {
|
|
304
|
+
display: none;
|
|
305
|
+
}
|
|
306
|
+
:deep(.van-radio) {
|
|
307
|
+
display: inline;
|
|
308
|
+
}
|
|
309
|
+
:deep(.van-button--default) {
|
|
310
|
+
background: #f8f8f8;
|
|
311
|
+
border-color: #f8f8f8;
|
|
312
|
+
}
|
|
313
|
+
.filter-active {
|
|
314
|
+
color: #1989fa;
|
|
315
|
+
font-weight: 600;
|
|
316
|
+
}
|
|
317
|
+
:deep(.van-button) {
|
|
318
|
+
display: inline-block;
|
|
319
|
+
height: 2rem;
|
|
320
|
+
font-size: 13px;
|
|
321
|
+
font-weight: 500;
|
|
322
|
+
}
|
|
323
|
+
:deep(.van-cell) {
|
|
324
|
+
padding: 0 0 1rem 0;
|
|
325
|
+
}
|
|
326
|
+
:deep(.van-icon) {
|
|
327
|
+
display: none;
|
|
328
|
+
}
|
|
329
|
+
.range-picker-list {
|
|
330
|
+
.range-picker-title {
|
|
331
|
+
height: 2rem;
|
|
332
|
+
font-size: 13px;
|
|
333
|
+
font-weight: 600;
|
|
334
|
+
line-height: 2rem;
|
|
335
|
+
margin: 5px 1rem 1px 1rem;
|
|
336
|
+
color: black;
|
|
337
|
+
}
|
|
338
|
+
.range-picker-time {
|
|
339
|
+
display: inline-block;
|
|
340
|
+
background: #f8f8f8;
|
|
341
|
+
border-radius: 8px;
|
|
342
|
+
font-size: 13px;
|
|
343
|
+
margin: 0 1rem;
|
|
344
|
+
height: 2rem;
|
|
345
|
+
line-height: 2rem;
|
|
346
|
+
width: 40vw;
|
|
347
|
+
text-align: center;
|
|
348
|
+
}
|
|
349
|
+
/* 已完成选择的时间 */
|
|
350
|
+
.active-picker-time {
|
|
351
|
+
color: #1989fa;
|
|
352
|
+
font-weight: 600;
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
/* 重置元素按钮 */
|
|
356
|
+
.reset-item {
|
|
357
|
+
font-weight: 500;
|
|
358
|
+
color: #1989fa;
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
/* 下拉菜单的操作面板 */
|
|
362
|
+
.operations-panel {
|
|
363
|
+
display: flex;
|
|
364
|
+
overflow: hidden;
|
|
365
|
+
user-select: none;
|
|
366
|
+
padding: 10px;
|
|
367
|
+
|
|
368
|
+
& > .van-button {
|
|
369
|
+
flex: 1;
|
|
370
|
+
margin: 0;
|
|
371
|
+
|
|
372
|
+
&:first-child {
|
|
373
|
+
margin-right: 12px;
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
/* 时间范围组件 */
|
|
378
|
+
.rangePicker-comp-box {
|
|
379
|
+
:deep(.van-calendar) {
|
|
380
|
+
height: 58vh;
|
|
381
|
+
}
|
|
382
|
+
:deep(.van-calendar__header-title) {
|
|
383
|
+
background-color: rgba(25, 137, 250, 0.1);
|
|
384
|
+
height: 8vh;
|
|
385
|
+
line-height: 8vh;
|
|
386
|
+
}
|
|
387
|
+
:deep(.van-calendar__month-mark) {
|
|
388
|
+
color: rgba(25, 137, 250, 0.1);
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
</style>
|
|
@@ -6,11 +6,11 @@ import { useRouter } from 'vue-router'
|
|
|
6
6
|
|
|
7
7
|
const router = useRouter()
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
const idKey = ref('t_id')
|
|
9
|
+
const idKey = ref('o_id')
|
|
10
|
+
// const idKey = ref('t_id')
|
|
11
11
|
|
|
12
|
-
const configName = ref('测试crud-移动端')
|
|
13
|
-
|
|
12
|
+
// const configName = ref('测试crud-移动端')
|
|
13
|
+
const configName = ref('workPlanQueryParams_new')
|
|
14
14
|
|
|
15
15
|
function toDetail(item) {
|
|
16
16
|
router.push({
|
|
@@ -54,7 +54,10 @@ function handleSubmit() {
|
|
|
54
54
|
if (compatible === 'OA')
|
|
55
55
|
afterGeneral(data)
|
|
56
56
|
else
|
|
57
|
-
|
|
57
|
+
if (data.resources.data)
|
|
58
|
+
afterGeneral(data.resources.data)
|
|
59
|
+
else
|
|
60
|
+
afterGeneral(data.resources)
|
|
58
61
|
|
|
59
62
|
const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
|
|
60
63
|
closeToast()
|
package/vite.config.ts
CHANGED
|
@@ -12,9 +12,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
|
|
|
12
12
|
|
|
13
13
|
const appProxys = {}
|
|
14
14
|
|
|
15
|
-
const v4Server = 'http://192.168.50.67:
|
|
16
|
-
const localSystem = 'http://127.0.0.1:9014'
|
|
17
|
-
const localGateway = 'http://127.0.0.1:8080'
|
|
15
|
+
const v4Server = 'http://192.168.50.67:31567'
|
|
18
16
|
const v3Server = 'http://123.60.214.109:8406'
|
|
19
17
|
const OSSServerDev = 'http://192.168.50.67:30351'
|
|
20
18
|
// const OSSServerProd = 'http://192.168.50.67:31351'
|
|
@@ -27,9 +25,19 @@ export default ({ mode }: ConfigEnv): UserConfig => {
|
|
|
27
25
|
host: true,
|
|
28
26
|
port: 7190,
|
|
29
27
|
proxy: Object.assign({
|
|
30
|
-
'/api/af-system': {
|
|
31
|
-
|
|
32
|
-
|
|
28
|
+
'/api/af-system/resource': {
|
|
29
|
+
target: v4Server,
|
|
30
|
+
ws: false,
|
|
31
|
+
changeOrigin: true,
|
|
32
|
+
},
|
|
33
|
+
'/api/invoice': {
|
|
34
|
+
target: 'http://219.153.176.6:8400/',
|
|
35
|
+
rewrite: (path: string) => path.replace(/^\/api\//, '/'),
|
|
36
|
+
ws: false,
|
|
37
|
+
changeOrigin: true,
|
|
38
|
+
},
|
|
39
|
+
'/api/af-system/entity/t_files': {
|
|
40
|
+
target: v3Server,
|
|
33
41
|
ws: false,
|
|
34
42
|
changeOrigin: true,
|
|
35
43
|
},
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg t="1709012733330" class="icon" viewBox="0 0 1030 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5407" width="200" height="200"><path d="M389.426434 470.716542h-212.80133a71.501247 71.501247 0 0 1-71.501247-71.075644v-212.80133a71.92685 71.92685 0 0 1 71.501247-71.501247h212.80133a71.92685 71.92685 0 0 1 71.501247 71.501247v212.80133A71.501247 71.501247 0 0 1 389.426434 470.716542z m-212.80133-313.243558a29.366584 29.366584 0 0 0-28.940981 28.940981v212.80133a28.940981 28.940981 0 0 0 28.940981 28.940981h212.80133a28.940981 28.940981 0 0 0 28.940981-28.940981v-212.80133a29.366584 29.366584 0 0 0-28.940981-28.940981zM844.82128 470.716542h-212.80133a71.501247 71.501247 0 0 1-71.501247-71.501247v-212.80133a71.92685 71.92685 0 0 1 71.501247-71.501247h212.80133a71.92685 71.92685 0 0 1 71.501247 71.501247v212.80133A71.501247 71.501247 0 0 1 844.82128 470.716542z m-212.80133-313.243558a29.366584 29.366584 0 0 0-28.940981 28.940981v212.80133a28.940981 28.940981 0 0 0 28.940981 28.940981h212.80133a28.940981 28.940981 0 0 0 28.940981-28.940981v-212.80133a29.366584 29.366584 0 0 0-28.940981-28.940981zM389.426434 911.215295h-212.80133a71.92685 71.92685 0 0 1-71.501247-71.501247v-212.80133A71.501247 71.501247 0 0 1 176.625104 555.837074h212.80133a71.501247 71.501247 0 0 1 71.501247 71.501247v212.80133a71.92685 71.92685 0 0 1-71.501247 71.075644z m-212.80133-312.817955a28.940981 28.940981 0 0 0-28.940981 28.940981v212.80133a29.366584 29.366584 0 0 0 28.940981 28.940981h212.80133a29.366584 29.366584 0 0 0 28.940981-28.940981v-212.80133a28.940981 28.940981 0 0 0-28.940981-28.940981zM844.82128 911.215295h-212.80133a71.92685 71.92685 0 0 1-71.501247-71.501247v-212.80133A71.501247 71.501247 0 0 1 632.01995 555.837074h212.80133a71.501247 71.501247 0 0 1 71.501247 71.501247v212.80133a71.92685 71.92685 0 0 1-71.501247 71.075644z m-212.80133-313.243558a28.940981 28.940981 0 0 0-28.940981 28.940981v212.80133a29.366584 29.366584 0 0 0 28.940981 28.940981h212.80133a29.366584 29.366584 0 0 0 28.940981-28.940981v-212.80133a28.940981 28.940981 0 0 0-28.940981-28.940981z" p-id="5408"></path></svg>
|