<template>
|
<GlobalWindow width="960px" :showConfirm="false" title="出库单详情" :visible.sync="visible" :confirm-working="isWorking" @close="close"
|
@confirm="confirm">
|
<div class="main">
|
<div class="title">
|
<span>出库单编号：{{ info.code }}</span>
|
</div>
|
<div class="title">
|
<span>基础信息</span>
|
</div>
|
<div class="main_content">
|
<div class="list">
|
<div class="item">
|
<div class="la">出库仓库</div>
|
<div class="val">{{ info.warehouseName }}</div>
|
</div>
|
<div class="item">
|
<div class="la">出库日期</div>
|
<div class="val">{{ info.doneDate }}</div>
|
</div>
|
<div class="item">
|
<div class="la">出库类型</div>
|
<div class="val" v-if="info.type || info.type == 0">{{ StoreTypeOps[info.type].name }}</div>
|
</div>
|
<div class="item">
|
<div class="la">处理人</div>
|
<div class="val">{{ info.createUserName }}</div>
|
</div>
|
<div class="item" style="width: 66.6%;">
|
<div class="la">备注</div>
|
<div class="val">{{ info.remark }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="title">物料信息</div>
|
<el-table :data="info.recordList" stripe>
|
<el-table-column align="center" label="序号" type="index" width="55" />
|
<el-table-column prop="materialName" label="物料名称" show-overflow-tooltip min-width="80px"></el-table-column>
|
<el-table-column prop="materialCode" label="物料编码" show-overflow-tooltip min-width="100px"></el-table-column>
|
<el-table-column prop="materialQrcode" label="条形码" show-overflow-tooltip min-width="100px"></el-table-column>
|
<el-table-column prop="materialBrand" label="品牌" show-overflow-tooltip min-width="80px"></el-table-column>
|
<el-table-column prop="materialUnitName" label="单位" show-overflow-tooltip min-width="80px"></el-table-column>
|
<el-table-column prop="stock" label="出库数量" show-overflow-tooltip min-width="80px"></el-table-column>
|
</el-table>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import BaseOpera from '@/components/base/BaseOpera'
|
import { ywOutinboundDetail } from '@/api'
|
import { StoreTypeOps } from './config'
|
export default {
|
components: {
|
GlobalWindow
|
},
|
extends: BaseOpera,
|
data() {
|
return {
|
visible: false,
|
info: {recordList: []},
|
StoreTypeOps
|
|
|
}
|
},
|
created() {
|
},
|
methods: {
|
getDetail(id) {
|
ywOutinboundDetail(id).then(res => {
|
this.info = res
|
})
|
},
|
close() {
|
this.visible = false
|
this.$emit('close')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/style/variables.scss';
|
|
.main {
|
padding-top: 20px;
|
|
.title {
|
font-weight: 500;
|
font-size: 18px;
|
color: $primary-color;
|
margin-bottom: 10px;
|
display: flex;
|
align-items: center;
|
|
.status {
|
padding: 0 12px;
|
height: 24px;
|
line-height: 24px;
|
border-radius: 2px;
|
border: 1px solid #00BA92;
|
color: #00BA92;
|
font-weight: 400;
|
font-size: 12px;
|
margin-left: 10px;
|
}
|
|
.primaryColor {
|
border: 1px solid rgba(63, 126, 239, .2);
|
background-color: rgba(63, 126, 239, .2);
|
}
|
|
.green {
|
background-color: rgba(83, 183, 148, .2);
|
border: 1px solid rgba(83, 183, 148, .2);
|
}
|
|
.gray {
|
color: #333333;
|
background-color: rgba(128, 128, 128, .2);
|
border: 1px solid rgba(128, 128, 128, .2);
|
}
|
}
|
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
/* background: #F7F7F7; */
|
border-radius: 2px;
|
padding: 15px 20px;
|
margin-bottom: 16px;
|
|
.item {
|
width: 33.3%;
|
margin-bottom: 14px;
|
|
.la {
|
color: #7f7f7f;
|
margin-bottom: 6px;
|
}
|
}
|
|
.item2 {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
|
.la {
|
margin-bottom: 0;
|
width: 72px;
|
}
|
}
|
|
.max {
|
width: 100%;
|
}
|
}
|
|
}
|
</style>
|
