cascader.vue 3.4 KB

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