<template> <el-dialog :title="title" :visible.sync="dialogVisible" width="800px" id="addSyDialog"> <div class="table-box"> <el-table :data="tableData" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="headerStyle" ref="multipleTable" border> <el-table-column label="业务空间名称" show-overflow-tooltip min-width="100"> <template slot-scope="scope"> <div> {{scope.row.RoomLocalName||scope.row.RoomName||''}} </div> </template> </el-table-column> <el-table-column label="所属建筑" show-overflow-tooltip min-width="100" class-name="mutiCol"> <template slot-scope="scope"> <div> <div v-for="(t,i) in scope.row.FloorList" :key="i" class="muti"> {{t.Building.BuildLocalName||t.Building.BuildName}} </div> </div> </template> </el-table-column> <el-table-column prop="SysLocalID" label="所属楼层" show-overflow-tooltip min-width="100" class-name="mutiCol"> <template slot-scope="scope"> <div> <div v-for="t in scope.row.FloorList" :key="t.FloorID" class="muti"> {{t.FloorLocalName||t.FloorName}} </div> </div> </template> </el-table-column> <el-table-column prop="action" label="操作" min-width="50" align='center' class-name="mutiCol"> <template slot-scope="scope"> <div> <div v-for="t in scope.row.FloorList" :key="t.FloorID" class="muti"> <el-radio v-model="scope.row.selected" :label="t">{{''}}</el-radio> </div> </div> </template> </el-table-column> </el-table> </div> <span slot="footer" class="dialog-footer"> <el-button size="small" @click="dialogVisible = false">取 消</el-button> <el-button size="small" type="primary" @click="savaRelation">确 定</el-button> </span> </el-dialog> </template> <script> import { getSpaceBdFlData, // 属于多建筑楼层的空间数据 updateRelateInSpAndBuild, //保存业务空间与建筑楼层关系 } from "@/api/scan/request"; export default { data() { return { title: '请选择业务空间所属建筑', inSpaceType: '系统', dialogVisible: false, tableData: [], loading: false, headerStyle: { backgroundColor: '#e1e4e5', color: '#2b2b2b', lineHeight: '30px' }, // 列表样式 selections: [], // 选中项 } }, props: { type: {}, //equipment--equipmentFor spaceId: {}, zone: {}, //分区类型 }, methods: { // 显示 showDialog() { this.dialogVisible = true; this.tableData = []; this.getTableData(); }, // 确认 savaRelation() { let arr = []; this.tableData.forEach(t => { if (t.selected) { arr.push({ spaceId: t.RoomID, id: t.selected.FloorID, type: t.ObjectType }) } }) if (arr.length) { updateRelateInSpAndBuild(arr, res => { this.$emit('relaSuc'); this.$message.success('关联成功'); this.dialogVisible = false; }) } else { this.$message.warning('请选择关联建筑楼层'); } }, // 获取表格数据 getTableData() { let pa = { Cascade: [ { Name: "floorlList", Cascade: [{ Name: 'building' }] } ], PageSize: 1000 } getSpaceBdFlData(pa, res => { this.tableData = res.Content; }) } } } </script> <style lang="less" scoped> #addSyDialog { .table-box { height: 350px; /deep/ .mutiCol { padding: 0; & > div { padding: 0; } } .muti { line-height: 32px; padding: 0 10px; & + .muti { border-top: 1px solid #ebeef5; } } } } </style>