- 效果图：
-
页面 index.vue
<template> <div class="app-container"> <!--工具栏--> <div class="head-container"> <eHeader :dict="dict" :disasterTypes="disasterTypes" :monitorPointTypes="monitorPointTypes" :permission="permission" /> <crudOperation :permission="permission" /> </div> <!--表格渲染--> <el-table ref="table" v-loading="crud.loading" :stripe="true" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler" > <el-table-column type="selection" width="55" /> <el-table-column prop="id" label="监测点编号" width="200" /> <el-table-column prop="monitorPointName" label="监测点名称" /> <el-table-column prop="location" label="位置描述" /> <el-table-column prop="disasterUnitCode" label="灾害点编码" width="160" /> <el-table-column prop="monitorPointType" label="监测点类型" width="200" /> <el-table-column prop="status" label="状态" :formatter="statusFormatter" align="center" width="160" /> <el-table-column prop="setDate" label="设立日期" width="160" /> <!-- 编辑与删除 --> <el-table-column v-if="checkPer(['admin', 'monitorPointInfo:edit', 'monitorPointInfo:del'])" label="操作" width="130px" align="center" fixed="right" > <template slot-scope="scope"> <udOperation :data="scope.row" :permission="permission" /> </template> </el-table-column> <el-table-column label="关联操作" width="130px" align="center"> <template slot-scope="scope"> <el-button size="mini" type="warning" @click="showDetails(scope.row)" >详情</el-button > </template> </el-table-column> </el-table> <!--分页组件--> <pagination /> <!--表单渲染--> <eForm :disasterTypes="disasterTypes" :monitorPointTypes="monitorPointTypes" :monitor-point-info-status="dict.monitor_point_info_status" /> <!-- 关联的设备对话框 --> <dlgDetails ref="details"></dlgDetails> </div> </template> <script> import crudMonitorPointInfo from '@/api/dz/monitorPointInfo' import eHeader from './module/header' import eForm from './module/form' import dlgDetails from './module/dlgDetails' import CRUD, { presenter } from '@crud/crud' import crudOperation from '@crud/CRUD.operation' import pagination from '@crud/Pagination' import udOperation from '@crud/UD.operation' import { getDeviceInfos } from '@/api/dz/deviceInfo' import { getSensorInfosByMonitorPoint } from '@/api/dz/sensorInfo' export default { name: 'MonitorPointInfo', components: { eHeader, eForm, crudOperation, pagination, udOperation, dlgDetails, }, cruds() { return CRUD({ title: '监测点', url: '/api/monitor/point/info', crudMethod: { ...crudMonitorPointInfo }, }) }, mixins: [presenter()], // 数据字典 dicts: ['monitor_point_info_status'], data() { return { // 灾害类型 disasterTypes: [ { key: '泥石流', value: '泥石流' }, { key: '滑坡', value: '滑坡' }, { key: '崩塌', value: '崩塌' }, { key: '地面塌陷', value: '地面塌陷' }, { key: '地面沉降', value: '地面沉降' }, { key: '地裂缝', value: '地裂缝' }, ], // 监测点类型 monitorPointTypes: [ { key: '专业监测点', value: '专业监测点' }, { key: '专群结合监测点', value: '专群结合监测点' }, ], permission: { add: ['admin', 'monitorPointInfo:add'], edit: ['admin', 'monitorPointInfo:edit'], del: ['admin', 'monitorPointInfo:del'], }, dlgDeviceVisible: false, } }, methods: { statusFormatter(row, column) { var statusName = '' switch (row.status) { case '0': statusName = '常规监测' break case '1': statusName = '应急监测' break case '2': statusName = '注销停用' break default: statusName = '非法状态' } return statusName }, showDetails(row) { // 要求子组件属性ref=details this.$refs.details.$data.monitorPointInfo = row // 查询监测点关联的设备 getDeviceInfos(row.id).then((res) => { // console.log(res) this.$refs.details.$data.deviceInfos = res }) // 查询监测点关联的传感器 getSensorInfosByMonitorPoint(row.id).then((res) => { // console.log(res) this.$refs.details.$data.sensorInfos = res }) // 设置子组件的数据isShow，用于显示子组件（不能使用子组件的属性，传递给子组件的属性不可更改！） this.$refs.details.$data.isShow = true }, }, } </script> <style rel="stylesheet/scss" lang="scss" scoped> ::v-deep .el-input-number .el-input__inner { text-align: left; } </style> -
一级子组件 dlgDetails.vue
<template> <el-dialog title="监测点关联详情" :visible.sync="isShow" width="60%" center > <el-tabs type="border-card"> <el-tab-pane label="监测点信息"> <tpMonitorPointInfo :monitorPointInfo="monitorPointInfo" /> </el-tab-pane> <el-tab-pane label="关联的设备信息"> <tpDeviceInfos :deviceInfos="deviceInfos" /> </el-tab-pane> <el-tab-pane label="关联的传感器信息"> <tpSensorInfos :sensorInfos="sensorInfos" /> </el-tab-pane> <el-tab-pane label="YYY">。。。</el-tab-pane> </el-tabs> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="isShow = false" >关闭</el-button > </span> </el-dialog> </template> <script> import tpMonitorPointInfo from '../details/tpMonitorPointInfo' import tpDeviceInfos from '../details/tpDeviceInfos' import tpSensorInfos from '../details/tpSensorInfos' export default { components: { tpMonitorPointInfo, tpDeviceInfos, tpSensorInfos }, data() { return { isShow: false, monitorPointInfo: {}, deviceInfos: [], sensorInfos: [], } }, } </script> -
二级子组件 tpMonitorPointInfo.vue
<template> <el-descriptions class="margin-top" :column="3" border> <el-descriptions-item> <template slot="label"> <i class="el-icon-user"></i> 监测点编号 </template> {{ monitorPointInfo.id }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-mobile-phone"></i> 监测点名称 </template> {{ monitorPointInfo.monitorPointName }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-location-outline"></i> 位置描述 </template> {{ monitorPointInfo.location }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-tickets"></i> 纬度 </template> <el-tag size="small">{{ monitorPointInfo.latitude }}</el-tag> </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-office-building"></i> 经度 </template> <el-tag size="small">{{ monitorPointInfo.longitude }}</el-tag> </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-office-building"></i> 高程 </template> <el-tag size="small">{{ monitorPointInfo.elevation }}</el-tag> </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-tickets"></i> 灾害编码 </template> {{ monitorPointInfo.disasterUnitCode }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-office-building"></i> 监测点类型 </template> {{ monitorPointInfo.monitorPointType }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-date"></i> 设立日期 </template> {{ monitorPointInfo.setDate }} </el-descriptions-item> </el-descriptions> </template> <script> export default { props: { monitorPointInfo: { type: Object, required: true, }, }, } </script> -
二级子组件 tpDeviceInfos.vue
<template> <el-table :data="deviceInfos" stripe style="width: 100%"> <el-table-column prop="name" label="设备名称"> </el-table-column> <el-table-column prop="deviceKey" label="设备Key"> </el-table-column> <el-table-column prop="sn" label="设备SN"> </el-table-column> <el-table-column prop="manufacturer" label="设备厂商"> </el-table-column> <el-table-column prop="status" label="运行状态"> <template slot-scope="scope"> <el-tag :type="scope.row.status === 0 ? 'warning' : 'success'" >{{ scope.row.status === 0 ? '已暂停' : '运行中' }}</el-tag > </template> </el-table-column> </el-table> </template> <script> export default { props: { deviceInfos: { type: Array, required: true, }, }, } </script> -
二级子组件 tpSensorInfos.vue
<template> <el-table :data="sensorInfos" stripe style="width: 100%"> <el-table-column prop="id" label="传感器编号" /> <el-table-column prop="sensorName" label="传感器名称" /> <el-table-column prop="deviceTypeCode" label="类型代码" :formatter="deviceTypeCodeFormatter" align="center" /> <el-table-column prop="boreHoleCode" label="钻孔编号" /> <el-table-column prop="deviceKey" label="设备Key" /> <el-table-column prop="installDate" label="安装时间" /> </el-table> </template> <script> export default { // 数据字典 dicts: ['device_type_codes'], props: { sensorInfos: { type: Array, required: true, }, }, methods: { deviceTypeCodeFormatter(row, column) { let deviceTypeCodeName = '' this.dict.device_type_codes.forEach((item) => { if (item.value === row.deviceTypeCode) { deviceTypeCodeName = item.label } }) return deviceTypeCodeName }, }, } </script>
791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
