my-select.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <view class="cu-form-group">
  3. <view class="title">{{label}}</view>
  4. <picker @change="PickerChange" :value="index" :range-key="rangeKey" :range="dictOptions">
  5. <view class="picker">
  6. {{index>-1?dictOptions[index][rangeKey]:'请选择'}}
  7. </view>
  8. </picker>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. name: 'MySelect',
  14. props: {
  15. dictCode: String,
  16. value: String,
  17. label:String,
  18. rangeKey:{type:String,default:'label'},
  19. valueKey:{type:String,default:'value'},
  20. searchUrl:String,
  21. },
  22. watch: {
  23. dictCode: {
  24. immediate: true,
  25. handler() {
  26. this.initDictData()
  27. },
  28. },
  29. },
  30. computed: {
  31. },
  32. data() {
  33. return {
  34. dictOptions: [],
  35. index: -1,
  36. }
  37. },
  38. methods: {
  39. initDictData() {
  40. //根据字典Code, 初始化字典数组
  41. if (this.searchUrl){
  42. this.$http.get(this.searchUrl,{"code":this.dictCode}).then(res=>{
  43. if(res.data.success){
  44. this.dictOptions = res;
  45. this.getIndex()
  46. }
  47. })
  48. }else{
  49. let code = this.dictCode;
  50. this.$http.get(`/sys/dict/getDictItems/${code}`).then(res=>{
  51. if(res.data.success){
  52. this.dictOptions = res.data.result;
  53. this.getIndex()
  54. }
  55. })
  56. }
  57. },
  58. PickerChange(e) {
  59. this.index=e.detail.value
  60. if(this.index==-1){
  61. this.index=0
  62. this.$emit('input',this.dictOptions[0][this.valueKey])
  63. }else{
  64. this.$emit('input', this.dictOptions[this.index][this.valueKey]);
  65. }
  66. },
  67. getIndex() {
  68. for (var i = 0; i < this.dictOptions.length; i++) {
  69. if (this.dictOptions[i].value == this.value) {
  70. this.index = i
  71. return
  72. }
  73. }
  74. this.index=-1
  75. },
  76. }
  77. }
  78. </script>
  79. <style>
  80. </style>