dictionaryCascader.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  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. typeRelation: {
  69. Pj: 'Project',
  70. Bd: 'Building',
  71. Fl: 'Floor',
  72. VOTn: 'Tenant',
  73. }
  74. }
  75. },
  76. created() {
  77. this.getAllData()
  78. },
  79. methods: {
  80. //选择
  81. handleChange(val) {
  82. let type = val[0];
  83. let singleStr = "Pj-Bd-Fl-VOTn";
  84. console.log(val)
  85. if (type == "Eq" && val.length == 2) {
  86. this.getDataPoint(val[1])
  87. } else if (type == "Ec" && val.length == 2) {
  88. this.getDataPoint(val[1])
  89. } else if (type == "Sy" && val.length == 3) {
  90. this.getDataPoint(val[2])
  91. } else if (type == "Sp" && val.length == 2) {
  92. this.getDataPoint(val[1])
  93. } else if (singleStr.indexOf(type) > -1) {
  94. this.hasChildren(type) && this.getDataPoint(type)
  95. }
  96. },
  97. //获取物理世界所有设备类型
  98. getAllData() {
  99. queryPhysicsAllType('Equipment', res => {
  100. this.options[3].children = this.formatOptions(res.Content)
  101. })
  102. queryPhysicsAllType('Component', res => {
  103. this.options[4].children = this.formatOptions(res.Content)
  104. })
  105. queryPhysicsAllType('Major-System', res => {
  106. let data = JSON.parse(JSON.stringify(res.Content).replace(/ListClassDef/g, 'children'));
  107. this.options[5].children = this.formatOptions(data)
  108. })
  109. let param1 = {
  110. Distinct: true,
  111. Filters: "ParentId='Space'"
  112. }
  113. queryDictionaryHead(param1, res => {
  114. this.options[6].children = this.formatOptions(res.Content)
  115. })
  116. },
  117. //格式化options数据
  118. formatOptions(arr) {
  119. return arr.map(item => {
  120. return {
  121. Code: item.Code,
  122. Name: item.Name,
  123. children: item.children && item.children.length ? this.formatOptions(item.children) : []
  124. }
  125. })
  126. },
  127. //请求信息点
  128. getDataPoint(type) {
  129. let that = this;
  130. let param = {
  131. data: {
  132. Filters: "InputMode='M' or InputMode='L'",
  133. PageNumber: 1,
  134. PageSize: 500
  135. },
  136. type: this.typeRelation[type] || type
  137. }
  138. getDataDictionary(param, res => {
  139. let tempArr = res.Content.map(item => {
  140. return {
  141. Code: item.InfoPointCode,
  142. Name: item.InfoPointName
  143. }
  144. })
  145. this.pushPoints(this.options, tempArr, type);
  146. this.pointDataSource = {}
  147. res.Content.map(item => {
  148. let code = item.InfoPointCode
  149. this.pointDataSource[code] = item
  150. })
  151. this.$nextTick(() => {
  152. this.changeSelect(this.form.dict)
  153. })
  154. })
  155. },
  156. //根据返回数据拼接options
  157. pushPoints(options, arr, Code) {
  158. options.map(option => {
  159. if (option.Code == Code) {
  160. option.children = arr;
  161. } else {
  162. if (option.children) {
  163. this.pushPoints(option.children, arr, Code)
  164. }
  165. }
  166. })
  167. },
  168. changeSelect(val) {
  169. let labels = this.$refs.dictCas.currentLabels
  170. this.$emit('change', { val: val, labels: labels })
  171. },
  172. //减少请求次数
  173. hasChildren(Code) {
  174. let flag = true;
  175. this.options.map(option => {
  176. if (option.Code == Code && option.children.length) {
  177. flag = false;
  178. }
  179. })
  180. return flag;
  181. },
  182. //设置值
  183. setCascaderVal(value) {
  184. this.form.dict = tools.deepCopy(value)
  185. value.splice(value.length - 1, 1)
  186. this.handleChange(value)
  187. },
  188. //校验是否选择
  189. validate(cb) {
  190. this.$refs.form.validate(valid => {
  191. if (valid) {
  192. cb(true)
  193. } else {
  194. cb(false)
  195. }
  196. })
  197. },
  198. }
  199. }
  200. </script>
  201. <style lang="less" scoped>
  202. </style>