addEquipDialog.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  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. <span style="margin-left:10px;">所属楼层</span>
  11. <el-cascader @change="getTableData" v-model="floor" :options="options" :props="props"></el-cascader>
  12. <el-checkbox style="margin-left:10px;" @change="getTableData" v-model="showType" label="只显示在当前业务空间中的设备"></el-checkbox>
  13. </el-col>
  14. </el-row>
  15. <div class="table-box">
  16. <el-table :data="tableData" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="headerStyle" ref="multipleTable"
  17. @selection-change="handleSelectionChange">
  18. <el-table-column type="selection" width="55"></el-table-column>
  19. <el-table-column :label="`${inSpaceType}名称`" show-overflow-tooltip min-width="100">
  20. <template slot-scope="scope">
  21. <div>
  22. {{scope.row.localName||scope.row.name||''}}
  23. </div>
  24. </template>
  25. </el-table-column>
  26. <el-table-column prop="localId" :label="`${inSpaceType}本地编码`" show-overflow-tooltip min-width="100"></el-table-column>
  27. <el-table-column prop="equipCategory.name" :label="`${inSpaceType}类`" show-overflow-tooltip min-width="100"></el-table-column>
  28. <el-table-column prop="linkOtherSpace" label="已关联其他业务空间" show-overflow-tooltip min-width="100"></el-table-column>
  29. <el-table-column prop="action" label="操作" min-width="100">
  30. <template slot-scope="scope">
  31. <el-button size="mini" @click="toDetail(scope.$index, scope.row)" type="primary" plain>查看详情</el-button>
  32. </template>
  33. </el-table-column>
  34. </el-table>
  35. <!-- 分页 -->
  36. <el-pagination class="fr" v-show="tableData && tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
  37. :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
  38. :total="page.total"></el-pagination>
  39. </div>
  40. <span slot="footer" class="dialog-footer">
  41. <el-button size="small" @click="dialogVisible = false">取 消</el-button>
  42. <el-button size="small" type="primary" @click="savaRelation">确 定</el-button>
  43. </span>
  44. </el-dialog>
  45. </template>
  46. <script>
  47. import {
  48. getSpaceEquip,
  49. // buildingQuery, //数据中心-建筑查询
  50. notEqInSpaceQuery, //没有和当前空间绑定的设备
  51. notEqForSpaceQuery, //未服务当前空间的设备
  52. eqInSpaceCreate, //设备所在业务空间--创建关系
  53. eqForSpaceCreate, //设备服务业务空间--创建关系
  54. getEqNotInSpace, //空间内没有和空间关联的设备
  55. getEqNotForSpace, //空间内没有服务空间的设备
  56. } from "@/api/scan/request";
  57. import { mapGetters } from "vuex";
  58. import { buildingQuery } from '@/api/object/build';
  59. export default {
  60. components: {
  61. },
  62. computed: {
  63. ...mapGetters("layout", ["projectId"])
  64. },
  65. data() {
  66. return {
  67. title: "添加设备",
  68. keycode: '', //输入查询条件
  69. options: [], //建筑楼层级联
  70. floor: [], // 选中的建筑楼层
  71. showType: false, //是否只显示在当前业务空间中的设备
  72. inSpaceType: '设备',
  73. dialogVisible: false,
  74. tableData: [],
  75. loading: false,
  76. headerStyle: {
  77. backgroundColor: '#e1e4e5',
  78. color: '#2b2b2b',
  79. lineHeight: '30px'
  80. }, // 列表样式
  81. selections: [], // 选中项
  82. page: {
  83. pageSize: 50,
  84. pageSizes: [10, 20, 50, 100],
  85. pageNumber: 1,
  86. total: 0
  87. },
  88. props: { //自定义字段
  89. value: "id",
  90. label: "localName",
  91. children: "floor"
  92. },
  93. };
  94. },
  95. props: {
  96. type: {}, //Equipment--EquipmentFor
  97. spaceId: {},
  98. zone: {}, //分区类型
  99. },
  100. created() {
  101. this.getBuilding();
  102. },
  103. methods: {
  104. // 获取项目下建筑
  105. getBuilding() {
  106. let pa = {
  107. cascade: [{ name: 'floor', orders: 'floorSequenceID desc' }],
  108. orders: "localName asc",
  109. }
  110. buildingQuery(pa, res => {
  111. this.options = res.content.map(t => {
  112. if (t.floor) {
  113. t.floor = t.floor.map(item => {
  114. return item;
  115. })
  116. } else {
  117. t.floor = []
  118. }
  119. t.floor.unshift({ id: 'all', localName: '全部' }, { id: 'isNull', localName: '未明确楼层' })
  120. return t;
  121. })
  122. this.options.unshift({ id: 'all', localName: '全部' }, { id: 'isNull', localName: '未明确楼层' })
  123. })
  124. },
  125. // 显示弹窗
  126. showDialog() {
  127. this.dialogVisible = true;
  128. this.tableData = [];
  129. this.getTableData();
  130. },
  131. // 获取列表数据
  132. getTableData() {
  133. this.loading = true
  134. let pa = {
  135. data: {
  136. cascade: [{ name: "equipCategory" }],
  137. filters: '',
  138. pageNumber: this.page.pageNumber,
  139. pageSize: this.page.pageSize,
  140. orders: 'id asc'
  141. },
  142. type: this.zone,
  143. spaceId: this.spaceId
  144. }
  145. if (this.floor[0] == 'isNull') {
  146. pa.data.filters += `buildingId isNull`
  147. } else if (this.floor[0] && this.floor[0] != 'all') {
  148. pa.data.filters += `buildingId='${this.floor[0]}'`
  149. }
  150. if (this.floor[1] == 'isNull') {
  151. pa.data.filters += `;floorId isNull`
  152. } else if (this.floor[1] && this.floor[1] != 'all') {
  153. pa.data.filters += `;floorId='${this.floor[1]}'`
  154. }
  155. if (this.keycode != '') {
  156. pa.data.filters += `;name contain "${this.keycode}" or localName contain "${this.keycode}" or localId contain "${this.keycode}"`
  157. }
  158. // 删除首尾分号
  159. pa.data.filters = pa.data.filters.replace(/(^;)|(;$)/g, '');
  160. if (pa.data.filters == '') {
  161. delete pa.data.filters
  162. }
  163. if (this.showType) {
  164. if (this.type == "equipment") {
  165. // pa.data.Cascade.push({ Name: "zoneSpaceInBase" })
  166. pa.data.cascade = [{ name: "equipCategory" }];
  167. getEqNotInSpace(pa, res => {
  168. this.loading = false
  169. this.getDataSuc(res, 'ZoneSpaceBaseIn')
  170. })
  171. } else {
  172. // pa.data.Cascade.push({ Name: "zoneSpaceForBase" })
  173. pa.data.cascade = [{ name: "equipCategory" }];
  174. getEqNotForSpace(pa, res => {
  175. this.loading = false
  176. this.getDataSuc(res, 'ZoneSpaceBaseFor')
  177. })
  178. }
  179. } else {
  180. if (this.type == "equipment") {
  181. pa.data.cascade.push({ name: "zoneSpaceInBase" })
  182. notEqInSpaceQuery(pa, res => {
  183. this.loading = false
  184. this.getDataSuc(res, 'ZoneSpaceBaseIn')
  185. })
  186. } else {
  187. pa.data.cascade.push({ name: "zoneSpaceForBase" })
  188. notEqForSpaceQuery(pa, res => {
  189. this.loading = false
  190. this.getDataSuc(res, 'ZoneSpaceBaseFor')
  191. })
  192. }
  193. }
  194. },
  195. // 获取列表成功回调
  196. getDataSuc(res, zonespacebase) {
  197. let response = res.content && res.content.map(t => {
  198. let otherSpace = [];
  199. if (t[zonespacebase] && t[zonespacebase].length) {
  200. t[zonespacebase].map(item => {
  201. otherSpace.push(item.localName || item.name)
  202. })
  203. }
  204. t.linkOtherSpace = otherSpace.join(',');
  205. return t;
  206. })
  207. this.tableData = res.content;
  208. this.page.total = res.total;
  209. },
  210. //选中项修改
  211. handleSelectionChange(val) {
  212. this.selections = val;
  213. },
  214. // 确认 保存关系
  215. savaRelation() {
  216. let pa = {
  217. data: {
  218. spaceId: this.spaceId,
  219. equipIdList: []
  220. },
  221. type: this.zone
  222. }
  223. this.selections.map(t => {
  224. pa.data.equipIdList.push(t.id)
  225. })
  226. if (this.type == "equipment") {
  227. eqInSpaceCreate(pa, res => {
  228. this.successCallback()
  229. })
  230. } else {
  231. eqForSpaceCreate(pa, res => {
  232. this.successCallback()
  233. })
  234. }
  235. },
  236. // 关联成功回调
  237. successCallback() {
  238. this.$message.success('关联成功');
  239. this.$emit('refresh');
  240. this.dialogVisible = false;
  241. },
  242. // 改变pagesize
  243. handleSizeChange(pageSize) {
  244. this.page.pageSize = pageSize;
  245. this.getTableData();
  246. },
  247. // 改变pageno
  248. handleCurrentChange(pageNo) {
  249. this.page.pageNumber = pageNo;
  250. this.getTableData();
  251. },
  252. // 查看详情
  253. toDetail() {
  254. this.$message('开发中')
  255. }
  256. },
  257. watch: {
  258. showType(n) {
  259. }
  260. }
  261. };
  262. </script>
  263. <style lang="less" scoped>
  264. #addEqDialog {
  265. .filters {
  266. margin-bottom: 10px;
  267. /deep/ .el-input__inner {
  268. vertical-align: baseline;
  269. }
  270. }
  271. .table-box {
  272. height: 350px;
  273. }
  274. }
  275. </style>