@yxhl/specter-pui-vtk 1.0.75 → 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 +2574 -2330
- 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 +290 -138
- package/src/components/assembly/VtkDept.vue +0 -1
- package/src/components/assembly/VtkSearch.vue +231 -226
package/package.json
CHANGED
|
@@ -1,44 +1,236 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="vtk-date-selector"
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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>
|
|
205
|
+
|
|
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>
|
|
27
217
|
</span>
|
|
28
|
-
</
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
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>
|
|
36
226
|
<!-- 头部控制区（非日期/月份范围选择模式时显示） -->
|
|
37
227
|
<div v-if="!(mode === 'range' && (displayMode === 'day' || displayMode === 'month'))" class="picker-header">
|
|
38
228
|
<button class="nav-btn" @click="prevPeriod">‹</button>
|
|
39
229
|
<div class="header-title">
|
|
40
230
|
<span @click="changeViewMode('year')" class="clickable">{{ currentYear }}年</span>
|
|
41
|
-
<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
|
|
42
234
|
}}月</span>
|
|
43
235
|
</div>
|
|
44
236
|
<button class="nav-btn" @click="nextPeriod">›</button>
|
|
@@ -225,12 +417,12 @@
|
|
|
225
417
|
<button class="btn btn-primary" @click="handleConfirm">确定</button>
|
|
226
418
|
</div>
|
|
227
419
|
</div>
|
|
228
|
-
|
|
420
|
+
|
|
229
421
|
</div>
|
|
230
422
|
</template>
|
|
231
423
|
|
|
232
424
|
<script setup>
|
|
233
|
-
import { ref, computed, watch
|
|
425
|
+
import { ref, computed, watch } from 'vue';
|
|
234
426
|
|
|
235
427
|
// 定义组件名称
|
|
236
428
|
defineOptions({
|
|
@@ -301,11 +493,11 @@ const props = defineProps({
|
|
|
301
493
|
type: Function,
|
|
302
494
|
default: null
|
|
303
495
|
},
|
|
304
|
-
// 禁用 Teleport
|
|
305
|
-
noTeleport: {
|
|
306
|
-
type: Boolean,
|
|
307
|
-
default: false
|
|
308
|
-
},
|
|
496
|
+
// 禁用 Teleport 时，弹层保留在当前 DOM 树内
|
|
497
|
+
noTeleport: {
|
|
498
|
+
type: Boolean,
|
|
499
|
+
default: false
|
|
500
|
+
},
|
|
309
501
|
// 下拉框对齐方式: 'left' | 'right'
|
|
310
502
|
placement: {
|
|
311
503
|
type: String,
|
|
@@ -318,17 +510,14 @@ const props = defineProps({
|
|
|
318
510
|
const emit = defineEmits(['update:modelValue', 'change', 'cancel', 'confirm']);
|
|
319
511
|
|
|
320
512
|
// 响应式数据
|
|
321
|
-
const showPicker = ref(false);
|
|
322
|
-
const viewMode = ref(props.displayMode);
|
|
323
|
-
const currentYear = ref(new Date().getFullYear());
|
|
324
|
-
const currentMonth = ref(new Date().getMonth());
|
|
325
|
-
const rightYear = ref(new Date().getFullYear());
|
|
326
|
-
const rightMonth = ref(new Date().getMonth() + 1);
|
|
327
|
-
const selectedValue = ref(null);
|
|
328
|
-
const tempValue = ref(null);
|
|
329
|
-
const selectorRef = ref(null);
|
|
330
|
-
const inputRef = ref(null);
|
|
331
|
-
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);
|
|
332
521
|
|
|
333
522
|
// 当前日期（用于判断未来日期）
|
|
334
523
|
const today = new Date();
|
|
@@ -344,7 +533,13 @@ const YEAR_PANEL_CENTER_OFFSET = 4;
|
|
|
344
533
|
const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
|
|
345
534
|
const monthList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
|
346
535
|
|
|
347
|
-
// 显示值
|
|
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
|
+
|
|
348
543
|
const displayValue = computed(() => {
|
|
349
544
|
if (!selectedValue.value) return '';
|
|
350
545
|
|
|
@@ -874,64 +1069,34 @@ const changeViewMode = (mode) => {
|
|
|
874
1069
|
};
|
|
875
1070
|
|
|
876
1071
|
// 面板操作
|
|
877
|
-
const
|
|
878
|
-
if (props.
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
// 年份单选打开面板时，优先围绕当前自然年展示年份列表
|
|
882
|
-
if (props.displayMode === 'year' && props.mode === 'single') {
|
|
883
|
-
currentYear.value = todayYear;
|
|
884
|
-
}
|
|
1072
|
+
const initializePicker = () => {
|
|
1073
|
+
if (props.displayMode === 'year' && props.mode === 'single') {
|
|
1074
|
+
currentYear.value = todayYear;
|
|
1075
|
+
}
|
|
885
1076
|
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
1077
|
+
tempValue.value = selectedValue.value ?
|
|
1078
|
+
(Array.isArray(selectedValue.value) ? [...selectedValue.value] : selectedValue.value) :
|
|
1079
|
+
(props.mode === 'range' ? [] : null);
|
|
1080
|
+
viewMode.value = props.displayMode;
|
|
890
1081
|
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
1082
|
+
if (props.displayMode === 'month') {
|
|
1083
|
+
rightYear.value = currentYear.value + 1;
|
|
1084
|
+
} else {
|
|
1085
|
+
if (currentMonth.value === 11) {
|
|
894
1086
|
rightYear.value = currentYear.value + 1;
|
|
1087
|
+
rightMonth.value = 0;
|
|
895
1088
|
} else {
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
rightYear.value = currentYear.value + 1;
|
|
899
|
-
rightMonth.value = 0;
|
|
900
|
-
} else {
|
|
901
|
-
rightYear.value = currentYear.value;
|
|
902
|
-
rightMonth.value = currentMonth.value + 1;
|
|
903
|
-
}
|
|
1089
|
+
rightYear.value = currentYear.value;
|
|
1090
|
+
rightMonth.value = currentMonth.value + 1;
|
|
904
1091
|
}
|
|
905
|
-
|
|
906
|
-
// 计算下拉框位置
|
|
907
|
-
nextTick(() => {
|
|
908
|
-
if (inputRef.value) {
|
|
909
|
-
const rect = inputRef.value.getBoundingClientRect();
|
|
910
|
-
// 根据模式和面板数量确定宽度
|
|
911
|
-
let dropdownWidth = 360; // 默认单面板宽度
|
|
912
|
-
if (props.mode === 'range' && !props.singlePanel) {
|
|
913
|
-
// 双面板模式
|
|
914
|
-
dropdownWidth = 465;
|
|
915
|
-
} else if (props.displayMode === 'week') {
|
|
916
|
-
// 周选择模式需要更宽的空间
|
|
917
|
-
dropdownWidth = 465;
|
|
918
|
-
}
|
|
919
|
-
const alignStyle = props.placement === 'right'
|
|
920
|
-
? { right: `${window.innerWidth - rect.right}px` }
|
|
921
|
-
: { left: `${rect.left}px` };
|
|
922
|
-
dropdownStyle.value = {
|
|
923
|
-
position: 'fixed',
|
|
924
|
-
top: `${rect.bottom + 4}px`,
|
|
925
|
-
...alignStyle,
|
|
926
|
-
width: `${dropdownWidth}px`,
|
|
927
|
-
zIndex: 99999
|
|
928
|
-
};
|
|
929
|
-
}
|
|
930
|
-
});
|
|
931
1092
|
}
|
|
932
1093
|
};
|
|
933
1094
|
|
|
934
|
-
|
|
1095
|
+
watch(showPicker, (isOpen) => {
|
|
1096
|
+
if (isOpen) {
|
|
1097
|
+
initializePicker();
|
|
1098
|
+
}
|
|
1099
|
+
});
|
|
935
1100
|
if (props.inline) {
|
|
936
1101
|
// 内联模式下直接初始化
|
|
937
1102
|
tempValue.value = selectedValue.value ?
|
|
@@ -1028,44 +1193,31 @@ watch(() => props.modelValue, (newValue) => {
|
|
|
1028
1193
|
display: block;
|
|
1029
1194
|
}
|
|
1030
1195
|
|
|
1031
|
-
.
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
}
|
|
1039
|
-
|
|
1040
|
-
.date-picker-dropdown {
|
|
1041
|
-
position: fixed;
|
|
1042
|
-
background: rgb(var(--v-theme-surface));
|
|
1043
|
-
border-radius: 8px;
|
|
1044
|
-
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
|
1045
|
-
z-index: 99999;
|
|
1046
|
-
border: 1px solid rgb(var(--v-theme-on-surface), 0.12);
|
|
1196
|
+
.clear-icon {
|
|
1197
|
+
margin-left: 4px;
|
|
1198
|
+
color: rgb(var(--v-theme-on-surface), 0.6);
|
|
1199
|
+
font-size: 18px;
|
|
1200
|
+
line-height: 1;
|
|
1201
|
+
cursor: pointer;
|
|
1202
|
+
padding: 2px;
|
|
1047
1203
|
}
|
|
1048
1204
|
|
|
1049
|
-
.
|
|
1050
|
-
|
|
1051
|
-
top: 0;
|
|
1052
|
-
left: 0;
|
|
1053
|
-
box-shadow: none;
|
|
1054
|
-
width: fit-content;
|
|
1055
|
-
border: none;
|
|
1205
|
+
.clear-icon:hover {
|
|
1206
|
+
color: rgb(var(--v-theme-on-surface), 0.87);
|
|
1056
1207
|
}
|
|
1057
1208
|
|
|
1058
|
-
.date-picker-dropdown
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
}
|
|
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
|
+
}
|
|
1064
1215
|
|
|
1065
|
-
.date-picker-dropdown.
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1216
|
+
.date-picker-dropdown.inline-mode {
|
|
1217
|
+
box-shadow: none;
|
|
1218
|
+
width: fit-content;
|
|
1219
|
+
border: none;
|
|
1220
|
+
}
|
|
1069
1221
|
|
|
1070
1222
|
.picker-header {
|
|
1071
1223
|
display: flex;
|
|
@@ -1381,4 +1533,4 @@ watch(() => props.modelValue, (newValue) => {
|
|
|
1381
1533
|
.btn-primary:hover {
|
|
1382
1534
|
opacity: 0.9;
|
|
1383
1535
|
}
|
|
1384
|
-
</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);
|