<template>
|
<div class="content2">
|
<div class="order-message">
|
<div class="content_list_item_top">
|
<div class="content_list_item_top_left">
|
<!-- <span>转库单号：</span>-->
|
<span>{{ data.code }}</span>
|
</div>
|
<div class="content_list_item_top_right">
|
<span class="created" v-if="data.status === 0">待出库</span>
|
<span class="warning" v-else-if="data.status === 1">已出库</span>
|
<span class="green" v-else-if="data.status == 2">已入库</span>
|
<span class="info" v-else-if="data.status === 3">已取消</span>
|
</div>
|
</div>
|
<!-- item主题信息部分 -->
|
<div class="content_list_item_content">
|
<div style="margin-top: 0 " class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">单据类型：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ tyepToStr(data.type) }}
|
</div>
|
</div>
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">转出组织：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ data.outDepartName }}
|
</div>
|
</div>
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">转入组织：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ data.inDepartName }}
|
</div>
|
</div>
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">转出仓库：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ data.outWarehouseName }}
|
</div>
|
</div>
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">转出仓管员：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ data.outUserName }}
|
</div>
|
</div>
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">转入仓库：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ data.inWarehouseName }}
|
</div>
|
</div>
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">转入仓管员：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ data.inUserName }}
|
</div>
|
</div>
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">计划转出日期：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ data.outPlandate }}
|
</div>
|
</div>
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">计划转入日期：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ data.inPlandate }}
|
</div>
|
</div>
|
</div>
|
<!-- 转库物料 -->
|
<div class="material-title">
|
<div class="title">
|
<span class="title-prefix"></span>
|
<span>转库物料</span>
|
</div>
|
</div>
|
<div class="material-content">
|
<div class="item-style" v-for="(item, index) in data.wtransferDetailList" :key="index">
|
<div class="item-title-style">
|
<span style="font-weight: 500;">{{ item.materialName + ' | ' + item.materialCode}}</span>
|
</div>
|
<div class="item-content-style">
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">批次号：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ item.batch }}
|
</div>
|
</div>
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">工序：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ item.procedureName || '-' }}
|
</div>
|
</div>
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">质量：</div>
|
<div class="content_list_item_content_item_nr">
|
<span v-if="item.qualityType==0" class="green">合格</span>
|
<span v-else-if="item.qualityType==1" class="yellow">不良</span>
|
<span v-else-if="item.qualityType==2" class="red">报废</span>
|
<span v-else>-</span>
|
</div>
|
</div>
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">计划转库数量：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ item.outPlannum + item.unitName }}
|
</div>
|
</div>
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">实际转出数量：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ item.outActnum + item.unitName }}
|
</div>
|
</div>
|
<div class="content_list_item_content_item">
|
<div class="content_list_item_content_item_label">实际转入数量：</div>
|
<div class="content_list_item_content_item_nr">
|
{{ item.inActnum + item.unitName }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="(data.status === 0 || data.status === 1) && show" style="background:#F7F7F7; height:94px"></div>
|
<div v-if="(data.status === 0 || data.status === 1) && show" class="bottom-button">
|
<button class="button" @click="submit">{{ data.status === 0 ? '去出库' : '去入库' }}</button>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, ref, reactive } from 'vue'
|
import { useRoute, useRouter } from 'vue-router'
|
import { useStore } from "vuex"
|
import { Toast } from 'vant'
|
import { wTransferExtDetail } from '@/apis/materialStorage'
|
|
interface TransferDetailModel {
|
code: string;
|
status: number;
|
outDepartName: string;
|
inDepartName: string;
|
outWarehouseName: string;
|
inWarehouseName: string;
|
outPlandate: string;
|
inPlandate: string;
|
wtransferDetailList: Array<{
|
materialName: string,
|
materialCode: string,
|
batch: string,
|
outPlannum: number,
|
inActnum: number,
|
outActnum: number,
|
unitName: string,
|
}>;
|
}
|
const route = useRoute()
|
const router = useRouter()
|
const store = useStore()
|
const data: any = ref<TransferDetailModel>(
|
{
|
code: "",
|
status: 0,
|
outDepartName: "",
|
inDepartName: "",
|
outWarehouseName: "",
|
inWarehouseName: "",
|
outPlandate: "",
|
inPlandate: "",
|
wtransferDetailList: []
|
}
|
)
|
let show = ref<boolean>(false)
|
|
// 跳转出库入库
|
const submit = (): void => {
|
if (data.value.status === 0) { // 出库
|
router.push({ name: 'issueOperation', query: { id: route.query.id, type: 7 } })
|
} else if (data.value.status === 1) { // 入库
|
if (data.value.type === 3) { // 备料确认
|
router.push({ name: 'orderStock', query: { id: route.query.id, status: data.value.status, next: 1 } })
|
return
|
}
|
router.push({ name: 'warehousing', query: { id: route.query.id, type: 7 } })
|
}
|
}
|
|
const orderType = reactive<Array<{name: string; id: Number;}>>([
|
{ name: '车间领料', id: 1 },
|
{ name: '计划领料', id: 2 },
|
{ name: '机台备料', id: 3 },
|
{ name: '完工入库', id: 4 },
|
{ name: '车间转库', id: 5 },
|
{ name: '外协领料转库', id: 6 },
|
{ name: '外协完工转库', id: 7 },
|
{ name: '成品入库', id: 8 },
|
{ name: '成品转库', id: 9 },
|
{ name: '让步放行入库', id: 10 },
|
{ name: '让步放行转库', id: 11 },
|
{ name: '客返返修领料', id: 12 },
|
{ name: '客返返修入库', id: 13 },
|
{ name: '跨组织转库', id: 14 },
|
{ name: '工序报废', id: 15 },
|
{ name: '客退返修领料', id: 16 },
|
{ name: '客退返修入库', id: 17 },
|
]);
|
|
|
onMounted(() => {
|
wTransferExtDetail(route.query.id)
|
.then(res => {
|
data.value = res.data
|
if (res.data.inUserId == store.state.userInfo.id) {
|
show.value = true
|
}
|
})
|
})
|
|
const tyepToStr = (type: number): string => {
|
// <!-- 1、车间领料；2、车间备料；3、其他；4、完工入库 -->
|
for (const item of orderType) {
|
if (item.id == type) {
|
return item.name
|
}
|
}
|
return '-'
|
}
|
</script>
|
|
<style lang="scss">
|
.content2 {
|
background: white;
|
.order-message {
|
padding-top: 30px;
|
// padding: 30px;
|
display: flex;
|
flex-direction: column;
|
// border-bottom: 1px solid #ececec;
|
.content_list_item_top {
|
padding: 0 30px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.content_list_item_top_left {
|
display: flex;
|
align-items: center;
|
span {
|
font-size: 32px;
|
font-weight: 500;
|
color: #333333;
|
}
|
}
|
.content_list_item_top_right {
|
font-size: 26px;
|
font-weight: 400;
|
.created {
|
color: $nav-stateColor1 !important;
|
}
|
.warning {
|
color: $nav-stateColor5 !important;
|
}
|
.green {
|
color: $nav-stateColor6 !important;
|
}
|
.info {
|
color: $nav-stateColor3 !important;
|
}
|
}
|
}
|
.material-title {
|
// background-color: #f7f7f7;
|
margin-top: 10px;
|
}
|
.content_list_item_content {
|
margin: 0 30px;
|
padding: 24px 30px;
|
background: #f7f7f7;
|
border-radius: 16px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
margin-top: 32px;
|
.content_list_item_content_item {
|
width: 100%;
|
display: flex;
|
margin-top: 24px;
|
// &:nth-child(1) {
|
// margin-top: 0 !important;
|
// }
|
// &:nth-child(2) {
|
// margin-top: 0 !important;
|
// }
|
.content_list_item_content_item_label {
|
font-size: 24px;
|
font-weight: 400;
|
color: #666666;
|
flex-shrink: 0;
|
}
|
.content_list_item_content_item_nr {
|
font-size: 24px;
|
font-weight: 400;
|
color: #222222;
|
margin-right: 10px;
|
}
|
}
|
}
|
}
|
.title {
|
height: 32px;
|
margin-left: 30px;
|
padding-top: 40px;
|
padding-bottom: 24px;
|
font-size: 30px;
|
.title-prefix {
|
display: inline-block;
|
background-color: #4275FC;
|
height: 30px;
|
width: 8px;
|
border-radius: 1px;
|
margin-right: 12px;
|
}
|
}
|
.material-content {
|
.item-style {
|
width: initial;
|
border-bottom: 1PX solid #ECECEC;
|
padding-bottom: 30px;
|
&:last-child {
|
border: none;
|
}
|
.item-title-style {
|
padding: 0 30px;
|
margin-top: 30px;
|
margin-bottom: 12px;
|
font-size: 30px;
|
}
|
.item-content-style {
|
margin: 0 30px;
|
background-color: #f7f7f7;
|
border-radius: 16px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
padding: 1px 1px 30px 1px;
|
.content_list_item_content_item {
|
width: 100%;
|
display: flex;
|
margin-top: 24px;
|
margin-left: 24px;
|
.content_list_item_content_item_label {
|
font-size: 24px;
|
font-weight: 400;
|
color: #666666;
|
flex-shrink: 0;
|
}
|
.content_list_item_content_item_nr {
|
font-size: 24px;
|
font-weight: 400;
|
color: #222222;
|
margin-right: 10px;
|
}
|
}
|
}
|
}
|
}
|
.bottom-button {
|
padding: 1px;
|
background-color: #f7f7f7;
|
position: fixed;
|
width: 100%;
|
bottom: 0;
|
height: 188px;
|
.button {
|
margin: 32px 32px 68px 32px;
|
height: 88px;
|
font-size: 30px;
|
width: calc(100% - 64px);
|
border: none;
|
border-radius: 8px;
|
background-color: $nav-color;
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
