aiot-app/pages/production/report/components/msgDialog.vue

<template>
   <view class="a">
    
    <uni-popup ref="inputDialog" type="dialog">
        <view class="edit-view">
            <view class="title">不合格明细登记</view>
            <view class="tabs">
                <view class="tabs-item" :class="{'active': detailActive === 'xmnga'}" @click="detailClick('xmnga')">废品明细</view>
                <view class="tabs-item" :class="{'active': detailActive === 'upmnga'}" @click="detailClick('upmnga')">返修明细</view>
                <view class="tabs-item" :class="{'active': detailActive === 'cmnga'}" @click="detailClick('cmnga')">让步明细</view>
                <view class="tabs-item" :class="{'active': detailActive === 'umnga'}" @click="detailClick('umnga')">改型明细</view>
            </view>
            <view class="inp-view">
                <view  v-for="(item, index) in showList" :key='index' class="form-wrapper">
                    <view class="row-box">
                        类型<text>{{item.last}}</text>
                    </view>
                    <view class="row-box">
                        数量<text>{{item.first}}</text>
                    </view>
                    <view class="row-box">
                        重量<text>{{multiply(item.first, digit)}}</text>
                    </view>
                </view>
                <view v-if="!showList.length" class="no-data">暂无明细</view>
            </view>
            <view class="footer">
                <button @click='handleCancel'>关闭</button>
            </view>
        </view>
    </uni-popup>
   </view>
</template>


<script>

import {multiply} from "@/utils/math"
export default {
    props:{
        processesInfo:{
            type:Object,
            default:() =>({})
        }
    },
    data(){
        return {
            detailActive:'xmnga',
            xmngaList:[],
            cmngaList:[],
            umngaList:[],
            upmngaList:[],
        }
    },
    created(){
    },
    computed:{
        showList(){
            return this[this.detailActive + 'List']
        },
        digit(){
            const map = {
                      KG:1,
                      G: 0.001,
                      TON: 1000
                    }
            if(['KG', 'G', 'TON'].includes(this.processesInfo.meins)){
                return map[this.processesInfo.meins]
            }else{
                return map[this.processesInfo.gewei]
            } 
        }
    },
    methods:{
        multiply,
        open(active, data){

            this.xmngaList = JSON.parse(data.xmngaJson || '[]')
            this.cmngaList = JSON.parse(data.cmngaJson || '[]')
            this.umngaList = JSON.parse(data.umngaJson || '[]')
            this.upmngaList = JSON.parse(data.upmngaJson || '[]')

            this.detailClick(active)
            this.$refs.inputDialog.open()
        },
        
        handleCancel(){
            this.$refs.inputDialog.close()
        },
        detailClick(name){
            this.detailActive = name
        }
    }
}
</script>


<style lang="scss" scoped>
.edit-view{
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    .inp-view{
        width: 90vw;
        max-height: 60vh;
        overflow: auto;
    }

    .title{
    font-size: $uni-font-size-lg;
    padding: 20rpx 0 ;
    margin-bottom: 10rpx;
    }



    .form-wrapper{
         padding:0 50rpx 15rpx;
        font-size: $uni-font-size-sm;
        border-bottom: 1rpx solid #ccc;
         .row-box{
            padding: 12rpx 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
         }
    }
}
.tabs{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20rpx;
    font-size: $uni-font-size-sm;
    margin-bottom: 10rpx;

    .tabs-item{
        background: rgba(226, 226, 226, 1);
        border: 1rpx solid rgba(226, 226, 226, 1);
        padding: 10rpx 16rpx;

        &.active{
            background: #fff;
        }
    }
}

.footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;

    button{
        width: 150rpx;
    }
}

.no-data{
    padding: 50rpx;
    text-align: center;
    font-size: $uni-font-size-lg;
}
</style>