@yxhl/specter-pui-vtk 1.0.74 → 1.0.76
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/dist/specter-pui-vtk.css +1 -1
- package/dist/specter-pui.es.js +2507 -2240
- package/dist/specter-pui.es.js.map +1 -1
- package/dist/specter-pui.umd.js +1 -1
- package/dist/specter-pui.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/assembly/VtkDateSelector.vue +307 -166
- package/src/components/assembly/VtkDept.vue +0 -1
- package/src/components/assembly/VtkSearch.vue +231 -182
- package/src/components/assembly/VtkStepper.vue +1 -1
- package/src/components/message/toast.vue +3 -3
package/package.json
CHANGED
|
@@ -1,30 +1,236 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="vtk-date-selector"
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
<template>
|
|
2
|
+
<div class="vtk-date-selector">
|
|
3
|
+
<VMenu
|
|
4
|
+
v-if="!inline"
|
|
5
|
+
v-model="showPicker"
|
|
6
|
+
:attach="menuAttach"
|
|
7
|
+
:location="menuLocation"
|
|
8
|
+
:origin="menuOrigin"
|
|
9
|
+
offset="4"
|
|
10
|
+
:close-on-content-click="false"
|
|
11
|
+
>
|
|
12
|
+
<template #activator="{ props: menuProps }">
|
|
13
|
+
<div class="date-input">
|
|
14
|
+
<VTextField :model-value="displayValue" :placeholder="placeholder" :disabled="disabled" density="compact"
|
|
15
|
+
variant="outlined" hide-details readonly v-bind="menuProps" :clearable="!!displayValue && !disabled"
|
|
16
|
+
clear-icon="mdi-close-circle" persistent-clear class="date-input-field" @click:clear.stop="clearValue">
|
|
17
|
+
<template #append-inner>
|
|
18
|
+
<span class="date-icon" aria-hidden="true">
|
|
19
|
+
<svg viewBox="0 0 24 24" fill="none" class="date-icon-svg">
|
|
20
|
+
<path
|
|
21
|
+
d="M7 2.75a.75.75 0 0 1 .75.75V5h8.5V3.5a.75.75 0 0 1 1.5 0V5h.75A2.5 2.5 0 0 1 21 7.5v10A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5v-10A2.5 2.5 0 0 1 5.5 5h.75V3.5A.75.75 0 0 1 7 2.75ZM4.5 10v7.5c0 .552.448 1 1 1h13c.552 0 1-.448 1-1V10h-15Zm1-3.5c-.552 0-1 .448-1 1v1h15v-1c0-.552-.448-1-1-1h-.75v1a.75.75 0 0 1-1.5 0v-1h-8.5v1a.75.75 0 0 1-1.5 0v-1H5.5Zm2.25 5.75a.75.75 0 0 1 .75.75v.25a.75.75 0 0 1-1.5 0V13a.75.75 0 0 1 .75-.75Zm4.25 0a.75.75 0 0 1 .75.75v.25a.75.75 0 0 1-1.5 0V13a.75.75 0 0 1 .75-.75Zm4.25 0a.75.75 0 0 1 .75.75v.25a.75.75 0 0 1-1.5 0V13a.75.75 0 0 1 .75-.75Zm-8.5 3.75a.75.75 0 0 1 .75.75V17a.75.75 0 0 1-1.5 0v-.25a.75.75 0 0 1 .75-.75Zm4.25 0a.75.75 0 0 1 .75.75V17a.75.75 0 0 1-1.5 0v-.25a.75.75 0 0 1 .75-.75Z"
|
|
22
|
+
fill="currentColor" />
|
|
23
|
+
</svg>
|
|
24
|
+
</span>
|
|
25
|
+
</template>
|
|
26
|
+
</VTextField>
|
|
27
|
+
</div>
|
|
28
|
+
</template>
|
|
29
|
+
<div class="date-picker-dropdown" @click.stop @mousedown.stop>
|
|
30
|
+
<!-- 头部控制区（非日期/月份范围选择模式时显示） -->
|
|
31
|
+
<div v-if="!(mode === 'range' && (displayMode === 'day' || displayMode === 'month'))" class="picker-header">
|
|
32
|
+
<button class="nav-btn" @click="prevPeriod">‹</button>
|
|
33
|
+
<div class="header-title">
|
|
34
|
+
<span @click="changeViewMode('year')" class="clickable">{{ currentYear }}年</span>
|
|
35
|
+
<span v-if="displayMode !== 'year' && viewMode !== 'month'" @click="changeViewMode('month')"
|
|
36
|
+
class="clickable">{{
|
|
37
|
+
currentMonth + 1
|
|
38
|
+
}}月</span>
|
|
39
|
+
</div>
|
|
40
|
+
<button class="nav-btn" @click="nextPeriod">›</button>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<!-- 年份选择视图 -->
|
|
44
|
+
<div v-if="viewMode === 'year'" class="picker-body">
|
|
45
|
+
<div class="year-grid">
|
|
46
|
+
<div v-for="year in yearList" :key="year"
|
|
47
|
+
:class="['year-item', { 'selected': isYearSelected(year), 'in-range': isYearInRange(year), 'disabled': isFutureYear(year) }]"
|
|
48
|
+
@click="selectYear(year)">
|
|
49
|
+
{{ year }}
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<!-- 月份选择视图 -->
|
|
55
|
+
<div v-else-if="viewMode === 'month'" class="picker-body">
|
|
56
|
+
<!-- 范围选择模式：显示两个年份的月份 -->
|
|
57
|
+
<div v-if="mode === 'range'" class="dual-calendar">
|
|
58
|
+
<!-- 左侧年份 -->
|
|
59
|
+
<div class="calendar-panel">
|
|
60
|
+
<div class="calendar-header">
|
|
61
|
+
<button class="nav-btn-small" @click="prevYear">‹</button>
|
|
62
|
+
<span class="month-title">{{ currentYear }}年</span>
|
|
63
|
+
<button class="nav-btn-small" @click="nextYearLeft">›</button>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="month-grid">
|
|
66
|
+
<div v-for="(month, index) in monthList" :key="index"
|
|
67
|
+
:class="['month-item', { 'selected': isMonthSelected(index), 'in-range': isMonthInRange(index), 'disabled': isFutureMonth(index, currentYear) }]"
|
|
68
|
+
@click="selectMonth(index)">
|
|
69
|
+
{{ month }}
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<template v-if="!singlePanel">
|
|
75
|
+
<!-- 分割线 -->
|
|
76
|
+
<div class="calendar-divider"></div>
|
|
77
|
+
|
|
78
|
+
<!-- 右侧年份 -->
|
|
79
|
+
<div class="calendar-panel">
|
|
80
|
+
<div class="calendar-header">
|
|
81
|
+
<button class="nav-btn-small" @click="prevYearRight">‹</button>
|
|
82
|
+
<span class="month-title">{{ rightYear }}年</span>
|
|
83
|
+
<button class="nav-btn-small" @click="nextYear">›</button>
|
|
84
|
+
</div>
|
|
85
|
+
<div class="month-grid">
|
|
86
|
+
<div v-for="(month, index) in monthList" :key="index"
|
|
87
|
+
:class="['month-item', { 'selected': isMonthSelectedRight(index), 'in-range': isMonthInRangeRight(index), 'disabled': isFutureMonth(index, rightYear) }]"
|
|
88
|
+
@click="selectMonthRight(index)">
|
|
89
|
+
{{ month }}
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</template>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<!-- 单选模式：显示一个年份的月份 -->
|
|
97
|
+
<div v-else>
|
|
98
|
+
<div class="month-grid">
|
|
99
|
+
<div v-for="(month, index) in monthList" :key="index"
|
|
100
|
+
:class="['month-item', { 'selected': isMonthSelected(index), 'in-range': isMonthInRange(index), 'disabled': isFutureMonth(index, currentYear) }]"
|
|
101
|
+
@click="selectMonth(index)">
|
|
102
|
+
{{ month }}
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<!-- 周选择视图 -->
|
|
109
|
+
<div v-else-if="viewMode === 'week'" class="picker-body">
|
|
110
|
+
<div class="week-header">
|
|
111
|
+
<div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="week-grid">
|
|
114
|
+
<div v-for="week in weekList" :key="week.weekNumber"
|
|
115
|
+
:class="['week-row', { 'selected': isWeekSelected(week), 'in-range': isWeekInRange(week) }]"
|
|
116
|
+
@click="selectWeek(week)">
|
|
117
|
+
<div class="week-number">W{{ week.weekNumber }}</div>
|
|
118
|
+
<div v-for="day in week.days" :key="day.date"
|
|
119
|
+
:class="['day-cell', { 'other-month': day.otherMonth, 'today': day.isToday }]">
|
|
120
|
+
{{ day.day }}
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<!-- 日期选择视图（默认） -->
|
|
127
|
+
<div v-else class="picker-body">
|
|
128
|
+
<!-- 范围选择模式：显示两个月份 -->
|
|
129
|
+
<div v-if="mode === 'range'" class="dual-calendar">
|
|
130
|
+
<!-- 左侧月份 -->
|
|
131
|
+
<div class="calendar-panel">
|
|
132
|
+
<div class="calendar-header">
|
|
133
|
+
<button class="nav-btn-small" @click="prevMonth">‹</button>
|
|
134
|
+
<span class="month-title">{{ currentYear }}年{{ currentMonth + 1 }}月</span>
|
|
135
|
+
<button class="nav-btn-small" @click="nextMonthLeft">›</button>
|
|
136
|
+
</div>
|
|
137
|
+
<div class="week-header">
|
|
138
|
+
<div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div>
|
|
139
|
+
</div>
|
|
140
|
+
<div class="day-grid">
|
|
141
|
+
<div v-for="day in dayList" :key="day.date" :class="['day-item', {
|
|
142
|
+
'other-month': day.otherMonth,
|
|
143
|
+
'selected': isDaySelected(day),
|
|
144
|
+
'in-range': isDayInRange(day),
|
|
145
|
+
'range-start': isDayRangeStart(day),
|
|
146
|
+
'range-end': isDayRangeEnd(day),
|
|
147
|
+
'today': day.isToday,
|
|
148
|
+
'disabled': isFutureDay(day)
|
|
149
|
+
}]" @click="selectDay(day)">
|
|
150
|
+
{{ day.day }}
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<template v-if="!singlePanel">
|
|
156
|
+
<!-- 分割线 -->
|
|
157
|
+
<div class="calendar-divider"></div>
|
|
158
|
+
|
|
159
|
+
<!-- 右侧月份 -->
|
|
160
|
+
<div class="calendar-panel">
|
|
161
|
+
<div class="calendar-header">
|
|
162
|
+
<button class="nav-btn-small" @click="prevMonthRight">‹</button>
|
|
163
|
+
<span class="month-title">{{ nextMonthYear }}年{{ nextMonthMonth + 1 }}月</span>
|
|
164
|
+
<button class="nav-btn-small" @click="nextMonth">›</button>
|
|
165
|
+
</div>
|
|
166
|
+
<div class="week-header">
|
|
167
|
+
<div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="day-grid">
|
|
170
|
+
<div v-for="day in nextMonthDayList" :key="day.date" :class="['day-item', {
|
|
171
|
+
'other-month': day.otherMonth,
|
|
172
|
+
'selected': isDaySelected(day),
|
|
173
|
+
'in-range': isDayInRange(day),
|
|
174
|
+
'range-start': isDayRangeStart(day),
|
|
175
|
+
'range-end': isDayRangeEnd(day),
|
|
176
|
+
'today': day.isToday,
|
|
177
|
+
'disabled': isFutureDay(day)
|
|
178
|
+
}]" @click="selectDay(day)">
|
|
179
|
+
{{ day.day }}
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</template>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<!-- 单选模式：显示一个月份 -->
|
|
187
|
+
<div v-else>
|
|
188
|
+
<div class="week-header">
|
|
189
|
+
<div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="day-grid">
|
|
192
|
+
<div v-for="day in dayList" :key="day.date" :class="['day-item', {
|
|
193
|
+
'other-month': day.otherMonth,
|
|
194
|
+
'selected': isDaySelected(day),
|
|
195
|
+
'in-range': isDayInRange(day),
|
|
196
|
+
'range-start': isDayRangeStart(day),
|
|
197
|
+
'range-end': isDayRangeEnd(day),
|
|
198
|
+
'today': day.isToday
|
|
199
|
+
}]" @click="selectDay(day)">
|
|
200
|
+
{{ day.day }}
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
16
205
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
206
|
+
<!-- 底部操作区 -->
|
|
207
|
+
<div v-if="mode === 'range' && (displayMode === 'day' || displayMode === 'month')" class="range-display">
|
|
208
|
+
<span class="range-text">
|
|
209
|
+
<template v-if="tempValue && Array.isArray(tempValue) && tempValue.length > 0">
|
|
210
|
+
{{ tempValue[0] || (displayMode === 'month' ? '开始月份' : '开始日期') }}
|
|
211
|
+
<span class="range-separator"> - </span>
|
|
212
|
+
{{ tempValue[1] || (displayMode === 'month' ? '结束月份' : '结束日期') }}
|
|
213
|
+
</template>
|
|
214
|
+
<template v-else>
|
|
215
|
+
<span class="placeholder-text">{{ displayMode === 'month' ? '请选择月份范围' : '请选择日期范围' }}</span>
|
|
216
|
+
</template>
|
|
217
|
+
</span>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="picker-footer">
|
|
220
|
+
<button class="btn btn-text" @click="handleCancel">取消</button>
|
|
221
|
+
<button class="btn btn-primary" @click="handleConfirm">确定</button>
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
</VMenu>
|
|
225
|
+
<div v-if="inline" class="date-picker-dropdown inline-mode" @click.stop @mousedown.stop>
|
|
22
226
|
<!-- 头部控制区（非日期/月份范围选择模式时显示） -->
|
|
23
227
|
<div v-if="!(mode === 'range' && (displayMode === 'day' || displayMode === 'month'))" class="picker-header">
|
|
24
228
|
<button class="nav-btn" @click="prevPeriod">‹</button>
|
|
25
229
|
<div class="header-title">
|
|
26
230
|
<span @click="changeViewMode('year')" class="clickable">{{ currentYear }}年</span>
|
|
27
|
-
<span v-if="displayMode !== 'year' && viewMode !== 'month'" @click="changeViewMode('month')"
|
|
231
|
+
<span v-if="displayMode !== 'year' && viewMode !== 'month'" @click="changeViewMode('month')"
|
|
232
|
+
class="clickable">{{
|
|
233
|
+
currentMonth + 1
|
|
28
234
|
}}月</span>
|
|
29
235
|
</div>
|
|
30
236
|
<button class="nav-btn" @click="nextPeriod">›</button>
|
|
@@ -211,12 +417,12 @@
|
|
|
211
417
|
<button class="btn btn-primary" @click="handleConfirm">确定</button>
|
|
212
418
|
</div>
|
|
213
419
|
</div>
|
|
214
|
-
|
|
420
|
+
|
|
215
421
|
</div>
|
|
216
422
|
</template>
|
|
217
423
|
|
|
218
424
|
<script setup>
|
|
219
|
-
import { ref, computed, watch
|
|
425
|
+
import { ref, computed, watch } from 'vue';
|
|
220
426
|
|
|
221
427
|
// 定义组件名称
|
|
222
428
|
defineOptions({
|
|
@@ -287,11 +493,11 @@ const props = defineProps({
|
|
|
287
493
|
type: Function,
|
|
288
494
|
default: null
|
|
289
495
|
},
|
|
290
|
-
// 禁用 Teleport
|
|
291
|
-
noTeleport: {
|
|
292
|
-
type: Boolean,
|
|
293
|
-
default: false
|
|
294
|
-
},
|
|
496
|
+
// 禁用 Teleport 时，弹层保留在当前 DOM 树内
|
|
497
|
+
noTeleport: {
|
|
498
|
+
type: Boolean,
|
|
499
|
+
default: false
|
|
500
|
+
},
|
|
295
501
|
// 下拉框对齐方式: 'left' | 'right'
|
|
296
502
|
placement: {
|
|
297
503
|
type: String,
|
|
@@ -304,33 +510,36 @@ const props = defineProps({
|
|
|
304
510
|
const emit = defineEmits(['update:modelValue', 'change', 'cancel', 'confirm']);
|
|
305
511
|
|
|
306
512
|
// 响应式数据
|
|
307
|
-
const showPicker = ref(false);
|
|
308
|
-
const viewMode = ref(props.displayMode);
|
|
309
|
-
const currentYear = ref(new Date().getFullYear());
|
|
310
|
-
const currentMonth = ref(new Date().getMonth());
|
|
311
|
-
const rightYear = ref(new Date().getFullYear());
|
|
312
|
-
const rightMonth = ref(new Date().getMonth() + 1);
|
|
313
|
-
const selectedValue = ref(null);
|
|
314
|
-
const tempValue = ref(null);
|
|
315
|
-
const selectorRef = ref(null);
|
|
316
|
-
const inputRef = ref(null);
|
|
317
|
-
const dropdownStyle = ref({});
|
|
513
|
+
const showPicker = ref(false);
|
|
514
|
+
const viewMode = ref(props.displayMode);
|
|
515
|
+
const currentYear = ref(new Date().getFullYear());
|
|
516
|
+
const currentMonth = ref(new Date().getMonth());
|
|
517
|
+
const rightYear = ref(new Date().getFullYear());
|
|
518
|
+
const rightMonth = ref(new Date().getMonth() + 1);
|
|
519
|
+
const selectedValue = ref(null);
|
|
520
|
+
const tempValue = ref(null);
|
|
318
521
|
|
|
319
522
|
// 当前日期（用于判断未来日期）
|
|
320
523
|
const today = new Date();
|
|
321
|
-
const todayYear = today.getFullYear();
|
|
322
|
-
const todayMonth = today.getMonth();
|
|
323
|
-
const todayDate = today.getDate();
|
|
324
|
-
|
|
325
|
-
// 年份面板固定展示 12 个年份，并尽量让锚点年份落在中间偏前位置
|
|
326
|
-
const YEAR_PANEL_SIZE = 12;
|
|
327
|
-
const YEAR_PANEL_CENTER_OFFSET = 4;
|
|
524
|
+
const todayYear = today.getFullYear();
|
|
525
|
+
const todayMonth = today.getMonth();
|
|
526
|
+
const todayDate = today.getDate();
|
|
527
|
+
|
|
528
|
+
// 年份面板固定展示 12 个年份，并尽量让锚点年份落在中间偏前位置
|
|
529
|
+
const YEAR_PANEL_SIZE = 12;
|
|
530
|
+
const YEAR_PANEL_CENTER_OFFSET = 4;
|
|
328
531
|
|
|
329
532
|
// 周和月份名称
|
|
330
533
|
const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
|
|
331
534
|
const monthList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
|
332
535
|
|
|
333
|
-
// 显示值
|
|
536
|
+
// 显示值
|
|
537
|
+
const menuAttach = computed(() => (props.noTeleport ? true : false));
|
|
538
|
+
|
|
539
|
+
const menuLocation = computed(() => props.placement === 'right' ? 'bottom end' : 'bottom start');
|
|
540
|
+
|
|
541
|
+
const menuOrigin = computed(() => props.placement === 'right' ? 'top end' : 'top start');
|
|
542
|
+
|
|
334
543
|
const displayValue = computed(() => {
|
|
335
544
|
if (!selectedValue.value) return '';
|
|
336
545
|
|
|
@@ -362,11 +571,11 @@ const formatDisplay = (value) => {
|
|
|
362
571
|
};
|
|
363
572
|
|
|
364
573
|
// 年份列表（显示12年）
|
|
365
|
-
const yearList = computed(() => {
|
|
366
|
-
// 年份面板打开时，以当前锚点年份为中心生成 12 个年份选项
|
|
367
|
-
const startYear = currentYear.value - YEAR_PANEL_CENTER_OFFSET;
|
|
368
|
-
return Array.from({ length: YEAR_PANEL_SIZE }, (_, i) => startYear + i);
|
|
369
|
-
});
|
|
574
|
+
const yearList = computed(() => {
|
|
575
|
+
// 年份面板打开时，以当前锚点年份为中心生成 12 个年份选项
|
|
576
|
+
const startYear = currentYear.value - YEAR_PANEL_CENTER_OFFSET;
|
|
577
|
+
return Array.from({ length: YEAR_PANEL_SIZE }, (_, i) => startYear + i);
|
|
578
|
+
});
|
|
370
579
|
|
|
371
580
|
// 周列表
|
|
372
581
|
const weekList = computed(() => {
|
|
@@ -649,7 +858,12 @@ const selectMonth = (month) => {
|
|
|
649
858
|
// 如果是未来月份且禁用未来日期，则不允许选择
|
|
650
859
|
if (isFutureMonth(month, currentYear.value)) return;
|
|
651
860
|
|
|
652
|
-
|
|
861
|
+
if (props.displayMode !== 'month') {
|
|
862
|
+
currentMonth.value = month;
|
|
863
|
+
viewMode.value = props.displayMode;
|
|
864
|
+
return;
|
|
865
|
+
}
|
|
866
|
+
|
|
653
867
|
const monthStr = `${currentYear.value}-${String(month + 1).padStart(2, '0')}`;
|
|
654
868
|
if (props.mode === 'single') {
|
|
655
869
|
tempValue.value = monthStr;
|
|
@@ -855,64 +1069,34 @@ const changeViewMode = (mode) => {
|
|
|
855
1069
|
};
|
|
856
1070
|
|
|
857
1071
|
// 面板操作
|
|
858
|
-
const
|
|
859
|
-
if (props.
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
// 年份单选打开面板时，优先围绕当前自然年展示年份列表
|
|
863
|
-
if (props.displayMode === 'year' && props.mode === 'single') {
|
|
864
|
-
currentYear.value = todayYear;
|
|
865
|
-
}
|
|
866
|
-
|
|
867
|
-
tempValue.value = selectedValue.value ?
|
|
868
|
-
(Array.isArray(selectedValue.value) ? [...selectedValue.value] : selectedValue.value) :
|
|
869
|
-
(props.mode === 'range' ? [] : null);
|
|
870
|
-
viewMode.value = props.displayMode;
|
|
1072
|
+
const initializePicker = () => {
|
|
1073
|
+
if (props.displayMode === 'year' && props.mode === 'single') {
|
|
1074
|
+
currentYear.value = todayYear;
|
|
1075
|
+
}
|
|
871
1076
|
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
1077
|
+
tempValue.value = selectedValue.value ?
|
|
1078
|
+
(Array.isArray(selectedValue.value) ? [...selectedValue.value] : selectedValue.value) :
|
|
1079
|
+
(props.mode === 'range' ? [] : null);
|
|
1080
|
+
viewMode.value = props.displayMode;
|
|
1081
|
+
|
|
1082
|
+
if (props.displayMode === 'month') {
|
|
1083
|
+
rightYear.value = currentYear.value + 1;
|
|
1084
|
+
} else {
|
|
1085
|
+
if (currentMonth.value === 11) {
|
|
875
1086
|
rightYear.value = currentYear.value + 1;
|
|
1087
|
+
rightMonth.value = 0;
|
|
876
1088
|
} else {
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
rightYear.value = currentYear.value + 1;
|
|
880
|
-
rightMonth.value = 0;
|
|
881
|
-
} else {
|
|
882
|
-
rightYear.value = currentYear.value;
|
|
883
|
-
rightMonth.value = currentMonth.value + 1;
|
|
884
|
-
}
|
|
1089
|
+
rightYear.value = currentYear.value;
|
|
1090
|
+
rightMonth.value = currentMonth.value + 1;
|
|
885
1091
|
}
|
|
886
|
-
|
|
887
|
-
// 计算下拉框位置
|
|
888
|
-
nextTick(() => {
|
|
889
|
-
if (inputRef.value) {
|
|
890
|
-
const rect = inputRef.value.getBoundingClientRect();
|
|
891
|
-
// 根据模式和面板数量确定宽度
|
|
892
|
-
let dropdownWidth = 360; // 默认单面板宽度
|
|
893
|
-
if (props.mode === 'range' && !props.singlePanel) {
|
|
894
|
-
// 双面板模式
|
|
895
|
-
dropdownWidth = 465;
|
|
896
|
-
} else if (props.displayMode === 'week') {
|
|
897
|
-
// 周选择模式需要更宽的空间
|
|
898
|
-
dropdownWidth = 465;
|
|
899
|
-
}
|
|
900
|
-
const alignStyle = props.placement === 'right'
|
|
901
|
-
? { right: `${window.innerWidth - rect.right}px` }
|
|
902
|
-
: { left: `${rect.left}px` };
|
|
903
|
-
dropdownStyle.value = {
|
|
904
|
-
position: 'fixed',
|
|
905
|
-
top: `${rect.bottom + 4}px`,
|
|
906
|
-
...alignStyle,
|
|
907
|
-
width: `${dropdownWidth}px`,
|
|
908
|
-
zIndex: 99999
|
|
909
|
-
};
|
|
910
|
-
}
|
|
911
|
-
});
|
|
912
1092
|
}
|
|
913
1093
|
};
|
|
914
1094
|
|
|
915
|
-
|
|
1095
|
+
watch(showPicker, (isOpen) => {
|
|
1096
|
+
if (isOpen) {
|
|
1097
|
+
initializePicker();
|
|
1098
|
+
}
|
|
1099
|
+
});
|
|
916
1100
|
if (props.inline) {
|
|
917
1101
|
// 内联模式下直接初始化
|
|
918
1102
|
tempValue.value = selectedValue.value ?
|
|
@@ -983,34 +1167,16 @@ watch(() => props.modelValue, (newValue) => {
|
|
|
983
1167
|
}
|
|
984
1168
|
|
|
985
1169
|
.date-input {
|
|
986
|
-
|
|
987
|
-
display: flex;
|
|
988
|
-
align-items: center;
|
|
989
|
-
border: 1px solid rgb(var(--v-theme-on-surface), 0.3);
|
|
990
|
-
border-radius: 4px;
|
|
991
|
-
padding: 0 12px;
|
|
992
|
-
background: rgb(var(--v-theme-surface));
|
|
993
|
-
cursor: pointer;
|
|
994
|
-
transition: border-color 0.2s;
|
|
995
|
-
}
|
|
996
|
-
|
|
997
|
-
.date-input:hover {
|
|
998
|
-
border-color: rgb(var(--v-theme-on-surface), 0.8);
|
|
1170
|
+
width: 100%;
|
|
999
1171
|
}
|
|
1000
1172
|
|
|
1001
1173
|
.date-input-field {
|
|
1002
|
-
flex: 1;
|
|
1003
|
-
border: none;
|
|
1004
|
-
outline: none;
|
|
1005
|
-
padding: 8px 0;
|
|
1006
|
-
font-size: 14px;
|
|
1007
1174
|
cursor: pointer;
|
|
1008
|
-
background: transparent;
|
|
1009
|
-
color: rgb(var(--v-theme-on-surface), 0.8);
|
|
1010
1175
|
}
|
|
1011
1176
|
|
|
1012
|
-
.date-input-field
|
|
1013
|
-
|
|
1177
|
+
:deep(.date-input-field .v-field),
|
|
1178
|
+
:deep(.date-input-field input) {
|
|
1179
|
+
cursor: pointer;
|
|
1014
1180
|
}
|
|
1015
1181
|
|
|
1016
1182
|
.date-icon {
|
|
@@ -1028,9 +1194,10 @@ watch(() => props.modelValue, (newValue) => {
|
|
|
1028
1194
|
}
|
|
1029
1195
|
|
|
1030
1196
|
.clear-icon {
|
|
1031
|
-
margin-left:
|
|
1197
|
+
margin-left: 4px;
|
|
1032
1198
|
color: rgb(var(--v-theme-on-surface), 0.6);
|
|
1033
|
-
font-size:
|
|
1199
|
+
font-size: 18px;
|
|
1200
|
+
line-height: 1;
|
|
1034
1201
|
cursor: pointer;
|
|
1035
1202
|
padding: 2px;
|
|
1036
1203
|
}
|
|
@@ -1039,44 +1206,18 @@ watch(() => props.modelValue, (newValue) => {
|
|
|
1039
1206
|
color: rgb(var(--v-theme-on-surface), 0.87);
|
|
1040
1207
|
}
|
|
1041
1208
|
|
|
1042
|
-
.date-picker-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
z-index: 99998;
|
|
1049
|
-
}
|
|
1050
|
-
|
|
1051
|
-
.date-picker-dropdown {
|
|
1052
|
-
position: fixed;
|
|
1053
|
-
background: rgb(var(--v-theme-surface));
|
|
1054
|
-
border-radius: 8px;
|
|
1055
|
-
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
|
1056
|
-
z-index: 99999;
|
|
1057
|
-
border: 1px solid rgb(var(--v-theme-on-surface), 0.12);
|
|
1058
|
-
}
|
|
1209
|
+
.date-picker-dropdown {
|
|
1210
|
+
background: rgb(var(--v-theme-surface));
|
|
1211
|
+
border-radius: 8px;
|
|
1212
|
+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
|
1213
|
+
border: 1px solid rgb(var(--v-theme-on-surface), 0.12);
|
|
1214
|
+
}
|
|
1059
1215
|
|
|
1060
|
-
.date-picker-dropdown.inline-mode {
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
width: fit-content;
|
|
1066
|
-
border: none;
|
|
1067
|
-
}
|
|
1068
|
-
|
|
1069
|
-
.date-picker-dropdown.no-teleport-mode {
|
|
1070
|
-
position: absolute;
|
|
1071
|
-
top: calc(100% + 4px);
|
|
1072
|
-
left: 0;
|
|
1073
|
-
z-index: 99999;
|
|
1074
|
-
}
|
|
1075
|
-
|
|
1076
|
-
.date-picker-dropdown.no-teleport-mode.align-right {
|
|
1077
|
-
left: auto;
|
|
1078
|
-
right: 0;
|
|
1079
|
-
}
|
|
1216
|
+
.date-picker-dropdown.inline-mode {
|
|
1217
|
+
box-shadow: none;
|
|
1218
|
+
width: fit-content;
|
|
1219
|
+
border: none;
|
|
1220
|
+
}
|
|
1080
1221
|
|
|
1081
1222
|
.picker-header {
|
|
1082
1223
|
display: flex;
|
|
@@ -1392,4 +1533,4 @@ watch(() => props.modelValue, (newValue) => {
|
|
|
1392
1533
|
.btn-primary:hover {
|
|
1393
1534
|
opacity: 0.9;
|
|
1394
1535
|
}
|
|
1395
|
-
</style>
|
|
1536
|
+
</style>
|
|
@@ -46,7 +46,6 @@ watch(areaSelectedData, (newVal, oldVal) => {
|
|
|
46
46
|
|
|
47
47
|
// 获取地区列表
|
|
48
48
|
const getAreaList = () => {
|
|
49
|
-
console.log('user.areacode=', user.areacode);
|
|
50
49
|
if (user && user.areacode) {
|
|
51
50
|
proxy.$vtk.request.getForm(`/dict/area/show/${user.areacode}`).then((res) => {
|
|
52
51
|
console.log('res=', res);
|