1.自定义打印完成

loulijun2021

2022-07-28 9193459fbb692abc227b1643ae52f65a2e782ebd

 src/views/scgl/gd.vue

@@ -467,11 +467,12 @@
          />
        </el-table>
      </el-dialog>

      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button @click="dialogVisibleCancel">取 消</el-button>
          <el-button v-if="operation==='add'" type="primary" @click="dialogVisibleConfirm">确 定</el-button>
          <el-button v-else type="primary" @click="dialogVisibleConfirm">确 定/打 印</el-button>
          <!--          <el-button v-if="operation==='add'" type="primary" @click="dialogVisibleConfirmPreview('add')">预览</el-button>-->
          <el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
        </div>
      </span>
    </el-dialog>
@@ -484,7 +485,13 @@
      top="15vh"
      class="dialogVisibleSearch"
      :close-on-click-modal="false"
      @close="dialogVisibleTaskClose"
    >
      <el-button
        style="margin-bottom: 15px"
        type="primary"
        @click="supplementClick"
      >补打</el-button>
      <el-table
        :data="taskTableData"
        border
@@ -548,6 +555,137 @@
      </span>
    </el-dialog>

    <!--        打印预览对话框-->
    <el-dialog
      title=""
      :visible.sync="dialogVisibleApprove"
      width="812px"
      class="dialogVisibleConfirmClass"
      append-to-body
      :close-on-click-modal="false"
      @close="dialogVisibleConfirmClose"
    >
      <!-- 要打印的区域 -->
      <div id="printMe" style="padding: 30px">
        <div style="font-size: 26px; text-align: center">流程单</div>

        <div style="display: flex;justify-content: space-around;margin-top: 20px">
          <div style="width: 78%">
            <el-form
              ref="formApprove"
              :model="formApprove"
              label-width="100px"
              inline
              style="display: flex;justify-content: space-between"
            >
              <div class="elForm">
                <el-form-item label="工单编号：" class="formContent">
                  {{ formApprove.mesordercode }}
                </el-form-item>
                <el-form-item label="产品编码：" class="formContent">
                  {{ formApprove.partcode }}
                </el-form-item>
                <el-form-item label="产品名称：" class="formContent">
                  {{ formApprove.partname }}
                </el-form-item>
                <el-form-item label="产品规格：" class="formContent">
                  {{ formApprove.partspec }}
                </el-form-item>
                <el-form-item label="工单数量：" class="formContent">
                  {{ formApprove.plan_qty }}
                </el-form-item>
                <el-form-item label="工艺路线：" class="formContent">
                  {{ formApprove.routename }}
                </el-form-item>
                <el-form-item label="打印人员：" class="formContent">
                  {{ username }}
                </el-form-item>
                <el-form-item label="打印时间：" class="formContent">
                  {{ formApprove.lm_date }}
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div style="width: 22%;display: flex;justify-content: center;align-items: center">
            <!--            <div :id="'qrCode'+0" :ref="'qrCodeDiv'+0" />-->
            <div />
          </div>
        </div>

        <!--          <div style="width:100%;height: 30px;border-bottom: 1px solid #eee;margin-bottom: 20px" />-->
        <el-table
          id="table"
          :data="tableDataPrint"
          border
          class="tableDataPrint"
          :header-cell-style="{ background: '#c0c0c0',textAlign:'center',color:'#000',borderColor:'#000'}"
          :cell-style="{textAlign: 'center',color:'#000',borderColor:'#000'}"
          style="width: 100%;margin-top: 20px;text-align: center;border-color: #000"
        >
          <el-table-column
            id="column0"
            prop="seq"
            label="工序号"
            width="70"
            align="center"
          />
          <el-table-column
            id="column1"
            prop="stepqrcode"
            label="工序二维码"
            width="100"
            align="center"
          >
            <template slot-scope="{row}">
              <div :id="'qrCode'+row.seq" :ref="'qrCodeDiv'+row.seq" class="tableColumn" />
            </template>
          </el-table-column>
          <el-table-column
            id="column2"
            prop="stepname"
            label="工序"
            width="120"
            align="center"
          />
          <el-table-column
            id="column3"
            prop="plan_qty"
            label="加工数量"
            width="100"
            align="center"
          />
          <el-table-column
            id="column4"
            prop="good_qty"
            width="100"
            align="center"
            label="合格数量"
          />
          <el-table-column
            id="column5"
            width="100"
            prop="ng_qty"
            align="center"
            label="不良数量"
          />
          <el-table-column
            id="column6"
            prop="desc"
            align="center"
            width="120"
            label="备注"
          />
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button @click="dialogVisibleBackPreview">返 回</el-button>
          <!--            <el-button v-if="operation==='add'" type="primary" @click="dialogVisibleConfirm">确 定</el-button>-->
          <!--            <el-button type="primary" @click="dialogVisibleConfirm">确 定/打 印</el-button>-->
          <el-button v-print="printObj" type="primary">打 印</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

@@ -565,6 +703,7 @@
import { getCookie } from '@/utils/auth'
import { MesOrderPrintSearch1, PrintOrder } from '@/api/utils'
import { urlAddRandomNo, webapp_ws_ajax_run, webapp_ws_autoupdate } from '@/utils/grwebapp'
import QRCode from 'qrcodejs2'

const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
@@ -588,6 +727,7 @@
      isFullscreen: false,
      mainHeight: 0,
      tableHeight: 0,
      username: '',
      form: {
        mesorderstus: '', // 工单状态码
        mesordercode: '', // 工单编号
@@ -673,26 +813,42 @@
      },
      dialogVisibleTask: false,
      taskTableData: [],
      // dialogFormTask: {
      //   partname: '', // 产品名称
      //   partspec: '', // 产品规格
      //   wkshopname: '', // 生产车间名称
      //   routename: '', // 工艺路线名称
      //
      //   mesorderstusName: '', // 工单状态名称
      //   mesorderstus: '', // 工单状态码
      //   mesordercode: '', // 工单编号
      //   partcode: '', // 产品编码
      //   mesqty: '', // 工单数量
      //
      //   routecode: '', // 工艺路线编码
      //   wkshopcode: '', // 生产车间编码
      //   planstartdate: '', // 计划开始时间
      //   planenddate: '', // 计划完成时间
      //   orderlev: '' // 工单等级
      // },

      dialogVisibleSearch: false,
      searchTableData: []
      searchTableData: [],
      dialogVisibleApprove: false,
      tableDataPrint: [], // 打印页面内容
      printObj: {
        id: 'printMe',
        popTitle: '打印模板',
        preview: false,
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
        closeCallback(vue) { // 关闭打印的回调事件（无法确定点击的是确认还是取消）
          console.log('11212', vue)
          // vue.dialogVisible = false
          vue.dialogVisibleApprove = false
        },
        beforeOpenCallback(vue) {
          vue.printLoading = true
          console.log('打开之前')
          console.log()
        },
        openCallback(vue) {
          vue.printLoading = false
          console.log('执行了打印')
        }
      },

      formApprove: {
        mesordercode: '',
        partcode: '',
        partname: '',
        partspec: '',
        plan_qty: '',
        routename: '',
        lm_date: ''
      },
      number: ''
    }
  },
  created() {
@@ -703,7 +859,8 @@
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    // webapp_urlprotocol_startup()
    webapp_ws_autoupdate(true)
    // webapp_ws_autoupdate(true)
    this.username = getCookie('username')
  },
  methods: {
    async getMesOrderSearch() {
@@ -819,6 +976,7 @@
      this.dialogVisibleTask = true
      const { data: res } = await SearchWorkStep({ wo_code: row.wo_code })
      this.taskTableData = res
      this.dialogForm.mesordercode = res[0].wo_code
    },
    dialogVisibleBack() {
      this.dialogVisibleTask = false
@@ -972,13 +1130,15 @@
            orderlev: this.dialogForm.orderlev, // 工单等级
            OperType: this.operation === 'add' ? 'Add' : 'Update'
          }

          AddUpdateMesOrder(data).then(res => {
            if (res.code === '200') {
              if (this.operation !== 'add') {
                this.sendPrint()
              }
              this.$message.success(this.operation === 'add' ? '添加成功！' : '派发成功！')
              this.dialogVisible = false

              this.handlePrint()

              this.$message.success(this.operation === 'add' ? '添加成功！' : '派发成功！')
              // this.dialogVisible = false
              this.getMesOrderSearch()
            } else {
              this.$message.error(this.operation === 'add' ? '添加失败！' : '派发失败！')
@@ -990,12 +1150,12 @@
    // 派发打印
    async sendPrint() {
      const data = {
        // username: getCookie('admin'),
        username: getCookie('username'),
        username: getCookie('admin'),
        // username: getCookie('username'),
        mesordercode: this.dialogForm.mesordercode
      }
      // const res = await MesOrderPrintSearch1(data)
      const res = await PrintOrder(data)
      const res = await MesOrderPrintSearch1(data)
      // const res = await PrintOrder(data)
      if (res.code === '200') {
        // 参数具体说明请参考帮助文档中的“WEB报表(B/S报表)->WEB报表客户端->启动参数说明”部分
        var args = {
@@ -1007,6 +1167,7 @@
        webapp_ws_ajax_run(args)
      }
    },

    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
@@ -1029,7 +1190,108 @@
    },
    dialogVisibleSearchBack() {
      this.dialogVisibleSearch = false
    },
    // 处理打印
    handlePrint() {
      // const number = Math.random() * Math.random()
      // this.number = number === 0 ? (10 + Math.random()) : number
      // console.log(number)
      this.dialogVisibleApprove = true
      const data2 = {
        username: getCookie('admin'),
        mesordercode: this.dialogForm.mesordercode
      }
      MesOrderPrintSearch1(data2).then(res2 => {
        if (res2.code === '200') {
          const res3 = res2.data.recordset

          this.tableDataPrint = res3
          this.formApprove.mesordercode = res3[0].wo_code
          this.formApprove.partcode = res3[0].partcode
          this.formApprove.partname = res3[0].partname
          this.formApprove.partspec = res3[0].partspec
          this.formApprove.plan_qty = res3[0].plan_qty
          this.formApprove.routename = res3[0].routename
          this.formApprove.lm_date = res3[0].lm_date

          this.$nextTick(() => {
            // this.bindQRCode(0, this.formApprove.mesordercode, 'big')
            res3.forEach(i => {
              this.bindQRCode(i.seq, i.stepqrcode, 'small')
            })
          })
        }
      })
    },
    dialogVisibleTaskClose() {
      this.dialogForm.mesordercode = ''
    },
    /*
  * 手动点击打印
  * */
    // 返回按钮
    dialogVisibleBackPreview() {
      this.dialogVisibleApprove = false
    },
    // dialogVisibleConfirmPreview(param) {
    //   this.$refs.dialogForm.validate(valid => {
    //     if (valid) {
    //       const data = {
    //         username: getCookie('admin'),
    //         mesordercode: this.dialogForm.mesordercode
    //       }
    //       MesOrderPrintSearch1(data).then(res => {
    //         if (res.code === '200') {
    //           this.dialogVisibleApprove = true
    //           console.log(res, 11)
    //         }
    //       })
    //     }
    //   })
    // },
    // 生成二维码
    bindQRCode(seq, text, size) {
      new QRCode(this.$refs['qrCodeDiv' + seq], {
        text: text,
        width: size === 'big' ? 90 : 60,
        height: size === 'big' ? 90 : 60,
        // colorDark: '#333333', // 二维码颜色
        colorDark: '#000', // 二维码颜色
        colorLight: '#ffffff', // 二维码背景色
        correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
      })
    },

    dialogVisibleConfirmClose() {
      // this.dialogForm.mesordercode = ''
      this.formApprove.mesordercode = ''
      this.formApprove.partcode = ''
      this.formApprove.partname = ''
      this.formApprove.partspec = ''
      this.formApprove.plan_qty = ''
      this.formApprove.routename = ''
      this.formApprove.lm_date = ''
      // this.$refs.qrCodeDiv0 = ''
      // this.$refs.qrCodeDiv1 = ''
      // this.$refs.qrCodeDiv2 = ''
      // this.$refs.qrCodeDiv3 = ''

      // // this.$ref['qrCodeDiv'].clearable()
      // this.tableDataPrint.forEach((item, index) => {
      //   this.$ref[('qrCodeDiv' + index).toString()] = ''
      // //   this.bindQRCode(item.seq, '')
      // })
      // // this.bindQRCode(this.tableDataPrint.length, '')
      // this.$ref[('qrCodeDiv' + this.tableDataPrint.length).toString()] = ''
      // // this.bindQRCode()
      this.tableDataPrint = []
    },
    // 补打按钮
    supplementClick() {
      this.dialogVisibleTask = false
      this.handlePrint()
    }

  }
}
</script>
@@ -1088,6 +1350,10 @@
}

.dialogVisibleSearch ::v-deep .el-dialog__body {
  padding: 20px 20px !important;
}

.dialogVisibleConfirmClass ::v-deep .el-dialog__body {
  padding: 20px 20px !important;
}

@@ -1182,6 +1448,10 @@
  margin-bottom: 0;
}

.elForm ::v-deep .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-input__inner:focus {
  border-color: $main_color;
}
@@ -1207,4 +1477,37 @@
    display: none;
  }
}

.el-table::before {
  height: 0;
}

//.dialogVisibleConfirmClass >>>.el-table--border, .el-table--fit {
//  border-bottom: 2px solid #000 ;
//  //outline: #000 solid 2px !important;
//}

.tableDataPrint ::v-deep div.cell{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.formContent{
  width: 240px;
}

</style>

<style media="print">
/*@media print {*/
@page {
  size: auto;
  margin: 3mm;
}

</style>
<style>
.formContent .el-form-item__label{
color: #000 !important;
}
</style>