-打印

admin

2024-05-11 9a1433b0ff2754d9c11f98a654af44ec7d5ab992

-打印

 jcdm-ui/package.json

@@ -49,6 +49,7 @@
    "js-cookie": "3.0.1",
    "jsencrypt": "3.0.0-rc.1",
    "nprogress": "0.2.0",
    "qrcode": "^1.5.3",
    "quill": "1.3.7",
    "screenfull": "5.0.2",
    "sortablejs": "1.10.2",
@@ -56,6 +57,7 @@
    "vue-count-to": "1.0.13",
    "vue-cropper": "0.5.5",
    "vue-meta": "2.4.0",
    "vue-qr": "^4.0.9",
    "vue-router": "3.4.9",
    "vuedraggable": "2.24.3",
    "vuex": "3.6.0"

 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"></div>
          <p>1111</p>
        </div>
        <button @click="print">打印</button>
        <button @click="test1">生成二维码</button>
      </div>
    </el-card>

    <el-card style="margin-top: 10px" class="box-card">
@@ -168,6 +176,7 @@
</template>

<script>
import QRCode from 'qrcode'
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,34 @@
  },
  created() {
    this.getList();
    this.test1();
  },
  methods: {
    print() {

      let printMe = document.querySelector('#printMe');
      let printWindow = window.open('', '_blank');
      printWindow.document.write(printMe.innerHTML);
      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
    },
    test1(){
      QRCode.toCanvas(this.text, {
        width: 40,
        // height: 40,
        margin: 1,

      }, (error, canvas) => {
        if (error) {
          console.error(error)
          return
        }
        // 在canvas的父元素中插入canvas元素
        this.$refs.canvasWrapper.appendChild(canvas)
      })
    },
    advancedQuery(){
       this.advancedShowSearch = (this.advancedShowSearch) ? this.advancedShowSearch = false : this.advancedShowSearch = true;
    },