~jiangping/dmMes.git

<template>
  <div class="content">
    <div class="order-device">
      <div class="line-message">
        <span>作业人员：</span>
        <span>{{ data.worker ? data.worker : '-' }} / {{data.groupName ? data.groupName : '-'}}</span>
      </div>
      <div class="line-message">
        <span>机台设备：</span>
        <span v-for="(item, index) in data.deviceList" :key="index">
<!--          {{ item.name + (index == data.deviceList.length-1 ? '' : '/') }}-->
          [{{ item.code }}]{{ item.name }}<template v-if="index !== data.deviceList.length - 1">&nbsp;/&nbsp;</template>
        </span>
      </div>
    </div>
    <div class="material-title">
      <div class="title">
        <span class="title-prefix"></span>
        <span>备料接收物料</span>
      </div>
      <div class="order-time">
        <div>单号：{{ data.transferNo }}</div>
        <div>时间：{{ data.validDate }}</div>
      </div>
    </div>
    <div class="material-content">
      <div class="item-style" v-if="orderCount(data.qualifiedBeanList)!=0">
        <div class="item-title-style">
          <span class="green">
            [合格品]
          </span>
          <span style="font-weight: 500;">{{  titleStr(data.qualifiedBeanList) }}</span>
        </div>
        <div class="item-content-style">
          <div class="subItem-style" v-for="(sub, index) in data.qualifiedBeanList" :key="index">
            <div class="subItem-style_top">
<!--              <div class="subItem-first-style" v-if="sub.batch">{{ sub.materialName + ' | ' + sub.materialCode + ' | ' + sub.batch }}</div>-->
              <div class="subItem-first-style">{{ sub.materialName + ' | ' + sub.materialCode }}</div>
              <div class="subItem-second-style">{{ sub.sumBox + '盒 | ' + sub.sumNum + sub.unitName }}</div>
            </div>
            <div class="subItem-style_bottom">
              <span>{{ sub.procedureName ? sub.procedureName : '-' }}&nbsp;|&nbsp;{{ sub.batch ? sub.batch : '-' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="item-style"  v-if="orderCount(data.rejectsBeanList)!=0">
        <div class="item-title-style">
          <span class="yellow">
            [不良品]
          </span>
          <span style="font-weight: 500;">{{ titleStr(data.rejectsBeanList) }}</span>
        </div>
        <div class="item-content-style">
          <div class="subItem-style" v-for="(sub, index) in data.rejectsBeanList" :key="index">
            <div class="subItem-style_top">
<!--              <div class="subItem-first-style" v-if="sub.batch">{{ sub.materialName + ' | ' + sub.batch }}</div>-->
              <div class="subItem-first-style">{{ sub.materialName }}</div>
              <div class="subItem-second-style">{{ sub.sumBox + '盒 | ' + sub.sumNum + sub.unitName }}</div>
            </div>
            <div class="subItem-style_bottom">
              <span>{{ sub.procedureName ? sub.procedureName : '-' }}&nbsp;|&nbsp;{{ sub.batch ? sub.batch : '-' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="order-title">
      <div class="title">
        <span class="title-prefix"></span>
        <span>{{ '本次备料生产工单 (' + orderCount(data.wtransferConfirmWorkOrderBeanList) +')' }}</span>
      </div>
    </div>
    <div class="order-item-style" v-for="(item, index) in data.wtransferConfirmWorkOrderBeanList" :key="index">
      <div class="order-code">{{ item.workOrderNo }}</div>
      <div class="order-info">{{ item.typeDetail + '[' + item.planDate + ']' }}</div>
      <div class="order-content">
        <div class="order-message-style">
          <span style="color:#666;">生产信息：</span>
          <span style="color:#222" v-if="item.batch">{{ item.materialName + ' | ' + item.batch + ' | ' + item.procedureName + ' | ' + item.planNum + '' + item.unitName }}</span>
          <span style="color:#222" v-else>{{ item.materialName + '|' + item.procedureName + ' | ' + item.planNum + '' + item.unitName }}</span>
        </div>
        <div  class="order-message-style">
          <span style="color:#666;">作业人员：</span>
          <span style="color:#222" v-for="(items, i) in item.workOrderUserList" :key="i">{{ items.proUserDepartName }}<template v-if="item.workOrderUserList.length - 1 !== i">&nbsp;/&nbsp;</template></span>
        </div>
      </div>
      <div style="background-color:#e5e5e5; height:1px"></div>
    </div>
    <div style="height:94px"></div>
    <div class="bottom-button">
      <button class="button" @click="submit">接收备料</button>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Toast } from 'vant'
import { getDB } from '@/apis/agencyAPI'
import { wTransferConfirm, acceptWTransfer } from '@/apis/WorkOrderAPI'
 
// interface dataModel{}
 
const route = useRoute()
const router = useRouter()
let data: any = ref({})
 
// 获取详情
const getInfo = () => {
    wTransferConfirm({ id: route.query.id })
        .then(res => {
            if (res.code === 200) {
                data.value = res.data
            } else {
                Toast.fail({ message: res.message, forbidClick: false, duration: 2000 })
                setTimeout(() => {
                    router.go(-1)
                }, 2000)
            }
        })
        .catch(err => {
            console.log(err)
        })
}
 
const titleStr = (arr: [{sumBox: number, sumNum: number, unitName: string }]): string => {
  if (!arr) {
    return ''
  }
  let count = 0
  let all = 0
  for (const item of arr) {
    count = count + item.sumBox
    all = all + item.sumNum
  }
  return count + '盒 | ' + all + arr[0].unitName
}
 
const orderCount = (arr: [{}]): number => {
  if (!arr) {
    return 0
  }
  if (arr.length) {
    return arr.length
  }
  return 0
}
 
const submit = (): void => {
  acceptWTransfer({ id: route.query.id })
    .then(res => {
      if (res.code === 200) {
        Toast.success({  message: '备料成功', duration: 2000, forbidClick: true })
        setTimeout(() => {
          // router.back()
            if (route.query.status !== '1' || route.query.next == '1') {   // 备料接收确认后跳转转库单详情
                router.replace({ name: 'wTransferDetail', query: { id: route.query.id } })
                return
            }
            router.replace({ name: 'wInboundDetail', query: { id: route.query.id } })
        }, 2000)
      }
    })
    .catch(err => {
      console.log(err)
    })
}
 
// 获取待办详情(判断当前待办是否已处理)
const getDBs = async (id: string): Promise<any> => {
    let res = await getDB(id)
    if (res.code === 200) {
        if (res.data.status === 1 && route.query.status !== '1') {
            await router.replace({ name: 'wInboundDetail', query: { id: route.query.id } })
        } else {
            await getInfo()
        }
    }
}
 
onMounted(() => {
    if (route.query.dbid) {
        getDBs(route.query.dbid as string)
    } else {
        getInfo()
    }
})
</script>
 
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #ffffff;
  .order-device {
    margin-left: 30px;
    margin-bottom: 10px;
    color: #333;
    font-size: 26px;
    .line-message {
      margin: 24px 0;
    }
  }
  .material-title {
    background-color: #f7f7f7;
 
    .order-time {
      margin: 0 30px;
      padding-bottom: 30px;
      display: flex;
      justify-content: space-between;
      color: #666;
      font-size: 24px;
    }
  }
  .title {
    height: 32px;
    margin-left: 30px;
    padding-top: 40px;
    padding-bottom: 24px;
    font-size: 30px;
    display: flex;
    align-items: center;
    .title-prefix {
      display: inline-block;
      background-color: #4275FC;
      height: 30px;
      width: 8px;
      border-radius: 1px;
      margin-right: 12px;
    }
  }
  .material-content {
    .item-style {
      width: initial;
      padding: 0 30px;
      .item-title-style {
        margin-top: 30px;
        margin-bottom: 12px;
        font-size: 30px;
      }
      .item-content-style {
        background-color: #f7f7f7;
        border-radius: 16px;
        padding: 1px;
        .subItem-style {
          margin: 24px 30px;
          // width: 100%;
          display: flex;
          /*justify-content: space-between;*/
          /*align-items: center;*/
          flex-direction: column;
          .subItem-style_top {
            display: flex;
            justify-content: space-between;
            .subItem-first-style {
              color: #333;
              font-size: 28px;
              line-height: 28px;
              vertical-align: middle;
            }
            .subItem-second-style {
              color: #444;
              font-size: 24px;
              line-height: 28px;
              vertical-align: middle
            }
          }
          .subItem-style_bottom {
            margin-top: 15px;
            color: #666666;
          }
        }
      }
    }
  }
  .order-title {
    background-color: #f7f7f7;
    margin-top: 40px;
    /*padding-bottom: 24px;*/
  }
  .order-item-style {
    height: 300px;
    padding: 1px 28px;
    .order-code {
      color: #333;
      font-weight: 500;
      font-size: 30px;
      margin-top: 30px;
    }
    .order-info {
      color: #666;
      margin-top: 24px;
    }
    .order-content {
      margin-top: 24px;
      margin-bottom: 30px;
      border-radius: 8px;
      background-color: #f7f7f7;
      padding: 1px;
      .order-message-style {
        font-size: 24px;
        margin: 24px 30px;
      }
    }
  }
  .bottom-button {
    padding: 1px;
    background-color: #f7f7f7;
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 188px;
    .button {
      margin: 32px 32px 68px 32px;
      height: 88px;
      width: calc(100% - 64px);
      border: none;
      font-size: 30px;
      border-radius: 8px;
      background-color: $nav-color;
      color: #fff;
    }
  }
}
 
</style>