<template>
|
<!-- 遮罩层 -->
|
<div class="mask-layer" v-if="loading"></div>
|
|
<vol-box v-model="show" title="批量Excel盘点出库" :width="800" :height="500">
|
<template #content>
|
<el-form ref="form" :model="form" label-width="90px" class="mt-10">
|
<!-- 出库区域（和你直接出库完全一样） -->
|
<el-form-item label="出库区域:">
|
<el-select v-model="station" placeholder="请选择出库区域" style="width: 100%">
|
<el-option
|
v-for="item in stations"
|
:key="item.key"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<!-- Excel上传 -->
|
<el-form-item label="Excel文件:" prop="file">
|
<el-upload
|
ref="upload"
|
:auto-upload="false"
|
:limit="1"
|
accept=".xlsx"
|
:file-list="fileList"
|
@change="handleFileChange"
|
>
|
<el-button type="primary" :disabled="loading">选择Excel文件</el-button>
|
<template #tip>
|
<div class="text-gray-500 text-xs mt-1">
|
仅支持 .xlsx<br>
|
第八列：仓库号 第二列：物料编码
|
</div>
|
</template>
|
</el-upload>
|
</el-form-item>
|
|
<!-- 结果 -->
|
<el-form-item label="处理结果:">
|
<div class="result-box p-3 border rounded bg-gray-50 h-32 overflow-auto">
|
<div v-if="resultText" class="text-sm whitespace-pre-line">{{ resultText }}</div>
|
<div v-else class="text-gray-400 text-sm">请选择文件并执行批量出库</div>
|
</div>
|
</el-form-item>
|
</el-form>
|
</template>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button size="small" plain @click="resetForm">重置</el-button>
|
<el-button size="small" type="danger" plain @click="batchImport" :loading="loading">
|
<i class="el-icon-check"></i> 确认批量出库
|
</el-button>
|
<el-button size="small" type="primary" plain @click="show = false">
|
<i class="el-icon-close"></i> 关闭
|
</el-button>
|
</div>
|
</template>
|
</vol-box>
|
</template>
|
|
<script>
|
import VolBox from '@/components/basic/VolBox.vue'
|
import { stationManager } from "@/../src/uitils/stationManager";
|
|
export default {
|
components: { VolBox },
|
props: {
|
value: { type: Boolean, default: false }
|
},
|
data() {
|
return {
|
show: false,
|
loading: false,
|
station: stationManager.getStation(), // 从本地缓存获取站台
|
stations: [
|
{ label: "站台2", value: "2-1" },
|
{ label: "站台3", value: "3-1" },
|
],
|
fileList: [],
|
resultText: '',
|
form: {}
|
}
|
},
|
methods: {
|
open() {
|
this.show = true
|
this.station = stationManager.getStation() // 每次打开重新获取
|
this.resetForm()
|
},
|
handleFileChange(file) {
|
this.fileList = [file.raw]
|
},
|
async batchImport() {
|
// 验证站台
|
if (!this.station) {
|
this.$message.warning("请选择出库区域")
|
return
|
}
|
if (this.fileList.length === 0) {
|
this.$message.warning("请选择Excel文件")
|
return
|
}
|
|
this.loading = true
|
this.resultText = "正在处理..."
|
|
try {
|
const formData = new FormData()
|
formData.append('file', this.fileList[0])
|
formData.append('outStation', this.station) // 提交站台！
|
|
const res = await this.http.post(
|
'/api/Task/BatchOutboundByExcel',
|
formData,
|
{ headers: { 'Content-Type': 'multipart/form-data' } }
|
)
|
|
if (res.status) {
|
const d = res.data
|
this.resultText = `满足仓库号和料号总条数：${d.total}\n成功出库总条数：${d.success}\n失败：${d.fail}`
|
if (d.failMsg?.length) this.resultText += `\n\n失败：\n${d.failMsg.join('\n')}`
|
this.$message.success("批量完成")
|
} else {
|
this.resultText = "失败：" + res.message
|
this.$message.error(res.message)
|
}
|
} catch (err) {
|
this.resultText = "异常：" + err.message
|
this.$message.error("批量失败：" + err.message)
|
} finally {
|
this.loading = false
|
}
|
},
|
resetForm() {
|
this.fileList = []
|
this.resultText = ''
|
this.$refs.upload?.clearFiles()
|
}
|
},
|
watch: {
|
show(val) {
|
if (!val) this.resetForm()
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.dialog-footer { text-align: right; }
|
.text-gray-500 { color: #909399; font-size: 12px; }
|
.result-box { white-space: pre-line; line-height: 1.5; }
|
|
/* 遮罩层 和你页面完全一样 */
|
.mask-layer {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100vw;
|
height: 100vh;
|
background: rgba(0,0,0,0.5);
|
z-index: 9999;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.mask-layer::after {
|
content: "";
|
width: 40px;
|
height: 40px;
|
border: 4px solid #fff;
|
border-top: 4px solid #409eff;
|
border-radius: 50%;
|
animation: spin 1s linear infinite;
|
}
|
@keyframes spin {
|
0% { transform: rotate(0deg); }
|
100% { transform: rotate(360deg); }
|
}
|
</style>
|
