<template>
|
<el-dialog
|
custom-class="sy-modal"
|
|
title="计划下发的缺料信息"
|
width="760px"
|
:before-close="onClose"
|
>
|
<template #default>
|
<div class="tasks-of-output-plan-check-modal-content">
|
<el-scrollbar>
|
<el-alert title="您将要下发的出库计划有以下缺料状况,确认要继续下发吗?" type="warning" :closable="false" />
|
<div class="info-view">
|
<!-- ##################### -->
|
<div class="info-row" v-for="(item,index) in infos" :key="'check-info-'+index">
|
<p>计划号{{item.PlanNo}}:<span v-if="!item.Data || item.Data.length===0">无缺料</span></p>
|
<div class="missing-list" v-if="item.Data && item.Data.length>0">
|
<el-table :data="item.Data" border stripe>
|
<el-table-column width="55" label="序号">
|
<template #default="scope">{{scope.$index+1}}</template>
|
</el-table-column>
|
<el-table-column prop="SerialNumber" label="序列号" />
|
<el-table-column prop="OrderNo" label="订货号" />
|
</el-table>
|
</div>
|
</div>
|
<!-- ##################### -->
|
</div>
|
</el-scrollbar>
|
</div>
|
|
</template>
|
<!-- ************************************ -->
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="onClose">取 消</el-button>
|
<el-button type="primary" @click="onSubmit">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name:'tasksOfOutputPlanCheckModalCompontent',
|
emits:['submitCallback','update:visible'],
|
props:{
|
visible:{
|
type:Boolean,
|
default:false
|
},
|
infos:{
|
type:Object,
|
default:function(){
|
return []
|
}
|
}
|
},
|
data(){
|
return {
|
|
}
|
},
|
watch:{
|
visible(newVal,oldVal){
|
if (newVal!==oldVal) {
|
if (newVal) {
|
this.initShow();
|
} else {
|
|
}
|
}
|
}
|
},
|
methods:{
|
initShow(){
|
|
},
|
close(){
|
this.$emit('update:visible',false)
|
},
|
onClose(){
|
this.close();
|
},
|
onSubmit(){
|
this.close();
|
this.$emit('submitCallback')
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.tasks-of-output-plan-check-modal-content{
|
height: 400px;
|
box-sizing: border-box;
|
padding: 8px;
|
.info-view{
|
padding-top: 8px;
|
.info-row{
|
margin-bottom: 10px;
|
.missing-list{
|
padding-top: 6px;
|
}
|
&:last-child{
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
</style>
|