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

✨ feat: 二维码信息变更

Browse Source
This commit is contained in:
砂糖
2025-09-10 16:20:04 +08:00
parent 3842bb9a84
commit 1477a374be
8 changed files with 1160 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>

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

@@ -435,7 +435,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 +512,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 +521,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 +533,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>

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

@@ -0,0 +1,737 @@
<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-alert title="信息填写完成后需要点击生成按钮才会出现在预览区域" type="info" show-icon></el-alert>
<!-- 主内容区 - 增加卡片外层容器，提升整体层次感 -->
<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 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 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" @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-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';
import { addGenerateRecord, delGenerateRecord } 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;
}
}
},
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 || [];
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(() => {
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状态，用于交互反馈
};
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,
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
}
.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>