detailsDialog.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <template>
  2. <el-dialog :visible.sync="isShow.details" :width="width">
  3. <span slot="title">
  4. <span v-show="step == 1">{{title}}</span>
  5. <span v-show="step == 2 || step == 3">
  6. <el-button type="text" @click="goBack" icon="el-icon-arrow-left"></el-button>
  7. </span>
  8. </span>
  9. <div id="detailsDialog" v-show="step == 1">
  10. <p class="influence-p">{{list.name}}</p>
  11. <el-tabs type="border-card">
  12. <el-tab-pane label="空间详情">
  13. <div class="saga-details">
  14. <iframe height="400px" v-if="isShow.details" width="100%" :src="iframeSrc"></iframe>
  15. </div>
  16. </el-tab-pane>
  17. <el-tab-pane label="与空间相关联的设备">
  18. <div>
  19. <equip-table ref="myEquip"></equip-table>
  20. </div>
  21. </el-tab-pane>
  22. </el-tabs>
  23. </div>
  24. <div v-show="step == 2">
  25. <add-equip :activeTabType="activeTabType" ref="addEquip"></add-equip>
  26. </div>
  27. <div id="detailsDialog" v-if="step == 3">
  28. <iframe v-if="step == 3" height="400px" width="100%" :src="iframeSrc2"></iframe>
  29. </div>
  30. <div v-show="step == 1" style="line-height: 50px;">
  31. <el-button @click="step = 3">编辑信息</el-button>
  32. <el-button type="danger" @click="delSpace" plain>删除该业务空间</el-button>
  33. <el-dropdown style="margin-left: 10px;" :hide-on-click="false" @command="addMyEquip">
  34. <span class="el-dropdown-link">
  35. 添加设备<i class="el-icon-arrow-down el-icon--right"></i>
  36. </span>
  37. <el-dropdown-menu slot="dropdown">
  38. <el-dropdown-item command="EquipinSpace">空间内的设备</el-dropdown-item>
  39. <el-dropdown-item command="EquipforSpace">服务于空间的设备</el-dropdown-item>
  40. <el-dropdown-item command="EquipXSpace">其他关系的设备</el-dropdown-item>
  41. </el-dropdown-menu>
  42. </el-dropdown>
  43. </div>
  44. </el-dialog>
  45. </template>
  46. <script>
  47. import {
  48. delManySpace
  49. } from "@/api/scan/request";
  50. import equipTable from "@/components/business_space/table/equipTable";
  51. import addEquip from "@/components/business_space/table/addEquip";
  52. import {
  53. mapGetters,
  54. mapActions
  55. } from "vuex";
  56. export default {
  57. components: {
  58. equipTable,
  59. addEquip
  60. },
  61. computed: {
  62. ...mapGetters("layout", [
  63. "projectId",
  64. "secret",
  65. "userId"
  66. ])
  67. },
  68. props: {
  69. width: {
  70. type: String,
  71. default: "1200px"
  72. },
  73. title: {
  74. type: String,
  75. default: "头部信息"
  76. },
  77. isShow: {
  78. type: Object
  79. },
  80. param: {
  81. type: Object
  82. },
  83. activeTabType: {
  84. type: Object,
  85. default: function() {
  86. return {
  87. "code": "GeneralZone",
  88. "name": "默认分区",
  89. "rel_type": "99"
  90. }
  91. }
  92. }
  93. },
  94. data() {
  95. return {
  96. step: 1,
  97. data: null,
  98. proj: null,
  99. activeName: "1",
  100. list: {},
  101. iframeSrc: "",
  102. iframeSrc2: "",
  103. buildMess: ""
  104. };
  105. },
  106. created() {},
  107. methods: {
  108. handleClick() {},
  109. getData(list, buildMess) {
  110. this.step = 1;
  111. this.list = list;
  112. this.buildMess = buildMess;
  113. this.$nextTick(() => {
  114. this.$refs.myEquip.getData(list, this.activeTabType);
  115. });
  116. let perjectId = this.projectId,
  117. secret = this.secret;
  118. this.iframeSrc =
  119. process.env.BASE_URL +
  120. ":8889/#/details?perjectId=" +
  121. perjectId +
  122. "&secret=" +
  123. secret +
  124. "&FmId=" +
  125. list.id +
  126. "&type=0&code=" + this.activeTabType.code;
  127. this.iframeSrc2 =
  128. process.env.BASE_URL +
  129. ":8889/#/changeMess?perjectId=" +
  130. perjectId +
  131. "&secret=" +
  132. secret +
  133. "&id=" +
  134. list.id +
  135. "&type=" + this.activeTabType.code;
  136. },
  137. addMyEquip(str) {
  138. this.step = 2;
  139. this.$nextTick(() => {
  140. console.log(this.activeTabType)
  141. this.$refs.addEquip.getData(this.list, this.buildMess, str, this.activeTabType);
  142. });
  143. },
  144. goBack() {
  145. this.step = 1;
  146. this.$refs.myEquip.getData(this.list, this.activeTabType);
  147. },
  148. delSpace() {
  149. this.$confirm("此操作将永久删除该业务空间, 是否继续?", "删除", {
  150. confirmButtonText: "确定",
  151. cancelButtonText: "取消",
  152. type: "warning"
  153. })
  154. .then(() => {
  155. let param = {
  156. ProjId: this.projectId,
  157. secret: this.secret,
  158. data: {
  159. criteria: {
  160. ids: [this.list.id]
  161. }
  162. }
  163. };
  164. delManySpace(param)
  165. .then(res => {
  166. if (res.data.Result == "success") {
  167. this.$message({
  168. type: "success",
  169. message: "删除成功!"
  170. });
  171. this.$emit("del");
  172. } else {
  173. this.$message.error(res.data.ResultMsg);
  174. }
  175. })
  176. .catch(() => {
  177. this.$message.error("请求发生错误");
  178. });
  179. })
  180. .catch(() => {
  181. this.$message({
  182. type: "info",
  183. message: "已取消删除"
  184. });
  185. });
  186. }
  187. }
  188. };
  189. </script>
  190. <style lang="less">
  191. .el-dialog__header{
  192. .el-dropdown{
  193. font-size: 12px;
  194. line-height: 33px;
  195. }
  196. }
  197. #detailsDialog {
  198. .el-tabs__content {
  199. max-height: 400px;
  200. }
  201. .influence-p {
  202. height: 40px;
  203. line-height: 40px;
  204. font-size: 17px;
  205. margin-bottom: 10px;
  206. }
  207. }
  208. </style>