From b55cd11535741868b878139f9ca24d72e8cf693f Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期二, 15 十月 2024 15:33:32 +0800
Subject: [PATCH] 标签打印页面更新
---
/dev/null | 342 ------------------------------------------
src/main.js | 2
src/components/view/b1-inspection-order.vue | 115 +++++++++++++-
3 files changed, 109 insertions(+), 350 deletions(-)
diff --git a/src/components/do/b1-ins-order/printDialog.vue b/src/components/do/b1-ins-order/printDialog.vue
deleted file mode 100644
index 9889033..0000000
--- a/src/components/do/b1-ins-order/printDialog.vue
+++ /dev/null
@@ -1,342 +0,0 @@
-<template>
- <div>
- <el-dialog title="鏍囩鎵撳嵃" :visible.sync="isShow" width="600px" top="5vh" @close="$emit('closePrintDialog')">
- <div style="width:100%;height: 400px;overflow-y: auto;text-align: left">
- <div class="dia_body">
- <el-checkbox
- style="margin: 10px 5px;"
- :indeterminate="isIndeterminate"
- v-model="checkAll"
- @change="handleCheckAllChange">鍏ㄩ��</el-checkbox>
- <el-checkbox-group @change="changePrintCode()" v-model="checkIndexList">
- <el-card class="box-card" v-for="(item, i) in barcodeData" :key="i" style="margin-bottom: 15px; font-size: 16px !important;">
- <el-checkbox :label="i" :key="i" style="position: relative;top:0;left:10px"><br></el-checkbox>
- <div>
- <div class="titleH1" style="text-align: center; margin-bottom: 2px;font-size: 16px">妫�娴嬩腑蹇冩牱鍝佹爣璇嗗崱</div>
- <div style="text-align: center;">
- <barcode :value="item.barcode" :height="34" :width="2" :displayValue="false"></barcode>
- </div>
- <div style="margin-left: 20px;text-align: left">
- <div class="item">
- <span class="full-title">鏉愭枡鍚嶇О</span>:
- <span class="info">{{ item.sampleName }}</span>
- </div>
- <div class="item">
- <span class="full-title">鏉愭枡鍘傚</span>:
- <span class="info">{{ item.supplierName }}</span>
- </div>
- <div class="item2">
- <span class="full-title">瑙勬牸鍨嬪彿</span>:
- <span class="info">{{ item.partDesc }}</span>
- </div>
- <div class="item">
- <span class="full-title">濮旀墭鏃ユ湡</span>:
- <span class="info">{{ item.sendTime }}</span>
- </div>
- <div class="item">
- <span class="full-title">濮旀墭浜�</span>:
- <span class="info2">{{ item.prepareUser }}</span>
- <span class="full-title">妫�娴嬬紪鍙�</span>:
- <span class="info">{{ item.entrustCode }}</span>
- </div>
- <div class="item">
- <span class="full-title">鏍峰搧鏁伴噺</span>:
- <span class="info2">{{ item.sampleNumber }}</span>
- <span class="full-title">鏍峰搧鏍囪瘑</span>:
- <span class="info">{{ item.color }}</span>
- </div>
- <div style="font-weight: bold;display: flex;align-items: center;">
- <span class="full-title">鏍峰搧鐘舵��</span>:
- <el-radio-group v-model="item.labelStatus" style="margin-top: 7px;margin-left: 4px;" v-removeAriaHidden>
- <el-radio label="0" style="font-weight: bold;margin-right: 7px;">寰呮</el-radio>
- <el-radio label="1" style="font-weight: bold;margin-right: 7px;">鍦ㄦ</el-radio>
- <el-radio label="2" style="font-weight: bold;margin-right: 7px;">宸叉</el-radio>
- </el-radio-group>
- <span>
- <el-radio style="margin-left: 14px;margin-top: 3px;"
- @click.native.prevent="changeIsLeave(item)"
- :label="true" size="small" v-model="item.isLeave">鐣欐牱</el-radio>
- </span>
- </div>
- </div>
- </div>
- </el-card>
- </el-checkbox-group>
- </div>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-row>
- <el-button @click="$emit('closePrintDialog')">鍙� 娑�</el-button>
- <el-button type="primary" @click="submitPrint">鎵� 鍗�</el-button>
- </el-row>
- </span>
- </el-dialog>
- <div class="el-dialog-body" style="overflow-y: auto;margin-top: 0;position: fixed;top: 20px;right: 10px;z-index: 99999;">
- <div id="printOrder" class="printOrder" ref="printOrder">
- <el-card class="box-card" v-for="(item, i) in checkDataList" :key="i" style="font-size: 0.29cm !important;font-weight: 700;page-break-after: always;color: #000;box-shadow: none;margin: 0 !important;padding: 0 !important;">
- <div>
- <div class="titleH1" style="text-align: center;margin-bottom: 1px">妫�娴嬩腑蹇冩牱鍝佹爣璇嗗崱</div>
- <div style="text-align: center;">
- <barcode :value="item.barcode" :height="22" :width="1.6" :displayValue="false"></barcode>
- </div>
- <div style="margin-left: 12px;text-align: left">
- <div class="item">
- <span class="full-title4">鏉愭枡鍚嶇О:</span>
- <span class="info4">{{ item.sampleName }}</span>
- </div>
- <div class="item">
- <span class="full-title2">鏉愭枡鍘傚</span>:
- <span class="info">{{ item.supplierName }}</span>
- </div>
- <div class="item2">
- <span class="full-title4">瑙勬牸鍨嬪彿:</span>
- <span class="info4">{{ item.partDesc }}</span>
- </div>
- <div class="item">
- <span class="full-title2">濮旀墭鏃ユ湡</span>:
- <span class="info">{{ item.sendTime }}</span>
- </div>
- <div class="item">
- <span class="full-title2">濮旀墭浜�</span>:
- <span class="info3">{{ item.prepareUser }}</span>
- <span class="full-title2">妫�娴嬬紪鍙�</span>:
- <span class="info">{{ item.entrustCode }}</span>
- </div>
- <div class="item">
- <span class="full-title2">鏍峰搧鏁伴噺</span>:
- <span class="info3">{{ item.sampleNumber }}</span>
- <span class="full-title2">鏍峰搧鏍囪瘑</span>:
- <span class="info">{{ item.color }}</span>
- </div>
- <div>
- <span class="full-title2">鏍峰搧鐘舵��</span>:
- <span style="white-space: nowrap;margin-left: 2px">
- 寰呮<span class="scor" v-if="item.labelStatus!='0'"></span><span class="checked" v-if="item.labelStatus=='0'">鈭�</span>
- 鍦ㄦ<span class="scor" v-if="item.labelStatus!='1'"></span><span class="checked" v-if="item.labelStatus=='1'">鈭�</span>
- 宸叉<span class="scor" v-if="item.labelStatus!='2'"></span><span class="checked" v-if="item.labelStatus=='2'">鈭�</span>
- 鐣欐牱<span class="scor" v-if="!item.isLeave"></span><span class="checked" v-if="item.isLeave">鈭�</span>
- </span>
- </div>
- </div>
- </div>
- </el-card>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import PrintJS from "print-js";
-
-export default {
- name: "printDialog",
- // import 寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
- components: {},
- props: {
- printDialog: {
- type: Boolean,
- default: () => false
- },
- },
- data() {
- // 杩欓噷瀛樻斁鏁版嵁
- return {
- isShow: this.printDialog,
- loadPint:false,
- isIndeterminate:false, // 澶氶�夋鏍峰紡
- checkAll: false,
- checkIndexList:[], // 閫夋嫨瑕佹墦鍗扮殑鏁版嵁
- barcodeData: [],
- printLoading: false,
- checkDataList: []
- }
- },
- // 鏂规硶闆嗗悎
- methods: {
- // 鑾峰彇瑕佹墦鍗扮殑鏁版嵁
- getLabelPrinting(selection){
- try {
- this.loadPint = true;
- let ids = []
- selection.map(m=> {
- ids.push(m.id)
- })
- this.$axios.post(this.$api.materialInspection.printLabel,{
- ids: ids
- },{
- headers: {
- 'Content-Type': 'application/json'
- },
- noQs:true
- }).then(res => {
- if (res.code === 200 && res.data.length > 0) {
- res.data.forEach(item => {
- console.log('item---', item)
- item.sendTime = item.sendTime && item.sendTime.substring(0, 10)
- item.sampleNumber = item.qtyArrived + item.buyUnitMeas
- this.$set(item, 'barcode', item.entrustCode)
- this.$set(item, 'isLeave', item.labelStatus === '2')
- })
- this.barcodeData = res.data
- }
- })
- } catch (e) {
- console.log('鑾峰彇瑕佹墦鍗扮殑鏁版嵁---', e)
- }
-
- },
- changeIsLeave (item) {
- const index = this.barcodeData.findIndex(val => val.entrustCode === item.entrustCode)
- if (index > -1) {
- this.barcodeData[index].isLeave = !this.barcodeData[index].isLeave
- }
- },
- // 鍏ㄩ�夊閫夋鍥炶皟
- handleCheckAllChange(val) {
- if(val){
- for(var i=0;i<this.barcodeData.length;i++){
- this.checkIndexList.push(i)
- }
- this.checkDataList = this.barcodeData
- }else{
- this.checkIndexList = []
- this.checkDataList = []
- }
- this.isIndeterminate = false;
- },
- changeType (type) {
- type = type === '1' ? '0' : '1'
- },
- //閫夋嫨瑕佹墦鍗扮殑浜岀淮鐮�
- changePrintCode(){
- let indexList = this.checkIndexList
- let arr = []
- indexList.forEach(i=>{
- if (i !== undefined) {
- arr.push(this.barcodeData[i])
- }
- })
- console.log('arr---', arr)
- this.checkDataList = arr
- },
- // 鎻愪氦鎵撳嵃
- submitPrint(){
- if(this.checkDataList.length < 1){
- this.$message.warning("璇烽�夋嫨瑕佹墦鍗扮殑鏉″舰鐮�")
- return
- }
- this.printDialogVisible = false;
- PrintJS({
- targetStyles: ["*"], // 浣跨敤dom鐨勬墍鏈夋牱寮忥紝寰堥噸瑕�
- printable: 'printOrder',//椤甸潰
- type: "html",//鏂囨。绫诲瀷
- maxWidth:360,
- header: '',
- style:
- `@page {
- margin: 0.4cm;
- margin-right: 0.4cm;
- margin-top: 0.4cm;
- margin-bottom: 0.4cm;
- padding-bottom: 0px;
- size: 400px 75px collapse;
- }
- html{
- zoom:100%;
-
- }
- @media print{
- width: 400px;
- height: 75px;
- margin:0;
- }`,
- onPrintDialogClose: this.erexcel=false,
- font_size: '0.29cm',
- });
- },
- },
- watch:{
- printDialog(newVal){
- if(!newVal){
- this.barcodeData = []
- this.checkIndexList = []
- this.checkDataList = []
- this.isIndeterminate = true;
- }
- }
- },
-}
-</script>
-
-<style scoped>
-.item {
- margin-bottom: 4px;
-}
-.item2 {
- margin-bottom: 8px;
- vertical-align: top;
-}
-.full-title {
- display: inline-block;
- width: 80px;
- text-align-last: justify;
-}
-.full-title2 {
- display: inline-block;
- width: 50px;
- text-align-last: justify;
-}
-.full-title4 {
- display: inline-block;
- width: 53px;
- text-align-last: justify;
- vertical-align: top;
-}
-.info {
- margin-left: 2px;
-}
-.info2 {
- margin-left: 2px;
- margin-right: 30px;
- width: 80px;
- display: inline-block;
-}
-.info3 {
- margin-left: 2px;
- margin-right: 30px;
- width: 50px;
- display: inline-block;
-}
-.info4 {
- display: inline-block;
- margin-left: 2px;
- white-space: normal;
- width: 260px;
-}
-.checkboxInfo {
- display: inline-block;
- margin-left: 10px;
-}
-.scor{
- width: 0.06cm;
- height: 0.06cm;
- border-radius: 1px;
- border: 1px solid #000;
- display: inline-block;
- margin-right: 14px;
- margin-left: 4px;
-}
-.checked {
- margin-right: 14px;
- margin-left: 4px;
-}
->>> .el-checkbox {
- margin-right: 10px;
-}
->>> .el-card {
- border: none;
-}
->>>.el-card__body {
- padding: 4px 2px 6px 14px;
-}
-</style>
diff --git a/src/components/view/b1-inspection-order.vue b/src/components/view/b1-inspection-order.vue
index d0d3072..acf7a90 100644
--- a/src/components/view/b1-inspection-order.vue
+++ b/src/components/view/b1-inspection-order.vue
@@ -385,6 +385,78 @@
<div style="width: 100%;height: 100%;" v-if="active >0">
<Add :active="active" :currentId="currentId" v-if="active<4" :examine = "examine" />
</div>
+ <el-dialog title="鏍囩鎵撳嵃" :visible.sync="printDialogVisible" width="38%" top="5vh">
+ <div style="width:100%;height: 400px;overflow-y: auto;" v-loading="loadPint">
+ <div class="dia_body">
+ <el-checkbox
+ style="margin: 10px 5px;"
+ :indeterminate="isIndeterminate"
+ v-model="checkAll"
+ @change="handleCheckAllChange">鍏ㄩ��</el-checkbox>
+ <el-checkbox-group @change="changePrintCode()" v-model="checkIndexList">
+ <el-card class="box-card" v-for="(item, i) in qrData" :key="i+'wwwww'" style="margin-bottom: 15px; font-size: 16px !important;">
+ <el-checkbox :label="i" :key="i" style="position: relative;top:-10px;left:5px"><br></el-checkbox>
+ <div>
+ <p style="text-align: center;font-size: 18px;font-weight: 700;">{{ item.sample }}</p>
+ <barcode :value="item.sampleCode" :height="34" :width="2" :displayValue="false" style="display: flex;justify-content: center;width: 100%;"></barcode>
+ <div>
+ <div style="width: 100%;line-height: 30px;">
+ <el-row style="font-size: 16px;">
+ <el-col :span="16"><span> 鏍峰搧缂栧彿: </span>{{ item.sampleCode }}</el-col>
+ <el-col :span="8"><span> 瑙勬牸鍨嬪彿: </span>{{ item.model }}</el-col>
+ </el-row>
+ <el-row style="margin-top: 1px;font-size: 16px;">
+ <el-col :span="16"><span> 濮旀墭鍗曞彿: </span>{{ item.code }}</el-col>
+ <el-col :span="8"><span> 鐢垫満缂栧彿: </span>{{ item.motorNumber }}</el-col>
+ </el-row>
+ <el-row style="margin-top: 1px;font-size: 16px;">
+ <el-col><span> 鏍锋満瀹屾垚鏃堕棿: </span>{{ item.issueTime }}</el-col>
+ </el-row>
+ <el-row style="margin-top: 1px;font-size: 16px;" class="ellipsis-multiline">
+ <el-col><span> 妫�娴嬮」鐩�: </span>{{ item.item }}</el-col>
+ </el-row>
+ </div>
+ </div>
+ </div>
+ </el-card>
+ </el-checkbox-group>
+ </div>
+ </div>
+ <span slot="footer" class="dialog-footer">
+ <el-row>
+ <el-button @click="printDialogVisible=false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="submitPrint" :loading="printLoading">鎵� 鍗�</el-button>
+ </el-row>
+ </span>
+ </el-dialog>
+ <div class="el-dialog__body" style="overflow-y: auto;position: fixed;top:0;right: 20px;z-index: 9999;">
+ <div id="printMOrder" class="printMOrder" ref="printMOrder">
+ <el-card class="box-card" v-for="(item, i) in checkDataList" :key="i+'uuuuu'" style="font-size: 16px !important;page-break-after: always;color: #000;box-shadow: none;margin: 0 !important;padding: 0 !important;">
+ <div>
+ <p style="text-align: center;font-size: 18px;font-weight: 500;margin-top: 10px;">{{ item.sample }}</p>
+ <barcode :value="item.sampleCode" :height="34" :width="2" :displayValue="false" style="display: flex;justify-content: center;width: 100%;"></barcode>
+ <div>
+ <div style="width: 100%;line-height: 30px;">
+ <el-row style="font-size: 16px;">
+ <el-col :span="16"><span>鏍峰搧缂栧彿: </span>{{ item.sampleCode }}</el-col>
+ <el-col :span="7"><span>瑙勬牸鍨嬪彿: </span>{{ item.model }}</el-col>
+ </el-row>
+ <el-row style="margin-top: 1px;font-size: 16px;">
+ <el-col :span="16"><span>濮旀墭鍗曞彿: </span>{{ item.code }}</el-col>
+ <el-col :span="7"><span>鐢垫満缂栧彿: </span>{{ item.motorNumber }}</el-col>
+ </el-row>
+ <el-row style="margin-top: 1px;font-size: 16px;">
+ <el-col><span>鏍锋満瀹屾垚鏃堕棿: </span>{{ item.issueTime }}</el-col>
+ </el-row>
+ <el-row style="margin-top: 1px;font-size: 16px;" class="ellipsis-multiline">
+ <el-col><span>妫�娴嬮」鐩�: </span>{{ item.item }}</el-col>
+ </el-row>
+ </div>
+ </div>
+ </div>
+ </el-card>
+ </div>
+ </div>
<el-dialog title="鏍锋満缂栧彿" :visible.sync="BZDialogVisible" width="60%">
<div class="body" style="max-height: 60vh;" v-if="BZDialogVisible">
</div>
@@ -414,7 +486,7 @@
<el-button type="primary" @click="submitForm3" :loading="upLoad">纭� 瀹�</el-button>
</el-row>
</span>
- </el-dialog>
+ </el-dialog>
</div>
</template>
@@ -422,7 +494,7 @@
import ValueTable from '../tool/value-table.vue'
import Add from '../do/b1-ins-order/add.vue'
import vueQr from 'vue-qr'
-import { Header } from 'iview';
+ import PrintJS from 'print-js'
export default {
components: {
ValueTable,
@@ -729,11 +801,7 @@
more:false,
insOrderRow:{},
checkIndexList:[],
- checkDataList:[
- {
- sampleCode:'11111'
- }
- ],
+ checkDataList:[],
qrData:[],
multipleSelection:[],
sonLaboratoryList:[],
@@ -840,7 +908,6 @@
a.item = [...new Set(arr1)].join(',')
})
this.qrData = arr
- console.log(this.qrData)
})
},
//閫夋嫨瑕佹墦鍗扮殑浜岀淮鐮�
@@ -865,6 +932,38 @@
}
this.isIndeterminate = false;
},
+ submitPrint(){
+ if(this.checkDataList.length < 1){
+ this.$message.warning("璇烽�夋嫨瑕佹墦鍗扮殑浜岀淮鐮�")
+ return
+ }
+ PrintJS({
+ targetStyles: ["*"], // 浣跨敤dom鐨勬墍鏈夋牱寮忥紝寰堥噸瑕�
+ printable: 'printMOrder',//椤甸潰
+ type: "html",//鏂囨。绫诲瀷
+ maxWidth:360,
+ header: '',
+ style:
+ `@page {
+ margin: 0.4cm;
+ margin-right: 0.4cm;
+ margin-top: 0.4cm;
+ margin-bottom: 0.4cm;
+ padding-bottom: 0px;
+ size: 400px 75px collapse;
+ }
+ html{
+ zoom:100%;
+
+ }
+ @media print{
+ width: 400px;
+ height: 75px;
+ margin:0;
+ }`,
+ font_size: '0.29cm',
+ });
+ },
async print(){
if(this.multipleSelection.length==0){
this.$message.warning('璇烽�夋嫨涓�鏉℃暟鎹�')
diff --git a/src/main.js b/src/main.js
index f4acdb6..ab48d7d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,7 @@
import api from './assets/api/controller.js'
import swal from 'sweetalert'
import Big from 'big.js'
+import VueBarcode from "vue-barcode";
Vue.prototype.$Big = Big;
@@ -49,6 +50,7 @@
Vue.config.performance = true;
Vue.use(VueRouter);
Vue.use(ElementUI);
+Vue.component('barcode', VueBarcode)
Vue.use(qs);
Vue.use(api);
--
Gitblit v1.9.3