addEquipDialog.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  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.EquipLocalName||scope.row.EquipName||''}}
  23. </div>
  24. </template>
  25. </el-table-column>
  26. <el-table-column prop="EquipLocalID" :label="`${inSpaceType}本地编码`" show-overflow-tooltip min-width="100"></el-table-column>
  27. <el-table-column prop="EquipCategory.EquipName" :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. export default {
  59. components: {
  60. },
  61. computed: {
  62. ...mapGetters("layout", ["projectId"])
  63. },
  64. data() {
  65. return {
  66. title: "添加设备",
  67. keycode: '', //输入查询条件
  68. options: [], //建筑楼层级联
  69. floor: [], // 选中的建筑楼层
  70. showType: false, //是否只显示在当前业务空间中的设备
  71. inSpaceType: '设备',
  72. dialogVisible: false,
  73. tableData: [],
  74. loading: false,
  75. headerStyle: {
  76. backgroundColor: '#e1e4e5',
  77. color: '#2b2b2b',
  78. lineHeight: '30px'
  79. }, // 列表样式
  80. selections: [], // 选中项
  81. page: {
  82. pageSize: 50,
  83. pageSizes: [10, 20, 50, 100],
  84. pageNumber: 1,
  85. total: 0
  86. },
  87. props: { //自定义字段
  88. value: "BuildID",
  89. label: "BuildLocalName",
  90. children: "Floor"
  91. },
  92. };
  93. },
  94. props: {
  95. type: {}, //Equipment--EquipmentFor
  96. spaceId: {},
  97. zone: {}, //分区类型
  98. },
  99. created() {
  100. this.getBuilding();
  101. },
  102. methods: {
  103. // 获取项目下建筑
  104. getBuilding() {
  105. let pa = {
  106. Cascade: [{ name: 'floor', Orders: 'SequenceId desc' }],
  107. Orders: "BuildLocalName asc",
  108. }
  109. buildingQuery(pa, res => {
  110. this.options = res.Content.map(t => {
  111. if (t.Floor) {
  112. t.Floor = t.Floor.map(item => {
  113. item.BuildID = item.FloorID;
  114. item.BuildLocalName = item.FloorLocalName;
  115. return item;
  116. })
  117. } else {
  118. t.Floor = []
  119. }
  120. t.Floor.unshift({ BuildID: 'all', BuildLocalName: '全部' }, { BuildID: 'isNull', BuildLocalName: '未明确楼层' })
  121. return t;
  122. })
  123. this.options.unshift({ BuildID: 'all', BuildLocalName: '全部' }, { BuildID: 'isNull', BuildLocalName: '未明确楼层' })
  124. })
  125. },
  126. // 显示弹窗
  127. showDialog() {
  128. this.dialogVisible = true;
  129. this.tableData = [];
  130. this.getTableData();
  131. },
  132. // 获取列表数据
  133. getTableData() {
  134. let pa = {
  135. data: {
  136. Cascade: [{ Name: "equipCategory" }],
  137. Filters: '',
  138. PageNumber: this.page.pageNumber,
  139. PageSize: this.page.pageSize,
  140. Orders: 'EquipID 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 += `;EquipName contain "${this.keycode}" or EquipLocalName contain "${this.keycode}" or EquipLocalID 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. console.log(this.showType)
  164. if (this.showType) {
  165. if (this.type == "Equipment") {
  166. // pa.data.Cascade.push({ Name: "zoneSpaceInBase" })
  167. delete pa.data.Cascade;
  168. getEqNotInSpace(pa, res => {
  169. this.getDataSuc(res, 'ZoneSpaceBaseIn')
  170. })
  171. } else {
  172. // pa.data.Cascade.push({ Name: "zoneSpaceForBase" })
  173. delete pa.data.Cascade;
  174. getEqNotForSpace(pa, res => {
  175. this.getDataSuc(res, 'ZoneSpaceBaseFor')
  176. })
  177. }
  178. } else {
  179. if (this.type == "Equipment") {
  180. pa.data.Cascade.push({ Name: "zoneSpaceInBase" })
  181. notEqInSpaceQuery(pa, res => {
  182. this.getDataSuc(res, 'ZoneSpaceBaseIn')
  183. })
  184. } else {
  185. pa.data.Cascade.push({ Name: "zoneSpaceForBase" })
  186. notEqForSpaceQuery(pa, res => {
  187. this.getDataSuc(res, 'ZoneSpaceBaseFor')
  188. })
  189. }
  190. }
  191. },
  192. // 获取列表成功回调
  193. getDataSuc(res, zonespacebase) {
  194. let response = res.Content.map(t => {
  195. let otherSpace = [];
  196. if (t[zonespacebase] && t[zonespacebase].length) {
  197. t[zonespacebase].map(item => {
  198. otherSpace.push(item.RoomLocalName || item.RoomName)
  199. })
  200. }
  201. t.linkOtherSpace = otherSpace.join(',');
  202. return t;
  203. })
  204. this.tableData = res.Content;
  205. this.page.total = res.Total;
  206. },
  207. //选中项修改
  208. handleSelectionChange(val) {
  209. this.selections = val;
  210. },
  211. // 确认 保存关系
  212. savaRelation() {
  213. let pa = {
  214. data: {
  215. SpaceId: this.spaceId,
  216. EquipIdList: []
  217. },
  218. type: this.zone
  219. }
  220. this.selections.map(t => {
  221. pa.data.EquipIdList.push(t.EquipID)
  222. })
  223. if (this.type == "Equipment") {
  224. eqInSpaceCreate(pa, res => {
  225. this.successCallback()
  226. })
  227. } else {
  228. eqForSpaceCreate(pa, res => {
  229. this.successCallback()
  230. })
  231. }
  232. },
  233. // 关联成功回调
  234. successCallback() {
  235. this.$message.success('关联成功');
  236. this.$emit('refresh');
  237. this.dialogVisible = false;
  238. },
  239. // 改变pagesize
  240. handleSizeChange(pageSize) {
  241. this.page.pageSize = pageSize;
  242. this.getTableData();
  243. },
  244. // 改变pageno
  245. handleCurrentChange(pageNo) {
  246. this.page.pageNumber = pageNo;
  247. this.getTableData();
  248. },
  249. // 查看详情
  250. toDetail() {
  251. this.$message('开发中')
  252. }
  253. },
  254. watch: {
  255. showType(n) {
  256. }
  257. }
  258. };
  259. </script>
  260. <style lang="less" scoped>
  261. #addEqDialog {
  262. .filters {
  263. margin-bottom: 10px;
  264. /deep/ .el-input__inner {
  265. vertical-align: baseline;
  266. }
  267. }
  268. .table-box {
  269. height: 350px;
  270. }
  271. }
  272. </style>