dictionaryCascader.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <template>
  2. <div>
  3. <el-form ref="form" :rules='rules' :model="form">
  4. <el-form-item prop="dict">
  5. <el-cascader style='width: 100%;' :options='options' v-model='form.dict' @active-item-change='handleChange' :props='props' filterable
  6. @change="changeSelect" ref="dictCas"></el-cascader>
  7. </el-form-item>
  8. </el-form>
  9. </div>
  10. </template>
  11. <script>
  12. import {
  13. getDataDictionary,//查询信息点
  14. queryPhysicsAllType,//查询所有部件类型
  15. queryDictionaryHead,//查询所有空间类型
  16. } from "@/api/scan/request"
  17. import { mapGetters, mapActions } from "vuex";
  18. import tools from "@/utils/scan/tools";
  19. export default {
  20. data() {
  21. return {
  22. options: [
  23. {
  24. Code: 'Pj',
  25. Name: '项目',
  26. children: []
  27. }, {
  28. Code: 'Bd',
  29. Name: '建筑',
  30. children: []
  31. }, {
  32. Code: 'Fl',
  33. Name: '楼层',
  34. children: []
  35. }, {
  36. Code: 'Eq',
  37. Name: '设备',
  38. children: []
  39. }, {
  40. Code: 'Ec',
  41. Name: '部件',
  42. children: []
  43. }, {
  44. Code: 'Sy',
  45. Name: '系统',
  46. children: []
  47. }, {
  48. Code: 'Sp',
  49. Name: '空间',
  50. children: []
  51. }, {
  52. Code: 'VOTn',
  53. Name: '租户',
  54. children: []
  55. },
  56. ],
  57. form: {
  58. dict: [],
  59. },
  60. props: {
  61. value: 'Code',
  62. label: 'Name',
  63. children: 'children'
  64. },
  65. rules: {
  66. dict: [{ required: true, message: '请选择对应数据字典', trigger: 'blur' }]
  67. }
  68. }
  69. },
  70. created() {
  71. this.getAllData()
  72. },
  73. methods: {
  74. //选择
  75. handleChange(val) {
  76. let type = val[0];
  77. let singleStr = "Pj-Bd-Fl-VOTn";
  78. console.log(val)
  79. if (type == "Eq" && val.length == 2) {
  80. this.getDataPoint(val[1])
  81. } else if (type == "Ec" && val.length == 2) {
  82. this.getDataPoint(val[1])
  83. } else if (type == "Sy" && val.length == 3) {
  84. this.getDataPoint(val[2])
  85. } else if (type == "Sp" && val.length == 2) {
  86. this.getDataPoint(val[1])
  87. } else if (singleStr.indexOf(type) > -1) {
  88. this.hasChildren(type) && this.getDataPoint(type)
  89. }
  90. },
  91. //获取物理世界所有设备类型
  92. getAllData() {
  93. queryPhysicsAllType('Equipment', res => {
  94. this.options[3].children = this.formatOptions(res.Content)
  95. })
  96. queryPhysicsAllType('Component', res => {
  97. this.options[4].children = this.formatOptions(res.Content)
  98. })
  99. queryPhysicsAllType('Major-System', res => {
  100. let data = JSON.parse(JSON.stringify(res.Content).replace(/ListClassDef/g, 'children'));
  101. this.options[5].children = this.formatOptions(data)
  102. })
  103. let param1 = {
  104. Distinct: true,
  105. Filters: "ParentId='Space'"
  106. }
  107. queryDictionaryHead(param1, res => {
  108. this.options[6].children = this.formatOptions(res.Content)
  109. })
  110. },
  111. //格式化options数据
  112. formatOptions(arr) {
  113. return arr.map(item => {
  114. return {
  115. Code: item.Code,
  116. Name: item.Name,
  117. children: item.children && item.children.length ? this.formatOptions(item.children) : []
  118. }
  119. })
  120. },
  121. //请求信息点
  122. getDataPoint(type) {
  123. let param = {
  124. data: {
  125. Filters: "InputMode='M' or InputMode='L'",
  126. PageNumber: 1,
  127. PageSize: 500
  128. },
  129. type: type
  130. }
  131. getDataDictionary(param, res => {
  132. let tempArr = res.Content.map(item => {
  133. return {
  134. Code: item.InfoPointCode,
  135. Name: item.InfoPointName
  136. }
  137. })
  138. this.pushPoints(this.options, tempArr, type);
  139. this.pointDataSource = {}
  140. res.Content.map(item => {
  141. let code = item.InfoPointCode
  142. this.pointDataSource[code] = item
  143. })
  144. this.$nextTick(() => {
  145. this.changeSelect(this.form.dict)
  146. })
  147. })
  148. },
  149. //根据返回数据拼接options
  150. pushPoints(options, arr, Code) {
  151. options.map(option => {
  152. if (option.Code == Code) {
  153. option.children = arr;
  154. } else {
  155. if (option.children) {
  156. this.pushPoints(option.children, arr, Code)
  157. }
  158. }
  159. })
  160. },
  161. changeSelect(val) {
  162. let labels = this.$refs.dictCas.currentLabels
  163. this.$emit('change', { val: val, labels: labels })
  164. },
  165. //减少请求次数
  166. hasChildren(Code) {
  167. let flag = true;
  168. this.options.map(option => {
  169. if (option.Code == Code && option.children.length) {
  170. flag = false;
  171. }
  172. })
  173. return flag;
  174. },
  175. //设置值
  176. setCascaderVal(value) {
  177. this.form.dict = tools.deepCopy(value)
  178. value.splice(value.length - 1, 1)
  179. this.handleChange(value)
  180. },
  181. //校验是否选择
  182. validate(cb) {
  183. this.$refs.form.validate(valid => {
  184. if (valid) {
  185. cb(true)
  186. } else {
  187. cb(false)
  188. }
  189. })
  190. },
  191. }
  192. }
  193. </script>
  194. <style lang="less" scoped>
  195. </style>