unRelateBSP.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" id="unRelateBSP">
  3. <el-row class="filters">
  4. <el-col :span="9">
  5. <el-input 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="15">
  10. <span style="margin-left:10px;">所属楼层</span>
  11. <el-cascader @change="getTableData" v-model="floor" :options="options" :props="props"></el-cascader>
  12. </el-col>
  13. </el-row>
  14. <div class="table-box">
  15. <el-table :data="tableData" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="headerStyle">
  16. <el-table-column :label="`${inSpaceType}名称`" show-overflow-tooltip min-width="100">
  17. <template slot-scope="scope">
  18. <div>
  19. {{scope.row.RoomLocalName||scope.row.RoomName||''}}
  20. </div>
  21. </template>
  22. </el-table-column>
  23. <el-table-column prop="BNAME" label="所属建筑" show-overflow-tooltip min-width="100"></el-table-column>
  24. <el-table-column prop="FNAME" label="所属楼层" show-overflow-tooltip min-width="100"></el-table-column>
  25. <el-table-column prop="action" label="操作" min-width="100" v-if="isAction">
  26. <template slot-scope="scope">
  27. <el-button size="mini" @click="createRelation(scope.row)" type="primary" plain>关联平面图</el-button>
  28. </template>
  29. </el-table-column>
  30. </el-table>
  31. <!-- 分页 -->
  32. <el-pagination class="fr" v-show="tableData && tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
  33. :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
  34. :total="page.total"></el-pagination>
  35. </div>
  36. </el-dialog>
  37. </template>
  38. <script>
  39. import {
  40. buildingQuery,
  41. queryZone
  42. } from "@/api/scan/request"
  43. export default {
  44. name: "unRelateBSP",
  45. data() {
  46. return {
  47. title: '未关联平面图的业务空间',
  48. inSpaceType: '业务空间',
  49. dialogVisible: false,
  50. loading: false,
  51. headerStyle: {
  52. backgroundColor: '#e1e4e5',
  53. color: '#2b2b2b',
  54. lineHeight: '30px'
  55. },
  56. keycode: '',
  57. tableData: [],
  58. page: {
  59. pageSize: 50,
  60. pageSizes: [10, 20, 50, 100],
  61. pageNumber: 1,
  62. total: 0
  63. },
  64. floor: ['all'], // 级联建筑楼层
  65. props: { //自定义字段
  66. value: "BuildID",
  67. label: "BuildLocalName",
  68. children: "Floor"
  69. },
  70. bfData: {}, //建筑楼层id =>名称
  71. options: [], //级联
  72. };
  73. },
  74. props: {
  75. isAction: false, //是否显示操作按钮
  76. code: String
  77. },
  78. created() {
  79. this.getBuilding()
  80. },
  81. methods: {
  82. // 显示弹窗
  83. showDialog() {
  84. this.dialogVisible = true;
  85. this.getTableData();
  86. },
  87. // 关联平面图
  88. createRelation(row) {
  89. this.$emit('createFromUnrelated', row);
  90. this.dialogVisible = false;
  91. },
  92. // 分页条数
  93. handleSizeChange(val) {
  94. this.page.pageSize = val;
  95. this.page.pageNumber = 1;
  96. this.getTableData();
  97. },
  98. // 页码
  99. handleCurrentChange(val) {
  100. this.page.pageNumber = val;
  101. this.getTableData();
  102. },
  103. // 获取项目下建筑
  104. getBuilding() {
  105. let pa = {
  106. Cascade: [{ name: 'floor', Orders: 'SequenceId desc' }],
  107. Orders: "BuildLocalName asc",
  108. }
  109. buildingQuery(pa, res => {
  110. this.options = res.Content.map(t => {
  111. this.bfData[t.BuildID] = t.BuildLocalName;
  112. if (t.Floor) {
  113. t.Floor = t.Floor.map(item => {
  114. this.bfData[item.FloorID] = item.FloorLocalName;
  115. item.BuildID = item.FloorID;
  116. item.BuildLocalName = item.FloorLocalName;
  117. return item;
  118. })
  119. } else {
  120. t.Floor = []
  121. }
  122. t.Floor.unshift({ BuildID: 'all', BuildLocalName: '全部' }, { BuildID: 'isNull', BuildLocalName: '未明确楼层' })
  123. return t;
  124. })
  125. this.options.unshift({ BuildID: 'all', BuildLocalName: '全部' }, { BuildID: 'isNull', BuildLocalName: '未明确建筑' })
  126. })
  127. },
  128. // 查询未关联平面图的业务空间(项目下+当前分区)
  129. getTableData() {
  130. let pa = {
  131. zone: this.code,
  132. data: {
  133. Filters: `Outline isNull`,
  134. Orders: "createTime desc, RoomID asc",
  135. PageSize: this.page.pageSize,
  136. pageNumber: this.page.pageNumber
  137. }
  138. }
  139. if (this.floor[0] == 'isNull') {
  140. pa.data.Filters += `;BuildingId isNull`
  141. } else if (this.floor[0] && this.floor[0] != 'all') {
  142. pa.data.Filters += `;BuildingId='${this.floor[0]}'`
  143. }
  144. if (this.floor[1] == 'isNull') {
  145. pa.data.Filters += `;FloorId isNull`
  146. } else if (this.floor[1] && this.floor[1] != 'all') {
  147. pa.data.Filters += `;FloorId='${this.floor[1]}'`
  148. }
  149. if (this.keycode != '') {
  150. pa.data.Filters += `;RoomLocalName contain "${this.keycode}" or RoomName contain "${this.keycode}"`
  151. }
  152. queryZone(pa, res => {
  153. this.page.total = res.Total;
  154. this.tableData = res.Content.map(t => {
  155. t.BNAME = this.bfData[t.BuildingId];
  156. t.FNAME = this.bfData[t.FloorId];
  157. return t;
  158. })
  159. })
  160. }
  161. },
  162. };
  163. </script>
  164. <style lang="less" scoped>
  165. #unRelateBSP {
  166. .filters {
  167. margin-bottom: 10px;
  168. /deep/ .el-input__inner {
  169. vertical-align: baseline;
  170. }
  171. }
  172. .table-box {
  173. height: 350px;
  174. }
  175. }
  176. </style>