<template>
|
<GlobalWindow width="960px" title="出库单详情" :visible.sync="visible" :confirm-working="isWorking" @close="close"
|
@confirm="confirm">
|
<div class="main">
|
<div class="title">
|
<span>工单详情</span>
|
</div>
|
<div class="main_content">
|
<div class="list">
|
<div class="item">
|
<div class="la">出库仓库</div>
|
<div class="val">{{ info.projectName }}</div>
|
</div>
|
<div class="item">
|
<div class="la">出库日期</div>
|
<div class="val">{{ info.categoryName }}</div>
|
</div>
|
<div class="item">
|
<div class="la">出库类型</div>
|
<div class="val">{{ info.creatorName }}{{ info.creatorCompany ? "-" + info.creatorCompany : '' }}</div>
|
</div>
|
<div class="item">
|
<div class="la">处理人</div>
|
<div class="val">{{ info.creatorPhone || info.creatorMobile }}</div>
|
</div>
|
<div class="item">
|
<div class="la">备注</div>
|
<div class="val">{{ info.createDate }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="title">物料信息</div>
|
<el-table :data="list" stripe>
|
<el-table-column align="center" type="index" width="55" />
|
<el-table-column prop="creatorName" label="物料名称" show-overflow-tooltip min-width="80px"></el-table-column>
|
<el-table-column prop="categoryName" label="物料编码" show-overflow-tooltip min-width="100px"></el-table-column>
|
<el-table-column prop="createDate" label="条形码" show-overflow-tooltip min-width="100px"></el-table-column>
|
<el-table-column prop="dealUserName" label="品牌" show-overflow-tooltip min-width="80px"></el-table-column>
|
<el-table-column prop="dealUserName" label="单位" show-overflow-tooltip min-width="80px"></el-table-column>
|
<el-table-column prop="dealUserName" 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 { detailById, dispatchOrder, dealOrder } from '@/api/workorder/ywWorkorder'
|
import { getUserList } from '@/api/system/user'
|
import { Message, Loading } from 'element-ui'
|
import dayjs from 'dayjs'
|
export default {
|
components: {
|
GlobalWindow
|
},
|
extends: BaseOpera,
|
data() {
|
return {
|
id: '',
|
visible: false,
|
info: {},
|
list: []
|
|
|
}
|
},
|
created() {
|
// this.getDetail()
|
},
|
methods: {
|
getDetail() {
|
const { id } = this
|
detailById(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>
|
