250 lines
6.7 KiB
Vue
250 lines
6.7 KiB
Vue
<template>
|
|
<a-modal
|
|
:title="isEdit ? '编辑倾斜摄影' : '新增倾斜摄影'"
|
|
v-model:open="modalVisible"
|
|
:confirm-loading="localLoading"
|
|
width="600px"
|
|
:destroy-on-close="true"
|
|
ok-text="保存"
|
|
@cancel="handleCancel"
|
|
@ok="handleOk"
|
|
>
|
|
<a-form
|
|
ref="formRef"
|
|
:model="formData"
|
|
:rules="rules"
|
|
name="edit_form"
|
|
:labelCol="{ span: 5 }"
|
|
>
|
|
<a-form-item label="倾斜影像名称" name="stnm">
|
|
<a-input
|
|
v-model:value="formData.stnm"
|
|
style="width: 100%"
|
|
placeholder="请输入倾斜影像名称"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="所在河段" name="hbrvcd">
|
|
<a-select
|
|
v-model:value="formData.hbrvcd"
|
|
show-search
|
|
style="width: 100%"
|
|
placeholder="请选择所在河段"
|
|
:options="riverOptions"
|
|
:filter-option="filterOption"
|
|
:disabled="isEdit"
|
|
@change="handleRiverSelect"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="所属电站" name="rstcd">
|
|
<a-select
|
|
v-model:value="formData.rstcd"
|
|
show-search
|
|
style="width: 100%"
|
|
placeholder="请选择所属电站"
|
|
:options="ennmOptions"
|
|
:filter-option="filterOption"
|
|
:disabled="isEdit"
|
|
/>
|
|
<!-- <a-input
|
|
v-model:value="formData.ennm"
|
|
style="width: 100%"
|
|
placeholder="请输入所属电站"
|
|
/> -->
|
|
</a-form-item>
|
|
<a-form-item label="倾斜影像URL" name="url">
|
|
<a-input
|
|
v-model:value="formData.url"
|
|
style="width: 100%"
|
|
placeholder="请输入倾斜影像URL"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="模型坐标" name="location">
|
|
<a-textarea
|
|
v-model:value="formData.location"
|
|
:rows="4"
|
|
style="width: 100%"
|
|
placeholder="请输入模型坐标"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="模型精度" name="accuracy">
|
|
<a-input-number
|
|
v-model:value="formData.accuracy"
|
|
style="width: 100%"
|
|
placeholder="请输入模型精度"
|
|
:min="0"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="边界范围" name="boundary">
|
|
<a-textarea
|
|
v-model:value="formData.boundary"
|
|
:rows="4"
|
|
style="width: 100%"
|
|
placeholder="请输入边界范围"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="模型高度" name="height">
|
|
<a-input-number
|
|
v-model:value="formData.height"
|
|
style="width: 100%"
|
|
placeholder="请输入模型高度"
|
|
:min="0"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="备注" name="comments">
|
|
<a-textarea
|
|
v-model:value="formData.comments"
|
|
:rows="4"
|
|
style="width: 100%"
|
|
placeholder="请输入备注"
|
|
/>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, computed, watch } from 'vue';
|
|
import { message } from 'ant-design-vue';
|
|
import type { Rule } from 'ant-design-vue/es/form';
|
|
import dayjs from 'dayjs';
|
|
import { getEngInfoDropdown } from '@/api/select';
|
|
interface Props {
|
|
visible: boolean;
|
|
initialValues?: any | null;
|
|
loading?: boolean;
|
|
riverOptions?: any[];
|
|
}
|
|
const localLoading = ref(false);
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
visible: false,
|
|
initialValues: null,
|
|
loading: false,
|
|
riverOptions: () => []
|
|
});
|
|
|
|
const modalVisible = computed({
|
|
get: () => props.visible,
|
|
set: val => emit('update:visible', val)
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:visible', value: boolean): void;
|
|
(e: 'cancel'): void;
|
|
(e: 'ok', values: any): void;
|
|
}>();
|
|
|
|
const formRef = ref();
|
|
|
|
const defaultFormData = reactive({
|
|
id: undefined,
|
|
stnm: undefined,
|
|
hbrvcd: undefined,
|
|
rstcd: undefined,
|
|
url: undefined,
|
|
location: undefined,
|
|
accuracy: undefined,
|
|
boundary: undefined,
|
|
height: undefined,
|
|
comments: undefined
|
|
});
|
|
const formData: any = reactive({ ...defaultFormData });
|
|
|
|
const rules: Record<string, Rule[]> = {
|
|
stnm: [{ required: true, message: '请输入倾斜影像名称', trigger: 'blur' }],
|
|
hbrvcd: [{ required: true, message: '请输入所在河段', trigger: 'blur' }],
|
|
rstcd: [{ required: true, message: '请输入所属电站', trigger: 'blur' }],
|
|
url: [{ required: true, message: '请输入倾斜影像URL', trigger: 'blur' }],
|
|
location: [{ required: true, message: '请输入模型坐标', trigger: 'blur' }]
|
|
};
|
|
|
|
const isEdit = computed(() => !!props.initialValues);
|
|
|
|
const handleOk = async () => {
|
|
try {
|
|
await formRef.value.validate();
|
|
const ennmItem = ennmOptions.value.find(item => item.value == formData.rstcd);
|
|
const riverItem = props.riverOptions.find(item => item.value == formData.hbrvcd);
|
|
const submitValues = {
|
|
...formData,
|
|
ennm: ennmItem?.ennm || '',
|
|
hbrvcdName: riverItem?.label || '',
|
|
captureDate: formData.captureDate
|
|
? dayjs(formData.captureDate).format('YYYY-MM-DD')
|
|
: undefined,
|
|
};
|
|
|
|
emit('ok', submitValues);
|
|
} catch (error) {
|
|
console.error('Validate Failed:', error);
|
|
message.error('请检查表单填写是否正确');
|
|
}
|
|
};
|
|
|
|
const initForm = () => {
|
|
if (props.initialValues) {
|
|
const values = props.initialValues;
|
|
Object.keys(formData).forEach(key => {
|
|
if (values.hasOwnProperty(key)) {
|
|
if (key === 'captureDate' && values[key]) {
|
|
formData[key] = dayjs(values[key]);
|
|
} else {
|
|
formData[key] = values[key];
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
resetForm();
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
if (formRef.value) {
|
|
formRef.value.resetFields();
|
|
}
|
|
Object.assign(formData, defaultFormData);
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
emit('update:visible', false);
|
|
emit('cancel');
|
|
resetForm();
|
|
};
|
|
// 搜索过滤
|
|
const filterOption = (inputValue: string, option: any) => {
|
|
const label = option.label || option.name || '';
|
|
const reachcdName = option.reachcdName || '';
|
|
const keyword = inputValue || '';
|
|
|
|
return label.indexOf(keyword) !== -1 || reachcdName.indexOf(keyword) !== -1;
|
|
};
|
|
const ennmOptions = ref([]);
|
|
const handleRiverSelect = async (value: any) => {
|
|
let res: any = await getEngInfoDropdown({ reachcd: value });
|
|
if (res?.data?.length > 0) {
|
|
res.data.forEach((item: any) => {
|
|
item.value = item.stcd;
|
|
item.label = item.ennm;
|
|
});
|
|
ennmOptions.value = res.data;
|
|
} else {
|
|
ennmOptions.value = [];
|
|
}
|
|
};
|
|
watch(
|
|
() => props.visible,
|
|
newVisible => {
|
|
if (newVisible) {
|
|
initForm();
|
|
handleRiverSelect('');
|
|
}
|
|
},
|
|
{ immediate: false }
|
|
);
|
|
|
|
defineExpose({
|
|
localLoading
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|