sh-view 2.7.9 → 2.8.0
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 +2 -2
- package/packages/components/sh-calendar/index.vue +167 -36
- package/packages/components/sh-date/index.vue +37 -9
- package/packages/components/sh-icon/css/font/icons.scss +34 -34
- package/packages/components/sh-image/index.vue +2 -1
- package/packages/components/sh-table/js/tableMethods.js +12 -20
- package/packages/components/sh-tree/components/table-tree.vue +0 -1
- package/packages/components/sh-tree/index.vue +228 -228
- package/packages/vxeTable/css/index.scss +30 -6
- package/packages/vxeTable/render/filters/vxe-filter-input.vue +26 -25
- package/packages/vxeTable/render/filters/vxe-filter-time.vue +26 -0
- package/packages/vxeTable/render/globalRenders.jsx +26 -7
- package/packages/vxeTable/render/mixin/filter-hooks.js +31 -13
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sh-view",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.8.0",
|
|
4
4
|
"description": "基于vxe-table二次封装,更包含Alert,Badge,Card,CodeEditor,Col,Corner,CountTo,Drawer,Empty,Form,Header,Icon,List,Loading,Modal,Noticebar,Poptip,Progress,PullRefresh,Query,Result,Row,Split,Grid,Table,Tabs,Tag,Toolbar,Tree,Upload,WaterFall,WaterMark等丰富组件库",
|
|
5
5
|
"main": "packages/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"vue": "^3.3.4",
|
|
36
36
|
"vue-masonry": "^0.16.0",
|
|
37
37
|
"vue-router": "^4.2.4",
|
|
38
|
-
"vxe-table": "^4.5.
|
|
38
|
+
"vxe-table": "^4.5.13",
|
|
39
39
|
"vxe-table-plugin-export-pdf": "^3.0.4",
|
|
40
40
|
"vxe-table-plugin-export-xlsx": "^3.0.5",
|
|
41
41
|
"xe-clipboard": "^1.10.2",
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="sh-calendar">
|
|
3
3
|
<div v-if="header" class="sh-calendar-row sh-calendar-head">
|
|
4
|
-
<div class="info">
|
|
4
|
+
<div class="info">
|
|
5
|
+
<sh-select v-if="type !== 'year'" v-bind="yearSelectConfig" @change="onYearChange" />
|
|
6
|
+
<sh-select v-if="!['month', 'year'].includes(type)" v-bind="monthSelectConfig" @change="onMonthChange"></sh-select>
|
|
7
|
+
</div>
|
|
5
8
|
<div class="extra">
|
|
6
9
|
<template v-for="item in headerHandles" :key="item.code">
|
|
7
10
|
<span class="sh-calendar-btn" @click="handleBtn(item)"><i :class="item.icon"></i></span>
|
|
@@ -9,7 +12,7 @@
|
|
|
9
12
|
</div>
|
|
10
13
|
</div>
|
|
11
14
|
<table class="sh-calendar-table" :class="{ 'sh-calendar-pulldown': pulldown }" v-bind="tableConfig">
|
|
12
|
-
<thead>
|
|
15
|
+
<thead v-if="showHeader">
|
|
13
16
|
<tr>
|
|
14
17
|
<template v-for="(head, headIndex) in headers" :key="headIndex">
|
|
15
18
|
<th :style="{ textAlign: headerAlign }">{{ head.label }}</th>
|
|
@@ -17,13 +20,13 @@
|
|
|
17
20
|
</tr>
|
|
18
21
|
</thead>
|
|
19
22
|
<tbody @mouseleave="dateMouseleaveEvent">
|
|
20
|
-
<template v-for="(row, rowIndex) in
|
|
23
|
+
<template v-for="(row, rowIndex) in bodyDatas" :key="rowIndex">
|
|
21
24
|
<tr>
|
|
22
25
|
<template v-for="(item, itemIndex) in row" :key="itemIndex">
|
|
23
26
|
<td :class="getCellClass(item)" @mouseenter="dateMouseenterEvent(item)" @click="dateSelectEvent(item)">
|
|
24
27
|
<slot name="cell" v-bind="item">
|
|
25
28
|
<div class="sh-calendar-cell" :style="{ textAlign: align }">
|
|
26
|
-
<div class="sh-calendar-cell-head">{{ item.label }}</div>
|
|
29
|
+
<div class="sh-calendar-cell-head" :class="{ 'is-month': type === 'month' }">{{ item.label }}</div>
|
|
27
30
|
<div v-if="note" class="sh-calendar-cell-body" :style="{ height: noteHeight }">{{ noteMethod(item) }}</div>
|
|
28
31
|
<div v-if="festival" class="sh-calendar-cell-foot">{{ getLunarDate(item.date) }}</div>
|
|
29
32
|
</div>
|
|
@@ -73,7 +76,7 @@ export default defineComponent({
|
|
|
73
76
|
name: 'ShCalendar',
|
|
74
77
|
props: {
|
|
75
78
|
modelValue: [String, Number, Date],
|
|
76
|
-
type: { type: String, default: 'day' }, // day, month, year
|
|
79
|
+
type: { type: String, default: 'day' }, // day, month, year
|
|
77
80
|
startDay: { type: [String, Number], default: 1 },
|
|
78
81
|
headerAlign: { type: String, default: 'center' },
|
|
79
82
|
align: { type: String, default: 'center' },
|
|
@@ -99,6 +102,8 @@ export default defineComponent({
|
|
|
99
102
|
const { $vUtils } = proxy
|
|
100
103
|
const { emit, slots } = context
|
|
101
104
|
|
|
105
|
+
const yearSize = 12
|
|
106
|
+
const monthSize = 12
|
|
102
107
|
const headerHandles = [
|
|
103
108
|
{ code: 'prev', icon: 'vxe-icon-caret-left' },
|
|
104
109
|
{ code: 'current', icon: 'vxe-icon-dot' },
|
|
@@ -133,6 +138,55 @@ export default defineComponent({
|
|
|
133
138
|
const dateValue = computeDateValue.value
|
|
134
139
|
return dateValue ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0
|
|
135
140
|
})
|
|
141
|
+
|
|
142
|
+
const computeYearList = computed(() => {
|
|
143
|
+
const { selectMonth, currentDate } = reactData
|
|
144
|
+
const years = []
|
|
145
|
+
if (selectMonth && currentDate) {
|
|
146
|
+
const currFullYear = currentDate.getFullYear()
|
|
147
|
+
const selectFullYear = selectMonth.getFullYear()
|
|
148
|
+
const startYearDate = new Date(selectFullYear - (selectFullYear % yearSize), 0, 1)
|
|
149
|
+
for (let index = -4; index < yearSize + 4; index++) {
|
|
150
|
+
const date = $vUtils.getWhatYear(startYearDate, index, 'first')
|
|
151
|
+
const itemFullYear = date.getFullYear()
|
|
152
|
+
years.push({
|
|
153
|
+
date,
|
|
154
|
+
isCurrent: true,
|
|
155
|
+
isPrev: index < 0,
|
|
156
|
+
isNow: currFullYear === itemFullYear,
|
|
157
|
+
isNext: index >= yearSize,
|
|
158
|
+
year: itemFullYear,
|
|
159
|
+
label: `${itemFullYear}年`
|
|
160
|
+
})
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
return years
|
|
164
|
+
})
|
|
165
|
+
const computeMonthList = computed(() => {
|
|
166
|
+
const { selectMonth, currentDate } = reactData
|
|
167
|
+
const months = []
|
|
168
|
+
if (selectMonth && currentDate) {
|
|
169
|
+
const currFullYear = currentDate.getFullYear()
|
|
170
|
+
const currMonth = currentDate.getMonth()
|
|
171
|
+
const selFullYear = $vUtils.getWhatYear(selectMonth, 0, 'first').getFullYear()
|
|
172
|
+
for (let index = 0; index < monthSize; index++) {
|
|
173
|
+
const date = $vUtils.getWhatYear(selectMonth, 0, index)
|
|
174
|
+
const itemFullYear = date.getFullYear()
|
|
175
|
+
const itemMonth = date.getMonth()
|
|
176
|
+
const isPrev = itemFullYear < selFullYear
|
|
177
|
+
months.push({
|
|
178
|
+
date,
|
|
179
|
+
isPrev,
|
|
180
|
+
isCurrent: itemFullYear === selFullYear,
|
|
181
|
+
isNow: itemFullYear === currFullYear && itemMonth === currMonth,
|
|
182
|
+
isNext: !isPrev && itemFullYear > selFullYear,
|
|
183
|
+
month: itemMonth,
|
|
184
|
+
label: `${itemMonth + 1}月`
|
|
185
|
+
})
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
return months
|
|
189
|
+
})
|
|
136
190
|
const computeDayList = computed(() => {
|
|
137
191
|
const { selectMonth, currentDate } = reactData
|
|
138
192
|
const days = []
|
|
@@ -159,13 +213,13 @@ export default defineComponent({
|
|
|
159
213
|
isCurrent: itemFullYear === selFullYear && itemMonth === selMonth,
|
|
160
214
|
isNow: itemFullYear === currFullYear && itemMonth === currMonth && itemDate === currDate,
|
|
161
215
|
isNext: !isPrev && selMonth !== itemMonth,
|
|
216
|
+
day: itemDate,
|
|
162
217
|
label: itemDate
|
|
163
218
|
})
|
|
164
219
|
}
|
|
165
220
|
}
|
|
166
221
|
return days
|
|
167
222
|
})
|
|
168
|
-
|
|
169
223
|
// 以下为日历需要
|
|
170
224
|
const tableConfig = computed(() => ({ cellspacing: 0, cellpadding: 0, border: 0 }))
|
|
171
225
|
const headers = computed(() => {
|
|
@@ -174,9 +228,13 @@ export default defineComponent({
|
|
|
174
228
|
return { value: day, label: props.weeks[day] }
|
|
175
229
|
})
|
|
176
230
|
})
|
|
177
|
-
const
|
|
178
|
-
|
|
179
|
-
|
|
231
|
+
const bodyDatas = computed(() => {
|
|
232
|
+
if ('month' === props.type) {
|
|
233
|
+
return $vUtils.chunk(computeMonthList.value, 3)
|
|
234
|
+
} else if ('year' === props.type) {
|
|
235
|
+
return $vUtils.chunk(computeYearList.value, 4)
|
|
236
|
+
}
|
|
237
|
+
return $vUtils.chunk(computeDayList.value, 7)
|
|
180
238
|
})
|
|
181
239
|
const computeDateValue = computed(() => {
|
|
182
240
|
const { inputValue } = reactData
|
|
@@ -189,8 +247,40 @@ export default defineComponent({
|
|
|
189
247
|
}
|
|
190
248
|
return val
|
|
191
249
|
})
|
|
192
|
-
const
|
|
193
|
-
const
|
|
250
|
+
const showHeader = computed(() => !['month', 'year'].includes(props.type))
|
|
251
|
+
const yearValue = computed(() => $vUtils.toDateString(reactData.selectMonth, 'yyyy'))
|
|
252
|
+
const monthValue = computed(() => $vUtils.toDateString(reactData.selectMonth, 'MM'))
|
|
253
|
+
const dayValue = computed(() => $vUtils.toDateString(reactData.selectMonth, 'dd'))
|
|
254
|
+
const yearSelectConfig = computed(() => {
|
|
255
|
+
const options = []
|
|
256
|
+
for (let index = 1880; index < 2116; index++) {
|
|
257
|
+
options.push({
|
|
258
|
+
value: index + '',
|
|
259
|
+
label: `${index}年`
|
|
260
|
+
})
|
|
261
|
+
}
|
|
262
|
+
return {
|
|
263
|
+
modelValue: yearValue.value,
|
|
264
|
+
options: options,
|
|
265
|
+
filterable: true,
|
|
266
|
+
style: { width: '85px' }
|
|
267
|
+
}
|
|
268
|
+
})
|
|
269
|
+
const monthSelectConfig = computed(() => {
|
|
270
|
+
const options = []
|
|
271
|
+
for (let index = 1; index < 13; index++) {
|
|
272
|
+
options.push({
|
|
273
|
+
value: index + '',
|
|
274
|
+
label: `${index}月`
|
|
275
|
+
})
|
|
276
|
+
}
|
|
277
|
+
return {
|
|
278
|
+
modelValue: monthValue.value,
|
|
279
|
+
options: options,
|
|
280
|
+
filterable: true,
|
|
281
|
+
style: { width: '75px' }
|
|
282
|
+
}
|
|
283
|
+
})
|
|
194
284
|
const lunarInfo = computed(() => {
|
|
195
285
|
let dayDate = reactData.inputValue || reactData.currentDate
|
|
196
286
|
let lunarDate = Lunar.fromDate(dayDate)
|
|
@@ -216,12 +306,7 @@ export default defineComponent({
|
|
|
216
306
|
emit('change', date)
|
|
217
307
|
}
|
|
218
308
|
const dateSelectItem = date => {
|
|
219
|
-
|
|
220
|
-
if (type === 'month') {
|
|
221
|
-
} else if (type === 'year') {
|
|
222
|
-
} else {
|
|
223
|
-
dateChange(date)
|
|
224
|
-
}
|
|
309
|
+
dateChange(date)
|
|
225
310
|
}
|
|
226
311
|
const dateCheckMonth = date => {
|
|
227
312
|
const month = $vUtils.getWhatMonth(date, 0, 'first')
|
|
@@ -229,13 +314,29 @@ export default defineComponent({
|
|
|
229
314
|
reactData.selectMonth = month
|
|
230
315
|
}
|
|
231
316
|
}
|
|
232
|
-
const dateMoveDay =
|
|
233
|
-
if (isDateDisabled(date)) return
|
|
317
|
+
const dateMoveDay = offsetDay => {
|
|
318
|
+
if (isDateDisabled({ date: offsetDay })) return
|
|
234
319
|
const dayList = computeDayList.value
|
|
235
|
-
if (!dayList.some(item => $vUtils.isDateSame(item.date,
|
|
236
|
-
dateCheckMonth(
|
|
320
|
+
if (!dayList.some(item => $vUtils.isDateSame(item.date, offsetDay, 'yyyyMMdd'))) {
|
|
321
|
+
dateCheckMonth(offsetDay)
|
|
237
322
|
}
|
|
238
|
-
dateParseValue(
|
|
323
|
+
dateParseValue(offsetDay)
|
|
324
|
+
}
|
|
325
|
+
const dateMoveMonth = offsetMonth => {
|
|
326
|
+
if (isDateDisabled({ date: offsetMonth })) return
|
|
327
|
+
const monthList = computeMonthList.value
|
|
328
|
+
if (!monthList.some(item => $vUtils.isDateSame(item.date, offsetMonth, 'yyyyMM'))) {
|
|
329
|
+
dateCheckMonth(offsetMonth)
|
|
330
|
+
}
|
|
331
|
+
dateParseValue(offsetMonth)
|
|
332
|
+
}
|
|
333
|
+
const dateMoveYear = offsetYear => {
|
|
334
|
+
if (isDateDisabled({ date: offsetYear })) return
|
|
335
|
+
const yearList = computeYearList.value
|
|
336
|
+
if (!yearList.some(item => $vUtils.isDateSame(item.date, offsetYear, 'yyyy'))) {
|
|
337
|
+
dateCheckMonth(offsetYear)
|
|
338
|
+
}
|
|
339
|
+
dateParseValue(offsetYear)
|
|
239
340
|
}
|
|
240
341
|
const dateSelectEvent = item => {
|
|
241
342
|
if (isDateDisabled(item)) return
|
|
@@ -243,13 +344,12 @@ export default defineComponent({
|
|
|
243
344
|
}
|
|
244
345
|
const dateMouseenterEvent = item => {
|
|
245
346
|
if (isDateDisabled(item)) return
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
// dateMoveYear(item.date)
|
|
347
|
+
if (props.type === 'month') {
|
|
348
|
+
dateMoveMonth(item.date)
|
|
349
|
+
} else if (props.type === 'year') {
|
|
350
|
+
dateMoveYear(item.date)
|
|
251
351
|
} else {
|
|
252
|
-
dateMoveDay(item)
|
|
352
|
+
dateMoveDay(item.date)
|
|
253
353
|
}
|
|
254
354
|
}
|
|
255
355
|
const dateMouseleaveEvent = () => {
|
|
@@ -285,8 +385,10 @@ export default defineComponent({
|
|
|
285
385
|
const getCellClass = item => {
|
|
286
386
|
const { panelValue } = reactData
|
|
287
387
|
const dateValue = computeDateValue.value
|
|
288
|
-
|
|
289
|
-
|
|
388
|
+
let matchFormat = 'yyyyMMdd'
|
|
389
|
+
if ('month' === props.type) matchFormat = 'yyyyMM'
|
|
390
|
+
else if ('year' === props.type) matchFormat = 'yyyy'
|
|
391
|
+
const ymd = $vUtils.toDateString(item.date, 'yyyyMMdd')
|
|
290
392
|
const lunarDate = Lunar.fromDate(item.date)
|
|
291
393
|
const holiday = HolidayUtil.getHoliday(ymd)
|
|
292
394
|
let rest = false
|
|
@@ -309,12 +411,16 @@ export default defineComponent({
|
|
|
309
411
|
const handleBtn = ({ code }) => {
|
|
310
412
|
try {
|
|
311
413
|
const { currentDate, selectMonth } = reactData
|
|
414
|
+
let getName = 'getWhatMonth'
|
|
415
|
+
let getSize = 1
|
|
416
|
+
if (['month', 'year'].includes(props.type)) getName = 'getWhatYear'
|
|
417
|
+
if (['year'].includes(props.type)) getSize = yearSize
|
|
312
418
|
switch (code) {
|
|
313
419
|
case 'prev':
|
|
314
|
-
reactData.selectMonth = $vUtils
|
|
420
|
+
reactData.selectMonth = $vUtils[getName](selectMonth, getSize * -1, 'first')
|
|
315
421
|
break
|
|
316
422
|
case 'next':
|
|
317
|
-
reactData.selectMonth = $vUtils
|
|
423
|
+
reactData.selectMonth = $vUtils[getName](selectMonth, getSize, 'first')
|
|
318
424
|
break
|
|
319
425
|
case 'current':
|
|
320
426
|
reactData.selectMonth = $vUtils.getWhatMonth(currentDate, 0, 'first')
|
|
@@ -334,7 +440,23 @@ export default defineComponent({
|
|
|
334
440
|
// 初始化
|
|
335
441
|
const initValue = () => {
|
|
336
442
|
reactData.currentDate = $vUtils.getWhatDay(Date.now(), 0, 'first')
|
|
337
|
-
reactData.selectMonth = $vUtils.getWhatMonth(reactData.currentDate, 0, 'first')
|
|
443
|
+
reactData.selectMonth = $vUtils.getWhatMonth(computeDateValue.value || reactData.currentDate, 0, 'first')
|
|
444
|
+
}
|
|
445
|
+
// 年度切换
|
|
446
|
+
const onYearChange = ({ value }) => {
|
|
447
|
+
const { selectMonth } = reactData
|
|
448
|
+
const selMonth = selectMonth.getMonth() + 1
|
|
449
|
+
const selDate = selectMonth.getDate()
|
|
450
|
+
const changeDate = `${value}-${selMonth}-${selDate}`
|
|
451
|
+
reactData.selectMonth = $vUtils.toStringDate(changeDate)
|
|
452
|
+
}
|
|
453
|
+
// 月份切换
|
|
454
|
+
const onMonthChange = ({ value }) => {
|
|
455
|
+
const { selectMonth } = reactData
|
|
456
|
+
const selYear = selectMonth.getFullYear()
|
|
457
|
+
const selDate = selectMonth.getDate()
|
|
458
|
+
const changeDate = `${selYear}-${value}-${selDate}`
|
|
459
|
+
reactData.selectMonth = $vUtils.toStringDate(changeDate)
|
|
338
460
|
}
|
|
339
461
|
|
|
340
462
|
onBeforeMount(() => {
|
|
@@ -349,13 +471,19 @@ export default defineComponent({
|
|
|
349
471
|
)
|
|
350
472
|
|
|
351
473
|
return {
|
|
474
|
+
reactData,
|
|
352
475
|
tableConfig,
|
|
476
|
+
yearSelectConfig,
|
|
477
|
+
monthSelectConfig,
|
|
353
478
|
headers,
|
|
354
|
-
|
|
355
|
-
monthInfo,
|
|
356
|
-
dayInfo,
|
|
479
|
+
bodyDatas,
|
|
357
480
|
lunarInfo,
|
|
358
481
|
headerHandles,
|
|
482
|
+
computeYearList,
|
|
483
|
+
computeMonthList,
|
|
484
|
+
showHeader,
|
|
485
|
+
onYearChange,
|
|
486
|
+
onMonthChange,
|
|
359
487
|
getLunarDate,
|
|
360
488
|
getCellClass,
|
|
361
489
|
handleBtn,
|
|
@@ -439,6 +567,9 @@ export default defineComponent({
|
|
|
439
567
|
& + .sh-calendar-cell-foot {
|
|
440
568
|
padding-top: 0;
|
|
441
569
|
}
|
|
570
|
+
&.is-month {
|
|
571
|
+
padding: 20px 5px;
|
|
572
|
+
}
|
|
442
573
|
}
|
|
443
574
|
&-body {
|
|
444
575
|
overflow: auto;
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
</template>
|
|
14
14
|
<template #dropdown>
|
|
15
15
|
<div class="sh-date-content">
|
|
16
|
-
<sh-calendar v-model="rangeValue[0]" v-bind="startCalendarConfig"></sh-calendar>
|
|
16
|
+
<sh-calendar v-model="rangeValue[0]" v-bind="startCalendarConfig" @change="onCalendarChange($event, 1)"></sh-calendar>
|
|
17
17
|
<div style="min-width: 10px"></div>
|
|
18
|
-
<sh-calendar v-model="rangeValue[1]" v-bind="endCalendarConfig"></sh-calendar>
|
|
18
|
+
<sh-calendar v-model="rangeValue[1]" v-bind="endCalendarConfig" @change="onCalendarChange($event, 2)"></sh-calendar>
|
|
19
19
|
</div>
|
|
20
20
|
</template>
|
|
21
21
|
</vxe-pulldown>
|
|
@@ -78,6 +78,8 @@ export default defineComponent({
|
|
|
78
78
|
transfer: Boolean,
|
|
79
79
|
// 个性化参数
|
|
80
80
|
range: Boolean,
|
|
81
|
+
rangeFormat: String,
|
|
82
|
+
autoBlur: { type: Boolean, default: true },
|
|
81
83
|
separator: { type: String, default: '至' },
|
|
82
84
|
startPlaceholder: { type: String, default: '起始日期' },
|
|
83
85
|
endPlaceholder: { type: String, default: '截止日期' },
|
|
@@ -121,18 +123,32 @@ export default defineComponent({
|
|
|
121
123
|
const pulldownConfig = computed(() => {
|
|
122
124
|
return Object.assign({ transfer: true }, props.pulldown)
|
|
123
125
|
})
|
|
126
|
+
const calendarFormat = computed(() => {
|
|
127
|
+
if (props.rangeFormat) return props.rangeFormat
|
|
128
|
+
else if (props.type === 'month') return 'yyyy-MM'
|
|
129
|
+
else if (props.type === 'year') return 'yyyy'
|
|
130
|
+
return props.valueFormat
|
|
131
|
+
})
|
|
124
132
|
const rangeInputConfig = computed(() => ({ type: 'text', readonly: true }))
|
|
125
133
|
const startInputConfig = computed(() => {
|
|
126
134
|
let startValue = rangeValue.value[0] || ''
|
|
127
|
-
let startLabel = $vUtils.toDateString(startValue,
|
|
135
|
+
let startLabel = $vUtils.toDateString(startValue, calendarFormat.value)
|
|
128
136
|
return { ...rangeInputConfig.value, value: startLabel, placeholder: props.startPlaceholder }
|
|
129
137
|
})
|
|
130
138
|
const endInputConfig = computed(() => {
|
|
131
139
|
let endValue = rangeValue.value[1] || ''
|
|
132
|
-
let endLabel = $vUtils.toDateString(endValue,
|
|
140
|
+
let endLabel = $vUtils.toDateString(endValue, calendarFormat.value)
|
|
133
141
|
return { ...rangeInputConfig.value, value: endLabel, placeholder: props.endPlaceholder }
|
|
134
142
|
})
|
|
135
|
-
const calendarConfig = computed(() =>
|
|
143
|
+
const calendarConfig = computed(() => {
|
|
144
|
+
return {
|
|
145
|
+
pulldown: true,
|
|
146
|
+
style: { height: '100%' },
|
|
147
|
+
align: 'center',
|
|
148
|
+
valueFormat: calendarFormat.value,
|
|
149
|
+
type: props.type
|
|
150
|
+
}
|
|
151
|
+
})
|
|
136
152
|
const startCalendarConfig = computed(() => {
|
|
137
153
|
let startValue = rangeValue.value[0] || ''
|
|
138
154
|
return {
|
|
@@ -175,12 +191,23 @@ export default defineComponent({
|
|
|
175
191
|
dispatch('blur')
|
|
176
192
|
}
|
|
177
193
|
|
|
194
|
+
const onCalendarChange = (date, type) => {
|
|
195
|
+
let valueList = rangeValue.value.filter(_ => _)
|
|
196
|
+
if (props.autoBlur && valueList.length === 2) {
|
|
197
|
+
pulldownValue.value = false
|
|
198
|
+
onHidePanel()
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
178
202
|
// 回调事件
|
|
179
203
|
const dispatch = (code, params) => {
|
|
180
|
-
if (
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
204
|
+
if (props.range) {
|
|
205
|
+
let formarValue = rangeValue.value.map(item => $vUtils.toDateString(item, calendarFormat.value))
|
|
206
|
+
if (code === 'value') {
|
|
207
|
+
emit('update:modelValue', formarValue)
|
|
208
|
+
} else {
|
|
209
|
+
emit(code, { value: formarValue, params })
|
|
210
|
+
}
|
|
184
211
|
} else {
|
|
185
212
|
if (code === 'change') {
|
|
186
213
|
emit('update:modelValue', params.value)
|
|
@@ -213,6 +240,7 @@ export default defineComponent({
|
|
|
213
240
|
onRangeFocus,
|
|
214
241
|
onHidePanel,
|
|
215
242
|
onRangeClear,
|
|
243
|
+
onCalendarChange,
|
|
216
244
|
dispatch
|
|
217
245
|
}
|
|
218
246
|
}
|
|
@@ -1,135 +1,135 @@
|
|
|
1
|
-
.
|
|
1
|
+
.font-img-error:before {
|
|
2
2
|
content: "\e642";
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
.
|
|
5
|
+
.font-code:before {
|
|
6
6
|
content: "\e65d";
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
.
|
|
9
|
+
.font-half_size:before {
|
|
10
10
|
content: "\e66a";
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
.
|
|
13
|
+
.font-password:before {
|
|
14
14
|
content: "\e66b";
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
.
|
|
17
|
+
.font-menu:before {
|
|
18
18
|
content: "\e66d";
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
.
|
|
21
|
+
.font-sign_out:before {
|
|
22
22
|
content: "\e66e";
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
.
|
|
25
|
+
.font-close:before {
|
|
26
26
|
content: "\e671";
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
.
|
|
29
|
+
.font-open_top:before {
|
|
30
30
|
content: "\e672";
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
.
|
|
33
|
+
.font-put_it_away_top:before {
|
|
34
34
|
content: "\e673";
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.
|
|
37
|
+
.font-right:before {
|
|
38
38
|
content: "\e674";
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
.
|
|
41
|
+
.font-left:before {
|
|
42
42
|
content: "\e675";
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
.
|
|
45
|
+
.font-refresh:before {
|
|
46
46
|
content: "\e676";
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
.
|
|
49
|
+
.font-date:before {
|
|
50
50
|
content: "\e678";
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
.
|
|
53
|
+
.font-open:before {
|
|
54
54
|
content: "\e679";
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
.
|
|
57
|
+
.font-put_it_away:before {
|
|
58
58
|
content: "\e67a";
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
.
|
|
61
|
+
.font-task:before {
|
|
62
62
|
content: "\e67b";
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
.
|
|
65
|
+
.font-short_message:before {
|
|
66
66
|
content: "\e67c";
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
.
|
|
69
|
+
.font-modify:before {
|
|
70
70
|
content: "\e67d";
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
.
|
|
73
|
+
.font-delete:before {
|
|
74
74
|
content: "\e67e";
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
.
|
|
77
|
+
.font-enlarge:before {
|
|
78
78
|
content: "\e681";
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
.
|
|
81
|
+
.font-girl:before {
|
|
82
82
|
content: "\e683";
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
.
|
|
85
|
+
.font-boy:before {
|
|
86
86
|
content: "\e684";
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
.
|
|
89
|
+
.font-redianzixun:before {
|
|
90
90
|
content: "\e6a4";
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
.
|
|
93
|
+
.font-vip:before {
|
|
94
94
|
content: "\e68f";
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
.
|
|
97
|
+
.font-VIP2:before {
|
|
98
98
|
content: "\e685";
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
.
|
|
101
|
+
.font-VIP4:before {
|
|
102
102
|
content: "\e7b3";
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
-
.
|
|
105
|
+
.font-VIP6:before {
|
|
106
106
|
content: "\e9ee";
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
.
|
|
109
|
+
.font-vip2:before {
|
|
110
110
|
content: "\e601";
|
|
111
111
|
}
|
|
112
112
|
|
|
113
|
-
.
|
|
113
|
+
.font-bofang:before {
|
|
114
114
|
content: "\e68d";
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
-
.
|
|
117
|
+
.font-bofang1:before {
|
|
118
118
|
content: "\e6f4";
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
.
|
|
121
|
+
.font-renzheng:before {
|
|
122
122
|
content: "\e6fb";
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
.
|
|
125
|
+
.font-dianhua1:before {
|
|
126
126
|
content: "\e700";
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
-
.
|
|
129
|
+
.font-dianhuaguaji:before {
|
|
130
130
|
content: "\e79a";
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
.
|
|
133
|
+
.font-youbian:before {
|
|
134
134
|
content: "\e703";
|
|
135
135
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="sh-image" :style="wrapStyles">
|
|
3
3
|
<div v-if="imageError" class="sh-image-place">
|
|
4
|
-
<slot name="error"><sh-icon type="
|
|
4
|
+
<slot name="error"><sh-icon type="font-img-error" :size="22" color="#999999"></sh-icon></slot>
|
|
5
5
|
</div>
|
|
6
6
|
<div v-else-if="imageloading" class="sh-image-place">
|
|
7
7
|
<slot name="placeholder"><sh-icon type="ios-image" :size="22"></sh-icon></slot>
|
|
@@ -117,6 +117,7 @@ export default defineComponent({
|
|
|
117
117
|
justify-content: center;
|
|
118
118
|
width: 100%;
|
|
119
119
|
height: 100%;
|
|
120
|
+
background-color: var(--vxe-table-header-background-color);
|
|
120
121
|
}
|
|
121
122
|
&-inner {
|
|
122
123
|
width: 100%;
|
|
@@ -66,28 +66,20 @@ export const tableFooterCompute = (columns, data, computeType, typeObj = {}) =>
|
|
|
66
66
|
}
|
|
67
67
|
// 转化表头过滤配置
|
|
68
68
|
export const turnColumnItemFilters = (column, props) => {
|
|
69
|
+
if (column.filters) return
|
|
69
70
|
let columnRender = column.cellRender || column.editRender || column.contentRender
|
|
70
71
|
let columnProps = Object.assign({}, props)
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
case '$vInput':
|
|
83
|
-
column.filters = [{ value: '', data: '' }]
|
|
84
|
-
column.filterRender = { name: '$vFilterInput', props: columnProps }
|
|
85
|
-
break
|
|
86
|
-
default:
|
|
87
|
-
column.filters = [{ value: '', data: '' }]
|
|
88
|
-
column.filterRender = { name: '$vFilterInput', props: columnProps }
|
|
89
|
-
break
|
|
90
|
-
}
|
|
72
|
+
let renderSelects = ['$select', '$vSelect', '$vCheckgroup', '$vRadiogroup', '$vSwitch']
|
|
73
|
+
let renderTimes = ['$vTime']
|
|
74
|
+
if (renderTimes.includes(columnRender.name)) {
|
|
75
|
+
column.filters = [{ data: null }]
|
|
76
|
+
column.filterRender = { name: '$vFilterTime', props: columnProps }
|
|
77
|
+
} else if (renderSelects.includes(columnRender.name)) {
|
|
78
|
+
column.filters = Array.isArray(columnRender.props && columnRender.props.options) ? columnRender.props.options : []
|
|
79
|
+
if (column.filterMultiple === undefined) column.filterMultiple = true
|
|
80
|
+
} else {
|
|
81
|
+
column.filters = [{ data: null }]
|
|
82
|
+
column.filterRender = { name: '$vFilterInput', props: columnProps }
|
|
91
83
|
}
|
|
92
84
|
}
|
|
93
85
|
// 转换表头校验规则
|