addEquipDialog.vue 7.4 KB

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