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

loulijun2021

2022-08-05 d33eacc1f85ac3a736b33ba4713a19aae466d711

 src/views/zlgl/gxjy.vue

@@ -15,7 +15,7 @@
          />
        </div>
        <!--        六项信息      -->
        <div style="display:flex;margin-top: 10px;align-items: center; line-height: 50px">
        <div v-if="!isIpad" style="display:flex;margin-top: 10px;align-items: center; line-height: 50px">
          <div style="display: flex;">
            <div style="display: flex;margin-right: 50px">
              <div style="width: 90px">工单编码：</div>
@@ -39,14 +39,46 @@
          <div style=" display: flex;margin-left: 30px;">
            <div style="display: flex;margin-right: 50px">
              <div style="width: 90px">工序编码：</div>
              <div>{{ form.stepcode }}</div>
              <div style="width: 100px">{{ form.stepcode }}</div>
            </div>
            <div style="display: flex;">
              <div style="width: 90px">工序名称：</div>
              <div>{{ form.stepname }}</div>
              <div style="width: 100px">{{ form.stepname }}</div>
            </div>
          </div>
        </div>
        <div v-if="isIpad" style="display:flex;margin-top: 10px;align-items: center;line-height: 30px; flex-direction: column">
          <div style="display: flex; justify-content: flex-start;width: 100%">
            <div style="display: flex;margin-right: 50px">
              <div style="width: 90px">工单编码：</div>
              <div style="width: 200px">{{ form.wo_code }}</div>
            </div>
            <div style="display: flex;margin-right: 50px">
              <div style="width: 90px">产品编码：</div>
              <div style="width: 200px">{{ form.partcode }}</div>
            </div>
            <div style="display: flex;">
              <div style="width: 90px">产品名称：</div>
              <div style="width: 200px">{{ form.partname }}</div>
            </div>
          </div>

          <div style=" display: flex; justify-content: flex-start;margin-top: 10px;width: 100%">
            <div style="display: flex;margin-right: 50px">
              <div style="width: 90px">产品规格：</div>
              <div style="width: 200px">{{ form.partspec }}</div>
            </div>
            <div style="display: flex;margin-right: 50px">
              <div style="width: 90px">工序编码：</div>
              <div style="width: 200px">{{ form.stepcode }}</div>
            </div>
            <div style="display: flex;">
              <div style="width: 90px">工序名称：</div>
              <div style="width: 200px">{{ form.stepname }}</div>
            </div>
          </div>
        </div>

        <div style="margin: 15px 0;font-size: 14px">
          <i class="el-icon-s-operation" style="color:#42b983; margin-right: 5px" />检验标准信息
        </div>
@@ -266,6 +298,7 @@
  // },
  data() {
    return {
      isIpad: false,
      mainHeight: 0,
      tableHeight: 0,
      form: { // 工序
@@ -299,9 +332,7 @@
    }
  },
  created() {
    this.getMesOrderStepCheckSelect()
    this.getMesOrderSelectUser()
    this.getJYSelectArr()
    this.handleRequest()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
@@ -310,6 +341,15 @@
    this.getFocus()
  },
  methods: {
    handleRequest() {
      this.getMesOrderStepCheckSelect().then(res => {
        if (res.code === '200') {
          this.getMesOrderSelectUser()
          this.getJYSelectArr()
        }
      })
    },

    // 获取聚焦
    getFocus() {
      this.$nextTick(() => {
@@ -318,8 +358,9 @@
    },
    // 获取检验标准下拉数组
    async getMesOrderStepCheckSelect() {
      const { data: res } = await MesOrderStepCheckSelect()
      this.checkStandardSelect = res
      const res = await MesOrderStepCheckSelect()
      this.checkStandardSelect = res.data
      return { code: res.code }
    },
    // 获取检验人员下拉
    async getMesOrderSelectUser() {
@@ -577,6 +618,8 @@
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100

        this.isIpad = window.innerHeight < 769
      })
    }
  }