checkBoxPicker.vue 3.2 KB

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