addpropertys.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <div class="box">
  3. <div class="condition">
  4. <div class="header">
  5. <i style="float:left;font-size:30px;padding-right:10px;cursor:pointer;" title="返回" @click="goBack" class="el-icon-back"></i>
  6. <die-cascader ref="dieCascader" :Family="params.Family" @change="changeDevice"></die-cascader>
  7. <floor-cascader ref="floorCascader" @change="changeFloor"></floor-cascader>
  8. <el-button style="float:right;margin-top:1px;" @click="handleClickCreate">创建已选</el-button>
  9. </div>
  10. <div class="main">
  11. <el-table ref="multipleTable" :data="tableData" v-loading='loading' stripe height="100%" @selection-change="handleSelectionChange">
  12. <el-table-column type="selection" width="55"></el-table-column>
  13. <el-table-column label="设备名称" width="200">
  14. <template slot-scope="scope">{{ scope.row.EquipLocalName?scope.row.EquipLocalName:scope.row.EquipName }}</template>
  15. </el-table-column>
  16. <el-table-column label="设备本地编码" show-overflow-tooltip>
  17. <template slot-scope="scope">{{ scope.row.EquipLocalID?scope.row.EquipLocalID:scope.row.EquipID }}</template>
  18. </el-table-column>
  19. <el-table-column prop="Category" label="设备类型" show-overflow-tooltip width="200"></el-table-column>
  20. <el-table-column prop="BuildingId" label="所属建筑"></el-table-column>
  21. <el-table-column prop="FloorId" label="所属楼层"></el-table-column>
  22. <el-table-column prop="address" label="操作" width="100">
  23. <template slot-scope="scope">
  24. <el-button @click.native.prevent="handleOpenDetail(scope.row, tableData)" type="text" size="small">详情</el-button>
  25. </template>
  26. </el-table-column>
  27. </el-table>
  28. </div>
  29. <div class=footer>
  30. <el-pagination
  31. class="right"
  32. v-show="tableData && tableData.length"
  33. @size-change="handleSizeChange"
  34. @current-change="handleCurrentChange"
  35. :current-page="page.pageNumber"
  36. :page-sizes="page.pageSizes"
  37. :page-size="page.pageSize"
  38. layout="total, sizes, prev, pager, next, jumper"
  39. :total="page.total">
  40. </el-pagination>
  41. </div>
  42. </div>
  43. </div>
  44. </template>
  45. <script>
  46. import { mapGetters } from "vuex"
  47. //组件
  48. import floorCascader from "@/components/ledger/lib/floorCascader"
  49. import dieCascader from "@/components/ledger/lib/partsDieList"
  50. //api
  51. import { queryPartsDie, createPropertys } from "@/api/scan/request";
  52. export default {
  53. data() {
  54. return {
  55. params: {},
  56. loading: false,
  57. page: {
  58. pageSize: 50,
  59. pageSizes: [10, 20, 50, 100],
  60. pageNumber: 1,
  61. total: 0
  62. },
  63. tableData: [],
  64. multipleSelection:[]
  65. }
  66. },
  67. computed: {
  68. ...mapGetters("layout", ["projectId", "userId", "secret"])
  69. },
  70. components: {
  71. floorCascader,
  72. dieCascader
  73. },
  74. created() {
  75. this.params = this.$route.query
  76. },
  77. mounted() {
  78. if (this.params.category) {
  79. this.$refs.dieCascader.setValue([this.params.category])
  80. }
  81. if (this.params.buildId && this.params.floorId) {
  82. this.$refs.floorCascader.setValue([this.params.buildId,this.params.floorId])
  83. } else if (this.params.buildId && !this.params.floorId) {
  84. this.$refs.floorCascader.setValue([this.params.buildId])
  85. } else {
  86. this.$refs.floorCascader.setValue(['all'])
  87. }
  88. },
  89. watch: {
  90. projectId() {}
  91. },
  92. methods: {
  93. //返回
  94. goBack() {
  95. this.$router.push({
  96. path: "/ledger/property",
  97. query: { Family: this.params.Family }
  98. })
  99. },
  100. //选择设备或部件
  101. changeDevice(val) {
  102. if(val.code) {
  103. this.params.category = val.code
  104. } else {
  105. this.params.category = ''
  106. }
  107. this.getTableData()
  108. },
  109. //选择建筑楼层
  110. changeFloor(value) {
  111. if (value[0]) {
  112. this.params.buildId = value[0]
  113. }
  114. if (value[1]) {
  115. this.params.floorId = value[1]
  116. } else {
  117. this.params.floorId = ''
  118. }
  119. this.getTableData()
  120. },
  121. //获取表格数据
  122. getTableData() {
  123. this.loading = true
  124. let param = this.formatFilter()
  125. queryPartsDie(param, res => {
  126. this.tableData = res.Content
  127. this.loading = false
  128. })
  129. },
  130. //格式化条件
  131. formatFilter() {
  132. let param = {
  133. Filters: `category='${this.params.category}'`,
  134. Orders: "createTime desc, EquipID asc",
  135. PageNumber: this.page.pageNumber,
  136. PageSize: this.page.pageSize
  137. }
  138. if (this.params.buildId == "noKnow") {
  139. param.Filters += `;buildingId isNull`
  140. } else if (this.params.buildId && this.params.buildId != "all") {
  141. param.Filters += `;buildingId='${this.params.buildId}'`
  142. }
  143. if (this.params.floorId == "noKnow") {
  144. param.Filters += `;floorId isNull`
  145. } else if (this.params.floorId && this.params.floorId != "all") {
  146. param.Filters += `;floorId='${this.params.floorId}'`
  147. }
  148. return param
  149. },
  150. //选择的设备或部件
  151. handleSelectionChange(val) {
  152. this.multipleSelection = val;
  153. },
  154. //切换每页显示多少条数据
  155. handleSizeChange(val) {
  156. this.page.pageSize = val
  157. this.getTableData()
  158. },
  159. //切换页数
  160. handleCurrentChange(val) {
  161. this.page.pageNumber = val
  162. this.getTableData()
  163. },
  164. //查看详情
  165. handleOpenDetail(row) {
  166. // window.open(`http://adm.sagacloud.cn:8058/spread?id=${row.EquipID}&pid=${this.projectId}&secret=${this.secret}`,"_blank")
  167. this.$message("开发中...")
  168. },
  169. //创建已选
  170. handleClickCreate() {
  171. let list = this.multipleSelection.map((item) => {
  172. return item.EquipID
  173. })
  174. let param = {
  175. Filters: `EquipID in ${JSON.stringify(list)}`
  176. }
  177. createPropertys(param, res => {
  178. this.$message.success("创建成功!")
  179. this.$router.push({
  180. path: "/ledger/property",
  181. query: { Family: this.params.Family }
  182. })
  183. })
  184. }
  185. }
  186. };
  187. </script>
  188. <style scoped lang='less'>
  189. .box {
  190. .condition {
  191. padding: 10px;
  192. display: flex;
  193. height: 100%;
  194. flex-direction: column;
  195. border: 1px solid #dfe6ec;
  196. background: #fff;
  197. margin-bottom: 10px;
  198. .header{
  199. padding-bottom: 10px;
  200. border-bottom: 1px solid #bcbcbc;
  201. }
  202. .main{
  203. margin-top: 10px;
  204. height: calc(100% - 96px);
  205. }
  206. .footer{
  207. margin-bottom: 10px;
  208. }
  209. }
  210. }
  211. </style>
  212. <style lang="less">
  213. .el-table th {
  214. background-color: #d9d9d9;
  215. color: #000;
  216. }
  217. </style>