refactor(aiot): 使用原生time input替换TimePicker组件
- 移除 ant-design-vue TimePicker 和 dayjs 依赖 - 使用原生 HTML5 <input type="time"> 实现时间选择 - 更简单、更稳定、浏览器原生支持 - 添加 Ant Design 风格的样式适配 - 简化代码逻辑,直接使用字符串格式 HH:mm - 完美支持编辑、添加、模板功能 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -7,10 +7,7 @@ import {
|
||||
message,
|
||||
Space,
|
||||
Tag,
|
||||
TimePicker,
|
||||
} from 'ant-design-vue';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
interface WorkingHourPeriod {
|
||||
start: string; // "HH:mm" 格式
|
||||
@@ -30,8 +27,8 @@ const emit = defineEmits<{
|
||||
}>();
|
||||
|
||||
// 当前编辑的时间段
|
||||
const startTime = ref<Dayjs | null>(null);
|
||||
const endTime = ref<Dayjs | null>(null);
|
||||
const startTime = ref('');
|
||||
const endTime = ref('');
|
||||
|
||||
// 正在编辑的时间段索引
|
||||
const editingIndex = ref<number | null>(null);
|
||||
@@ -85,8 +82,8 @@ function addPeriod() {
|
||||
}
|
||||
|
||||
const newPeriod: WorkingHourPeriod = {
|
||||
start: startTime.value.format('HH:mm'),
|
||||
end: endTime.value.format('HH:mm'),
|
||||
start: startTime.value,
|
||||
end: endTime.value,
|
||||
};
|
||||
|
||||
// 校验:结束时间必须晚于开始时间
|
||||
@@ -132,22 +129,22 @@ function addPeriod() {
|
||||
message.success('时间段已添加');
|
||||
}
|
||||
|
||||
startTime.value = null;
|
||||
endTime.value = null;
|
||||
startTime.value = '';
|
||||
endTime.value = '';
|
||||
}
|
||||
|
||||
// 编辑时间段
|
||||
function editPeriod(index: number) {
|
||||
const period = periods.value[index];
|
||||
startTime.value = dayjs(period.start, 'HH:mm');
|
||||
endTime.value = dayjs(period.end, 'HH:mm');
|
||||
startTime.value = period.start;
|
||||
endTime.value = period.end;
|
||||
editingIndex.value = index;
|
||||
}
|
||||
|
||||
// 取消编辑
|
||||
function cancelEdit() {
|
||||
startTime.value = null;
|
||||
endTime.value = null;
|
||||
startTime.value = '';
|
||||
endTime.value = '';
|
||||
editingIndex.value = null;
|
||||
}
|
||||
|
||||
@@ -229,20 +226,18 @@ function getDuration(period: WorkingHourPeriod): string {
|
||||
</div>
|
||||
|
||||
<div class="time-picker-row">
|
||||
<TimePicker
|
||||
v-model:value="startTime"
|
||||
format="HH:mm"
|
||||
:minute-step="30"
|
||||
<input
|
||||
v-model="startTime"
|
||||
type="time"
|
||||
class="time-input"
|
||||
placeholder="开始时间"
|
||||
style="flex: 1"
|
||||
/>
|
||||
<span class="time-separator">至</span>
|
||||
<TimePicker
|
||||
v-model:value="endTime"
|
||||
format="HH:mm"
|
||||
:minute-step="30"
|
||||
<input
|
||||
v-model="endTime"
|
||||
type="time"
|
||||
class="time-input"
|
||||
placeholder="结束时间"
|
||||
style="flex: 1"
|
||||
/>
|
||||
<Button v-if="editingIndex !== null" @click="cancelEdit">
|
||||
取消
|
||||
@@ -404,6 +399,35 @@ function getDuration(period: WorkingHourPeriod): string {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.time-input {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
padding: 4px 11px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5715;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
background-color: #fff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.time-input:hover {
|
||||
border-color: #4096ff;
|
||||
}
|
||||
|
||||
.time-input:focus {
|
||||
border-color: #4096ff;
|
||||
box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.time-input:disabled {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.time-separator {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
|
||||
Reference in New Issue
Block a user