修改倾斜摄像
This commit is contained in:
扈兆增
parent
770b3cfcf1
commit
ca3fadf53e
@ -1,9 +1,17 @@
|
|||||||
import request from '@/utils/request';
|
import request from '@/utils/request';
|
||||||
|
|
||||||
|
// 获取倾斜摄影 列表
|
||||||
|
export function getListTiltPhotoTree(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/sys/oblique/GetKendoListCust',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
});
|
||||||
|
}
|
||||||
// 获取所有倾斜摄影
|
// 获取所有倾斜摄影
|
||||||
export function getAllTiltPhotoTree(data: any) {
|
export function getAllTiltPhotoTree(data: any) {
|
||||||
return request({
|
return request({
|
||||||
url: '/sys/oblique/GetKendoListCust',
|
url: '/overview/vmsstbprpt/GetKendoList',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: data
|
data: data
|
||||||
});
|
});
|
||||||
|
|||||||
@ -12,10 +12,10 @@
|
|||||||
<BasicTable
|
<BasicTable
|
||||||
ref="basicTable"
|
ref="basicTable"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:list-url="getAllTiltPhotoTree"
|
:list-url="getListTiltPhotoTree"
|
||||||
:search-params="searchParams"
|
:search-params="searchParams"
|
||||||
>
|
>
|
||||||
<template #action="{ column, record }">
|
<template #action="{ record }">
|
||||||
<div class="flex gap-[6px]">
|
<div class="flex gap-[6px]">
|
||||||
<a-button
|
<a-button
|
||||||
class="!p-0"
|
class="!p-0"
|
||||||
@ -54,7 +54,7 @@ import TiltPhotoManagementSearch from './TiltPhotoManagementSearch.vue';
|
|||||||
import TiltPhotoManagementForm from './TiltPhotoManagementForm.vue';
|
import TiltPhotoManagementForm from './TiltPhotoManagementForm.vue';
|
||||||
import { message, Modal } from 'ant-design-vue';
|
import { message, Modal } from 'ant-design-vue';
|
||||||
import {
|
import {
|
||||||
getAllTiltPhotoTree,
|
getListTiltPhotoTree,
|
||||||
saveTiltPhoto,
|
saveTiltPhoto,
|
||||||
deleteTiltPhoto
|
deleteTiltPhoto
|
||||||
} from '@/api/system/map/TiltPhotoManagement';
|
} from '@/api/system/map/TiltPhotoManagement';
|
||||||
@ -215,8 +215,7 @@ const handleEditSubmit = async (values: any) => {
|
|||||||
try {
|
try {
|
||||||
let res = await saveTiltPhoto({
|
let res = await saveTiltPhoto({
|
||||||
...currentRecord.value,
|
...currentRecord.value,
|
||||||
...values,
|
...values
|
||||||
|
|
||||||
});
|
});
|
||||||
message.success(`保存成功`);
|
message.success(`保存成功`);
|
||||||
|
|
||||||
|
|||||||
@ -1,828 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-modal
|
|
||||||
:title="isEdit ? '编辑沿程配置' : '新增沿程配置'"
|
|
||||||
v-model:open="modalVisible"
|
|
||||||
:confirm-loading="localLoading"
|
|
||||||
width="1200px"
|
|
||||||
: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-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="沿程配置名称" name="name">
|
|
||||||
<a-input
|
|
||||||
v-model:value="formData.name"
|
|
||||||
style="width: 100%"
|
|
||||||
placeholder="请输入沿程配置名称"
|
|
||||||
/> </a-form-item
|
|
||||||
></a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="沿程配置编码" name="code">
|
|
||||||
<a-input
|
|
||||||
v-model:value="formData.code"
|
|
||||||
style="width: 100%"
|
|
||||||
placeholder="请输入沿程配置编码"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="所在河段" name="rvcd">
|
|
||||||
<a-select
|
|
||||||
v-model:value="formData.rvcd"
|
|
||||||
show-search
|
|
||||||
style="width: 100%"
|
|
||||||
placeholder="请选择所在河段"
|
|
||||||
:options="riverOptions"
|
|
||||||
:filter-option="filterOption"
|
|
||||||
@change="handleRiverSelect"
|
|
||||||
:disabled="isEdit"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="备注" name="remark">
|
|
||||||
<a-textarea
|
|
||||||
:rows="4"
|
|
||||||
v-model:value="formData.remark"
|
|
||||||
style="width: 100%"
|
|
||||||
placeholder="请输入备注"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</a-form>
|
|
||||||
<div class="config-tree-container">
|
|
||||||
<!-- 新增一级节点区域 -->
|
|
||||||
<div v-if="addingNewNode" class="add-node-row">
|
|
||||||
<a-select
|
|
||||||
v-model:value="newNodeData.stcd"
|
|
||||||
show-search
|
|
||||||
placeholder="请选择站点"
|
|
||||||
style="width: 300px"
|
|
||||||
:filter-option="filterOption"
|
|
||||||
@change="handleNodeSelect"
|
|
||||||
>
|
|
||||||
<a-select-option
|
|
||||||
v-for="item in stationList"
|
|
||||||
:key="item.stcd"
|
|
||||||
:value="item.stcd"
|
|
||||||
>
|
|
||||||
{{ item.stnm }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
<a-button
|
|
||||||
type="primary"
|
|
||||||
@click="handleSaveNewNode"
|
|
||||||
style="margin-left: 8px"
|
|
||||||
>
|
|
||||||
保存
|
|
||||||
</a-button>
|
|
||||||
<a-button @click="handleCancelAdd" style="margin-left: 8px">
|
|
||||||
<MinusOutlined />
|
|
||||||
</a-button>
|
|
||||||
</div>
|
|
||||||
<a-button v-else class="mb-4" type="primary" @click="handleAdd">
|
|
||||||
<PlusOutlined /> 新增一级节点
|
|
||||||
</a-button>
|
|
||||||
|
|
||||||
<!-- 树形结构 -->
|
|
||||||
<a-tree
|
|
||||||
v-if="treeData.length > 0"
|
|
||||||
:tree-data="treeData"
|
|
||||||
:default-expand-all="false"
|
|
||||||
:selectable="false"
|
|
||||||
block-node
|
|
||||||
style="width: 400px"
|
|
||||||
>
|
|
||||||
<template #title="{ dataRef }">
|
|
||||||
<!-- 编辑状态：只显示编辑区域 -->
|
|
||||||
<div
|
|
||||||
v-if="editingNode && editingNodeKey === dataRef.key"
|
|
||||||
class="add-child-node-row w-[300px]"
|
|
||||||
>
|
|
||||||
<a-select
|
|
||||||
v-model:value="editNodeData.stcd"
|
|
||||||
show-search
|
|
||||||
placeholder="请选择站点"
|
|
||||||
style="width: 300px"
|
|
||||||
:filter-option="filterOption"
|
|
||||||
@change="() => handleEditNodeSelect(dataRef)"
|
|
||||||
>
|
|
||||||
<a-select-option
|
|
||||||
v-for="item in dataRef.parentId
|
|
||||||
? childStationList
|
|
||||||
: stationList"
|
|
||||||
:key="item.stcd"
|
|
||||||
:value="item.stcd"
|
|
||||||
>
|
|
||||||
{{ dataRef.parentId ? item.stnm : item.ennm }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
<a-button
|
|
||||||
type="primary"
|
|
||||||
@click.stop="handleSaveEditNode"
|
|
||||||
style="margin-left: 8px"
|
|
||||||
>
|
|
||||||
保存
|
|
||||||
</a-button>
|
|
||||||
<a-button
|
|
||||||
@click.stop="handleCancelEditNode"
|
|
||||||
style="margin-left: 8px"
|
|
||||||
>
|
|
||||||
<MinusOutlined />
|
|
||||||
</a-button>
|
|
||||||
</div>
|
|
||||||
<!-- 非编辑状态：显示正常节点内容 -->
|
|
||||||
<template v-else>
|
|
||||||
<div class="tree-node-wrapper">
|
|
||||||
<span class="tree-node-title"> {{ getNodeTitle(dataRef) }} </span>
|
|
||||||
<div class="tree-node-actions">
|
|
||||||
<!-- 一级节点：支持新增子节点、编辑、排序、删除 -->
|
|
||||||
<template v-if="!dataRef.parentId">
|
|
||||||
<a-button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
@click.stop="handleAddChild(dataRef)"
|
|
||||||
:title="
|
|
||||||
dataRef.sttpName
|
|
||||||
? `子级添加-${dataRef.sttpName}`
|
|
||||||
: '子级添加'
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<PlusOutlined />
|
|
||||||
</a-button>
|
|
||||||
<a-button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
@click.stop="handleEditNode(dataRef)"
|
|
||||||
title="编辑"
|
|
||||||
>
|
|
||||||
<EditOutlined />
|
|
||||||
</a-button>
|
|
||||||
<a-button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
@click.stop="handleMoveUp(dataRef)"
|
|
||||||
title="上移"
|
|
||||||
:disabled="isFirstNode(dataRef)"
|
|
||||||
>
|
|
||||||
<ArrowUpOutlined />
|
|
||||||
</a-button>
|
|
||||||
<a-button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
@click.stop="handleMoveDown(dataRef)"
|
|
||||||
title="下移"
|
|
||||||
:disabled="isLastNode(dataRef)"
|
|
||||||
>
|
|
||||||
<ArrowDownOutlined />
|
|
||||||
</a-button>
|
|
||||||
<a-button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
danger
|
|
||||||
@click.stop="handleDeleteNode(dataRef)"
|
|
||||||
title="删除"
|
|
||||||
>
|
|
||||||
<DeleteOutlined />
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
<!-- 二级节点：只支持编辑、排序、删除 -->
|
|
||||||
<template v-else>
|
|
||||||
<a-button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
@click.stop="handleEditNode(dataRef)"
|
|
||||||
title="编辑"
|
|
||||||
>
|
|
||||||
<EditOutlined />
|
|
||||||
</a-button>
|
|
||||||
<a-button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
@click.stop="handleMoveUp(dataRef)"
|
|
||||||
title="上移"
|
|
||||||
:disabled="isFirstNode(dataRef)"
|
|
||||||
>
|
|
||||||
<ArrowUpOutlined />
|
|
||||||
</a-button>
|
|
||||||
<a-button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
@click.stop="handleMoveDown(dataRef)"
|
|
||||||
title="下移"
|
|
||||||
:disabled="isLastNode(dataRef)"
|
|
||||||
>
|
|
||||||
<ArrowDownOutlined />
|
|
||||||
</a-button>
|
|
||||||
<a-button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
danger
|
|
||||||
@click.stop="handleDeleteNode(dataRef)"
|
|
||||||
title="删除"
|
|
||||||
>
|
|
||||||
<DeleteOutlined />
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 子节点添加区域 -->
|
|
||||||
<div
|
|
||||||
v-if="addingChildNode && currentParentKey === dataRef.key"
|
|
||||||
class="add-child-node-row"
|
|
||||||
>
|
|
||||||
<a-select
|
|
||||||
v-model:value="childNodeData.stcd"
|
|
||||||
show-search
|
|
||||||
placeholder="请选择站点"
|
|
||||||
style="width: 300px"
|
|
||||||
:filter-option="filterOption"
|
|
||||||
@change="handleChildNodeSelect"
|
|
||||||
>
|
|
||||||
<a-select-option
|
|
||||||
v-for="item in childStationList"
|
|
||||||
:key="item.stcd"
|
|
||||||
:value="item.stcd"
|
|
||||||
>
|
|
||||||
{{ item.stnm }}-{{ item.sttpName }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
<a-button
|
|
||||||
type="primary"
|
|
||||||
@click.stop="handleSaveChildNode"
|
|
||||||
style="margin-left: 8px"
|
|
||||||
>
|
|
||||||
保存
|
|
||||||
</a-button>
|
|
||||||
<a-button
|
|
||||||
@click.stop="handleCancelAddChild"
|
|
||||||
style="margin-left: 8px"
|
|
||||||
>
|
|
||||||
<MinusOutlined />
|
|
||||||
</a-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</a-tree>
|
|
||||||
<a-empty v-else description="暂无数据" style="margin-top: 20px" />
|
|
||||||
</div>
|
|
||||||
</a-modal>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, reactive, computed, watch } from 'vue';
|
|
||||||
import { message, Modal } from 'ant-design-vue';
|
|
||||||
import type { Rule } from 'ant-design-vue/es/form';
|
|
||||||
import dayjs from 'dayjs';
|
|
||||||
import {
|
|
||||||
PlusOutlined,
|
|
||||||
MinusOutlined,
|
|
||||||
EditOutlined,
|
|
||||||
DeleteOutlined,
|
|
||||||
ArrowUpOutlined,
|
|
||||||
ArrowDownOutlined
|
|
||||||
} from '@ant-design/icons-vue';
|
|
||||||
import { getEngInfoDropdown, getAddvcdDropdownByRvcd } 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,
|
|
||||||
name: undefined,
|
|
||||||
code: undefined,
|
|
||||||
rvcd: undefined,
|
|
||||||
remark: undefined
|
|
||||||
});
|
|
||||||
const formData: any = reactive({ ...defaultFormData });
|
|
||||||
|
|
||||||
const rules: Record<string, Rule[]> = {
|
|
||||||
name: [{ required: true, message: '请输入沿程配置名称', trigger: 'blur' }],
|
|
||||||
code: [{ required: true, message: '请输入配置编码', trigger: 'blur' }],
|
|
||||||
rvcd: [{ required: true, message: '请选择所在河段', trigger: 'change' }]
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRiverSelect = async (value: string) => {
|
|
||||||
const res = await getEngInfoDropdown({ rvcd: value });
|
|
||||||
stationList.value = (res.data || []).map((item: any) => ({
|
|
||||||
...item,
|
|
||||||
stnm: item.ennm
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const isEdit = computed(() => !!props.initialValues);
|
|
||||||
|
|
||||||
// 树形数据
|
|
||||||
const treeData = ref<any[]>([]);
|
|
||||||
|
|
||||||
// 新增节点相关
|
|
||||||
const addingNewNode = ref(false);
|
|
||||||
const newNodeData = ref({
|
|
||||||
stcd: undefined,
|
|
||||||
ennm: '',
|
|
||||||
sttpName: ''
|
|
||||||
});
|
|
||||||
|
|
||||||
// 添加子节点相关
|
|
||||||
const addingChildNode = ref(false);
|
|
||||||
const currentParentKey = ref<string | null>(null);
|
|
||||||
const childNodeData = ref({
|
|
||||||
stcd: undefined,
|
|
||||||
ennm: '',
|
|
||||||
sttpName: ''
|
|
||||||
});
|
|
||||||
|
|
||||||
// 编辑节点相关
|
|
||||||
const editingNode = ref(false);
|
|
||||||
const editingNodeKey = ref<string | null>(null);
|
|
||||||
const editNodeData = ref({
|
|
||||||
stcd: undefined,
|
|
||||||
ennm: '',
|
|
||||||
sttpName: '',
|
|
||||||
originalData: null as any
|
|
||||||
});
|
|
||||||
|
|
||||||
const stationList = ref([]);
|
|
||||||
const childStationList = ref([]);
|
|
||||||
|
|
||||||
// 生成唯一ID
|
|
||||||
let nodeIdCounter = 0;
|
|
||||||
const generateNodeId = () => `node_${Date.now()}_${++nodeIdCounter}`;
|
|
||||||
|
|
||||||
// 获取节点标题
|
|
||||||
const getNodeTitle = (dataRef: any) => {
|
|
||||||
if (!dataRef.parentId) {
|
|
||||||
return dataRef.ennm || '';
|
|
||||||
} else {
|
|
||||||
return `${dataRef.ennm || ''} ${dataRef.sttpName || ''}`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 搜索过滤
|
|
||||||
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 isFirstNode = (dataRef: any) => {
|
|
||||||
const siblings = getSiblings(dataRef);
|
|
||||||
return siblings.length > 0 && siblings[0].key === dataRef.key;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 判断是否为最后一个节点
|
|
||||||
const isLastNode = (dataRef: any) => {
|
|
||||||
const siblings = getSiblings(dataRef);
|
|
||||||
return (
|
|
||||||
siblings.length > 0 && siblings[siblings.length - 1].key === dataRef.key
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取兄弟节点
|
|
||||||
const getSiblings = (dataRef: any) => {
|
|
||||||
if (!dataRef.parentId) {
|
|
||||||
// 一级节点
|
|
||||||
return treeData.value;
|
|
||||||
} else {
|
|
||||||
// 二级节点，找到父节点的 children
|
|
||||||
const parent = findNodeByKey(treeData.value, dataRef.parentId);
|
|
||||||
return parent?.children || [];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 根据 key 查找节点
|
|
||||||
const findNodeByKey = (nodes: any[], key: string): any => {
|
|
||||||
for (const node of nodes) {
|
|
||||||
if (node.key === key) {
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
if (node.children && node.children.length > 0) {
|
|
||||||
const found = findNodeByKey(node.children, key);
|
|
||||||
if (found) return found;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增一级节点
|
|
||||||
const handleAdd = () => {
|
|
||||||
if (!formData.rvcd) {
|
|
||||||
message.warning('请先选择所在河段');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
addingNewNode.value = true;
|
|
||||||
newNodeData.value = {
|
|
||||||
stcd: undefined,
|
|
||||||
ennm: '',
|
|
||||||
sttpName: ''
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// 选择节点
|
|
||||||
const handleNodeSelect = (value: string) => {
|
|
||||||
const station = stationList.value.find(item => item.stcd === value);
|
|
||||||
if (station) {
|
|
||||||
newNodeData.value.ennm = station.stnm;
|
|
||||||
newNodeData.value.sttpName = station.sttpName;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 保存新增节点
|
|
||||||
const handleSaveNewNode = () => {
|
|
||||||
if (!newNodeData.value.stcd) {
|
|
||||||
message.error('请选择站点');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const newNode = {
|
|
||||||
key: generateNodeId(),
|
|
||||||
stcd: newNodeData.value.stcd,
|
|
||||||
ennm: newNodeData.value.ennm,
|
|
||||||
sttpName: newNodeData.value.sttpName,
|
|
||||||
parentId: null,
|
|
||||||
children: []
|
|
||||||
};
|
|
||||||
|
|
||||||
treeData.value.push(newNode);
|
|
||||||
addingNewNode.value = false;
|
|
||||||
message.success('添加成功');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 取消新增
|
|
||||||
const handleCancelAdd = () => {
|
|
||||||
addingNewNode.value = false;
|
|
||||||
newNodeData.value = {
|
|
||||||
stcd: undefined,
|
|
||||||
ennm: '',
|
|
||||||
sttpName: ''
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// 添加子节点（二级节点）
|
|
||||||
const handleAddChild = async (parentData: any) => {
|
|
||||||
addingChildNode.value = true;
|
|
||||||
currentParentKey.value = parentData.key;
|
|
||||||
childNodeData.value = {
|
|
||||||
stcd: undefined,
|
|
||||||
ennm: '',
|
|
||||||
sttpName: ''
|
|
||||||
};
|
|
||||||
const res = await getAddvcdDropdownByRvcd({ stcd: parentData.stcd });
|
|
||||||
childStationList.value = res.data || [];
|
|
||||||
};
|
|
||||||
|
|
||||||
// 选择子节点
|
|
||||||
const handleChildNodeSelect = (value: string) => {
|
|
||||||
const station = childStationList.value.find(item => item.stcd === value);
|
|
||||||
if (station) {
|
|
||||||
childNodeData.value.ennm = station.stnm;
|
|
||||||
childNodeData.value.sttpName = station.sttpName;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 保存新增子节点
|
|
||||||
const handleSaveChildNode = () => {
|
|
||||||
if (!childNodeData.value.stcd) {
|
|
||||||
message.error('请选择站点');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const parent = findNodeByKey(treeData.value, currentParentKey.value!);
|
|
||||||
if (!parent) {
|
|
||||||
message.error('父节点不存在');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const newChild = {
|
|
||||||
key: generateNodeId(),
|
|
||||||
stcd: childNodeData.value.stcd,
|
|
||||||
ennm: childNodeData.value.ennm,
|
|
||||||
sttpName: childNodeData.value.sttpName,
|
|
||||||
parentId: parent.key,
|
|
||||||
children: []
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!parent.children) {
|
|
||||||
parent.children = [];
|
|
||||||
}
|
|
||||||
// 在子节点列表顶部添加
|
|
||||||
parent.children.unshift(newChild);
|
|
||||||
|
|
||||||
addingChildNode.value = false;
|
|
||||||
currentParentKey.value = null;
|
|
||||||
message.success('添加子节点成功');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 取消添加子节点
|
|
||||||
const handleCancelAddChild = () => {
|
|
||||||
addingChildNode.value = false;
|
|
||||||
currentParentKey.value = null;
|
|
||||||
childNodeData.value = {
|
|
||||||
stcd: undefined,
|
|
||||||
ennm: '',
|
|
||||||
sttpName: ''
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// 编辑节点
|
|
||||||
const handleEditNode = async (dataRef: any) => {
|
|
||||||
editingNode.value = true;
|
|
||||||
editingNodeKey.value = dataRef.key;
|
|
||||||
// 保存原始数据
|
|
||||||
editNodeData.value = {
|
|
||||||
stcd: dataRef.stcd,
|
|
||||||
ennm: dataRef.ennm,
|
|
||||||
sttpName: dataRef.sttpName,
|
|
||||||
originalData: { ...dataRef }
|
|
||||||
};
|
|
||||||
if (dataRef.parentId) {
|
|
||||||
const parent = findNodeByKey(treeData.value, dataRef.parentId);
|
|
||||||
if (parent) {
|
|
||||||
const res = await getAddvcdDropdownByRvcd({ stcd: parent.stcd });
|
|
||||||
childStationList.value = res.data || [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 选择编辑节点
|
|
||||||
const handleEditNodeSelect = (dataRef: any) => {
|
|
||||||
const value = editNodeData.value.stcd;
|
|
||||||
const list = dataRef.parentId ? childStationList.value : stationList.value;
|
|
||||||
const station = list.find(item => item.stcd === value);
|
|
||||||
if (station) {
|
|
||||||
editNodeData.value.ennm = station.stnm;
|
|
||||||
editNodeData.value.sttpName = station.sttpName;
|
|
||||||
editNodeData.value.stcd = station.stcd;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 保存编辑节点
|
|
||||||
const handleSaveEditNode = () => {
|
|
||||||
if (!editNodeData.value.stcd) {
|
|
||||||
message.error('请选择站点');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 找到要编辑的节点
|
|
||||||
const node = findNodeByKey(treeData.value, editingNodeKey.value!);
|
|
||||||
if (!node) {
|
|
||||||
message.error('节点不存在');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新节点数据
|
|
||||||
node.stcd = editNodeData.value.stcd;
|
|
||||||
node.ennm = editNodeData.value.ennm;
|
|
||||||
node.sttpName = editNodeData.value.sttpName;
|
|
||||||
|
|
||||||
editingNode.value = false;
|
|
||||||
editingNodeKey.value = null;
|
|
||||||
message.success('编辑成功');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 取消编辑节点
|
|
||||||
const handleCancelEditNode = () => {
|
|
||||||
editingNode.value = false;
|
|
||||||
editingNodeKey.value = null;
|
|
||||||
editNodeData.value = {
|
|
||||||
stcd: undefined,
|
|
||||||
ennm: '',
|
|
||||||
sttpName: '',
|
|
||||||
originalData: null
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// 上移
|
|
||||||
const handleMoveUp = (dataRef: any) => {
|
|
||||||
const siblings = getSiblings(dataRef);
|
|
||||||
const index = siblings.findIndex(item => item.key === dataRef.key);
|
|
||||||
|
|
||||||
if (index > 0) {
|
|
||||||
// 交换位置
|
|
||||||
[siblings[index - 1], siblings[index]] = [
|
|
||||||
siblings[index],
|
|
||||||
siblings[index - 1]
|
|
||||||
];
|
|
||||||
message.success('上移成功');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 下移
|
|
||||||
const handleMoveDown = (dataRef: any) => {
|
|
||||||
const siblings = getSiblings(dataRef);
|
|
||||||
const index = siblings.findIndex(item => item.key === dataRef.key);
|
|
||||||
|
|
||||||
if (index < siblings.length - 1) {
|
|
||||||
// 交换位置
|
|
||||||
[siblings[index], siblings[index + 1]] = [
|
|
||||||
siblings[index + 1],
|
|
||||||
siblings[index]
|
|
||||||
];
|
|
||||||
message.success('下移成功');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除节点
|
|
||||||
const handleDeleteNode = (dataRef: any) => {
|
|
||||||
Modal.confirm({
|
|
||||||
title: '确认删除',
|
|
||||||
content: `确定要删除节点"${dataRef.ennm}"吗？`,
|
|
||||||
okText: '确定',
|
|
||||||
cancelText: '取消',
|
|
||||||
onOk: () => {
|
|
||||||
if (!dataRef.parentId) {
|
|
||||||
// 删除一级节点
|
|
||||||
const index = treeData.value.findIndex(
|
|
||||||
item => item.key === dataRef.key
|
|
||||||
);
|
|
||||||
if (index > -1) {
|
|
||||||
treeData.value.splice(index, 1);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 删除二级节点
|
|
||||||
const parent = findNodeByKey(treeData.value, dataRef.parentId);
|
|
||||||
if (parent && parent.children) {
|
|
||||||
const index = parent.children.findIndex(
|
|
||||||
item => item.key === dataRef.key
|
|
||||||
);
|
|
||||||
if (index > -1) {
|
|
||||||
parent.children.splice(index, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
message.success('删除成功');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleOk = async () => {
|
|
||||||
try {
|
|
||||||
await formRef.value.validate();
|
|
||||||
const submitValues = {
|
|
||||||
...formData,
|
|
||||||
captureDate: formData.captureDate
|
|
||||||
? dayjs(formData.captureDate).format('YYYY-MM-DD')
|
|
||||||
: undefined,
|
|
||||||
configNodes: treeData.value // 提交树形数据
|
|
||||||
};
|
|
||||||
emit('ok', submitValues);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Validate Failed:', error);
|
|
||||||
message.error('请检查表单填写是否正确');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const initForm = async () => {
|
|
||||||
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];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 初始化树形数据
|
|
||||||
if (values.configNodes && Array.isArray(values.configNodes)) {
|
|
||||||
treeData.value = values.configNodes.map((node: any) => ({
|
|
||||||
...node,
|
|
||||||
children:
|
|
||||||
node.children?.map((child: any) => ({
|
|
||||||
...child
|
|
||||||
})) || []
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
treeData.value = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 编辑时调用接口获取一级站点列表
|
|
||||||
if (formData.rvcd) {
|
|
||||||
const res = await getEngInfoDropdown({ rvcd: formData.rvcd });
|
|
||||||
stationList.value = (res.data || []).map((item: any) => ({
|
|
||||||
...item,
|
|
||||||
stnm: item.ennm
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
resetForm();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const resetForm = () => {
|
|
||||||
if (formRef.value) {
|
|
||||||
formRef.value.resetFields();
|
|
||||||
}
|
|
||||||
Object.assign(formData, defaultFormData);
|
|
||||||
treeData.value = [];
|
|
||||||
addingNewNode.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCancel = () => {
|
|
||||||
emit('update:visible', false);
|
|
||||||
emit('cancel');
|
|
||||||
resetForm();
|
|
||||||
};
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.visible,
|
|
||||||
newVisible => {
|
|
||||||
if (newVisible) {
|
|
||||||
initForm();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: false }
|
|
||||||
);
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
localLoading
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.config-tree-container {
|
|
||||||
margin-top: 16px;
|
|
||||||
|
|
||||||
.add-node-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-node-wrapper {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
padding-right: 8px;
|
|
||||||
|
|
||||||
.tree-node-title {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-node-actions {
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 确保鼠标悬停时显示操作按钮
|
|
||||||
.tree-node-wrapper:hover {
|
|
||||||
.tree-node-actions {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 子节点添加区域样式
|
|
||||||
.add-child-node-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px 0 8px 24px;
|
|
||||||
margin-top: 4px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="content-search">
|
|
||||||
<BasicSearch
|
|
||||||
ref="basicSearchRef"
|
|
||||||
:searchList="searchList"
|
|
||||||
:initial-values="initSearchData"
|
|
||||||
@reset="handleReset"
|
|
||||||
@finish="onSearchFinish"
|
|
||||||
@values-change="onValuesChange"
|
|
||||||
>
|
|
||||||
<template #actions>
|
|
||||||
<a-tooltip title="新增配置">
|
|
||||||
<a-button @click="props.handleAdd" type="primary">
|
|
||||||
新增沿程配置
|
|
||||||
</a-button>
|
|
||||||
</a-tooltip>
|
|
||||||
</template>
|
|
||||||
</BasicSearch>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, computed, onMounted } from 'vue';
|
|
||||||
import BasicSearch from '@/components/BasicSearch/index.vue';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
handleAdd: () => void;
|
|
||||||
riverOptions: any[];
|
|
||||||
riverOptionsLoad: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<Props>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'reset', values: any): void;
|
|
||||||
(e: 'searchFinish', values: any): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const initSearchData = {
|
|
||||||
name: null,
|
|
||||||
rvcd: null
|
|
||||||
};
|
|
||||||
|
|
||||||
const searchData = ref<any>({ ...initSearchData });
|
|
||||||
const searchList: any = computed(() => [
|
|
||||||
{
|
|
||||||
type: 'Input',
|
|
||||||
name: 'name',
|
|
||||||
label: '沿程配置名称',
|
|
||||||
fieldProps: {
|
|
||||||
allowClear: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'Select',
|
|
||||||
name: 'rvcd',
|
|
||||||
label: '所在河段',
|
|
||||||
width: 300,
|
|
||||||
fieldProps: {
|
|
||||||
allowClear: true
|
|
||||||
},
|
|
||||||
options: props.riverOptions,
|
|
||||||
loading: props.riverOptionsLoad
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
const onSearchFinish = (values: any) => {
|
|
||||||
emit('searchFinish', values);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onValuesChange = (changedValues: any, allValues: any) => {
|
|
||||||
searchData.value = { ...searchData.value, ...allValues };
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleReset = () => {
|
|
||||||
emit('reset', initSearchData);
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
emit('searchFinish', initSearchData);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss"></style>
|
|
||||||
@ -1,359 +0,0 @@
|
|||||||
<!-- d:\wordpack\WholeProcessPlatform\frontend\src\views\system\map\components\ConfigManagement\index.vue -->
|
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<ConfigManagementSearch
|
|
||||||
ref="configManagementSearch"
|
|
||||||
:handle-add="handleAdd"
|
|
||||||
:river-options="riverOptions"
|
|
||||||
:river-options-load="riverOptionsLoad"
|
|
||||||
@reset="handleReset"
|
|
||||||
@search-finish="onSearchFinish"
|
|
||||||
/>
|
|
||||||
<BasicTable
|
|
||||||
ref="basicTable"
|
|
||||||
:columns="columns"
|
|
||||||
:list-url="getAllConfigTree"
|
|
||||||
:search-params="searchParams"
|
|
||||||
>
|
|
||||||
<template #action="{ record }">
|
|
||||||
<div class="flex gap-[6px]">
|
|
||||||
<a-button
|
|
||||||
class="!p-0"
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
@click="handleEdit(record)"
|
|
||||||
>编辑</a-button
|
|
||||||
>
|
|
||||||
<a-button
|
|
||||||
class="!p-0"
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
danger
|
|
||||||
@click="handleDelete(record)"
|
|
||||||
>删除</a-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</BasicTable>
|
|
||||||
<ConfigManagementForm
|
|
||||||
ref="configManagementForm"
|
|
||||||
v-model:visible="editModalVisible"
|
|
||||||
:initial-values="currentRecord"
|
|
||||||
:river-options="riverOptions"
|
|
||||||
:river-options-load="riverOptionsLoad"
|
|
||||||
@cancel="editModalCancel"
|
|
||||||
@ok="handleEditSubmit"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, nextTick, onMounted } from 'vue';
|
|
||||||
import BasicTable from '@/components/BasicTable/index.vue';
|
|
||||||
import ConfigManagementSearch from './ConfigManagementSearch.vue';
|
|
||||||
import ConfigManagementForm from './ConfigManagementForm.vue';
|
|
||||||
import { message, Modal } from 'ant-design-vue';
|
|
||||||
import {
|
|
||||||
getAllConfigTree,
|
|
||||||
deleteBaseWbsb,
|
|
||||||
saveBaseWbsbChild,
|
|
||||||
saveBaseWbsbChildDetail,
|
|
||||||
getChildConfigTree
|
|
||||||
} from '@/api/system/map/ConfigManagement';
|
|
||||||
import { getRvcdDropdown } from '@/api/select';
|
|
||||||
import dayjs from 'dayjs';
|
|
||||||
|
|
||||||
// 表格实例
|
|
||||||
const basicTable = ref<any>(null);
|
|
||||||
// 表格列配置
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '序号',
|
|
||||||
dataIndex: 'index',
|
|
||||||
key: 'index',
|
|
||||||
width: 60,
|
|
||||||
align: 'center',
|
|
||||||
customRender: ({ index }) => index + 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '沿程配置名称',
|
|
||||||
dataIndex: 'name',
|
|
||||||
key: 'name',
|
|
||||||
width: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '配置编码',
|
|
||||||
key: 'code',
|
|
||||||
dataIndex: 'code',
|
|
||||||
width: 120
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '所在河段',
|
|
||||||
dataIndex: 'rvnm',
|
|
||||||
key: 'rvnm',
|
|
||||||
width: 300,
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建人',
|
|
||||||
key: 'recordUser',
|
|
||||||
width: 120,
|
|
||||||
dataIndex: 'recordUser'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建时间',
|
|
||||||
key: 'recordTime',
|
|
||||||
dataIndex: 'recordTime',
|
|
||||||
width: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '更新时间',
|
|
||||||
key: 'modifyTime',
|
|
||||||
dataIndex: 'modifyTime',
|
|
||||||
width: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '备注',
|
|
||||||
dataIndex: 'remark',
|
|
||||||
key: 'remark',
|
|
||||||
width: 360
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
width: 120,
|
|
||||||
fixed: 'right',
|
|
||||||
slots: { customRender: 'action' }
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// 搜索参数
|
|
||||||
const searchParams = ref({});
|
|
||||||
// 编辑弹窗数据
|
|
||||||
const currentRecord = ref<any | null>(null);
|
|
||||||
const editModalVisible = ref(false);
|
|
||||||
|
|
||||||
// 新增处理
|
|
||||||
const handleAdd = () => {
|
|
||||||
currentRecord.value = null;
|
|
||||||
editModalVisible.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 过滤掉值为 '-' 的字段
|
|
||||||
const filterRecord = (record: any) => {
|
|
||||||
const filtered: any = {};
|
|
||||||
Object.keys(record).forEach(key => {
|
|
||||||
if (record[key] !== '-') {
|
|
||||||
filtered[key] = record[key];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return filtered;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 编辑处理
|
|
||||||
const handleEdit = async (record: any) => {
|
|
||||||
currentRecord.value = filterRecord(record);
|
|
||||||
const params = {
|
|
||||||
filter: {
|
|
||||||
logic: 'and',
|
|
||||||
filters: [
|
|
||||||
{
|
|
||||||
field: 'alongId',
|
|
||||||
operator: 'eq',
|
|
||||||
value: record.id
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
sort: [
|
|
||||||
{
|
|
||||||
field: 'sort',
|
|
||||||
dir: 'asc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
const res = await getChildConfigTree(params);
|
|
||||||
if (res.code == 0) {
|
|
||||||
const data = res.data.data || [];
|
|
||||||
const firstLevelNodes = data.filter((item: any) => !item.rstcd);
|
|
||||||
const secondLevelNodes = data.filter((item: any) => item.rstcd);
|
|
||||||
|
|
||||||
const configNodes = firstLevelNodes.map((node: any, index: number) => {
|
|
||||||
const children = secondLevelNodes.filter(
|
|
||||||
(child: any) => child.rstcd === node.stcd
|
|
||||||
);
|
|
||||||
|
|
||||||
return {
|
|
||||||
key: `parent-${index}`,
|
|
||||||
stcd: node.stcd,
|
|
||||||
ennm: node.stnm,
|
|
||||||
sttpName: node.sttpName,
|
|
||||||
parentId: null,
|
|
||||||
children: children.map((child: any, childIndex: number) => ({
|
|
||||||
key: `child-${index}-${childIndex}`,
|
|
||||||
stcd: child.stcd,
|
|
||||||
ennm: child.stnm,
|
|
||||||
sttpName: child.sttpName,
|
|
||||||
parentId: `parent-${index}`,
|
|
||||||
children: []
|
|
||||||
}))
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
currentRecord.value.configNodes = configNodes;
|
|
||||||
}
|
|
||||||
editModalVisible.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除处理
|
|
||||||
const handleDelete = (record: any) => {
|
|
||||||
Modal.confirm({
|
|
||||||
title: '确认删除',
|
|
||||||
content: '确定要删除选中的记录吗？',
|
|
||||||
zIndex: 2002,
|
|
||||||
onOk: async () => {
|
|
||||||
try {
|
|
||||||
let res = await deleteBaseWbsb([record.id]);
|
|
||||||
if (res.code == 0) {
|
|
||||||
message.success('删除成功');
|
|
||||||
basicTable.value.refresh();
|
|
||||||
} else {
|
|
||||||
message.error('删除失败');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
message.error('删除失败');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 搜索完成处理
|
|
||||||
const onSearchFinish = (values: any) => {
|
|
||||||
const params = {
|
|
||||||
logic: 'and',
|
|
||||||
filters: [
|
|
||||||
values.rvcd
|
|
||||||
? {
|
|
||||||
field: 'rvcd',
|
|
||||||
operator: 'eq',
|
|
||||||
dataType: 'string',
|
|
||||||
value: values.rvcd
|
|
||||||
}
|
|
||||||
: null,
|
|
||||||
values.name
|
|
||||||
? {
|
|
||||||
field: 'name',
|
|
||||||
operator: 'contains',
|
|
||||||
dataType: 'string',
|
|
||||||
value: values.name
|
|
||||||
}
|
|
||||||
: null
|
|
||||||
].filter(Boolean)
|
|
||||||
};
|
|
||||||
basicTable.value.getList(params);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 重置
|
|
||||||
const handleReset = () => {
|
|
||||||
basicTable.value.getList({
|
|
||||||
logic: 'and',
|
|
||||||
filters: []
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表单取消
|
|
||||||
const editModalCancel = () => {
|
|
||||||
currentRecord.value = null;
|
|
||||||
editModalVisible.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表单提交
|
|
||||||
const handleEditSubmit = async (values: any) => {
|
|
||||||
try {
|
|
||||||
const formData = {
|
|
||||||
...currentRecord.value,
|
|
||||||
...values,
|
|
||||||
modifyTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
|
|
||||||
};
|
|
||||||
delete formData.configNodes;
|
|
||||||
|
|
||||||
Object.keys(formData).forEach(key => {
|
|
||||||
if (key.includes('-')) {
|
|
||||||
delete formData[key];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
let res = await saveBaseWbsbChild(formData);
|
|
||||||
if (res.code == 0) {
|
|
||||||
const alongId = res.data;
|
|
||||||
const treeData = values.configNodes || [];
|
|
||||||
|
|
||||||
if (treeData.length > 0) {
|
|
||||||
const formatTreeData = (
|
|
||||||
nodes: any[],
|
|
||||||
parentId: string | null = null,
|
|
||||||
parentStcd: string | null = null
|
|
||||||
) => {
|
|
||||||
return nodes.map(node => ({
|
|
||||||
alongId,
|
|
||||||
stcd: node.stcd,
|
|
||||||
stnm: node.ennm || node.stnm,
|
|
||||||
sttpName: node.sttpName,
|
|
||||||
parentId: parentId ? parentId : null,
|
|
||||||
rstcd: parentStcd || null,
|
|
||||||
children:
|
|
||||||
node.children && node.children.length > 0
|
|
||||||
? formatTreeData(node.children, node.key, node.stcd)
|
|
||||||
: []
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const detailData = formatTreeData(treeData);
|
|
||||||
|
|
||||||
const detailRes = await saveBaseWbsbChildDetail(detailData);
|
|
||||||
if (detailRes.code == 0) {
|
|
||||||
message.success(`保存成功`);
|
|
||||||
editModalVisible.value = false;
|
|
||||||
basicTable.value.refresh();
|
|
||||||
} else {
|
|
||||||
message.error(`保存子节点失败`);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
message.success(`保存成功`);
|
|
||||||
editModalVisible.value = false;
|
|
||||||
basicTable.value.refresh();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
message.error(`保存失败`);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
message.error(`保存失败`);
|
|
||||||
editModalVisible.value = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const riverOptions = ref<any>([]);
|
|
||||||
const riverOptionsLoad = ref(false);
|
|
||||||
const initOption = () => {
|
|
||||||
const params = {};
|
|
||||||
riverOptionsLoad.value = true;
|
|
||||||
getRvcdDropdown(params).then((res: any) => {
|
|
||||||
res.data.forEach((item: any) => {
|
|
||||||
item.value = item.rvcd;
|
|
||||||
item.label = item.rvnm;
|
|
||||||
});
|
|
||||||
riverOptions.value = res.data || [];
|
|
||||||
riverOptionsLoad.value = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
initOption();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.config-management {
|
|
||||||
height: 100%;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,160 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-modal
|
|
||||||
:title="isEdit ? '编辑电站' : '新增电站'"
|
|
||||||
v-model:open="modalVisible"
|
|
||||||
:confirm-loading="localLoading"
|
|
||||||
width="600px"
|
|
||||||
:destroy-on-close="true"
|
|
||||||
@cancel="handleCancel"
|
|
||||||
@ok="handleOk"
|
|
||||||
>
|
|
||||||
<a-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="rules"
|
|
||||||
name="edit_form"
|
|
||||||
:labelCol="{ span: 5 }"
|
|
||||||
>
|
|
||||||
<a-form-item label="电站名称" name="stationName">
|
|
||||||
<a-input
|
|
||||||
v-model:value="formData.stationName"
|
|
||||||
style="width: 100%"
|
|
||||||
placeholder="请输入电站名称"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="所属流域" name="basin">
|
|
||||||
<a-input
|
|
||||||
v-model:value="formData.basin"
|
|
||||||
style="width: 100%"
|
|
||||||
placeholder="请输入所属流域"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="装机容量(MW)" name="capacity">
|
|
||||||
<a-input-number
|
|
||||||
v-model:value="formData.capacity"
|
|
||||||
style="width: 100%"
|
|
||||||
placeholder="请输入装机容量"
|
|
||||||
:min="0"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="状态" name="status">
|
|
||||||
<a-select v-model:value="formData.status" style="width: 100%">
|
|
||||||
<a-select-option value="running">运行中</a-select-option>
|
|
||||||
<a-select-option value="stopped">停运</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="位置坐标" name="coordinates">
|
|
||||||
<a-input
|
|
||||||
v-model:value="formData.coordinates"
|
|
||||||
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';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
visible: boolean;
|
|
||||||
initialValues?: any | null;
|
|
||||||
loading?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const localLoading = ref(false);
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
visible: false,
|
|
||||||
initialValues: null,
|
|
||||||
loading: false
|
|
||||||
});
|
|
||||||
|
|
||||||
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,
|
|
||||||
stationName: undefined,
|
|
||||||
basin: undefined,
|
|
||||||
capacity: undefined,
|
|
||||||
status: undefined,
|
|
||||||
coordinates: undefined
|
|
||||||
});
|
|
||||||
const formData: any = reactive({ ...defaultFormData });
|
|
||||||
|
|
||||||
const rules: Record<string, Rule[]> = {
|
|
||||||
stationName: [{ required: true, message: '请输入电站名称', trigger: 'blur' }],
|
|
||||||
basin: [{ required: true, message: '请输入所属流域', trigger: 'blur' }],
|
|
||||||
capacity: [{ required: true, message: '请输入装机容量', trigger: 'blur' }]
|
|
||||||
};
|
|
||||||
|
|
||||||
const isEdit = computed(() => !!props.initialValues);
|
|
||||||
|
|
||||||
const handleOk = async () => {
|
|
||||||
try {
|
|
||||||
await formRef.value.validate();
|
|
||||||
const submitValues = {
|
|
||||||
...formData
|
|
||||||
};
|
|
||||||
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)) {
|
|
||||||
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();
|
|
||||||
};
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.visible,
|
|
||||||
newVisible => {
|
|
||||||
if (newVisible) {
|
|
||||||
initForm();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: false }
|
|
||||||
);
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
localLoading
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="content-search">
|
|
||||||
<BasicSearch
|
|
||||||
ref="basicSearchRef"
|
|
||||||
:searchList="searchList"
|
|
||||||
:initial-values="initSearchData"
|
|
||||||
@reset="handleReset"
|
|
||||||
@finish="onSearchFinish"
|
|
||||||
@values-change="onValuesChange"
|
|
||||||
>
|
|
||||||
<template #actions>
|
|
||||||
<a-tooltip title="新增电站">
|
|
||||||
<a-button @click="props.handleAdd" type="primary"> 新增电站 </a-button>
|
|
||||||
</a-tooltip>
|
|
||||||
</template>
|
|
||||||
</BasicSearch>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, computed, onMounted } from "vue";
|
|
||||||
import BasicSearch from "@/components/BasicSearch/index.vue";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
handleAdd: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<Props>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: "reset", values: any): void;
|
|
||||||
(e: "searchFinish", values: any): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const initSearchData = {
|
|
||||||
stationName: "",
|
|
||||||
};
|
|
||||||
|
|
||||||
const searchData = ref<any>({ ...initSearchData });
|
|
||||||
const searchList: any = computed(() => [
|
|
||||||
{
|
|
||||||
type: "Input",
|
|
||||||
name: "stationName",
|
|
||||||
label: "电站名称",
|
|
||||||
fieldProps: {
|
|
||||||
allowClear: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const onSearchFinish = (values: any) => {
|
|
||||||
emit("searchFinish", values);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onValuesChange = (changedValues: any, allValues: any) => {
|
|
||||||
searchData.value = { ...searchData.value, ...allValues };
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleReset = () => {
|
|
||||||
emit("reset", initSearchData);
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
emit("searchFinish", initSearchData);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss"></style>
|
|
||||||
@ -1,190 +0,0 @@
|
|||||||
<!-- d:\wordpack\WholeProcessPlatform\frontend\src\views\system\map\components\StationManagement\index.vue -->
|
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<StationManagementSearch
|
|
||||||
ref="stationManagementSearch"
|
|
||||||
:handle-add="handleAdd"
|
|
||||||
@reset="handleReset"
|
|
||||||
@search-finish="onSearchFinish"
|
|
||||||
/>
|
|
||||||
<BasicTable
|
|
||||||
:columns="columns"
|
|
||||||
:data="dataSource"
|
|
||||||
:list-url="fetchStationData"
|
|
||||||
:search-params="searchParams"
|
|
||||||
:enable-row-selection="true"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<template #action="{ column, record }">
|
|
||||||
<a-space>
|
|
||||||
<a-button type="link" size="small" @click="handleEdit(record)"
|
|
||||||
>编辑</a-button
|
|
||||||
>
|
|
||||||
<a-button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
danger
|
|
||||||
@click="handleDelete(record)"
|
|
||||||
>删除</a-button
|
|
||||||
>
|
|
||||||
</a-space>
|
|
||||||
</template>
|
|
||||||
<template #status="{ column, record }">
|
|
||||||
<a-tag :color="record.status === 'running' ? 'green' : 'red'">
|
|
||||||
{{ record.status === 'running' ? '运行中' : '停运' }}
|
|
||||||
</a-tag>
|
|
||||||
</template>
|
|
||||||
</BasicTable>
|
|
||||||
<StationManagementForm
|
|
||||||
ref="stationManagementForm"
|
|
||||||
v-model:visible="editModalVisible"
|
|
||||||
:initial-values="currentRecord"
|
|
||||||
@cancel="editModalCancel"
|
|
||||||
@ok="handleEditSubmit"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import BasicTable from '@/components/BasicTable/index.vue';
|
|
||||||
import StationManagementSearch from './StationManagementSearch.vue';
|
|
||||||
import StationManagementForm from './StationManagementForm.vue';
|
|
||||||
import { message } from 'ant-design-vue';
|
|
||||||
|
|
||||||
// 表格列配置
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '电站名称',
|
|
||||||
dataIndex: 'stationName',
|
|
||||||
key: 'stationName',
|
|
||||||
width: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '所属流域',
|
|
||||||
dataIndex: 'basin',
|
|
||||||
key: 'basin',
|
|
||||||
width: 120
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '装机容量(MW)',
|
|
||||||
dataIndex: 'capacity',
|
|
||||||
key: 'capacity',
|
|
||||||
width: 120
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '状态',
|
|
||||||
key: 'status',
|
|
||||||
dataIndex: 'status',
|
|
||||||
width: 100,
|
|
||||||
slots: { customRender: 'status' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '位置坐标',
|
|
||||||
dataIndex: 'coordinates',
|
|
||||||
key: 'coordinates',
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
width: 150,
|
|
||||||
fixed: 'right',
|
|
||||||
slots: { customRender: 'action' }
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// 搜索参数
|
|
||||||
const searchParams = ref({});
|
|
||||||
// 编辑弹窗数据
|
|
||||||
const currentRecord = ref<any | null>(null);
|
|
||||||
const editModalVisible = ref(false);
|
|
||||||
|
|
||||||
// 数据源
|
|
||||||
const dataSource = ref([]);
|
|
||||||
|
|
||||||
// 模拟数据获取函数
|
|
||||||
const fetchStationData = (params: any) => {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve({
|
|
||||||
data: {
|
|
||||||
records: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
stationName: '三峡电站',
|
|
||||||
basin: '长江流域',
|
|
||||||
capacity: 22500,
|
|
||||||
status: 'running',
|
|
||||||
coordinates: '111.29,30.83'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
stationName: '葛洲坝电站',
|
|
||||||
basin: '长江流域',
|
|
||||||
capacity: 2715,
|
|
||||||
status: 'running',
|
|
||||||
coordinates: '111.28,30.75'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
stationName: '溪洛渡电站',
|
|
||||||
basin: '金沙江流域',
|
|
||||||
capacity: 13860,
|
|
||||||
status: 'stopped',
|
|
||||||
coordinates: '103.65,28.25'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
total: 3
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, 500);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAdd = () => {
|
|
||||||
currentRecord.value = null;
|
|
||||||
editModalVisible.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 编辑处理
|
|
||||||
const handleEdit = (record: any) => {
|
|
||||||
currentRecord.value = { ...record };
|
|
||||||
editModalVisible.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除处理
|
|
||||||
const handleDelete = (record: any) => {
|
|
||||||
message.warning(`删除电站: ${record.stationName}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 搜索完成处理
|
|
||||||
const onSearchFinish = (values: any) => {
|
|
||||||
console.log(values);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 重置
|
|
||||||
const handleReset = (params: any) => {};
|
|
||||||
|
|
||||||
// 选择变化处理
|
|
||||||
const handleSelectionChange = (selectedRows: any[]) => {
|
|
||||||
console.log('选中的行:', selectedRows);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表单取消
|
|
||||||
const editModalCancel = () => {
|
|
||||||
editModalVisible.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表单提交
|
|
||||||
const handleEditSubmit = (values: any) => {
|
|
||||||
console.log(values);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.station-management {
|
|
||||||
height: 100%;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,252 +0,0 @@
|
|||||||
<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 || '',
|
|
||||||
lgtd: ennmItem?.lgtd || '',
|
|
||||||
lttd: ennmItem?.lttd || '',
|
|
||||||
hbrvcdName: riverItem?.label || '',
|
|
||||||
baseId: riverItem?.baseId || '',
|
|
||||||
baseName: riverItem?.baseName || '',
|
|
||||||
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>
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="content-search">
|
|
||||||
<BasicSearch
|
|
||||||
ref="basicSearchRef"
|
|
||||||
:searchList="searchList"
|
|
||||||
:initial-values="initSearchData"
|
|
||||||
@reset="handleReset"
|
|
||||||
@finish="onSearchFinish"
|
|
||||||
@values-change="onValuesChange"
|
|
||||||
>
|
|
||||||
<template #actions>
|
|
||||||
<a-tooltip title="新增倾斜摄影">
|
|
||||||
<a-button @click="props.handleAdd" type="primary"> 新增倾斜摄影 </a-button>
|
|
||||||
</a-tooltip>
|
|
||||||
</template>
|
|
||||||
</BasicSearch>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, computed, onMounted } from "vue";
|
|
||||||
import BasicSearch from "@/components/BasicSearch/index.vue";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
handleAdd: () => void;
|
|
||||||
riverOptions: any[];
|
|
||||||
riverOptionsLoad: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<Props>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: "reset", values: any): void;
|
|
||||||
(e: "searchFinish", values: any): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const initSearchData = {
|
|
||||||
stnm: "",
|
|
||||||
rvcd:""
|
|
||||||
};
|
|
||||||
|
|
||||||
const searchData = ref<any>({ ...initSearchData });
|
|
||||||
const searchList: any = computed(() => [
|
|
||||||
{
|
|
||||||
type: "Input",
|
|
||||||
name: "stnm",
|
|
||||||
label: "倾斜影像名称",
|
|
||||||
fieldProps: {
|
|
||||||
allowClear: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'Select',
|
|
||||||
name: 'rvcd',
|
|
||||||
label: '所在河段',
|
|
||||||
width: 300,
|
|
||||||
fieldProps: {
|
|
||||||
allowClear: true
|
|
||||||
},
|
|
||||||
options: props.riverOptions,
|
|
||||||
loading: props.riverOptionsLoad
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
const onSearchFinish = (values: any) => {
|
|
||||||
emit("searchFinish", values);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onValuesChange = (changedValues: any, allValues: any) => {
|
|
||||||
searchData.value = { ...searchData.value, ...allValues };
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleReset = () => {
|
|
||||||
emit("reset", initSearchData);
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
emit("searchFinish", initSearchData);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss"></style>
|
|
||||||
@ -1,250 +0,0 @@
|
|||||||
<!-- d:\wordpack\WholeProcessPlatform\frontend\src\views\system\map\components\TiltPhotoManagement\index.vue -->
|
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<TiltPhotoManagementSearch
|
|
||||||
ref="tiltPhotoManagementSearch"
|
|
||||||
:river-options="riverOptions"
|
|
||||||
:river-options-load="riverOptionsLoad"
|
|
||||||
:handle-add="handleAdd"
|
|
||||||
@reset="handleReset"
|
|
||||||
@search-finish="onSearchFinish"
|
|
||||||
/>
|
|
||||||
<BasicTable
|
|
||||||
ref="basicTable"
|
|
||||||
:columns="columns"
|
|
||||||
:list-url="getAllTiltPhotoTree"
|
|
||||||
:search-params="searchParams"
|
|
||||||
>
|
|
||||||
<template #action="{ column, record }">
|
|
||||||
<div class="flex gap-[6px]">
|
|
||||||
<a-button
|
|
||||||
class="!p-0"
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
@click="handleEdit(record)"
|
|
||||||
>编辑</a-button
|
|
||||||
>
|
|
||||||
<a-button
|
|
||||||
class="!p-0"
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
danger
|
|
||||||
@click="handleDelete(record)"
|
|
||||||
>删除</a-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</BasicTable>
|
|
||||||
<TiltPhotoManagementForm
|
|
||||||
ref="tiltPhotoManagementForm"
|
|
||||||
v-model:visible="editModalVisible"
|
|
||||||
:river-options="riverOptions"
|
|
||||||
:river-options-load="riverOptionsLoad"
|
|
||||||
:initial-values="currentRecord"
|
|
||||||
@cancel="editModalCancel"
|
|
||||||
@ok="handleEditSubmit"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, nextTick, onMounted } from 'vue';
|
|
||||||
import BasicTable from '@/components/BasicTable/index.vue';
|
|
||||||
import TiltPhotoManagementSearch from './TiltPhotoManagementSearch.vue';
|
|
||||||
import TiltPhotoManagementForm from './TiltPhotoManagementForm.vue';
|
|
||||||
import { message, Modal } from 'ant-design-vue';
|
|
||||||
import {
|
|
||||||
getAllTiltPhotoTree,
|
|
||||||
saveTiltPhoto,
|
|
||||||
deleteTiltPhoto
|
|
||||||
} from '@/api/system/map/TiltPhotoManagement';
|
|
||||||
import { getRvcdDropdown } from '@/api/select';
|
|
||||||
// 表格列配置
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '序号',
|
|
||||||
dataIndex: 'index',
|
|
||||||
key: 'index',
|
|
||||||
width: 60,
|
|
||||||
align: 'center',
|
|
||||||
customRender: ({ text, record, index }) => index + 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '倾斜影像名称',
|
|
||||||
dataIndex: 'stnm',
|
|
||||||
key: 'stnm',
|
|
||||||
width: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'URL',
|
|
||||||
dataIndex: 'url',
|
|
||||||
key: 'url'
|
|
||||||
// width: 360
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '所在河段',
|
|
||||||
dataIndex: 'hbrvcdName',
|
|
||||||
key: 'hbrvcdName',
|
|
||||||
width: 280
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '所属电站',
|
|
||||||
key: 'ennm',
|
|
||||||
dataIndex: 'ennm',
|
|
||||||
width: 140
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建人',
|
|
||||||
key: 'recordUser',
|
|
||||||
dataIndex: 'recordUser',
|
|
||||||
width: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建时间',
|
|
||||||
key: 'recordTime',
|
|
||||||
dataIndex: 'recordTime',
|
|
||||||
width: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '更新时间',
|
|
||||||
key: 'modifyTime',
|
|
||||||
dataIndex: 'modifyTime',
|
|
||||||
width: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
width: 120,
|
|
||||||
fixed: 'right',
|
|
||||||
slots: { customRender: 'action' }
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// 表格实例
|
|
||||||
const basicTable = ref<any>(null);
|
|
||||||
// 搜索参数
|
|
||||||
const searchParams = ref({});
|
|
||||||
// 编辑弹窗数据
|
|
||||||
const currentRecord = ref<any | null>(null);
|
|
||||||
const editModalVisible = ref(false);
|
|
||||||
|
|
||||||
// 添加处理
|
|
||||||
const handleAdd = () => {
|
|
||||||
currentRecord.value = null;
|
|
||||||
editModalVisible.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 编辑处理
|
|
||||||
const handleEdit = (record: any) => {
|
|
||||||
currentRecord.value = { ...record };
|
|
||||||
editModalVisible.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除处理
|
|
||||||
const handleDelete = (record: any) => {
|
|
||||||
Modal.confirm({
|
|
||||||
title: '确认删除',
|
|
||||||
content: '确定要删除选中的记录吗？',
|
|
||||||
zIndex: 2002,
|
|
||||||
onOk: async () => {
|
|
||||||
try {
|
|
||||||
let res = await deleteTiltPhoto({ id: record.id });
|
|
||||||
message.success('删除成功');
|
|
||||||
basicTable.value.refresh();
|
|
||||||
} catch (error) {
|
|
||||||
message.error('删除失败');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 搜索完成处理
|
|
||||||
const onSearchFinish = (values: any) => {
|
|
||||||
const params = {
|
|
||||||
logic: 'and',
|
|
||||||
filters: [
|
|
||||||
values.parentId
|
|
||||||
? {
|
|
||||||
field: 'parentId',
|
|
||||||
operator: 'eq',
|
|
||||||
dataType: 'string',
|
|
||||||
value: values.parentId
|
|
||||||
}
|
|
||||||
: null,
|
|
||||||
{
|
|
||||||
field: 'stnm',
|
|
||||||
operator: 'contains',
|
|
||||||
dataType: 'string',
|
|
||||||
value: values.stnm
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'rvcd',
|
|
||||||
operator: 'contains',
|
|
||||||
dataType: 'string',
|
|
||||||
value: values.rvcd
|
|
||||||
}
|
|
||||||
].filter(Boolean)
|
|
||||||
};
|
|
||||||
basicTable.value.getList(params);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 重置
|
|
||||||
const handleReset = () => {
|
|
||||||
nextTick(() => {
|
|
||||||
basicTable.value.getList({
|
|
||||||
logic: 'and',
|
|
||||||
filters: []
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表单取消
|
|
||||||
const editModalCancel = () => {
|
|
||||||
currentRecord.value = null;
|
|
||||||
editModalVisible.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表单提交
|
|
||||||
const handleEditSubmit = async (values: any) => {
|
|
||||||
try {
|
|
||||||
let res = await saveTiltPhoto({
|
|
||||||
...currentRecord.value,
|
|
||||||
...values
|
|
||||||
});
|
|
||||||
message.success(`保存成功`);
|
|
||||||
|
|
||||||
editModalVisible.value = false;
|
|
||||||
basicTable.value.refresh();
|
|
||||||
} catch (error) {
|
|
||||||
message.error(`保存失败`);
|
|
||||||
|
|
||||||
editModalVisible.value = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const riverOptions = ref<any>([]);
|
|
||||||
const riverOptionsLoad = ref(false);
|
|
||||||
const initOption = () => {
|
|
||||||
const params = {};
|
|
||||||
riverOptionsLoad.value = true;
|
|
||||||
getRvcdDropdown(params).then((res: any) => {
|
|
||||||
res.data.forEach((item: any) => {
|
|
||||||
item.value = item.rvcd;
|
|
||||||
item.label = item.rvnm;
|
|
||||||
});
|
|
||||||
riverOptions.value = res.data || [];
|
|
||||||
riverOptionsLoad.value = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
initOption();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.tilt-photo-management {
|
|
||||||
height: 100%;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user