<template> <page-meta :page-style="'overflow:'+(visible?'hidden':'visible')"></page-meta> <uni-popup ref="popup" type="center" :mask-click="false"> <scroll-view scroll-y style="width: 100vw;height: 100vh;"> <view :style="{padding: this.CustomBar + 15 + 'px 15px 15px 15px'}"> <checkbox-group @change="change"> <view v-for="(item,index) in withSelectMeasuresList" :key="index" style="display: flex;margin-top: 15upx"> <checkbox :value="item[rowKey]" :checked="item.check"/> <view style="padding-left: 10upx;">{{ item.PROTECTIVE_MEASURES }}</view> </view> </checkbox-group> </view> <view class="cu-bar btn-group" style="margin-top: 50upx;"> <button class="cu-btn bg-blue margin-tb-sm lg" @click="determine">确定</button> <button class="cu-btn bg-grey margin-tb-sm lg" @click="close">关闭</button> </view> </scroll-view> </uni-popup> </template> <script> import uniPopup from '@/components/more-select/uni-popup/uni-popup.vue'; import {basePath, loginUser} from "@/common/tool"; export default { components: { uniPopup, }, props: { visible: { type: Boolean, required: true, default: false }, measuresList: { type: Array, required: true, default: () => [] }, value: { type: Array, required: true, default: () => [] }, index: { type: Number, required: true, default: 0 }, rowKey: { type: String, required: true, default: '' } }, data() { return { selectValue: [], withSelectMeasuresList: [], } }, watch: { visible: { handler(newValue) { if (newValue) { this.$nextTick(() => { this.$refs.popup.open() }) this.getWithSelectMeasuresList() } }, immediate: true } }, methods: { getSelectedMeasuresList() { const index = this.index const value = this.value const allSelectedMeasuresList = [] const currentIndexSelectedMeasuresList = [] for (let i = 0; i < value.length; i++) { for (let j = 0; j < value[i].selectMeasures.length; j++) { allSelectedMeasuresList.push(value[i].selectMeasures[j]) if (i === index) { currentIndexSelectedMeasuresList.push({...value[i].selectMeasures[j], check: true}) } } } return {allSelectedMeasuresList, currentIndexSelectedMeasuresList} }, getWithSelectMeasuresList() { const {allSelectedMeasuresList, currentIndexSelectedMeasuresList} = this.getSelectedMeasuresList() const withSelectMeasuresList = [...this.measuresList] if (allSelectedMeasuresList.length > 0) { for (let i = 0; i < allSelectedMeasuresList.length; i++) { for (let j = 0; j < withSelectMeasuresList.length; j++) { if (allSelectedMeasuresList[i][this.rowKey] === withSelectMeasuresList[j][this.rowKey]) { withSelectMeasuresList.splice(j, 1) } } } } withSelectMeasuresList.push(...currentIndexSelectedMeasuresList) this.withSelectMeasuresList = withSelectMeasuresList }, change(event) { this.selectValue = event.detail.value }, close() { this.selectValue = [] this.withSelectMeasuresList = [] this.$emit('update:visible', false) this.$refs.popup.close() }, determine() { const value = [] const selectValue = this.selectValue const withSelectMeasuresList = this.withSelectMeasuresList for (let i = 0; i < selectValue.length; i++) { for (let j = 0; j < withSelectMeasuresList.length; j++) { if (selectValue[i] === withSelectMeasuresList[j][this.rowKey]) { value.push(withSelectMeasuresList[j]) } } } this.value[this.index].selectMeasures = value this.$emit('input', [...this.value]) this.close() } }, } </script> <style scoped> </style>