<template>
|
<div class="rework">
|
<div class="rework_list">
|
<div class="rework_list_item" @click="typeShow = true">
|
<span><b>*</b>单据类型</span>
|
<div class="rework_list_item_right">
|
<span :class="form.typeName ? 'black' : ''">{{form.typeName ? form.typeName : '请选择'}}</span>
|
<van-icon name="arrow" size="20" color="#999999" />
|
</div>
|
</div>
|
<div class="rework_list_item" @click="warehouseShow = true">
|
<span><b>*</b>出库仓库</span>
|
<div class="rework_list_item_right">
|
<span :class="form.warehouseName ? 'black' : ''">{{form.warehouseName ? form.warehouseName : '请选择'}}</span>
|
<van-icon name="arrow" size="20" color="#999999" />
|
</div>
|
</div>
|
</div>
|
<div class="rework_qd">
|
<div class="rework_qd_title">
|
<div class="rework_qd_title_left">
|
<div class="x"></div>
|
<span>{{`出库物料清单${list.length}`}}</span>
|
</div>
|
<div class="rework_qd_title_right" @click="openMs">
|
<img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" />
|
<span>增加出库</span>
|
</div>
|
</div>
|
<van-swipe-cell v-for="(item, index) in list" :key="index">
|
<div class="rework_qd_item">
|
<img class="rework_qd_item_dele" @click="dele(index)" src="@/assets/icon/chuku_ic_delete@2x.png" alt="" />
|
<div class="rework_qd_item_wl">
|
<span>{{ item.materialName }} | {{ item.materialCode }}</span>
|
</div>
|
<div class="rework_qd_item_cate">
|
<span class="green" v-if="item.qualityType === '0'">合格</span>
|
<span class="yellow" v-if="item.qualityType === '1'">不良</span>
|
<span class="red" v-if="item.qualityType === '2'">报废</span>
|
<span> | {{ item.procedureName || '-' }} | </span>
|
<span>{{ item.batch || '-' }}</span>
|
</div>
|
<div class="rework_qd_item_hw">
|
<span>出库货位：{{ item.locationName }}</span>
|
<div class="rework_qd_item_hw_right">
|
<span>数量：</span>
|
<input type="number" v-model="item.num" @input="changeNum(item)" placeholder="0" />
|
<span>{{ item.unitName }}</span>
|
</div>
|
</div>
|
</div>
|
<!-- <template #right>
|
<van-button style="height: 100%;" square type="danger" text="删除" @click="dele(index)" />
|
</template> -->
|
</van-swipe-cell>
|
</div>
|
<div class="rework_zw"></div>
|
<div class="rework_footer">
|
<button class="rework_footer_submit" @click="onConfirm">提交</button>
|
</div>
|
<Warehouse :show="warehouseShow" @close="close" @value="getValue" />
|
<Materials ref="Material" :show="materialsShow" :id="form.warehouseId.toString()" @close="close1" @value="getValue1" />
|
<!-- 单据类型 -->
|
<van-popup v-model:show="typeShow" round position="bottom" :style="{ height: '50%' }">
|
<van-picker
|
:columns="columns"
|
@confirm="onConfirm1"
|
@cancel="onCancel"
|
:columns-field-names="customFieldName"
|
/>
|
</van-popup>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, ref, reactive } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { Toast } from 'vant'
|
import { createForStandard } from '@/apis/WorkOrderAPI'
|
import Warehouse from '@/components/newCom/Warehouse.vue'
|
import Materials from '@/components/newCom/MaterialsB.vue'
|
const Material = ref(null)
|
const router = useRouter()
|
// 表单数据
|
let form = reactive({
|
warehouseName: '',
|
warehouseId: '',
|
type: '',
|
typeName: ''
|
})
|
|
let columns = ref([
|
{ name: '销售出库', id: 18 },
|
{ name: '库存调整', id: 28 },
|
{ name: '仓库报废', id: 21 }
|
])
|
const customFieldName = {
|
text: 'name'
|
};
|
let mIds = ref('')
|
let list = ref<Array<any>>([])
|
let warehouseShow = ref<boolean>(false)
|
let materialsShow = ref<boolean>(false)
|
let typeShow = ref<boolean>(false)
|
|
const onConfirm1 = (value: any) => {
|
form.typeName = value.name
|
form.type = value.id
|
typeShow.value = false
|
};
|
const onCancel = () => {
|
typeShow.value = false
|
}
|
const changeNum = (obj: any) => {
|
if (obj.num < 0) {
|
obj.num = ''
|
return Toast('出库物料数量必须大于0')
|
}
|
if (obj.num > obj.total) {
|
obj.num = ''
|
return Toast('出库物料数量不能大于库存数')
|
}
|
}
|
// 获取当天年月日
|
const getDay = () => {
|
var date = new Date();
|
var year = date.getFullYear();
|
var month = date.getMonth() + 1;
|
var day = date.getDate();
|
return `${year}-${month <= 9 ? `0${month}` : month}-${day <= 9 ? `0${day}` : day}`
|
}
|
|
// 提交
|
const onConfirm = () => {
|
if (!form.type) return Toast('请选择单据类型')
|
if (!form.warehouseId) return Toast('请选择出库仓库')
|
if (list.value.length === 0) return Toast('至少选择一条出库物料')
|
for (let i = 0; i < list.value.length; i++) {
|
if (!list.value[i].num || list.value[i].num == '' || list.value[i].num <= 0) {
|
return Toast(`第${i + 1}个出库物料数量必须大于0`)
|
}
|
if (list.value[i].num > list.value[i].total) {
|
return Toast(`第${i + 1}个物料数量不能大于库存量！`)
|
}
|
}
|
createForStandard({
|
billType: form.type,
|
planDate: getDay(),
|
origin: 0,
|
type: 0,
|
warehouseId: form.warehouseId,
|
woutBoundDetailBeans: list.value
|
}).then(res => {
|
if (res.code === 200) {
|
Toast.success({message: '出库成功'})
|
setTimeout(() => {
|
router.go(-1)
|
}, 2000)
|
}
|
})
|
}
|
|
// 打开选择物料
|
const openMs = () => {
|
if (!form.warehouseId) return Toast('请先选择出库仓库')
|
const { selected }: any = Material.value
|
let ids = list.value.map(item => item.id)
|
Material.value.selected = ids
|
materialsShow.value = true
|
}
|
|
// 删除
|
const dele = (index: any) => {
|
if (list.value.length === 1) {
|
// Toast('至少保留一条工装信息')
|
Toast('至少保留一条物流清单信息！')
|
return
|
}
|
list.value.splice(index, 1)
|
}
|
// 关闭仓库选择弹框
|
const close = (): void => {
|
warehouseShow.value = false
|
}
|
// 关闭仓库选择弹框
|
const close1 = (): void => {
|
materialsShow.value = false
|
}
|
// 选择仓库回调
|
const getValue = (item: any): void => {
|
form.warehouseName = item.name
|
form.warehouseId = item.id
|
list.value = []
|
warehouseShow.value = false
|
}
|
const getValue1 = (item: any): void => {
|
item.forEach((row: any) => {
|
row.total = row.num
|
})
|
list.value = [...item, ...list.value]
|
materialsShow.value = false
|
console.log(list.value)
|
}
|
|
onMounted(() => {
|
// 获取工装信息
|
// getLKInfo(route.query.id as string)
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.rework {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
.rework_list {
|
display: flex;
|
flex-direction: column;
|
background: white;
|
padding: 0 30px;
|
box-sizing: border-box;
|
.rework_list_item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 98px;
|
border-bottom: 1PX solid #E5E5E5;
|
&:last-child {
|
border: none;
|
}
|
span {
|
font-size: 30px;
|
font-weight: 400;
|
color: #222222;
|
flex-shrink: 0;
|
b {
|
font-size: 30px;
|
color: red;
|
margin-right: 5px;
|
}
|
}
|
.rework_list_item_right {
|
display: flex;
|
align-items: center;
|
span {
|
font-size: 28px;
|
font-weight: 400;
|
color: #999999;
|
}
|
.black {
|
color: black !important;
|
}
|
input {
|
width: 230px;
|
font-size: 28px;
|
border: none;
|
}
|
input::-webkit-input-placeholder { /* WebKit browsers */
|
font-size: 28px;
|
font-weight: 400;
|
color: #B2B2B2;
|
}
|
}
|
}
|
}
|
.rework_qd {
|
margin-top: 40px;
|
.rework_qd_title {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 30px 30px 30px;
|
.rework_qd_title_left {
|
display: flex;
|
align-items: center;
|
span {
|
font-size: 32px;
|
font-weight: 500;
|
color: #222222;
|
}
|
.x {
|
width: 8px;
|
height: 30px;
|
background: #4275FC;
|
border-radius: 2px;
|
margin-right: 12px;
|
}
|
}
|
.rework_qd_title_right {
|
display: flex;
|
align-items: center;
|
img {
|
width: 28px;
|
height: 28px;
|
margin-right: 12px;
|
}
|
span {
|
font-size: 28px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #4275FC;
|
}
|
}
|
}
|
.rework_qd_item {
|
background: #ffffff;
|
padding: 30px;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 30px;
|
position: relative;
|
.rework_qd_item_dele {
|
position: absolute;
|
right: 0;
|
top: 0;
|
width: 48px;
|
height: 48px;
|
}
|
.rework_qd_item_wl {
|
span {
|
font-size: 30px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #222222;
|
}
|
}
|
.rework_qd_item_cate {
|
margin-top: 18px;
|
span {
|
font-size: 24px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
}
|
}
|
.rework_qd_item_hw {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 24px;
|
span {
|
font-size: 26px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
}
|
.rework_qd_item_hw_right {
|
display: flex;
|
align-items: center;
|
span {
|
font-size: 26px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
}
|
input {
|
width: 180px;
|
height: 60px;
|
font-size: 28px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
background: #FFFFFF;
|
border-radius: 8px;
|
border: 1PX solid #CCCCCC;
|
margin: 0 20px;
|
padding: 0 30px;
|
box-sizing: border-box;
|
text-align: right;
|
}
|
}
|
}
|
}
|
}
|
.rework_zw {
|
height: 168px;
|
}
|
.rework_footer {
|
width: calc(100% - 60px);
|
position: fixed;
|
bottom: 0;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 30px 68px 30px;
|
.rework_footer_add {
|
flex: 1;
|
height: 88px;
|
font-size: 30px;
|
font-weight: 500;
|
color: $nav-color;
|
background: #FFFFFF;
|
box-shadow: 0 0 12px 0 rgba(0,0,0,0.0800);
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.rework_footer_submit {
|
flex: 1;
|
height: 88px;
|
font-size: 30px;
|
font-weight: 500;
|
color: #ffffff;
|
background: $nav-color;
|
box-shadow: 0 0 12px 0 rgba(0,0,0,0.0800);
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border: none;
|
}
|
}
|
}
|
</style>
|
