✨ feat: 二维码信息变更
This commit is contained in:
砂糖
40
klp-ui/src/views/wms/print/components/QRCode.vue
Normal file
40
klp-ui/src/views/wms/print/components/QRCode.vue
Normal 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>
|
||||
@@ -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
312
klp-ui/src/views/wms/print/pages/code/index.vue
Normal 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
737
klp-ui/src/views/wms/print/pages/gen/index.vue
Normal 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>
|
||||
Reference in New Issue
Block a user