feat(dms): 新增跳转巡检线路详情页面

- 新增巡检线路详情路由和页面组件
- 在巡检线路列表页面添加线路编号的路由链接
- 优化巡检线路详情页面的样式和布局
- 添加巡检标准列表和选择功能
- 修复删除巡检线路时的提示信息
master
zch 1 month ago
parent 938b33297f
commit aa7b166f3e

@ -349,6 +349,21 @@ export const dynamicRoutes: RouteRecordRaw[] = [
} }
] ]
}, },
// 新增点巡检线路详情路由
{
path: '/dms/dmsInspectRouteDetail',
component: Layout,
hidden: true,
permissions: ['dms:dmsBaseInspectRoute:add'], // 根据实际权限需求配置
children: [
{
path: 'index/:inspectRouteId', // 参数名为 inspectRouteId
component: () => import('@/views/dms/dmsInspectRouteDetail/index.vue'),
name: 'DmsInspectRouteDetail',
meta: { title: '巡检线路详情', activeMenu: '/dms/dmsBaseInspectRoute' }
}
]
},
{ {
path: '/workflow/leaveEdit', path: '/workflow/leaveEdit',
component: Layout, component: Layout,
@ -391,6 +406,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
} }
] ]
}, },
]; ];
/** /**

@ -55,7 +55,13 @@
<el-table v-loading="loading" :data="dmsBaseInspectRouteList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="dmsBaseInspectRouteList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键标识" align="center" prop="inspectRouteId" v-if="columns[0].visible"/> <el-table-column label="主键标识" align="center" prop="inspectRouteId" v-if="columns[0].visible"/>
<el-table-column label="线路编号" align="center" prop="routeCode" v-if="columns[2].visible"/> <el-table-column label="线路编号" align="center" prop="routeCode" v-if="columns[2].visible">
<template #default="scope">
<router-link :to="'/dms/dmsInspectRouteDetail/index/' + scope.row.inspectRouteId" class="link-type">
<span>{{ scope.row.routeCode }}</span>
</router-link>
</template>
</el-table-column>
<el-table-column label="线路名称" align="center" prop="routeName" v-if="columns[3].visible"/> <el-table-column label="线路名称" align="center" prop="routeName" v-if="columns[3].visible"/>
<el-table-column label="线路类型" align="center" prop="inspectType" v-if="columns[4].visible"> <el-table-column label="线路类型" align="center" prop="inspectType" v-if="columns[4].visible">
<template #default="scope"> <template #default="scope">
@ -85,10 +91,10 @@
<el-input v-model="form.inspectRouteId" placeholder="请输入主键标识" /> <el-input v-model="form.inspectRouteId" placeholder="请输入主键标识" />
</el-form-item>--> </el-form-item>-->
<el-form-item label="线路编号" prop="routeCode"> <el-form-item label="线路编号" prop="routeCode">
<el-input v-model="form.routeCode" placeholder="请输入线路编号" /> <el-input v-model="form.routeCode" placeholder="请输入线路编号,如a001" />
</el-form-item> </el-form-item>
<el-form-item label="线路名称" prop="routeName"> <el-form-item label="线路名称" prop="routeName">
<el-input v-model="form.routeName" placeholder="请输入线路名称" /> <el-input v-model="form.routeName" placeholder="请输入线路名称,如二楼巡检路线" />
</el-form-item> </el-form-item>
<el-form-item label="线路类型" prop="inspectType"> <el-form-item label="线路类型" prop="inspectType">
<el-select v-model="form.inspectType" placeholder="请选择线路类型"> <el-select v-model="form.inspectType" placeholder="请选择线路类型">
@ -282,7 +288,8 @@ const submitForm = () => {
/** 删除按钮操作 */ /** 删除按钮操作 */
const handleDelete = async (row?: DmsBaseInspectRouteVO) => { const handleDelete = async (row?: DmsBaseInspectRouteVO) => {
const _inspectRouteIds = row?.inspectRouteId || ids.value; const _inspectRouteIds = row?.inspectRouteId || ids.value;
await proxy?.$modal.confirm('是否确认删除点巡检线路信息编号为"' + _inspectRouteIds + '"的数据项?').finally(() => loading.value = false); const routeCode = row?.routeCode || '已选择的数据项';
await proxy?.$modal.confirm('是否确认删除点巡检线路信息编号为"' + routeCode + '"的数据项?').finally(() => loading.value = false);
await delDmsBaseInspectRoute(_inspectRouteIds); await delDmsBaseInspectRoute(_inspectRouteIds);
proxy?.$modal.msgSuccess("删除成功"); proxy?.$modal.msgSuccess("删除成功");
await getList(); await getList();

@ -1,24 +1,29 @@
<template> <template>
<div class="p-2"> <div class="p-2">
<h4 class="form-header h4">巡检线路信息</h4>
<el-card shadow="hover" class="mb-[10px]">
<el-form label-width="120px">
<el-row>
<el-col :span="8" :offset="2">
<el-form-item label="检修计划编号">
<el-input v-model="inspectRouteCode" disabled />
</el-form-item>
</el-col>
<el-col :span="8" :offset="2">
<el-form-item label="检修计划名称">
<el-input v-model="routeCheck" disabled />
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<h4 class="form-header h4">详细信息</h4>
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]"> <div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover"> <el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> <el-form ref="queryFormRef" :model="queryParams" :inline="true">
<!-- <el-form-item label="主键标识" prop="routeDetailId">
<el-input v-model="queryParams.routeDetailId" placeholder="请输入主键标识" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="线路" prop="inspectRouteId">
<el-input v-model="queryParams.inspectRouteId" placeholder="请输入线路" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="巡检步骤" prop="lineStep">
<el-input v-model="queryParams.lineStep" placeholder="请输入巡检步骤" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="设备" prop="machineId">
<el-input v-model="queryParams.machineId" placeholder="请输入设备" clearable @keyup.enter="handleQuery" />
</el-form-item>-->
<!-- <el-form-item label="巡检标准;预留,不需要关联巡检标准,一条巡检线路的巡检标准都相同" prop="inspectStandard">
<el-input v-model="queryParams.inspectStandard" placeholder="请输入巡检标准;预留,不需要关联巡检标准,一条巡检线路的巡检标准都相同" clearable @keyup.enter="handleQuery" />
</el-form-item>-->
<el-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"></el-button> <el-button type="primary" icon="Search" @click="handleQuery"></el-button>
<el-button icon="Refresh" @click="resetQuery"></el-button> <el-button icon="Refresh" @click="resetQuery"></el-button>
@ -49,11 +54,9 @@
<el-table v-loading="loading" :data="dmsInspectRouteDetailList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="dmsInspectRouteDetailList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键标识" align="center" prop="routeDetailId" v-if="columns[0].visible"/>
<el-table-column label="线路" align="center" prop="inspectRouteId" v-if="columns[2].visible"/>
<el-table-column label="巡检步骤" align="center" prop="lineStep" v-if="columns[3].visible"/> <el-table-column label="巡检步骤" align="center" prop="lineStep" v-if="columns[3].visible"/>
<el-table-column label="设备" align="center" prop="machineName" v-if="columns[4].visible"/> <el-table-column label="设备" align="center" prop="machineName" v-if="columns[4].visible"/>
<el-table-column label="巡检标准" align="center" prop="inspectStandard" v-if="columns[5].visible"/> <el-table-column label="巡检标准" align="center" prop="standardName" v-if="columns[5].visible"/>
<el-table-column label="备注" align="center" prop="remark" v-if="columns[6].visible"/> <el-table-column label="备注" align="center" prop="remark" v-if="columns[6].visible"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope"> <template #default="scope">
@ -72,17 +75,10 @@
<!-- 添加或修改点巡检线路明细对话框 --> <!-- 添加或修改点巡检线路明细对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body> <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="dmsInspectRouteDetailFormRef" :model="form" :rules="rules" label-width="80px"> <el-form ref="dmsInspectRouteDetailFormRef" :model="form" :rules="rules" label-width="80px">
<!-- <el-form-item label="主键标识" prop="routeDetailId">
<el-input v-model="form.routeDetailId" placeholder="请输入主键标识" />
</el-form-item>-->
<el-form-item label="线路" prop="inspectRouteId">
<el-input v-model="form.inspectRouteId" placeholder="请输入线路" />
</el-form-item>
<el-form-item label="巡检步骤" prop="lineStep"> <el-form-item label="巡检步骤" prop="lineStep">
<el-input v-model="form.lineStep" placeholder="请输入巡检步骤" /> <el-input-number v-model="form.lineStep" placeholder="第几步" :min="0" :step="1" :precision="0"/>
</el-form-item> </el-form-item>
<el-form-item label="设备" prop="machineId"> <el-form-item label="设备" prop="machineId">
<!-- <el-input v-model="form.machineId" placeholder="请输入设备" />-->
<el-select v-model="form.machineId" placeholder="请选择设备" clearable > <el-select v-model="form.machineId" placeholder="请选择设备" clearable >
<el-option v-for="item in machineOtions" <el-option v-for="item in machineOtions"
:key="item.machineId" :key="item.machineId"
@ -91,11 +87,17 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item label="巡检标准;预留,不需要关联巡检标准,一条巡检线路的巡检标准都相同" prop="inspectStandard"> <el-form-item label="巡检标准" prop="inspectStandard">
<el-input v-model="form.inspectStandard" placeholder="请输入巡检标准;预留,不需要关联巡检标准,一条巡检线路的巡检标准都相同" /> <el-select v-model="form.inspectStandard" placeholder="请选择巡检标准" clearable>
</el-form-item>--> <el-option v-for="item in dmsBaseInspectStandardList"
:key="item.inspectStandardId"
:label="item.standardName"
:value="item.inspectStandardId.toString()">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" /> <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -111,9 +113,13 @@
<script setup name="DmsInspectRouteDetail" lang="ts"> <script setup name="DmsInspectRouteDetail" lang="ts">
import { listDmsInspectRouteDetail, getDmsInspectRouteDetail, delDmsInspectRouteDetail, addDmsInspectRouteDetail, updateDmsInspectRouteDetail } from '@/api/dms/dmsInspectRouteDetail'; import { listDmsInspectRouteDetail, getDmsInspectRouteDetail, delDmsInspectRouteDetail, addDmsInspectRouteDetail, updateDmsInspectRouteDetail } from '@/api/dms/dmsInspectRouteDetail';
import { DmsInspectRouteDetailVO, DmsInspectRouteDetailQuery, DmsInspectRouteDetailForm } from '@/api/dms/dmsInspectRouteDetail/types'; import { DmsInspectRouteDetailVO, DmsInspectRouteDetailQuery, DmsInspectRouteDetailForm } from '@/api/dms/dmsInspectRouteDetail/types';
import {getDmsBaseMachineInfoList} from "@/api/dms/dmsBaseMachineInfo"; import { getDmsBaseMachineInfoList } from "@/api/dms/dmsBaseMachineInfo";
import {getDmsBaseInspectRouteList} from '@/api/dms/dmsBaseInspectRoute';
import {getDmsBaseInspectStandardList} from '@/api/dms/dmsBaseInspectStandard';
import { useRoute } from 'vue-router';
const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const route = useRoute();
const dmsInspectRouteDetailList = ref<DmsInspectRouteDetailVO[]>([]); const dmsInspectRouteDetailList = ref<DmsInspectRouteDetailVO[]>([]);
const buttonLoading = ref(false); const buttonLoading = ref(false);
@ -127,6 +133,8 @@ const total = ref(0);
const queryFormRef = ref<ElFormInstance>(); const queryFormRef = ref<ElFormInstance>();
const dmsInspectRouteDetailFormRef = ref<ElFormInstance>(); const dmsInspectRouteDetailFormRef = ref<ElFormInstance>();
const inspectRouteCode = ref('');
const dialog = reactive<DialogOption>({ const dialog = reactive<DialogOption>({
visible: false, visible: false,
title: '' title: ''
@ -136,10 +144,10 @@ const dialog = reactive<DialogOption>({
const columns = ref<FieldOption[]>([ const columns = ref<FieldOption[]>([
{ key: 0, label: `主键标识`, visible: false }, { key: 0, label: `主键标识`, visible: false },
{ key: 1, label: `租户编号`, visible: false }, { key: 1, label: `租户编号`, visible: false },
{ key: 2, label: `线路`, visible: true }, { key: 2, label: `线路`, visible: false },
{ key: 3, label: `巡检步骤`, visible: true }, { key: 3, label: `巡检步骤`, visible: true },
{ key: 4, label: `设备`, visible: true }, { key: 4, label: `设备`, visible: true },
{ key: 5, label: `巡检标准`, visible: false }, { key: 5, label: `巡检标准`, visible: true },
{ key: 6, label: `备注`, visible: true }, { key: 6, label: `备注`, visible: true },
{ key: 7, label: `创建部门`, visible: false }, { key: 7, label: `创建部门`, visible: false },
{ key: 8, label: `创建人`, visible: false }, { key: 8, label: `创建人`, visible: false },
@ -215,6 +223,7 @@ const cancel = () => {
/** 表单重置 */ /** 表单重置 */
const reset = () => { const reset = () => {
form.value = {...initFormData}; form.value = {...initFormData};
form.value.inspectRouteId = inspectRouteIdCheck.value;
dmsInspectRouteDetailFormRef.value?.resetFields(); dmsInspectRouteDetailFormRef.value?.resetFields();
} }
@ -294,8 +303,77 @@ const getMachineOtions = async () => {
machineOtions.value = res.data; machineOtions.value = res.data;
} }
//
let dmsBaseInspectStandardList = ref([]);
/** 查询巡检标准列表 */
const getInspectStandard = async () => {
const res = await getDmsBaseInspectStandardList(null);
dmsBaseInspectStandardList.value = res.data;
}
const getStandardNameById = (standardId: string | number) => {
if (!standardId || !dmsBaseInspectStandardList.value) return '';
const standard = dmsBaseInspectStandardList.value.find(
(s: any) => s.inspectStandardId?.toString() === standardId.toString()
);
return standard ? standard.standardName : '';
};
// 线
const inspectRouteIdCheck = ref('');
const routeCheck = ref('');
let dmsBaseInspectRouteList = ref([]);
/** 查询巡检线路信息 */
const getRoute = async () => {
try {
// queryParams.value inspectRouteId getDmsBaseInspectRouteList ID
// getDmsBaseInspectRouteList(null) 线
const res = await getDmsBaseInspectRouteList(null);
dmsBaseInspectRouteList.value = res.data; // { data: [] }
if (res.data && inspectRouteIdCheck.value) {
const currentRoute = res.data.find(
(route: any) => route.inspectRouteId?.toString() === inspectRouteIdCheck.value
);
if (currentRoute) {
inspectRouteCode.value = currentRoute.routeCode;
routeCheck.value = currentRoute.routeName;
} else {
console.warn(`在返回的线路列表中未找到 ID 为 ${inspectRouteIdCheck.value} 的线路`);
inspectRouteCode.value = '未找到';
routeCheck.value = '未找到';
}
} else {
inspectRouteCode.value = '无数据';
routeCheck.value = '无数据';
}
} catch (error) {
console.error(`获取巡检线路列表失败: (ID: ${inspectRouteIdCheck.value})`, error);
inspectRouteCode.value = '加载失败';
routeCheck.value = '加载失败';
proxy?.$modal.msgError("加载线路基础信息失败。");
}
}
onMounted(() => { onMounted(() => {
// inspectRouteId
const inspectRouteIdFromParam = route.params.inspectRouteId as string;
inspectRouteIdCheck.value = inspectRouteIdFromParam;
queryParams.value.inspectRouteId = inspectRouteIdFromParam;
form.value.inspectRouteId = inspectRouteIdFromParam;
getMachineOtions(); getMachineOtions();
getInspectStandard();
getRoute();
getList(); getList();
}); });
</script> </script>
<style scoped>
.form-header {
font-size: 16px;
color: #303133;
font-weight: bold;
margin: 15px 0;
}
</style>

Loading…
Cancel
Save