gather.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <template>
  2. <view class="modal-box">
  3. <u-popup v-model="isShow" @close="isShow=false" mode="right" length="85%" >
  4. <view class="modal-con u-flex u-flex-wrap u-row-between" :style="{height:toggle? 'auto':'180rpx'}">
  5. <view class="list" :class="selectNum==i?'selectBox':''" v-for="(item,i) in list" :key="item.id" @click="handleChoole(i)">{{item.dispName}}</view>
  6. </view>
  7. <view class="showMore" :style="{color:$config('primaryColor')}" @click="toggle=!toggle">
  8. <text>{{toggle?'收起':'更多选项'}}</text>
  9. <u-icon :name="toggle?'arrow-up':'arrow-down'" :color="$config('primaryColor')" size="28"></u-icon>
  10. </view>
  11. <view class="form-footer-btn">
  12. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClear">重置</u-button>
  13. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
  14. </view>
  15. </u-popup>
  16. </view>
  17. </template>
  18. <script>
  19. import { getLookUpDatas } from '@/api/data';
  20. export default{
  21. props:{
  22. showModal:{
  23. type: Boolean,
  24. default: false
  25. }
  26. },
  27. data(){
  28. return{
  29. customBtnStyle: { // 自定义按钮样式
  30. borderColor: this.$config('primaryColor'),
  31. backgroundColor: this.$config('primaryColor'),
  32. color: '#fff'
  33. },
  34. isShow:this.showModal,
  35. toggle:false,
  36. selectNum:-1,
  37. list:[]
  38. }
  39. },
  40. methods:{
  41. getList() {
  42. getLookUpDatas({
  43. lookupCode: 'SETTLE_STYLE',
  44. pageNo: 1,
  45. pageSize: 1000
  46. }).then(result => {
  47. if (result && result.status == 200) {
  48. this.list = result.data.list;
  49. }
  50. });
  51. },
  52. handleChoole(e){
  53. if(this.selectNum == e){
  54. this.selectNum = -1;
  55. }else{
  56. this.selectNum = e
  57. }
  58. },
  59. handleSearch(){
  60. if(this.selectNum != -1){
  61. this.$emit('refresh',this.list[this.selectNum]);
  62. }
  63. this.isShow = false
  64. },
  65. handleClear(){
  66. this.selectNum=-1;
  67. this.isShow = false
  68. this.$emit('refresh','reSet');
  69. }
  70. },
  71. watch:{
  72. // 父页面传过来的弹框状态
  73. showModal (newValue, oldValue) {
  74. this.isShow = newValue
  75. },
  76. // 重定义的弹框状态
  77. isShow (newValue, oldValue) {
  78. if (!newValue) {
  79. this.$emit('close')
  80. }else{
  81. this.getList();
  82. }
  83. }
  84. }
  85. }
  86. </script>
  87. <style lang="scss">
  88. .modal-box{
  89. width: 100%;
  90. .modal-con{
  91. padding:20upx;
  92. overflow: hidden;
  93. .list{
  94. width: 46%;
  95. text-align: center;
  96. line-height: 70rpx;
  97. height: 70rpx;
  98. border-radius: 38rpx;
  99. margin-bottom: 20rpx;
  100. background:#f0f0f0;
  101. font-size: 26rpx;
  102. }
  103. .selectBox{
  104. background:#007aff;
  105. color:#fff;
  106. }
  107. }
  108. .showMore{
  109. text-align: center;
  110. margin-top: 30rpx;
  111. text{
  112. margin-right: 10rpx;
  113. }
  114. }
  115. .form-footer-btn {
  116. display: flex;
  117. padding: 20upx;
  118. margin-top: 180upx;
  119. .handle-btn {
  120. font-size: 28upx;
  121. margin: 0 30upx;
  122. width: 100%;
  123. flex: 1;
  124. }
  125. }
  126. }
  127. </style>