uniapp 复选框选中后禁用复选框，没选择的可再次编辑

<template>
    <view>
        <u--form labelWidth="100" labelPosition="left" :model="energyForm" :rules="rules" ref="energyForm">
            <u-form-item :labelWidth='80' label="维修设备" prop="energyListIdsDTo" borderBottom required
                @click="deviceShow=true">
                <view v-if="deviceList.length" class="todo_list flex">
                    <view v-for="(item,index1) in deviceList">{{item.deviceName}}</view>
                </view>
                <u--input v-else v-model="energyForm.energyListIdsDTo" border="none" placeholder="请选择维修设备"></u--input>
                <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
            <template v-if="deviceList.length">
                <view v-for="(item,index) in deviceList" class="check_box flex_c_b">
                    <view style="width: 100%;">
                        <view class="title">
                            <label>维修设备：</label>
                            {{item.deviceName}}({{item.deviceNo}})
                        </view>
                        <view>
                            <u-checkbox-group placement="column" v-model="item.taskIds"
                                @change="taskChange($event,index)" iconPlacement="right">
                                <view v-for="(item1,index1) in item.taskList" class="task_item">
                                    <text slot="title">{{item1.taskName}}</text>
                                    <view style="margin-bottom: 20rpx;" class="flex_c_b">
                                        <view><label>隔离点：</label>{{item1.isolationPoint}}</view>
                                        <view @click="viewFn(item,item1)" class="flex_c_c viewer">
                                            查看<u-icon name="eye" color="#0eabff"></u-icon>
                                        </view>
                                    </view>
                                    <view style="margin-bottom: 20rpx;" class="grid" v-if="item1.electricCabinetNo">
                                        <label>隔离设备：</label>
                                        <u-tag :text="items" plain size="mini" type="warning"
                                            v-for="items in item1.electricCabinetNo.split(',')"></u-tag>
                                    </view>
                                    <u-checkbox 
                                        :customStyle="{marginBottom: '16px'}" 
                                        :key="item1.id"
                                        :label="item1.taskName" 
                                        :name="item1.id" 
                                        :disabled="item1.disabled"
                                        :checked="item1.checked">
                                    </u-checkbox>

                                </view>
                            </u-checkbox-group>
                        </view>
                    </view>
                    <view style="width: 30rpx;" v-if="energyCheckedList.length===0">
                        <u-icon name="trash" size="24" color="red" @click="deleteDevice(index)"></u-icon>
                    </view>
                </view>
            </template>
        </u--form>
        <!-- 选择能量隔离清单 -->
        <multiple-select :show="deviceShow" :checkboxList="energyList" @close="deviceClose" @confirm="deviceConfirm"
            @search="searchFn" :checkedData.sync="deviceList" @viewerListFn="viewerListFn">
        </multiple-select>

        <!-- 查看单个任务详情 -->
        <u-modal :show="detail.show" :title="detail.title" :cancelText="'关闭'" @confirm="detail.show=false">
            <view class="content">{{detail.content}}</view>
        </u-modal>

        <!-- 查看所有任务详情 -->
        <u-modal :show="viewerList.show" :title="viewerList.title" :cancelText="'关闭'" @confirm="viewerList.show=false">
            <view v-if="viewerList.content.length" class="flex task_list_box">
                <view v-for="item in viewerList.content" class="task_item">
                    <view class="title">{{item.taskName}}</view>
                    <view><label>隔离点：</label>{{item.isolationPoint}}</view>
                    <view class="flex"><label>隔离设备：</label>
                        <view class="grid">
                            <u-tag :text="items" plain size="mini" type="warning"
                                v-for="items in item.electricCabinetNo.split(',')"></u-tag>
                        </view>
                    </view>
                    <view class="content">{{item.taskContent}}</view>
                </view>
            </view>
            <template v-else>暂无数据...</template>
        </u-modal>
    </view>
</template>

<script>
    import {
        getEnergyList,
        eiEnergyTaskByEnergyListId,
        eiTaskIsolationEquipmentRByTaskId
    } from '@/api/isolated/add/index.js'
    import multipleSelect from '../select/index.vue'
    export default {
        components: {
            multipleSelect
        },
        props: {
            energyCheckedList: { // 已选数据要禁用的
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                energyList: [],
                energyListFilter: [],
                deviceList: [],
                deviceDTOs: [], // 已选回传
                energyForm: {
                    energyListIdsDTo: ''
                },
                deviceShow: false,
                defaultSelected: '',
                rules: {
                    'energyListIdsDTo': {
                        type: 'array',
                        required: true,
                        message: '请选择维修设备',
                        trigger: ['blur']
                    }
                },
                detail: {
                    show: false,
                    title: '',
                    content: ''
                },
                viewerList: {
                    show: false,
                    title: '',
                    content: ''
                },
                energyTaskIds: [],
                energyTaskIdsSource: []
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                this.getEnergyList();
            },
            // 获取能量隔离清单数据
            getEnergyList() {
                getEnergyList().then(res => {
                    this.energyList = this.energyListFilter = res.data || [];
                }).finally(()=>{
                    this.initEnergyList();
                })
            },
            // 初始化能量隔离清单信息
            initEnergyList(){
                if(this.energyCheckedList.length){
                    let device = [];
                    const listIds = this.energyCheckedList?.map(item => item.energyListId);
                    const taskIds = this.energyCheckedList?.map(item => item.taskIds);
                    this.energyList?.map(item => {
                        this.energyCheckedList?.map(item1 => {
                            if (item.id == item1.energyListId) {
                                item.disabled = true;
                                item.taskIds = [];
                                device.push(item)
                            }
                        })
                    })
                    this.deviceList = device;
                    this.energyTaskIdsSource = [...taskIds];
                    if(taskIds.length){
                        this.energyTaskIds = [...taskIds]?.reduce((prev,next)=>{ //二维数组转一维数组
                            return prev.concat(next);
                        });
                    }
                    if (listIds.length) {
                        this.getTask(listIds);
                    }
                }
            },
            // 获取清单对应的任务
            getTask(ids) {
                eiEnergyTaskByEnergyListId(ids).then(res => {
                    let _task = res.data || [];
                    this.deviceList?.map((item, index) => {
                        const items = []
                        _task?.map(item1 => {
                            if (item.id === item1.energyListId) {
                                if (this.energyTaskIdsSource[index]?.includes(item1.id)) {
                                    item.taskIds = this.energyTaskIdsSource[index];
                                } else {
                                    item.taskIds = [];
                                }
                                if (this.energyTaskIds.length) {
                                    if (this.energyTaskIds?.includes(item1.id)) {
                                        item1.checked = true;
                                        item1.disabled = true;
                                    }
                                }
                                items.push(item1)
                            }
                        })
                        this.$set(item, 'taskList', items);
                    })
                    this.$emit('checkedData', this.deviceList)
                    this.deviceClose();
                });
            },
            // 下拉列表查看所有任务详情
            viewerListFn(item) {
                if (item.id) {
                    eiEnergyTaskByEnergyListId([item.id]).then(res => {
                        let _task = res.data || [];
                        this.viewerList.content = _task;
                        this.viewerList.title = `【 ${item.deviceName}(${item.deviceNo}) 】详情`;;
                        this.viewerList.show = true;
                    })
                }
            },
            deviceClose() {
                this.deviceShow = false;
            },
            deviceConfirm(e) {
                this.deviceList = e.checkboxValue;
                let ids = e.checkedIds;
                if (ids.length === 0) {
                    this.$modal.msg('请至少选择一个维修设备！')
                    return;
                }
                this.getTask(ids);
            },
            deleteDevice(idx) {
                this.deviceList.splice(idx, 1);
                this.$emit('checkedData', this.deviceList);
            },
            searchFn(e) {
                if (e.trim() === '') {
                    this.energyList = this.energyListFilter;
                    return
                }
                this.energyList = this.energyListFilter.filter(item => item.deviceName.includes(e) || item.deviceNo
                    .includes(e))
            },
            viewFn(p_item, item) {
                this.detail.title = `【 ${p_item.deviceName}(${p_item.deviceNo})- ${item.taskName} 】详情`;
                this.detail.content = item.taskContent;
                this.detail.show = true;
            },
            taskChange(e, _index) {
                this.$set(this.deviceList[_index], 'taskIds', e);
            },
            validateEnergyList() {
                const scendEnergy = [];
                let validate = true;
                this.deviceList?.map(item => {
                    const obj = {
                        energyListId: item.id,
                        taskIds: item.taskIds
                    }
                    scendEnergy.push(obj)
                })
                if (scendEnergy.length == 0) {
                    this.$modal.msg('请至少选择一个维修设备！')
                    validate = false;
                    return false;
                } else {
                    scendEnergy?.map(item => {
                        if (!item.taskIds || item.taskIds?.length === 0) {
                            this.$modal.msg('维修设备对应的任务不能为空！')
                            validate = false;
                            return false;
                        }
                    })
                }
                if (validate) {
                    return scendEnergy
                } else {
                    return false
                }
            },
        }
    }
</script>

<style lang="scss">
    .todo_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-gap: 10rpx;
        color: #666;

        &.gird1 {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .grid {
        grid-gap: 10rpx;
    }

    .task_list_box {
        max-height: 60vh;
        overflow-y: scroll;
        flex-flow: column;

        .task_item {
            border: 1px dashed #ddd;
            margin-bottom: 20rpx;

            label {
                word-break: keep-all;
                white-space: nowrap;
            }

            & .title {
                color: #000;
                font-size: 34rpx;
                text-align: center;
            }

            &:last-child {
                margin-bottom: 0;
            }

            &>view {
                margin-bottom: 20rpx;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    .check_box {
        border: 1px solid #eee;
        padding: 20rpx;
        border-radius: 6rpx;
        margin-bottom: 20rpx;
        width: 100%;

        &:last-child {
            margin-bottom: 0;
        }

        & .title {
            color: #000;
            font-size: 30rpx;
            margin-bottom: 20rpx;
        }
    }

    .task_item {
        border: 1px dotted #ddd;
        padding: 20rpx;
        margin-bottom: 20rpx;
        width: 100%;
        color: #000;
        font-size: 30rpx;

        &:last-child {
            margin-bottom: 0;
        }

        .viewer {
            width: 90rpx;
            word-break: break-all;
            white-space: nowrap;
            margin-left: 20rpx;
            color: #0eabff;
        }

        label {
            font-size: 28rpx;
            color: #666;
        }
    }

    .content {
        color: #666;
        font-size: 30rpx;
        line-height: 50rpx;
        text-indent: 72rpx;
    }
</style>