<template>
|
<div class="desc">
|
<div class="desc_info">
|
<div class="desc_info_title">
|
<span>{{ info.title }}</span>
|
<span class="yellow" v-if="info.status === 0">待审核</span>
|
<span class="green" v-else-if="info.status === 1">审批通过</span>
|
<span class="red" v-else-if="info.status === 2">审批未通过</span>
|
<span class="red" v-else-if="info.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>{{ info.code }}</span>
|
</div>
|
<div class="desc_info_box_item">
|
<span>申请日期：</span>
|
<span>{{ info.createTime }}</span>
|
</div>
|
<div class="desc_info_box_item">
|
<span>申请类型：</span>
|
<span v-if="info.type === 0">不良返工</span>
|
<span v-if="info.type === 1">客退</span>
|
<span v-if="info.type === 2">客返</span>
|
<span v-if="info.type === 3">报废申请</span>
|
</div>
|
<div class="desc_info_box_item">
|
<span>返修工序：</span>
|
<span>{{ info.backProcedureName }}</span>
|
</div>
|
<div class="desc_info_box_item">
|
<span>不良原因：</span>
|
<span>{{ info.content }}</span>
|
</div>
|
<div class="desc_info_box_item">
|
<span>申请人：</span>
|
<span>{{ info.createUserName }} / {{ info.departmentName }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="desc_qd">
|
<div class="desc_qd_header">
|
<div class="desc_qd_header_x"></div>
|
<span>返工工装清单({{info.detailList ? info.detailList.length : '0'}})</span>
|
</div>
|
<template v-if="info && info.detailList && info.detailList.length > 0">
|
<div class="desc_qd_info" v-for="(item, index) in info.detailList" :key="index">
|
<div class="desc_qd_info_item">
|
<span class="black">工装信息：{{ item.applianceCode }} / </span>
|
<span class="black">{{ item.num }}{{ item.unitName }}</span>
|
</div>
|
<div class="desc_qd_info_item">
|
<span>物料信息：</span>
|
<span>{{ item.materialName }} | {{ item.materialCode }}</span>
|
</div>
|
<div class="desc_qd_info_item">
|
<span>批次号：</span>
|
<span>{{ item.batch }}</span>
|
</div>
|
<div class="desc_qd_info_item">
|
<span>生产工序：</span>
|
<span>{{ item.procedureName }}</span>
|
</div>
|
</div>
|
</template>
|
<div class="desc_qd_not" v-else>暂无工装</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_content" v-if="info.recordList && info.recordList.length > 0">
|
<div class="item" v-for="(item, index) in info.recordList" :key="index">
|
<div class="item_left">
|
<div class="item_x" v-if="info.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>
|
</div>
|
<div class="item_right">{{item.date}}</div>
|
</div>
|
</div>
|
<div class="notfound" v-else>暂无数据</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { getsqdInfo } from '@/apis/WorkOrderAPI'
|
import { useRoute } from "vue-router"
|
import { useStore } from "vuex"
|
import { ref, onMounted } from 'vue'
|
|
const route = useRoute()
|
|
const store = useStore()
|
|
let info = ref<object>({})
|
|
const getsqdInfos = () => {
|
getsqdInfo(route.query.id)
|
.then(res => {
|
if (res.code === 200) {
|
info.value = res.data
|
}
|
})
|
}
|
|
onMounted(() => {
|
getsqdInfos()
|
})
|
</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_not {
|
width: 100%;
|
height: 150px;
|
background: white;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 28px;
|
color: black;
|
margin-top: 30px;
|
}
|
.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;
|
}
|
}
|
.notfound {
|
width: 100%;
|
height: 200px;
|
background: white;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 24px;
|
color: black;
|
margin-top: 30px;
|
}
|
.desc_process_content {
|
padding: 30px;
|
background: white;
|
margin-top: 30px;
|
.item {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 60px;
|
&:last-child {
|
margin-bottom: 0 !important;
|
}
|
.item_left {
|
display: flex;
|
align-items: center;
|
position: relative;
|
.item_x {
|
position: absolute;
|
bottom: -100%;
|
left: 38px;
|
height: 150px;
|
border-right: 2PX solid #E5E5E5;
|
}
|
.item_left_img {
|
width: 76px;
|
height: 76px;
|
background: #4275FC;
|
border: 4px solid #FFFFFF;
|
position: relative;
|
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 {
|
display: flex;
|
flex-direction: column;
|
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 {
|
font-size: 24px;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
