unRelateBSP.vue 5.6 KB

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