<template> <view> <u-popup v-model="isShow" @close="isShow = false" mode="bottom" safe-area-inset-bottom border-radius="20"> <view class="content flex flex_column"> <view class="con" v-if="dataList.length > 0"> <view class="choose-list u-flex u-row-between" v-for="(item, i) in dataList" :key="item.id"> <view>{{ item.dispName }}</view> <!-- <u-icon v-show="chooseFlag==i" name="checkbox-mark" color="#2979ff" size="28"></u-icon> --> <u-radio-group v-model="chooseVal"> <u-radio :name="item.code" @change="getChooseItem"></u-radio> </u-radio-group> </view> </view> <view class="btn u-flex"> <view class="cancleStyle" @click="isShow = false">取消</view> <view class="confimStyle" :style="{ background: $config('primaryColor'), color: '#fff' }" @click="submit">确定</view> </view> </view> </u-popup> </view> </template> <script> import { getLookUpDatas } from '@/api/data'; export default { props: { showModal: { type: Boolean, default: false }, code: { type: String, default: '' }, val: { type: String, default: '' } }, data() { return { isShow: this.showModal, chooseObj: null, chooseVal: null, dataList: [] }; }, methods: { getList() { getLookUpDatas({ lookupCode: this.code, pageNo: 1, pageSize: 1000 }).then(result => { if (result && result.status + '' === '200') { this.dataList = result.data.list; //勾选上次选中值 if (this.val) { this.chooseVal = this.val; } } }); }, submit(index) { if (!this.chooseVal) { this.chooseObj = null; uni.showToast({ title:'参数值不能为空', icon:'none' }) return; } this.$emit('chooseItem', this.chooseObj); this.isShow = false; }, getChooseItem(e) { if (this.chooseVal == e) { this.chooseVal =''; } else { this.chooseVal = e; } const index = this.dataList.findIndex(item => { return item.code == e; }); this.chooseObj = this.dataList[index]; } }, watch: { // 父页面传过来的弹框状态 showModal(newValue, oldValue) { this.isShow = newValue; }, // 重定义的弹框状态 isShow(newValue, oldValue) { if (!newValue) { this.$emit('close'); this.$parent.getData(); } else { this.getList(); } } } }; </script> <style lang="scss" scoped> .content { width: 100%; height: 100%; .con { flex-grow: 1; overflow: auto; padding: 0 40rpx; .choose-list { border-bottom: 1rpx solid #efefef; padding: 20rpx 0; &:last-child { border-bottom: 0rpx solid #efefef; } .u-radio{ display: inline-block !important; } } } .btn { border-top: 1rpx solid #efefef; .cancleStyle, .confimStyle { width: 50%; text-align: center; height: 89rpx; line-height: 89rpx; text-align: center; } } } </style>