主要用于弹出对话框，选中显示数据表格的某一行，在点击确认按钮后，获取相关的数据进行填充，避免输入错误
-
效果图：
-
定义组件 DeviceDialogSelector.vue
<template> <el-dialog append-to-body title="设备选择器" :visible.sync="dialogVisible" width="80%" > <!-- 对话框主要内容 --> <div class="app-container"> <!--工具栏--> <div class="head-container"> <el-input v-model="query.name" clearable size="small" placeholder="设备名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" /> <el-input v-model="query.sn" clearable size="small" placeholder="设备SN搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" /> <el-input v-model="query.deviceKey" clearable size="small" placeholder="设备Key搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" /> <el-select v-model="query.status" clearable size="small" placeholder="设备状态" class="filter-item" style="width: 90px" @change="toQuery" > <el-option v-for="item in statusOptions" :key="item.key" :label="item.display_name" :value="item.key" /> </el-select> <span> <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery" >搜索</el-button > <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()" >重置</el-button > </span> </div> <!--表格渲染，设置单选及行点击事件处理程序--> <el-table ref="multipleTable" stripe :data="page.data" style="width: 100%;" highlight-current-row @row-click="rowClick" > <el-table-column type="index" label="序号" width="50px" fixed /> <el-table-column prop="name" label="设备名称" /> <el-table-column prop="status" label="设备状态" :formatter="statusFormatter" align="center" /> <el-table-column prop="sn" label="设备SN" /> <el-table-column prop="deviceKey" label="设备Key" /> <el-table-column prop="deviceCode" label="监测设备编号" /> <el-table-column prop="monitorPointCode" label="监测点编号" /> </el-table> <!--分页组件--> <el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChangeHandler" @current-change="pageChangeHandler" > </el-pagination> </div> <!-- 对话框底部内容 --> <span slot="footer" class="dialog-footer"> <!-- 确认并关闭对话框，同时，传出选择的行数据 --> <el-button type="primary" @click="selectedAndClose" >确 定</el-button > </span> </el-dialog> </template> <script> import { getAllPagingDeviceInfo } from '@/api/dz/deviceInfo' let queryInfo = { page: 1, size: 10, } export default { mounted() { this.toQuery() }, data() { return { dialogVisible: false, // 选中的行数据 currentRowObj: undefined, query: { name: '', sn: '', deviceKey: '', status: '', }, page: { size: 10, total: 0, page: 0, data: [], }, statusOptions: [ { key: '0', display_name: '无状态' }, { key: '1', display_name: '正常' }, { key: '2', display_name: '异常' }, ], } }, methods: { selectedAndClose() { // 激发自定义事件，并传递选中数据 this.$emit('rowSelected', this.currentRowObj) // 关闭对话框 this.dialogVisible = false }, rowClick(row, column) { this.currentRowObj = row }, toQuery() { // 清除无值参数 Object.keys(this.query).length !== 0 && Object.keys(this.query).forEach((item) => { if ( this.query[item] === null || this.query[item] === '' ) this.query[item] = undefined }) this.refreshData() }, resetQuery() { // 变成无值参数 Object.keys(this.query).length !== 0 && Object.keys(this.query).forEach((item) => { this.query[item] = undefined }) this.refreshData() }, sizeChangeHandler(e) { this.page.size = e this.page.page = 0 this.refreshData() }, pageChangeHandler(e) { this.page.page = e this.refreshData() }, refreshData() { queryInfo = { ...this.query, page: this.page.page - 1, size: this.page.size, } getAllPagingDeviceInfo(queryInfo).then((res) => { this.page.data = res.content this.page.total = res.totalElements this.page.page = queryInfo.page + 1 }) }, statusFormatter(row, column) { var statusName = '' switch (row.status) { case '0': statusName = '无状态' break case '1': statusName = '正常' break case '2': statusName = '异常' break default: statusName = '非法状态' } return statusName }, }, } </script> -
定义组件 SensorDialogSelector.vue
<template> <el-dialog append-to-body title="传感器选择器" :visible.sync="dialogVisible" width="80%" > <!-- 对话框主要内容 --> <div class="app-container"> <!--工具栏--> <div class="head-container"> <el-input v-model="query.id" clearable size="small" placeholder="传感器编号搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" /> <el-input v-model="query.sensorName" clearable size="small" placeholder="传感器名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" /> <el-select v-model="query.deviceTypeCode" clearable size="small" placeholder="类型代码搜索" class="filter-item" style="width: 90px" @change="toQuery" > <el-option v-for="item in dict.device_type_codes" :key="item.value" :label="item.label" :value="item.value" /> </el-select> <span> <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery" >搜索</el-button > <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()" >重置</el-button > </span> </div> <!--表格渲染，设置单选及行点击事件处理程序--> <el-table ref="multipleTable" stripe :data="page.data" style="width: 100%;" highlight-current-row @row-click="rowClick" > <el-table-column type="index" label="序号" width="50px" fixed /> <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="monitorPointCode" label="监测点编号" /> <el-table-column prop="deviceKey" label="设备Key" /> <el-table-column prop="installDate" label="安装时间" /> </el-table> <!--分页组件--> <el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChangeHandler" @current-change="pageChangeHandler" > </el-pagination> </div> <!-- 对话框底部内容 --> <span slot="footer" class="dialog-footer"> <!-- 确认并关闭对话框，同时，传出选择的行数据 --> <el-button type="primary" @click="selectedAndClose" >确 定</el-button > </span> </el-dialog> </template> <script> import { getAllPagingSensorInfo } from '@/api/dz/sensorInfo' let queryInfo = { page: 1, size: 10, } export default { mounted() { this.toQuery() }, // 数据字典 dicts: ['device_type_codes'], data() { return { dialogVisible: false, // 选中的行数据 currentRowObj: undefined, query: { id: '', sensorName: '', deviceTypeCode: '', }, page: { size: 10, total: 0, page: 0, data: [], }, } }, methods: { selectedAndClose() { // 激发自定义事件，并传递选中数据 this.$emit('rowSelected', this.currentRowObj) // 关闭对话框 this.dialogVisible = false }, rowClick(row, column) { this.currentRowObj = row }, toQuery() { // 清除无值参数 Object.keys(this.query).length !== 0 && Object.keys(this.query).forEach((item) => { if ( this.query[item] === null || this.query[item] === '' ) this.query[item] = undefined }) this.refreshData() }, resetQuery() { // 变成无值参数 Object.keys(this.query).length !== 0 && Object.keys(this.query).forEach((item) => { this.query[item] = undefined }) this.refreshData() }, sizeChangeHandler(e) { this.page.size = e this.page.page = 0 this.refreshData() }, pageChangeHandler(e) { this.page.page = e this.refreshData() }, refreshData() { queryInfo = { ...this.query, page: this.page.page - 1, size: this.page.size, } getAllPagingSensorInfo(queryInfo).then((res) => { this.page.data = res.content this.page.total = res.totalElements this.page.page = queryInfo.page + 1 }) }, deviceTypeCodeFormatter(row, column) { let deviceTypeCodeName = '' this.dict.device_type_codes.forEach((item) => { if (item.value === row.deviceTypeCode) { deviceTypeCodeName = item.label } }) return deviceTypeCodeName }, }, } </script> -
使用组件 monitorDeviceInfo.vue
<template> <div> <el-descriptions class="margin-top" title="监测点信息" :column="3" border style="padding: 10px;" > <template slot="extra"> <el-button type="primary" size="small" @click="showDeviceSelector()" >绑定设备</el-button > <el-button type="success" size="small" @click="showSensorSelector()" >绑定传感器</el-button > </template> <el-descriptions-item> <template slot="label"> <i class="el-icon-user"></i> 监测点编号 </template> {{ monitorPoint.id }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-mobile-phone"></i> 监测点名称 </template> {{ monitorPoint.monitorPointName }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-location-outline"></i> 灾害点编码 </template> {{ monitorPoint.disasterUnitCode }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-tickets"></i> 监测点类型 </template> <el-tag size="small" >{{ monitorPoint.monitorPointType }}</el-tag > </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-office-building"></i> 地理位置 </template> {{ monitorPoint.location }} </el-descriptions-item> </el-descriptions> <el-descriptions class="margin-top" title="监测点设备信息" :column="1" border style="padding: 10px;" > <el-descriptions-item> <el-table :data="devices" :stripe="true" border style="width: 100%" > <el-table-column type="index" label="序号" /> <el-table-column prop="name" label="设备名称" /> <el-table-column prop="sn" label="设备sn" width="200" /> <el-table-column prop="deviceKey" label="设备Key" width="200" /> <el-table-column prop="status" label="设备状态" width="120" align="center" > <template slot-scope="scope"> <el-tag :type="scope.row.status === '1' ? 'success' : 'warning'" disable-transitions >{{ scope.row.status === '1' ? '正常' : '异常' }}</el-tag > </template> </el-table-column> <el-table-column prop="manufacturer" label="设备厂商" /> <el-table-column label="操作" width="120" align="center" > <template slot-scope="scope"> <el-button type="warning" size="mini" @click="unbindingDevice(scope.row)" >解绑设备</el-button > </template> </el-table-column> </el-table> </el-descriptions-item> </el-descriptions> <!-- 引用组件，响应自定义事件并设置处理程序 --> <DeviceDialogSelector ref="deviceSelector" @rowSelected="setBindDevice" /> <el-descriptions class="margin-top" title="监测点传感器信息" :column="1" border style="padding: 10px;" > <el-descriptions-item> <el-table :data="sensors" :stripe="true" border style="width: 100%" > <el-table-column type="index" label="序号" /> <el-table-column prop="id" label="传感器编号" /> <el-table-column prop="sensorName" label="传感器名称" /> <el-table-column prop="deviceTypeCode" label="类型代码" align="center" > <template slot-scope="scope"> <el-tag type="primary" disable-transitions >{{ deviceTypeCodeFormatter(scope.row) }}</el-tag > </template></el-table-column > <el-table-column prop="boreHoleCode" label="钻孔编号" /> <el-table-column prop="monitorPointCode" label="监测点编号" /> <el-table-column prop="deviceKey" label="设备Key" /> <el-table-column label="操作" width="120" align="center" > <template slot-scope="scope"> <el-button type="warning" size="mini" @click="unbindingSensor(scope.row)" >解绑传感器</el-button > </template> </el-table-column> </el-table> </el-descriptions-item> </el-descriptions> <!-- 引用组件，响应自定义事件并设置处理程序 --> <SensorDialogSelector ref="sensorSelector" @rowSelected="setBindSensor" /> </div> </template> <script> import { find } from '@/api/dz/monitorPointInfo' import { getDeviceInfos, unbinding, binding } from '@/api/dz/deviceInfo' import { getSensorInfosByMonitorPoint, unbindMonitorPoint, bindMonitorPoint, } from '@/api/dz/sensorInfo' import DeviceDialogSelector from '../../../components/selector/DeviceDialogSelector' import SensorDialogSelector from '../../../components/selector/SensorDialogSelector' let monitorPointCode = '' export default { components: { DeviceDialogSelector, SensorDialogSelector, }, // 数据字典 dicts: ['device_type_codes'], mounted() { // 获取url传递来的参数 monitorPointCode = this.$route.query.monitorPointCode // 获取监测点 find(monitorPointCode).then((res) => { this.monitorPoint = res }) // 获取监测点设备 this.getMonitorPointDeviceList() // 获取监测点传感器列表 this.getMonitorPointSensorList() }, data() { return { monitorPoint: {}, devices: [], sensors: [], } }, methods: { deviceTypeCodeFormatter(row, column) { let deviceTypeCodeName = '' this.dict.device_type_codes.forEach((item) => { if (item.value === row.deviceTypeCode) { deviceTypeCodeName = item.label } }) return deviceTypeCodeName }, // 获取监测点设备列表 getMonitorPointDeviceList() { getDeviceInfos(monitorPointCode).then((res) => { this.devices = res }) }, // 获取监测点传感器列表 getMonitorPointSensorList() { getSensorInfosByMonitorPoint(monitorPointCode).then( (res) => { this.sensors = res } ) }, // 解绑设备 unbindingDevice(row) { unbinding({ id: row.id }) this.getMonitorPointDeviceList() }, // 显示选择设备列表对话框 showDeviceSelector() { this.$refs.deviceSelector.$data.dialogVisible = true }, // 设置设备绑定数据 setBindDevice(rowData) { binding({ id: rowData.id, monitorPointCode: this.monitorPoint.id, }) this.getMonitorPointDeviceList() }, // 解绑传感器 unbindingSensor(row) { unbindMonitorPoint({ id: row.id }) this.getMonitorPointSensorList() }, // 显示选择传感器列表对话框 showSensorSelector() { this.$refs.sensorSelector.$data.dialogVisible = true }, // 设置传感器绑定数据 setBindSensor(rowData) { bindMonitorPoint({ id: rowData.id, monitorPointCode: this.monitorPoint.id, }) this.getMonitorPointSensorList() }, }, } </script>
4379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
