addEquipDialog.vue 6.8 KB

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