1.做适应平板显示的内容大小

loulijun2021

2022-08-05 d33eacc1f85ac3a736b33ba4713a19aae466d711

 src/views/scgl/gd.vue

@@ -76,12 +76,12 @@
              <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
              <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
            </div>
            <!--            <div v-if="!isFullscreen" style="display: flex;align-items: start; margin-top: 15px;z-index: 2">-->
            <!--            <div v-if="!isIpad" style="display: flex;align-items: start; margin-top: 15px;z-index: 2">-->
            <!--              <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>-->
            <!--              <el-button type="primary" icon="el-icon-connection" @click="send('send')">派发</el-button>-->
            <!--              <el-button type="primary" icon="el-icon-switch-button">订单关闭</el-button>-->
            <!--            </div>-->
            <!--            <div v-if="isFullscreen" style="display: flex;flex-direction: column;align-items: end">-->
            <!--            <div v-if="isIpad" style="display: flex;flex-direction: column;align-items: end">-->
            <!--              <div style="display: flex;margin: 10px 0">-->
            <!--                <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>-->
            <!--                <el-button type="primary" icon="el-icon-connection" @click="send('send')">派发</el-button>-->
@@ -230,7 +230,7 @@
          />
          <el-table-column
            label="操作"
            width="120"
            width="140"
            fixed="right"
          >
            <template slot-scope="{row}">
@@ -569,7 +569,7 @@
      <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="display: flex;justify-content: space-around;margin-top: 20px; position: relative;">
          <div style="width: 78%">
            <el-form
              ref="formApprove"
@@ -606,10 +606,18 @@
              </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
            id="qrCode"
            style="width: 22%;height:97px;
            margin-top: 20px;
            overflow-x: scroll;display: flex;
            justify-content: center;
            position: relative;"
          >
            <!--            <div id="qrCode0" ref="qrCodeDiv0" />-->
          </div>
          <div style="background-color: #fff;width: 20px;height:120px; position: absolute;right: 0" />
          <div style="z-index: 10;background-color:transparent;width: 120px;height:120px; position: absolute;right: 21px" />
        </div>

        <!--          <div style="width:100%;height: 30px;border-bottom: 1px solid #eee;margin-bottom: 20px" />-->
@@ -724,7 +732,7 @@
      }
    }
    return {
      isFullscreen: false,
      isIpad: false,
      mainHeight: 0,
      tableHeight: 0,
      username: '',
@@ -852,8 +860,7 @@
    }
  },
  created() {
    this.getMesOrderSearch()
    this.getSelect()
    this.handleRequest()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
@@ -863,6 +870,13 @@
    this.username = getCookie('username')
  },
  methods: {
    handleRequest() {
      this.getMesOrderSearch().then(res => {
        if (res.code === '200') {
          this.getSelect()
        }
      })
    },
    async getMesOrderSearch() {
      // let tempDate = this.form.createdate
      // if (tempDate.length > 0) {
@@ -887,6 +901,7 @@
      this.total = res.count

      // this.form.createdate = tempDate
      return { code: res.code }
    },
    async getSelect() {
      // 获取产品信息
@@ -1172,10 +1187,10 @@
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100
        // this.isFullscreen = window.innerHeight < 800
        if (this.isFullscreen) {
          this.tableHeight = this.tableHeight - 50
        this.tableHeight = this.mainHeight - 110
        this.isIpad = window.innerHeight < 769
        if (this.isIpad) {
          this.tableHeight = this.tableHeight - 30
        }
      })
    },
@@ -1215,10 +1230,15 @@
          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')
            })
            // this.bindQRCode('0', this.formApprove.mesordercode, 'big')

            const div = document.getElementById('qrCode')
            // 这么多代码只需要这一句实现我们所需要的功能，定位div滚动条位置在底部，scrollHeight计算出div的高度，再scrollTop 设置滚动条的高度为多少
            // div.scrollTop = div.scrollHeight // 滚动条位于最底部
            div.scrollTop = 0 // 滚动条位于最顶部
          })
        }
      })
@@ -1251,15 +1271,28 @@
    // },
    // 生成二维码
    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
      })
      if (size === 'big') {
        console.log(text, 1)
        new QRCode(this.$refs.qrCodeDiv0, {
          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
        })
      } else {
        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() {
@@ -1271,19 +1304,9 @@
      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.$refs.qrCodeDiv0.title = ''

      this.tableDataPrint = []
    },
    // 补打按钮