<template>
|
<div class="wmsSubstituteGood-container">
|
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
|
<el-form :model="queryParams" @submit.native.prevent ref="queryForm" labelWidth="100">
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10" class="mb10">
|
<el-form-item label="部件条码" size="large">
|
<el-input
|
size="large"
|
v-model="queryParams.upi"
|
ref="materialCodeInput"
|
clearable=""
|
placeholder="请扫部件条码"
|
@keyup.enter.prevent="handleEnter"
|
@confirm.enter.prevent="handleEnter"
|
/>
|
</el-form-item>
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="mb10">
|
<el-form-item>
|
<el-button-group style="display: flex; align-items: center">
|
<el-button size="large" type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
|
<el-button size="large" icon="ele-Refresh" @click="reset"> 重置 </el-button>
|
<!--
|
<el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUI" v-if="!showAdvanceQueryUI" style="margin-left:5px;"> 高级查询 </el-button>
|
<el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUI" v-if="showAdvanceQueryUI" style="margin-left:5px;"> 隐藏 </el-button> -->
|
<!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Plus" @click="openAddWmsSubstituteGood" v-auth="'wmsSubstituteGood:add'"> 新增 </el-button> -->
|
</el-button-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<br />
|
<div class="detailBox" style="height: calc(65vh)">
|
<div class="titleTip">
|
<div class="" v-show="isSuccess == '成功'">
|
<svg t="1732788314050" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11359" width="100" height="100">
|
<path
|
d="M874.119618 149.859922A510.816461 510.816461 0 0 0 511.997 0.00208a509.910462 509.910462 0 0 0-362.119618 149.857842c-199.817789 199.679789-199.817789 524.581447 0 724.260236a509.969462 509.969462 0 0 0 362.119618 149.857842A508.872463 508.872463 0 0 0 874.119618 874.120158c199.836789-199.679789 199.836789-524.581447 0-724.260236zM814.94268 378.210681L470.999043 744.132295a15.359984 15.359984 0 0 1-5.887994 4.095996c-1.751998 1.180999-2.913997 2.362998-5.276994 2.913997a34.499964 34.499964 0 0 1-13.469986 2.914997 45.547952 45.547952 0 0 1-12.897986-2.303998l-4.095996-2.363997a45.291952 45.291952 0 0 1-7.009992-4.095996l-196.902793-193.789796a34.126964 34.126964 0 0 1-10.555989-25.186973c0-9.37399 3.583996-18.74698 9.98399-25.186974a36.429962 36.429962 0 0 1 50.372947 0l169.98382 167.423824L763.389735 330.220732a37.059961 37.059961 0 0 1 50.371947-1.732998 33.647965 33.647965 0 0 1 11.165988 25.186973 35.544963 35.544963 0 0 1-9.98399 24.575974v-0.04z m0 0"
|
fill="#52C41A"
|
p-id="11360"
|
></path>
|
</svg>
|
<p class="okText">补件请求成功！</p>
|
</div>
|
<div class="" v-show="isSuccess && isSuccess != '成功'">
|
<svg t="1732842594517" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4303" width="100" height="100">
|
<path
|
d="M549.044706 512l166.189176-166.249412a26.383059 26.383059 0 0 0 0-36.98447 26.383059 26.383059 0 0 0-37.044706 0L512 475.015529l-166.249412-166.249411a26.383059 26.383059 0 0 0-36.98447 0 26.383059 26.383059 0 0 0 0 37.044706L475.015529 512l-166.249411 166.249412a26.383059 26.383059 0 0 0 0 36.98447 26.383059 26.383059 0 0 0 37.044706 0L512 548.984471l166.249412 166.249411a26.383059 26.383059 0 0 0 36.98447 0 26.383059 26.383059 0 0 0 0-37.044706L548.984471 512zM512 1024a512 512 0 1 1 0-1024 512 512 0 0 1 0 1024z"
|
fill="#E84335"
|
p-id="4304"
|
></path>
|
</svg>
|
<p class="no_okText">{{ isSuccess }}</p>
|
</div>
|
</div>
|
<ul>
|
<li>
|
<span class="text_left">包装编号:</span>
|
<span class="text_rt">{{ tableData.packageCode }}</span>
|
</li>
|
<li>
|
<span class="text_left">部件条码:</span>
|
<span class="text_rt">{{ tableData.upi }}</span>
|
</li>
|
|
<li>
|
<span class="text_left">部件名称:</span>
|
<span class="text_rt">{{ tableData.detailName }}</span>
|
</li>
|
|
<li>
|
<span class="text_left">批次号:</span>
|
<span class="text_rt">{{ tableData.planNo }}</span>
|
</li>
|
<li>
|
<span class="text_left">订单号:</span>
|
<span class="text_rt">{{ tableData.orderId }}</span>
|
</li>
|
<li>
|
<span class="text_left">长:</span>
|
<span class="text_rt">{{ tableData.length }}</span>
|
</li>
|
<li>
|
<span class="text_left">宽:</span>
|
<span class="text_rt">{{ tableData.width }}</span>
|
</li>
|
<li>
|
<span class="text_left">厚:</span>
|
<span class="text_rt">{{ tableData.thk }}</span>
|
</li>
|
|
<li>
|
<span class="text_left">销售合同单号:</span>
|
<span class="text_rt">{{ tableData.info4 }}</span>
|
</li>
|
|
<li>
|
<span class="text_left">客户名称:</span>
|
<span class="text_rt">{{ tableData.info10 }}</span>
|
</li>
|
<li>
|
<span class="text_left">自提或发货:</span>
|
<span class="text_rt">{{ tableData.info11 }}</span>
|
</li>
|
<li>
|
<span class="text_left">包装部件总数量:</span>
|
<span class="text_rt">{{ tableData.info12 }}</span>
|
</li>
|
<li>
|
<span class="text_left">包装面积:</span>
|
<span class="text_rt">{{ tableData.info13 }}</span>
|
</li>
|
<!-- <li>
|
<span class="text_left">客户名称:</span>
|
<span class="text_rt">{{ tableData.Info10 }}</span>
|
</li> -->
|
|
<!-- <li>
|
<span class="text_left">长:</span>
|
<span class="text_rt">{{ tableData.length }}</span>
|
</li>
|
<li>
|
<span class="text_left">宽:</span>
|
<span class="text_rt">{{ tableData.width }}</span>
|
</li>
|
<li>
|
<span class="text_left">厚:</span>
|
<span class="text_rt">{{ tableData.thk }}</span>
|
</li>
|
<li>
|
<span class="text_left">部件纹理:</span>
|
<span class="text_rt">{{ tableData.matgrid }}</span>
|
</li>
|
<li>
|
<span class="text_left">是否封边:</span>
|
<span class="text_rt">{{ tableData.isEB }}</span>
|
</li>
|
<li>
|
<span class="text_left">打孔设备编号:</span>
|
<span class="text_rt">{{ tableData.dRNum }}</span>
|
</li> -->
|
</ul>
|
</div>
|
<!-- 生成form 齐套 齐包 设置ng包 -->
|
<!-- 生成form 齐套 齐包 设置ng包 -->
|
<!-- <el-form :model="ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
|
<el-row :gutter="35">
|
<el-form-item v-show="false">
|
<el-input v-model="ruleForm.id" />
|
</el-form-item>
|
|
<el-form-item label="齐套" prop="completeSet">
|
<el-select v-model="ruleForm.completeSet" placeholder="请选择齐套">
|
<el-option label="选项1" value="option1"></el-option>
|
<el-option label="选项2" value="option2"></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="齐包" prop="packageSetup">
|
<el-input v-model="ruleForm.packageSetup" placeholder="请输入齐包设置"></el-input>
|
</el-form-item>
|
|
<el-form-item label="ng包" prop="ngPackage">
|
<el-input v-model="ruleForm.ngPackage" placeholder="请输入ng包"></el-input>
|
</el-form-item>
|
|
</el-row>
|
</el-form> -->
|
</el-card>
|
</div>
|
</template>
|
|
<script lang="ts" setup="" name="wmsSubstituteGood">
|
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
import { auth } from '/@/utils/authFunction';
|
import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
|
import { formatDate } from '/@/utils/formatTime';
|
import { ShortageList } from '/@/api/main/ReportCenter/wmsStockQuan_new';
|
|
const showAdvanceQueryUI = ref(false);
|
const loading = ref(false);
|
const tableData = ref<any>({});
|
const queryParams = ref<any>({
|
upi: '',
|
});
|
const tableParams = ref({
|
page: 1,
|
pageSize: 10,
|
total: 0,
|
});
|
|
//=======================鼠标定位 用于引用输入框=====================
|
let materialCodeInput = ref(null);
|
let inactivityTimer = null;
|
|
// 处理用户活动的函数
|
const handleUserActivity = () => {
|
if (inactivityTimer) {
|
clearTimeout(inactivityTimer);
|
}
|
inactivityTimer = setTimeout(() => {
|
// 清空输入框的值
|
materialCodeInput.value.$el.querySelector('input').value = '';
|
materialCodeInput.value.$el.querySelector('input').focus();
|
}, 2000); // 设定2秒未操作则自动聚焦
|
};
|
|
onMounted(() => {
|
// 在组件挂载后进行聚焦
|
materialCodeInput.value.$el.querySelector('input').focus();
|
document.addEventListener('mousemove', handleUserActivity);
|
document.addEventListener('keydown', handleUserActivity);
|
});
|
|
onBeforeUnmount(() => {
|
clearTimeout(inactivityTimer);
|
document.removeEventListener('mousemove', handleUserActivity);
|
document.removeEventListener('keydown', handleUserActivity);
|
});
|
|
//=======================end鼠标定位 用于引用输入框=====================
|
const isSuccess = ref('');
|
// 查询操作 888888888
|
const handleQuery = async () => {
|
console.log('8888888进入方法', queryParams.value);
|
if (!queryParams.value.upi) {
|
return;
|
}
|
loading.value = true;
|
var res = await ShortageList(Object.assign(queryParams.value, tableParams.value));
|
|
queryParams.value.upi = '';
|
handleResponse(res);
|
};
|
const reset = async () => {
|
queryParams.value={};
|
tableData.value ={};
|
isSuccess.value ='';
|
};
|
|
function handleResponse(res: any) {
|
tableData.value = res.data.result ?? {};
|
materialCodeInput.value.$el.querySelector('input').value = '';
|
materialCodeInput.value.$el.querySelector('input').focus();
|
if (res.data.code == 200) {
|
isSuccess.value = res.data.result ? '成功' : res.data.message || '未查询到数据';
|
} else if (res.data.code == 400) {
|
loading.value = false;
|
isSuccess.value = res.data.message || '未查询到数据';
|
return;
|
} else {
|
loading.value = false;
|
isSuccess.value = '';
|
ElMessage.warning('网络异常 请求失败');
|
return;
|
}
|
}
|
|
const handleEnter = (event: Event) => {
|
event.preventDefault(); // 阻止默认事件
|
handleQuery();
|
};
|
</script>
|
<style scoped>
|
:deep(.el-input),
|
:deep(.el-select),
|
:deep(.el-input-number) {
|
width: 100%;
|
}
|
|
.detailBox {
|
width: 90%;
|
margin: 0 auto;
|
display: block;
|
padding-bottom: 10px;
|
ul {
|
margin: 0;
|
padding: 0;
|
li {
|
margin-top: 20px;
|
display: block;
|
line-height: 30px;
|
text-align: left;
|
list-style-type: none;
|
width: 48%;
|
display: inline-block;
|
word-wrap: break-word;
|
}
|
}
|
}
|
.text_left {
|
font-weight: 700;
|
font-size: 40px; /* 调整字体大小 */
|
}
|
.text_rt {
|
font-weight: 700;
|
color: #00B2EE; /* 设置图标颜色 */
|
font-size: 40px; /* 调整字体大小 */
|
}
|
.my-icon {
|
font-size: 36px; /* 调整字体大小 */
|
color: #00ff11; /* 设置图标颜色 */
|
}
|
.titleTip {
|
font-weight: 700;
|
text-align: center;
|
font-size: 60px; /* 调整字体大小 */
|
.okText {
|
margin-bottom: 20px;
|
color: #52C41A; /* 设置图标颜色 */
|
}
|
.no_okText {
|
margin-bottom: 20px;
|
color: #E84335; /* 设置图标颜色 */
|
}
|
}
|
</style>
|
