getCascader.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. <template>
  2. <div id="cascader-group">
  3. <el-row :gutter="20">
  4. <el-col :span="12">
  5. <p>源端设备类:</p>
  6. <el-select
  7. v-model="value"
  8. placeholder="请选择"
  9. :props="props"
  10. multiple
  11. disabled
  12. >
  13. <el-option
  14. v-for="item in oraginOption"
  15. :key="item.code"
  16. :label="item.facility"
  17. :value="item.code"
  18. disabled
  19. />
  20. </el-select>
  21. </el-col>
  22. <el-col :span="12">
  23. <p>末端设备类:</p>
  24. <el-select
  25. v-model="endValue"
  26. placeholder="请选择"
  27. :props="props"
  28. >
  29. <el-option
  30. v-for="item in endOptions"
  31. :key="item.code"
  32. :label="item.facility"
  33. :value="item.code"
  34. disabled
  35. />
  36. </el-select>
  37. </el-col>
  38. </el-row>
  39. </div>
  40. </template>
  41. <script>
  42. import { mapGetters } from 'vuex';
  43. import { getEquipBelongs } from "@/api/scan/request";
  44. import { queryEquip } from "@/api/object/equip"
  45. import { sourceQuery } from "@/api/relation/api";
  46. export default {
  47. name: "getCascader",
  48. props: {
  49. all: {
  50. type: Boolean,
  51. default: false,
  52. },
  53. RelationTypeName: {
  54. type: String
  55. },
  56. number: {
  57. type: Number
  58. }
  59. },
  60. computed: {
  61. ...mapGetters("layout", ["projectId"])
  62. },
  63. data() {
  64. return {
  65. value: "",
  66. endValue: '',
  67. options: [],
  68. oraginOption: [],
  69. endOptions: [],
  70. props: {
  71. value: "code",
  72. label: "facility"
  73. },
  74. falg: true,
  75. content: [],
  76. };
  77. },
  78. created() {
  79. this.getData();
  80. },
  81. watch: {
  82. projectId() {
  83. this.value = '';
  84. this.getData();
  85. },
  86. RelationTypeName() {
  87. this.getData();
  88. },
  89. number() {
  90. this.getData();
  91. }
  92. },
  93. methods: {
  94. setValue(val) {
  95. this.value = val
  96. },
  97. //修改val
  98. changeVal(val) {
  99. this.endOptions = this.options.filter(i => !val.includes(i.code))
  100. this.$emit("change", val)
  101. },
  102. //获取当前项目下的设备类型(只拿到编码-需要过滤)
  103. getData() {
  104. let param2 = {
  105. distinct: true,
  106. pageNumber: 1,
  107. pageSize: 500,
  108. projection: ["classCode"]
  109. }
  110. let param1 = {
  111. data: {
  112. distinct: true,
  113. orders: "equipName asc",
  114. pageNumber: 1,
  115. pageSize: 500,
  116. projection: [
  117. "equipCode", "equipName"
  118. ]
  119. }
  120. }
  121. let param3 = {
  122. // Filters: `ProjectId='${this.projectId}';CalcName='${this.RelationTypeName}'`
  123. calcName: this.RelationTypeName
  124. }
  125. let promise2 = new Promise((resolve, reject) => {
  126. queryEquip(param2, res => {
  127. resolve(res)
  128. })
  129. })
  130. let promise1 = new Promise((resolve, reject) => {
  131. getEquipBelongs(param1, res => {
  132. resolve(res)
  133. })
  134. })
  135. let promise3 = new Promise((resolve, reject) => { //回显
  136. sourceQuery(param3, res => {
  137. resolve(res)
  138. })
  139. })
  140. Promise.all([promise1, promise2, promise3]).then((res) => {
  141. let allData = res[0], data = res[1], arr = res[2].content
  142. this.options = this.formatOptions(allData.content)
  143. if (!this.all) {
  144. this.content = data.content.map(t => {
  145. return t.classCode
  146. });
  147. this.filterForOptions();
  148. }
  149. if (this.value) {
  150. this.changeVal(this.value)
  151. }
  152. if (arr) {
  153. this.value = []
  154. arr.forEach(({ sourceType }) => this.value.push(sourceType))
  155. this.oraginOption = this.options.filter(i => this.value.includes(i.code))
  156. this.endOptions = this.options.filter(i => !this.value.includes(i.code))
  157. }
  158. })
  159. },
  160. //格式化options数据
  161. formatOptions(arr) {
  162. let data = [];
  163. arr.map(t => {
  164. let temp = {};
  165. temp.code = t.equipCode;
  166. temp.facility = t.equipName;
  167. data.push(temp)
  168. })
  169. return data;
  170. },
  171. //过滤
  172. filterForOptions() {
  173. this.options = this.options.filter(item => {
  174. if (this.content.indexOf(item.code) > -1) {
  175. return item
  176. }
  177. })
  178. }
  179. }
  180. };
  181. </script>
  182. <style lang="less" scoped>
  183. #cascader-group {
  184. /*float: left;*/
  185. /*margin-left: 10px;*/
  186. /*display: inline-block;*/
  187. .buildFloor {
  188. color: #999999;
  189. font-size: 14px;
  190. }
  191. }
  192. </style>