|
|
|
@ -1,52 +1,61 @@ |
|
|
|
<template> |
|
|
|
<div v-if="value" class="waypoint-edit-dialog"> |
|
|
|
<!-- 遮罩层 --> |
|
|
|
<div class="dialog-overlay" @click="closeDialog"></div> |
|
|
|
|
|
|
|
<!-- 弹窗内容 --> |
|
|
|
|
|
|
|
<div class="dialog-content"> |
|
|
|
<div class="dialog-header"> |
|
|
|
<h3>航点编辑</h3> |
|
|
|
<div class="close-btn" @click="closeDialog">×</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="dialog-body"> |
|
|
|
<el-form :model="formData" :rules="rules" ref="formRef" label-width="80px" size="small"> |
|
|
|
<!-- 基本信息 --> |
|
|
|
<el-form :model="formData" :rules="rules" ref="formRef" label-width="100px" size="small"> |
|
|
|
<el-form-item label="名称" prop="name"> |
|
|
|
<el-input v-model="formData.name" placeholder="请输入航点名称"></el-input> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
|
|
<el-form-item label="高度" prop="altitude"> |
|
|
|
<el-input-number |
|
|
|
v-model="formData.altitude" |
|
|
|
:min="0" |
|
|
|
<el-input-number |
|
|
|
v-model="formData.altitude" |
|
|
|
:min="0" |
|
|
|
controls-position="right" |
|
|
|
placeholder="请输入高度" |
|
|
|
style="width: 100%;" |
|
|
|
suffix="m" |
|
|
|
></el-input-number> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
|
|
<el-form-item label="速度" prop="speed"> |
|
|
|
<el-input v-model="formData.speed" placeholder="请输入速度" suffix="km/h"></el-input> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="时间" prop="eta"> |
|
|
|
<el-input v-model="formData.eta" placeholder="请输入到达时间（如：K+00:40:00）"></el-input> |
|
|
|
<el-input-number |
|
|
|
v-model="formData.speed" |
|
|
|
:min="0" |
|
|
|
controls-position="right" |
|
|
|
placeholder="请输入速度" |
|
|
|
style="width: 100%;" |
|
|
|
></el-input-number> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="转弯半径" prop="turnRadius"> |
|
|
|
<el-input-number |
|
|
|
v-model="formData.turnRadius" |
|
|
|
:min="0" |
|
|
|
placeholder="请输入转弯半径" |
|
|
|
|
|
|
|
<el-form-item label="转弯坡度" prop="turnBank"> |
|
|
|
<el-input-number |
|
|
|
v-model="formData.turnBank" |
|
|
|
controls-position="right" |
|
|
|
placeholder="请输入转弯坡度" |
|
|
|
style="width: 100%;" |
|
|
|
suffix="m" |
|
|
|
></el-input-number> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="起始时间" prop="startTime"> |
|
|
|
<el-time-picker |
|
|
|
v-model="formData.startTime" |
|
|
|
placeholder="请选择起始时间" |
|
|
|
value-format="HH:mm:ss" |
|
|
|
style="width: 100%;" |
|
|
|
> |
|
|
|
</el-time-picker> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="dialog-footer"> |
|
|
|
<el-button @click="closeDialog">取消</el-button> |
|
|
|
<el-button type="primary" @click="saveWaypoint">保存</el-button> |
|
|
|
@ -69,31 +78,43 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
// 定义一个通用的数字校验函数，允许 0 |
|
|
|
const validateNumber = (rule, value, callback) => { |
|
|
|
// 检查 value 是否为 undefined, null 或 空字符串 |
|
|
|
// 注意：这里不能简单用 !value，因为 !0 是 true |
|
|
|
if (value === undefined || value === null || value === '') { |
|
|
|
callback(new Error(rule.message)); |
|
|
|
} else { |
|
|
|
callback(); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
return { |
|
|
|
formData: { |
|
|
|
name: '', |
|
|
|
altitude: 0, |
|
|
|
speed: '', |
|
|
|
eta: '', |
|
|
|
turnRadius: 0 |
|
|
|
speed: 0, |
|
|
|
turnBank: 0, |
|
|
|
startTime: '' |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
name: [ |
|
|
|
{ required: true, message: '请输入航点名称', trigger: 'blur' } |
|
|
|
], |
|
|
|
altitude: [ |
|
|
|
{ required: true, message: '请输入高度', trigger: 'blur' }, |
|
|
|
{ type: 'number', message: '高度必须为数字', trigger: 'blur' } |
|
|
|
// 使用自定义 validator 替代 type: 'number' 组合，确保 0 被接受 |
|
|
|
{ required: true, validator: validateNumber, message: '请输入有效高度', trigger: ['blur', 'change'] } |
|
|
|
], |
|
|
|
speed: [ |
|
|
|
{ required: true, message: '请输入速度', trigger: 'blur' }, |
|
|
|
{ type: 'number', message: '速度必须为数字', trigger: 'blur' } |
|
|
|
// 重点修改：使用自定义 validator，允许速度为 0 |
|
|
|
{ required: true, validator: validateNumber, message: '请输入有效速度', trigger: ['blur', 'change'] } |
|
|
|
], |
|
|
|
eta: [ |
|
|
|
{ required: true, message: '请输入到达时间', trigger: 'blur' } |
|
|
|
turnBank: [ |
|
|
|
// 同样应用到转弯坡度 |
|
|
|
{ required: true, validator: validateNumber, message: '请输入有效转弯坡度', trigger: ['blur', 'change'] } |
|
|
|
], |
|
|
|
turnRadius: [ |
|
|
|
{ type: 'number', message: '转弯半径必须为数字', trigger: 'blur' } |
|
|
|
startTime: [ |
|
|
|
{ required: true, message: '请选择起始时间', trigger: 'change' } |
|
|
|
] |
|
|
|
} |
|
|
|
}; |
|
|
|
@ -112,14 +133,22 @@ export default { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initFormData() { |
|
|
|
// 初始化表单数据，如果航点有相关属性则使用，否则使用默认值 |
|
|
|
// 保持数据类型正确，确保是 Number 类型 |
|
|
|
this.formData = { |
|
|
|
name: this.waypoint.name || '', |
|
|
|
altitude: this.waypoint.altitude || 0, |
|
|
|
speed: this.waypoint.speed || '', |
|
|
|
eta: this.waypoint.eta || '', |
|
|
|
turnRadius: this.waypoint.turnRadius || 0 |
|
|
|
// 确保初始化时也是数字类型 |
|
|
|
altitude: this.waypoint.altitude !== undefined && this.waypoint.altitude !== null ? Number(this.waypoint.altitude) : 0, |
|
|
|
speed: this.waypoint.speed !== undefined && this.waypoint.speed !== null ? Number(this.waypoint.speed) : 0, |
|
|
|
turnBank: this.waypoint.turnBank !== undefined && this.waypoint.turnBank !== null ? Number(this.waypoint.turnBank) : 0, |
|
|
|
startTime: this.waypoint.startTime || '' |
|
|
|
}; |
|
|
|
|
|
|
|
// 弹窗打开时，尝试清除之前的校验痕迹 |
|
|
|
this.$nextTick(() => { |
|
|
|
if (this.$refs.formRef) { |
|
|
|
this.$refs.formRef.clearValidate(); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
closeDialog() { |
|
|
|
this.$emit('input', false); |
|
|
|
@ -127,7 +156,6 @@ export default { |
|
|
|
saveWaypoint() { |
|
|
|
this.$refs.formRef.validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
// 发送保存事件，将更新后的数据传递给父组件 |
|
|
|
this.$emit('save', { |
|
|
|
...this.waypoint, |
|
|
|
...this.formData |
|
|
|
@ -224,4 +252,4 @@ export default { |
|
|
|
border-top: 1px solid #e8e8e8; |
|
|
|
gap: 10px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|
|
