打印

hdy

2024-05-12 6068faa866f976b7848b872420f2d93f77f5035b

 jcdm-ui/src/views/main/bs/workshop/index.vue

@@ -1,31 +1,39 @@
<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="车间编码" prop="workshopCode">
          <el-input
            v-model="queryParams.workshopCode"
            placeholder="请输入车间编码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="车间名称" prop="workshopName">
          <el-input
            v-model="queryParams.workshopName"
            placeholder="请输入车间名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<!--          <el-button type="warning" icon="el-icon-copy-document" size="mini" @click="advancedQuery">高级查询</el-button>-->
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form :model="queryParams" ref="queryParams" size="small" :inline="true" v-show="advancedShowSearch" label-width="68px">
      </el-form>
<!--      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">-->
<!--        <el-form-item label="车间编码" prop="workshopCode">-->
<!--          <el-input-->
<!--            v-model="queryParams.workshopCode"-->
<!--            placeholder="请输入车间编码"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="车间名称" prop="workshopName">-->
<!--          <el-input-->
<!--            v-model="queryParams.workshopName"-->
<!--            placeholder="请输入车间名称"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item style="float: right">-->
<!--          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!--&lt;!&ndash;          <el-button type="warning" icon="el-icon-copy-document" size="mini" @click="advancedQuery">高级查询</el-button>&ndash;&gt;-->
<!--          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <el-form :model="queryParams" ref="queryParams" size="small" :inline="true" v-show="advancedShowSearch" label-width="68px">-->
<!--      </el-form>-->
      <div>
        <div id="printMe">
          <div ref="canvasWrapper" id="canvasWrapper"></div>
          <p>1111</p>
        </div>
        <el-button @click="print">打印</el-button>
        <el-button @click="test1">生成二维码</el-button>
      </div>
    </el-card>

    <el-card style="margin-top: 10px" class="box-card">
@@ -94,9 +102,9 @@
        </el-table-column>
        <el-table-column label="更新人" align="center" prop="updateUser" width="150">
        </el-table-column>
        <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
        <el-table-column label="更新时间" align="center" prop="updateTime">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center" class-name="small-padding fixed-width">
        <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
@@ -168,6 +176,7 @@
</template>

<script>
import QRCode from 'qrcodejs2'
import { listWorkshop, getWorkshop, delWorkshop, addWorkshop, updateWorkshop } from "@/api/main/bs/workshop/workshop";

export default {
@@ -175,6 +184,7 @@
  dicts: ['sys_normal_disable'],
  data() {
    return {
      text: '1234',
      select: '',
      // 遮罩层
      loading: true,
@@ -224,8 +234,37 @@
  },
  created() {
    this.getList();
    // this.test1();
  },
  methods: {
    print() {
      // 本页面直接打印（有bug单岁先不要删）
      // let oldStr = window.document.body.innerHTML;
      // let newStr = document.getElementById('printMe').innerHTML;
      // document.body.innerHTML = newStr;
      // window.print();
      // document.body.innerHTML = oldStr;
      // return false;

      // 新开页面打印
      let newStr = document.getElementById('printMe').innerHTML;
      let newWin = window.open('', '_blank');
      newWin.document.body.innerHTML = newStr;
      newWin.print();
      return false;
    },
    test1(){
      document.getElementById('canvasWrapper').innerHTML = '';
      this.$nextTick(() => {
        let qrCode = new QRCode('canvasWrapper',{
          width: 50,
          height: 50,
          text: this.text,
          colorDark: '#000',
          colorLight: '#fff'
        })
      })
    },
    advancedQuery(){
       this.advancedShowSearch = (this.advancedShowSearch) ? this.advancedShowSearch = false : this.advancedShowSearch = true;
    },