ibms/src/components/business_space/dialogs/detailsDialog.vue

<template>
    <el-dialog :visible.sync="isShow.details" :width="width">
        <span slot="title">
          <span v-show="step == 1">{{title}}</span>
        <span v-show="step == 1" style="float:right;margin-right:40px;">
            <el-button class="saga-padding0" @click="step = 3" type="text">编辑信息</el-button>
            <!-- <el-button class="saga-padding0" @click="addMyEquip" type="text">添加设备</el-button> -->
            <el-dropdown @command="addMyEquip" trigger="click">
              <span class="el-dropdown-link" style="color: #409EFF">添加设备</span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="EquipinSpace">空间内的设备</el-dropdown-item>
            <el-dropdown-item command="EquipforSpace">服务于空间的设备</el-dropdown-item>
            <el-dropdown-item command="EquipXSpace">其他关系的设备</el-dropdown-item>
        </el-dropdown-menu>
        </el-dropdown>
        <el-button class="saga-padding0" @click="delSpace" type="text">删除该业务空间</el-button>
        </span>
        <span v-show="step == 2 || step == 3">
            <el-button type="text" @click="goBack" icon="el-icon-arrow-left"></el-button>
          </span>
        </span>
        <div id="detailsDialog" v-show="step == 1">
            <p class="influence-p">{{list.name}}</p>
            <el-tabs type="border-card">
                <el-tab-pane label="空间详情">
                    <div class="saga-details">
                        <iframe height="400px" v-if="isShow.details" width="100%" :src="iframeSrc"></iframe>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="与空间相关联的设备">
                    <div>
                        <equip-table ref="myEquip"></equip-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-show="step == 2">
            <add-equip :activeTabType="activeTabType" ref="addEquip"></add-equip>
        </div>
        <div id="detailsDialog" v-if="step == 3">
            <iframe v-if="step == 3" height="400px" width="100%" :src="iframeSrc2"></iframe>
        </div>
    </el-dialog>
</template>

<script>
    import {
        delManySpace
    } from "@/api/scan/request";
    import equipTable from "@/components/business_space/table/equipTable";
    import addEquip from "@/components/business_space/table/addEquip";
    import {
        mapGetters,
        mapActions
    } from "vuex";
    export default {
        components: {
            equipTable,
            addEquip
        },
        computed: {
            ...mapGetters("peojMess", [
                "projectId",
                "secret",
                "userId"
            ])
        },
        props: {
            width: {
                type: String,
                default: "900px"
            },
            title: {
                type: String,
                default: "头部信息"
            },
            isShow: {
                type: Object
            },
            param: {
                type: Object
            },
            activeTabType: {
                type: Object,
                default: function() {
                    return {
                        "code": "GeneralZone",
                        "name": "默认分区",
                        "rel_type": "99"
                    }
                }
            }
        },
        data() {
            return {
                step: 1,
                data: null,
                proj: null,
                activeName: "1",
                list: {},
                iframeSrc: "",
                iframeSrc2: "",
                buildMess: ""
            };
        },
        created() {},
        methods: {
            handleClick() {},
            getData(list, buildMess) {
                this.step = 1;
                this.list = list;
                this.buildMess = buildMess;
                this.$nextTick(() => {
                    this.$refs.myEquip.getData(list, this.activeTabType);
                });
                let perjectId = this.projectId,
                    secret = this.secret;
                this.iframeSrc =
                    process.env.BASE_URL +
                    ":8889/#/details?perjectId=" +
                    perjectId +
                    "&secret=" +
                    secret +
                    "&FmId=" +
                    list.id +
                    "&type=0&code=" + this.activeTabType.code;
                this.iframeSrc2 =
                    process.env.BASE_URL +
                    ":8889/#/changeMess?perjectId=" +
                    perjectId +
                    "&secret=" +
                    secret +
                    "&id=" +
                    list.id +
                    "&type=" + this.activeTabType.code;
            },
            addMyEquip(str) {
                this.step = 2;
                this.$nextTick(() => {
                    console.log(this.activeTabType)
                    this.$refs.addEquip.getData(this.list, this.buildMess, str, this.activeTabType);
                });
            },
            goBack() {
                this.step = 1;
                this.$refs.myEquip.getData(this.list, this.activeTabType);
            },
            delSpace() {
                this.$confirm("此操作将永久删除该业务空间, 是否继续?", "删除", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        let param = {
                            ProjId: this.projectId,
                            secret: this.secret,
                            data: {
                                criteria: {
                                    ids: [this.list.id]
                                }
                            }
                        };
                        delManySpace(param)
                            .then(res => {
                                if (res.data.Result == "success") {
                                    this.$message({
                                        type: "success",
                                        message: "删除成功!"
                                    });
                                    this.$emit("del");
                                } else {
                                    this.$message.error(res.data.ResultMsg);
                                }
                            })
                            .catch(() => {
                                this.$message.error("请求发生错误");
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            }
        }
    };
</script>

<style lang="less">
    .el-dialog__header{
        .el-dropdown{
            font-size: 12px;
            line-height: 33px;
        }
    }
    #detailsDialog {
        .el-tabs__content {
            max-height: 400px;
        }
        .influence-p {
            height: 40px;
            line-height: 40px;
            font-size: 17px;
            margin-bottom: 10px;
        }
    }
</style>