438 lines
14 KiB
Vue
438 lines
14 KiB
Vue
<template>
|
|
<a-modal
|
|
v-model:open="visible"
|
|
:title="isAdd ? '新增动物救助站' : '编辑动物救助站'"
|
|
width="60vw"
|
|
:confirm-loading="confirmLoading"
|
|
@ok="handleOk"
|
|
@cancel="handleCancel"
|
|
>
|
|
<a-form
|
|
ref="formRef"
|
|
:model="formData"
|
|
:label-col="{ span: 8 }"
|
|
:wrapper-col="{ span: 16 }"
|
|
:rules="formRules"
|
|
class="max-h-[70vh] overflow-y-auto pr-4"
|
|
>
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-form-item label="救助站编码" name="stcd">
|
|
<a-input
|
|
v-model:value="formData.stcd"
|
|
placeholder="请输入救助站编码"
|
|
:disabled="!isAdd"
|
|
style="width: 100%"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="救助站名称" name="stnm">
|
|
<a-input
|
|
v-model:value="formData.stnm"
|
|
placeholder="请输入救助站名称"
|
|
style="width: 100%"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="测站类型" name="sttp">
|
|
<a-select
|
|
v-model:value="formData.sttp"
|
|
placeholder="请选择测站类型"
|
|
allow-clear
|
|
show-search
|
|
:filter-option="filterOption"
|
|
>
|
|
<a-select-option
|
|
v-for="item in sttpOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>{{ item.label }}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="站址" name="stlc">
|
|
<a-input
|
|
v-model:value="formData.stlc"
|
|
placeholder="请输入站址"
|
|
style="width: 100%"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="水电基地" name="baseId">
|
|
<a-select
|
|
v-model:value="formData.baseId"
|
|
placeholder="请选择水电基地"
|
|
allow-clear
|
|
show-search
|
|
:filter-option="filterOption"
|
|
>
|
|
<a-select-option
|
|
v-for="item in baseNameOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>{{ item.label }}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="所属电站" name="rstcd">
|
|
<a-select
|
|
v-model:value="formData.rstcd"
|
|
placeholder="请选择所属电站"
|
|
allow-clear
|
|
show-search
|
|
:loading="engLoading"
|
|
:filter-option="filterOption"
|
|
>
|
|
<a-select-option
|
|
v-for="item in engInfoOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>{{ item.label }}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="地点" name="place">
|
|
<a-input
|
|
v-model:value="formData.place"
|
|
placeholder="请输入地点"
|
|
style="width: 100%"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="面积(km²)" name="area">
|
|
<a-input-number
|
|
v-model:value="formData.area"
|
|
placeholder="请输入面积"
|
|
style="width: 100%"
|
|
:min="0"
|
|
:precision="4"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="保护方式" name="bhfs">
|
|
<a-input
|
|
v-model:value="formData.bhfs"
|
|
placeholder="请输入保护方式"
|
|
style="width: 100%"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="保护原因" name="bhyy">
|
|
<a-select
|
|
v-model:value="formData.bhyy"
|
|
placeholder="请选择保护原因"
|
|
allow-clear
|
|
>
|
|
<a-select-option :value="1">是</a-select-option>
|
|
<a-select-option :value="0">否</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="保护对象" name="bhdx">
|
|
<a-input
|
|
v-model:value="formData.bhdx"
|
|
placeholder="请输入保护对象"
|
|
style="width: 100%"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="是否启用" name="usfl">
|
|
<a-select
|
|
v-model:value="formData.usfl"
|
|
placeholder="请选择是否启用"
|
|
allow-clear
|
|
>
|
|
<a-select-option :value="1">启用</a-select-option>
|
|
<a-select-option :value="0">禁用</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="建成日期" name="jcdt">
|
|
<a-date-picker
|
|
v-model:value="formData.jcdt"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
placeholder="请选择建成日期"
|
|
style="width: 100%"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="投资(亿元)" name="inv">
|
|
<a-input-number
|
|
v-model:value="formData.inv"
|
|
placeholder="请输入投资"
|
|
style="width: 100%"
|
|
:min="0"
|
|
:precision="4"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="24">
|
|
<a-form-item label="简介" name="introduce" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
|
|
<a-textarea
|
|
v-model:value="formData.introduce"
|
|
placeholder="请输入简介"
|
|
:rows="2"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="24">
|
|
<a-form-item label="备注" name="remark" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
|
|
<a-textarea
|
|
v-model:value="formData.remark"
|
|
placeholder="请输入备注"
|
|
:rows="2"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</a-modal>
|
|
|
|
<ConfirmModal
|
|
v-model:open="confirmModalVisible"
|
|
:diff-list="diffList"
|
|
:confirm-loading="confirmLoading"
|
|
@confirm="handleConfirmSubmit"
|
|
@cancel="handleConfirmCancel"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, watch } from 'vue';
|
|
import { message } from 'ant-design-vue';
|
|
import { addVaInfo, updateVaInfo } from '@/api/DataQueryMenuModule';
|
|
import { getEngInfoDropdown } from '@/api/select';
|
|
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
|
import { sttpGetKendoList } from '@/api/system/map/ConfigManagement';
|
|
import ConfirmModal from '@/components/ConfirmModal/index.vue';
|
|
import { useDraggable } from '@/utils/drag';
|
|
|
|
const props = defineProps<{
|
|
open: boolean;
|
|
record?: any;
|
|
isAdd?: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits(['update:open', 'success']);
|
|
const jidiSelectEventStore = useJidiSelectEventStore();
|
|
|
|
const visible = computed({
|
|
get: () => props.open,
|
|
set: val => emit('update:open', val)
|
|
});
|
|
useDraggable(visible, { boundary: true, resetOnOpen: true });
|
|
|
|
const formRef = ref();
|
|
const confirmLoading = ref(false);
|
|
const formData = ref<any>({});
|
|
const originalRecord = ref<any>({});
|
|
const confirmModalVisible = ref(false);
|
|
|
|
const formRules = ref<any>({
|
|
stcd: [{ required: true, message: '请输入救助站编码', trigger: 'blur' }],
|
|
stnm: [{ required: true, message: '请输入救助站名称', trigger: 'blur' }],
|
|
sttp: [{ required: true, message: '请选择测站类型', trigger: 'change' }]
|
|
});
|
|
|
|
const engInfoOptions = ref<any[]>([]);
|
|
const sttpOptions = ref<any[]>([]);
|
|
|
|
const baseNameOptions = ref<any[]>(
|
|
jidiSelectEventStore.jidiData
|
|
.filter((item: any) => item.wbsCode !== 'all')
|
|
.map((item: any) => ({
|
|
label: item.wbsName,
|
|
value: item.wbsCode
|
|
}))
|
|
);
|
|
|
|
const engLoading = ref(false);
|
|
|
|
const fieldLabelMap: Record<string, string> = {
|
|
stcd: '救助站编码',
|
|
stnm: '救助站名称',
|
|
sttp: '测站类型',
|
|
stlc: '站址',
|
|
lgtd: '经度(°)',
|
|
lttd: '纬度(°)',
|
|
baseId: '水电基地',
|
|
rstcd: '所属电站',
|
|
place: '地点',
|
|
area: '面积',
|
|
bhfs: '保护方式',
|
|
bhyy: '保护原因',
|
|
bhdx: '保护对象',
|
|
usfl: '是否启用',
|
|
jcdt: '建成日期',
|
|
inv: '投资',
|
|
introduce: '简介',
|
|
remark: '备注'
|
|
};
|
|
|
|
const selectOptionsMap: Record<string, () => any[]> = {
|
|
sttp: () => sttpOptions.value,
|
|
usfl: () => [
|
|
{ label: '启用', value: 1 },
|
|
{ label: '禁用', value: 0 }
|
|
],
|
|
bhyy: () => [
|
|
{ label: '是', value: 1 },
|
|
{ label: '否', value: 0 }
|
|
],
|
|
baseId: () => baseNameOptions.value,
|
|
rstcd: () => engInfoOptions.value
|
|
};
|
|
|
|
const changeOrder = ref<
|
|
{ field: string; label: string; oldValue: string; newValue: string }[]
|
|
>([]);
|
|
const diffList = changeOrder;
|
|
|
|
const resolveSelectLabel = (field: string, value: any): string => {
|
|
if (value === null || value === undefined || value === '') return '空';
|
|
const getOptions = selectOptionsMap[field];
|
|
if (getOptions) {
|
|
const opt = getOptions().find(
|
|
(o: any) => String(o.value) === String(value)
|
|
);
|
|
if (opt) return opt.label;
|
|
}
|
|
return String(value);
|
|
};
|
|
|
|
const filterOption = (inputValue: string, option: any) => {
|
|
const label = option.label || option.value;
|
|
const keyword = inputValue || '';
|
|
return label.includes(keyword);
|
|
};
|
|
|
|
watch(
|
|
() => formData.value,
|
|
newData => {
|
|
const original = originalRecord.value;
|
|
for (const key in newData) {
|
|
const oldVal = original[key];
|
|
const newVal = newData[key];
|
|
if (oldVal !== newVal) {
|
|
const existingIdx = changeOrder.value.findIndex(c => c.field === key);
|
|
const oldNorm = oldVal === null || oldVal === undefined || oldVal === '-' ? null : oldVal;
|
|
const newNorm = newVal === null || newVal === undefined ? null : newVal;
|
|
if (oldNorm === newNorm) continue;
|
|
if (oldNorm !== null && newNorm !== null && !isNaN(Number(oldNorm)) && !isNaN(Number(newNorm)) && Number(oldNorm) === Number(newNorm)) continue;
|
|
const isSelect = !!selectOptionsMap[key];
|
|
const oldDisplay = isSelect ? resolveSelectLabel(key, oldNorm) : oldNorm === null ? '空' : String(oldNorm);
|
|
const newDisplay = isSelect ? resolveSelectLabel(key, newNorm) : newNorm === null ? '空' : String(newNorm);
|
|
const entry = { field: key, label: fieldLabelMap[key] || key, oldValue: oldDisplay, newValue: newDisplay };
|
|
if (existingIdx >= 0) changeOrder.value[existingIdx] = entry;
|
|
else changeOrder.value.push(entry);
|
|
} else {
|
|
changeOrder.value = changeOrder.value.filter(c => c.field !== key);
|
|
}
|
|
}
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
watch(() => props.record, newRecord => {
|
|
if (newRecord) {
|
|
const converted = { ...newRecord };
|
|
originalRecord.value = { ...converted };
|
|
formData.value = { ...converted };
|
|
changeOrder.value = [];
|
|
}
|
|
}, { deep: true });
|
|
|
|
const loadEngOptions = async (baseId?: string) => {
|
|
engLoading.value = true;
|
|
try {
|
|
const params = baseId ? { baseId } : {};
|
|
const res = await getEngInfoDropdown(params);
|
|
engInfoOptions.value = (res.data || []).map((item: any) => ({ label: item.ennm, value: item.stcd }));
|
|
} catch (error) {
|
|
console.error('获取电站列表失败:', error);
|
|
} finally {
|
|
engLoading.value = false;
|
|
}
|
|
};
|
|
|
|
const loadDropdownData = () => {
|
|
sttpGetKendoList({
|
|
filter: {
|
|
logic: 'and',
|
|
filters: [{ field: 'sttpCode', operator: 'in', dataType: 'string', value: ['VA'] }]
|
|
}
|
|
}).then(res => {
|
|
sttpOptions.value = (res.data?.data || []).map((item: any) => ({ label: item.sttpName, value: item.sttpCode }));
|
|
});
|
|
baseNameOptions.value = jidiSelectEventStore.jidiData.filter((item: any) => item.wbsCode !== 'all').map((item: any) => ({ label: item.wbsName, value: item.wbsCode }));
|
|
};
|
|
|
|
watch(() => formData.value?.baseId, (newBaseId) => {
|
|
formData.value.rstcd = undefined;
|
|
loadEngOptions(newBaseId || undefined);
|
|
});
|
|
|
|
watch(() => props.open, val => {
|
|
if (val) {
|
|
if (props.isAdd) {
|
|
formData.value = {};
|
|
originalRecord.value = {};
|
|
changeOrder.value = [];
|
|
loadEngOptions();
|
|
}
|
|
loadDropdownData();
|
|
}
|
|
});
|
|
|
|
const handleOk = async () => {
|
|
try {
|
|
await formRef.value?.validateFields();
|
|
if (!props.isAdd && changeOrder.value.length === 0) { message.info('未检测到任何修改'); return; }
|
|
confirmModalVisible.value = true;
|
|
} catch (error) { console.error('验证失败:', error); }
|
|
};
|
|
|
|
const handleConfirmSubmit = async (source: string) => {
|
|
confirmLoading.value = true;
|
|
try {
|
|
const engInfo: Record<string, any> = {};
|
|
let res: any;
|
|
if (props.isAdd) {
|
|
Object.assign(engInfo, formData.value);
|
|
res = await addVaInfo({ engInfo, source: source.trim() || '新增' });
|
|
} else {
|
|
engInfo.stcd = formData.value.stcd;
|
|
changeOrder.value.forEach(item => { engInfo[item.field] = formData.value[item.field]; });
|
|
res = await updateVaInfo({ engInfo, source: source.trim() || '编辑' });
|
|
}
|
|
if (res?.code == 0 || res?.success) {
|
|
message.success(props.isAdd ? '新增成功' : '编辑成功');
|
|
confirmModalVisible.value = false;
|
|
visible.value = false;
|
|
emit('success');
|
|
} else { message.error(res?.msg || (props.isAdd ? '新增失败' : '编辑失败')); }
|
|
} catch (error) { message.error('提交失败，请重试'); }
|
|
finally { confirmLoading.value = false; }
|
|
};
|
|
|
|
const handleConfirmCancel = () => { confirmModalVisible.value = false; };
|
|
const handleCancel = () => { visible.value = false; confirmModalVisible.value = false; formRef.value?.resetFields(); };
|
|
</script>
|