addSpaceDialog.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <template>
  2. <el-dialog :title="title" :visible.sync="dialog" :before-close="handleClose" width="900px" id="addEqDialog">
  3. <el-row class="filters">
  4. <el-col :span="7" style="width:268px;padding:0px;">
  5. <el-input style placeholder="输入业务空间名称、本地编码进行查询" v-model="keycode" clearable @keyup.enter.native="getTableData">
  6. <i slot="suffix" class="el-input__icon el-icon-search" @click="getTableData"></i>
  7. </el-input>
  8. </el-col>
  9. <el-col :span="8.5" style="padding:0 0;margin-left:-2px">
  10. <floor-cascader ref="floorcas" @change="changeFloor"></floor-cascader>
  11. </el-col>
  12. <el-col :span="7.5" style="padding:0 0;">
  13. <space-select ref="spacesel" @change="changeSpace"></space-select>
  14. </el-col>
  15. </el-row>
  16. <el-row class="filters" :gutter="20"></el-row>
  17. <div class="table-box">
  18. <el-table :data="tableData" style="width: 100%" height="350" v-loading="loading" :header-cell-style="headerStyle" ref="multipleTable"
  19. @selection-change="handleSelectionChange">
  20. <el-table-column type="selection" width="55"></el-table-column>
  21. <el-table-column :label="`${inSpaceType}本地名称`" show-overflow-tooltip min-width="100">
  22. <template slot-scope="scope">
  23. {{scope.row.RoomLocalName||scope.row.RoomName||''}}
  24. </template>
  25. </el-table-column>
  26. <el-table-column prop="localId" :label="`${inSpaceType}本地编码`" show-overflow-tooltip min-width="100"></el-table-column>
  27. <el-table-column prop :label="`所属建筑楼层`" show-overflow-tooltip min-width="100">
  28. <template slot-scope="scope">
  29. {{ scope.row.BuildingId && floorType[scope.row.BuildingId]? ((floorType[scope.row.BuildingId] || '') + (scope.row.FloorId && floorType[scope.row.FloorId] ? (' - ' + floorType[scope.row.FloorId] || '') : '')) : ''}}
  30. </template>
  31. </el-table-column>
  32. <el-table-column prop="ObjectType" :label="`空间类型`" show-overflow-tooltip min-width="100">
  33. <template slot-scope="scope">
  34. {{spaceType[scope.row.ObjectType] || ''}}
  35. </template>
  36. </el-table-column>
  37. <el-table-column prop="action" label="操作" min-width="100">
  38. <template slot-scope="scope">
  39. <el-button size="mini" @click="toDetail(scope.$index, scope.row)" plain>查看详情</el-button>
  40. </template>
  41. </el-table-column>
  42. </el-table>
  43. <!-- 分页 -->
  44. <el-pagination class="fr" v-show="tableData && tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
  45. :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
  46. :total="page.total"></el-pagination>
  47. </div>
  48. <span slot="footer" class="dialog-footer">
  49. <el-button size="small" @click="handleClose">取 消</el-button>
  50. <el-button size="small" type="primary" @click="savaRelation">确 定</el-button>
  51. </span>
  52. </el-dialog>
  53. </template>
  54. <script>
  55. import {
  56. unSysZoneSpace,
  57. linkSysSp,
  58. queryDictionaryHead
  59. } from "@/api/scan/request";
  60. import floorCascader from "@/components/ledger/lib/floorCascader";
  61. import dictionaryCas from "@/components/config_point/dictionaryCascader";
  62. import spaceSelect from "@/components/ledger/lib/spaceSelect";
  63. import { mapGetters } from "vuex";
  64. export default {
  65. components: {
  66. floorCascader,
  67. dictionaryCas,
  68. spaceSelect
  69. },
  70. computed: {
  71. ...mapGetters("layout", ["projectId"]),
  72. dialog() {
  73. return this.dialogVisible;
  74. }
  75. },
  76. data() {
  77. return {
  78. title: "添加系统所在业务空间",
  79. keycode: "", //输入查询条件
  80. inSpaceType: "业务空间",
  81. Buildfloor: ["all"], // 选中的建筑楼层
  82. Spacecategory: null, // 选中的业务空间类型
  83. tableData: [],
  84. floorData: {}, //楼层
  85. spaceData: {}, //业务空间分区
  86. loading: false,
  87. selections: [], // 选中项
  88. page: {
  89. pageSize: 50,
  90. pageSizes: [10, 20, 50, 100],
  91. pageNumber: 1,
  92. total: 0
  93. },
  94. headerStyle: {
  95. backgroundColor: "#e1e4e5",
  96. color: "#2b2b2b",
  97. lineHeight: "30px"
  98. } // 列表样式
  99. };
  100. },
  101. props: {
  102. type: String, //选中的tab页
  103. params: Object, //查看的竖井关系信息
  104. spaceType: Object,
  105. dialogVisible: Boolean,
  106. floorType: Object
  107. },
  108. mounted() { },
  109. methods: {
  110. // 显示弹窗
  111. showDialog() {
  112. this.dialogVisible = true;
  113. },
  114. //修改建筑楼层
  115. changeFloor(value) {
  116. this.Buildfloor = value;
  117. this.getTableData();
  118. },
  119. //修改空间类型
  120. changeSpace(value) {
  121. this.Spacecategory = value;
  122. this.getTableData();
  123. },
  124. getTableData() {
  125. let params = {
  126. data: {
  127. filters: "not id isNull",
  128. orders: "localName desc",
  129. pageNumber: this.page.pageNumber,
  130. pageSize: this.page.pageSize
  131. },
  132. shaftId: this.params.ShaftID,
  133. sysId: this.$route.query.SysID
  134. };
  135. if (this.Buildfloor[0] == "noKnow") {
  136. params.data.filters += `;buildingId isNull`;
  137. } else if (this.Buildfloor[0] && this.Buildfloor[0] != "all") {
  138. params.data.filters += `;buildingId='${this.Buildfloor[0]}'`;
  139. }
  140. if (this.Buildfloor[1] == "noKnow") {
  141. params.data.filters += `;floorId isNull`;
  142. } else if (this.Buildfloor[1] && this.Buildfloor[1] != "all") {
  143. params.data.filters += `;floorId='${this.Buildfloor[1]}'`;
  144. }
  145. if (this.Spacecategory) {
  146. params.data.filters += `;objectType='${this.Spacecategory}'`;
  147. }
  148. if (this.keycode != "") {
  149. params.data.filters += `;name contain '${this.keycode}' or localName contain '${this.keycode}'`;
  150. }
  151. unSysZoneSpace(params, res => {
  152. this.tableData = res.content;
  153. this.page.total = res.total;
  154. });
  155. },
  156. handleClose() {
  157. this.$emit("update:dialogVisible", false);
  158. },
  159. //选中项修改
  160. handleSelectionChange(val) {
  161. this.selections = val;
  162. },
  163. savaRelation() {
  164. if (this.selections.length) {
  165. let params = {
  166. Content: this.selections.map(item => {
  167. return {
  168. SpaceID: item.RoomID,
  169. SysID: this.$route.query.SysID,
  170. ObjectType: item.ObjectType
  171. };
  172. })
  173. };
  174. linkSysSp(params, res => {
  175. this.$message.success("关联成功!");
  176. this.$emit("refresh");
  177. });
  178. } else {
  179. this.$message("请选择要关联的设备");
  180. }
  181. },
  182. //改变pagesize
  183. handleSizeChange(pageSize) {
  184. this.page.pageSize = pageSize;
  185. this.getTableData();
  186. },
  187. //改变pageno
  188. handleCurrentChange(pageNo) {
  189. this.page.pageNumber = pageNo;
  190. this.getTableData();
  191. },
  192. // 查看详情
  193. toDetail() {
  194. this.$message("开发中");
  195. }
  196. },
  197. watch: {
  198. dialogVisible: {
  199. handler() {
  200. if (this.dialogVisible) {
  201. this.page.pageNumber = 1;
  202. this.tableData = [];
  203. this.getTableData();
  204. }
  205. },
  206. immediate: true
  207. }
  208. }
  209. };
  210. </script>
  211. <style lang="less" scoped>
  212. #addEqDialog {
  213. .filters {
  214. margin: 0 0 10px 0;
  215. }
  216. .table-box {
  217. height: 370px;
  218. .fr {
  219. margin-top: 10px;
  220. }
  221. }
  222. }
  223. </style>