DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(contract): 新增合同预览和列表组件

Browse Source 
refactor(QRCode): 优化二维码组件并修复空值检查
将QRCode组件从print目录移动到components目录，并添加空值检查防止错误

feat(crm): 在合同模型中添加交货日期字段
在CrmContract、CrmContractVo、CrmContractBo及相关Mapper中添加deliveryDate字段

refactor(wms): 统一使用全局QRCode组件路径
将多个文件中的QRCode引用路径从相对路径改为@/components/QRCode

style(order): 调整订单页面标签顺序
调整操作记录和发货配卷标签的顺序

chore: 删除废弃的打印相关文件
移除print目录下不再使用的QRCode、CodeRenderer等组件和页面
This commit is contained in:
砂糖
2026-04-01 10:44:51 +08:00
parent 800cf0c8d1
commit f959f97099
26 changed files with 655 additions and 3244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
klp-ui/src/views/wms/coil/panels/LabelRender/DuGeTag.vue
View File

@@ -130,7 +130,7 @@
<script>
import logo from '@/assets/logo/logo.png'
import QRCode from '../../../print/components/QRCode.vue';
import QRCode from '@/components/QRCode';
export default {
name: 'MetalSheetLabel',

2
klp-ui/src/views/wms/coil/panels/LabelRender/GalvanizedTag.vue
View File

@@ -131,7 +131,7 @@
<script>
import logo from '@/assets/logo/logo.png'
import QRCode from '../../../print/components/QRCode.vue';
import QRCode from '@/components/QRCode';
export default {
name: 'MetalSheetLabel',

2
klp-ui/src/views/wms/coil/panels/LabelRender/MaterialTag.vue
View File

@@ -146,7 +146,7 @@
</template>
<script>
import QRCode from '../../../print/components/QRCode.vue';
import QRCode from '@/components/QRCode';
export default {
name: 'MaterialLabel',

2
klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue
View File

@@ -137,7 +137,7 @@
<script>
import logo from '@/assets/logo/logo.png'
import QRCode from '../../../print/components/QRCode.vue';
import QRCode from '@/components/QRCode';
export default {
name: 'MetalSheetLabel',

2
klp-ui/src/views/wms/coil/panels/base.vue
View File

@@ -488,7 +488,7 @@ import {
import { listBoundCoil } from "@/api/wms/deliveryWaybillDetail";
import { addPendingAction } from "@/api/wms/pendingAction";
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import QRCode from "../../print/components/QRCode.vue";
import QRCode from "@/components/QRCode";
import * as XLSX from 'xlsx'
import { saveAsImage } from '@/utils/klp';
import ProductSelect from "@/components/KLPService/ProductSelect";

295
klp-ui/src/views/wms/print/components/CodeRenderer.vue
View File

@@ -1,295 +0,0 @@
<template>
<div class="barcode-simple-layout">
<!-- 仅保留预览区 -->
<div class="barcode-preview-area">
<div class="iframe-wrapper">
<iframe ref="previewIframe" id="previewIframe" class="barcode-iframe" frameborder="0" :style="iframeStyle"></iframe>
</div>
</div>
</div>
</template>
<script>
import QRCode from 'qrcode';
export default {
name: 'BarcodeRenderer',
props: {
barcodes: {
type: Array,
required: true
},
// 可通过props传入配置，保持一定灵活性
layoutConfig: {
type: Object,
default: () => ({
perRow: 3,
barcodeWidth: 180,
paperSize: 'A4',
paperOrientation: 'portrait',
customPaperWidth: 210,
customPaperHeight: 297
})
}
},
data() {
return {
barcodeConfigs: [], // 二维码配置数组 [{code, count, textTpl}]
};
},
computed: {
// 从传入的配置中获取参数
perRow() {
return this.layoutConfig.perRow || 3;
},
barcodeWidth() {
return this.layoutConfig.barcodeWidth || 180;
},
barcodeHeight() {
return this.layoutConfig.barcodeWidth || 180; // 保持宽高一致
},
paperSize() {
return this.layoutConfig.paperSize || 'A4';
},
paperOrientation() {
return this.layoutConfig.paperOrientation || 'portrait';
},
customPaperWidth() {
return this.layoutConfig.customPaperWidth || 210;
},
customPaperHeight() {
return this.layoutConfig.customPaperHeight || 297;
},
// 展开后的二维码列表（考虑生成数量）
expandedBarcodes() {
let arr = [];
this.barcodeConfigs.forEach(cfg => {
for (let i = 0; i < (cfg.count || 1); i++) {
arr.push(cfg.code);
}
});
return arr;
},
// 展开后的文字列表
expandedBarcodeTexts() {
let arr = [];
this.barcodeConfigs.forEach(cfg => {
for (let i = 0; i < (cfg.count || 1); i++) {
let text = cfg.textTpl || cfg.code;
text = text.replace(/\{\{n\}\}/g, i + 1); // 替换序号变量
arr.push(text);
}
});
return arr;
},
// 按行分组的二维码
barcodeRows() {
const rows = [];
const arr = this.expandedBarcodes;
for (let i = 0; i < arr.length; i += this.perRow) {
rows.push(arr.slice(i, i + this.perRow));
}
return rows;
},
// 按行分组的文字
barcodeTextRows() {
const rows = [];
const arr = this.expandedBarcodeTexts;
for (let i = 0; i < arr.length; i += this.perRow) {
rows.push(arr.slice(i, i + this.perRow));
}
return rows;
},
// iframe样式
iframeStyle() {
const { width, height } = this.getPaperPx();
return {
width: width + 'px',
minHeight: height + 'px',
height: height + 'px',
background: '#fff',
border: 'none',
display: 'block',
margin: 0,
padding: 0
};
}
},
watch: {
// 监听barcodes变化，重新初始化和渲染
barcodes: {
handler(newVal) {
this.barcodeConfigs = newVal.map(b => ({
code: b.code || b,
count: b.count || 1,
textTpl: b.textTpl || (b.code || b)
}));
this.$nextTick(this.renderPreviewIframe);
},
immediate: true,
deep: true
},
// 监听配置变化，重新渲染
layoutConfig: {
handler() {
this.$nextTick(this.renderPreviewIframe);
},
deep: true
},
// 监听二维码配置变化，重新渲染
barcodeConfigs: {
handler() {
this.$nextTick(this.renderPreviewIframe);
},
deep: true
}
},
methods: {
// 生成二维码ID
getBarcodeId(row, col) {
return `barcode-canvas-${row}-${col}`;
},
// 获取二维码下方文字
getBarcodeText(row, col, code) {
if (
this.barcodeTextRows[row] &&
typeof this.barcodeTextRows[row][col] !== 'undefined' &&
this.barcodeTextRows[row][col] !== null &&
this.barcodeTextRows[row][col] !== ''
) {
return this.barcodeTextRows[row][col];
}
return code;
},
// 将纸张尺寸从mm转换为px（1mm ≈ 3.78px）
getPaperPx() {
let width, height;
if (this.paperSize === 'A4') {
width = 210 * 3.78;
height = 297 * 3.78;
} else if (this.paperSize === 'A5') {
width = 148 * 3.78;
height = 210 * 3.78;
} else if (this.paperSize === 'A6') {
width = 105 * 3.78;
height = 148 * 3.78;
} else {
width = this.customPaperWidth * 3.78;
height = this.customPaperHeight * 3.78;
}
// 处理横向/纵向
if (this.paperOrientation === 'landscape') {
return { width: height, height: width };
}
return { width, height };
},
// 生成打印用的HTML
getPrintHtml() {
const { width, height } = this.getPaperPx();
let html = `
<html>
<head>
<title>二维码预览</title>
<style>
body { margin: 0; padding: 0; background: #fff; }
.barcode-list { width: ${width}px; min-height: ${height}px; margin: 0 auto; background: #fff; padding: 20px; box-sizing: border-box; }
.barcode-row { display: flex; margin-bottom: 24px; justify-content: space-around; }
.barcode-item { flex: 1; text-align: center; padding: 0 10px; box-sizing: border-box; }
.barcode-text { margin-top: 8px; font-size: 14px; word-break: break-all; }
html, body { overflow-x: hidden; }
</style>
</head>
<body>
<div class="barcode-list">
`;
// 生成二维码行
this.barcodeRows.forEach((row, rowIndex) => {
html += '<div class="barcode-row">';
row.forEach((code, colIndex) => {
const id = this.getBarcodeId(rowIndex, colIndex);
const text = this.getBarcodeText(rowIndex, colIndex, code);
html += `<div class="barcode-item">
<canvas id="${id}" width="${this.barcodeWidth}" height="${this.barcodeHeight}"></canvas>
<div class="barcode-text">${text}</div>
</div>`;
});
html += '</div>';
});
html += '</div></body></html>';
return html;
},
// 渲染预览iframe
async renderPreviewIframe() {
const iframe = this.$refs.previewIframe;
if (!iframe) return;
const doc = iframe.contentDocument || iframe.contentWindow.document;
doc.open();
doc.write(this.getPrintHtml());
doc.close();
// 绘制二维码
setTimeout(async () => {
for (let rowIndex = 0; rowIndex < this.barcodeRows.length; rowIndex++) {
const row = this.barcodeRows[rowIndex];
for (let colIndex = 0; colIndex < row.length; colIndex++) {
const code = row[colIndex];
const id = this.getBarcodeId(rowIndex, colIndex);
const el = doc.getElementById(id);
if (el) {
await QRCode.toCanvas(el, code, {
width: this.barcodeWidth,
height: this.barcodeHeight,
margin: 0
});
}
}
}
}, 50);
}
},
mounted() {
// 初始化二维码配置
this.barcodeConfigs = this.barcodes.map(b => ({
code: b.code || b,
count: b.count || 1,
textTpl: b.textTpl || (b.code || b)
}));
this.renderPreviewIframe();
}
};
</script>
<style scoped>
.barcode-simple-layout {
display: flex;
width: 100%;
min-height: 400px;
}
.barcode-preview-area {
flex: 1;
background: #fff;
padding: 24px;
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
}
.iframe-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
background: #f8f8f8;
overflow: auto;
padding: 20px;
box-sizing: border-box;
}
.barcode-iframe {
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>

50
klp-ui/src/views/wms/print/components/QRCode.vue
View File

@@ -1,50 +0,0 @@
<template>
<canvas ref="qrcode"></canvas>
</template>
<script>
import QRCode from 'qrcode';
export default {
name: 'QRCode',
props: {
content: {
type: String,
required: true
},
size: {
type: Number,
default: 90
}
},
data() {
return {
qrcode: null
}
},
watch: {
content: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.generateQRCode();
}
},
immediate: true
}
},
mounted() {
this.generateQRCode();
},
methods: {
generateQRCode() {
const el = this.$refs.qrcode;
const content = this.content;
QRCode.toCanvas(el, content, {
width: this.size,
height: this.size,
margin: 0
});
}
}
}
</script>

698
klp-ui/src/views/wms/print/index.vue
View File

@@ -1,698 +0,0 @@
<template>
<div class="print-page-container">
<!-- 页面标题栏 - 增加面包屑导航，提升页面定位感 -->
<div class="page-header">
<div class="header-actions">
<el-tooltip content="清空所有已添加的二维码配置" placement="top" :disabled="drawerBarcodeData.length === 0">
<el-button type="default" icon="el-icon-refresh" @click="handleResetAll"
:disabled="drawerBarcodeData.length === 0" class="btn-reset">
清空所有
</el-button>
</el-tooltip>
<el-tooltip content="仅对完整配置的二维码进行打印预览" placement="top"
:disabled="drawerBarcodeData.length === 0 || !isAllValid">
<el-button type="success" icon="el-icon-printer" @click="handlePrintPreview"
:disabled="drawerBarcodeData.length === 0 || !isAllValid" class="btn-print">
打印预览
</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 class="empty-text">暂无二维码配置</div>
<div class="empty-desc">点击"添加二维码"按钮，开始创建打印配置</div>
<el-button type="primary" size="small" @click="handleAdd" class="empty-action-btn">
立即添加
</el-button>
</div>
<!-- 二维码配置表单列表 - 优化卡片间距和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"
@change="(value) => {
const prefix = value == 'in' ? '入库' : value == 'out' ? '出库' : value == 'transfer' ? '移库' : ''
cfg.text = prefix + '二维码' + new Date().getTime()
}"
>
<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="cfg.ioType == 'in' ? '入库单据号' : cfg.ioType == 'out' ? '出库单据号' : cfg.ioType == 'transfer' ? '移库单据号' : '单据号'"
: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 :controls=false controls-position="right" v-model="cfg.count" :min="1" :max="100" size="mini" placeholder="请输入数量" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="8">
<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-col :span="12">
<el-form-item label="生成数量" class="form-item">
<el-input v-model="cfg.totalCount" 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>
</el-col>
<!-- 右侧预览区 - 增加预览说明、优化加载状态 -->
<el-col :span="16" class="right-col">
<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>
</el-col>
</el-row>
</div>
</template>
<script>
// 保持原脚本逻辑不变，仅增加hover状态初始化
import BarCode from './components/CodeRenderer.vue';
import ProductSelect from '@/components/KLPService/ProductSelect/index.vue';
import SemiSelect from '@/components/KLPService/SemiSelect/index.vue';
import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect/index.vue';
import WarehouseSelect from '@/components/WarehouseSelect/index.vue';
import { saveAsImage } from '@/utils/klp';
import { listStockIo } from '@/api/wms/stockIo';
export default {
name: 'Print',
components: {
BarCode,
ProductSelect,
SemiSelect,
RawMaterialSelect,
WarehouseSelect
},
dicts: ['stock_item_type', 'stock_io_type'],
data() {
return {
drawerBarcodeData: [], // 条码数据
loading: false, // 加载状态
masterList: [], // 单据列表
};
},
mounted() {
this.fetchMaster();
},
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() {
return this.drawerBarcodeData
.filter(cfg => this.isConfigValid(cfg))
.map(b => ({
code: JSON.stringify({
ioType: b.ioType,
stockIoId: b.stockIoId,
fromWarehouseId: b.fromWarehouseId,
warehouseId: b.warehouseId,
itemType: b.itemType,
itemId: b.itemId,
batchNo: b.batchNo || 'auto',
quantity: b.count || 1,
recordType: 1,
}),
count: b.totalCount,
textTpl: b.text || '二维码'
}));
}
},
methods: {
// 物料选择变更
onItemChange(item, idx) {
if (item && this.drawerBarcodeData[idx]) {
// this.drawerBarcodeData[idx].unit = item.unit;
// 如果未设置数量，默认设置为1
if (!this.drawerBarcodeData[idx].count) {
this.drawerBarcodeData[idx].count = 1;
}
}
},
// 获取单据列表
fetchMaster() {
this.loading = true;
listStockIo({ pageSize: 9999, pageNum: 1 })
.then(res => {
this.masterList = res.rows || [];
this.$message.success({
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(() => {
// 取消删除
});
},
// 添加二维码配置 - 增加hover状态初始化
handleAdd() {
const newConfig = {
ioType: undefined,
stockIoId: undefined,
fromWarehouseId: undefined,
warehouseId: undefined,
itemType: undefined,
itemId: undefined,
batchNo: 'auto',
count: 1, // 默认数量1
totalCount: 1, // 默认数量1
unit: '',
text: '二维码', // 默认文字
hovered: false // 新增hover状态，用于交互反馈
};
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;
}
try {
console.log(this.barCodeConfigs[index], index);
saveAsImage(
this.barCodeConfigs[index].code,
this.barCodeConfigs[index].textTpl,
index,
this
);
this.$message.success('图片保存成功');
} catch (error) {
console.error('保存图片失败', error);
this.$message.error('保存图片失败，请稍后重试');
}
},
// 清空所有配置
handleResetAll() {
this.$confirm('确定要清空所有二维码配置吗？此操作不可恢复', '确认清空', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.drawerBarcodeData = [];
this.$message.success({
message: '已清空所有配置',
duration: 1500
});
}).catch(() => {
// 取消清空
});
},
// 打印预览 - 增加加载状态提示
handlePrintPreview() {
document.querySelector('#previewIframe').contentWindow.print();
},
// 验证单个配置是否有效
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>
<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
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 {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
flex: 1;
&:hover {
::-webkit-scrollbar {
width: 6px;
height: 6px;
display: block;
}
::-webkit-scrollbar-track {
display: block;
border-radius: 3px;
}
}
}
// 配置卡片 - 优化阴影和间距
.config-card {
border-radius: 8px;
transition: all 0.3s ease;
overflow: hidden;
border: 1px solid $gray-mid;
}
// 配置卡片头部 - 优化布局和样式
.config-card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px; // Reduced padding
.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;
}
}
}
}
// 配置表单内容 - 优化间距和分组
.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
}
}
// 空状态样式 - 优化间距和图标
.empty-state,
.preview-empty {
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
}
}
// 响应式调整 - 优化小屏幕体验
@media (max-width: 1200px) {
.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
}
}
@media print {
.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>

318
klp-ui/src/views/wms/print/pages/code/index.vue
View File

@@ -1,318 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="编号" prop="serialNumber">
<el-input
v-model="queryParams.serialNumber"
placeholder="请输入编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="二维码尺寸" prop="size">
<el-input
v-model="queryParams.size"
placeholder="请输入二维码尺寸"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
</el-col>
<el-col :span="1.5">
二维码预览：<el-switch v-model="showQRCode" />
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="generateRecordList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="recordId" v-if="false"/>
<!-- <el-table-column label="二维码类型" align="center" prop="qrcodeType" /> -->
<!-- <el-table-column label="二维码内容" align="center" prop="content" /> -->
<!-- <el-table-column label="是否启用" align="center" prop="isEnabled" /> -->
<el-table-column label="编号" align="center" prop="serialNumber" />
<el-table-column label="二维码尺寸" align="center" prop="size" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column v-if="showQRCode" label="二维码" align="center" prop="content">
<template slot-scope="scope">
<QRCode :content="scope.row.recordId" :size="scope.row.size"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改二维码生成记录对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="二维码内容">
<textarea v-model="form.content" :min-height="192" style="width: 100%;height: 192px;background-color: #393e43;color: #fff;" />
</el-form-item>
<el-form-item label="是否启用" prop="isEnabled">
<!-- 单选框 -->
<el-radio-group v-model="form.isEnabled">
<el-radio :label="1">启用</el-radio>
<el-radio :label="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-input v-model="form.status" placeholder="请输入状态" />
</el-form-item>
<el-form-item label="编号" prop="serialNumber">
<el-input v-model="form.serialNumber" placeholder="请输入编号" />
</el-form-item>
<el-form-item label="二维码尺寸" prop="size">
<el-input v-model="form.size" placeholder="请输入二维码尺寸" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listGenerateRecord, getGenerateRecord, delGenerateRecord, addGenerateRecord, updateGenerateRecord } from "@/api/wms/generateRecord";
import QRCode from '../../components/QRCode.vue';
export default {
name: "GenerateRecord",
components: {
QRCode
},
data() {
return {
// 是否显示二维码
showQRCode: false,
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 二维码生成记录表格数据
generateRecordList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
qrcodeType: undefined,
content: undefined,
isEnabled: undefined,
serialNumber: undefined,
size: undefined,
status: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
},
methods: {
/** 查询二维码生成记录列表 */
getList() {
this.loading = true;
listGenerateRecord(this.queryParams).then(response => {
this.generateRecordList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
recordId: undefined,
qrcodeType: undefined,
content: undefined,
isEnabled: undefined,
serialNumber: undefined,
size: undefined,
delFlag: undefined,
remark: undefined,
createTime: undefined,
createBy: undefined,
updateTime: undefined,
updateBy: undefined,
status: undefined,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.recordId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加二维码生成记录";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const recordId = row.recordId || this.ids
getGenerateRecord(recordId).then(response => {
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改二维码生成记录";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.recordId != null) {
updateGenerateRecord(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addGenerateRecord(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const recordIds = row.recordId || this.ids;
this.$modal.confirm('是否确认删除二维码生成记录编号为"' + recordIds + '"的数据项？').then(() => {
this.loading = true;
return delGenerateRecord(recordIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('klp/generateRecord/export', {
...this.queryParams
}, `generateRecord_${new Date().getTime()}.xlsx`)
}
}
};
</script>

785
klp-ui/src/views/wms/print/pages/gen/index.vue
View File

@@ -1,785 +0,0 @@
<template>
<div class="print-page-container">
<!-- 页面标题栏 - 增加面包屑导航，提升页面定位感 -->
<div class="page-header">
<div class="header-actions">
<el-tooltip content="清空所有已添加的二维码配置" placement="top" :disabled="drawerBarcodeData.length === 0">
<el-button type="default" icon="el-icon-refresh" @click="handleResetAll"
:disabled="drawerBarcodeData.length === 0" class="btn-reset">
清空所有
</el-button>
</el-tooltip>
<el-tooltip content="仅对完整配置的二维码进行打印预览" placement="top"
:disabled="drawerBarcodeData.length === 0 || !isAllValid">
<el-button type="success" icon="el-icon-printer" @click="handlePrintPreview"
:disabled="drawerBarcodeData.length === 0 || !isAllValid" class="btn-print">
打印预览
</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="16" class="right-col">
<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>
</el-col>
<!-- 左侧配置区 - 增加操作提示 -->
<el-col :span="8" class="left-col">
<el-alert title="信息填写完成后需要点击生成按钮才会出现在预览区域" type="info" show-icon></el-alert>
<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 class="empty-text">暂无二维码配置</div>
<div class="empty-desc">点击"添加二维码"按钮，开始创建打印配置</div>
<el-button type="primary" size="small" @click="handleAdd" class="empty-action-btn">
立即添加
</el-button>
</div>
<!-- 二维码配置表单列表 - 优化卡片间距和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">二维码配置{{ cfg.recordId }}</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>
<el-tag size="mini" type="info" v-else class="card-status-tag">
未填写
</el-tag>
</div>
<div class="card-actions">
<el-tooltip v-if="!cfg.gend" content="生成二维码" placement="top">
<el-button v-loading="cfg.gening" type="text" size="mini" @click="handleGenerate(cfg, idx)"
icon="el-icon-plus" :disabled="!isConfigValid(cfg)" class="action-btn">
</el-button>
</el-tooltip>
<el-tooltip v-else content="变更内容" placement="top">
<el-button type="text" size="mini" @click="handleEditContent(cfg, idx)" icon="el-icon-edit"
class="action-btn"></el-button>
</el-tooltip>
<el-tooltip content="表单展示开关" placement="top">
<el-button type="text" size="mini" @click="handleShowForm(cfg, idx)" icon="el-icon-setting"
class="action-btn"></el-button>
</el-tooltip>
<el-tooltip content="另存为图片" placement="top">
<el-button type="text" size="mini" @click="saveAsImage(idx)" icon="el-icon-download"
:disabled="!isConfigValid(cfg) && cfg.gend" 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" v-if="cfg.showForm">
<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" @change="(value) => {
const prefix = value == 'in' ? '入库' : value == 'out' ? '出库' : value == 'transfer' ? '移库' : ''
cfg.text = prefix + '二维码' + new Date().getTime()
}">
<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="cfg.ioType == 'in' ? '入库单据号' : cfg.ioType == 'out' ? '出库单据号' : cfg.ioType == 'transfer' ? '移库单据号' : '单据号'"
: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"
@change="(warehouse) => onTargetWarehouseChange(cfg, idx, warehouse)" />
</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"
@change="(warehouse) => onFromWarehouseChange(cfg, idx, warehouse)" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="cfg.ioType === 'in'">
<el-form-item label="备用单据" :error="getError(cfg, 'stockIoWaitId')" class="form-item">
<el-select clearable filterable size="mini" v-model="cfg.stockIoWaitId" placeholder="请选择备用单据"
class="form-select" :disabled="!cfg.ioType">
<el-option v-for="item in masterList.filter(i => i.ioType === 'out')"
: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, '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, 'quantity')" class="form-item">
<el-input-number :controls=false controls-position="right" v-model="cfg.quantity" :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.batchNo" size="mini" placeholder="请输入批次号" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="8">
<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-col :span="12">
<el-form-item label="生成数量" class="form-item">
<el-input v-model="cfg.totalCount" 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>
</el-col>
</el-row>
</div>
</template>
<script>
// 保持原脚本逻辑不变，仅增加hover状态初始化
import BarCode from '../../components/CodeRenderer.vue';
import ProductSelect from '@/components/KLPService/ProductSelect/index.vue';
import SemiSelect from '@/components/KLPService/SemiSelect/index.vue';
import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect/index.vue';
import WarehouseSelect from '@/components/WarehouseSelect/index.vue';
import { saveAsImage } from '@/utils/klp';
import { listStockIo } from '@/api/wms/stockIo';
import { addGenerateRecord, delGenerateRecord, updateGenerateRecord } from '@/api/wms/generateRecord';
export default {
name: 'Print',
components: {
BarCode,
ProductSelect,
SemiSelect,
RawMaterialSelect,
WarehouseSelect
},
dicts: ['stock_item_type', 'stock_io_type'],
data() {
return {
drawerBarcodeData: [], // 条码数据
loading: false, // 加载状态
masterList: [], // 单据列表
};
},
mounted() {
this.fetchMaster();
},
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() {
return this.drawerBarcodeData
.filter(cfg => this.isConfigValid(cfg))
.map(b => ({
code: b.recordId,
count: b.totalCount,
textTpl: b.text || '二维码'
}));
}
},
methods: {
// 物料选择变更
onItemChange(item, idx) {
if (item && this.drawerBarcodeData[idx]) {
// 设置对应的物料名称
console.log(item, '物料信息');
const name = item.name || item.materialName || item.productName || item.rawMaterialName;
const code = item.code || item.materialCode || item.productCode || item.rawMaterialCode;
this.$set(this.drawerBarcodeData[idx], 'itemName', name);
this.$set(this.drawerBarcodeData[idx], 'itemCode', code);
// this.drawerBarcodeData[idx].unit = item.unit;
// 如果未设置数量，默认设置为1
if (!this.drawerBarcodeData[idx].count) {
this.drawerBarcodeData[idx].count = 1;
}
}
},
handleShowForm(cfg, idx) {
this.$set(this.drawerBarcodeData[idx], 'showForm', !this.drawerBarcodeData[idx].showForm);
},
handleEditContent(cfg, idx) {
updateGenerateRecord({
recordId: cfg.recordId,
content: JSON.stringify(this.drawerBarcodeData[idx])
}).then(res => {
this.$message.success('变更内容成功');
}).catch(err => {
this.$message.error('变更内容失败');
});
},
onTargetWarehouseChange(cfg, idx, warehouse) {
console.log(warehouse, '目标仓库');
this.$set(this.drawerBarcodeData[idx], 'warehouseName', warehouse.warehouseName);
},
onFromWarehouseChange(cfg, idx, warehouse) {
console.log(warehouse, '源仓库');
this.$set(this.drawerBarcodeData[idx], 'fromWarehouseName', warehouse.warehouseName);
},
// 获取单据列表
fetchMaster() {
this.loading = true;
listStockIo({ pageSize: 9999, pageNum: 1 })
.then(res => {
// 排除已完成的单据，因为已完成的但是不可以继续修改
this.masterList = res.rows.filter(item => item.status != 2) || [];
})
.catch(error => {
console.error("获取挂载单据失败", error);
this.$message.error("获取挂载单据失败，请稍后重试");
})
.finally(() => {
this.loading = false;
});
},
// 删除二维码配置
handleDelete(cfg, idx) {
this.$confirm('确定要删除这个二维码配置吗？', '确认删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const recordId = this.drawerBarcodeData[idx].recordId;
if (recordId) {
delGenerateRecord(recordId)
}
this.drawerBarcodeData.splice(idx, 1);
this.$message.success({
message: '删除成功',
duration: 1500
});
}).catch(() => {
// 取消删除
});
},
// 添加二维码配置 - 增加hover状态初始化
// randomBatchNo, 生成10位的批次号
randomBatchNo() {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
const day = new Date().getDate();
const hour = new Date().getHours();
const salt = Math.random().toString(36).substring(2, 4);
// 如果出现2月、3日，5点等需补全为02，03，05
function pad(num) {
return num < 10 ? '0' + num : num;
}
return year + pad(month) + pad(day) + pad(hour) + salt;
},
handleAdd() {
const newConfig = {
ioType: undefined,
stockIoId: undefined,
fromWarehouseId: undefined,
warehouseId: undefined,
itemType: undefined,
gend: false,
itemId: undefined,
// 年月日时 + 随机两个字符
batchNo: this.randomBatchNo(),
quantity: 1, // 默认数量1
totalCount: 1, // 默认数量1
unit: '',
text: '二维码', // 默认文字
hovered: false, // 新增hover状态，用于交互反馈,
showForm: true, // 新增表单展示开关
stockIoWaitId: undefined,
};
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;
}
try {
saveAsImage(
this.barCodeConfigs[index].code,
this.barCodeConfigs[index].textTpl,
index,
this
);
this.$message.success('图片保存成功');
} catch (error) {
console.error('保存图片失败', error);
this.$message.error('保存图片失败，请稍后重试');
}
},
// 清空所有配置
handleResetAll() {
this.$confirm('确定要清空所有二维码配置吗？此操作不可恢复', '确认清空', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.drawerBarcodeData = [];
this.$message.success({
message: '已清空所有配置',
duration: 1500
});
}).catch(() => {
// 取消清空
});
},
// 打印预览 - 增加加载状态提示
handlePrintPreview() {
document.querySelector('#previewIframe').contentWindow.print();
},
handleGenerate(cfg, idx) {
// 乐观更新，直接隐藏按钮
// this.$set(this.drawerBarcodeData[idx], 'gend', true);
this.$set(this.drawerBarcodeData[idx], 'gening', true);
// 发送网络请求保存已经生成的二维码
addGenerateRecord({
content: JSON.stringify(this.drawerBarcodeData[idx]),
recordType: 1, // recordType为1的时候生成的是一次性的出入库记录码
size: 90,
serialNumber: new Date().getTime(),
remark: '',
}).then(res => {
console.log(res, '生成的二维码数据')
this.$message.success('生成二维码成功');
this.$set(this.drawerBarcodeData[idx], 'recordId', res.data.recordId);
this.$set(this.drawerBarcodeData[idx], 'gend', true);
}).catch(err => {
// 如果请求失败，则回滚乐观更新
this.$message.error('生成二维码失败');
// this.$set(this.drawerBarcodeData[idx], 'gend', false);
}).finally(() => {
this.$set(this.drawerBarcodeData[idx], 'gening', false);
});
},
// 验证单个配置是否有效
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.quantity && cfg.quantity >= 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 'quantity':
return !cfg.quantity || cfg.quantity < 1 ? '请输入有效的数量（至少1）' : '';
default:
return '';
}
}
}
};
</script>
<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
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 {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
flex: 1;
&:hover {
::-webkit-scrollbar {
width: 6px;
height: 6px;
display: block;
}
::-webkit-scrollbar-track {
display: block;
border-radius: 3px;
}
}
}
// 配置卡片 - 优化阴影和间距
.config-card {
border-radius: 8px;
transition: all 0.3s ease;
overflow: hidden;
border: 1px solid $gray-mid;
}
// 配置卡片头部 - 优化布局和样式
.config-card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px; // Reduced padding
.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
color: white
}
.card-status-tag {
margin-left: 6px; // Reduced margin
}
}
.card-actions {
display: flex;
gap: 0px; // Reduced gap between actions
.action-btn {
color: #2bf !important;
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 !important;
}
}
&:disabled {
color: $gray-dark;
opacity: 0.5;
cursor: not-allowed;
}
}
}
}
// 配置表单内容 - 优化间距和分组
.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
}
}
// 空状态样式 - 优化间距和图标
.empty-state,
.preview-empty {
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
}
}
// 响应式调整 - 优化小屏幕体验
@media (max-width: 1200px) {
.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
}
}
@media print {
.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>

360
klp-ui/src/views/wms/print/read.vue
View File

@@ -1,360 +0,0 @@
<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" @input="handleInput" @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>
<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 { getGenerateRecord } from '@/api/wms/generateRecord';
import { addStockIoDetail } from '@/api/wms/stockIoDetail';
// 通用防抖高阶函数（可放在工具类中全局复用）
function debounce(fn, delay = 300) {
let debounceTimer = null; // 闭包保存定时器，避免重复创建
// 返回被包装后的函数（支持传递参数给业务函数）
return function (...args) {
// 1. 清除上一次未执行的定时器（核心：避免短时间内重复触发）
if (debounceTimer) {
clearTimeout(debounceTimer);
}
// 2. 延迟执行业务函数，this 绑定到调用者（适配 Vue 组件上下文）
debounceTimer = setTimeout(() => {
fn.apply(this, args); // 传递参数+保持this指向（Vue组件实例）
}, delay);
};
}
export default {
data() {
return {
text: '',
isLoading: false,
isSubmitting: false,
inputHint: '请输入二维码内容，系统将自动解析',
};
},
components: {
ProductInfo,
RawMaterialInfo,
},
created() {
// 包装“输入解析+提交”的业务函数，生成带防抖的版本
this.debouncedHandleInput = debounce(
this.actualParseAndSubmit, // 实际的业务逻辑函数
500 // 防抖延迟时间
);
},
computed: {
result() {
try {
const text = JSON.parse(this.text)
return text;
} catch (error) {
return {};
}
},
// 验证数据是否有效
isValid() {
const requiredFields = ['ioType', 'itemType', 'itemId', 'quantity'];
// 检查是否包含所有必要字段
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: {
handleInput(value) {
const trimmedValue = value.trim();
// 空值场景：立即反馈，不触发防抖逻辑
if (!trimmedValue) {
this.inputHint = "请输入二维码内容，系统将自动解析";
return;
}
// 基础校验不通过：立即反馈，不触发防抖逻辑
if (!this.isValid) {
this.inputHint = "输入内容不符合基础格式要求，请检查";
return;
}
// 触发防抖后的业务逻辑（此时已自动防抖）
this.debouncedHandleInput(trimmedValue);
},
// 5. 实际的“JSON解析+提交”业务逻辑（纯业务，无防抖代码）
async actualParseAndSubmit(validValue) {
this.isLoading = true;
try {
// 1. 解析JSON
const res = await getGenerateRecord(validValue);
const parsedData = JSON.stringify(res.data.content);
this.result = parsedData;
// 3. 解析成功：反馈+提交
this.inputHint = "数据解析成功，可以提交操作";
this.$message.success({
message: "数据解析成功",
duration: 1500,
});
this.handleSubmit(parsedData); // 调用提交接口
} catch (error) {
// 6. 解析失败：错误处理
this.inputHint = "无法解析数据，请确保输入的是有效的二维码内容";
this.$message.error({
message: "解析失败，请检查输入内容",
duration: 2000,
});
} finally {
// 7. 无论成功/失败，结束加载状态
this.isLoading = false;
}
},
handleBlur() {
// 自动重新聚焦，方便连续扫描
this.$nextTick(() => {
this.$refs.textarea.focus();
});
},
handleSubmit() {
if (!this.isValid) return;
this.isSubmitting = true;
addStockIoDetail({
...this.result,
recordType: 1, // recordType为1标识扫码录入
})
.then(res => {
this.$message.success({
message: '操作成功',
duration: 2000
});
})
.catch(err => {
this.$message.error({
message: '操作失败: ' + (err.message || '未知错误'),
duration: 3000
});
})
.finally(() => {
this.isSubmitting = false;
// 提交成功后重置表单，方便下一次操作
this.handleReset();
});
},
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>

480
klp-ui/src/views/wms/print/scaner.vue
View File

@@ -1,480 +0,0 @@
<template>
<el-row class="container" :gutter="20">
<el-col :span="4" class="device-panel">
<div class="panel-header">
<h3>设备列表</h3>
<el-button size="mini" type="primary" @click="refreshDevices">刷新</el-button>
</div>
<div class="device-stats">
<span>总设备: {{ deviceStats.totalCount || 0 }}</span>
<span>活跃设备: {{ deviceStats.activeCount || 0 }}</span>
</div>
<ul class="device-list">
<li v-for="item in deviceList" :key="item.id" class="device-item" :class="{ active: item.isActive }">
<div class="device-status" :class="{ online: item.isActive }"></div>
<div class="device-info">
<span class="device-name">{{ item.name }}</span>
<span class="device-id">{{ item.id }}</span>
<span class="device-ip">{{ item.ip }}</span>
</div>
</li>
</ul>
</el-col>
<!-- <el-col :span="20" class="main-panel">
<div class="form-panel">
<el-form inline>
<el-form-item label="目标库位" class="form-item">
<WarehouseSelect size="mini" style="width: 200px;" v-model="defaultForm.warehouseId" />
</el-form-item>
<el-form-item label="挂载单据" class="form-item">
<el-select size="mini" filterable v-model="defaultForm.stockIoId" placeholder="请选择挂载单据" clearable class="form-input">
<el-option
v-for="item in masterList"
:key="item.stockIoId"
:label="item.stockIoCode"
:value="item.stockIoId"
/>
</el-select>
</el-form-item>
<el-form-item label="数量" class="form-item">
<el-input size="mini" v-model="defaultForm.quantity" class="form-input" />
</el-form-item>
<el-form-item label="记录类型" class="form-item">
<el-select size="mini" v-model="defaultForm.ioType" placeholder="请选择操作类型" clearable class="form-input">
<el-option label="入库" value="in" />
<el-option label="出库" value="out" />
</el-select>
</el-form-item>
<el-form-item label="批次号" class="form-item">
<el-input size="mini" v-model="defaultForm.batchNo" class="form-input" />
</el-form-item>
<el-button type="primary" :disabled="selectedList.length === 0" @click="handleBatchConfirm">批量确认</el-button>
</el-form>
</div>
<div class="table-panel">
<KLPTable height="100%" :data="messageList" style="width: 100%" class="message-table" stripe @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column prop="time" label="时间" width="150" align="center" />
<el-table-column prop="itemId" label="物料" align="center">
<template #default="scope">
<ProductInfo v-if="scope.row.itemType == 'product' || scope.row.itemType == 'semi'" :productId="scope.row.itemId" />
<RawMaterialInfo v-else :materialId="scope.row.itemId" />
</template>
</el-table-column>
<el-table-column label="存储位置" align="center">
<template #default="scope">
<ELWarehouseSelect v-model="scope.row.warehouseId" />
</template>
</el-table-column>
<el-table-column prop="stockIoId" label="挂载单据" align="center">
<template #default="scope">
<el-select v-model="scope.row.stockIoId" filterable placeholder="请选择挂载单据" clearable class="table-select">
<el-option
v-for="item in masterList"
:key="item.stockIoId"
:label="item.stockIoCode"
:value="item.stockIoId"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="quantity" label="数量" align="center">
<template #default="scope">
<el-input v-model="scope.row.quantity" class="table-input" />
</template>
</el-table-column>
<el-table-column prop="ioType" label="操作类型" align="center">
<template #default="scope">
<el-select v-model="scope.row.ioType" placeholder="请选择操作类型" clearable class="table-select">
<el-option
v-for="dict in dict.type.stock_io_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="batchNo" label="批次号" align="center">
<template #default="scope">
<el-input v-model="scope.row.batchNo" class="table-input" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="140" fixed="right">
<template #default="scope">
<el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
<el-button size="mini" type="text" @click="handleConfirm(scope.row)">确认</el-button>
</template>
</el-table-column>
</KLPTable>
</div>
</el-col> -->
</el-row>
</template>
<script>
import { listStockIo, scanInStock, scanOutStock } from '@/api/wms/stockIo';
import { addStockIoDetail } from '@/api/wms/stockIoDetail';
import WarehouseSelect from '@/components/WarehouseSelect/index.vue';
import ELWarehouseSelect from '@/components/KLPService/WarehouseSelect/index.vue';
import ProductInfo from '@/components/KLPService/Renderer/ProductInfo.vue';
import RawMaterialInfo from '@/components/KLPService/Renderer/RawMaterialInfo.vue';
export default {
components: {
WarehouseSelect,
ELWarehouseSelect,
ProductInfo,
RawMaterialInfo,
},
data() {
return {
deviceList: [],
deviceStats: {
totalCount: 0,
activeCount: 0
},
messageList: [],
socket: null,
defaultForm: {
ioType: '',
stockIoId: '',
quantity: 1,
warehouseId: '',
batchNo: '',
},
masterList: [],
selectedList: [],
};
},
dicts: ['stock_io_type'],
mounted() {
this.initSocket();
this.fetchMaster();
},
beforeDestroy() {
// 组件销毁时关闭WebSocket连接
if (this.socket) {
this.socket.close();
}
},
methods: {
initSocket() {
// 处理WebSocket连接
this.socket = new WebSocket("ws://localhost:9000/ws");
this.socket.onopen = () => {
console.log("Socket 连接已建立");
};
this.socket.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
// 处理设备列表数据
if (data.type === "allDevices") {
console.log("获取设备列表", data);
this.deviceList = data.devices || [];
this.deviceStats = {
totalCount: data.totalCount || 0,
activeCount: data.activeCount || 0
};
}
// 处理扫描消息
else if (data.type === "scanMessage") {
console.log("获取扫描消息", data);
this.messageList.push({
time: new Date().toLocaleString(),
itemId: data.itemId,
itemType: data.itemType,
stockIoId: this.defaultForm.stockIoId,
quantity: this.defaultForm.quantity,
ioType: this.defaultForm.ioType,
warehouseId: this.defaultForm.warehouseId,
batchNo: this.defaultForm.batchNo,
unit: '个'
});
}
} catch (error) {
console.error("解析WebSocket消息失败", error);
}
};
this.socket.onclose = () => {
console.log("Socket 连接已关闭");
// 连接关闭后尝试重连
setTimeout(() => {
this.initSocket();
}, 5000);
};
this.socket.onerror = (error) => {
console.error("Socket 错误", error);
};
},
// 刷新设备列表
refreshDevices() {
if (this.socket && this.socket.readyState === WebSocket.OPEN) {
this.socket.send(JSON.stringify({ type: "refreshDevices" }));
} else {
this.$message.warning("WebSocket连接未建立，无法刷新设备列表");
// 尝试重新连接
this.initSocket();
}
},
fetchMaster() {
listStockIo({ pageSize: 9999, pageNum: 1 }).then(res => {
console.log("获取挂载单据", res);
this.masterList = res.rows || [];
}).catch(error => {
console.error("获取挂载单据失败", error);
this.$message.error("获取挂载单据失败");
});
},
handleDeviceChange(item) {
this.socket.send(
JSON.stringify({
type: "toggleDevice",
deviceId: item.id,
})
);
},
handleBatchConfirm() {
// 汇总会导致的库存变更，需要确认
console.log("批量确认", this.selectedList);
if (this.selectedList.length === 0) {
this.$message.warning("请选择需要确认的记录");
return;
}
// 批量处理逻辑
Promise.all(this.selectedList.map(item => this.processRecord(item)))
.then(() => {
this.$message.success("批量确认成功");
// 从列表中移除已确认的项
this.messageList = this.messageList.filter(
item => !this.selectedList.some(selected => selected.time === item.time)
);
this.selectedList = [];
})
.catch(error => {
console.error("批量确认失败", error);
this.$message.error("批量确认失败");
});
},
handleSelectionChange(selection) {
this.selectedList = selection;
},
handleDelete(row) {
this.messageList = this.messageList.filter(item => item.time !== row.time);
},
async handleConfirm(row) {
try {
await this.processRecord(row);
this.handleDelete(row);
this.$message.success('确认成功');
} catch (error) {
console.error("确认失败", error);
this.$message.error('确认失败');
}
},
// 处理单条记录的确认逻辑
async processRecord(row) {
// 插入记录
await this.insertRecord({...row, recordType: 1});
// 更新库存
await this.updateStock(row);
},
insertRecord(row) {
return addStockIoDetail(row);
},
updateStock(row) {
if (row.ioType === 'in') {
return scanInStock(row);
} else {
return scanOutStock(row);
}
}
},
};
</script>
<style scoped>
.container {
height: calc(100vh - 100px);
padding: 20px;
background-color: #f5f7fa;
}
.device-panel {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 0 !important;
height: calc(100vh - 40px);
display: flex;
flex-direction: column;
}
.panel-header {
padding: 15px 20px;
border-bottom: 1px solid #ebeef5;
background-color: #f8fafc;
border-radius: 8px 8px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-header h3 {
margin: 0;
font-size: 16px;
color: #303133;
font-weight: 500;
}
/* 设备统计信息 */
.device-stats {
padding: 10px 20px;
border-bottom: 1px solid #ebeef5;
display: flex;
justify-content: space-between;
font-size: 13px;
color: #606266;
}
.device-list {
flex: 1;
overflow-y: auto;
margin: 0;
padding: 0;
}
.device-item {
display: flex;
align-items: center;
padding: 12px 20px;
border-bottom: 1px solid #ebeef5;
transition: background-color 0.3s;
cursor: pointer;
}
.device-item:hover {
background-color: #f5f7fa;
}
/* 设备状态指示器 */
.device-status {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
margin-right: 12px;
}
.device-status.online {
background-color: #42b983; /* 绿色表示在线 */
}
.device-info {
flex: 1;
}
.device-name {
display: block;
font-weight: 500;
color: #303133;
margin-bottom: 4px;
}
.device-id {
display: block;
font-size: 12px;
color: #606266;
margin-bottom: 2px;
}
.device-ip {
display: block;
font-size: 12px;
color: #909399;
}
/* 活跃设备高亮 */
.device-item.active {
background-color: #f0f9eb;
}
.form-panel {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 15px 20px;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
}
.filter-form {
display: flex;
align-items: center;
}
.form-item {
margin-bottom: 0 !important;
margin-right: 15px;
}
.form-input {
width: 180px;
}
.table-panel {
flex: 1;
height: calc(100vh - 220px);
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.message-table {
flex: 1;
border-radius: 8px;
overflow: hidden;
}
.table-select {
width: 100%;
}
.table-input {
width: 100%;
}
.el-table::before {
height: 0;
}
.el-table th {
background-color: #f8fafc !important;
color: #606266;
font-weight: 500;
}
.el-table td, .el-table th {
padding: 12px 0;
}
</style>

2
klp-ui/src/views/wms/warehouse/real.vue
View File

@@ -337,7 +337,7 @@ import {
importActualWarehouse,
treeActualWarehouseTwoLevel
} from "@/api/wms/actualWarehouse";
import QRCode from "../print/components/QRCode.vue";
import QRCode from "@/components/QRCode";
import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
import { listActualWarehouse } from "../../../api/wms/actualWarehouse";