123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- <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.localName||scope.row.name||''}}
- </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.localName||t.building.name}}
- </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.id" class="muti">
- {{t.localName||t.name}}
- </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.id" 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.id,
- id: t.selected.floorId,
- type: t.classCode
- })
- }
- })
- if (arr.length) {
- updateRelateInSpAndBuild(arr, res => {
- this.$emit('relaSuc');
- this.$message.success('关联成功');
- this.dialogVisible = false;
- })
- } else {
- this.$message.warning('请选择关联建筑楼层');
- }
- },
- // 获取表格数据
- getTableData() {
- let pa = {
- cascade: [
- { Name: "floorList", 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>
|