标签打印页面更新

licp

2024-10-15 b55cd11535741868b878139f9ca24d72e8cf693f

标签打印页面更新

 src/components/do/b1-ins-order/printDialog.vue

ÎļþÒÑɾ³ý

 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>&nbsp;&nbsp;&nbsp;&nbsp;样品编号:&nbsp; </span>{{ item.sampleCode }}</el-col>
                      <el-col :span="8"><span>&nbsp;&nbsp;&nbsp;&nbsp;规格型号:&nbsp; </span>{{ item.model }}</el-col>
                    </el-row>
                    <el-row style="margin-top: 1px;font-size: 16px;">
                      <el-col :span="16"><span>&nbsp;&nbsp;&nbsp;&nbsp;委托单号:&nbsp; </span>{{ item.code }}</el-col>
                      <el-col :span="8"><span>&nbsp;&nbsp;&nbsp;&nbsp;电机编号:&nbsp; </span>{{ item.motorNumber }}</el-col>
                    </el-row>
                    <el-row style="margin-top: 1px;font-size: 16px;">
                      <el-col><span>&nbsp;&nbsp;&nbsp;&nbsp;样机完成时间:&nbsp; </span>{{ item.issueTime }}</el-col>
                    </el-row>
                    <el-row style="margin-top: 1px;font-size: 16px;" class="ellipsis-multiline">
                      <el-col><span>&nbsp;&nbsp;&nbsp;&nbsp;检测项目:&nbsp; </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>样品编号:&nbsp; </span>{{ item.sampleCode }}</el-col>
                    <el-col :span="7"><span>规格型号:&nbsp; </span>{{ item.model }}</el-col>
                  </el-row>
                  <el-row style="margin-top: 1px;font-size: 16px;">
                    <el-col :span="16"><span>委托单号:&nbsp; </span>{{ item.code }}</el-col>
                    <el-col :span="7"><span>电机编号:&nbsp; </span>{{ item.motorNumber }}</el-col>
                  </el-row>
                  <el-row style="margin-top: 1px;font-size: 16px;">
                    <el-col><span>样机完成时间:&nbsp; </span>{{ item.issueTime }}</el-col>
                  </el-row>
                  <el-row style="margin-top: 1px;font-size: 16px;" class="ellipsis-multiline">
                    <el-col><span>检测项目:&nbsp; </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('请选择一条数据')

 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);