addCenoteDialog.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <template>
  2. <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" id="addEqDialog">
  3. <el-row class="filters">
  4. <el-col :span="7" style="width:268px">
  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="7.5">
  10. <cenote-type @change="changeCenote"></cenote-type>
  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" ref="multipleTable"
  15. @selection-change="handleSelectionChange">
  16. <el-table-column type="selection" width="55"></el-table-column>
  17. <el-table-column :label="`${inSpaceType}名称`" show-overflow-tooltip min-width="100">
  18. <template slot-scope="scope">
  19. <div>
  20. {{scope.row.ShaftLocalName||scope.row.ShaftName||''}}
  21. </div>
  22. </template>
  23. </el-table-column>
  24. <el-table-column prop="ShaftLocalID" :label="`${inSpaceType}本地编码`" show-overflow-tooltip min-width="100"></el-table-column>
  25. <el-table-column prop="StructureInfo.ShaftFuncType" :label="`${inSpaceType}类`" show-overflow-tooltip min-width="100"></el-table-column>
  26. <el-table-column prop="action" label="操作" min-width="100">
  27. <template slot-scope="scope">
  28. <el-button size="mini" @click="toDetail(scope.$index, scope.row)" 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" @current-change="handleCurrentChange"
  34. :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
  35. :total="page.total"></el-pagination>
  36. </div>
  37. <span slot="footer" class="dialog-footer">
  38. <el-button size="small" @click="dialogVisible = false">取 消</el-button>
  39. <el-button size="small" type="primary" @click="savaRelation">确 定</el-button>
  40. </span>
  41. </el-dialog>
  42. </template>
  43. <script>
  44. import { unSysShaft, queryShaftType, linkSysSh } from "@/api/scan/request";
  45. import cenoteType from "@/components/ledger/lib/cenoteType";
  46. import { mapGetters } from "vuex";
  47. export default {
  48. components: {
  49. cenoteType
  50. },
  51. computed: {
  52. ...mapGetters("layout", ["projectId"])
  53. },
  54. data() {
  55. return {
  56. title: "添加系统所在竖井",
  57. keycode: '', //输入查询条件
  58. cenoteType: '', // 选中的竖井类型
  59. shaftType: {}, //全部竖井类型
  60. inSpaceType: '竖井',
  61. dialogVisible: false,
  62. tableData: [],
  63. loading: false,
  64. selections: [], // 选中项
  65. page: {
  66. pageSize: 50,
  67. pageSizes: [10, 20, 50, 100],
  68. pageNumber: 1,
  69. total: 0
  70. },
  71. headerStyle: {
  72. backgroundColor: '#e1e4e5',
  73. color: '#2b2b2b',
  74. lineHeight: '30px'
  75. } // 列表样式
  76. };
  77. },
  78. props: {
  79. type: String, //选中的tab页
  80. params: Object //查看的竖井关系信息
  81. },
  82. created() {
  83. queryShaftType(res => {
  84. res.Content.forEach(item => {
  85. this.shaftType[item.Code] = item.Name
  86. })
  87. })
  88. },
  89. methods: {
  90. //修改竖井类型
  91. changeCenote(value) {
  92. this.cenoteType = value.Id
  93. this.getTableData()
  94. },
  95. // 显示弹窗
  96. showDialog() {
  97. this.dialogVisible = true
  98. this.page.pageNumber = 1
  99. this.tableData = []
  100. this.getTableData()
  101. },
  102. getTableData() {
  103. let params = {
  104. data: {
  105. Filters: this.cenoteType ? `ProjectId='${this.projectId}';structureInfo.ShaftFuncType='${this.cenoteType}'` : `ProjectId='${this.projectId}'`,
  106. Orders: "createTime desc, ShaftID asc",
  107. PageNumber: this.page.pageNumber,
  108. PageSize: this.page.pageSize,
  109. },
  110. shaftId: this.params.ShaftID,
  111. sysId: this.$route.query.SysID
  112. }
  113. if (this.keycode != '') {
  114. params.data.Filters += `;ShaftName contain '${this.keycode}' or ShaftLocalName contain '${this.keycode}' or ShaftLocalID contain '${this.keycode}'`
  115. }
  116. unSysShaft(params, res => {
  117. this.tableData = res.Content
  118. this.tableData.forEach(item => {
  119. if (item.StructureInfo && item.StructureInfo.ShaftFuncType) {
  120. item.StructureInfo.ShaftFuncType = this.shaftType[item.StructureInfo.ShaftFuncType]
  121. }
  122. })
  123. this.page.total = res.Total
  124. })
  125. },
  126. //选中项修改
  127. handleSelectionChange(val) {
  128. this.selections = val;
  129. },
  130. savaRelation() {
  131. if (this.selections.length) {
  132. let params = {
  133. SysId: this.$route.query.SysID,
  134. ShaftIdList: this.selections.map(item => {
  135. return item.ShaftID
  136. })
  137. }
  138. linkSysSh(params, res => {
  139. this.dialogVisible = false
  140. this.$message.success('关联成功!')
  141. this.$emit('refresh')
  142. })
  143. } else {
  144. this.$message('请选择要关联的设备')
  145. }
  146. },
  147. //改变pagesize
  148. handleSizeChange(pageSize) {
  149. this.page.pageSize = pageSize;
  150. this.getTableData();
  151. },
  152. //改变pageno
  153. handleCurrentChange(pageNo) {
  154. this.page.pageNumber = pageNo;
  155. this.getTableData();
  156. },
  157. // 查看详情
  158. toDetail() {
  159. this.$message('开发中')
  160. }
  161. },
  162. };
  163. </script>
  164. <style lang="less" scoped>
  165. #addEqDialog {
  166. .filters {
  167. margin-bottom: 10px;
  168. /deep/ .el-input__inner {
  169. vertical-align: baseline;
  170. }
  171. }
  172. .table-box {
  173. height: 370px;
  174. .fr {
  175. margin-top: 10px;
  176. }
  177. }
  178. }
  179. </style>