Merge remote-tracking branch 'origin/dev' into dev

liuleilei

2023-09-11 faf1d3cc35a3a5f83558946c8056537a4d77fa1f

 minipro_standard/pages/planDetails/planDetails.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,553 @@
<template>
   <view class="details">
      <view class="content_list">
         <view class="content_list_item">
            <view class="content_list_item_top">
               <view class="content_list_item_top_left">
                  <text v-if="info.mmodel">{{info.mmodel.name}}</text>
                  <view class="content_list_item_top_left_tag" v-if="info.urgent">优先{{info.urgent}}</view>
                  <view class="content_list_item_top_left_type" v-if="info.type === 0">正常</view>
                  <view class="content_list_item_top_left_type dangerous" v-else-if="info.type === 1">异常</view>
                  <view class="content_list_item_top_left_type warning" v-else-if="info.type === 2">返工</view>
               </view>
               <view class="content_list_item_top_right">
                  <text v-if="info.status === 0">已生成</text>
                  <text v-if="info.status === 1">已发布</text>
                  <text v-if="info.status === 2">已撤回</text>
                  <text v-if="info.status === 3">已取消</text>
                  <text v-if="info.status === 4">已分配</text>
                  <text v-if="info.status === 5">已暂停</text>
                  <text v-if="info.status === 6">已完工</text>
                  <text v-if="info.status === 7">已入库</text>
                  <text v-if="info.status === 8">已关闭</text>
<!--                        <text class="warning" v-if="info.status === 0">待发布</text>-->
<!--                        <text class="green" v-else-if="info.status === 1 || info.status === 4">生产中</text>-->
<!--                        <text class="info" v-else-if="info.status === 6 || info.status === 7 || info.status === 3 || info.status === 8">已完成</text>-->
               </view>
            </view>
            <view class="content_list_item_content">
               <view class="content_list_item_content_item">
                  <view class="content_list_item_content_item_label">工序名称：</view>
                  <view class="content_list_item_content_item_nr" v-if="info.pmodel">{{info.pmodel.name}}</view>
               </view>
               <view class="content_list_item_content_item">
                  <view class="content_list_item_content_item_label">计划数量：</view>
                  <view class="content_list_item_content_item_nr" v-if="info.umodel">{{info.num}}{{info.umodel.name}}</view>
               </view>
               <view class="content_list_item_content_item">
                  <view class="content_list_item_content_item_label">计划日期：</view>
                  <view class="content_list_item_content_item_nr">{{info.planDate}}</view>
               </view>
               <view class="content_list_item_content_item">
                  <view class="content_list_item_content_item_label">生产批次：</view>
                  <view class="content_list_item_content_item_nr">{{info.batch}}</view>
               </view>
               <view class="content_list_item_content_item">
                  <view class="content_list_item_content_item_label">发布日期：</view>
                  <view class="content_list_item_content_item_nr">{{info.createTime}}</view>
               </view>
               <view class="content_list_item_content_item" v-if="info.usermodel">
                  <view class="content_list_item_content_item_label">计划人员：</view>
                  <view class="content_list_item_content_item_nr">{{info.usermodel.realname}}</view>
               </view>
               <view class="content_list_item_content_item">
                  <view class="content_list_item_content_item_label">分配数量：</view>
                  <view class="content_list_item_content_item_nr" v-if="info.umodel">{{info.distributNum}}{{info.umodel.name}}</view>
               </view>
               <view class="content_list_item_content_item">
                  <view class="content_list_item_content_item_label">完工数量：</view>
                  <view class="content_list_item_content_item_nr" v-if="info.umodel">{{info.doneNum}}{{info.umodel.name}}</view>
               </view>
            </view>
         </view>
      </view>
      <NotFound info="暂未分配工单" v-if="info.workorderList && info.workorderList.length === 0" />
      <template v-else>
         <!-- <view class="details_list">
            <view class="details_list_item" v-for="(item, i) in info.workorderList" :key="i" @click="jump(item)">
               <view class="details_list_item_top">
                  <text>{{ item.createUserName }}</text>
                  <text>{{ item.code }}</text>
               </view>
               <view class="details_list_item_center">
                  <text>良品数：{{ item.qualifiedNum }}</text>
                  <text>不良数：<text class="red">{{ item.unqualifiedNum }}</text></text>
               </view>
               <view class="details_list_item_bottom">
                  <text>{{ item.createTime }}</text>
               </view>
            </view>
         </view> -->
         <view class="details_timeline" v-for="(item, i) in info.workorderList" :key="i">
            <view class="details_timeline_header">
               <view class="details_timeline_header_code">
                  <text>工单编号：{{item.code}}</text>
                  <text>生产人员：{{proUserStr(item)}}</text>
               </view>
               <text v-if="item.status === 0" class="yellow">已创建</text>
               <text v-if="item.status === 1" class="green">已备料</text>
               <text v-if="item.status === 2">已完工</text>
               <text v-if="item.status === 3" class="purple">已检验</text>
               <text v-if="item.status === 4">已报工</text>
               <text v-if="item.status === 5">已入库</text>
               <text v-if="item.status === 6">已取消</text>
               <!--                <text v-if="item.status === 7">已取消</text>-->
               <!--                <text v-if="item.status === 8">已关闭</text>-->
            </view>
            <view class="details_timeline_item" v-if="item.produceDate">
               <view class="activedian"></view>
               <view class="dian active"></view>
               <view class="x"></view>
               <view class="details_timeline_item_zw"></view>
               <view class="details_timeline_item_left">
                  <text class="active_font">产出</text>
                  <text>{{item.produceDate}}</text>
               </view>
               <view class="details_timeline_item_right">
                  <view class="item">
                     <view class="item_label">物料：</view>
                     <view class="item_nr">
                        <view class="item_nr_item" v-if="item.qualifiedNum !== 0">
                           <text class="success">[合格品]</text>
                           <text>{{item.qualifiedNum}}{{info.umodel.name}}</text>
                        </view>
                        <view class="item_nr_item" v-if="item.unqualifiedNum !== 0">
                           <text class="warning">[不良品]</text>
                           <text>{{item.unqualifiedNum}}{{info.umodel.name}}</text>
                        </view>
                     </view>
                  </view>
               </view>
            </view>
            <view class="details_timeline_item" v-if="item.materialDate">
               <view class="activedian" v-if="!item.produceDate"></view>
               <view class="dian" :class="{ 'active': !item.produceDate }"></view>
               <view class="x"></view>
               <view class="details_timeline_item_zw"></view>
               <view class="details_timeline_item_left">
                  <text :class="{'active_font': !item.produceDate}">投料</text>
                  <text>{{item.materialDate}}</text>
               </view>
               <view class="details_timeline_item_right">
                  <view class="item">
                     <view class="item_label">物料：</view>
                     <view class="item_nr" v-if="item.materialList && item.materialList.length !== 0">
                        <view class="item_nr_item" v-for="(items, idx) in item.materialList" :key="idx">
                           <text style="margin: 0;">{{items.name}}&nbsp;/&nbsp;{{items.num}}{{items.unitName}}</text>
                        </view>
                     </view>
                  </view>
               </view>
            </view>
            <view class="details_timeline_item">
               <view class="activedian" v-if="!item.materialDate && !item.produceDate"></view>
               <view class="dian" :class="{ 'active': !item.materialDate && !item.produceDate }"></view>
               <view class="details_timeline_item_zw"></view>
               <view class="details_timeline_item_left">
                  <text :class="{'active_font': !item.materialDate && !item.produceDate}">分配</text>
                  <text>{{ item.distributeDate }}</text>
               </view>
               <view class="details_timeline_item_right">
                  <view class="item">
                     <view class="item_label">分配数量：</view>
                     <view class="item_nr">{{item.planNum}}{{info.umodel.name}}</view>
                  </view>
               </view>
            </view>
         </view>
      </template>
      <!-- <view class="details_zw"></view> -->
      <!-- <view class="details_btn" @click="toJump">去报工</view> -->
   </view>
</template>

<script>
   import { queryByID } from '@/util/api/PlanningAPI'
	
   export default {
      data() {
         return {
            id: null,
            info: {}
         };
      },
      onLoad(option) {
         this.id = option.id
         this.queryByIDs()
      },
      methods: {
         // èŽ·å–详情
         queryByIDs() {
            queryByID(this.id)
               .then(res => {
                  if (res.code === 200) {
                     this.info = res.data
                  }
               })
         },
         proUserStr(item) {
            if (!item.proUserList || item.proUserList.length<1) {
               return '-'
            }
            return item.proUserList.map(user => { return user.proUserDepartName }).join('，')
         }
      }
   }
</script>

<style lang="scss" scoped>
.details {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #F7F7F7;
    .details_zw {
        width: 100%;
        height: 148rpx;
    }
    .details_btn {
        position: fixed;
        bottom: 60rpx;
        left: 30rpx;
        width: calc(100% - 60rpx);
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        background: #305ED5;
        box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.08);
        border-radius: 8rpx;
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
    }
    .van-skeleton {
        padding: 0 !important;
    }
    .content_list {
        width: 100%;
        padding: 30rpx;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        .content_list_item {
            display: flex;
            flex-direction: column;
            .content_list_item_top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .content_list_item_top_left {
                    display: flex;
                    align-items: center;
                    max-width: 83%;
                    text {
                        max-width: 400rpx;
                        font-size: 32rpx;
                        font-weight: 500;
                        color: #333333;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .dangerous {
                        background: $nav-stateColor4 !important;
                    }
                    .warning {
                        background: $nav-stateColor5 !important;
                    }
                    .content_list_item_top_left_type {
                        flex-shrink: 0;
                        padding: 5rpx 10rpx;
                        background: $nav-stateColor2;
                        border-radius: 8rpx;
                        font-size: 22rpx;
                        font-weight: 400;
                        color: #FFFFFF;
                        margin-left: 16rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .content_list_item_top_left_tag {
                        flex-shrink: 0;
                        padding: 5rpx 10rpx;
                        background: $nav-stateColor4;
                        border-radius: 8rpx;
                        font-size: 22rpx;
                        font-weight: 400;
                        color: #FFFFFF;
                        margin-left: 16rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
                .content_list_item_top_right {
                    font-size: 26rpx;
                    font-weight: 400;
                    flex-shrink: 0;
                    .warning {
                        color: $nav-stateColor5 !important;
                    }
                    .green {
                        color: $nav-stateColor6 !important;
                    }
                    .info {
                        color: $nav-stateColor3 !important;
                    }
                }
            }
            .content_list_item_content {
                padding: 24rpx 30rpx;
                background: #F7F7F7;
                border-radius: 16rpx;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-top: 32rpx;
                .content_list_item_content_item {
                    width: 50%;
                    display: flex;
                    margin-top: 24rpx;
                    &:nth-child(1) {
                        margin-top: 0 !important;
                    }
                    &:nth-child(2) {
                        margin-top: 0 !important;
                    }
                    .content_list_item_content_item_label {
                        font-size: 24rpx;
                        font-weight: 400;
                        color: #666666;
                        flex-shrink: 0;
                    }
                    .content_list_item_content_item_nr {
                        font-size: 24rpx;
                        font-weight: 400;
                        color: #222222;
                        margin-right: 10rpx;
                    }
                }
            }
        }
    }
    .details_list {
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
        margin-top: 20rpx;
        .details_list_item {
            width: 100%;
            padding: 24rpx 30rpx;
            box-sizing: border-box;
            background-color: #FFFFFF;
            border-bottom: 2rpx solid #F7F7F7;
            &:last-child {
                border: none !important;
            }
            .details_list_item_top {
                width: 100%;
                display: flex;
                align-items: center;
                text {
                    &:first-child {
                        font-size: 30rpx;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #222222;
                        margin-right: 16rpx;
                    }
                    &:last-child {
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #666666;
                    }
                }
            }
            .details_list_item_center {
                width: 100%;
                margin: 16rpx 0 20rpx 0;
                .red {
                    color: #DE5243;
                }
                text {
                    &:first-child {
                        font-size: 26rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        margin-right: 100rpx;
                    }
                    &:last-child {
                        font-size: 26rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                    }
                }
            }
            .details_list_item_bottom {
                text {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                }
            }
        }
    }
    .details_timeline {
        padding: 30rpx;
        background: #ffffff;
        margin-top: 20rpx;
        .details_timeline_header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            .yellow {
                color: $nav-stateColor1 !important;
            }
            .green {
                color: $nav-stateColor6 !important;
            }
            .purple {
                color: $nav-color !important;
            }
            text {
                font-size: 26rpx;
                font-weight: 400;
                color: #666666;
            }
            .details_timeline_header_code {
                display: flex;
                flex-direction: column;
                text {
                    &:first-child {
                        font-size: 28rpx;
                        font-weight: 500;
                        color: #222222;
                    }
                    &:last-child {
                        font-size: 22rpx;
                        font-weight: 400;
                        color: #777777;
                        margin-top: 24rpx;
                    }
                }
            }
        }
        .details_timeline_item {
            display: flex;
            align-items: flex-start;
            position: relative;
            margin-top: 60rpx;
            &:nth-child(1) {
                margin-top: 0 !important;
            }
            .x {
                position: absolute;
                top: 30rpx;
                left: 29rpx;
                width: 1rpx;
                height: calc(100% + 60rpx);
                border-right: 1rpx dashed #CCCCCC;
            }
            .dian {
                position: absolute;
                top: 22rpx;
                left: 22rpx;
                width: 16rpx;
                height: 16rpx;
                background: #CCCCCC;
                border-radius: 50%;
            }
            .active {
                width: 16rpx;
                height: 16rpx;
                background: $nav-color;
                z-index: 8;
            }
            .activedian {
                position: absolute;
                top: 14rpx;
                left: 14rpx;
                width: 32rpx;
                height: 32rpx;
                background: #E4EBFE;
                border-radius: 50%;
            }
            .details_timeline_item_zw {
                width: 100rpx;
            }
            .details_timeline_item_left {
                display: flex;
                flex-direction: column;
                width: 150rpx;
                .active_font {
                    color: $nav-color !important;
                }
                text {
                    &:nth-child(1) {
                        font-size: 30rpx;
                        font-weight: 500;
                        color: #333333;
                    }
                    &:nth-child(2) {
                        font-size: 22rpx;
                        font-weight: 400;
                        color: #999999;
                        margin-top: 16rpx;
                    }
                }
            }
            .details_timeline_item_right {
                display: flex;
                flex-direction: column;
                flex: 1;
                margin-left: 30rpx;
                .item {
                    display: flex;
                    align-items: flex-start;
                    margin-top: 24rpx;
                    &:nth-child(1) {
                        margin-top: 0 !important;
                    }
                    .item_label {
                        font-size: 26rpx;
                        font-weight: 400;
                        color: #666666;
                        flex-shrink: 0;
                    }
                    .item_nr {
                        font-size: 26rpx;
                        font-weight: 400;
                        color: #333333;
                        .item_nr_item {
                            display: flex;
                            align-items: center;
                            margin-bottom: 24rpx;
                            .success {
                                color: $nav-stateColor2;
                            }
                            .warning {
                                color: $nav-stateColor5;
                            }
                            text {
                                font-size: 26rpx;
                                font-weight: 400;
                                &:last-child {
                                    color: #333333;
                                    margin-left: 12rpx;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>