v-select.vue 2.6 KB

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