v-select.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <template>
  2. <view style="width: 100%;">
  3. <u-input :value="selected" :input-align="inputAlign" :placeholder="placeholder" @click="showPick=true" type="select" />
  4. <u-picker mode="selector" v-model="showPick" @confirm="toChange" :default-selector="[0]" :range="datalist" range-key="dispName"></u-picker>
  5. </view>
  6. </template>
  7. <script>
  8. import { getLookUpDatas, listLookUp } from '@/api/data'
  9. export default {
  10. name: 'v-select',
  11. data () {
  12. return {
  13. selected: '',
  14. datalist: [],
  15. placeholderText: '请选择',
  16. lookUp: [],
  17. index: 0,
  18. showPick: false
  19. }
  20. },
  21. props: {
  22. disabled: {
  23. type: [Boolean, String],
  24. default: false
  25. },
  26. inputAlign: {
  27. type: String,
  28. default:'left'
  29. },
  30. value: [String, Number, Array],
  31. code: {
  32. type: String,
  33. required: true
  34. },
  35. placeholder: {
  36. type: String,
  37. default: ''
  38. },
  39. },
  40. watch: {
  41. value(newValue, oldValue) {
  42. this.setVal(newValue)
  43. }
  44. },
  45. created () {
  46. if (this.code) {
  47. if (this.placeholder) {
  48. this.placeholderText = this.placeholder
  49. }
  50. getLookUpDatas({
  51. type: this.code
  52. }).then(result => {
  53. console.log(result, 'result')
  54. if (result && result.status + '' === '200') {
  55. this.datalist = result.data
  56. // 设置默认值
  57. this.setVal(this.value)
  58. }
  59. })
  60. }
  61. // 获取所有数据字典
  62. this.lookUp = this.$store.state.vuex_allLookUp
  63. },
  64. methods: {
  65. getDataList (){
  66. console.log(this.datalist)
  67. return this.datalist
  68. },
  69. getOptionName (val) {
  70. return this.datalist.find((item) => {
  71. return item.code == val
  72. })
  73. },
  74. getCodeByName (dispName) {
  75. return this.datalist.find((item) => {
  76. return item.dispName == dispName
  77. })
  78. },
  79. resetVal(){
  80. this.selected = ''
  81. this.index = 0
  82. },
  83. // 赋值
  84. setVal(code){
  85. let index = this.datalist.findIndex(item=>{
  86. return item.code == code
  87. })
  88. this.index = index
  89. this.selected = this.datalist[index].dispName
  90. },
  91. toChange (e) {
  92. this.index = e[0]
  93. this.selected = this.datalist[this.index].dispName
  94. this.$emit('input', this.datalist[this.index].code)
  95. this.$emit('change', this.datalist[this.index].code)
  96. }
  97. }
  98. }
  99. </script>
  100. <style lang="scss" scoped>
  101. .v-select{
  102. width: 100%;
  103. .form-input{
  104. flex-grow: 1;
  105. }
  106. }
  107. </style>