partsDieList.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <div id="cascaderMap">
  3. <span class="buildFloor" style="margin-right: 12px;">设备类</span>
  4. <el-select v-model="value" placeholder="请选择" :props="props" filterable :style="isWidth ? '' : 'width:160px;'"
  5. size="small" @change="changeVal">
  6. <el-option v-for="item in options" :key="item.code" :label="item.facility" :value="item.code"></el-option>
  7. </el-select>
  8. <!-- <el-cascader placeholder="请选择" :options="options" v-model="value" :props="props" filterable :style="isWidth ? '' : 'width:160px;'" size="small"
  9. @change="changeVal" change-on-select></el-cascader> -->
  10. </div>
  11. </template>
  12. <script>
  13. import { mapGetters } from 'vuex';
  14. import { getEqCode, getEquipBelongs, queryPartsDie } from "@/api/scan/request";
  15. export default {
  16. name: "getCode",
  17. props: {
  18. isWidth: {
  19. type: Boolean,
  20. default: true
  21. },
  22. Family: {
  23. type: String,
  24. default: '',
  25. }
  26. },
  27. computed: {
  28. ...mapGetters("layout", ["projectId"])
  29. },
  30. data() {
  31. return {
  32. value: "",
  33. options: [],
  34. props: {
  35. value: "code",
  36. label: "facility"
  37. },
  38. falg: true,
  39. content: []
  40. };
  41. },
  42. mounted() {
  43. if (this.Family != "") {
  44. this.getAllData()
  45. }
  46. },
  47. watch: {
  48. projectId() {
  49. this.value = '';
  50. this.getAllData()
  51. }
  52. // Family: {
  53. // handler: function (val) {
  54. // if(val != "") {
  55. // this.getAllData()
  56. // }
  57. // },
  58. // immediate: true
  59. // }
  60. },
  61. methods: {
  62. setValue(val) {
  63. if (val) {
  64. this.value = val
  65. }
  66. },
  67. //修改val
  68. changeVal(val) {
  69. let value = {}
  70. this.options.map(item => {
  71. if (item.code == val) {
  72. value = item
  73. }
  74. })
  75. this.value = val
  76. this.$emit("change", value)
  77. },
  78. //获取当前项目下的设备类型(只拿到编码-需要过滤)
  79. getData() {
  80. let param = {
  81. Distinct: true,
  82. PageNumber: 1,
  83. PageSize: 500,
  84. Projection: [
  85. "Category"
  86. ]
  87. }
  88. queryPartsDie(param, res => {
  89. this.content = res.Content
  90. this.filterForOptions()
  91. let val = this.options.length ? this.options[0].code : ""
  92. this.changeVal(val)
  93. })
  94. },
  95. //获取物理世界所有设备类型
  96. getAllData() {
  97. let param = {
  98. data: {
  99. filters: `family='${this.Family}'`,
  100. distinct: true,
  101. orders: "equipName asc",
  102. pageNumber: 1,
  103. pageSize: 500,
  104. projection: [
  105. "equipCode", "equipName"
  106. ]
  107. }
  108. }
  109. getEquipBelongs(param, res => {
  110. this.options = this.formatOptions(res.content)
  111. this.getData()
  112. })
  113. },
  114. //格式化options数据
  115. formatOptions(arr) {
  116. let data = [];
  117. arr.map(t => {
  118. let temp = {};
  119. temp.code = t.equipCode;
  120. temp.facility = t.equipName;
  121. data.push(temp)
  122. })
  123. return data;
  124. },
  125. //过滤
  126. filterForOptions() {
  127. this.options = this.options.filter(item => {
  128. if (this.content.find(value => value.Category == item.code)) {
  129. return item
  130. }
  131. })
  132. }
  133. }
  134. };
  135. </script>
  136. <style lang="less" scoped>
  137. #cascaderMap {
  138. float: left;
  139. margin-left: 10px;
  140. .buildFloor {
  141. color: #999999;
  142. font-size: 14px;
  143. }
  144. }
  145. </style>