cascader.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  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"
  5. @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 { getEquipBelongs, queryEquip } from "@/api/scan/request";
  15. export default {
  16. name: "getCode",
  17. props: {
  18. isWidth: {
  19. type: Boolean,
  20. default: true
  21. },
  22. all: {
  23. type: Boolean,
  24. default: false,
  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. created() {
  43. this.getData();
  44. },
  45. watch: {
  46. projectId() {
  47. this.value = '';
  48. this.getData();
  49. }
  50. },
  51. methods: {
  52. setValue(val) {
  53. this.value = val
  54. },
  55. //修改val
  56. changeVal(val) {
  57. let value = {}
  58. let flag = true;
  59. this.options.map(item => {
  60. if (item.code == val) {
  61. flag = false;
  62. value = item
  63. }
  64. })
  65. this.value = val
  66. if (flag) {
  67. this.value = '';
  68. }
  69. console.log(value)
  70. this.$emit("change", value)
  71. },
  72. //获取当前项目下的设备类型(只拿到编码-需要过滤)
  73. getData() {
  74. let param2 = {
  75. Distinct: true,
  76. PageNumber: 1,
  77. PageSize: 500,
  78. Projection: [
  79. "Category"
  80. ]
  81. }
  82. let param1 = {
  83. data: {
  84. Distinct: true,
  85. Orders: "EquipName asc",
  86. PageNumber: 1,
  87. PageSize: 500,
  88. Projection: [
  89. "EquipCode", "EquipName"
  90. ]
  91. }
  92. }
  93. let promise2 = new Promise((resolve, reject) => {
  94. queryEquip(param2, res => {
  95. resolve(res)
  96. })
  97. })
  98. let promise1 = new Promise((resolve, reject) => {
  99. getEquipBelongs(param1, res => {
  100. resolve(res)
  101. })
  102. })
  103. Promise.all([promise1, promise2]).then((res) => {
  104. let allData = res[0], data = res[1]
  105. this.options = this.formatOptions(allData.Content)
  106. if (!this.all) {
  107. this.content = data.Content.map(t => {
  108. return t.Category
  109. });
  110. this.filterForOptions();
  111. }
  112. if (this.value) {
  113. this.changeVal(this.value)
  114. }
  115. })
  116. },
  117. //格式化options数据
  118. formatOptions(arr) {
  119. let data = [];
  120. arr.map(t => {
  121. let temp = {};
  122. temp.code = t.EquipCode;
  123. temp.facility = t.EquipName;
  124. data.push(temp)
  125. })
  126. return data;
  127. },
  128. //过滤
  129. filterForOptions() {
  130. this.options = this.options.filter(item => {
  131. if (this.content.indexOf(item.code) > -1) {
  132. return item
  133. }
  134. })
  135. }
  136. }
  137. };
  138. </script>
  139. <style lang="less" scoped>
  140. #cascaderMap {
  141. float: left;
  142. margin-left: 10px;
  143. .buildFloor {
  144. color: #999999;
  145. font-size: 14px;
  146. }
  147. }
  148. </style>