v-select.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  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" style="width: 100%;" v-model="selected" placeholder-style="color:#C0C4CC" :placeholder="getPlaceholderText" />
  5. <u-icon name="arrow-right" color="#C0C4CC" ></u-icon>
  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. console.log(_this.lookUp,'_this.lookUp')
  49. for (let i = 0; i < _this.lookUp.length; i++) {
  50. if (_this.lookUp[i].code == _this.code) {
  51. if (this.placeholder === '') _this.placeholderText = _this.lookUp[i].name
  52. break
  53. }
  54. }
  55. return _this.placeholderText
  56. }
  57. },
  58. created () {
  59. if (this.code) {
  60. if (this.placeholder) {
  61. this.placeholderText = this.placeholder
  62. }
  63. getLookUpDatas({
  64. lookupCode: this.code,pageNo:1,pageSize:1000
  65. }).then(result => {
  66. console.log(result, 'result')
  67. if (result && result.status + '' === '200') {
  68. let isDealerSupplierFlag = this.$store.state.vuex_userData.extInfo.dealerSupplierFlag //0 非省仓客户 1省仓客户
  69. if(isDealerSupplierFlag == 1){
  70. this.datalist = result.data.list
  71. }else{
  72. let list = result.data.list
  73. list = list.filter(item => item.dispName != '省级批发价')
  74. this.datalist = list
  75. }
  76. }
  77. })
  78. } else {
  79. // console.log('请确认传递类型')
  80. }
  81. // 获取所有数据字典
  82. this.lookUp = this.$store.state.vuex_allLookUp
  83. },
  84. methods: {
  85. getDataList (){
  86. return this.datalist
  87. },
  88. getOptionName (val) {
  89. return this.datalist.find((item) => {
  90. return item.code == val
  91. })
  92. },
  93. getCodeByName (dispName) {
  94. return this.datalist.find((item) => {
  95. return item.dispName == dispName
  96. })
  97. },
  98. resetVal(){
  99. this.selected = ''
  100. this.index = 0
  101. },
  102. // 赋值
  103. setVal(code){
  104. let index = this.datalist.findIndex(item=>{
  105. return item.code == code
  106. })
  107. console.log(this.datalist,code,index)
  108. this.index = index
  109. this.selected = this.datalist[index].dispName
  110. },
  111. toChange (e) {
  112. this.index = e.target.value
  113. this.selected = this.datalist[this.index].dispName
  114. this.$emit('itemChange', this.datalist[this.index].code)
  115. }
  116. }
  117. }
  118. </script>
  119. <style scoped>
  120. </style>