unRelateBSP.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <template>
  2. <el-dialog
  3. :title="title"
  4. :visible.sync="dialogVisible"
  5. width="900px"
  6. id="unRelateBSP"
  7. >
  8. <el-row class="filters">
  9. <el-col :span="9">
  10. <el-input
  11. placeholder="输入业务空间名称进行查询"
  12. v-model="keycode"
  13. clearable
  14. @keyup.enter.native="getTableData"
  15. >
  16. <i
  17. slot="suffix"
  18. class="el-input__icon el-icon-search"
  19. @click="getTableData"
  20. ></i>
  21. </el-input>
  22. </el-col>
  23. <el-col :span="15">
  24. <span style="margin-left: 10px">所属楼层</span>
  25. <el-cascader
  26. @change="getTableData"
  27. v-model="floor"
  28. :options="options"
  29. :props="props"
  30. ></el-cascader>
  31. </el-col>
  32. </el-row>
  33. <div class="table-box">
  34. <el-table
  35. :data="tableData"
  36. style="width: 100%"
  37. height="100%"
  38. v-loading="loading"
  39. :header-cell-style="headerStyle"
  40. >
  41. <el-table-column
  42. :label="`${inSpaceType}名称`"
  43. show-overflow-tooltip
  44. min-width="100"
  45. >
  46. <template slot-scope="scope">
  47. <div>
  48. {{ scope.row.localName || scope.row.name || "" }}
  49. </div>
  50. </template>
  51. </el-table-column>
  52. <el-table-column
  53. prop="BNAME"
  54. label="所属建筑"
  55. show-overflow-tooltip
  56. min-width="100"
  57. ></el-table-column>
  58. <el-table-column
  59. prop="FNAME"
  60. label="所属楼层"
  61. show-overflow-tooltip
  62. min-width="100"
  63. ></el-table-column>
  64. <el-table-column
  65. prop="action"
  66. label="操作"
  67. min-width="100"
  68. v-if="isAction"
  69. >
  70. <template slot-scope="scope">
  71. <el-button
  72. size="mini"
  73. @click="createRelation(scope.row)"
  74. type="primary"
  75. plain
  76. >关联平面图</el-button
  77. >
  78. </template>
  79. </el-table-column>
  80. </el-table>
  81. <!-- 分页 -->
  82. <el-pagination
  83. class="fr"
  84. v-show="tableData && tableData.length"
  85. @size-change="handleSizeChange"
  86. @current-change="handleCurrentChange"
  87. :current-page="page.pageNumber"
  88. :page-sizes="page.pageSizes"
  89. :page-size="page.pageSize"
  90. layout="total, sizes, prev, pager, next, jumper"
  91. :total="page.total"
  92. ></el-pagination>
  93. </div>
  94. </el-dialog>
  95. </template>
  96. <script>
  97. import ScanController from "@/controller/old-adm/ScanController";
  98. export default {
  99. name: "unRelateBSP",
  100. data() {
  101. return {
  102. title: "未关联平面图的业务空间",
  103. inSpaceType: "业务空间",
  104. dialogVisible: false,
  105. loading: false,
  106. headerStyle: {
  107. backgroundColor: "#e1e4e5",
  108. color: "#2b2b2b",
  109. lineHeight: "30px",
  110. },
  111. keycode: "",
  112. tableData: [],
  113. page: {
  114. pageSize: 50,
  115. pageSizes: [10, 20, 50, 100],
  116. pageNumber: 1,
  117. total: 0,
  118. },
  119. floor: ["all"], // 级联建筑楼层
  120. props: {
  121. //自定义字段
  122. value: "id",
  123. label: "localName",
  124. children: "floor",
  125. },
  126. bfData: {}, //建筑楼层id =>名称
  127. options: [], //级联
  128. };
  129. },
  130. props: {
  131. isAction: false, //是否显示操作按钮
  132. code: String,
  133. },
  134. created() {
  135. this.getBuilding();
  136. },
  137. methods: {
  138. // 显示弹窗
  139. showDialog(buildFloor) {
  140. if (buildFloor) {
  141. this.floor = buildFloor;
  142. }
  143. this.dialogVisible = true;
  144. this.getTableData();
  145. },
  146. // 关联平面图
  147. createRelation(row) {
  148. this.$emit("createFromUnrelated", row);
  149. this.dialogVisible = false;
  150. },
  151. // 分页条数
  152. handleSizeChange(val) {
  153. this.page.pageSize = val;
  154. this.page.pageNumber = 1;
  155. this.getTableData();
  156. },
  157. // 页码
  158. handleCurrentChange(val) {
  159. this.page.pageNumber = val;
  160. this.getTableData();
  161. },
  162. // 获取项目下建筑
  163. async getBuilding() {
  164. let pa = {
  165. cascade: [{ name: "floor", orders: "floorSequenceID desc" }],
  166. orders: "localName asc",
  167. };
  168. let res = await ScanController.buildingQuery(pa);
  169. this.options = res.content.map((t) => {
  170. this.bfData[t.id] = t.localName;
  171. if (t.floor) {
  172. t.floor = t.floor.map((item) => {
  173. this.bfData[item.id] = item.localName;
  174. return item;
  175. });
  176. } else {
  177. t.floor = [];
  178. }
  179. t.floor.unshift(
  180. { id: "all", localName: "全部" },
  181. { id: "isNull", localName: "未明确楼层" }
  182. );
  183. return t;
  184. });
  185. this.options.unshift(
  186. { id: "all", localName: "全部" },
  187. { id: "isNull", localName: "未明确建筑" }
  188. );
  189. },
  190. // 查询未关联平面图的业务空间(项目下+当前分区)
  191. getTableData() {
  192. let pa = {
  193. zoneType: this.code,
  194. filters: `outline isNull`,
  195. orders: "createTime desc, id asc",
  196. pageSize: this.page.pageSize,
  197. pageNumber: this.page.pageNumber,
  198. };
  199. if (this.floor[0] == "isNull") {
  200. pa.buildingId = `isnull`;
  201. } else if (this.floor[0] && this.floor[0] != "all") {
  202. pa.buildingId = this.floor[0];
  203. }
  204. if (this.floor[1] == "isNull") {
  205. pa.floorId = `isnull`;
  206. } else if (this.floor[1] && this.floor[1] != "all") {
  207. pa.floorId = this.floor[1];
  208. }
  209. if (this.keycode != "") {
  210. pa.filters += `;localName contain "${this.keycode}" or name contain "${this.keycode}"`;
  211. }
  212. ScanController.zoneQuery(pa, (res) => {
  213. this.page.total = res.total;
  214. this.tableData = res.content.map((t) => {
  215. t.BNAME = this.bfData[t.buildingId];
  216. t.FNAME = this.bfData[t.floorId];
  217. return t;
  218. });
  219. });
  220. },
  221. },
  222. };
  223. </script>
  224. <style lang="less" scoped>
  225. #unRelateBSP {
  226. .filters {
  227. margin-bottom: 10px;
  228. /deep/ .el-input__inner {
  229. vertical-align: baseline;
  230. }
  231. }
  232. .table-box {
  233. height: 350px;
  234. }
  235. }
  236. </style>