addEquipDialog.vue 6.9 KB

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