1.生产管理完成部分功能2.自定义页面打印、二维码图形、水印显示实现了一个demo

loulijun2021

2022-07-05 68eaf315b64145e487d10e66183d542ee7f94d10

 src/views/scgl/gdpg.vue

@@ -1,11 +1,195 @@
<template />
<template>
  <div>

    <el-button type="primary" @click="clickMe">点击我</el-button>

    <el-dialog
      title="预览"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <!-- 要打印的区域 -->
      <div id="printMe">

        <div style="display: flex;justify-content: space-around">
          <!--          二维码部分-->
          <div>
            <div id="qrCode" ref="qrCodeDiv" />
            <!--            <img :src="QRImgUrl">-->

            <div style="font-size: 18px;width: 100px;text-align: center;margin-top: 10px">MO-79601</div>
          </div>
          <!--          公司名称及打印单类型-->
          <div
            style="height: 100px;display: flex;justify-content:space-between;align-items: center;flex-direction: column;font-weight: bolder"
          >
            <div style="font-size: 26px;">永康新凯迪工业互联有限公司</div>
            <div style="font-size: 22px;">委外派单</div>
          </div>
          <!--右侧水印及姓名日期-->
          <div>
            <div ref="watermark" style="width: 100px;height:100px;" />
            <div style="font-weight: bolder">
              <div>姓名：张三</div>
              <div>日期：2022-07-05</div>
            </div>
          </div>
        </div>
        <el-divider />
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="date"
            label="日期"
            width="180"
          />
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
          />
          <el-table-column
            prop="address"
            label="地址"
          />
        </el-table>
      </div>

      <!--      <vue-easy-print ref="printRef" :button-show="true">-->
      <!--        x-->
      <!--      </vue-easy-print>-->

      <!-- 打印的按钮，显示打印预览 -->
      <!--    <el-button v-print="'#printMe'">打印</el-button>-->
      <el-button v-print="printObj">打印</el-button>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import vueEasyPrint from 'vue-easy-print'
import QRCode from 'qrcodejs2'
// import QRCode from 'qrcode'

export default {
  name: 'Gdpg'
  name: 'Gdpg',
  components: {
    vueEasyPrint
  },
  data() {
    return {
      firstWatermark: true, // 第一次显示水印
      firstbindQRCode: true, // 第一次显示二维码
      form: {
        describle: ''
      },
      QRImgUrl: '',
      QRlink: 'www.xxx.com',
      dialogVisible: false,
      printObj: {
        id: 'printMe',
        popTitle: '打印模板',
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>'
        // id: 'printMe',
        // popTitle: '打印', // 打印配置页上方标题
        // extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        // preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        // previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        // previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        // zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        // previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）
        // previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        // beforeOpenCallback() {}, // 开启打印前的回调事件
        // openCallback() {}, // 调用打印之后的回调事件
        // closeCallback() {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
        // url: '',
        // standard: '',
        // extraCss: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted() {

  },
  methods: {
    addWatermark() {
      if (this.firstWatermark) {
        console.log(this.firstWatermark)
        this.$watermark.set('凯迪制造', this.$refs.watermark)
        this.firstWatermark = false
      }
    },
    clickMe() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.bindQRCode()
        this.addWatermark()
      })
    },
    bindQRCode() {
      if (this.firstbindQRCode) {
        new QRCode(this.$refs.qrCodeDiv, {
          // text: 'Vue实现生成二维码！',
          text: 'Vue实现生成二维码！',
          width: 100,
          height: 100,
          colorDark: '#333333', // 二维码颜色
          colorLight: '#ffffff', // 二维码背景色
          correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
        })
        this.firstbindQRCode = false
      }

      // const opts = {
      //   errorCorrectionLevel: 'L', // 容错级别
      //   type: 'image/png', // 生成的二维码类型
      //   quality: 0.3, // 二维码质量
      //   margin: 5, // 二维码留白边距
      //   width: 128, // 宽
      //   height: 128, // 高
      //   text: 'http://www.baidu.com', // 二维码内容
      //   color: {
      //     dark: '#666666', // 前景色
      //     light: '#fff'// 背景色
      //   }
      // }
      // // this.QRlink 生成的二维码地址url
      // QRCode.toDataURL(this.QRlink, opts, (err, url) => {
      //   if (err) throw err
      //   // 将生成的二维码路径复制给data的QRImgUrl
      //   this.QRImgUrl = url
      // })
    }

  }
}
</script>

<style scoped>

</style>