laboratory_maintenance_app/pages/inspection/components/detailsCollapse.vue

<template>
    <view>
        <u-collapse :accordion="false">
            <u-collapse-item v-for="(item, index) in itemList" :key="index">
                <view slot="title">
                    <text class="collapse-title">实验室楼层：{{ item.title }}</text>
                </view>
                <view v-for="(v, vindex) in item.fangjian" :key="vindex" class="collapse-room">
                    <view>房间名称：{{ v.fangjianmingcheng }}</view>
                    <view v-for="(s, sindex) in v.neirong" :key="sindex" class="collapse-major">
                        <view>专业分类：{{ s.xitong }}</view>
                        <view v-for="(n, nindex) in s.detection" :key="nindex" class="n-box">
                            <u-tag :text="nindex + 1" type="info" class="left-tag" />
                            <u-tag text="已检" type="success" class="right-tag" />
                            <view class="n-box-title"> 各排/出水口通水顺畅</view>
                            <view class="n-box-info"> 工艺内容工艺内容工艺内容工艺内容工艺内容工艺内容工艺内容</view>
                            <view class="info_item">
                                <text class="item_left_txt">状态：</text>
                                <text class="item_right_txt">
                                    <u-radio-group v-model="n.radioValue">
                                        <u-radio name="1">正常</u-radio>
                                        <u-radio name="0">异常</u-radio>
                                    </u-radio-group>

                                </text>
                            </view>
                            <view class="info_item">
                                <text class="item_left_txt">现场照片：</text>
                                <text class="item_right_txt">
                                    <view class="btn">上传照片</view>
                                </text>
                            </view>
                            <view class="info_item">
                                <text class="item_left_txt">使用人签字：</text>
                                <text class="item_right_txt">
                                    <image v-if="n.qianzi" :src="n.qianzi" style="width: 144px;height: 77rpx;"
                                        mode="widthFix" @click="toPop1(index, vindex, sindex, nindex)"></image>
                                    <view v-else class="btn" @click="toPop1(index, vindex, sindex, nindex)">签字</view>
                                </text>
                            </view>
                            <view class="info_item">
                                <text class="item_left_txt">备注：</text>
                                <text class="item_right_txt">
                                    <betone-new-input type="textarea" :placeholder="'请输入'"></betone-new-input>
                                </text>
                            </view>
                        </view>
                    </view>
                </view>
            </u-collapse-item>
        </u-collapse>
        <!-- 提交按钮 -->
        
        <jp-signature-popup ref="signature1" popup v-model="image2" @change="signChange" />
    </view>
    
</template>
<script>
export default {
    props:{
        type:{
            type:String,
            default:''
        }
    },
    computed: {
        disabled() {
            return this.type=='view'
        },
    },
    data() {
        return {
            image2: '',//签字路径
            signIndex: [],
            satisfactionList: [
                {
                    text: '正常',
                    value: 1
                },
                {
                    text: '异常',
                    value: 0
                }
            ],
            itemList: [
                {
                    title: '三层',
                    fangjian: [
                        {
                            fangjianmingcheng: '房间一',
                            neirong: [{
                                xitong: '水系统',
                                detection: [
                                    {
                                        title1: '水量水压满足用水要求1',
                                        radioValue: null,
                                        qianzi: '',//签字图片
                                    },
                                    {
                                        title1: '水量水压满足用水要求2',
                                        radioValue: null,
                                        qianzi: '',//签字图片
                                    }
                                ]
                            }]
                        },
                        {
                            fangjianmingcheng: '房间二',
                            neirong: [{
                                xitong: '水系统',
                                detection: [
                                    {
                                        title1: '水量水压满足用水要求1',
                                        radioValue: 0
                                    },
                                    {
                                        title1: '水量水压满足用水要求2',
                                        radioValue: 1
                                    }
                                ]
                            }, {
                                xitong: '水系统2',
                                detection: [
                                    {
                                        title1: '水量水压满足用水要求1',
                                        radioValue: 0
                                    },
                                    {
                                        title1: '水量水压满足用水要求2',
                                        radioValue: 1
                                    }
                                ]
                            }]
                        }
                    ]
                },
                {
                    title: '四层',
                    fangjian: [
                        {
                            fangjianmingcheng: '房间一',
                            neirong: [{
                                xitong: '水系统'
                            }]
                        }
                    ]
                }
            ],

        }
    },
    methods: {
        toPop1(index, vindex, sindex, nindex) {

            this.signIndex = [index, vindex, sindex, nindex]
            this.$refs.signature1.toPop()

        },
        signChange(e) {
            this.itemList[this.signIndex[0]].fangjian[this.signIndex[1]].neirong[this.signIndex[2]].detection[this.signIndex[3]].qianzi = e
        }
    }
}
</script>
<style lang="scss" scoped>
.collapse-title {
    line-height: 60rpx;
    color: rgba(0, 0, 0, 1);
    font-size: 32rpx;
    text-align: left;
    font-family: SourceHanSansSC-bold;
    margin: 18rpx 0 0rpx 20rpx;
}

.collapse-room {
    margin: 0 32rpx 20rpx;
    color: rgba(0, 0, 0, 1);
}

.collapse-major {
    margin: 0 32rpx 20rpx;
    color: rgba(0, 0, 0, 1);
    margin: 12rpx 24rpx 12rpx;

    .n-box {
        border: 1px solid rgba(239, 239, 239, 1);
        padding: 32rpx 54rpx 0;
        margin-top: 24rpx;
        margin-bottom: 24rpx;
        position: relative;

        .right-tag {
            position: absolute;
            right: 0;
            top: 0;
        }

        .left-tag {
            position: absolute;
            left: 0;
            top: 0;
            padding-left: 10rpx;
            padding-right: 10rpx;
        }

        .n-box-title {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
            text-align: left;
        }

        .n-box-info {
            line-height: 32rpx;
            color: rgba(154, 154, 154, 1);
            font-size: 24rpx;
            padding-top: 12rpx;
            padding-bottom: 12rpx;
        }

        .info_item {
            width: 100%;
            display: flex;
            flex-direction: row;
            margin: 24rpx 0 24rpx;

            .item_left_txt {
                color: rgba(108, 108, 108, 1);
                font-size: 28rpx;
                text-align: left;
                width: 170rpx;
                margin-right: 20rpx;
                line-height: 60rpx;
            }

            .item_right_txt {
                flex: 1;
                max-width: calc(100% - 220rpx);
                color: rgba(0, 0, 0, 1);
                font-size: 28rpx;
                // text-align: left;
                text-align: justify;
                font-family: SourceHanSansSC-regular;

                /deep/.u-radio-group {
                    flex-wrap: nowrap;
                    padding-right: 48rpx;
                }

                .btn {
                    width: 260rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    border-radius: 8rpx;
                    background-color: rgba(255, 255, 255, 1);
                    color: rgba(58, 98, 215, 1);
                    font-size: 28rpx;
                    text-align: center;
                    border: 2rpx dashed rgba(58, 98, 215, 1);
                }
            }
        }
    }
}


</style>