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

Merge remote-tracking branch 'origin/0.8.X' into 0.8.X

Browse Source
This commit is contained in:
Joshi
2025-09-12 14:27:08 +08:00
parent fdec7e1d47 bf08f429e1
commit 510a8efb91
16 changed files with 2405 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
klp-ui/package.json
View File

@@ -42,6 +42,7 @@
"bpmn-js-token-simulation": "0.10.0",
"clipboard": "2.0.8",
"core-js": "3.25.3",
"dom-to-image": "^2.6.0",
"echarts": "5.4.0",
"element-ui": "2.15.12",
"file-saver": "2.0.5",
@@ -54,6 +55,7 @@
"jsencrypt": "3.0.0-rc.1",
"mqtt": "^5.13.3",
"nprogress": "0.2.0",
"print-js": "^1.6.0",
"qrcode": "^1.5.4",
"quill": "1.3.7",
"screenfull": "5.0.2",

44
klp-ui/src/api/wms/generateRecord.js Normal file
View File

@@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询二维码生成记录列表
export function listGenerateRecord(query) {
return request({
url: '/klp/generateRecord/list',
method: 'get',
params: query
})
}
// 查询二维码生成记录详细
export function getGenerateRecord(recordId) {
return request({
url: '/klp/generateRecord/' + recordId,
method: 'get'
})
}
// 新增二维码生成记录
export function addGenerateRecord(data) {
return request({
url: '/klp/generateRecord',
method: 'post',
data: data
})
}
// 修改二维码生成记录
export function updateGenerateRecord(data) {
return request({
url: '/klp/generateRecord',
method: 'put',
data: data
})
}
// 删除二维码生成记录
export function delGenerateRecord(recordId) {
return request({
url: '/klp/generateRecord/' + recordId,
method: 'delete'
})
}

29
klp-ui/src/assets/styles/element-ui.scss
View File

@@ -275,20 +275,25 @@ body {
}
.el-button--medium {
padding: 4px 8px;
padding: 4px 8px !important;
font-size: 12px;
height: $--btn-height - 4px;
}
// 迷你按钮（超紧凑）
.el-button--mini {
padding: 4px 8px;
padding: 4px 8px !important;
font-size: 12px;
height: $--btn-height - 4px;
&.is-circle {
padding: 4px !important;
}
}
.el-button--mini.is-circle {
padding: 4px !important;
.el-button--small {
padding: 4px 8px !important;
font-size: 12px;
height: $--btn-height - 4px;
}
@@ -385,6 +390,10 @@ body {
}
}
&__empty-block {
background: #1e2227;
}
// 适配尺寸类（统一紧凑）
&.el-table--medium .el-table__cell,
&.el-table--mini .el-table__cell {
@@ -1638,12 +1647,12 @@ div.pagination-container {
// ---------------------- 3.8 自定义工具类 ----------------------
// 固定按钮宽度
.fixed-width {
.el-button--mini {
padding: 7px 10px;
width: 60px;
}
}
// .fixed-width {
// .el-button--mini {
// padding: 7px 10px;
// width: 60px;
// }
// }
// 居中单元格（深色表头）
.is-center.is-leaf.el-table__cell {

2
klp-ui/src/assets/styles/sidebar.scss
View File

@@ -213,7 +213,7 @@
min-width: $base-sidebar-width !important;
}
.el-submenu .el-menu{
.el-submenu .el-menu {
padding-left: 10px;
}

7
klp-ui/src/components/WarehouseSelect/index.vue
View File

@@ -38,7 +38,8 @@ export default {
data() {
return {
warehouseOptions: [],
innerValue: this.value
innerValue: this.value,
list: []
};
},
watch: {
@@ -52,6 +53,7 @@ export default {
methods: {
loadOptions() {
listWarehouse().then(response => {
this.list = response.data;
const options = [];
if (this.showTop) {
const top = { warehouseId: 0, warehouseName: '顶级节点', children: [] };
@@ -88,6 +90,9 @@ export default {
this.innerValue = null;
} else {
this.$emit('input', val);
// 查找完整的仓库对象
const warehouse = this.list.find(item => item.warehouseId === val);
this.$emit('change', warehouse);
}
}
}

40
klp-ui/src/views/wms/print/components/QRCode.vue Normal file
View File

@@ -0,0 +1,40 @@
<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
}
},
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>

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

@@ -346,7 +346,8 @@ export default {
}
try {
saveAsImage(
console.log(this.barCodeConfigs[index], index);
saveAsImage(
this.barCodeConfigs[index].code,
this.barCodeConfigs[index].textTpl,
index,
@@ -435,7 +436,6 @@ $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;
@@ -513,19 +513,7 @@ $card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
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;
}
@@ -534,25 +522,10 @@ $card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
// 配置卡片 - 优化阴影和间距
.config-card {
border: 1px solid $gray-mid;
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;
}
}
border: 1px solid $gray-mid;
}
// 配置卡片头部 - 优化布局和样式
@@ -561,8 +534,6 @@ $card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
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;

312
klp-ui/src/views/wms/print/pages/code/index.vue Normal file
View File

@@ -0,0 +1,312 @@
<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 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="二维码内容">
<editor v-model="form.content" :min-height="192"/>
</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="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: 10,
qrcodeType: undefined,
content: undefined,
isEnabled: undefined,
serialNumber: undefined,
size: 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
};
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>

754
klp-ui/src/views/wms/print/pages/gen/index.vue Normal file
View File

@@ -0,0 +1,754 @@
<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-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-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]) {
// 设置对应的物料名称
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状态初始化
handleAdd() {
const newConfig = {
ioType: undefined,
stockIoId: undefined,
fromWarehouseId: undefined,
warehouseId: undefined,
itemType: undefined,
gend: false,
itemId: undefined,
batchNo: 'auto',
count: 1, // 默认数量1
totalCount: 1, // 默认数量1
unit: '',
text: '二维码', // 默认文字
hovered: false, // 新增hover状态，用于交互反馈,
showForm: true // 新增表单展示开关
};
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.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
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>

120
klp-ui/src/views/wms/print/pages/tt/LabelRender/ForgeTagPreview.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<div class="label-container">
<div class="company-name">嘉祥科伦普重工有限公司</div>
<div class="label-title">力学性能标签</div>
<table class="info-table">
<tr>
<td class="label-cell">卷号</td>
<td class="value-cell">{{ content.coilNumber || '' }}</td>
<td class="label-cell">屈服</td>
<td class="value-cell">{{ content.yieldStrength || '' }}</td>
</tr>
<tr>
<td class="label-cell">规格</td>
<td class="value-cell">{{ content.specification || '' }}</td>
<td class="label-cell">抗拉</td>
<td class="value-cell">{{ content.tensileStrength || '' }}</td>
</tr>
<tr>
<td class="label-cell">材质</td>
<td class="value-cell">{{ content.material || '' }}</td>
<td class="label-cell">延伸</td>
<td class="value-cell">{{ content.elongation || '' }}</td>
</tr>
<tr>
<td class="label-cell">原料厂家</td>
<td class="value-cell">{{ content.rawMaterialFactory || '' }}</td>
<td class="label-cell">锌层质量</td>
<td class="value-cell">{{ content.platingQuality || '' }}</td>
</tr>
<tr>
<td class="label-cell">备注</td>
<td class="value-cell" colspan="3">{{ content.remark || '' }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'MechanicalPropertyLabel',
props: {
content: {
type: Object,
default: () => ({
coilNumber: '',
yieldStrength: '',
specification: '',
tensileStrength: '',
material: '',
elongation: '',
rawMaterialFactory: '',
platingQuality: '',
remark: ''
})
}
}
}
</script>
<style scoped>
.label-container {
width: 50em; /* 容器宽度（可根据需求调整） */
min-height: 30em; /* 容器最小高度 */
border: 1px solid #000;
padding: 2px;
box-sizing: border-box;
font-family: "SimSun", serif;
font-size: 8px;
line-height: 1.2;
display: flex;
flex-direction: column; /* 垂直分布子元素 */
}
.company-name {
text-align: center;
font-weight: bold;
margin-bottom: 1px;
font-size: 2em;
}
.label-title {
text-align: center;
font-weight: bold;
margin-bottom: 2px;
border-bottom: 1px solid #000;
padding-bottom: 1px;
font-size: 2em;
}
.info-table {
width: 100%;
border-collapse: collapse; /* 合并边框 */
font-size: 7px;
flex-grow: 1; /* 拉伸占据剩余垂直空间 */
}
.info-table td {
border: 1px solid #000; /* 表格单元格边框 */
text-align: center;
vertical-align: middle;
font-size: 2em;
width: 25%; /* 4列均分宽度，每列占25%，确保 label/value 空间相同 */
}
.label-cell {
font-weight: bold;
/* 去掉背景色：删除原有的 background-color 声明 */
}
.value-cell {
background-color: #fff; /* 可根据需求保留/删除，与原图视觉一致 */
}
.label-footnote {
margin-top: 2px;
text-align: center;
font-size: 7px;
color: #555;
}
</style>

208
klp-ui/src/views/wms/print/pages/tt/LabelRender/OuterTagPreview.vue Normal file
View File

@@ -0,0 +1,208 @@
<template>
<div class="label-container">
<!-- 顶部公司信息 -->
<div class="company-header">
<img :src="logo" alt="Company Logo" class="company-logo" />
<div class="company-name">
嘉祥科伦普重工有限公司<br />
<span class="english-name">Jiaxiang KLP Heavy Industry Co., Ltd.</span>
</div>
</div>
<!-- 产品标题 -->
<div class="product-title">
{{ content.productName || '产品名称' }}
</div>
<!-- 核心信息表格：每行四列 = 2个键值对 -->
<table class="info-table">
<tr>
<td class="label-cell">订货单位</td>
<td class="value-cell">{{ content.orderUnit || '' }}</td>
<td class="label-cell">合同号</td>
<td class="value-cell">{{ content.contractNumber || '' }}</td>
</tr>
<tr>
<td class="label-cell">执行标准</td>
<td class="value-cell">{{ content.executionStandard || '' }}</td>
<td class="label-cell">钢卷号</td>
<td class="value-cell">{{ content.coilNumber || '' }}</td>
</tr>
<tr>
<td class="label-cell">原料卷号</td>
<td class="value-cell">{{ content.rawBlankNumber || '' }}</td>
<td class="label-cell">规格</td>
<td class="value-cell">{{ content.specification || '' }}</td>
</tr>
<tr>
<td class="label-cell">材质</td>
<td class="value-cell">{{ content.material || '' }}</td>
<td class="label-cell">表面质量</td>
<td class="value-cell">{{ content.surfaceQuality || '' }}</td>
</tr>
<tr>
<td class="label-cell">表面处理</td>
<td class="value-cell">{{ content.surfaceTreatment || '' }}</td>
<td class="label-cell">剪切要求</td>
<td class="value-cell">{{ content.cuttingRequirements || '' }}</td>
</tr>
<tr>
<td class="label-cell">包装种类</td>
<td class="value-cell">{{ content.packagingType || '' }}</td>
<td class="label-cell">毛重</td>
<td class="value-cell">{{ content.grossWeight || '' }}</td>
</tr>
<tr>
<td class="label-cell">净重</td>
<td class="value-cell">{{ content.netWeight || '' }}</td>
<td class="label-cell">参考长度</td>
<td class="value-cell">{{ content.referenceLength || '' }}</td>
</tr>
<tr>
<td class="label-cell">生产日期</td>
<td class="value-cell" colspan="3">{{ content.productionDate || '' }}</td>
</tr>
</table>
<!-- 底部信息 -->
<div class="footer-info">
<div class="address">
地址：{{ content.address || '' }}<br />
<span class="english-address">{{ content.englishAddress || '' }}</span>
</div>
<div class="contact-timestamp">
<div class="contact">TEL：{{ content.tel || '' }}</div>
<div class="timestamp">{{ content.timestamp || '' }}</div>
</div>
</div>
</div>
</template>
<script>
import logo from '@/assets/logo/logo.png'
export default {
name: 'MetalSheetLabel',
props: {
content: {
type: Object,
default: () => ({
// form3 所有字段
orderUnit: '',
contractNumber: '',
productName: '镀锌卷板合格品(GI)',
executionStandard: '',
coilNumber: 'D2Z125031809202',
rawBlankNumber: '',
specification: '2.28*1250',
material: '',
surfaceQuality: '',
surfaceTreatment: '环保钝化/不涂油',
cuttingRequirements: '',
packagingType: 'A03',
grossWeight: '',
netWeight: '7080',
referenceLength: '320',
productionDate: '2025-03-19',
// 底部信息字段
address: '唐山市滦州市茨榆坨工业区',
englishAddress: 'Donghai special steel, ciyutuo Industrial Zone, Luanzhou, Tangshan, Hebei province, China.',
tel: '0315-7560777',
timestamp: '2025.04.12 10:14'
})
}
},
data() {
return {
logo,
}
}
}
</script>
<style scoped>
.label-container {
width: 45em;
height: 25em;
padding: 0.5em;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
border: 1px solid #000;
}
.company-header {
display: flex;
align-items: center;
margin-bottom: 0.3em;
}
.company-logo {
width: 2.8em;
height: 2.8em;
margin-right: 0.5em;
}
.company-name {
font-size: 0.95em;
line-height: 1.1;
}
.english-name {
font-size: 0.6em;
opacity: 0.8;
}
.product-title {
font-size: 1.4em;
font-weight: bold;
text-align: center;
margin-bottom: 0.4em;
border-bottom: 1.5px solid #000;
padding-bottom: 0.2em;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 0.5em;
table-layout: fixed;
}
.info-table td {
border: 1px solid #000;
padding: 0.25em;
font-size: 0.78em; /* 微调字体确保所有字段显示完整 */
width: 25%;
height: 2.1em;
text-align: center;
vertical-align: middle;
word-break: break-all;
}
.label-cell {
font-weight: bold;
}
.footer-info {
display: flex;
justify-content: space-between;
align-items: flex-start;
font-size: 0.7em;
margin-top: 0.3em;
}
.address {
line-height: 1.2;
width: 65%;
}
.english-address {
opacity: 0.8;
font-size: 0.9em;
}
.contact-timestamp {
text-align: right;
line-height: 1.4;
}
</style>

89
klp-ui/src/views/wms/print/pages/tt/LabelRender/ProductionTagPreview.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<div class="material-label-container">
<table class="material-label-table">
<!-- 调整第一行结构，使label和value各占2列（等宽） -->
<tr>
<td class="label-cell" colspan="1">料卷号</td>
<td class="value-cell" colspan="3">{{ content.coilNumber || '' }}</td>
</tr>
<tr>
<td class="label-cell">规格(mm)</td>
<td class="value-cell">{{ content.specification || '' }}</td>
<td class="label-cell">净重</td>
<td class="value-cell">{{ content.netWeight || '' }}</td>
</tr>
<tr>
<td class="label-cell">材质</td>
<td class="value-cell">{{ content.material || '' }}</td>
<td class="label-cell">下道</td>
<td class="value-cell">{{ content.nextProcess || '' }}</td>
</tr>
<tr>
<td class="label-cell">生产班组</td>
<td class="value-cell">{{ content.productionTeam || '' }}</td>
<td class="label-cell">时间</td>
<td class="value-cell">{{ content.productionDate || '' }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'MaterialLabel',
props: {
content: {
type: Object,
default: () => ({
coilNumber: '',
specification: '',
netWeight: '',
material: '',
nextProcess: '',
productionTeam: '',
productionDate: ''
})
}
}
}
</script>
<style scoped>
.material-label-container {
border: 1px solid #333;
width: 25em;
height: 15em;
padding: 5px;
display: flex; /* 启用Flex布局 */
flex-direction: column; /* 子元素垂直排列 */
font-family: "SimSun", serif;
box-sizing: border-box; /* 确保内边距/边框不影响总尺寸 */
}
.material-label-table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
flex-grow: 1; /* 让表格拉伸，占满剩余垂直空间 */
height: 0; /* 配合flex-grow，自动计算高度 */
}
/* 四列均分宽度，每列占25% */
.material-label-table td {
border: 1px solid #333;
padding: 3px 5px;
font-size: 14px;
/* width: 25%; */
box-sizing: border-box;
text-align: center;
}
.label-cell {
background-color: #f5f5f5;
font-weight: bold;
}
.value-cell {
text-align: center;
}
</style>

112
klp-ui/src/views/wms/print/pages/tt/LabelRender/SaltSprayTagPreview.vue Normal file
View File

@@ -0,0 +1,112 @@
<template>
<div class="label-container">
<div class="company-name">嘉祥科伦普重工有限公司</div>
<div class="label-title">盐雾试验标签</div>
<table class="info-table">
<tr>
<td class="label-cell">卷号</td>
<td class="value-cell">{{ content.coilNumber || '' }}</td>
<td class="label-cell">开始时间</td>
<td class="value-cell">{{ content.startDate || '' }}</td>
</tr>
<tr>
<td class="label-cell">规格</td>
<td class="value-cell">{{ content.specification || '' }}</td>
<td class="label-cell">结束时间</td>
<td class="value-cell">{{ content.endDate || '' }}</td>
</tr>
<tr>
<td class="label-cell">材质</td>
<td class="value-cell">{{ content.material || '' }}</td>
<td class="label-cell">锌层质量</td>
<td class="value-cell">{{ content.platingQuality || '' }}</td>
</tr>
<tr>
<td class="label-cell">原料厂家</td>
<td class="value-cell" colspan="3">{{ content.rawMaterialFactory || '' }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'SaltSprayTestLabel',
props: {
content: {
type: Object,
default: () => ({
coilNumber: '',
startDate: '',
specification: '',
endDate: '',
material: '',
rawMaterialFactory: '',
platingQuality: ''
})
}
}
}
</script>
<style scoped>
.label-container {
width: 50em; /* 容器宽度（可根据需求调整） */
min-height: 30em; /* 容器最小高度 */
border: 1px solid #000;
padding: 2px;
box-sizing: border-box;
font-family: "SimSun", serif;
font-size: 8px;
line-height: 1.2;
display: flex;
flex-direction: column; /* 垂直分布子元素 */
}
.company-name {
text-align: center;
font-weight: bold;
margin-bottom: 1px;
font-size: 2em;
}
.label-title {
text-align: center;
font-weight: bold;
margin-bottom: 2px;
border-bottom: 1px solid #000;
padding-bottom: 1px;
font-size: 2em;
}
.info-table {
width: 100%;
border-collapse: collapse; /* 合并边框 */
font-size: 7px;
flex-grow: 1; /* 拉伸占据剩余垂直空间 */
}
.info-table td {
border: 1px solid #000; /* 表格单元格边框 */
text-align: center;
vertical-align: middle;
font-size: 2em;
width: 25%; /* 4列均分宽度，每列占25%，确保 label/value 空间相同 */
}
.label-cell {
font-weight: bold;
/* 去掉背景色：删除原有的 background-color 声明 */
}
.value-cell {
background-color: #fff; /* 可根据需求保留/删除，与原图视觉一致 */
}
.label-footnote {
margin-top: 2px;
text-align: center;
font-size: 7px;
color: #555;
}
</style>

122
klp-ui/src/views/wms/print/pages/tt/LabelRender/SampleTagPreview.vue Normal file
View File

@@ -0,0 +1,122 @@
<template>
<div class="sample-label-container">
<div class="company-title">嘉祥科伦普重工有限公司</div>
<div class="label-title">样品标签</div>
<table class="info-table">
<tr>
<td class="label-cell">品名</td>
<td class="value-cell" colspan="3">{{ content.productName || '' }}</td>
</tr>
<tr>
<td class="label-cell">执行标准</td>
<td class="value-cell" colspan="3">{{ content.executionStandard || '' }}</td>
</tr>
<tr>
<td class="label-cell">材质</td>
<td class="value-cell">{{ content.material || '' }}</td>
<td class="label-cell">厚度</td>
<td class="value-cell">{{ content.thickness || '' }}</td>
</tr>
<tr>
<td class="label-cell">镀层种类</td>
<td class="value-cell">{{ content.platingType || '' }}</td>
<td class="label-cell">镀层质量</td>
<td class="value-cell">{{ content.platingQuality || '' }}</td>
</tr>
<tr>
<td class="label-cell">表面状态</td>
<td class="value-cell">{{ content.surfaceState || '' }}</td>
<td class="label-cell">表面处理</td>
<td class="value-cell">{{ content.surfaceTreatment || '' }}</td>
</tr>
<tr>
<td class="label-cell">样品日期</td>
<td class="value-cell" colspan="3">{{ content.sampleDate || '' }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'SampleLabelRenderer',
props: {
content: {
type: Object,
default: () => ({
productName: '',
executionStandard: '',
material: '',
thickness: '',
platingType: '',
platingQuality: '',
surfaceState: '',
surfaceTreatment: '',
sampleDate: ''
})
}
}
}
</script>
<style scoped>
.sample-label-container {
width: 50em;
height: 40em;
border: 1px solid #000;
padding: 2px;
box-sizing: border-box;
font-family: "SimSun", serif;
font-size: 10px;
line-height: 1.5;
display: flex;
flex-direction: column;
}
.company-title {
text-align: center;
font-weight: bold;
margin-bottom: 2px;
font-size: 11px;
}
.label-title {
text-align: center;
font-weight: bold;
margin-bottom: 3px;
border-bottom: 1px solid #000;
padding-bottom: 1px;
font-size: 11px;
}
.info-table {
width: 100%;
border-collapse: collapse;
flex-grow: 1; /* 让表格占据剩余空间 */
table-layout: fixed; /* 固定表格布局，确保列宽均匀 */
}
.info-table td {
border: 1px solid #000;
padding: 4px 2px;
text-align: center;
vertical-align: middle;
word-break: break-all; /* 处理长文本 */
}
.label-cell {
font-weight: bold;
width: 25%; /* 标签单元格固定占25%宽度 */
background-color: #f9f9f9;
}
/* 调整不同单元格的宽度比例 */
.value-cell {
width: 75%; /* 单标签对应的值占75% */
}
/* 四列布局时，每个单元格占25% */
tr:nth-child(n+3) td:not([colspan]) {
width: 25%;
}
</style>

247
klp-ui/src/views/wms/print/pages/tt/LabelRender/index.vue Normal file
View File

@@ -0,0 +1,247 @@
<template>
<div class="label-render-container">
<!-- 操作按钮 -->
<div class="action-buttons">
<el-button type="primary" @click="downloadLabelAsImage">下载标签图片</el-button>
<el-button type="primary" @click="printLabel" style="margin-left: 10px;">打印标签</el-button>
</div>
<!-- 标签预览容器 -->
<div class="preview-container" id="label-preview-container" ref="labelRef">
<ProductionTagPreview v-if="labelType === '2'" :content="content" />
<OuterTagPreview v-if="labelType === '3'" :content="content" />
<SampleTagPreview v-if="labelType === '4'" :content="content" />
<ForgeTagPreview v-if="labelType === '5'" :content="content" />
<SaltSprayTagPreview v-if="labelType === '6'" :content="content" />
</div>
</div>
</template>
<script>
import domToImage from 'dom-to-image';
import printJS from 'print-js';
import { Message } from 'element-ui'; // 若使用Element UI，引入消息提示
import ProductionTagPreview from './ProductionTagPreview.vue';
import OuterTagPreview from './OuterTagPreview.vue';
import SampleTagPreview from './SampleTagPreview.vue';
import ForgeTagPreview from './ForgeTagPreview.vue';
import SaltSprayTagPreview from './SaltSprayTagPreview.vue';
export default {
name: 'LabelRender',
components: {
ProductionTagPreview,
OuterTagPreview,
SampleTagPreview,
ForgeTagPreview,
SaltSprayTagPreview,
},
props: {
labelType: {
type: String,
required: true,
},
content: {
type: Object,
required: true,
},
},
methods: {
// -------- 图片下载方法 --------
async downloadLabelAsImage() {
// 1. 获取要转换的DOM容器
const labelContainer = document.getElementById('label-preview-container');
if (!labelContainer) {
Message.error('未找到标签容器，无法下载');
return;
}
try {
// 2. 用dom-to-image生成PNG图片的DataURL
const dataUrl = await domToImage.toPng(labelContainer);
// 3. 创建临时a标签，触发下载
const downloadLink = document.createElement('a');
downloadLink.href = dataUrl;
downloadLink.download = `标签_${new Date().getTime()}.png`; // 自定义文件名（带时间戳防重复）
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink); // 下载后移除临时标签
} catch (error) {
console.error('标签图片下载失败：', error);
Message.error('标签图片下载失败，请重试');
}
},
// 打印方法
printLabel() {
// 1. 获取标签容器DOM
const labelContainer = document.getElementById('label-preview-container');
if (!labelContainer) {
Message.error('未找到标签容器，无法打印');
return;
}
// 2. 获取标签原始宽高（用于保持尺寸）
const labelWidth = labelContainer.offsetWidth;
const labelHeight = labelContainer.offsetHeight;
// 3. 定义打印样式（确保与预览一致）
const printStyles = `
/* 基础容器样式 */
#label-preview-container {
width: ${labelWidth}px !important;
height: ${labelHeight}px !important;
padding: 1.5rem !important;
box-sizing: border-box !important;
border: 1px solid #333 !important;
background-color: #fff !important;
}
.company-header {
display: flex;
align-items: center;
margin-bottom: 0.3em;
}
.company-logo {
width: 2.8em;
height: 2.8em;
margin-right: 0.5em;
}
.company-name {
font-size: 0.95em;
line-height: 1.1;
}
.english-name {
font-size: 0.6em;
opacity: 0.8;
}
.product-title {
font-size: 1.4em;
font-weight: bold;
text-align: center;
margin-bottom: 0.4em;
border-bottom: 1.5px solid #000;
padding-bottom: 0.2em;
}
.footer-info {
display: flex;
justify-content: space-between;
align-items: flex-start;
font-size: 0.7em;
margin-top: 0.3em;
}
.address {
line-height: 1.2;
width: 65%;
}
.english-address {
opacity: 0.8;
font-size: 0.9em;
}
.contact-timestamp {
text-align: right;
line-height: 1.4;
}
/* 表格与单元格样式（解决空单元格问题） */
table {
border-collapse: collapse !important;
width: 100% !important;
table-layout: fixed !important; /* 固定列宽 */
}
td {
border: 1px solid #000 !important;
padding: 6px 4px !important; /* 确保单元格大小 */
min-height: 28px !important; /* 空单元格最小高度 */
vertical-align: middle !important;
text-align: center !important;
word-break: break-all !important; /* 长文本换行 */
font-family: "SimSun", serif !important;
font-size: 14px !important;
}
/* 标签与值单元格样式 */
.label-cell {
font-weight: bold !important;
background-color: #f5f5f5 !important;
}
.value-cell {
background-color: #fff !important;
}
/* 列宽分配（根据实际列数调整） */
td { width: 25% !important; } /* 4列布局 */
td[colspan="2"] { width: 50% !important; }
td[colspan="3"] { width: 75% !important; }
td[colspan="4"] { width: 100% !important; }
`;
// 4. 调用print-js打印
printJS({
printable: 'label-preview-container', // 要打印的元素ID
type: 'html', // 打印类型为HTML
header: null, // 不显示页眉
footer: null, // 不显示页脚
style: printStyles, // 注入打印样式
scanStyles: false, // 禁用自动扫描页面样式（避免冲突）
targetStyles: ['*'], // 允许所有样式生效
printContainer: true, // 打印指定容器
onError: (error) => { // 错误处理
console.error('打印失败:', error);
Message.error('打印失败，请重试');
}
});
}
},
};
</script>
<style scoped>
.label-render-container {
width: 100%;
height: calc(100vh - 200px);
display: flex;
flex-direction: column;
/* 按钮与预览垂直排列 */
justify-content: flex-start;
align-items: center;
padding: 2rem;
box-sizing: border-box;
}
.action-buttons {
margin-bottom: 1rem;
/* 按钮与预览区的间距 */
}
.preview-container {
background-color: #fff;
color: #000;
padding: 1.5rem;
width: fit-content;
min-width: 200px;
border-radius: 6px;
box-shadow: 0 0 60px rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
transition: all 0.3s ease;
}
.preview-container:hover {
box-shadow: 0 0 80px rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
</style>

326
klp-ui/src/views/wms/print/pages/tt/index.vue Normal file
View File

@@ -0,0 +1,326 @@
<template>
<div>
<el-row>
<el-col :span="6">
<el-row>
<el-button type="primary" @click="handleGen">生成标签</el-button>
<!-- 只有在预览状态才显示关闭按钮 -->
<el-button
type="danger"
@click="handleClosePreview"
v-if="showPreview"
style="margin-left: 10px;"
>
关闭预览
</el-button>
</el-row>
<el-row style="margin-top: 15px;">
<el-select v-model="recordType" placeholder="请选择标签类型" style="width: auto;">
<!-- 第一个选项默认选中，对应原radio的label="2" -->
<el-option label="内标签" value="2"></el-option>
<el-option label="外标签" value="3"></el-option>
<el-option label="样品标签" value="4"></el-option>
<el-option label="力学性能标签" value="5"></el-option>
<el-option label="盐雾试验标签" value="6"></el-option>
</el-select>
</el-row>
<el-row style="margin-top: 15px;">
<el-form inline v-if="recordType === '2'" :model="form2" label-width="80px">
<el-form-item label="钢卷号">
<el-input v-model="form2.coilNumber" placeholder="输入钢卷号"></el-input>
</el-form-item>
<el-form-item label="规格">
<el-input v-model="form2.specification" placeholder="输入规格"></el-input>
</el-form-item>
<el-form-item label="净重">
<el-input v-model="form2.netWeight" placeholder="输入净重"></el-input>
</el-form-item>
<el-form-item label="材质">
<el-input v-model="form2.material" placeholder="输入材质"></el-input>
</el-form-item>
<el-form-item label="下工序">
<el-input v-model="form2.nextProcess" placeholder="输入下工序"></el-input>
</el-form-item>
<el-form-item label="生产班组">
<el-input v-model="form2.productionTeam" placeholder="输入生产班组"></el-input>
</el-form-item>
<el-form-item label="生产日期">
<el-input v-model="form2.productionDate" placeholder="输入生产日期"></el-input>
</el-form-item>
</el-form>
<el-form inline v-if="recordType === '3'" :model="form3" label-width="80px">
<el-form-item label="订货单位">
<el-input v-model="form3.orderUnit" placeholder="输入订货单位"></el-input>
</el-form-item>
<el-form-item label="合同号">
<el-input v-model="form3.contractNumber" placeholder="输入合同号"></el-input>
</el-form-item>
<el-form-item label="产品名称">
<el-input v-model="form3.productName" placeholder="输入产品名称"></el-input>
</el-form-item>
<el-form-item label="执行标准">
<el-input v-model="form3.executionStandard" placeholder="输入执行标准"></el-input>
</el-form-item>
<el-form-item label="卷号">
<el-input v-model="form3.coilNumber" placeholder="输入卷号"></el-input>
</el-form-item>
<el-form-item label="原料坯号">
<el-input v-model="form3.rawBlankNumber" placeholder="输入原料坯号"></el-input>
</el-form-item>
<el-form-item label="规格">
<el-input v-model="form3.specification" placeholder="输入规格"></el-input>
</el-form-item>
<el-form-item label="材质">
<el-input v-model="form3.material" placeholder="输入材质"></el-input>
</el-form-item>
<el-form-item label="表面质量">
<el-input v-model="form3.surfaceQuality" placeholder="输入表面质量"></el-input>
</el-form-item>
<el-form-item label="表面处理">
<el-input v-model="form3.surfaceTreatment" placeholder="输入表面处理"></el-input>
</el-form-item>
<el-form-item label="切边要求">
<el-input v-model="form3.cuttingRequirements" placeholder="输入切边要求"></el-input>
</el-form-item>
<el-form-item label="包装种类">
<el-input v-model="form3.packagingType" placeholder="输入包装种类"></el-input>
</el-form-item>
<el-form-item label="毛重kg">
<el-input v-model="form3.grossWeight" placeholder="输入毛重kg"></el-input>
</el-form-item>
<el-form-item label="净重kg">
<el-input v-model="form3.netWeight" placeholder="输入净重kg"></el-input>
</el-form-item>
<el-form-item label="参考长度">
<el-input v-model="form3.referenceLength" placeholder="输入参考长度"></el-input>
</el-form-item>
<el-form-item label="生产日期">
<el-input v-model="form3.productionDate" placeholder="输入生产日期"></el-input>
</el-form-item>
</el-form>
<el-form inline v-if="recordType === '4'" :model="form4" label-width="80px">
<el-form-item label="品名">
<el-input v-model="form4.productName" placeholder="输入品名"></el-input>
</el-form-item>
<el-form-item label="执行标准">
<el-input v-model="form4.executionStandard" placeholder="输入执行标准"></el-input>
</el-form-item>
<el-form-item label="材质">
<el-input v-model="form4.material" placeholder="输入材质"></el-input>
</el-form-item>
<el-form-item label="厚度">
<el-input v-model="form4.thickness" placeholder="输入厚度"></el-input>
</el-form-item>
<el-form-item label="镀层种类">
<el-input v-model="form4.platingType" placeholder="输入镀层种类"></el-input>
</el-form-item>
<el-form-item label="镀层质量">
<el-input v-model="form4.platingQuality" placeholder="输入镀层质量"></el-input>
</el-form-item>
<el-form-item label="表面状态">
<el-input v-model="form4.surfaceState" placeholder="输入表面状态"></el-input>
</el-form-item>
<el-form-item label="表面处理">
<el-input v-model="form4.surfaceTreatment" placeholder="输入表面处理"></el-input>
</el-form-item>
<el-form-item label="样品日期">
<el-input v-model="form4.sampleDate" placeholder="输入样品日期"></el-input>
</el-form-item>
</el-form>
<el-form inline v-if="recordType === '5'" :model="form5" label-width="80px">
<el-form-item label="卷号">
<el-input v-model="form5.coilNumber" placeholder="输入卷号"></el-input>
</el-form-item>
<el-form-item label="屈服">
<el-input v-model="form5.yieldStrength" placeholder="输入屈服强度"></el-input>
</el-form-item>
<el-form-item label="规格">
<el-input v-model="form5.specification" placeholder="输入规格"></el-input>
</el-form-item>
<el-form-item label="抗拉">
<el-input v-model="form5.tensileStrength" placeholder="输入抗拉"></el-input>
</el-form-item>
<el-form-item label="材质">
<el-input v-model="form5.material" placeholder="输入材质"></el-input>
</el-form-item>
<el-form-item label="延伸">
<el-input v-model="form5.elongation" placeholder="输入延伸"></el-input>
</el-form-item>
<el-form-item label="原料厂家">
<el-input v-model="form5.rawMaterialFactory" placeholder="输入原料厂家"></el-input>
</el-form-item>
<el-form-item label="镀层质量">
<el-input v-model="form5.platingQuality" placeholder="输入镀层质量"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form5.remark" placeholder="输入备注"></el-input>
</el-form-item>
</el-form>
<el-form inline v-if="recordType === '6'" :model="form6" label-width="80px">
<el-form-item label="卷号">
<el-input v-model="form6.coilNumber" placeholder="输入卷号"></el-input>
</el-form-item>
<el-form-item label="开始时间">
<el-input v-model="form6.startDate" placeholder="输入开始时间"></el-input>
</el-form-item>
<el-form-item label="规格">
<el-input v-model="form6.specification" placeholder="输入规格"></el-input>
</el-form-item>
<el-form-item label="材质">
<el-input v-model="form6.material" placeholder="输入材质"></el-input>
</el-form-item>
<el-form-item label="原料厂家">
<el-input v-model="form6.rawMaterialFactory" placeholder="输入原料厂家"></el-input>
</el-form-item>
<el-form-item label="结束时间">
<el-input v-model="form6.endDate" placeholder="输入结束时间"></el-input>
</el-form-item>
<el-form-item label="锌层质量">
<el-input v-model="form6.platingQuality" placeholder="输入锌层质量"></el-input>
</el-form-item>
</el-form>
</el-row>
</el-col>
<el-col :span="18">
<!-- 预览区域，只有showPreview为true时才显示 -->
<div v-if="showPreview" class="preview-container">
<div class="preview-header">
<h3>标签预览</h3>
</div>
<div class="preview-content">
<LabelRender :labelType="getLabelType()" :content="getLabelContent()" />
</div>
</div>
<!-- 未预览时显示的提示信息 -->
<div v-else class="preview-placeholder">
<p>请填写表单并点击"生成标签"按钮预览</p>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import LabelRender from './LabelRender/index.vue'
export default {
components: {
LabelRender
},
data() {
return {
recordType: '2',
// 控制预览显示状态
showPreview: false,
form2: {
coilNumber: '',
specification: '',
netWeight: '',
material: '',
nextProcess: '',
productionTeam: '',
productionDate: ''
},
form3: {
orderUnit: '',
contractNumber: '',
productName: '',
executionStandard: '',
coilNumber: '',
rawBlankNumber: '',
specification: '',
material: '',
surfaceQuality: '',
surfaceTreatment: '',
cuttingRequirements: '',
packagingType: '',
grossWeight: '',
netWeight: '',
referenceLength: '',
productionDate: ''
},
form4: {
productName: '',
executionStandard: '',
material: '',
thickness: '',
platingType: '',
platingQuality: '',
surfaceState: '',
surfaceTreatment: '',
sampleDate: ''
},
form5: {
coilNumber: '',
yieldStrength: '',
specification: '',
tensileStrength: '',
material: '',
elongation: '',
rawMaterialFactory: '',
platingQuality: '',
remark: ''
},
form6: {
coilNumber: '',
startDate: '',
tensileStrength: '',
material: '',
rawMaterialFactory: '',
endDate: '',
platingQuality: ''
}
}
},
methods: {
handleGen() {
const payload = {}
if (this.recordType === '2') {
payload.recordType = this.recordType
payload.content = this.form2
} else if (this.recordType === '3') {
payload.recordType = this.recordType
payload.content = this.form3
} else if (this.recordType === '4') {
payload.recordType = this.recordType
payload.content = this.form4
} else if (this.recordType === '5') {
payload.recordType = this.recordType
payload.content = this.form5
} else if (this.recordType === '6') {
payload.recordType = this.recordType
payload.content = this.form6
}
console.log('生成标签数据', payload)
// 生成标签后显示预览
this.showPreview = true
},
// 关闭预览
handleClosePreview() {
this.showPreview = false
},
getLabelType() {
return this.recordType
},
getLabelContent() {
if (this.recordType === '2') {
return this.form2
} else if (this.recordType === '3') {
return this.form3
} else if (this.recordType === '4') {
return this.form4
} else if (this.recordType === '5') {
return this.form5
} else if (this.recordType === '6') {
return this.form6
}
}
}
}
</script>