<template>
<
el-form ref="formRef" :mod
el="form" :rules="rules" lab
el-width="100px" :disabled="loading">
<
el-row :gutter="20">
<
el-col :span="12">
<
el-form
-item lab
el="作业时间">
<
el-input v
-mod
el="form.lastUpdateTime" />
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="降水预报截止时间" prop="ybjzsj">
<
el-input v
-mod
el="form.ybjzsj" placeholder="请输入降水预报截止时间" />
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="时间跨度(h)">
<
el-input v
-mod
el="form.sjkd" />
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="源文件下载地址">
<
el-input v
-mod
el="form.url" />
</
el-form
-item>
</
el-col>
<
el-col :span="12">
<
el-form
-item lab
el="源文件本地保存地址">
<
el-input v
-mod
el="form.sourceFilePath" />
</
el-form
-item>
</
el-col>
</
el-row>
<!
-- 按钮区域，右对齐
-->
<div class="btn
-container">
<
el-button @click="close
Dialog" :disabled="loading">取消</
el-button>
<
el-button type="primary" @click="save" :loading="loading">保存</
el-button>
</div>
</
el-form>
</template>
<script setup>
import { ref, watch} from '
vue'
import {
ElMessage } from '
element
-plus'
import { getInfo, saveInfo } from '@/assets/js/api/workbench/sharedData/precipForecast'
import Point from '@/components/pointMap.
vue'
const props = defineProps({
id: {
type: [String, Number],
default: null
}
})
const emit = defineEmits(['close'])
const loading = ref(false)
const form = ref({
lastUpdateTime: '',
ybjzsj: '',
sjkd: '',
url: '',
sourceFilePath: '',
})
const rules = {
ybjzsj: [{ required: true, message: '请输入降水预报截止时间', trigger: 'blur' }],
}
const formRef = ref(null)
// 监听id变化，加载详情或重置表单
watch(
() => props.id,
(newId) => {
if (newId) {
loadInfo(newId)
}
else {
resetForm()
}
},
{ immediate: true }
)
function resetForm() {
form.value = {
lastUpdateTime: '',
ybjzsj: '',
sjkd: '',
url: '',
sourceFilePath: '',
}
if (formRef.value) {
formRef.value.clearValidate()
}
}
async function loadInfo(id) {
console.log(id)
loading.value = true
try {
const res = await getInfo(id)
if (res.code === 200) {
form.value = res.data
}
else {
ElMessage.error('获取详情失败')
}
} catch (error) {
ElMessage.error('获取详情异常')
} finally {
loading.value = false
}
}
function close
Dialog() {
emit('close')
}
function save() {
if (!formRef.value) return
formRef.value.validate(async (valid) => {
if (!valid) return
loading.value = true
try {
const params = { ...form.value }
const res = await saveInfo(params)
if (res.code === 200) {
ElMessage.success('保存成功')
close
Dialog()
}
else {
ElMessage.error(res.msg || '保存失败')
}
} catch (error) {
ElMessage.error('保存异常')
} finally {
loading.value = false
}
})
}
</script>
<style lang="scss" scoped>
.btn
-container {
width: 100%;
margin
-top: 100px;
display: flex;
justify
-content: flex
-end;
}
</style>
这段代码在哪里设置了某个字符编辑后的文字不会更新
本文记录了一个关于 el-dialog 中使用 el-input 的奇怪 bug，当表单内仅包含一个 el-input 并聚焦后按回车键，页面会异常刷新。解决办法是在表单中增加另一个隐藏的 el-input。
扫一扫
957
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
