ibms/src/components/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 Vue from "vue"
import {
  Dropdown,
  DropdownMenu,
  DropdownItem} from "element-ui"
Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)

import { delManySpace } from "@/api/scan/request";
import equipTable from "@/components/table/equipTable";
import addEquip from "@/components/table/addEquip";

export default {
  components: {
    equipTable,
    addEquip
  },
  props: {
    width: {
      type: String,
      default: "70%"
    },
    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.$route.query.projId,
        secret = this.$route.query.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.$route.query.projId,
            secret: this.$route.query.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">
#detailsDialog {
  .el-tabs__content {
    max-height: 400px;
  }
  .influence-p {
    height: 40px;
    line-height: 40px;
    font-size: 17px;
    margin-bottom: 10px;
  }
}
</style>