v-select.vue 2.9 KB

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