<template>
|
<div class="rework">
|
<div class="rework_list">
|
<div class="rework_list_item" @click="show = true">
|
<span>检验申请类型</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="openDH = true">
|
<span>客返单号</span>
|
<div class="rework_list_item_right">
|
<span :class="form.singleName ? 'black' : ''">{{form.singleName ? form.singleName : '点击选择客返单号'}}</span>
|
<van-icon name="arrow" size="20" color="#999999" />
|
</div>
|
</div>
|
<div class="rework_list_item">
|
<span>客返客户</span>
|
<div class="rework_list_item_right">
|
<span class="black">{{form.clientName}}</span>
|
</div>
|
</div>
|
<div class="rework_list_item">
|
<span>退回原因</span>
|
<div class="rework_list_item_right">
|
<input type="text" v-model="form.reason" placeholder="请输入退回原因" />
|
</div>
|
</div>
|
</div>
|
<div class="rework_qd">
|
<div class="rework_qd_title">
|
<div class="x"></div>
|
<span>退回工装清单(1)</span>
|
</div>
|
<van-swipe-cell>
|
<div class="rework_qd_item">
|
<div class="rework_qd_item_i">
|
<span class="black">LK0001：</span><span class="black">10件</span>
|
</div>
|
<div class="rework_qd_item_i">
|
<span>物料信息：</span><span>花键2993 | 21E8-002-2993-H1</span>
|
</div>
|
<div class="rework_qd_item_i">
|
<span>批次号：</span><span>PC-20220719-0001</span>
|
</div>
|
</div>
|
<template #right>
|
<van-button style="height: 100%;" square type="danger" text="删除" />
|
</template>
|
</van-swipe-cell>
|
</div>
|
<div class="rework_footer">
|
<div class="rework_footer_add" @click="open">扫码添加工装</div>
|
<div style="width: 22px;"></div>
|
<button class="rework_footer_submit">提交</button>
|
</div>
|
<v-ScanCode
|
:openCode="openCode"
|
:infos="['请扫描工装码']"
|
@closePopup="closePopup"
|
@onDecode="onDecode">
|
</v-ScanCode>
|
<!-- 类型 -->
|
<van-popup v-model:show="show" position="bottom" round :style="{ height: '45%' }">
|
<van-picker
|
title="请选择类型"
|
:columns="columns"
|
@confirm="onConfirm"
|
@cancel="onCancel"
|
/>
|
</van-popup>
|
<!-- 单号 -->
|
<van-popup v-model:show="openDH" position="bottom" round :style="{ height: '45%' }">
|
<van-picker
|
title="请选择单号"
|
:columns="columns3"
|
@confirm="onConfirm3"
|
@cancel="onCancel3"
|
/>
|
</van-popup>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive } from 'vue'
|
|
// 表单数据
|
let form = reactive({
|
type: '',
|
typeName: '',
|
clientName: '客户',
|
single: '',
|
singleName: '',
|
reason: ''
|
})
|
|
// 类型
|
const columns = [{ text: '工序返工', id: 1 },{ text: '客退返工', id: 2 },{ text: '客返返修', id: 3 }]
|
|
// 单号
|
const columns3 = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华']
|
|
let show = ref<boolean>(false)
|
|
let openDH = ref<boolean>(false)
|
|
let openCode = ref<boolean>(false)
|
|
// 类型确认
|
const onConfirm = (value: any) => {
|
form.type = value.id
|
form.typeName = value.text
|
show.value = false
|
};
|
|
const onCancel = () => {
|
show.value = false
|
}
|
|
const onConfirm3 = (value: any) => {
|
form.single = value.id
|
form.singleName = value.text
|
openDH.value = false
|
};
|
|
const onCancel3 = () => {
|
openDH.value = false
|
}
|
|
const closePopup = (): void => {
|
openCode.value = false
|
}
|
|
const onDecode = (data: string[]): void => {
|
console.log(data)
|
openCode.value = false
|
}
|
|
const open = (): void => {
|
openCode.value = true
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.rework {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
.rework_list {
|
display: flex;
|
flex-direction: column;
|
background: white;
|
margin-top: 20px;
|
.rework_list_item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 98px;
|
padding: 0 30px;
|
border-bottom: 1PX solid #E5E5E5;
|
&:last-child {
|
border: none;
|
}
|
span {
|
font-size: 30px;
|
font-weight: 400;
|
color: #222222;
|
flex-shrink: 0;
|
}
|
.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;
|
padding: 0 30px 30px 30px;
|
span {
|
font-size: 32px;
|
font-weight: 500;
|
color: #222222;
|
}
|
.x {
|
width: 8px;
|
height: 30px;
|
background: #4275FC;
|
border-radius: 2px;
|
margin-right: 12px;
|
}
|
}
|
.rework_qd_item {
|
background: #ffffff;
|
padding: 30px;
|
display: flex;
|
flex-direction: column;
|
.rework_qd_item_i {
|
display: flex;
|
align-items: center;
|
margin-bottom: 30px;
|
&:last-child {
|
margin-bottom: 0!important;
|
}
|
.black {
|
font-size: 30px!important;
|
font-weight: 400!important;
|
color: #222222!important;
|
}
|
span {
|
&:first-child {
|
font-size: 26px;
|
font-weight: 400;
|
color: #666666;
|
}
|
&:last-child {
|
font-size: 26px;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
}
|
}
|
.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>
|
