relatedSpaceList.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <template>
  2. <div id="relatedSpaceList" style="height:100%;">
  3. <div class="query">
  4. <el-input v-model="keyword" placeholder="请输入关键词" @keyup.enter.native="getSpaceList" style="width:240px;margin:0 0;">
  5. <i slot="suffix" class="el-input__icon el-icon-search" @click="getSpaceList"></i>
  6. </el-input>
  7. <label style="line-height:32px;padding: 0 10px;">所属建筑楼层:</label>
  8. <el-cascader v-model="Buildfloor" :options="buildingData" @change="handleChange"></el-cascader>
  9. </div>
  10. <div class="table-area" style="height:calc(100% - 52px)">
  11. <el-table :data="tableData" style="width: 100%;height:calc(100% - 48px);" v-loading="loading" :header-cell-style="headerStyle">
  12. <el-table-column label='业务空间建筑楼层' show-overflow-tooltip min-width="200" header-align='center' align="center">
  13. <template slot-scope="scope">
  14. {{ scope.row.BuildingId && floorType[scope.row.BuildingId]? ((floorType[scope.row.BuildingId] || '') + (scope.row.FloorId && floorType[scope.row.FloorId] ? (' - ' + floorType[scope.row.FloorId] || '') : '')) : ''}}
  15. </template>
  16. </el-table-column>
  17. <el-table-column label='业务空间类型' show-overflow-tooltip min-width="200" header-align='center' align="center">
  18. <template slot-scope="scope">
  19. {{spaceType[scope.row.ObjectType] || ''}}
  20. </template>
  21. </el-table-column>
  22. <el-table-column prop='RoomLocalName' label='业务空间本地名称' show-overflow-tooltip min-width="200" header-align='center' align="center">
  23. </el-table-column>
  24. <el-table-column prop='localId' label='业务空间本地编码' show-overflow-tooltip min-width="200" header-align='center' align="center">
  25. </el-table-column>
  26. <el-table-column v-if="!$route.query.onlyRead" prop='' label='操作' show-overflow-tooltip min-width="90" header-align='center' align='center'>
  27. <template slot-scope="scope">
  28. <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger" plain icon="el-icon-delete"></el-button>
  29. </template>
  30. </el-table-column>
  31. </el-table>
  32. <!-- 分页 -->
  33. <el-pagination @size-change="getSpaceList" @current-change="getSpaceList" :current-page="currentPage" :page-sizes="pageSizes"
  34. :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" style="float:right;padding:20px 20px 0 0;">
  35. </el-pagination>
  36. </div>
  37. </div>
  38. </template>
  39. <script>
  40. import { shaftSpaceQuery, spaceInShaftUnlink } from "@/api/scan/request";
  41. export default {
  42. data() {
  43. return {
  44. //表格头样式
  45. headerStyle: {
  46. backgroundColor: '#e1e4e5',
  47. color: '#2b2b2b',
  48. lineHeight: '30px'
  49. },
  50. pageSizes: [10, 20, 50, 100],
  51. pageSize: 50,
  52. currentPage: 1,
  53. keyword: '',//关键词
  54. floor: '',//当前楼层
  55. tableData: [],//表格数据
  56. loading: false,//加载
  57. Buildfloor: ["all"],//当前选中的楼层
  58. page: {
  59. pageSize: 50,
  60. pageSizes: [10, 20, 50, 100],
  61. pageNumber: 1,
  62. total: 0
  63. },
  64. buildingData: [],//楼层数据
  65. }
  66. },
  67. components: {
  68. },
  69. methods: {
  70. //空间列表
  71. getSpaceList() {
  72. this.loading = true;
  73. let params = {
  74. data: {
  75. Filters: "not RoomID isNull",
  76. Orders: "localName desc",
  77. PageNumber: this.page.pageNumber,
  78. PageSize: this.page.pageSize
  79. },
  80. ShaftId: this.$route.query.ShaftId
  81. };
  82. if (this.Buildfloor[0] == "noKnow") {
  83. params.data.Filters += `;buildingId isNull`;
  84. } else if (this.Buildfloor[0] && this.Buildfloor[0] != "all") {
  85. params.data.Filters += `;buildingId='${this.Buildfloor[0]}'`;
  86. }
  87. if (this.Buildfloor[1] == "noKnow") {
  88. params.data.Filters += `;floorId isNull`;
  89. } else if (this.Buildfloor[1] && this.Buildfloor[1] != "all") {
  90. params.data.Filters += `;floorId='${this.Buildfloor[1]}'`;
  91. }
  92. if (this.space) {
  93. params.data.Filters += `;ObjectType='${this.space}'`;
  94. }
  95. if (this.keyword) {
  96. params.data.Filters += `;RoomName contain '${this.keyword}' or RoomLocalName contain '${this.keyword}'`;
  97. }
  98. shaftSpaceQuery(params, res => {
  99. this.loading = false;
  100. this.tableData = res.Content
  101. })
  102. },
  103. //切换楼层
  104. handleChange() {
  105. this.getSpaceList();
  106. },
  107. // 删除关系
  108. handleDelete(index, row) {
  109. this.$confirm("确认删除该关系?", "提示", {
  110. confirmButtonText: "确定",
  111. cancelButtonText: "取消",
  112. type: "warning"
  113. })
  114. .then(() => {
  115. let params = {
  116. data: [
  117. {
  118. ShaftId: this.$route.query.ShaftId,
  119. SpaceId: row.RoomID
  120. }
  121. ],
  122. type: row.ObjectType
  123. };
  124. this.deleteSpInSh(params);
  125. })
  126. .catch(() => {
  127. this.$message("取消删除");
  128. });
  129. },
  130. // 删除系统所在竖井关系
  131. deleteSpInSh(params) {
  132. spaceInShaftUnlink(params, res => {
  133. this.$message.success("删除成功");
  134. this.getSpaceList();
  135. });
  136. },
  137. //楼层
  138. setFloorData(val) {
  139. if (val && val.length) {
  140. let bL = val.concat();
  141. bL.map(item => {
  142. item.value = item.BuildID;
  143. item.label = item.BuildLocalName;
  144. item.children = [];
  145. if (item.Floor instanceof Array) {
  146. item.children = item.Floor.map(fitem => {
  147. fitem.value = fitem.FloorID
  148. fitem.label = fitem.FloorLocalName
  149. return fitem
  150. })
  151. }
  152. if (!this.$route.query.onlyRead) {
  153. item.children.unshift({
  154. value: "noKnow",
  155. label: "未明确建筑"
  156. })
  157. }
  158. item.children.unshift({
  159. value: "all",
  160. label: "全部"
  161. })
  162. });
  163. if (!this.$route.query.onlyRead) {
  164. bL.unshift({
  165. value: "all",
  166. label: "全部"
  167. }, {
  168. value: "noKnow",
  169. label: "未明确建筑"
  170. });
  171. }
  172. this.buildingData = bL;
  173. }
  174. else {
  175. this.buildingData = [];
  176. }
  177. }
  178. },
  179. props: {
  180. space: '',//空间id
  181. buildingList: {//建筑楼层
  182. Type: Array,
  183. default: []
  184. },
  185. spaceType: Object,
  186. floorType: Object
  187. },
  188. watch: {
  189. space: {
  190. handler() {
  191. this.getSpaceList();
  192. },
  193. immediate: true
  194. }
  195. }
  196. }
  197. </script>
  198. <style lang="less" scoped>
  199. .query {
  200. padding: 10px 0px;
  201. }
  202. #relatedSpaceList {
  203. /deep/ .el-scrollbar__wrap {
  204. overflow-x: hidden;
  205. }
  206. /deep/ .el-table__body-wrapper{
  207. overflow-x:hidden;
  208. overflow-y:auto;
  209. height:calc(100% - 47px);
  210. width:100%;
  211. }
  212. }
  213. </style>