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

<template>
    <view class="processe-view">
        <view class="tabs">
             <view class="tabs-item" :class="{'active': activeName === '工序报工'}" @click="tabClick('工序报工')">工序报工</view>
             <view class="tabs-item" :class="{'active': activeName === '订单生产明细'}" @click="tabClick('订单生产明细')">订单生产明细</view>
             <!-- <view class="tabs-item" :class="{'active': activeName === '报工记录'}" @click="tabClick('报工记录')">报工记录</view> -->
        </view>
        <card title="工序信息" v-if="activeName === '工序报工'">
            <view class="card-content">
                    <view class="report-item" v-for="item in processesList" :key="item.name">
                        <view class="report-col">序号：{{item.vornr}}</view>
                        <view class="report-col">名称：{{item.processes}}</view>
                        <view class="report-col" >在制品：<text :class="{'text-danger': !Number.isNaN(+item.workProgress) && (item.workProgress < 0)}">{{item.workProgress || 0}}</text></view>
                        <view class="report-col">已合格：{{item.lmnga|| 0}}</view>
                        <view class="report-col">废品：{{item.xmnga|| 0}}</view>
                        <view class="report-col"><button type='primary' :disabled='!canReport || item.steus === "W003" || orderStatus !== "在制" || (item.deptCode !== "X12") || (!processOperation.includes(item.operaDesc) && !processOperation.includes("ALL"))' @click="handleReport(item)">报工</button></view>
                    </view>
            </view>
        </card>
        <template v-else-if="activeName === '订单生产明细'">
            <view class="report-detail">
            <view class="tab-wrapper">
                    
                  <view class="detail-tab">
                       <view class="detail-item" :class="{'active': detailActive === '报工汇总'}" @click="detailClick('报工汇总')">报工汇总</view>
                       <view class="detail-item" :class="{'active': detailActive === '101收货明细'}" @click="detailClick('101收货明细')">101收货明细</view>
                       <view class="detail-item" :class="{'active': detailActive === '531收货明细'}" @click="detailClick('531收货明细')">531收货明细</view>
                       <view class="detail-item" :class="{'active': detailActive === '投料'}" @click="detailClick('投料')">投料</view>
                       <view class="detail-item" :class="{'active': detailActive === 'BOM'}" @click="detailClick('BOM')">BOM</view>
                  </view>
                </view>
                <view class="content" :key="processesList.length">
                <summaryComp :processesList='processesList' :processOperation='processOperation' :orderStatus='orderStatus' v-if="detailActive === '报工汇总'" :canReport='canReport'/>
                <detailComp :processesList='processesList' :orderId='orderId' name='101' key='101收货明细'  v-else-if="detailActive === '101收货明细'"/>
                <detailComp :processesList='processesList' :orderId='orderId' name='531' key='531收货明细'  v-else-if="detailActive === '531收货明细'"/>
                <picking :processesList='processesList' :orderId='orderId'   v-else-if="detailActive === '投料'"/>
                <BOM  :orderId='orderId'   v-else-if="detailActive === 'BOM'"/>

                </view>
            </view>
        </template>
        <template v-else-if="activeName === '报工日志'"></template>
    </view>
</template>

<script>
import card from '@/components/card/card'
import {getReportInfo} from "@/api/report/index"
import summaryComp from './orderDetail/summary.vue'
import detailComp from './orderDetail/detailComp.vue'
import picking from './orderDetail/picking.vue'
import BOM from './orderDetail/BOM.vue'
import { get } from "@/utils/api.js"

export default {
    components:{card, summaryComp, detailComp, picking, BOM},
    props:{
        processesList:{
            type: Array,
            default:() => []
        },
        orderId:[Number, String],
        orderStatus:String,
        canReport:{
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            activeName:"工序报工",
            detailActive:"报工汇总",
            processeVal:'0',
            processeDetail:[
                {label:'序号', key: 'aa'},
                {label:'工序名称', key: 'aa'},
                {label:'已合格', key: 'aa'},
                {label:'已废品', key: 'aa'},
                {label:'在制品', key: 'aa'},
                {label:'无成本报工', key: 'aa'},
                {label:'本次合格', key: 'aa'},
                {label:'设备号', key: 'aa'},
                {label:'报工批次', key: 'aa'},
                {label:'混合料密度', key: 'aa'},
                {label:'混炼', key: 'aa'},
                {label:'密度', key: 'aa'},
            ],
            processOperation:[]
        }
    },
    watch:{
        orderId:{
            immediate: true,
            handler(){
                console.log('getProcessOperation------');
                this.getProcessOperation()
            }
        },
    },
    created(){

        
    },
    methods:{
        tabClick(title){
            this.activeName = title
        },
        detailClick(title){
            this.detailActive = title
        },
        handleReport(item){
            uni.navigateTo({
                url:"/pages/production/report/handleReport?data=" + JSON.stringify(item)
            })
        },
        async getProcessOperation(){
            console.log('-------getProcessOperation-------');
            const res = await get(this.apiUrl + "/main/user/getProcessOperation")
            console.log(res,'--------------');
            if (res.success) {
                this.processOperation = res.data.split('+').map(item => (item.trim()).toUpperCase())
                    console.log(this.processOperation,'this.processOperation');
            }

        }
        
    }
}
</script>


<style lang="scss" scoped>
.processe-view{
    background: #fff;
    margin-top: 20rpx;
    border-radius: 12rpx;
    padding: 10rpx 20rpx;
    /deep/.uni-collapse-item{
           background: #fff !important;
       .uni-collapse-item__title .uni-collapse-item__title-box-base{
        background: #fff !important;
       } 

        }

    .report-item{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        margin-bottom: 30rpx;
        padding: 10rpx 0;
        border-bottom: 1rpx solid #ccc;

        .report-col{
            width: 50%;
            margin-bottom: 10rpx;
        font-size: $uni-font-size-lg;
            uni-button[disabled][type=primary]{
                background: #ccc;
            }
            button{
                width: 180rpx;
                height: 60rpx;
                line-height: 60rpx;
                background: $j-primary-green;
                margin: 0 0 0 auto;
                
            }
        }
    }

    .tabs{
        padding-top: 20rpx  ;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: $uni-font-size-sm;
        margin-bottom: 20rpx;
        .tabs-item{
            border: 1rpx solid #ccc;
            border-radius: 8rpx;
            padding: 10rpx 20rpx;

            &.active{
                color: #fff;
                background:$j-primary-border-green;
            }
        }
    }
    .card-content{
        padding:10rpx 10rpx 20rpx;
        font-size: $uni-font-size-sm;
        min-height: 20vh;

        .collapse-title{
            display: flex;
            justify-content: space-between;
            padding:16rpx  3% 16rpx;

        }
    }
     .content{
            min-height: 30vh;
            background: #fff;
        }
    .card-list{
       .list-item{
        font-size: $uni-font-size-ssm;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16rpx 0;
       }
        
    }


    .tab-wrapper{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: $uni-font-size-ssm;

        .detail-tab{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: $uni-font-size-sm;
            margin-bottom: 20rpx;

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

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

        uni-button{
            margin: 0;
        }
    }
}
</style>