ibms/src/components/ready/buildfloor/container.vue

<template>
    <div class="container">
        <el-button
            size="small"
            type="default"
            @click="addFloor"
            style="margin: 10px 11px;"
        >添加楼层
        </el-button>

        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%"
                height="100%"
                v-loading="loading"
                :header-cell-style="headerStyle"
            >
                <el-table-column label="楼层本地名">
                    <template slot-scope="scope">{{scope.row.FloorLocalName||scope.row.FloorName}}</template>
                </el-table-column>
                <el-table-column label="楼层顺序号">
                    <template slot-scope="scope">{{scope.row.FloorSequenceID}}</template>
                </el-table-column>
                <el-table-column label="楼层信息">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="editFloorData(scope.row)"
                            plain
                            icon="el-icon-edit-outline"
                        ></el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="Datasource"
                    label="平面图"
                >
                    <template
                        slot-scope="scope">
                        <p
                            v-if="scope.row.Sign > 0"
                            class="cursor"
                            @click="childCheckDrawImg(scope.row,2)"
                        >
                            <el-badge is-dot>
                                <i class="iconfont icon-floorplan"/>
                            </el-badge>
                            平面图重复
                        </p>
                        <p
                            class="cursor"
                            v-else-if="scope.row.StructureInfo?scope.row.StructureInfo.FloorMap:false"
                            @click="childCheckDrawImg(scope.row,1)"
                        >
                            <i class="iconfont icon-floorplan"/>
                            查看平面图
                        </p>
                        <p
                            class="cursor"
                            v-else
                            @click="childCheckDrawImg(scope.row,3)"
                        >
                            <i class="iconfont icon-nopicture"/>
                            暂无平面图
                        </p>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="SubTypeName"
                    label="楼层贯通关系"
                >
                    <template slot-scope="scope">
                        <span style="margin-right:20px">{{scope.row.FloorThroughList?scope.row.FloorThroughList.length:0}}</span>
                        <el-button
                            size="mini"
                            @click="changeConnection(scope.row)"
                            plain
                            icon="el-icon-edit-outline"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    prop="action"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleDelete(scope.row)"
                            type="danger"
                            plain
                            icon="el-icon-delete"
                        />
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 添加-修改楼层 -->
        <addFloor
            :title="floorTitle"
            ref="addFloorDialog"
            :curBuildId="curBuildId"
            :curFloorId="curFloorId"
        />
        <!-- 添加贯通关系弹窗 -->
        <addConnectivity
            ref="addConnectivity"
        />
        <!-- 删除建筑-删除楼层 -->
        <el-dialog
            title="提示"
            :visible.sync="delDialogVis"
            width="20%"
            @close="handleClose"
            id="messageDialog"
        >
            <div>确定要删除该{{delText}}？</div>
            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button
            size="small"
            @click="delDialogVis=false"
        >取消</el-button>
        <el-button
            size="small"
            type="primary"
            @click="confirmDelete"
        >确认</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    import addFloor from "@/views/ready/buildfloor/addFloor/index";
    import addConnectivity from "./addConnectivity";

    export default {
        name: "container",
        props: ['tableData', 'curBuildId'],
        data() {
            return {
                floorTitle: "添加楼层",
                curFloorId: "", //当前选中的楼层id
                headerStyle: {
                    backgroundColor: "#d9d9d9",
                    color: "#2b2b2b",
                    lineHeight: "30px"
                },
                loading: false, //列表loading
                delText: "楼层",
                delDialogVis: false,
            }
        },
        components: {addFloor, addConnectivity},

        methods: {
            addFloor() {
                this.curFloorId = "";
                this.$refs.addFloorDialog.showDialog();
            },
            // 修改楼层贯通关系
            changeConnection(row) {
                this.$refs.addConnectivity.showDialog();
                this.$refs.addConnectivity.floor = row;
            },
            // 修改楼层信息
            editFloorData(floor) {
                this.floorTitle = "编辑楼层信息";
                this.curFloorId = floor.FloorID;
                this.$refs.addFloorDialog.showDialog(floor);
            },
            //delete floor
            handleDelete(floor) {
                this.delText = "楼层";
                this.delDialogVis = true;
                this.curFloorId = floor.FloorID;
            },
            // 确认删除(删除建筑-楼层公用)
            confirmDelete() {
                this.delDialogVis = false;
                this.$listeners.confirmDel()
            },
            //确认删除弹窗关闭
            handleClose() {
            },
            // 查看平面图
            childCheckDrawImg(row, index) {
                this.$listeners.checkDrawImg(row, index)
            }
        }
    }
</script>

<style scoped lang="less">
    .container {
        height: 100%;

        .table {
            height: 100%;
        }
        .cursor{
            cursor: pointer;
        }
    }
</style>