<template>
|
<div class="desc">
|
<div class="desc_info">
|
<div class="desc_info_title">
|
<span>{{ data.title }}</span>
|
<span class="yellow" v-if="data.status === 0">待审核</span>
|
<span class="green" v-else-if="data.status === 1">审批通过</span>
|
<span class="red" v-else-if="data.status === 2">审批未通过</span>
|
<span class="red" v-else-if="data.status === 3">审批终止</span>
|
</div>
|
<div class="desc_info_company">{{ store.state.userInfo.rootDepartment.name }}</div>
|
<div class="desc_info_box">
|
<div class="desc_info_box_item">
|
<span>申请编号：</span>
|
<span>{{ data.code }}</span>
|
</div>
|
<div class="desc_info_box_item">
|
<span>申请日期：</span>
|
<span>{{ data.createTime }}</span>
|
</div>
|
<div class="desc_info_box_item">
|
<span>申请类型：</span>
|
<span>工序报废申请</span>
|
</div>
|
<div class="desc_info_box_item">
|
<span>当前工厂：</span>
|
<span>{{data.factoryName}}</span>
|
</div>
|
<div class="desc_info_box_item">
|
<span>出库仓库：</span>
|
<span>{{data.warehouseOutName}}</span>
|
</div>
|
<div class="desc_info_box_item">
|
<span>入库仓库：</span>
|
<span>{{data.warehouseName}}</span>
|
</div>
|
<div class="desc_info_box_item">
|
<span>报废原因：</span>
|
<span>{{data.content}}</span>
|
</div>
|
<div class="desc_info_box_item">
|
<span>申请人：</span>
|
<span>{{ data.createUserName }} / {{data.departmentName}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="desc_qd">
|
<div class="desc_qd_header">
|
<div class="desc_qd_header_x"></div>
|
<span>报废工装清单({{ detailList.length }})</span>
|
</div>
|
<div class="desc_qd_info" v-for="(item, index) in data.detailList" :key="index">
|
<div class="rework_qd_item_i">
|
<span class="black">工装信息：{{ item.applianceCode ? item.applianceCode : '-' }} / </span><span class="black">{{ item.num + item.unitName }}</span>
|
</div>
|
<div class="rework_qd_item_i">
|
<span>物料信息：</span><span>{{ item.materialName + ' | ' + item.materialCode }}</span>
|
</div>
|
<div class="rework_qd_item_i">
|
<span>批次号：</span><span>{{ item.batch ?? '-' }}</span>
|
</div>
|
<div class="rework_qd_item_i">
|
<span>生产工序：</span><span>{{ item.procedureName }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="desc_process">
|
<div class="desc_process_title">
|
<div class="desc_process_title_x"></div>
|
<span>流程</span>
|
</div>
|
<div class="desc_process_box">
|
<div class="desc_process_content">
|
<div class="item" v-for="(item, index) in data.recordList" :key="index">
|
<div class="item_left">
|
<div class="item_x" v-if="data.recordList.length - 1 !== index"></div>
|
<div class="item_left_img">
|
<p>{{item.userModel ? item.userModel.name.substr(0, 1) : '-'}}</p>
|
<img src="../../assets/icon/ic_pass@2x.png" alt="" v-if="item.operationResult === 'AGREE'" />
|
<img src="../../assets/icon/ic_notpass@2x.png" alt="" v-else-if="item.operationResult === 'REFUSE'" />
|
<img src="../../assets/icon/ic_shenhe@2x.png" alt="" v-else-if="item.operationResult === 'NONE'" />
|
</div>
|
<div class="item_left_text">
|
<span>{{index === 0 ? '发起申请' : '审批人'}}</span>
|
<span>{{item.userModel ? item.userModel.name : '-'}}</span>
|
<div class="item_left_text_info" v-if="item.remark">
|
<span>{{item.remark}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="item_right">{{item.date}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
import { useRoute, useRouter } from "vue-router"
|
import { useStore } from "vuex"
|
import { Toast } from 'vant'
|
|
import { getsqdInfo } from '@/apis/WorkOrderAPI'
|
|
const route = useRoute()
|
const store = useStore()
|
|
// 报废清单
|
let data = ref<object>({})
|
let detailList = ref<Array<any>>([])
|
|
onMounted(() => {
|
getInfo(route.query.id as string)
|
})
|
|
const getInfo = async (id: string | number): Promise<void> => {
|
let res = await getsqdInfo(id)
|
if (res.code === 200) {
|
data.value = res.data
|
detailList.value = res.data.detailList
|
} else {
|
Toast.fail({ message: res.message })
|
}
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.desc {
|
position: absolute;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
.desc_info {
|
padding: 30px;
|
background: #ffffff;
|
.desc_info_title {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
span {
|
&:first-child {
|
font-size: 32px;
|
font-weight: 500;
|
color: #333333;
|
}
|
&:last-child {
|
font-size: 26px;
|
font-weight: 400;
|
color: #F5A400;
|
}
|
}
|
}
|
.desc_info_company {
|
font-size: 24px;
|
font-weight: 400;
|
color: #666666;
|
margin: 24px 0;
|
}
|
.desc_info_box {
|
padding: 24px 30px;
|
background: #F7F7F7;
|
border-radius: 16px;
|
display: flex;
|
flex-direction: column;
|
.desc_info_box_item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 24px;
|
&:last-child {
|
margin-bottom: 0 !important;
|
}
|
span {
|
font-size: 26px;
|
font-weight: 400;
|
&:first-child {
|
color: #666666;
|
}
|
&:last-child {
|
color: #222222;
|
}
|
}
|
}
|
}
|
}
|
.desc_qd {
|
margin-top: 40px;
|
.desc_qd_header {
|
display: flex;
|
align-items: center;
|
padding: 0 30px;
|
.desc_qd_header_x {
|
width: 8px;
|
height: 30px;
|
background: #4275FC;
|
border-radius: 2px;
|
margin-right: 12px;
|
}
|
span {
|
font-size: 32px;
|
font-weight: 500;
|
color: #222222;
|
}
|
}
|
.desc_qd_info {
|
background: white;
|
padding: 30px;
|
margin-top: 30px;
|
.desc_qd_info_item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 24px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
.black {
|
font-size: 28px !important;
|
font-weight: 400 !important;
|
color: #222222 !important;
|
}
|
span {
|
font-size: 26px;
|
font-weight: 400;
|
&:first-child {
|
color: #666666;
|
}
|
&:last-child {
|
color: #333333;
|
}
|
}
|
}
|
}
|
}
|
.desc_process {
|
margin-top: 40px;
|
.desc_process_title {
|
display: flex;
|
align-items: center;
|
padding: 0 30px;
|
span {
|
font-size: 32px;
|
font-weight: 500;
|
color: #222222;
|
}
|
.desc_process_title_x {
|
margin-right: 12px;
|
width: 8px;
|
height: 30px;
|
background: #4275FC;
|
border-radius: 2px;
|
}
|
}
|
.desc_process_box {
|
padding: 30px;
|
margin-top: 30px;
|
background: white;
|
.desc_process_content {
|
overflow: hidden;
|
.item {
|
display: flex;
|
margin-bottom: 60px;
|
position: relative;
|
&:last-child {
|
margin-bottom: 0 !important;
|
}
|
.item_left {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
position: relative;
|
.item_x {
|
position: absolute;
|
bottom: -100%;
|
left: 38px;
|
height: 400px;
|
border-right: 2PX solid #E5E5E5;
|
}
|
.item_left_img {
|
flex-shrink: 0;
|
width: 76px;
|
height: 76px;
|
background: #4275FC;
|
border: 4px solid #FFFFFF;
|
position: relative;
|
z-index: 9;
|
border-radius: 50%;
|
display: flex;
|
align-content: center;
|
justify-content: center;
|
white-space: nowrap;
|
p {
|
font-size: 22px;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
img {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
width: 28px;
|
height: 28px;
|
}
|
}
|
.item_left_text {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.item_left_text_info {
|
width: 100%;
|
padding: 5px;
|
box-sizing: border-box;
|
background: #e7e7e7;
|
margin-left: 20px;
|
border-radius: 5px;
|
margin-top: 10px;
|
span {
|
font-size: 24px;
|
color: #474747;
|
}
|
}
|
span {
|
margin-left: 20px;
|
&:first-child {
|
font-size: 28px;
|
font-weight: 400;
|
color: #111111;
|
}
|
&:last-child {
|
font-size: 24px;
|
font-weight: 400;
|
color: #999999;
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
.item_right {
|
position: absolute;
|
right: 0;
|
top: 0;
|
font-size: 24px;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
}
|
}
|
}
|
.rework_qd_item_i {
|
display: flex;
|
align-items: center;
|
margin-bottom: 30px;
|
&:last-child {
|
margin-bottom: 0!important;
|
}
|
.black {
|
font-size: 30px!important;
|
font-weight: 400!important;
|
color: #222222!important;
|
}
|
span {
|
&:first-child {
|
font-size: 26px;
|
font-weight: 400;
|
color: #666666;
|
}
|
&:last-child {
|
font-size: 26px;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
}
|
</style>
|
