Commit c6689a87 by 杨子

feat(入库管理): 新增入库操作和调整入库明细对话框组件

重构入库管理页面,将入库操作和调整入库明细功能拆分为独立组件
优化状态列显示,使用字典标签组件统一展示
移除冗余代码,简化主页面逻辑
parent 65e91500
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
\ No newline at end of file
......@@ -47,7 +47,11 @@
<el-table-column label="温度范围" align="center" prop="temperatureRange" />
<el-table-column label="湿度范围" align="center" prop="humidityRange" />
<el-table-column label="库区容量" align="center" prop="capacity" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="状态" align="center" prop="status" >
<template #default="scope">
<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
<template #footer>
......@@ -63,6 +67,9 @@
import { ref, reactive, watch } from 'vue'
import { listWmsArea } from "@/api/ware/wmsArea"
import { handleTree } from "@/utils/ruoyi"
const { proxy } = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
const props = defineProps({
visible: {
......
......@@ -47,7 +47,11 @@
<el-table-column label="联系电话" align="center" prop="contactPhone" />
<el-table-column label="邮箱" align="center" prop="email" />
<el-table-column label="地址" align="center" prop="address" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="状态" align="center" prop="status" >
<template #default="scope">
<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
<pagination
......@@ -70,6 +74,9 @@
<script setup name="CustomerSelectDialog">
import { ref, reactive, watch } from 'vue'
import { listWmsCustomer } from "@/api/ware/wmsCustomer"
const { proxy } = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
const props = defineProps({
visible: {
......
......@@ -52,10 +52,11 @@
<el-table-column label="货架编码" align="center" prop="locationCode" />
<el-table-column label="货架名称" align="center" prop="locationName" />
<el-table-column label="所属库区" align="center" prop="areaId" />
<el-table-column label="X坐标" align="center" prop="xCoordinate" />
<el-table-column label="Y坐标" align="center" prop="yCoordinate" />
<el-table-column label="Z坐标" align="center" prop="zCoordinate" />
<el-table-column label="货架状态" align="center" prop="status" />
<el-table-column label="货架状态" align="center" prop="status" >
<template #default="scope">
<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
<pagination
......@@ -78,6 +79,9 @@
<script setup name="LocationSelectDialog">
import { ref, reactive, watch } from 'vue'
import { listWmsLocation } from "@/api/ware/wmsLocation"
const { proxy } = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
const props = defineProps({
visible: {
......
......@@ -60,7 +60,11 @@
<el-table-column label="计量单位" align="center" prop="unit" />
<el-table-column label="生产厂家" align="center" prop="manufacturer" />
<el-table-column label="安全库存" align="center" prop="safetyStock" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="状态" align="center" prop="status" >
<template #default="scope">
<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
<pagination
......@@ -153,6 +157,10 @@ import { listWmsMaterial, addWmsMaterial } from "@/api/ware/wmsMaterial"
import { listWmsMaterialCategory } from "@/api/ware/wmsMaterialCategory"
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
const props = defineProps({
visible: {
type: Boolean,
......
......@@ -53,45 +53,6 @@
</el-col>
</el-row>
</el-form-item>
<!-- 预览区域 -->
<el-form-item label="二维码预览">
<div class="qrcode-preview-container">
<div
class="qrcode-preview"
:style="{
width: previewSize.width + 'px',
height: previewSize.height + 'px',
border: '1px solid #dcdfe6'
}"
>
<!-- 这里使用假的二维码预览,实际应该使用二维码生成库 -->
<div class="qrcode-placeholder" v-if="!previewVisible">
点击预览按钮生成二维码
</div>
<div v-else>
<!-- 实际项目中应该使用qrcode库生成二维码 -->
<div class="qrcode-content">
<svg width="100%" height="100%" viewBox="0 0 100 100">
<rect width="100" height="100" fill="white" />
<!-- 简单的二维码样式 -->
<rect x="10" y="10" width="80" height="80" fill="none" stroke="#333" stroke-width="2" />
<rect x="20" y="20" width="10" height="10" fill="#333" />
<rect x="45" y="20" width="10" height="10" fill="#333" />
<rect x="70" y="20" width="10" height="10" fill="#333" />
<rect x="20" y="45" width="10" height="10" fill="#333" />
<rect x="45" y="45" width="10" height="10" fill="#333" />
<rect x="70" y="45" width="10" height="10" fill="#333" />
<rect x="20" y="70" width="10" height="10" fill="#333" />
<rect x="45" y="70" width="10" height="10" fill="#333" />
<rect x="70" y="70" width="10" height="10" fill="#333" />
</svg>
</div>
<div class="qrcode-value" v-if="qrcodeValue">{{ qrcodeValue }}</div>
</div>
</div>
</div>
</el-form-item>
</el-form>
<template #footer>
......@@ -166,7 +127,11 @@ function handleSizeChange() {
// 预览二维码
function handlePreview() {
previewVisible.value = true
handleQrcodePrint({
width: previewSize.value.width,
height: previewSize.value.height,
qrcodeValue: props.qrcodeValue
})
}
// 打印
......@@ -181,12 +146,10 @@ function handlePrint() {
height = form.customHeight
}
// 调用父组件的打印方法
emit('print', {
width,
height,
qrcodeValue: props.qrcodeValue
})
// 使用LODOP直接打印二维码
const LODOP = getLodop(document.getElementById('LODOP1'), document.getElementById('LODOP_EM1'))
CreatePrintPage(width, height, props.qrcodeValue)
LODOP.PRINT()
// 关闭对话框
cancel()
......@@ -201,6 +164,25 @@ function handleClose(newVal) {
function cancel() {
emit('update:visible', false)
}
/** 处理二维码打印 */
function handleQrcodePrint(params) {
const { width, height, qrcodeValue } = params
// 使用LODOP打印二维码
const LODOP = getLodop(document.getElementById('LODOP1'), document.getElementById('LODOP_EM1'))
CreatePrintPage(width, height, qrcodeValue)
LODOP.PREVIEW() // 预览打印
}
function CreatePrintPage(width, height, qrcodeValue) {
LODOP.SET_SHOW_MODE("SKIN_TYPE", '1');
LODOP.SET_PRINT_PAGESIZE(1, width, height, '自定义二维码标签')
LODOP.ADD_PRINT_BARCODE(0, 0, 150, 150, "QRCode", qrcodeValue);
};
</script>
<style scoped>
......
......@@ -54,7 +54,11 @@
<el-table-column label="EPC编码" align="center" prop="epcCode" />
<el-table-column label="TID编码" align="center" prop="tidCode" />
<el-table-column label="标签类型" align="center" prop="tagType" />
<el-table-column label="标签状态" align="center" prop="tagStatus" />
<el-table-column label="标签状态" align="center" prop="tagStatus">
<template #default="scope">
<span>{{ sys_normal_disable[scope.row.tagStatus] }}</span>
</template>
</el-table-column>
<el-table-column label="最后读取时间" align="center" prop="lastReadTime">
<template #default="scope">
<span>{{ parseTime(scope.row.lastReadTime, '{y}-{m}-{d}') }}</span>
......@@ -83,7 +87,8 @@
import { ref, reactive, watch } from 'vue'
import { listWmsRfidTag } from "@/api/ware/wmsRfidTag"
import { parseTime } from "@/utils/ruoyi"
const {proxy} = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
const props = defineProps({
visible: {
type: Boolean,
......
......@@ -47,7 +47,11 @@
<el-table-column label="联系电话" align="center" prop="contactPhone" />
<el-table-column label="邮箱" align="center" prop="email" />
<el-table-column label="地址" align="center" prop="address" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="状态" align="center" prop="status" >
<template #default="scope">
<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
<pagination
......@@ -70,7 +74,9 @@
<script setup name="SupplierSelectDialog">
import { ref, reactive, watch } from 'vue'
import { listWmsSupplier } from "@/api/ware/wmsSupplier"
const { proxy } = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
const props = defineProps({
visible: {
type: Boolean,
......
......@@ -39,7 +39,11 @@
<el-table-column label="面积" align="center" prop="area" />
<el-table-column label="容量" align="center" prop="capacity" />
<el-table-column label="位置" align="center" prop="location" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="状态" align="center" prop="status" >
<template #default="scope">
<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
<pagination
......@@ -62,7 +66,9 @@
<script setup name="WarehouseSelectDialog">
import { ref, reactive, watch } from 'vue'
import { listWmsWarehouse } from "@/api/ware/wmsWarehouse"
const { proxy } = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
const props = defineProps({
visible: {
type: Boolean,
......
<template>
<el-dialog
title="入库操作"
v-model="dialogVisible"
width="1200px"
append-to-body
>
<el-form :model="inventoryQueryParams" ref="inventoryQueryRef" :inline="true" label-width="120px">
<el-form-item label="批次号" prop="batchNo">
<el-input
v-model="inventoryQueryParams.batchNo"
placeholder="请输入或扫描批次号"
clearable
@keyup.enter="handleInventoryQuery"
@input="handleBatchNoInput"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleInventoryQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetInventoryQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="inventoryDetailList" border style="width: 100%; margin-top: 20px;" height="600px">
<el-table-column prop="wmsMaterial.materialName" label="物资名称" width="200" />
<el-table-column prop="batchNo" label="批次号" width="150" />
<el-table-column prop="actualQuantity" label="数量" width="100" />
<el-table-column prop="unitPrice" label="单价" width="100" />
<el-table-column label="金额" width="100">
<template #default="scope">
<span>{{ scope.row.amount }}</span>
</template>
</el-table-column>
<el-table-column prop="wmsLocation.locationName" label="货架" width="100" />
<el-table-column prop="storageLocation" label="PTL标签" width="180">
<template #default="scope">
<el-input v-model="scope.row.storageLocation" placeholder="请选择PTL标签" size="small" readonly />
<el-button slot="append" type="primary" size="small" @click="openPtlTagSelect(scope.$index)">选择</el-button>
</template>
</el-table-column>
<el-table-column prop="rfidTagIds" label="RFID标签" width="180">
<template #default="scope">
<el-input v-model="scope.row.rfidTagIds" placeholder="请选择RFID标签" size="small" readonly />
<el-button slot="append" type="primary" size="small" @click="openRfidTagSelect(scope.$index)">选择</el-button>
</template>
</el-table-column>
<el-table-column prop="wmsInboundOrderItemId" label="操作" width="100" fixed="right">
<template #default="scope">
<el-button type="primary" size="small" @click="handleExportQrcode(scope.row)">打印二维码</el-button>
</template>
</el-table-column>
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="confirmInventory">确认入库</el-button>
</div>
</template>
<!-- RFID标签选择对话框组件 -->
<RfidTagSelectDialog ref="rfidTagSelectDialogRef" v-model:visible="rfidTagDialogVisible" title="选择RFID标签"
@confirm="handleRfidTagConfirm" />
<!-- PTL标签选择对话框组件 -->
<PtlTagSelectDialog ref="ptlTagSelectDialogRef" v-model:visible="ptlTagDialogVisible" title="选择PTL标签"
@confirm="handlePtlTagConfirm" />
<!-- 二维码打印对话框组件 -->
<QrcodePrintDialog
ref="qrcodePrintDialogRef"
v-model:visible="qrcodePrintDialogVisible"
:qrcode-value="currentQrcodeValue"
@print="handleQrcodePrint"
/>
</el-dialog>
</template>
<script setup>
import { ref, computed, getCurrentInstance } from 'vue'
import { listWmsInboundOrderItem } from "@/api/ware/wmsInboundOrderItem"
import { addToInventory } from "@/api/ware/wmsInboundOrder"
import RfidTagSelectDialog from "@/components/RfidTagSelectDialog.vue"
import PtlTagSelectDialog from "@/components/PtlTagSelectDialog.vue"
import QrcodePrintDialog from "@/components/QrcodePrintDialog.vue"
const props = defineProps({
visible: {
type: Boolean,
default: false
},
currentOrder: {
type: Object,
default: null
}
})
const emit = defineEmits(['update:visible', 'inventory-success', 'inventory-error'])
const dialogVisible = computed({
get() {
return props.visible
},
set(value) {
emit('update:visible', value)
}
})
const { proxy } = getCurrentInstance()
// 入库查询参数
const inventoryQueryParams = ref({
batchNo: null
})
// 入库明细列表
const inventoryDetailList = ref([])
// RFID标签选择对话框状态
const rfidTagDialogVisible = ref(false)
const rfidTagSelectDialogRef = ref(null)
// PTL标签选择对话框状态
const ptlTagDialogVisible = ref(false)
const ptlTagSelectDialogRef = ref(null)
// 二维码打印对话框状态
const qrcodePrintDialogVisible = ref(false)
const qrcodePrintDialogRef = ref(null)
// 记录当前编辑的明细行索引
const currentEditingRowIndex = ref(-1)
// 当前要打印的二维码值
const currentQrcodeValue = ref('')
// 处理批次号输入(支持扫描枪)
function handleBatchNoInput() {
if (inventoryQueryParams.value.batchNo && inventoryQueryParams.value.batchNo.endsWith('\n')) {
inventoryQueryParams.value.batchNo = inventoryQueryParams.value.batchNo.trim()
handleInventoryQuery()
}
}
// 入库明细查询
function handleInventoryQuery() {
if (!inventoryQueryParams.value.batchNo) {
proxy.$message.warning('请输入批次号')
return
}
listWmsInboundOrderItem({ batchNo: inventoryQueryParams.value.batchNo, orderId: props.currentOrder.orderId }).then(response => {
if(response.rows.length){
const currentOrder = response.rows[0];
if(currentOrder.putawayStatus === '1'){
proxy.$message.warning('该批次号已上架,不能重复上架')
}else{
inventoryDetailList.value = [currentOrder];
}
}else{
proxy.$message.warning('未查询到相关入库明细')
}
}).catch(error => {
proxy.$message.error('查询入库明细失败:' + error.message)
emit('inventory-error', error)
})
}
// 重置入库查询
function resetInventoryQuery() {
inventoryQueryParams.value = {
batchNo: null
}
}
// 确认入库
function confirmInventory() {
if (inventoryDetailList.value.length === 0) {
proxy.$message.warning('请先添加入库明细')
return
}
proxy.$messageBox.confirm('确定要执行入库操作吗?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const orderData = { ...props.currentOrder, items: inventoryDetailList.value }
addToInventory(orderData).then(response => {
proxy.$message.success('入库成功')
dialogVisible.value = false
emit('inventory-success')
}).catch(error => {
proxy.$message.error('入库失败:' + error.message)
emit('inventory-error', error)
})
}).catch(() => {
// 取消操作
})
}
// 打开RFID标签选择对话框
function openRfidTagSelect(index) {
currentEditingRowIndex.value = index
rfidTagDialogVisible.value = true
}
// 处理RFID标签选择确认
function handleRfidTagConfirm(selectedTags) {
if (currentEditingRowIndex.value >= 0 && inventoryDetailList.value[currentEditingRowIndex.value]) {
inventoryDetailList.value[currentEditingRowIndex.value].rfidTagIds = selectedTags.map(tag => tag.tagId).join(',')
}
currentEditingRowIndex.value = -1
}
// 打开PTL标签选择对话框
function openPtlTagSelect(index) {
currentEditingRowIndex.value = index
ptlTagDialogVisible.value = true
}
// 处理PTL标签选择确认
function handlePtlTagConfirm(selectedTags) {
if (currentEditingRowIndex.value >= 0 && inventoryDetailList.value[currentEditingRowIndex.value]) {
inventoryDetailList.value[currentEditingRowIndex.value].storageLocation = selectedTags.map(tag => tag.antennaId).join(',')
}
currentEditingRowIndex.value = -1
}
// 导出二维码
function handleExportQrcode(row) {
currentQrcodeValue.value = JSON.stringify({
orderItemId: row.wmsInboundOrderItemId,
materialName: row.wmsMaterial.materialName,
batchNo: row.batchNo,
quantity: row.actualQuantity
})
qrcodePrintDialogVisible.value = true
}
// 处理二维码打印
function handleQrcodePrint() {
proxy.$message.success('二维码打印成功')
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment