redioPicker.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <template>
  2. <view>
  3. <u-popup v-model="isShow" @close="isShow = false" mode="bottom" safe-area-inset-bottom border-radius="20">
  4. <view class="content flex flex_column">
  5. <view class="con" v-if="dataList.length > 0">
  6. <view class="choose-list u-flex u-row-between" v-for="(item, i) in dataList" :key="item.id">
  7. <view>{{ item.dispName }}</view>
  8. <!-- <u-icon v-show="chooseFlag==i" name="checkbox-mark" color="#2979ff" size="28"></u-icon> -->
  9. <u-radio-group v-model="chooseVal">
  10. <u-radio :name="item.code" @change="getChooseItem"></u-radio>
  11. </u-radio-group>
  12. </view>
  13. </view>
  14. <view class="btn u-flex">
  15. <view class="cancleStyle" @click="isShow = false">取消</view>
  16. <view class="confimStyle" :style="{ background: $config('primaryColor'), color: '#fff' }" @click="submit">确定</view>
  17. </view>
  18. </view>
  19. </u-popup>
  20. </view>
  21. </template>
  22. <script>
  23. import { getLookUpDatas } from '@/api/data';
  24. export default {
  25. props: {
  26. showModal: {
  27. type: Boolean,
  28. default: false
  29. },
  30. code: {
  31. type: String,
  32. default: ''
  33. },
  34. val: {
  35. type: String,
  36. default: ''
  37. }
  38. },
  39. data() {
  40. return {
  41. isShow: this.showModal,
  42. chooseObj: null,
  43. chooseVal: null,
  44. dataList: []
  45. };
  46. },
  47. methods: {
  48. getList() {
  49. getLookUpDatas({
  50. lookupCode: this.code,
  51. pageNo: 1,
  52. pageSize: 1000
  53. }).then(result => {
  54. if (result && result.status + '' === '200') {
  55. this.dataList = result.data.list;
  56. //勾选上次选中值
  57. if (this.val) {
  58. this.chooseVal = this.val;
  59. }
  60. }
  61. });
  62. },
  63. submit(index) {
  64. if (!this.chooseVal) {
  65. this.chooseObj = null;
  66. uni.showToast({
  67. title:'参数值不能为空',
  68. icon:'none'
  69. })
  70. return;
  71. }
  72. this.$emit('chooseItem', this.chooseObj);
  73. this.isShow = false;
  74. },
  75. getChooseItem(e) {
  76. if (this.chooseVal == e) {
  77. this.chooseVal ='';
  78. } else {
  79. this.chooseVal = e;
  80. }
  81. const index = this.dataList.findIndex(item => {
  82. return item.code == e;
  83. });
  84. this.chooseObj = this.dataList[index];
  85. }
  86. },
  87. watch: {
  88. // 父页面传过来的弹框状态
  89. showModal(newValue, oldValue) {
  90. this.isShow = newValue;
  91. },
  92. // 重定义的弹框状态
  93. isShow(newValue, oldValue) {
  94. if (!newValue) {
  95. this.$emit('close');
  96. this.$parent.getData();
  97. } else {
  98. this.getList();
  99. }
  100. }
  101. }
  102. };
  103. </script>
  104. <style lang="scss" scoped>
  105. .content {
  106. width: 100%;
  107. height: 100%;
  108. .con {
  109. flex-grow: 1;
  110. overflow: auto;
  111. padding: 0 40rpx;
  112. .choose-list {
  113. border-bottom: 1rpx solid #efefef;
  114. padding: 20rpx 0;
  115. &:last-child {
  116. border-bottom: 0rpx solid #efefef;
  117. }
  118. .u-radio{
  119. display: inline-block !important;
  120. }
  121. }
  122. }
  123. .btn {
  124. border-top: 1rpx solid #efefef;
  125. .cancleStyle,
  126. .confimStyle {
  127. width: 50%;
  128. text-align: center;
  129. height: 89rpx;
  130. line-height: 89rpx;
  131. text-align: center;
  132. }
  133. }
  134. }
  135. </style>