index.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <u-picker
  3. ref="pickerRef"
  4. :keyName="keyName"
  5. :show="isShow"
  6. :columns="[xhColumns]"
  7. @confirm="confirm"
  8. @cancel="close"></u-picker>
  9. </template>
  10. <script>
  11. import { dropDown } from "@/api/vehicle/common";
  12. /* https://uviewui.com/components/picker.html */
  13. export default {
  14. props: {
  15. //自定义需要展示的text属性键名
  16. keyName: {
  17. type: String,
  18. default: 'label'
  19. },
  20. columns: {
  21. type: Array,
  22. default: () => []
  23. },
  24. api: { //传入此参数columns无效
  25. type: String,
  26. default: ''
  27. },
  28. workTypeId: { //
  29. type: String,
  30. default: ''
  31. },
  32. },
  33. watch: {
  34. workTypeId: {
  35. immediate: false,
  36. deep: true,
  37. handler(newVal) {
  38. if(this.api == 'dropDown') this.getData()
  39. }
  40. }
  41. },
  42. data() {
  43. return {
  44. isShow: false,
  45. xhColumns: []
  46. }
  47. },
  48. created() {
  49. if (this.api) {
  50. this.getData()
  51. } else {
  52. this.xhColumns = this.columns
  53. }
  54. },
  55. methods: {
  56. getData() {
  57. let getApiMap = {
  58. 'dropDown': async () => {
  59. let { data } = await dropDown({workTypeId: this.workTypeId})
  60. this.xhColumns = data.map(e => {
  61. return {
  62. label: e.vehTypeName,
  63. value: e.vehTypeId
  64. }
  65. })
  66. // console.log( this.xhColumns,' this.xhColumns')
  67. },
  68. }
  69. getApiMap[this.api]()
  70. },
  71. show() {
  72. this.isShow = true;
  73. },
  74. close() {
  75. this.isShow = false
  76. },
  77. confirm(e) {
  78. const { value } = e
  79. this.$emit('confirm', value[0])
  80. this.close()
  81. },
  82. }
  83. }
  84. </script>
  85. <style lang="scss" scoped></style>