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>-->
@@ -132,6 +132,7 @@
            prop="RowNum"
            width="50"
            label="序号"
            fixed
          />
          <el-table-column
            prop="status"
@@ -152,14 +153,13 @@
            prop="wo_code"
            label="工单编号"
            sortable="custom"

            width="160"
            min-width="160"
          />
          <el-table-column
            prop="partcode"
            label="产品编码"
            sortable="custom"
            width="120"
            min-width="120"
          />
          <el-table-column
            prop="partname"
@@ -189,7 +189,7 @@
            prop="route_name"
            label="工艺路线"
            sortable="custom"
            width="130"
            min-width="130"
          />

          <el-table-column
@@ -230,7 +230,7 @@
          />
          <el-table-column
            label="操作"
            width="120"
            width="140"
            fixed="right"
          >
            <template slot-scope="{row}">
@@ -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,145 @@
      </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; position: relative;">
          <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
            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" />-->
        <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>

@@ -563,8 +709,9 @@
import { PartSelect } from '@/api/zzmx'
import { handleDatetime } from '@/utils/global'
import { getCookie } from '@/utils/auth'
import { MesOrderPrintSearch1 } from '@/api/utils'
import { urlAddRandomNo, webapp_urlprotocol_startup, webapp_ws_ajax_run, webapp_ws_autoupdate } from '@/utils/grwebapp'
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 {
@@ -585,9 +732,10 @@
      }
    }
    return {
      isFullscreen: false,
      isIpad: false,
      mainHeight: 0,
      tableHeight: 0,
      username: '',
      form: {
        mesorderstus: '', // 工单状态码
        mesordercode: '', // 工单编号
@@ -673,39 +821,62 @@
      },
      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() {
    this.getMesOrderSearch()
    this.getSelect()
    this.handleRequest()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    // webapp_urlprotocol_startup()
    webapp_ws_autoupdate(true)
    // webapp_ws_autoupdate(true)
    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) {
@@ -730,6 +901,7 @@
      this.total = res.count

      // this.form.createdate = tempDate
      return { code: res.code }
    },
    async getSelect() {
      // 获取产品信息
@@ -819,6 +991,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 +1145,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' ? '添加失败！' : '派发失败！')
@@ -991,9 +1166,11 @@
    async sendPrint() {
      const data = {
        username: getCookie('admin'),
        // username: getCookie('username'),
        mesordercode: this.dialogForm.mesordercode
      }
      const res = await MesOrderPrintSearch1(data)
      // const res = await PrintOrder(data)
      if (res.code === '200') {
        // 参数具体说明请参考帮助文档中的“WEB报表(B/S报表)->WEB报表客户端->启动参数说明”部分
        var args = {
@@ -1002,18 +1179,18 @@
          report: urlAddRandomNo('./static/grf/产品流传单A4.grf'),
          data: res.data
        }

        webapp_ws_ajax_run(args)
      }
    },

    // 获取页面高度
    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
        }
      })
    },
@@ -1028,7 +1205,116 @@
    },
    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(() => {
            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 // 滚动条位于最顶部
          })
        }
      })
    },
    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) {
      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() {
      // 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.title = ''

      this.tableDataPrint = []
    },
    // 补打按钮
    supplementClick() {
      this.dialogVisibleTask = false
      this.handlePrint()
    }

  }
}
</script>
@@ -1087,6 +1373,10 @@
}

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

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

@@ -1181,6 +1471,10 @@
  margin-bottom: 0;
}

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

::v-deep .el-input__inner:focus {
  border-color: $main_color;
}
@@ -1206,4 +1500,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>