fengyuan_yang
/
boying-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2025-11-17 

订单产出标签报表打印
master
fengyuan_yang 2 months ago
parent
9ab9817e74
commit
27d5abcf08
2 changed files with 512 additions and 222 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 221
      src/views/modules/print/PoPartPrint.vue
  2. 513
      src/views/modules/shopOrder/productionReport/searchSfdcRollsReport.vue

221
src/views/modules/print/PoPartPrint.vue
View File

@ -397,7 +397,9 @@ import {
} from '../../../api/wms/wms'
import {poPartLabelPrint} from '../clodopLabel/poPartLabel'
import getLodop from '@/utils/LodopFuncs.js'
import labelPrintTemplates from '@/mixins/labelPrintTemplates.js'
export default {
mixins: [labelPrintTemplates],
data() {
return {
functionId: this.$route.meta.menuId,
@ -1352,225 +1354,6 @@ export default {
LODOP.PREVIEW();
},
// A001 标签打印（70mm x 30mm）- 左边二维码，右边文字信息
printLabelA001(LODOP, printData, isNewPage){
if(isNewPage){
LODOP.NEWPAGE();
}
// ============================================================
// 1. 纸张设置
// ============================================================
// SET_PRINT_PAGESIZE(方向, 宽度, 高度, 纸张名称)
// 方向: 0=纵向, 1=横向
// 宽度/高度: 单位为 1/10 毫米，如 700 = 70mm
LODOP.SET_PRINT_PAGESIZE(0, 700, 300, '');
// ============================================================
// 2. 绘制边框和分隔线
// ============================================================
// ADD_PRINT_RECT(上边距, 左边距, 宽度, 高度, 边框样式, 边框粗细)
// 边框样式: 0=实线
// 边框粗细: 单位为像素
// 外边框（1mm边距，68mm宽 x 28mm高）
LODOP.ADD_PRINT_RECT('1mm', '1mm', '68mm', '28mm', 0, 1);
// ADD_PRINT_LINE(起点Y, 起点X, 终点Y, 终点X, 线条样式, 线条粗细)
// 线条样式: 0=实线
// 垂直分隔线：左右分隔（从上到下）
// 参数说明：起点(1mm, 22mm) -> 终点(29mm, 22mm)
LODOP.ADD_PRINT_LINE('1mm', '22mm', '29mm', '22mm', 0, 1);
// 水平分隔线1：编码下方
// 参数说明：起点(8mm, 22mm) -> 终点(8mm, 69mm)
LODOP.ADD_PRINT_LINE('8mm', '22mm', '8mm', '69mm', 0, 1);
// 水平分隔线2：型号下方
// 参数说明：起点(13mm, 22mm) -> 终点(13mm, 69mm)
LODOP.ADD_PRINT_LINE('13mm', '22mm', '13mm', '69mm', 0, 1);
// 水平分隔线3：数量下方
// 参数说明：起点(18mm, 22mm) -> 终点(18mm, 69mm)
LODOP.ADD_PRINT_LINE('18mm', '22mm', '18mm', '69mm', 0, 1);
// 水平分隔线4：批号下方
// 参数说明：起点(23mm, 22mm) -> 终点(23mm, 69mm)
LODOP.ADD_PRINT_LINE('23mm', '22mm', '23mm', '69mm', 0, 1);
// ============================================================
// 3. 左侧二维码
// ============================================================
// ADD_PRINT_BARCODE(上边距, 左边距, 宽度, 高度, 条码类型, 条码内容)
// 二维码位置：距上7mm，距左3mm，尺寸20mm x 20mm
const qrIndex = LODOP.ADD_PRINT_BARCODE('7mm', '3mm', '20mm', '20mm', 'QRCode', printData.rollNo || '');
LODOP.SET_PRINT_STYLEA(qrIndex, "QRCodeVersion", 4);
LODOP.SET_PRINT_STYLEA(qrIndex, "QRCodeErrorLevel", "M");
// ============================================================
// 4. 右侧文字信息（5行）
// ============================================================
// ADD_PRINT_TEXT(上边距, 左边距, 宽度, 高度, 文字内容)
// 文字起始X位置（左边距）和宽度
const startX = '23mm'; // 可调整：文字左边距，增大向右移，减小向左移
const textWidth = '43mm'; // 可调整：文字区域宽度
// 编码（第1行）
// 上边距4mm：可调整，增大向下移，减小向上移
const text1 = LODOP.ADD_PRINT_TEXT('4mm', startX, textWidth, '4mm', `编码：${printData.partNo || ''}`);
LODOP.SET_PRINT_STYLEA(text1, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text1, "FontSize", 8); // 可调整：字体大小
// 型号（第2行）
// 上边距9mm：可调整
const text2 = LODOP.ADD_PRINT_TEXT('9mm', startX, textWidth, '4mm', `型号：${printData.spec || ''}`);
LODOP.SET_PRINT_STYLEA(text2, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text2, "FontSize", 8);
// 数量（第3行）
// 上边距14mm：可调整
const text3 = LODOP.ADD_PRINT_TEXT('14mm', startX, textWidth, '4mm', `数量：${printData.quantity || ''}`);
LODOP.SET_PRINT_STYLEA(text3, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text3, "FontSize", 8);
// 批号（第4行）
// 上边距19mm：可调整
const text4 = LODOP.ADD_PRINT_TEXT('19mm', startX, textWidth, '4mm', `批号：${printData.batchNo || ''}`);
LODOP.SET_PRINT_STYLEA(text4, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text4, "FontSize", 8);
// 日期（第5行）
// 上边距24mm：可调整
const text5 = LODOP.ADD_PRINT_TEXT('24mm', startX, textWidth, '4mm', `日期：${printData.documentDate || ''}`);
LODOP.SET_PRINT_STYLEA(text5, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text5, "FontSize", 8);
},
// A002 标签打印（70mm x 20mm）- 其他工序用
printLabelA002(LODOP, printData, isNewPage){
if(isNewPage){
LODOP.NEWPAGE();
}
// ============================================================
// 1. 纸张设置
// ============================================================
// 设置纸张大小 70mm x 20mm (0=纵向)
LODOP.SET_PRINT_PAGESIZE(0, 700, 200, '');
// ============================================================
// 2. 绘制边框
// ============================================================
// 外边框（2mm边距，66mm宽 x 16mm高）
LODOP.ADD_PRINT_RECT('1mm', '1mm', '68mm', '18mm', 0, 1);
// ============================================================
// 3. 左侧二维码
// ============================================================
// 二维码位置：距上3mm，距左3mm，尺寸15mm x 15mm
const qrIndex = LODOP.ADD_PRINT_BARCODE('1.6mm', '3.4mm', '18.2mm', '18.2mm', 'QRCode', printData.rollNo || '');
LODOP.SET_PRINT_STYLEA(qrIndex, "QRCodeVersion", 4);
LODOP.SET_PRINT_STYLEA(qrIndex, "QRCodeErrorLevel", "M");
// ============================================================
// 4. 右侧文字信息（4行）
// ============================================================
const startX = '23mm'; // 文字左边距
const textWidth = '43mm'; // 文字区域宽度
// 第1行：编码
const text1 = LODOP.ADD_PRINT_TEXT('3mm', startX, textWidth, '3mm', `编码：${printData.partNo || ''}`);
LODOP.SET_PRINT_STYLEA(text1, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text1, "FontSize", 8);
// 第2行：卷号
const text2 = LODOP.ADD_PRINT_TEXT('7mm', startX, textWidth, '3mm', `卷号：${printData.rollNo || ''}`);
LODOP.SET_PRINT_STYLEA(text2, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text2, "FontSize", 8);
// 第3行：良品 + 不良品（左右分布）
// 良品（左侧）
const text3 = LODOP.ADD_PRINT_TEXT('11mm', startX, '20mm', '3mm', `良品：${printData.goodQuantity || ''}`);
LODOP.SET_PRINT_STYLEA(text3, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text3, "FontSize", 8);
// 不良品（右侧）
const text4 = LODOP.ADD_PRINT_TEXT('11mm', '43mm', '23mm', '3mm', `不良品：${printData.badQuantity || ''}`);
LODOP.SET_PRINT_STYLEA(text4, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text4, "FontSize", 8);
// 第4行：总数 + 良率（左右分布）
// 总数（左侧）
const text5 = LODOP.ADD_PRINT_TEXT('15mm', startX, '20mm', '3mm', `总数：${printData.quantity || ''}`);
LODOP.SET_PRINT_STYLEA(text5, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text5, "FontSize", 8);
// 良率（右侧）
const text6 = LODOP.ADD_PRINT_TEXT('15mm', '43mm', '23mm', '3mm', `良率：${printData.yield || ''}%`);
LODOP.SET_PRINT_STYLEA(text6, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text6, "FontSize", 8);
},
// A003 标签打印（70mm x 20mm）- 绑定用
printLabelA003(LODOP, printData, isNewPage){
if(isNewPage){
LODOP.NEWPAGE();
}
// ============================================================
// 1. 纸张设置
// ============================================================
// 设置纸张大小 70mm x 20mm (0=纵向)
LODOP.SET_PRINT_PAGESIZE(0, 700, 200, '');
// ============================================================
// 2. 绘制边框
// ============================================================
// 外边框（1mm边距，68mm宽 x 18mm高）
LODOP.ADD_PRINT_RECT('1mm', '1mm', '68mm', '18mm', 0, 1);
// ============================================================
// 3. 左侧二维码
// ============================================================
// 二维码位置：距上1.6mm，距左3.4mm，尺寸18.2mm x 18.2mm
const qrIndex = LODOP.ADD_PRINT_BARCODE('1.6mm', '3.4mm', '18.2mm', '18.2mm', 'QRCode', printData.rollNo || '');
LODOP.SET_PRINT_STYLEA(qrIndex, "QRCodeVersion", 4);
LODOP.SET_PRINT_STYLEA(qrIndex, "QRCodeErrorLevel", "M");
// ============================================================
// 4. 右侧文字信息（4行）
// ============================================================
const startX = '23mm'; // 文字左边距
const textWidth = '43mm'; // 文字区域宽度
// 第1行：ERP No.
const text1 = LODOP.ADD_PRINT_TEXT('3mm', startX, textWidth, '3mm', `ERP No.: ${printData.partNo || ''}`);
LODOP.SET_PRINT_STYLEA(text1, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text1, "FontSize", 8);
// 第2行：Batch No. + Reel No.（左右分布）
// Batch No.（左侧）
const text2 = LODOP.ADD_PRINT_TEXT('7mm', startX, '20mm', '3mm', `Batch No.: ${printData.batchNo || ''}`);
LODOP.SET_PRINT_STYLEA(text2, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text2, "FontSize", 8);
// Reel No.（右侧）
const text3 = LODOP.ADD_PRINT_TEXT('7mm', '43mm', '23mm', '3mm', `Reel No.: ${printData.reelNo || ''}`);
LODOP.SET_PRINT_STYLEA(text3, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text3, "FontSize", 8);
// 第3行：Good QTY
const text4 = LODOP.ADD_PRINT_TEXT('11mm', startX, textWidth, '3mm', `Good QTY: ${printData.goodQuantity || ''}`);
LODOP.SET_PRINT_STYLEA(text4, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text4, "FontSize", 8);
// 第4行：Bad QTY
const text5 = LODOP.ADD_PRINT_TEXT('15mm', startX, textWidth, '3mm', `Bad QTY: ${printData.badQuantity || ''}`);
LODOP.SET_PRINT_STYLEA(text5, "FontName", "Microsoft YaHei");
LODOP.SET_PRINT_STYLEA(text5, "FontSize", 8);
},
deleteLabels(){
if(this.selectionDataList.length===0){
this.$message.error('未选择标签！');

513
src/views/modules/shopOrder/productionReport/searchSfdcRollsReport.vue
View File

@ -57,6 +57,7 @@
class="el-button el-button--primary el-button--medium">
{{ buttons.download }}
</download-excel>
<el-button @click="printLabelModel()" type="primary">打印</el-button>
<el-button @click="openAttributeChangeDialog()" type="warning">属性变动</el-button>
</el-form-item>
</el-form>
@ -65,7 +66,7 @@
:height="height"
:data="dataList"
border
@selection-change="handleSelectionChange"
@selection-change="selectionChangeHandle"
v-loading="dataListLoading"
style="width: 100%;">
<el-table-column
@ -126,6 +127,142 @@
<el-button type="primary" @click="attributeChangeDialogVisible=false">关闭</el-button>
</el-footer>
</el-dialog>
<!-- 标签打印设置对话框 -->
<el-dialog
:close-on-click-modal="false"
v-drag
:visible.sync="printDialogVisible"
width="650px"
class="print-dialog">
<div slot="title" class="dialog-title-wrapper">
<i class="el-icon-printer" style="margin-right: 8px; font-size: 20px;"></i>
<span style="font-size: 18px; font-weight: 600;">标签打印设置</span>
</div>
<div class="print-dialog-content">
<!-- 打印信息提示 -->
<div class="print-info-banner">
<i class="el-icon-info" style="margin-right: 8px; font-size: 16px;"></i>
<span>已选择 <strong style="color: #3a7ba8;">{{ selectionDataList.length }}</strong> 个标签，请配置打印参数</span>
</div>
<el-form :model="printDialogData" label-position="top" style="margin-top: 20px;">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item required>
<span slot="label" class="form-label">
<i class="el-icon-document-copy" style="margin-right: 5px;"></i>
打印次数
</span>
<el-input-number
v-model="printDialogData.printTimes"
:min="1"
:max="100"
controls-position="right"
placeholder="每个标签打印份数"
style="width: 100%">
</el-input-number>
<div class="form-tip">设置每个标签的打印份数</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item required>
<span slot="label" class="form-label">
<i class="el-icon-tickets" style="margin-right: 5px;"></i>
标签模板
</span>
<el-select
v-model="printDialogData.labelNo"
placeholder="请选择标签模板"
style="width: 100%"
:disabled="labelTemplateList.length === 0">
<el-option
v-for="item in labelTemplateList"
:key="item.labelNo"
:label="item.labelName"
:value="item.labelNo">
<span style="float: left">{{ item.labelName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.labelNo }}</span>
</el-option>
</el-select>
<div class="form-tip" v-if="labelTemplateList.length === 0" style="color: #F56C6C;">
{{ multiPartNoTip }}
</div>
<div class="form-tip" v-else>
根据物料自动匹配模板
</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item required>
<span slot="label" class="form-label">
<i class="el-icon-printer" style="margin-right: 5px;"></i>
目标打印机
</span>
<el-select
v-model="printDialogData.printerName"
placeholder="请选择打印机"
style="width: 100%"
:disabled="printerList.length === 0">
<el-option
v-for="item in printerList"
:key="item"
:label="item"
:value="item">
<i class="el-icon-printer" style="margin-right: 8px; color: #67C23A;"></i>
{{ item }}
</el-option>
</el-select>
<div class="form-tip" v-if="printerList.length === 0" style="color: #F56C6C;">
未检测到打印机，请确保已安装并启动 CLodop
</div>
<div class="form-tip" v-else>
已检测到 {{ printerList.length }} 台打印机
</div>
</el-form-item>
</el-col>
</el-row>
<!-- 打印预览说明 -->
<div class="print-summary">
<div class="summary-item">
<span class="summary-label">打印总数：</span>
<span class="summary-value">{{ selectionDataList.length * printDialogData.printTimes }} 张</span>
</div>
<div class="summary-item">
<span class="summary-label">标签数量：</span>
<span class="summary-value">{{ selectionDataList.length }} 个</span>
</div>
<div class="summary-item">
<span class="summary-label">每标签份数：</span>
<span class="summary-value">{{ printDialogData.printTimes }} 份</span>
</div>
</div>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button
type="success"
icon="el-icon-printer"
@click="confirmPrint()"
:loading="printLoading"
:disabled="!printDialogData.printerName"
size="medium">
{{ printLoading ? '打印中...' : '开始打印' }}
</el-button>
<el-button
@click="printDialogVisible=false"
size="medium">
取消
</el-button>
</div>
</el-dialog>
</div>
</template>
@ -148,10 +285,14 @@ import {
} from "@/api/sysLanguage.js"
import {searchSfdcRollsReport, updateSfdcRollsAttribute} from "../../../../api/shopOrder/productionReport";
import {updateInventoryStockAttribute} from "../../../../api/wms/wms";
import getLodop from '@/utils/LodopFuncs.js';
import {getPartLabelTemplateList, callUspPartLabelTemplate} from '@/api/wms/wms.js';
import labelPrintTemplates from '@/mixins/labelPrintTemplates.js';
var functionId='104003003';
export default {
//查询-产线产量报告
name: "searchProductionLineOutputReport",
mixins: [labelPrintTemplates],
components: {
Chooselist
},
@ -248,6 +389,17 @@ import {updateInventoryStockAttribute} from "../../../../api/wms/wms";
pageIndex: 1,
pageSize: 50,
totalPage: 0,
// 标签打印相关
printDialogVisible: false,
printDialogData: {
printTimes: 1,
labelNo: '',
printerName: ''
},
labelTemplateList: [],
printerList: [],
printLoading: false,
multiPartNoTip: '',
columnList: [
{
userId: this.$store.state.user.name,
@ -657,10 +809,197 @@ import {updateInventoryStockAttribute} from "../../../../api/wms/wms";
return this.dataList;
},
handleSelectionChange(val){
selectionChangeHandle(val){
this.selectionDataList = val
console.log(this.selectionDataList)
},
// 打印标签
async printLabelModel(){
if(this.selectionDataList.length===0){
this.$message.error('未选择标签！');
return false;
}
// 检查是否选择了不同物料的标签
const uniquePartNos = [...new Set(this.selectionDataList.map(item => item.partNo))];
const isSinglePartNo = uniquePartNos.length === 1;
if(isSinglePartNo){
// 同一物料，查询标签模板列表
await this.getLabelTemplates(uniquePartNos[0]);
// 如果没有查到模板，设置提示信息
if(this.labelTemplateList.length === 0) {
this.multiPartNoTip = '暂无可用模板';
} else {
this.multiPartNoTip = '';
}
} else {
// 不同物料，不查询模板列表，后端会自动返回
this.labelTemplateList = [];
this.multiPartNoTip = `已选择 ${uniquePartNos.length} 种物料，将由系统自动匹配模板`;
}
// 获取打印机列表
this.getPrinterList();
// 打开标签打印对话框
this.printDialogData = {
printTimes: 1,
labelNo: '',
printerName: ''
};
this.printDialogVisible = true;
},
// 获取标签模板列表（仅当选中同一物料时）
async getLabelTemplates(partNo){
const params = {
site: this.$store.state.user.site,
buNo: this.selectionDataList[0].buNo || 'BU01',
partNo: partNo
};
try {
const {data} = await getPartLabelTemplateList(params);
if (data && data.code === 0) {
this.labelTemplateList = data.list || [];
if(this.labelTemplateList.length > 0){
// 默认选中第一个
this.printDialogData.labelNo = this.labelTemplateList[0].labelNo;
}
} else {
this.$message.error(data.msg || '获取标签模板失败！');
}
} catch (error) {
console.error('获取标签模板失败:', error);
this.$message.error('获取标签模板失败！');
}
},
// 获取打印机列表
getPrinterList(){
try {
const LODOP = getLodop();
if (!LODOP) {
this.$message.warning('未检测到打印控件，请确保已安装并启动CLodop！');
return;
}
const printerCount = LODOP.GET_PRINTER_COUNT();
this.printerList = [];
for (let i = 0; i < printerCount; i++) {
this.printerList.push(LODOP.GET_PRINTER_NAME(i));
}
if(this.printerList.length > 0){
// 默认选中第一个打印机
this.printDialogData.printerName = this.printerList[0];
}
} catch (error) {
console.error('获取打印机列表失败:', error);
this.$message.error('获取打印机列表失败！');
}
},
// 确认打印
async confirmPrint(){
// 验证必填项
if(!this.printDialogData.printerName){
this.$message.error('请选择打印机！');
return;
}
this.printLoading = true;
try {
// 调用存储过程获取打印参数
const printDataList = [];
for(let i = 0; i < this.selectionDataList.length; i++){
const item = this.selectionDataList[i];
const params = {
site: item.site || this.$store.state.user.site,
buNo: 'BU01',
menuID: this.$route.meta.menuId || '',
relatedOrderNo: item.orderNo || '', // 参数4：orderNo
relatedOrderLineNo: item.createdOpsSeqNo ? String(item.createdOpsSeqNo) : '', // 参数5：createdOpsSeqNo
documentNo: item.orderNo || '',
partNo: item.partNo,
// 如果选择了不同物料，labelNo传空字符串，让存储过程自动返回
labelNo: this.printDialogData.labelNo || '',
rollNo: item.rollNo
};
console.log('调用存储过程参数:', params);
const {data} = await callUspPartLabelTemplate(params);
if (data && data.code === 0) {
// 确保 labelNo 字段存在
const printData = {
...data.row,
labelNo: data.row.labelNo || data.row.LabelNo || data.row.label_no || this.printDialogData.labelNo
};
console.log('存储过程返回数据:', printData);
printDataList.push(printData);
} else {
this.$message.error(`获取标签 ${item.rollNo} 的打印参数失败：${data.msg}`);
this.printLoading = false;
return;
}
}
// 根据 labelNo 调用相应的打印方法
this.executePrint(printDataList);
this.printDialogVisible = false;
this.$message.success('打印任务已发送！');
this.getData();
} catch (error) {
console.error('打印失败:', error);
this.$message.error('打印失败：' + error.message);
} finally {
this.printLoading = false;
}
},
// 执行打印
executePrint(printDataList){
const LODOP = getLodop();
if (!LODOP) {
this.$message.error('无法连接到打印控件！');
return;
}
// 初始化打印任务
LODOP.PRINT_INIT('订单产出标签打印');
// 设置打印模式
LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE", true);
// 设置打印机
LODOP.SET_PRINTER_INDEX(this.printDialogData.printerName);
for(let times = 0; times < this.printDialogData.printTimes; times++){
for(let i = 0; i < printDataList.length; i++){
const printData = printDataList[i];
// 根据 labelNo 调用不同的打印方法
if(printData.labelNo === 'A001'){
this.printLabelA001(LODOP, printData, i > 0 || times > 0);
} else if(printData.labelNo === 'A002'){
this.printLabelA002(LODOP, printData, i > 0 || times > 0);
} else if(printData.labelNo === 'A003'){
this.printLabelA003(LODOP, printData, i > 0 || times > 0);
} else {
this.$message.warning(`未知的标签模板：${printData.labelNo}`);
}
}
}
// 预览打印（避免水印）
LODOP.PREVIEW();
},
// 打开属性变动对话框
openAttributeChangeDialog() {
if(this.selectionDataList.length === 0){
@ -770,8 +1109,176 @@ import {updateInventoryStockAttribute} from "../../../../api/wms/wms";
}
</script>
<style >
<style scoped lang="scss">
.el-textarea__inner {
padding: 5px 5px;
}
/* 标签打印对话框样式 */
.print-dialog {
/deep/ .el-dialog__header {
background: linear-gradient(135deg, #9ac3d0 20%, #b6c7dd 80%);
padding: 20px 20px 20px 20px;
border-radius: 4px 4px 0 0;
}
/deep/ .el-dialog__title {
color: #ffffff;
}
/deep/ .el-dialog__headerbtn .el-dialog__close {
color: #ffffff;
font-size: 20px;
font-weight: bold;
&:hover {
color: #f0f0f0;
}
}
/deep/ .el-dialog__body {
padding: 0;
}
.dialog-title-wrapper {
color: #ffffff;
display: flex;
align-items: center;
}
.print-dialog-content {
padding: 25px 30px;
}
.print-info-banner {
background: linear-gradient(135deg, #e8f4f8 0%, #f0f5fb 100%);
border-left: 4px solid #60aeff;
padding: 12px 16px;
border-radius: 4px;
color: #606266;
font-size: 14px;
display: flex;
align-items: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.form-label {
font-size: 14px;
font-weight: 600;
color: #303133;
display: flex;
align-items: center;
}
.form-tip {
font-size: 12px;
color: #909399;
margin-top: 5px;
line-height: 1.5;
}
.print-summary {
background: linear-gradient(135deg, #e1f0f5 0%, #dae8f3 100%);
border-radius: 8px;
padding: 16px 20px;
margin-top: 20px;
display: flex;
justify-content: space-around;
box-shadow: 0 2px 8px rgba(96, 174, 255, 0.15);
border: 1px solid #c8dff0;
.summary-item {
display: flex;
flex-direction: column;
align-items: center;
.summary-label {
font-size: 12px;
color: #5a7a8f;
margin-bottom: 5px;
font-weight: 500;
}
.summary-value {
font-size: 20px;
font-weight: bold;
color: #3a7ba8;
}
}
}
/deep/ .el-form-item {
margin-bottom: 18px;
}
/deep/ .el-input-number {
width: 100%;
.el-input__inner {
text-align: left;
}
}
/deep/ .el-select {
.el-input__inner {
border: 1px solid #DCDFE6;
transition: all 0.3s;
&:hover {
border-color: #409EFF;
}
&:focus {
border-color: #409EFF;
}
}
}
/deep/ .dialog-footer {
padding: 15px 30px 25px 30px;
text-align: center;
background-color: #fafafa;
border-top: 1px solid #e8e8e8;
.el-button {
min-width: 120px;
height: 40px;
font-weight: 500;
transition: all 0.3s;
font-size: 15px;
}
.el-button--success {
background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
border: none;
box-shadow: 0 2px 4px rgba(103, 194, 58, 0.3);
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(103, 194, 58, 0.4);
}
&:active {
transform: translateY(0);
}
}
}
}
/* 选项样式优化 */
/deep/ .el-select-dropdown__item {
padding: 10px 20px;
transition: all 0.2s;
&:hover {
background-color: #f5f7fa;
}
}
/* 输入框聚焦效果 */
/deep/ .el-input__inner:focus,
/deep/ .el-textarea__inner:focus {
border-color: #409EFF;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}
</style>
Write Preview
Loading…
Cancel
Save