cascader.vue 3.9 KB

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