areaList.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import { getAreaAll } from '@/api/data'
  2. import { arrayToTree } from '@/utils/util'
  3. const AreaList = {
  4. template: `
  5. <a-cascader
  6. :size="size"
  7. :changeOnSelect="changeOnSelect"
  8. :show-search="{ filter }"
  9. @change="handleChange"
  10. :value="defaultVal"
  11. expand-trigger="hover"
  12. :allowClear="allowClear"
  13. :options="list"
  14. :field-names="{ label: 'name', value: defValKey, children: 'children' }"
  15. :id="id"
  16. :placeholder="placeholder"
  17. style="width: 100%;" />
  18. `,
  19. props: {
  20. value: {
  21. type: Array,
  22. defatut: function () {
  23. return []
  24. }
  25. },
  26. id: {
  27. type: String,
  28. default: ''
  29. },
  30. defValKey: {
  31. type: String,
  32. default: 'areaSn'
  33. },
  34. placeholder: {
  35. type: String,
  36. default: '请选择省/市/区'
  37. },
  38. allowClear: {
  39. type: Boolean,
  40. default: true
  41. },
  42. size: {
  43. type: String,
  44. default: 'default'
  45. },
  46. changeOnSelect: {
  47. type: Boolean,
  48. default: false
  49. }
  50. },
  51. data () {
  52. return {
  53. defaultVal: this.value,
  54. list: []
  55. }
  56. },
  57. watch: {
  58. value (newValue, oldValue) {
  59. this.defaultVal = newValue
  60. }
  61. },
  62. mounted () {
  63. this.getArea()
  64. },
  65. methods: {
  66. filter (inputValue, path) {
  67. return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
  68. },
  69. handleChange (value, selectedOptions) {
  70. this.defaultVal = value
  71. this.$emit('input', this.defaultVal)
  72. this.$emit('change', this.defaultVal, selectedOptions)
  73. },
  74. // 省/市/区
  75. getArea () {
  76. const data = this.$store.state.app.allArea
  77. if(data&&data.length){
  78. this.list = data
  79. }else{
  80. getAreaAll().then(res => {
  81. if (res.status == 200) {
  82. this.list = arrayToTree(res.data, 0)
  83. this.$store.state.app.allArea = this.list
  84. }
  85. })
  86. }
  87. },
  88. clearData () {
  89. this.handleChange([], null)
  90. }
  91. }
  92. }
  93. export default AreaList