addEquipDialog.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <template>
  2. <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" id="addEqDialog">
  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. <floor-cascader @change="changeFloor"></floor-cascader>
  11. </el-col>
  12. </el-row>
  13. <div class="table-box">
  14. <el-table :data="tableData" style="width: 100%" height="350" v-loading="loading" :header-cell-style="headerStyle"
  15. ref="multipleTable"
  16. @selection-change="handleSelectionChange">
  17. <el-table-column type="selection" width="55"></el-table-column>
  18. <el-table-column :label="`${inSpaceType}名称`" show-overflow-tooltip min-width="100">
  19. <template slot-scope="scope">
  20. <div>
  21. {{ scope.row.localName || scope.row.name|| '' }}
  22. </div>
  23. </template>
  24. </el-table-column>
  25. <el-table-column prop="localId" :label="`${inSpaceType}本地编码`" show-overflow-tooltip
  26. min-width="100"></el-table-column>
  27. <el-table-column prop="equipCategory.name" :label="`${inSpaceType}类`" show-overflow-tooltip
  28. min-width="100"></el-table-column>
  29. <el-table-column prop="ShaftListName" label="已关联其他竖井" show-overflow-tooltip min-width="100"
  30. max-width="200"></el-table-column>
  31. <el-table-column prop="action" label="操作" min-width="100">
  32. <template slot-scope="scope">
  33. <el-button size="mini" @click="toDetail(scope.$index, scope.row)" plain>查看详情</el-button>
  34. </template>
  35. </el-table-column>
  36. </el-table>
  37. <!-- 分页 -->
  38. <el-pagination class="fr" v-show="tableData && tableData.length" @size-change="handleSizeChange"
  39. @current-change="handleCurrentChange"
  40. :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize"
  41. layout="total, sizes, prev, pager, next, jumper"
  42. :total="page.total"></el-pagination>
  43. </div>
  44. <span slot="footer" class="dialog-footer">
  45. <el-button size="small" @click="dialogVisible = false">取 消</el-button>
  46. <el-button size="small" type="primary" @click="savaRelation">确 定</el-button>
  47. </span>
  48. </el-dialog>
  49. </template>
  50. <script>
  51. import { unshaftInEq, linkEqSh } from "@/api/scan/request";
  52. import floorCascader from "@/components/ledger/lib/floorCascader";
  53. import { mapGetters } from "vuex";
  54. export default {
  55. components: {
  56. floorCascader
  57. },
  58. computed: {
  59. ...mapGetters("layout", ["projectId"])
  60. },
  61. data() {
  62. return {
  63. title: "添加竖井内的设备",
  64. keycode: '', //输入查询条件
  65. Buildfloor: ['all'], // 选中的建筑楼层
  66. inSpaceType: '设备',
  67. dialogVisible: false,
  68. tableData: [],
  69. loading: false,
  70. selections: [], // 选中项
  71. page: {
  72. pageSize: 50,
  73. pageSizes: [10, 20, 50, 100],
  74. pageNumber: 1,
  75. total: 0
  76. },
  77. headerStyle: {
  78. backgroundColor: '#e1e4e5',
  79. color: '#2b2b2b',
  80. lineHeight: '30px'
  81. } // 列表样式
  82. };
  83. },
  84. props: {
  85. type: String, //选中的tab页
  86. params: Object //查看的竖井关系信息
  87. },
  88. created() {
  89. },
  90. methods: {
  91. //修改建筑楼层
  92. changeFloor(value) {
  93. this.Buildfloor = value
  94. this.getTableData()
  95. },
  96. // 显示弹窗
  97. showDialog() {
  98. this.dialogVisible = true
  99. this.page.pageNumber = 1
  100. this.tableData = []
  101. this.getTableData()
  102. },
  103. getTableData() {
  104. let params = {
  105. data: {
  106. cascade: [{ name: 'equipCategory' }, { name: 'shaftList' }],
  107. filters: `not equipId isNull`,
  108. orders: "createTime desc, equipId desc",
  109. pageNumber: this.page.pageNumber,
  110. pageSize: this.page.pageSize,
  111. },
  112. shaftId: this.params.ShaftID
  113. }
  114. if (this.Buildfloor[0] == "noKnow") {
  115. params.data.filters += `;buildingId isNull`
  116. } else if (this.Buildfloor[0] && this.Buildfloor[0] != "all") {
  117. params.data.filters += `;buildingId='${this.Buildfloor[0]}'`
  118. }
  119. if (this.Buildfloor[1] == "noKnow") {
  120. params.data.filters += `;floorId isNull`
  121. } else if (this.Buildfloor[1] && this.Buildfloor[1] != "all") {
  122. params.data.filters += `;floorId='${this.Buildfloor[1]}'`
  123. }
  124. if (this.keycode != '') {
  125. params.data.filters += `;name contain '${this.keycode}' or localName contain '${this.keycode}' or localId contain '${this.keycode}'`
  126. }
  127. unshaftInEq(params, res => {
  128. res.content.forEach(item => {
  129. item.ShaftListName = ""
  130. if (item.shaftList && item.shaftList.length) {
  131. item.ShaftListName = item.shaftList.map(shaft => {
  132. return shaft.localName ? shaft.localName : shaft.name
  133. }).join("、")
  134. }
  135. })
  136. this.tableData = res.content
  137. this.page.total = res.total
  138. })
  139. },
  140. //选中项修改
  141. handleSelectionChange(val) {
  142. this.selections = val;
  143. },
  144. savaRelation() {
  145. if (this.selections.length) {
  146. let params = {
  147. shaftId: this.params.ShaftID,
  148. equipIdList: this.selections.map(item => {
  149. return item.id
  150. })
  151. }
  152. linkEqSh(params, res => {
  153. this.dialogVisible = false
  154. this.$message.success('关联成功!')
  155. this.$emit('refresh')
  156. })
  157. } else {
  158. this.$message('请选择要关联的设备')
  159. }
  160. },
  161. //改变pagesize
  162. handleSizeChange(pageSize) {
  163. this.page.pageSize = pageSize;
  164. this.getTableData();
  165. },
  166. //改变pageno
  167. handleCurrentChange(pageNo) {
  168. this.page.pageNumber = pageNo;
  169. this.getTableData();
  170. },
  171. // 查看详情
  172. toDetail() {
  173. this.$message('开发中')
  174. }
  175. },
  176. };
  177. </script>
  178. <style lang="less" scoped>
  179. #addEqDialog {
  180. .filters {
  181. margin-bottom: 10px;
  182. /deep/ .el-input__inner {
  183. vertical-align: baseline;
  184. }
  185. }
  186. .table-box {
  187. height: 370px;
  188. .fr {
  189. margin-top: 10px;
  190. }
  191. }
  192. }
  193. </style>