扫码枪结果读取改用网页
This commit is contained in:
砂糖
@@ -73,153 +73,14 @@ export default {
|
|||||||
avatar: '',
|
avatar: '',
|
||||||
name: '',
|
name: '',
|
||||||
greeting: '',
|
greeting: '',
|
||||||
dataCards: [
|
|
||||||
{
|
|
||||||
title: '订单总量',
|
|
||||||
value: '2,384',
|
|
||||||
icon: 'fas fa-shopping-cart',
|
|
||||||
color: 'text-blue-500',
|
|
||||||
chartData: [30, 40, 20, 50, 40, 60, 70],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '库存总量',
|
|
||||||
value: '12,857',
|
|
||||||
icon: 'fas fa-box',
|
|
||||||
color: 'text-green-500',
|
|
||||||
chartData: [40, 30, 50, 40, 60, 50, 70],
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// title: '今日任务',
|
|
||||||
// value: '48',
|
|
||||||
// icon: 'fas fa-tasks',
|
|
||||||
// color: 'text-yellow-500',
|
|
||||||
// chartData: [20, 40, 30, 50, 40, 60, 50],
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
title: '系统状态',
|
|
||||||
value: '正常',
|
|
||||||
icon: 'fas fa-server',
|
|
||||||
color: 'text-purple-500',
|
|
||||||
chartData: [50, 30, 40, 50, 60, 70, 60]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
businessModules: [
|
|
||||||
{
|
|
||||||
title: '仓库管理',
|
|
||||||
description: '库存管理与货位管理',
|
|
||||||
icon: 'fas fa-warehouse',
|
|
||||||
bgColor: 'bg-blue-500',
|
|
||||||
link: '/wms/stock'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '订单处理',
|
|
||||||
description: '订单审核与发货管理',
|
|
||||||
icon: 'fas fa-clipboard-check',
|
|
||||||
bgColor: 'bg-green-500',
|
|
||||||
link: '/shop/order'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '人员管理',
|
|
||||||
description: '员工信息与权限管理',
|
|
||||||
icon: 'fas fa-users',
|
|
||||||
bgColor: 'bg-yellow-500',
|
|
||||||
link: '/system/user'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '订单分析',
|
|
||||||
description: '订单数据可视化分析',
|
|
||||||
icon: 'fas fa-chart-line',
|
|
||||||
bgColor: 'bg-purple-500',
|
|
||||||
link: '/shop/order/dashboard'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '出库入库',
|
|
||||||
description: '出库入库管理',
|
|
||||||
icon: 'fas fa-tools',
|
|
||||||
bgColor: 'bg-red-500',
|
|
||||||
link: '/wms/stockIo'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '系统设置',
|
|
||||||
description: '系统参数配置管理',
|
|
||||||
icon: 'fas fa-cog',
|
|
||||||
bgColor: 'bg-indigo-500',
|
|
||||||
link: '/system/menu'
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// title: 'WebSocket测试',
|
|
||||||
// description: '实时通信功能测试',
|
|
||||||
// icon: 'fas fa-comments',
|
|
||||||
// bgColor: 'bg-teal-500',
|
|
||||||
// link: '/websocket-test.html'
|
|
||||||
// }
|
|
||||||
],
|
|
||||||
resourceCharts: [
|
|
||||||
{ name: 'CPU使用率', value: 65 },
|
|
||||||
{ name: '内存使用率', value: 45 },
|
|
||||||
{ name: '存储使用率', value: 78 },
|
|
||||||
{ name: '网络使用率', value: 32 }
|
|
||||||
],
|
|
||||||
operationRecords: [
|
|
||||||
{
|
|
||||||
action: '张经理审批了采购订单 #38271',
|
|
||||||
time: '10分钟前',
|
|
||||||
icon: 'fas fa-check',
|
|
||||||
bgColor: 'bg-green-500'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
action: '李工程师更新了系统配置',
|
|
||||||
time: '25分钟前',
|
|
||||||
icon: 'fas fa-cog',
|
|
||||||
bgColor: 'bg-blue-500'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
action: '王主管确认了入库单 #92731',
|
|
||||||
time: '40分钟前',
|
|
||||||
icon: 'fas fa-box',
|
|
||||||
bgColor: 'bg-yellow-500'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
action: '系统完成了日常数据备份',
|
|
||||||
time: '1小时前',
|
|
||||||
icon: 'fas fa-database',
|
|
||||||
bgColor: 'bg-purple-500'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
action: '陈经理导出了月度报表',
|
|
||||||
time: '2小时前',
|
|
||||||
icon: 'fas fa-file-export',
|
|
||||||
bgColor: 'bg-indigo-500'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initCharts();
|
|
||||||
this.initResourceCharts();
|
|
||||||
this.avatar = this.$store.getters.avatar;
|
this.avatar = this.$store.getters.avatar;
|
||||||
this.name = this.$store.getters.name;
|
this.name = this.$store.getters.name;
|
||||||
this.greeting = this.getGreeting();
|
this.greeting = this.getGreeting();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getIconColor(color) {
|
|
||||||
// 统一映射为自定义 class
|
|
||||||
switch (color) {
|
|
||||||
case 'text-blue-500': return 'icon-blue';
|
|
||||||
case 'text-green-500': return 'icon-green';
|
|
||||||
case 'text-yellow-500': return 'icon-yellow';
|
|
||||||
case 'text-purple-500': return 'icon-purple';
|
|
||||||
default: return '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleLink(item) {
|
|
||||||
// 如果是外部链接（以http开头或.html结尾），则在新窗口打开
|
|
||||||
if (item.startsWith('http') || item.endsWith('.html')) {
|
|
||||||
window.open(item, '_blank');
|
|
||||||
} else {
|
|
||||||
this.$router.push(item);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getGreeting() {
|
getGreeting() {
|
||||||
const hour = new Date().getHours();
|
const hour = new Date().getHours();
|
||||||
if (hour < 6) return '凌晨好';
|
if (hour < 6) return '凌晨好';
|
||||||
@@ -230,129 +91,6 @@ export default {
|
|||||||
if (hour < 21) return '晚上好';
|
if (hour < 21) return '晚上好';
|
||||||
return '夜深了';
|
return '夜深了';
|
||||||
},
|
},
|
||||||
getModuleBg(bgColor) {
|
|
||||||
switch (bgColor) {
|
|
||||||
case 'bg-blue-500': return 'bg-blue';
|
|
||||||
case 'bg-green-500': return 'bg-green';
|
|
||||||
case 'bg-yellow-500': return 'bg-yellow';
|
|
||||||
case 'bg-purple-500': return 'bg-purple';
|
|
||||||
case 'bg-red-500': return 'bg-red';
|
|
||||||
case 'bg-indigo-500': return 'bg-indigo';
|
|
||||||
case 'bg-teal-500': return 'bg-teal';
|
|
||||||
default: return '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
initCharts() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const charts = document.querySelectorAll('.chart-inner');
|
|
||||||
this.dataCards.forEach((card, index) => {
|
|
||||||
const chart = echarts.init(charts[index]);
|
|
||||||
const option = {
|
|
||||||
animation: false,
|
|
||||||
grid: {
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
top: 0,
|
|
||||||
bottom: 0
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
data: card.chartData,
|
|
||||||
type: 'line',
|
|
||||||
smooth: true,
|
|
||||||
showSymbol: false,
|
|
||||||
lineStyle: {
|
|
||||||
color: this.getColor(index)
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
||||||
offset: 0,
|
|
||||||
color: this.getColor(index, 0.2)
|
|
||||||
}, {
|
|
||||||
offset: 1,
|
|
||||||
color: this.getColor(index, 0.1)
|
|
||||||
}])
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
chart.setOption(option);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
initResourceCharts() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const charts = document.querySelectorAll('.monitor-resource-chart .chart-inner');
|
|
||||||
this.resourceCharts.forEach((item, index) => {
|
|
||||||
const chart = echarts.init(charts[index]);
|
|
||||||
const option = {
|
|
||||||
animation: false,
|
|
||||||
series: [{
|
|
||||||
type: 'gauge',
|
|
||||||
startAngle: 90,
|
|
||||||
endAngle: -270,
|
|
||||||
pointer: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
progress: {
|
|
||||||
show: true,
|
|
||||||
overlap: false,
|
|
||||||
roundCap: true,
|
|
||||||
clip: false,
|
|
||||||
itemStyle: {
|
|
||||||
color: this.getColor(index)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
width: 18
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
offsetCenter: [0, '70%'],
|
|
||||||
fontSize: 14,
|
|
||||||
color: '#666'
|
|
||||||
},
|
|
||||||
detail: {
|
|
||||||
offsetCenter: [0, '0%'],
|
|
||||||
valueAnimation: true,
|
|
||||||
formatter: '{value}% ',
|
|
||||||
color: '#666'
|
|
||||||
},
|
|
||||||
data: [{
|
|
||||||
value: item.value,
|
|
||||||
name: item.name
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
chart.setOption(option);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getColor(index, alpha = 1) {
|
|
||||||
const colors = [
|
|
||||||
`rgba(59, 130, 246, ${alpha})`,
|
|
||||||
`rgba(34, 197, 94, ${alpha})`,
|
|
||||||
`rgba(234, 179, 8, ${alpha})`,
|
|
||||||
`rgba(168, 85, 247, ${alpha})`
|
|
||||||
];
|
|
||||||
return colors[index % colors.length];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,97 +1,183 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="print-page-container">
|
||||||
<el-row>
|
<!-- 页面标题栏 - 增加面包屑导航，提升页面定位感 -->
|
||||||
<el-col :span="8">
|
<div class="page-header">
|
||||||
<div class="left-container">
|
<div class="header-actions">
|
||||||
<el-button type="primary" @click="handleAdd">添加二维码</el-button>
|
<el-tooltip content="清空所有已添加的二维码配置" placement="top" :disabled="drawerBarcodeData.length === 0">
|
||||||
<el-form label-width="80px" size="small" label-position="top">
|
<el-button type="default" icon="el-icon-refresh" @click="handleResetAll"
|
||||||
<div v-for="(cfg, idx) in drawerBarcodeData" :key="idx"
|
:disabled="drawerBarcodeData.length === 0" class="btn-reset">
|
||||||
style="margin-bottom: 16px; border: 1px solid #eee; border-radius: 4px; padding: 12px 16px; background: #fafbfc;">
|
清空所有
|
||||||
<div style="margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;">
|
</el-button>
|
||||||
<span style="font-weight: bold; color: #666;">二维码 {{ idx + 1 }}</span>
|
</el-tooltip>
|
||||||
<el-button type="text" size="mini" @click="saveAsImage(idx)"
|
<el-tooltip content="仅对完整配置的二维码进行打印预览" placement="top"
|
||||||
icon="el-icon-download">
|
:disabled="drawerBarcodeData.length === 0 || !isAllValid">
|
||||||
另存为图片
|
<el-button type="success" icon="el-icon-printer" @click="handlePrintPreview"
|
||||||
</el-button>
|
:disabled="drawerBarcodeData.length === 0 || !isAllValid" class="btn-print">
|
||||||
<el-button type="text" size="mini" @click="handleDelete(cfg, idx)" icon="el-icon-delete">
|
打印预览
|
||||||
删除
|
</el-button>
|
||||||
</el-button>
|
</el-tooltip>
|
||||||
|
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">
|
||||||
|
添加二维码
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主内容区 - 增加卡片外层容器，提升整体层次感 -->
|
||||||
|
<el-row :gutter="24" class="main-content">
|
||||||
|
<!-- 左侧配置区 - 增加操作提示 -->
|
||||||
|
<el-col :span="8" class="left-col">
|
||||||
|
<div class="card-container">
|
||||||
|
<div class="left-container card">
|
||||||
|
<!-- 空状态提示 - 增加插图、优化文案 -->
|
||||||
|
<div v-if="drawerBarcodeData.length === 0" class="empty-state">
|
||||||
|
<div class="empty-icon">
|
||||||
|
<i class="el-icon-qrcode"></i>
|
||||||
</div>
|
</div>
|
||||||
<el-row>
|
<div class="empty-text">暂无二维码配置</div>
|
||||||
<el-col :span="12">
|
<div class="empty-desc">点击"添加二维码"按钮，开始创建打印配置</div>
|
||||||
<el-form-item label="操作类型" style="margin-bottom: 8px;">
|
<el-button type="primary" size="small" @click="handleAdd" class="empty-action-btn">
|
||||||
<el-select v-model="cfg.ioType" placeholder="请选择操作类型">
|
立即添加
|
||||||
<el-option label="入库" value="in" />
|
</el-button>
|
||||||
<el-option label="出库" value="out" />
|
|
||||||
<el-option label="移库" value="transfer" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="单据" style="margin-bottom: 8px;">
|
|
||||||
<el-select clearable filterable size="mini" v-model="cfg.stockIoId" placeholder="请选择挂载单据"
|
|
||||||
class="form-input">
|
|
||||||
<el-option v-for="item in masterList.filter(i => i.ioType === cfg.ioType)" :key="item.stockIoId"
|
|
||||||
:label="item.stockIoCode"
|
|
||||||
:value="item.stockIoId" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="目标仓库" style="margin-bottom: 8px;">
|
|
||||||
<WarehouseSelect v-model="cfg.warehouseId" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="源仓库" v-if="cfg.ioType === 'transfer'" style="margin-bottom: 8px;">
|
|
||||||
<WarehouseSelect v-model="cfg.fromWarehouseId" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="物料类型" style="margin-bottom: 8px;">
|
|
||||||
<el-select v-model="cfg.itemType" placeholder="请选择物料类型">
|
|
||||||
<el-option v-for="dict in dict.type.stock_item_type" :key="dict.value" :label="dict.label"
|
|
||||||
:value="dict.value" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="物料信息" style="margin-bottom: 8px;">
|
|
||||||
<ProductSelect v-if="cfg.itemType === 'product'" v-model="cfg.itemId" placeholder="请选择产品" @change="onItemChange($event, idx)" />
|
|
||||||
<SemiSelect v-else-if="cfg.itemType === 'semi'" v-model="cfg.itemId" placeholder="请选择半成品" @change="onItemChange($event, idx)" />
|
|
||||||
<RawMaterialSelect v-else-if="cfg.itemType === 'raw_material'" v-model="cfg.itemId"
|
|
||||||
placeholder="请选择原材料" @change="onItemChange($event, idx)" />
|
|
||||||
<el-input v-else disabled v-model="cfg.itemId" placeholder="请先选择物料类型" :disabled="true"
|
|
||||||
style="width: 100%;" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="数量" style="margin-bottom: 8px;">
|
|
||||||
<el-input-number v-model="cfg.count" :min="1" :max="100" size="mini" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="下方文字" style="margin-bottom: 8px;">
|
|
||||||
<el-input v-model="cfg.text" size="mini" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
</div>
|
||||||
</el-form>
|
|
||||||
|
<!-- 二维码配置表单列表 - 优化卡片间距和hover效果 -->
|
||||||
|
<el-form label-width="80px" size="small" label-position="top" v-else class="config-form-list">
|
||||||
|
<div v-for="(cfg, idx) in drawerBarcodeData" :key="idx" class="config-card"
|
||||||
|
:class="{ 'invalid-card': !isConfigValid(cfg) && cfg.ioType }" @mouseenter="cfg.hovered = true"
|
||||||
|
@mouseleave="cfg.hovered = false">
|
||||||
|
<!-- 配置卡片头部 - 增加序号背景色、优化操作按钮显示逻辑 -->
|
||||||
|
<div class="config-card-header">
|
||||||
|
<div class="card-title-wrap">
|
||||||
|
<span class="card-index">{{ idx + 1 }}</span>
|
||||||
|
<span class="card-title">二维码配置</span>
|
||||||
|
<el-tag size="mini" type="success" v-if="isConfigValid(cfg)" class="card-status-tag">
|
||||||
|
已完善
|
||||||
|
</el-tag>
|
||||||
|
<el-tag size="mini" type="warning" v-else-if="cfg.ioType" class="card-status-tag">
|
||||||
|
待完善
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
<div class="card-actions">
|
||||||
|
<el-tooltip content="另存为图片" placement="top">
|
||||||
|
<el-button type="text" size="mini" @click="saveAsImage(idx)" icon="el-icon-download"
|
||||||
|
:disabled="!isConfigValid(cfg)" class="action-btn"></el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="删除配置" placement="top">
|
||||||
|
<el-button type="text" size="mini" @click="handleDelete(cfg, idx)" icon="el-icon-delete"
|
||||||
|
class="action-btn delete-btn"></el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 配置表单内容 - 优化间距、增加字段分组 -->
|
||||||
|
<div class="config-form-content">
|
||||||
|
<el-row :gutter="8">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="操作类型" :error="getError(cfg, 'ioType')" class="form-item">
|
||||||
|
<el-select v-model="cfg.ioType" placeholder="请选择操作类型" class="form-select">
|
||||||
|
<el-option label="入库" value="in" />
|
||||||
|
<el-option label="出库" value="out" />
|
||||||
|
<el-option label="移库" value="transfer" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="单据" :error="getError(cfg, 'stockIoId')" class="form-item">
|
||||||
|
<el-select clearable filterable size="mini" v-model="cfg.stockIoId" placeholder="请选择挂载单据"
|
||||||
|
class="form-select" :disabled="!cfg.ioType">
|
||||||
|
<el-option v-for="item in masterList.filter(i => i.ioType === cfg.ioType)"
|
||||||
|
:key="item.stockIoId" :label="item.stockIoCode" :value="item.stockIoId" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="8">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="目标仓库" :error="getError(cfg, 'warehouseId')" class="form-item">
|
||||||
|
<WarehouseSelect v-model="cfg.warehouseId" :disabled="!cfg.ioType" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" v-if="cfg.ioType === 'transfer'">
|
||||||
|
<el-form-item label="源仓库" :error="getError(cfg, 'fromWarehouseId')" class="form-item">
|
||||||
|
<WarehouseSelect v-model="cfg.fromWarehouseId" :disabled="!cfg.ioType" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="8">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="物料类型" :error="getError(cfg, 'itemType')" class="form-item">
|
||||||
|
<el-select v-model="cfg.itemType" placeholder="请选择物料类型" class="form-select">
|
||||||
|
<el-option v-for="dict in dict.type.stock_item_type" :key="dict.value" :label="dict.label"
|
||||||
|
:value="dict.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="物料信息" :error="getError(cfg, 'itemId')" class="form-item">
|
||||||
|
<ProductSelect v-if="cfg.itemType === 'product'" v-model="cfg.itemId" placeholder="请选择产品"
|
||||||
|
@change="onItemChange($event, idx)" :disabled="!cfg.itemType" />
|
||||||
|
<SemiSelect v-else-if="cfg.itemType === 'semi'" v-model="cfg.itemId" placeholder="请选择半成品"
|
||||||
|
@change="onItemChange($event, idx)" :disabled="!cfg.itemType" />
|
||||||
|
<RawMaterialSelect v-else-if="cfg.itemType === 'raw_material'" v-model="cfg.itemId"
|
||||||
|
placeholder="请选择原材料" @change="onItemChange($event, idx)" :disabled="!cfg.itemType" />
|
||||||
|
<el-input v-else disabled v-model="cfg.itemId" placeholder="请先选择物料类型" style="width: 100%;" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="8">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="物料数量" :error="getError(cfg, 'count')" class="form-item">
|
||||||
|
<el-input-number v-model="cfg.count" :min="1" :max="100" size="mini" placeholder="请输入数量" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="下方文字" class="form-item">
|
||||||
|
<el-input v-model="cfg.text" size="mini" placeholder="例如：产品入库二维码" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 配置状态提示 - 优化背景色和图标 -->
|
||||||
|
<div v-if="!isConfigValid(cfg) && cfg.ioType" class="config-warning">
|
||||||
|
<i class="el-icon-warning-outline"></i>
|
||||||
|
<span>请完善必填字段配置（标红项为未完成）</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="16">
|
|
||||||
<div class="right-container">
|
<!-- 右侧预览区 - 增加预览说明、优化加载状态 -->
|
||||||
<div v-loading="loading">
|
<el-col :span="16" class="right-col">
|
||||||
<BarCode :barcodes="barCodeConfigs" />
|
<div class="card-container">
|
||||||
|
<div class="right-container card">
|
||||||
|
<div class="right-header">
|
||||||
|
<div class="preview-count">
|
||||||
|
共 {{ drawerBarcodeData.length }} 个二维码
|
||||||
|
<span v-if="drawerBarcodeData.length > 0">| 有效配置: {{ validConfigCount }} 个</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 预览区内容 - 增加预览容器边框、优化滚动体验 -->
|
||||||
|
<div class="preview-content">
|
||||||
|
<div v-loading="loading || !drawerBarcodeData.length" class="preview-loading"
|
||||||
|
:element-loading-text="drawerBarcodeData.length === 0 ? '暂无配置数据，无法预览' : '加载预览中...'"
|
||||||
|
element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.9)"
|
||||||
|
element-loading-offset="100">
|
||||||
|
<BarCode :barcodes="barCodeConfigs" v-if="drawerBarcodeData.length > 0" class="barcode-renderer" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 预览为空提示 - 优化空状态样式 -->
|
||||||
|
<div v-if="drawerBarcodeData.length > 0 && validConfigCount === 0" class="preview-empty">
|
||||||
|
<div class="empty-icon">
|
||||||
|
<i class="el-icon-info"></i>
|
||||||
|
</div>
|
||||||
|
<div class="empty-text">所有二维码配置均不完整</div>
|
||||||
|
<div class="empty-desc">请完善左侧标红的必填字段后，再查看预览</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
@@ -100,139 +186,533 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// 保持原脚本逻辑不变，仅增加hover状态初始化
|
||||||
import BarCode from './components/CodeRenderer.vue';
|
import BarCode from './components/CodeRenderer.vue';
|
||||||
import ProductSelect from '@/components/KLPService/ProductSelect/index.vue';
|
import ProductSelect from '@/components/KLPService/ProductSelect/index.vue';
|
||||||
import SemiSelect from '@/components/KLPService/SemiSelect/index.vue';
|
import SemiSelect from '@/components/KLPService/SemiSelect/index.vue';
|
||||||
import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect/index.vue';
|
import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect/index.vue';
|
||||||
import WarehouseSelect from '@/components/WarehouseSelect/index.vue';
|
import WarehouseSelect from '@/components/WarehouseSelect/index.vue';
|
||||||
import { saveAsImage } from '@/utils/klp';
|
import { saveAsImage } from '@/utils/klp';
|
||||||
|
|
||||||
import { listStockIo } from '@/api/wms/stockIo';
|
import { listStockIo } from '@/api/wms/stockIo';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Print',
|
name: 'Print',
|
||||||
components: { BarCode, ProductSelect, SemiSelect, RawMaterialSelect, WarehouseSelect },
|
components: {
|
||||||
|
BarCode,
|
||||||
|
ProductSelect,
|
||||||
|
SemiSelect,
|
||||||
|
RawMaterialSelect,
|
||||||
|
WarehouseSelect
|
||||||
|
},
|
||||||
dicts: ['stock_item_type', 'stock_io_type'],
|
dicts: ['stock_item_type', 'stock_io_type'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
drawerBarcodeData: [], // 条码数据
|
drawerBarcodeData: [], // 条码数据
|
||||||
loading: false, // 加载状态
|
loading: false, // 加载状态
|
||||||
itemId: undefined, // 物料ID
|
masterList: [], // 单据列表
|
||||||
itemType: undefined, // 物料类型
|
|
||||||
masterList: [],
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.fetchMaster();
|
this.fetchMaster();
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
// 有效的二维码配置数量
|
||||||
|
validConfigCount() {
|
||||||
|
return this.drawerBarcodeData.filter(cfg => this.isConfigValid(cfg)).length;
|
||||||
|
},
|
||||||
|
// 所有配置是否都有效
|
||||||
|
isAllValid() {
|
||||||
|
return this.drawerBarcodeData.length > 0 &&
|
||||||
|
this.drawerBarcodeData.every(cfg => this.isConfigValid(cfg));
|
||||||
|
},
|
||||||
|
// 二维码配置数据
|
||||||
barCodeConfigs() {
|
barCodeConfigs() {
|
||||||
return this.drawerBarcodeData.map(b => ({
|
return this.drawerBarcodeData
|
||||||
code: JSON.stringify({
|
.filter(cfg => this.isConfigValid(cfg))
|
||||||
ioType: b.ioType,
|
.map(b => ({
|
||||||
stockIoId: b.stockIoId,
|
code: JSON.stringify({
|
||||||
fromWarehouseId: b.fromWarehouseId,
|
ioType: b.ioType,
|
||||||
warehouseId: b.warehouseId,
|
stockIoId: b.stockIoId,
|
||||||
itemType: b.itemType,
|
fromWarehouseId: b.fromWarehouseId,
|
||||||
itemId: b.itemId,
|
warehouseId: b.warehouseId,
|
||||||
batchNo: b.batchNo,
|
itemType: b.itemType,
|
||||||
quantity: b.count,
|
itemId: b.itemId,
|
||||||
unit: b.unit,
|
batchNo: b.batchNo || 'auto',
|
||||||
recordType: 1,
|
quantity: b.count || 1,
|
||||||
}),
|
unit: b.unit || '',
|
||||||
count: b.count || 1,
|
recordType: 1,
|
||||||
textTpl: b.text || ''
|
}),
|
||||||
}));
|
count: 1,
|
||||||
|
textTpl: b.text || '二维码'
|
||||||
|
}));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 物料选择变更
|
||||||
onItemChange(item, idx) {
|
onItemChange(item, idx) {
|
||||||
this.drawerBarcodeData[idx].unit = item.unit;
|
if (item && this.drawerBarcodeData[idx]) {
|
||||||
|
this.drawerBarcodeData[idx].unit = item.unit;
|
||||||
|
// 如果未设置数量，默认设置为1
|
||||||
|
if (!this.drawerBarcodeData[idx].count) {
|
||||||
|
this.drawerBarcodeData[idx].count = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
// 获取单据列表
|
||||||
fetchMaster() {
|
fetchMaster() {
|
||||||
listStockIo({ pageSize: 9999, pageNum: 1 }).then(res => {
|
this.loading = true;
|
||||||
console.log("获取挂载单据", res);
|
listStockIo({ pageSize: 9999, pageNum: 1 })
|
||||||
this.masterList = res.rows || [];
|
.then(res => {
|
||||||
}).catch(error => {
|
this.masterList = res.rows || [];
|
||||||
console.error("获取挂载单据失败", error);
|
this.$message.success({
|
||||||
this.$message.error("获取挂载单据失败");
|
message: '单据列表加载成功',
|
||||||
|
duration: 1500
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error("获取挂载单据失败", error);
|
||||||
|
this.$message.error("获取挂载单据失败，请稍后重试");
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 删除二维码配置
|
||||||
|
handleDelete(cfg, idx) {
|
||||||
|
this.$confirm('确定要删除这个二维码配置吗？', '确认删除', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
this.drawerBarcodeData.splice(idx, 1);
|
||||||
|
this.$message.success({
|
||||||
|
message: '删除成功',
|
||||||
|
duration: 1500
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
// 取消删除
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleDelete(cfg, idx) {
|
// 添加二维码配置 - 增加hover状态初始化
|
||||||
console.log(cfg, idx);
|
|
||||||
this.drawerBarcodeData.splice(idx, 1);
|
|
||||||
},
|
|
||||||
handleAdd() {
|
handleAdd() {
|
||||||
const o = {
|
const newConfig = {
|
||||||
ioType: undefined,
|
ioType: undefined,
|
||||||
stockIoId: undefined,
|
stockIoId: undefined,
|
||||||
|
|
||||||
fromWarehouseId: undefined,
|
fromWarehouseId: undefined,
|
||||||
warehouseId: undefined,
|
warehouseId: undefined,
|
||||||
|
|
||||||
itemType: undefined,
|
itemType: undefined,
|
||||||
itemId: undefined,
|
itemId: undefined,
|
||||||
batchNo: 'auto',
|
batchNo: 'auto',
|
||||||
count: 0,
|
count: 1, // 默认数量1
|
||||||
unit: '',
|
unit: '',
|
||||||
|
text: '二维码', // 默认文字
|
||||||
|
hovered: false // 新增hover状态，用于交互反馈
|
||||||
|
};
|
||||||
|
|
||||||
text: '默认文字',
|
this.drawerBarcodeData.push(newConfig);
|
||||||
|
|
||||||
|
// 滚动到最新添加的配置
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const container = document.querySelector('.left-container');
|
||||||
|
container.scrollTop = container.scrollHeight;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 保存为图片
|
||||||
|
saveAsImage(index) {
|
||||||
|
const config = this.drawerBarcodeData[index];
|
||||||
|
if (!this.isConfigValid(config)) {
|
||||||
|
this.$message.warning('配置不完整，无法保存图片');
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.drawerBarcodeData.push(o);
|
try {
|
||||||
|
saveAsImage(
|
||||||
|
this.barCodeConfigs[index].code,
|
||||||
|
this.barCodeConfigs[index].textTpl,
|
||||||
|
index,
|
||||||
|
this
|
||||||
|
);
|
||||||
|
this.$message.success('图片保存成功');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('保存图片失败', error);
|
||||||
|
this.$message.error('保存图片失败，请稍后重试');
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 补充saveAsImage方法的空实现，避免控制台报错
|
// 清空所有配置
|
||||||
saveAsImage(index) {
|
handleResetAll() {
|
||||||
saveAsImage(this.barCodeConfigs[index].code, this.barCodeConfigs[index].textTpl, index, this);
|
this.$confirm('确定要清空所有二维码配置吗？此操作不可恢复', '确认清空', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
this.drawerBarcodeData = [];
|
||||||
|
this.$message.success({
|
||||||
|
message: '已清空所有配置',
|
||||||
|
duration: 1500
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
// 取消清空
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 打印预览 - 增加加载状态提示
|
||||||
|
handlePrintPreview() {
|
||||||
|
const printLoading = this.$loading({
|
||||||
|
lock: true,
|
||||||
|
text: '正在准备打印预览...',
|
||||||
|
spinner: 'el-icon-loading',
|
||||||
|
background: 'rgba(255, 255, 255, 0.8)'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 模拟预览准备时间（实际项目可替换为真实接口请求）
|
||||||
|
setTimeout(() => {
|
||||||
|
window.print();
|
||||||
|
printLoading.close();
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
// 验证单个配置是否有效
|
||||||
|
isConfigValid(cfg) {
|
||||||
|
if (!cfg) return false;
|
||||||
|
|
||||||
|
// 基础必填字段验证
|
||||||
|
const basicValid = !!cfg.ioType && !!cfg.stockIoId && !!cfg.warehouseId;
|
||||||
|
// 移库需要额外验证源仓库
|
||||||
|
const transferValid = cfg.ioType !== 'transfer' || !!cfg.fromWarehouseId;
|
||||||
|
// 物料相关验证
|
||||||
|
const itemValid = !!cfg.itemType && !!cfg.itemId && !!cfg.count && cfg.count >= 1;
|
||||||
|
|
||||||
|
return basicValid && transferValid && itemValid;
|
||||||
|
},
|
||||||
|
// 获取字段错误信息
|
||||||
|
getError(cfg, field) {
|
||||||
|
if (!cfg.ioType) return '';
|
||||||
|
|
||||||
|
switch (field) {
|
||||||
|
case 'ioType':
|
||||||
|
return !cfg.ioType ? '请选择操作类型' : '';
|
||||||
|
case 'stockIoId':
|
||||||
|
return !cfg.stockIoId ? '请选择挂载单据' : '';
|
||||||
|
case 'warehouseId':
|
||||||
|
return !cfg.warehouseId ? '请选择目标仓库' : '';
|
||||||
|
case 'fromWarehouseId':
|
||||||
|
return cfg.ioType === 'transfer' && !cfg.fromWarehouseId ? '请选择源仓库' : '';
|
||||||
|
case 'itemType':
|
||||||
|
return !cfg.itemType ? '请选择物料类型' : '';
|
||||||
|
case 'itemId':
|
||||||
|
return !cfg.itemId ? '请选择物料信息' : '';
|
||||||
|
case 'count':
|
||||||
|
return !cfg.count || cfg.count < 1 ? '请输入有效的数量（至少1）' : '';
|
||||||
|
default:
|
||||||
|
return '';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
// 左侧容器样式
|
// 全局变量定义 - 便于统一维护
|
||||||
|
$primary-color: #409eff;
|
||||||
|
$success-color: #67c23a;
|
||||||
|
$warning-color: #e6a23c;
|
||||||
|
$danger-color: #f56c6c;
|
||||||
|
$gray-light: #f5f7fa;
|
||||||
|
$gray-mid: #e5e7eb;
|
||||||
|
$gray-dark: #6b7280;
|
||||||
|
$text-primary: #1f2329;
|
||||||
|
$text-secondary: #6b7280;
|
||||||
|
$card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||||
|
$card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||||
|
|
||||||
|
// 页面整体容器 - 优化高度计算、增加内边距
|
||||||
|
.print-page-container {
|
||||||
|
padding: 16px 20px; // Slightly reduced padding
|
||||||
|
background-color: $gray-light;
|
||||||
|
height: calc(100vh - 100px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面标题栏 - 增加面包屑、优化布局
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px; // Reduced space between header and content
|
||||||
|
padding-bottom: 8px;
|
||||||
|
border-bottom: 1px solid $gray-mid;
|
||||||
|
|
||||||
|
.header-breadcrumb {
|
||||||
|
.el-breadcrumb {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 18px; // Slightly smaller title
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-primary;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px; // Reduced gap between buttons
|
||||||
|
|
||||||
|
.btn-reset {
|
||||||
|
padding: 6px 12px; // Smaller padding
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-print {
|
||||||
|
padding: 6px 12px; // Smaller padding
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主内容区 - 优化间距
|
||||||
|
.main-content {
|
||||||
|
height: calc(100% - 80px);
|
||||||
|
display: flex;
|
||||||
|
gap: 16px; // Reduced gap between left and right content
|
||||||
|
|
||||||
|
.left-col,
|
||||||
|
.right-col {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container {
|
||||||
|
padding: 1px;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 左侧容器 - 优化滚动体验
|
||||||
.left-container {
|
.left-container {
|
||||||
height: calc(100vh - 84px); // 高度为视口高度减去顶部间距
|
height: 100%;
|
||||||
overflow-y: auto; // 纵向滚动
|
|
||||||
padding-right: 10px; // 避免内容与滚动条重叠
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 右侧容器样式
|
|
||||||
.right-container {
|
|
||||||
height: calc(100vh - 84px); // 与左侧保持一致的高度
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding-left: 10px; // 与左侧间距区分
|
overflow-x: hidden;
|
||||||
box-sizing: border-box;
|
flex: 1;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #d1d5db;
|
||||||
|
display: block;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #9ca3af;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f9fafb;
|
||||||
|
display: block;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 美化滚动条
|
// 配置卡片 - 优化阴影和间距
|
||||||
::-webkit-scrollbar {
|
.config-card {
|
||||||
width: 6px; // 滚动条宽度
|
border: 1px solid $gray-mid;
|
||||||
height: 6px;
|
border-radius: 8px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background-color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $primary-color;
|
||||||
|
box-shadow: $card-hover-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.invalid-card {
|
||||||
|
border-color: rgba($danger-color, 0.3);
|
||||||
|
background-color: rgba($danger-color, 0.02);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $danger-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
// 配置卡片头部 - 优化布局和样式
|
||||||
background: #ddd;
|
.config-card-header {
|
||||||
border-radius: 3px;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 12px; // Reduced padding
|
||||||
|
border-bottom: 1px solid $gray-mid;
|
||||||
|
background-color: #f9fafb;
|
||||||
|
|
||||||
|
.card-title-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px; // Reduced gap between elements
|
||||||
|
|
||||||
|
.card-index {
|
||||||
|
width: 18px; // Smaller index
|
||||||
|
height: 18px; // Smaller index
|
||||||
|
font-size: 10px; // Smaller font size for index
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 12px; // Smaller title
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-status-tag {
|
||||||
|
margin-left: 6px; // Reduced margin
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px; // Reduced gap between actions
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
color: $text-secondary;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
font-size: 12px; // Reduced font size for actions
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.delete-btn {
|
||||||
|
color: $danger-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #e53e3e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
color: $gray-dark;
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
// 配置表单内容 - 优化间距和分组
|
||||||
background: #f5f5f5;
|
.config-form-content {
|
||||||
|
padding: 12px; // Reduced padding
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 12px; // Reduced spacing between groups
|
||||||
|
|
||||||
|
.group-title {
|
||||||
|
font-size: 12px; // Smaller font size for group title
|
||||||
|
margin-bottom: 8px; // Reduced margin
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 8px !important; // Reduced spacing between form items
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-select {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-warning {
|
||||||
|
margin-top: 8px; // Reduced margin
|
||||||
|
padding: 8px 10px; // Reduced padding
|
||||||
|
font-size: 12px; // Smaller font size
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 解决scoped样式无法穿透到滚动条的问题
|
// 空状态样式 - 优化间距和图标
|
||||||
::v-deep ::-webkit-scrollbar {
|
.empty-state,
|
||||||
width: 6px;
|
.preview-empty {
|
||||||
height: 6px;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 40px 0; // Reduced padding
|
||||||
|
color: $text-secondary;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.empty-icon {
|
||||||
|
font-size: 48px; // Slightly smaller icon
|
||||||
|
color: $gray-mid;
|
||||||
|
margin-bottom: 16px; // Reduced margin
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 14px; // Slightly smaller text
|
||||||
|
margin-bottom: 6px; // Reduced margin
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-desc {
|
||||||
|
font-size: 12px; // Smaller description text
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-action-btn {
|
||||||
|
padding: 4px 12px; // Smaller button padding
|
||||||
|
font-size: 12px; // Smaller font size
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep ::-webkit-scrollbar-thumb {
|
// 响应式调整 - 优化小屏幕体验
|
||||||
background: #ddd;
|
@media (max-width: 1200px) {
|
||||||
border-radius: 3px;
|
.main-content {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-col,
|
||||||
|
.right-col {
|
||||||
|
span: 24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.print-page-container {
|
||||||
|
padding: 12px; // Reduced padding for smaller screens
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8px; // Reduced gap
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep ::-webkit-scrollbar-track {
|
@media print {
|
||||||
background: #f5f5f5;
|
|
||||||
|
.page-header,
|
||||||
|
.left-col,
|
||||||
|
.preview-count {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.print-page-container,
|
||||||
|
.main-content,
|
||||||
|
.right-col,
|
||||||
|
.card-container,
|
||||||
|
.right-container,
|
||||||
|
.preview-content {
|
||||||
|
height: auto !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barcode-renderer {
|
||||||
|
gap: 20px; // Reduced gap for print
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
344
klp-ui/src/views/wms/print/read.vue
Normal file
344
klp-ui/src/views/wms/print/read.vue
Normal file
@@ -0,0 +1,344 @@
|
|||||||
|
<template>
|
||||||
|
<div class="qr-parser-container">
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<el-alert title="请将当前输入法切换到英文输入后再进行扫码操作" type="warning"></el-alert>
|
||||||
|
<div class="card-header">
|
||||||
|
<h2 class="title">二维码解析器</h2>
|
||||||
|
<p class="subtitle">扫描或输入二维码内容进行解析</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-section">
|
||||||
|
<el-input
|
||||||
|
v-model="text"
|
||||||
|
@change="handleChange"
|
||||||
|
@blur="handleBlur"
|
||||||
|
ref="textarea"
|
||||||
|
placeholder="请扫描二维码或粘贴二维码文本内容..."
|
||||||
|
:rows="3"
|
||||||
|
type="textarea"
|
||||||
|
:class="{ 'invalid-input': !isValid && text.length > 0 }"
|
||||||
|
/>
|
||||||
|
<div class="input-hint">
|
||||||
|
<i class="el-icon-info-circle"></i>
|
||||||
|
<span>{{ inputHint }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<el-loading
|
||||||
|
v-if="isLoading"
|
||||||
|
text="正在解析数据..."
|
||||||
|
class="loading-overlay"
|
||||||
|
></el-loading>
|
||||||
|
|
||||||
|
<!-- 二维码解析结果 - 只有数据有效时才显示 -->
|
||||||
|
<div v-if="isValid" class="result-section fade-in">
|
||||||
|
<div class="result-header">
|
||||||
|
<h3>解析结果</h3>
|
||||||
|
<el-tag
|
||||||
|
:type="result.ioType === 'in' ? 'success' : 'warning'"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
{{ result.ioType === 'in' ? '入库' : '出库' }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-descriptions :column="1" border class="result-table">
|
||||||
|
<el-descriptions-item label="出入库类型" :span="1">
|
||||||
|
{{ result.ioType === 'in' ? '入库' : '出库' }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="物料类型" :span="1">
|
||||||
|
{{ formatItemType(result.itemType) }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="物料信息" :span="1">
|
||||||
|
<ProductInfo v-if="result.itemType === 'product' || result.itemType === 'semi'" :productId="result.itemId" />
|
||||||
|
<RawMaterialInfo v-else-if="result.itemType === 'raw_material'" :materialId="result.itemId" />
|
||||||
|
<el-input v-else disabled v-model="result.itemId" placeholder="未知物料" :disabled="true" style="width: 100%;" />
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="数量" :span="1">
|
||||||
|
{{ result.quantity }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="计量单位" :span="1">
|
||||||
|
{{ result.unit }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
|
||||||
|
<div class="action-buttons">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="handleSubmit"
|
||||||
|
:loading="isSubmitting"
|
||||||
|
icon="el-icon-check"
|
||||||
|
>
|
||||||
|
确认执行
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="default"
|
||||||
|
@click="handleReset"
|
||||||
|
icon="el-icon-refresh-right"
|
||||||
|
>
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ProductInfo from '@/components/KLPService/Renderer/ProductInfo';
|
||||||
|
import RawMaterialInfo from '@/components/KLPService/Renderer/RawMaterialInfo';
|
||||||
|
import { addStockIoDetail } from '@/api/wms/stockIoDetail';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
text: '',
|
||||||
|
isLoading: false,
|
||||||
|
isSubmitting: false,
|
||||||
|
inputHint: '请输入二维码内容，系统将自动解析',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
ProductInfo,
|
||||||
|
RawMaterialInfo,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
result() {
|
||||||
|
try {
|
||||||
|
return JSON.parse(this.text);
|
||||||
|
} catch (error) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 验证数据是否有效
|
||||||
|
isValid() {
|
||||||
|
const requiredFields = ['ioType', 'itemType', 'itemId', 'quantity', 'unit'];
|
||||||
|
// 检查是否包含所有必要字段
|
||||||
|
const hasAllFields = requiredFields.every(field => this.result.hasOwnProperty(field));
|
||||||
|
// 检查出入库类型是否有效
|
||||||
|
const isIoTypeValid = this.result.ioType === 'in' || this.result.ioType === 'out';
|
||||||
|
// 检查物料类型是否有效
|
||||||
|
const isItemTypeValid = ['product', 'semi', 'raw_material'].includes(this.result.itemType);
|
||||||
|
// 检查数量是否为有效数字
|
||||||
|
const isQuantityValid = !isNaN(Number(this.result.quantity)) && Number(this.result.quantity) > 0;
|
||||||
|
|
||||||
|
return hasAllFields && isIoTypeValid && isItemTypeValid && isQuantityValid;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleChange(value) {
|
||||||
|
if (!value) {
|
||||||
|
this.inputHint = '请输入二维码内容，系统将自动解析';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isLoading = true;
|
||||||
|
|
||||||
|
// 模拟解析延迟，提升用户体验
|
||||||
|
setTimeout(() => {
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(value);
|
||||||
|
if (this.isValid) {
|
||||||
|
this.inputHint = '数据解析成功，可以提交操作';
|
||||||
|
this.$message.success({
|
||||||
|
message: '数据解析成功',
|
||||||
|
duration: 1500
|
||||||
|
});
|
||||||
|
// 解析成功后禁用输入框
|
||||||
|
// this.$refs.textarea.disabled = true;
|
||||||
|
console.log(this.$refs.textarea.disabled, '禁用输入框');
|
||||||
|
} else {
|
||||||
|
this.inputHint = '解析的数据格式不完整，请检查二维码是否正确';
|
||||||
|
this.$message.warning({
|
||||||
|
message: '数据格式不完整',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
this.inputHint = '无法解析数据，请确保输入的是有效的二维码内容';
|
||||||
|
this.$message.error({
|
||||||
|
message: '解析失败，请检查输入内容',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false;
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
handleBlur() {
|
||||||
|
// 自动重新聚焦，方便连续扫描
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.textarea.focus();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleSubmit() {
|
||||||
|
if (!this.isValid) return;
|
||||||
|
|
||||||
|
this.isSubmitting = true;
|
||||||
|
|
||||||
|
addStockIoDetail(this.result)
|
||||||
|
.then(res => {
|
||||||
|
this.$message.success({
|
||||||
|
message: '操作成功',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
// 提交成功后重置表单，方便下一次操作
|
||||||
|
this.handleReset();
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
this.$message.error({
|
||||||
|
message: '操作失败: ' + (err.message || '未知错误'),
|
||||||
|
duration: 3000
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.isSubmitting = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleReset() {
|
||||||
|
this.text = '';
|
||||||
|
this.inputHint = '请输入二维码内容，系统将自动解析';
|
||||||
|
// 重置后重新聚焦
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.textarea.focus();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 格式化物料类型显示文本
|
||||||
|
formatItemType(type) {
|
||||||
|
const typeMap = {
|
||||||
|
'product': '成品',
|
||||||
|
'semi': '半成品',
|
||||||
|
'raw_material': '原材料'
|
||||||
|
};
|
||||||
|
return typeMap[type] || '未知类型';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 确保组件挂载后自动聚焦
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.textarea.focus();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.qr-parser-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
padding: 20px 24px;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #1f2329;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
margin: 5px 0 0;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-section {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input.invalid-input .el-textarea__inner {
|
||||||
|
border-color: #f56c6c;
|
||||||
|
box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-hint {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #6b7280;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-hint i {
|
||||||
|
margin-right: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-section {
|
||||||
|
padding: 0 24px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1f2329;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-table {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(255, 255, 255, 0.7);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 淡入动画 */
|
||||||
|
.fade-in {
|
||||||
|
animation: fadeIn 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -41,7 +41,7 @@ public class Main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
obj.put("devices", arr);
|
obj.put("devices", arr);
|
||||||
obj.put("totalCount", allDevices.size()); // 设备总数
|
obj.put("totalCount", allDevices.size()); // 设备总数
|
||||||
obj.put("activeCount", activeDevices.size()); // 活跃设备数
|
obj.put("activeCount", activeDevices.size()); // 活跃设备数
|
||||||
return obj.toString();
|
return obj.toString();
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user