1.项目页面修改2.生产管理工单页面开发

loulijun2021

2022-07-07 f791db88d83a7ed851b9412d9797ed16b345fe79

 src/views/scgl/gdpg.vue

@@ -6,12 +6,12 @@
    <el-dialog
      title="预览"
      :visible.sync="dialogVisible"
      width="70%"
      width="1140"
    >
      <!-- 要打印的区域 -->
      <div id="printMe">
      <div id="printMe" style="padding: 30px">

        <div style="display: flex;justify-content: space-around">
        <div style="display: flex;justify-content: space-around;">
          <!--          二维码部分-->
          <div>
            <div id="qrCode" ref="qrCodeDiv" />
@@ -28,30 +28,72 @@
          </div>
          <!--右侧水印及姓名日期-->
          <div>
            <div ref="watermark" style="width: 100px;height:100px;" />
            <!--            <div ref="watermark" style="width: 100px;height:100px;" />-->
            <div style="color:#0f0f0f;;width: 100px;margin-top:40px;height: 50px;text-align: center">凯迪制造</div>
            <div style="font-weight: bolder">
              <div>姓名：张三</div>
              <div>日期：2022-07-05</div>
            </div>
          </div>
        </div>
        <el-divider />
        <!--        <el-divider />-->
        <div style="width:100%;height: 30px;border-bottom: 1px solid #eee;margin-bottom: 20px" />
        <el-table
          id="table"
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
          style="width: 100%;"
        >
          <el-table-column
            id="column0"
            prop="date"
            label="日期"
            width="180"
            width="100"
          />
          <el-table-column
            id="column1"
            prop="name"
            label="姓名"
            width="180"
            width="100"
          />
          <el-table-column
            id="column2"
            prop="address"
            label="地址"
            width="150"
          />
          <el-table-column
            id="column3"
            prop="address"
            label="地址"
            width="150"
          />
          <el-table-column
            id="column4"
            prop="address"
            width="150"

            label="地址"
          />
          <el-table-column
            id="column5"
            width="150"

            prop="address"
            label="地址"
          />
          <el-table-column
            id="column6"
            prop="address"
            width="120"

            label="地址"
          />
          <el-table-column
            id="column7"
            width="119"

            prop="address"
            label="地址"
          />
@@ -71,20 +113,115 @@
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!--2222-->
    <el-dialog
      title="预览"
      :visible.sync="dialogVisible2"
      width="1140"
    >
      <!-- 要打印的区域 -->
      <div id="printMe2" style="padding: 30px;">
        <!--        <div style="width: 500px; height: 300px;">-->

        <div style="display: flex;width: 300px;height: 200px;border: 1px solid #000;text-align: center;font-size: 16px;">
          <div style="width: 100px;display: flex;flex-direction: column;border-right: 1px solid #000">
            <div style="display: flex;height: 75%;border-bottom:1px solid #000;justify-content: center;align-items: center ">
              <div id="qrCode2" ref="qrCodeDiv2" />
            </div>
            <div style="display: flex;height: 25%;justify-content: center;align-items: center">
              数量：100
            </div>
          </div>
          <div style="width:200px;display: flex;flex-direction: column">
            <div style="display: flex;height: 25%;border-bottom:1px solid #000;justify-content: center;align-items: center ">
              工单编号：1403-001-0001
            </div>
            <div style="display: flex;height: 25%;border-bottom:1px solid #000;justify-content: center;align-items: center ">
              工单编号：1403-001-0001
            </div>
            <div style="display: flex;height: 25%;border-bottom:1px solid #000 ;justify-content: center;align-items: center">
              工单编号：1403-001-0001
            </div>
            <div style="display: flex;height: 25%;justify-content: center;align-items: center">
              工单编号：1403-001-0001
            </div>

          </div>

        </div>

        <!--        </div>-->
      </div>

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

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

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>

    <el-dialog
      title="外层 Dialog"
      top="15vh"
      :close-on-click-modal="false"
      width="840"
      :visible.sync="outerVisible"
    >
      <el-dialog
        width="30%"
        title="内层 Dialog"
        :visible.sync="innerVisible"
        append-to-body
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import vueEasyPrint from 'vue-easy-print'
// import vueEasyPrint from 'vue-easy-print'
import QRCode from 'qrcodejs2'
// import QRCode from 'qrcode'

export default {
  name: 'Gdpg',
  components: {
    vueEasyPrint
  },
  // components: {
  //   vueEasyPrint
  // },
  data() {
    return {
      outerVisible: false,
      innerVisible: false,
      dialogVisible2: false,
      printObj2: {
        id: 'printMe2',
        beforeOpenCallback(vue) {
          vue.printLoading = true
          console.log('打开之前')
          console.log()
        },
        openCallback(vue) {
          vue.printLoading = false
          console.log('执行了打印')
        },
        closeCallback(vue) {
          console.log('关闭了打印工具')
        }

      },
      firstWatermark: true, // 第一次显示水印
      firstbindQRCode: true, // 第一次显示二维码
      form: {
@@ -96,7 +233,42 @@
      printObj: {
        id: 'printMe',
        popTitle: '打印模板',
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>'
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
        previewBeforeOpenCallback() {
        }, // 预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {
        }, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeEntryIframe() {
          const widthArr = ['10%', '10%', '15%', '15%', '15%', '15%', '10%', '10%']
          // const tables = document.getElementById('table').getElementsByTagName('el-table') // 获取打印的表格
          const tables = document.getElementById('table') // 获取打印的表格
          // const headcolgroupCol0 = tables[0].getElementsByTagName('colgroup')[0].getElementsByTagName('col')
          // const headcolgroupCol0 = document.getElementById('column0').style.width = '400px'
          // const headcolgroupCol1 = document.getElementById('column1')
          // const headcolgroupCol2 = document.getElementById('column2')
          // const headcolgroupCol3 = document.getElementById('column3')
          // const headcolgroupCol4 = document.getElementById('column4')
          // const headcolgroupCol5 = document.getElementById('column5')
          // const headcolgroupCol6 = document.getElementById('column6')
          // const headcolgroupCol7 = document.getElementById('column7')
          // const headcolgroupCol1 = tables[1].getElementsByTagName('colgroup')[0].getElementsByTagName('col')
          // widthArr.forEach((val, index) => {
          //   headcolgroupCol0[index].width = val
          //   headcolgroupCol1[index].width = val
          //   headcolgroupCol2[index].width = val
          //   headcolgroupCol3[index].width = val
          //   headcolgroupCol4[index].width = val
          //   headcolgroupCol5[index].width = val
          //   headcolgroupCol6[index].width = val
          //   headcolgroupCol7[index].width = val
          // })
        },
        openCallback() {

        }, // 调用打印之后的回调事件
        closeCallback() {
        } // 关闭打印的回调事件（无法确定点击的是确认还是取消）

        // id: 'printMe',
        // popTitle: '打印', // 打印配置页上方标题
        // extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
@@ -133,7 +305,9 @@
    }
  },
  mounted() {

    this.$nextTick(() => {
      this.bindQRCode()
    })
  },
  methods: {
    addWatermark() {
@@ -148,15 +322,20 @@
      this.$nextTick(() => {
        this.bindQRCode()
        this.addWatermark()
        console.log(document.getElementById('column0').style.width = '200px', 0)
        console.log(document.getElementById('column7'), 7)
        console.log(document.getElementById('table'), 2)
        console.log(document.getElementById('table').getElementsByTagName('el-table'), 1)
      })
    },
    bindQRCode() {
      if (this.firstbindQRCode) {
        new QRCode(this.$refs.qrCodeDiv, {
        const text = 'PO202206280001;Step02'
        new QRCode(this.$refs.qrCodeDiv2, {
          // text: 'Vue实现生成二维码！',
          text: 'Vue实现生成二维码！',
          width: 100,
          height: 100,
          text: text,
          width: 80,
          height: 80,
          colorDark: '#333333', // 二维码颜色
          colorLight: '#ffffff', // 二维码背景色
          correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
@@ -189,7 +368,38 @@
}
</script>

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

/*::v-deep .el-table {*/
/*  margin-top: 10px;*/
/*}*/
/*table {*/
/*  width: 100% !important;*/
/*}*/

/*.el-table__body,*/
/*.el-table__header {*/
/*  width: 100% !important;*/
/*}*/

/*.el-table__body {*/
/*  width: 100% !important;*/
/*}*/

/*}*/

/*/deep/.el-table__body-wrapper::-webkit-scrollbar{*/
/*  width: 0;*/
/*}*/
</style>