area.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import { getArea } from '@/api/data'
  2. const Area = {
  3. template: `
  4. <a-select
  5. :id="id"
  6. :placeholder="placeholder"
  7. allowClear
  8. :value="defaultVal"
  9. :showSearch="true"
  10. @change="handleChange"
  11. :filter-option="filterOption">
  12. <a-select-option v-for="item in list" :key="item[defValKey]" :value="item[defValKey]">{{ item.name }}</a-select-option>
  13. </a-select>
  14. `,
  15. props: {
  16. value: {
  17. type: String,
  18. defatut: ''
  19. },
  20. id: {
  21. type: String,
  22. default: ''
  23. },
  24. defValKey: {
  25. type: String,
  26. default: 'areaSn'
  27. },
  28. placeholder: {
  29. type: String,
  30. default: '请选择'
  31. },
  32. leve: {
  33. type: String,
  34. default: 'province'
  35. },
  36. parentId: {
  37. type: String,
  38. default: ''
  39. }
  40. },
  41. data() {
  42. return {
  43. defaultVal: this.value,
  44. list: []
  45. };
  46. },
  47. watch: {
  48. value(newValue, oldValue) {
  49. console.log(newValue)
  50. this.defaultVal = newValue
  51. },
  52. parentId(newValue,oldValue){
  53. if(this.leve != 'province'&&newValue){
  54. this.getList(this.leve)
  55. }
  56. }
  57. },
  58. mounted() {
  59. if(this.leve == 'province'){
  60. this.getList(this.leve)
  61. }
  62. },
  63. methods: {
  64. filterOption (input, option) {
  65. return (
  66. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  67. )
  68. },
  69. handleChange(value) {
  70. console.log(value)
  71. this.defaultVal = value;
  72. const item = this.list.find(item => item[this.defValKey] == value)
  73. this.$emit('change', this.value, item);
  74. this.$emit('input', value);
  75. },
  76. // 省/市/区
  77. getList (leve) {
  78. let params
  79. if (leve == 'province') {
  80. params = { type: '2' }
  81. } else {
  82. params = { parentId: this.parentId, type: leve == 'city' ? '3' : '4' }
  83. }
  84. console.log(params)
  85. getArea(params).then(res => {
  86. if (res.status == 200) {
  87. if (leve == 'province') {
  88. this.list = res.data || []
  89. } else if (leve == 'city') {
  90. this.list = res.data || []
  91. } else if (leve == 'district') {
  92. this.list = res.data || []
  93. }
  94. } else {
  95. this.list = []
  96. }
  97. })
  98. },
  99. clearData(){
  100. this.list = []
  101. }
  102. },
  103. };
  104. export default Area