详情页面分成多级多个子组件（每个都很简单）

最新推荐文章于 2024-04-25 21:51:20 发布

iambenbenchen72

最新推荐文章于 2024-04-25 21:51:20 发布

阅读量215

点赞数

文章标签：数学建模 matlab servlet

本文链接：https://blog.csdn.net/m0_37939797/article/details/131163055

版权

效果图：

在这里插入图片描述

页面 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>