subarea.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. import { subareaQueryAll } from '@/api/subarea'
  2. const AreaList = {
  3. template: `
  4. <a-cascader
  5. :size="size"
  6. :changeOnSelect="changeOnSelect"
  7. :show-search="{ filter }"
  8. @change="handleChange"
  9. :value="defaultVal"
  10. expand-trigger="hover"
  11. :allowClear="allowClear"
  12. :options="list"
  13. :field-names="{ label: 'name', value: defValKey, children: 'subareaAreaList' }"
  14. :id="id"
  15. :placeholder="placeholder"
  16. style="width: 100%;" />
  17. `,
  18. props: {
  19. value: {
  20. type: Array,
  21. defatut: function(){
  22. return []
  23. }
  24. },
  25. id: {
  26. type: String,
  27. default: ''
  28. },
  29. defValKey: {
  30. type: String,
  31. default: 'areaSn'
  32. },
  33. placeholder: {
  34. type: String,
  35. default: '请选择区域/分区'
  36. },
  37. allowClear: {
  38. type: Boolean,
  39. default: true
  40. },
  41. size: {
  42. type: String,
  43. default: 'default'
  44. },
  45. // 只能选择分区,如果区域下无分区不能选择
  46. onlySubarea:{
  47. type: Boolean,
  48. default: false
  49. },
  50. // true可选择一级、二级,false只能选择叶子节点
  51. changeOnSelect:{
  52. type: Boolean,
  53. default: true
  54. },
  55. // 只显示那一级数据,空全部显示
  56. showLeve:{
  57. type: String,
  58. default: ''
  59. }
  60. },
  61. data() {
  62. return {
  63. defaultVal: this.value,
  64. list: []
  65. };
  66. },
  67. watch: {
  68. value(newValue, oldValue) {
  69. this.defaultVal = newValue
  70. },
  71. },
  72. mounted() {
  73. this.getArea()
  74. },
  75. methods: {
  76. filter(inputValue, path) {
  77. return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  78. },
  79. handleChange (value, selectedOptions) {
  80. this.defaultVal = value
  81. this.$emit('input', this.defaultVal)
  82. this.$emit('change', this.defaultVal, selectedOptions)
  83. },
  84. getArea () {
  85. subareaQueryAll().then(res => {
  86. if (res.status == 200) {
  87. // 显示一级二级
  88. if(this.showLeve == ''){
  89. res.data&&res.data.map(item => {
  90. item.name = item.subareaName
  91. item.areaSn = item.subareaSn
  92. if(item.subareaAreaList){
  93. item.subareaAreaList.map(cd => {
  94. cd.name = cd.subareaAreaName
  95. cd.areaSn = cd.subareaAreaSn
  96. })
  97. }else{
  98. if(this.onlySubarea){
  99. item.disabled = true
  100. }
  101. }
  102. })
  103. this.list = res.data
  104. }
  105. // 只显示一级
  106. if(this.showLeve == 1){
  107. const ret = []
  108. res.data&&res.data.map(item => {
  109. item.name = item.subareaName
  110. item.areaSn = item.subareaSn
  111. delete item.subareaAreaList
  112. ret.push(item)
  113. })
  114. this.list = ret
  115. }
  116. // 只显示二级
  117. if(this.showLeve == 2){
  118. const ret = []
  119. res.data&&res.data.map(item => {
  120. if(item.subareaAreaList){
  121. item.subareaAreaList.map(cd => {
  122. cd.name = cd.subareaAreaName
  123. cd.areaSn = cd.subareaAreaSn
  124. ret.push(cd)
  125. })
  126. }
  127. })
  128. this.list = ret
  129. }
  130. }
  131. })
  132. },
  133. clearData(){
  134. this.handleChange([],null)
  135. }
  136. },
  137. };
  138. export default AreaList