398 lines
9.4 KiB
Vue
398 lines
9.4 KiB
Vue
<!-- 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, computed } 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';
|
|
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
|
const JidiSelectEventStore = useJidiSelectEventStore();
|
|
// 表格实例
|
|
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: 'baseName',
|
|
key: 'baseName',
|
|
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({
|
|
sort: [
|
|
{
|
|
field: 'recordTime',
|
|
dir: 'desc'
|
|
}
|
|
]
|
|
});
|
|
// 编辑弹窗数据
|
|
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);
|
|
// debugger
|
|
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,
|
|
sort: node.sort,
|
|
parentId: null,
|
|
children: children.map((child: any, childIndex: number) => ({
|
|
key: `child-${index}-${childIndex}`,
|
|
stcd: child.stcd,
|
|
ennm: child.stnm,
|
|
sttpName: child.sttpName,
|
|
sort: child.sort,
|
|
parentId: `parent-${index}`,
|
|
ioDirection: child.ioDirection,
|
|
children: []
|
|
}))
|
|
};
|
|
});
|
|
|
|
currentRecord.value.configNodes = configNodes;
|
|
// debugger
|
|
}
|
|
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.baseId != 'all'
|
|
? {
|
|
field: 'baseId',
|
|
operator: 'eq',
|
|
dataType: 'string',
|
|
value: values.baseId
|
|
}
|
|
: 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,
|
|
baseName: (JidiSelectEventStore.jidiData.find(element => element.wbsCode === values.baseId) || {}).wbsName,
|
|
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,
|
|
type: 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,
|
|
ioDirection: node.type ||node.ioDirection || null,
|
|
children:
|
|
node.children && node.children.length > 0
|
|
? formatTreeData(node.children, node.key, node.stcd, node.type)
|
|
: []
|
|
}));
|
|
};
|
|
|
|
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 riverOptions = computed(() => {
|
|
return JidiSelectEventStore.jidiData.map((item: any) => ({
|
|
label: item.wbsName,
|
|
value: item.wbsCode
|
|
}));
|
|
});
|
|
const riverOptionsLoad = ref(false);
|
|
const initOption = () => {
|
|
// const params = {};
|
|
// riverOptionsLoad.value = true;
|
|
// riverOptions.value = JidiSelectEventStore.jidiData.map((item:any)=>{
|
|
// return{
|
|
// }
|
|
// })
|
|
// 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">
|
|
.content {
|
|
position: relative;
|
|
z-index: 900;
|
|
pointer-events: all;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
.config-management {
|
|
height: 100%;
|
|
padding: 16px;
|
|
}
|
|
</style>
|