getCascader.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  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, queryEquip} from "@/api/scan/request";
  44. import {sourceQuery} from "@/api/relation/api";
  45. export default {
  46. name: "getCascader",
  47. props: {
  48. all: {
  49. type: Boolean,
  50. default: false,
  51. },
  52. RelationTypeName: {
  53. type: String
  54. },
  55. number: {
  56. type: Number
  57. }
  58. },
  59. computed: {
  60. ...mapGetters("layout", ["projectId"])
  61. },
  62. data() {
  63. return {
  64. value: "",
  65. endValue: '',
  66. options: [],
  67. oraginOption: [],
  68. endOptions: [],
  69. props: {
  70. value: "code",
  71. label: "facility"
  72. },
  73. falg: true,
  74. content: [],
  75. };
  76. },
  77. created() {
  78. this.getData();
  79. },
  80. watch: {
  81. projectId() {
  82. this.value = '';
  83. this.getData();
  84. },
  85. RelationTypeName() {
  86. this.getData();
  87. },
  88. number() {
  89. this.getData();
  90. }
  91. },
  92. methods: {
  93. setValue(val) {
  94. this.value = val
  95. },
  96. //修改val
  97. changeVal(val) {
  98. this.endOptions = this.options.filter(i => !val.includes(i.code))
  99. this.$emit("change", val)
  100. },
  101. //获取当前项目下的设备类型(只拿到编码-需要过滤)
  102. getData() {
  103. let param2 = {
  104. Distinct: true,
  105. PageNumber: 1,
  106. PageSize: 500,
  107. Projection: [
  108. "Category"
  109. ]
  110. }
  111. let param1 = {
  112. data: {
  113. Distinct: true,
  114. Orders: "EquipName asc",
  115. PageNumber: 1,
  116. PageSize: 500,
  117. Projection: [
  118. "EquipCode", "EquipName"
  119. ]
  120. }
  121. }
  122. let param3 = {
  123. Filters: `ProjectId='${this.projectId}';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.Category
  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>