1.在缓存模式下 页面切换会请求接口

小小儁爺

2024-12-30 ff2f7d7bad0132c130c305364a863ff446e926b2

 src/views/qualityManager/processCheck.vue

@@ -1,802 +1,807 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}" style="background-color: #eaecef">



      <div

        style="background-color: #f8f8fa;margin: 10px 0;

         overflow-y:auto;overflow-x: hidden;

        display: flex;flex-direction: column"

        :style="{height:mainHeight+'px'}"

      >

        <div class="content1">

          <div>

            <i class="el-icon-s-operation" style="font-size: 14px" :style="{color:$store.state.settings.theme}" />

          </div>

          <div class="title">

            扫描信息

          </div>

        </div>



        <div class="content2">

          <el-form :inline="true" label-width="80px">

            <el-form-item label="检验类型">

              <el-select

                v-model="form.checktype"

                style="width: 160px;"

                placeholder="请选择"

                filterable

              >

                <el-option

                  v-for="item in checktypeArr"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>

            </el-form-item>

            <el-form-item label="扫码条码">

              <el-input

                v-model="form.orderstepqrcode"

                name="GXproduceCode"

                style="width: 250px"

                placeholder="请扫码工单工序码"

                @keyup.enter.native="enterNative"

              />

            </el-form-item>

          </el-form>

        </div>



        <div class="content1">

          <div>

            <i class="el-icon-s-operation" style="font-size: 14px" :style="{color:$store.state.settings.theme}" />

          </div>

          <div class="title">

            工单信息

          </div>

        </div>

        <div class="content2" style="width: 60%;margin-left: 30px;">

          <div class="orderMsg">单据编号：{{ form.wocode }}</div>

          <div class="orderMsg">物料编码：{{ form.partcode }}</div>

          <div class="orderMsg">物料名称：{{ form.partname }}</div>

        </div>

        <div class="content2" style="width: 60%;margin-left: 30px;">

          <div class="orderMsg">物料规格：{{ form.partspec }}</div>

          <div class="orderMsg">工序编码：{{ form.stepcode }}</div>

          <div class="orderMsg">工序名称：{{ form.stepname }}</div>

        </div>



        <div class="content1">

          <div>

            <i class="el-icon-s-operation" style="font-size: 14px" :style="{color:$store.state.settings.theme}" />

          </div>

          <div class="title">

            质检方案

          </div>

        </div>

        <div class="content2" style="width: 60%;margin-left: 30px;">

          <div class="orderMsg">方案名称：{{ form.checkstandname }}</div>

          <div class="orderMsg">抽样方式：{{

            form.sampmethod === 'FIXED' ? '固时抽检' : form.sampmethod === 'SCARE' ? '比例抽检' : ''

          }}

          </div>

        </div>

        <div class="content2" style="width: 60%;margin-left: 30px;">

          <div class="orderMsg">报工数量：{{ form.good_qty }}</div>

          <div class="orderMsg">样本数量：

            <el-input-number

              v-if="form.good_qty"

              v-model="form.sampscare"

              :max="form.good_qty"

              :min="1"

              size="medium"

              @change="numberChange"

            />

          </div>

        </div>



        <div

          v-if="checkItemArr.length>0"

          class="content1"

        >

          <div>

            <i class="el-icon-s-operation" style="font-size: 14px" :style="{color:$store.state.settings.theme}" />

          </div>

          <div class="title">

            检验项目

          </div>

        </div>

        <div

          v-if="form.sampscare!==1&&checkItemArr.length>0"

          class="content2"

          style="width: 60%;"

        >

          <el-link :underline="false" :disabled="!(stepActive>0)" style="width: 60px;margin-top: 5px" @click="pre">上一件

          </el-link>

          <el-steps :active="stepActive" style="width: 70%;margin:0 10px;" finish-status="success">

            <el-step v-for="item in form.sampscare" :key="item" title="" />

          </el-steps>

          <el-link

            :underline="false"

            :disabled="!(stepActive < form.sampscare-1)"

            style="width: 60px;margin-top: 5px"

            @click="next"

          >下一件

          </el-link>

        </div>



        <div

          class="content2"

          style="flex-direction: column;justify-content:flex-start;width: 480px;margin-top: 10px;"

        >



          <div

            v-for="(item,index) in checkItemArr"

            v-if="stepActive+1===item.checkNumber"

            :key="item.code+(stepActive+1).toString()"

            :style="{borderBottom:(index+1)%checkItemArr.map(i=>i.checkNumber===1).filter(i=>i).length!==0?`1px solid rgba(48,49,51,0.2)`:''}"

            class="checkItem"

          >



            <div style="display: flex;justify-content: space-between;align-items: center">

              <div style="display: flex;width: 300px;">

                <div class="serialNumber">{{ item.stepcheckitem_seq }}</div>

                <div style="display: flex;align-items: center">{{ item.name }}</div>

              </div>



              <div v-show="item.numberjudge==='N'" style="width: 150px;display: flex;padding-left: 20px">

                <el-button

                  type="primary"

                  size="mini"

                  :plain="!item.check_result"

                  @click="checkResultClick('OK',item)"

                >合格

                </el-button>

                <el-button

                  type="warning"

                  size="mini"

                  :plain="item.check_result"

                  @click="checkResultClick('NG',item)"

                >不合格

                </el-button>

              </div>

              <div v-show="item.numberjudge!=='N'" style="width: 150px;" />

            </div>



            <div style="display: flex;margin-bottom: 5px">

              <div style="display: flex;flex-direction: column">

                <div v-if="item.standvalue" class="itemTitle">标准值</div>

                <div v-if="item.uppervalue" class="itemTitle">上限值</div>

                <div v-if="item.lowervalue" class="itemTitle">下限值</div>

                <div v-if="item.stepcheckitem_desc" class="itemTitle">描述</div>

                <div v-if="item.numberjudge!=='N'" class="itemTitle">实测值

                  <el-input

                    v-model="item.real_value"

                    size="mini"

                    oninput="value=value.replace(/[^0-9.]/g,'')"

                    style="width: 100px;margin-left: 5px"

                    @input="val=>inputChange(val,item)"

                  />

                </div>

              </div>

              <div style="display: flex;flex-direction: column">

                <div v-if="item.standvalue" class="itemContent">{{ item.standvalue }}</div>

                <div v-if="item.uppervalue" class="itemContent">{{ item.uppervalue }}</div>

                <div v-if="item.lowervalue" class="itemContent">{{ item.lowervalue }}</div>

                <div v-if="item.stepcheckitem_desc" class="itemContent">{{ item.stepcheckitem_desc }}</div>



                <div v-show="item.numberjudge!=='N'" class="itemContent" style="width: 150px;display: flex">

                  <el-button

                    type="primary"

                    size="mini"

                    :disabled="item.required==='Y'&&!item.real_value"

                    :plain="!item.check_result"

                    @click="checkResultClick('OK',item)"

                  >合格

                  </el-button>

                  <el-button

                    type="warning"

                    size="mini"

                    :disabled="item.required==='Y'&&!item.real_value"

                    :plain="item.check_result"

                    @click="checkResultClick('NG',item)"

                  >

                    不合格

                  </el-button>

                </div>

              </div>

            </div>



          </div>



        </div>



        <div

          v-if="checkItemArr.filter(i=>i.check_result!=='').length===checkItemArr.length&&checkItemArr.length>0"

          class="content1"

        >

          <div>

            <i class="el-icon-s-operation" style="font-size: 14px" :style="{color:$store.state.settings.theme}" />

          </div>

          <div class="title">

            检验结果

          </div>

        </div>



        <div

          v-if="checkItemArr.filter(i=>i.check_result!=='').length===checkItemArr.length&&checkItemArr.length>0"

          class="content2"

          style="width: 60%;margin-left: 30px;"

        >

          <div class="orderMsg2">样本数量：{{ form.sampscare }}</div>

          <div class="orderMsg2">合格数量：{{ form.goodqty }}</div>

          <div class="orderMsg2">不合格数量：{{ form.ngqty }}</div>



          <div style="width: 290px;display: flex;align-items: center" class="resultButton">

            <div style="width: 70px;">判定结果：</div>

            <el-button type="primary" size="medium" :plain="!check_result" @click="check_result=true">合格</el-button>

            <el-button type="warning" size="medium" :plain="check_result" @click="check_result=false">不合格</el-button>

          </div>

        </div>



        <div

          v-if="checkItemArr.filter(i=>i.check_result!=='').length===checkItemArr.length&&checkItemArr.length>0"

          class="content2   submitButton"

          style="margin-top: 10px;margin-bottom: 10px;"

        >

          <el-button

            v-waves

            type="primary"

            @click="submitButton"

          >提交

          </el-button>

        </div>



      </div>



    </div>

  </div>

</template>



<script>

import waves from '@/directive/waves'

import $ from 'jquery'

import { MesOrderStepCheckItemList, MesOrderStepCheckSearch, SaveMesOrderStepCheckItem } from '@/api/QualityManagement'

import { getCookie } from '@/utils/auth'



export default {

  name: 'ProcessCheck',



  directives: { waves },

  data() {

    return {

      mouseHoverType: 'mouseout',

      isExpandForm: false,

      mainHeight: 0,

      tableHeight: 0,



      form: {

        orderstepqrcode: '', // 扫描工序二维码信息

        checktype: 'FirstCheck',



        wocode: '',

        partcode: '',

        partname: '',

        partspec: '',

        stepcode: '',

        stepname: '',

        checkstandcode: '',

        checkstandname: '',

        check_type: '',

        sampmethod: '', // FIXED(固时抽检)  SCARE(比例抽检)

        sampscare: '',

        qualitystatus: '',

        good_qty: '', // 指的报工数量

        sampleqty: '',

        goodqty: '', // 合格数量

        ngqty: '', // 不良数量

        // checkitemcont: [],



        username: getCookie('admin')



      },

      checktypeArr: [

        { code: 'FirstCheck', name: '首检' },

        { code: 'PatroCheck', name: '巡检' },

        { code: 'EndCheck', name: '完工检' }

      ],

      stepActive: 0, // 当前处于第几件



      checkItemArr: [],

      check_result: ''



    }

  },



  watch: {

    'checkItemArr': {

      deep: true, // 深度监听时  监听到属性              当不为深度监听时，可监听长度

      handler: function(val) {

        // do something with the new and old value of myArray

        this.form.goodqty = 0

        for (var i = 0; i < this.form.sampscare; i++) {

          const flag = this.checkItemArr.filter(j => j.checkNumber === i + 1).every(j => j.check_result)

          if (flag) {

            this.form.goodqty++

          }

        }

        this.form.ngqty = this.form.sampscare - this.form.goodqty

      }

    }

  },



  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {



  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()



    this.getFocus()

  },

  methods: {

    // 获取聚焦

    getFocus() {

      this.$nextTick(() => {

        $('input[name=\'GXproduceCode\']')[0].focus()

      })

    },

    async enterNative() {

      const data = {

        orderstepqrcode: this.form.orderstepqrcode,

        checktype: this.form.checktype,

        stu_torgcode: getCookie('stu_torgcode')

      }

      const { data: res } = await MesOrderStepCheckSearch(data)

      this.form.wocode = res.labcont[0].wo_code

      this.form.partcode = res.labcont[0].partcode

      this.form.partname = res.labcont[0].partname

      this.form.partspec = res.labcont[0].partspec ? res.labcont[0].partspec : '/'

      this.form.stepcode = res.labcont[0].stepcode

      this.form.stepname = res.labcont[0].stepname

      this.form.good_qty = res.labcont[0].good_qty



      this.form.checkstandcode = res.chekstand[0].checkstandcode

      this.form.checkstandname = res.chekstand[0].checkstandname

      this.form.sampmethod = res.chekstand[0].sampmethod



      this.form.sampscare = res.chekstand[0].sampmethod === 'FIXED' ? res.chekstand[0].sampscare

        : res.labcont[0].good_qty * res.chekstand[0].sampscare / 100

      this.form.sampscare = this.form.sampscare <= this.form.good_qty ? this.form.sampscare : this.form.good_qty

      this.form.sampscare = Math.ceil(this.form.sampscare)// 向上取整

      await this.getMesOrderStepCheckItemList()

    },

    async getMesOrderStepCheckItemList() {

      const { data: res } = await MesOrderStepCheckItemList({ checkstandcode: this.form.checkstandcode })

      // this.checkItemArr = res

      this.checkItemArr = []

      for (let i = 0; i < this.form.sampscare; i++) {

        res.forEach(j => {

          this.checkItemArr.push({

            checkNumber: i + 1,

            stepcheckitem_seq: j.stepcheckitem_seq,

            name: j.name,

            code: j.code,

            standvalue: j.standvalue,

            lowervalue: j.lowervalue,

            uppervalue: j.uppervalue,



            unit: j.unit,

            stepcheckitem_desc: j.stepcheckitem_desc,

            required: j.required, // 是否必填

            numberjudge: j.numberjudge, // 数值判断

            real_value: '',

            check_result: j.numberjudge === 'Y' ? '' : true

          })

        })

      }



      if (this.checkItemArr.every(i => i.check_result)) {

        this.check_result = true

      } else {

        this.check_result = ''

      }

    },



    numberChange(currentValue, oldValue) {

      const t = this.checkItemArr.filter(i => i.checkNumber === 1)



      // 件数变少时执行

      if (currentValue < this.checkItemArr.length / t.length) {

        this.checkItemArr.reverse()

        this.checkItemArr.splice(0, t.length * (oldValue - currentValue))

        this.checkItemArr.reverse()



        this.stepActive = currentValue - 1

      }

      // 件数变多时执行

      if (currentValue > this.checkItemArr.length / t.length) {

        for (let i = currentValue; i > oldValue; i--) {

          t.forEach(j => {

            this.checkItemArr.push({

              checkNumber: i,

              name: j.name,

              code: j.code,

              standvalue: j.standvalue,

              lowervalue: j.lowervalue,

              uppervalue: j.uppervalue,

              stepcheckitem_seq: j.stepcheckitem_seq,

              unit: j.unit,

              stepcheckitem_desc: j.stepcheckitem_desc,

              required: j.required, // 是否必填

              numberjudge: j.numberjudge, // 数值判断

              real_value: '',

              check_result: j.numberjudge === 'Y' ? '' : true

            })

          })

        }

        this.checkItemArr.sort((a, b) => a.checkNumber - b.checkNumber)

      }

    },



    pre() {

      if (this.stepActive > 0) {

        this.stepActive--

      }

    },

    next() {

      if (this.stepActive < this.form.sampscare) {

        this.stepActive++

      }

    },



    inputChange(val, item) {

      if (val !== '') {

        if (item.numberjudge === 'Y') { // 如果需要进行数值判断

          if (item.uppervalue === '' && item.lowervalue === '') { // 上限值为空，下限值为空

            item.check_result = parseFloat(val) === parseFloat(item.standvalue)

          }



          if (item.uppervalue !== '' && item.lowervalue !== '') { // 上限值不为空，下限值不为空

            item.check_result = parseFloat(val) >= parseFloat(item.lowervalue) && parseFloat(val) <=

              parseFloat(item.uppervalue)

          }



          if (item.uppervalue !== '' && item.lowervalue === '') { // 上限值不为空，下限值为空

            item.check_result = parseFloat(val) <= parseFloat(item.uppervalue)

          }



          if (item.uppervalue === '' && item.lowervalue !== '') { // 上限值为空，下限值不为空

            item.check_result = parseFloat(val) >= parseFloat(item.lowervalue)

          }

        }

      }



      if (val === '') {

        item.check_result = ''

      }



      this.check_result = !!this.checkItemArr.every(i => i.check_result)

    },



    checkResultClick(val, item) {

      item.check_result = val === 'OK'



      if (this.checkItemArr.filter(i => i.check_result !== '').length === this.checkItemArr.length) {

        this.check_result = !!this.checkItemArr.every(i => i.check_result)

      }

    },



    submitButton() {

      this.$confirm('是否确认提交?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        const checkitemcont = []

        this.checkItemArr.forEach((i, index) => {

          checkitemcont.push({

            checknum: i.checkNumber + '/' + this.checkItemArr.length / this

              .checkItemArr.filter(j => j.checkNumber === 1).length,

            checkiem_seq: i.stepcheckitem_seq,

            checkitem_code: i.code,

            checkitem_name: i.name,

            check_value: i.real_value ? i.real_value : '',

            check_result: i.check_result ? 'OK' : 'NG',

            checkitem_descr: ''

          })

        })



        const data = {

          stu_torgcode: getCookie('stu_torgcode'),

          wocode: this.form.wocode,

          partcode: this.form.partcode,

          stepcode: this.form.stepcode,

          checkstandcode: this.form.checkstandcode,

          check_type: this.form.checktype,

          sampmethod: this.form.sampmethod,

          qualitystatus: this.check_result ? 'OK' : 'NG',

          good_qty: this.form.good_qty,

          sampleqty: this.form.sampscare,

          goodqty: this.form.goodqty,

          ngqty: this.form.ngqty,

          admin: this.form.username,

          checkitemcont

        }



        SaveMesOrderStepCheckItem(data).then(res => {

          if (res.code === '200') {

            this.form.orderstepqrcode = ''



            this.form.wocode = ''

            this.form.partcode = ''

            this.form.partname = ''

            this.form.partspec = ''

            this.form.stepcode = ''

            this.form.stepname = ''

            this.form.checkstandcode = ''

            this.form.checkstandname = ''

            this.form.check_type = ''

            this.form.sampmethod = ''// FIXED(固时抽检)  SCARE(比例抽检)

            this.form.sampscare = ''

            this.form.qualitystatus = ''

            this.form.good_qty = '' // 指的报工数量

            this.form.sampleqty = ''

            this.form.goodqty = '' // 合格数量

            this.form.ngqty = '' // 不良数量

            this.stepActive = 0

            this.checkItemArr = []

            this.check_result = ''

            this.$message.success('检验成功！')

            this.getFocus()

          }

        })

      })

    },



    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 255

      })

    },

    tableRowClassName({ row, rowIndex }) {

      return 'custom-row'

    }

  }

}

</script>



<!--公共页面样式-->

<style lang="scss" scoped>

$main_color: #42b983;

::v-deep .el-button--text {

  font-size: 14px;

  cursor: pointer;

}



.el-icon-share, .el-icon-delete, .el-icon-edit-outline {

  color: $main_color;

  cursor: pointer;

}



.el-icon-edit-outline {

  margin-right: 15px;

}



::v-deep .el-button--primary, .el-button--warning, .el-button--default, .el-button--info {

  //height: 34px;

  //display: flex;

  //align-items: center;

  //padding: 0 15px;

  width: 58px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.submitButton {

  ::v-deep .el-button--primary {

    width: 160px;

    letter-spacing: 10px;

    padding-left: 25px;

    font-size: 18px;

    //display: flex;

    //justify-content: center;

    //align-items: center;

  }

}



.resultButton {

  ::v-deep .el-button--primary {

    width: 100px;

    letter-spacing: 4px;

    padding-left: 22px;

  }



  ::v-deep .el-button--warning {

    width: 100px;

    letter-spacing: 4px;

    padding-left: 22px;

  }

}



::v-deep .el-button--default {

  background-color: #f8f8fa;

  border: none;

}



::v-deep .el-input__inner {

  height: 34px;

  line-height: 34px;

  //color: #a7a7a7;

}



::v-deep .el-dialog__body {

  padding: 20px 100px !important;

}



::v-deep .dialogVisibleRoles .el-dialog__body {

  padding: 20px 20px !important;

}



::v-deep .importPickerClass .el-dialog__body {

  padding: 20px 20px !important;

}



::v-deep .el-dialog__footer {

  display: flex;

  justify-content: flex-end;

}



::v-deep .el-table .caret-wrapper {

  transform: scale(0.8);

}



::v-deep .cell {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



::v-deep .el-table::before {

  height: 0;

}



::v-deep .el-table__body-wrapper {

  background-color: #f8f8fa;

}



::v-deep .el-table__body .el-table__row.hover-row td {

  background-color: #eaecef;

}



::v-deep .el-form--inline .el-form-item__label {

  //color: #a7a7a7;

  //font-size: 16px;

}



.body ::v-deep .el-divider {

  border: 1px solid #eee;

  width: 99%;

  margin: 10px auto;

}



.body ::v-deep .el-form-item {

  margin-bottom: 0;

}



.userDialogVisible ::v-deep .el-form-item {

  margin-bottom: 0;

}



::v-deep .el-select__caret {

  display: flex;

  align-items: center;

  justify-content: center;

}



.tableFixed {

  ::v-deep .el-table__fixed-right {

    height: 100% !important;

  }



  ::v-deep .el-table__fixed {

    height: 100% !important;

  }

}

</style>



<style lang="scss" scoped>

.content1 {

  display: flex;

  align-items: center;

  margin: 10px 0 0 10px;



  .title {

    font-size: 14px;

    font-weight: bold;

    margin-left: 5px;

  }

}



.content2 {

  margin: 10px 0 0 20px;

  display: flex;

  font-size: 14px;

  width: 100%;

  align-items: center;

}



.orderMsg {

  width: 33.33%;

  display: flex;

  align-items: center;

}



::v-deep .el-input-number--medium {

  line-height: 32px;

  width: 120px;

}



.checkItem {

  display: flex;

  justify-content: space-between;

  min-height: 36px;



  align-items: center;

  flex-direction: column;

  margin-top: 5px;

}



.serialNumber {

  width: 20px;

  height: 20px;

  border-radius: 50%;

  background-color: #42B983;

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: 10px;

}



.itemTitle {

  width: 300px;

  padding-left: 40px;

  height: 26px;

  color: #909399;

  display: flex;

  align-items: center;



  ::v-deep .el-input--mini {

    line-height: 24px;

    height: 24px;

  }



  ::v-deep .el-input__inner {

    line-height: 24px;

    height: 24px;

  }

}



.itemContent {

  width: 150px;

  height: 26px;

  padding-left: 20px;

  display: flex;

  align-items: center;



}



.orderMsg2 {

  width: 200px;

}

</style>



<style>



.el-table .custom-row {

  background: #f8f8fa;

}

</style>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}" style="background-color: #eaecef">

      <div
        style="background-color: #f8f8fa;margin: 10px 0;
         overflow-y:auto;overflow-x: hidden;
        display: flex;flex-direction: column"
        :style="{height:mainHeight+'px'}"
      >
        <div class="content1">
          <div>
            <i class="el-icon-s-operation" style="font-size: 14px" :style="{color:$store.state.settings.theme}" />
          </div>
          <div class="title">
            扫描信息
          </div>
        </div>

        <div class="content2">
          <el-form :inline="true" label-width="80px">
            <el-form-item label="检验类型">
              <el-select
                v-model="form.checktype"
                style="width: 160px;"
                placeholder="请选择"
                filterable
              >
                <el-option
                  v-for="item in checktypeArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="扫码条码">
              <el-input
                v-model="form.orderstepqrcode"
                name="GXproduceCode"
                style="width: 250px"
                placeholder="请扫码工单工序码"
                @keyup.enter.native="enterNative"
              />
            </el-form-item>
          </el-form>
        </div>

        <div class="content1">
          <div>
            <i class="el-icon-s-operation" style="font-size: 14px" :style="{color:$store.state.settings.theme}" />
          </div>
          <div class="title">
            工单信息
          </div>
        </div>
        <div class="content2" style="width: 60%;margin-left: 30px;">
          <div class="orderMsg">单据编号：{{ form.wocode }}</div>
          <div class="orderMsg">物料编码：{{ form.partcode }}</div>
          <div class="orderMsg">物料名称：{{ form.partname }}</div>
        </div>
        <div class="content2" style="width: 60%;margin-left: 30px;">
          <div class="orderMsg">物料规格：{{ form.partspec }}</div>
          <div class="orderMsg">工序编码：{{ form.stepcode }}</div>
          <div class="orderMsg">工序名称：{{ form.stepname }}</div>
        </div>

        <div class="content1">
          <div>
            <i class="el-icon-s-operation" style="font-size: 14px" :style="{color:$store.state.settings.theme}" />
          </div>
          <div class="title">
            质检方案
          </div>
        </div>
        <div class="content2" style="width: 60%;margin-left: 30px;">
          <div class="orderMsg">方案名称：{{ form.checkstandname }}</div>
          <div class="orderMsg">抽样方式：{{
            form.sampmethod === 'FIXED' ? '固时抽检' : form.sampmethod === 'SCARE' ? '比例抽检' : ''
          }}
          </div>
        </div>
        <div class="content2" style="width: 60%;margin-left: 30px;">
          <div class="orderMsg">报工数量：{{ form.good_qty }}</div>
          <div class="orderMsg">样本数量：
            <el-input-number
              v-if="form.good_qty"
              v-model="form.sampscare"
              :max="form.good_qty"
              :min="1"
              size="medium"
              @change="numberChange"
            />
          </div>
        </div>

        <div
          v-if="checkItemArr.length>0"
          class="content1"
        >
          <div>
            <i class="el-icon-s-operation" style="font-size: 14px" :style="{color:$store.state.settings.theme}" />
          </div>
          <div class="title">
            检验项目
          </div>
        </div>
        <div
          v-if="form.sampscare!==1&&checkItemArr.length>0"
          class="content2"
          style="width: 60%;"
        >
          <el-link :underline="false" :disabled="!(stepActive>0)" style="width: 60px;margin-top: 5px" @click="pre">上一件
          </el-link>
          <el-steps :active="stepActive" style="width: 70%;margin:0 10px;" finish-status="success">
            <el-step v-for="item in form.sampscare" :key="item" title="" />
          </el-steps>
          <el-link
            :underline="false"
            :disabled="!(stepActive < form.sampscare-1)"
            style="width: 60px;margin-top: 5px"
            @click="next"
          >下一件
          </el-link>
        </div>

        <div
          class="content2"
          style="flex-direction: column;justify-content:flex-start;width: 480px;margin-top: 10px;"
        >

          <div
            v-for="(item,index) in checkItemArr"
            v-if="stepActive+1===item.checkNumber"
            :key="item.code+(stepActive+1).toString()"
            :style="{borderBottom:(index+1)%checkItemArr.map(i=>i.checkNumber===1).filter(i=>i).length!==0?`1px solid rgba(48,49,51,0.2)`:''}"
            class="checkItem"
          >

            <div style="display: flex;justify-content: space-between;align-items: center">
              <div style="display: flex;width: 300px;">
                <div class="serialNumber">{{ item.stepcheckitem_seq }}</div>
                <div style="display: flex;align-items: center">{{ item.name }}</div>
              </div>

              <div v-show="item.numberjudge==='N'" style="width: 150px;display: flex;padding-left: 20px">
                <el-button
                  type="primary"
                  size="mini"
                  :plain="!item.check_result"
                  @click="checkResultClick('OK',item)"
                >合格
                </el-button>
                <el-button
                  type="warning"
                  size="mini"
                  :plain="item.check_result"
                  @click="checkResultClick('NG',item)"
                >不合格
                </el-button>
              </div>
              <div v-show="item.numberjudge!=='N'" style="width: 150px;" />
            </div>

            <div style="display: flex;margin-bottom: 5px">
              <div style="display: flex;flex-direction: column">
                <div v-if="item.standvalue" class="itemTitle">标准值</div>
                <div v-if="item.uppervalue" class="itemTitle">上限值</div>
                <div v-if="item.lowervalue" class="itemTitle">下限值</div>
                <div v-if="item.stepcheckitem_desc" class="itemTitle">描述</div>
                <div v-if="item.numberjudge!=='N'" class="itemTitle">实测值
                  <el-input
                    v-model="item.real_value"
                    size="mini"
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                    style="width: 100px;margin-left: 5px"
                    @input="val=>inputChange(val,item)"
                  />
                </div>
              </div>
              <div style="display: flex;flex-direction: column">
                <div v-if="item.standvalue" class="itemContent">{{ item.standvalue }}</div>
                <div v-if="item.uppervalue" class="itemContent">{{ item.uppervalue }}</div>
                <div v-if="item.lowervalue" class="itemContent">{{ item.lowervalue }}</div>
                <div v-if="item.stepcheckitem_desc" class="itemContent">{{ item.stepcheckitem_desc }}</div>

                <div v-show="item.numberjudge!=='N'" class="itemContent" style="width: 150px;display: flex">
                  <el-button
                    type="primary"
                    size="mini"
                    :disabled="item.required==='Y'&&!item.real_value"
                    :plain="!item.check_result"
                    @click="checkResultClick('OK',item)"
                  >合格
                  </el-button>
                  <el-button
                    type="warning"
                    size="mini"
                    :disabled="item.required==='Y'&&!item.real_value"
                    :plain="item.check_result"
                    @click="checkResultClick('NG',item)"
                  >
                    不合格
                  </el-button>
                </div>
              </div>
            </div>

          </div>

        </div>

        <div
          v-if="checkItemArr.filter(i=>i.check_result!=='').length===checkItemArr.length&&checkItemArr.length>0"
          class="content1"
        >
          <div>
            <i class="el-icon-s-operation" style="font-size: 14px" :style="{color:$store.state.settings.theme}" />
          </div>
          <div class="title">
            检验结果
          </div>
        </div>

        <div
          v-if="checkItemArr.filter(i=>i.check_result!=='').length===checkItemArr.length&&checkItemArr.length>0"
          class="content2"
          style="width: 60%;margin-left: 30px;"
        >
          <div class="orderMsg2">样本数量：{{ form.sampscare }}</div>
          <div class="orderMsg2">合格数量：{{ form.goodqty }}</div>
          <div class="orderMsg2">不合格数量：{{ form.ngqty }}</div>

          <div style="width: 290px;display: flex;align-items: center" class="resultButton">
            <div style="width: 70px;">判定结果：</div>
            <el-button type="primary" size="medium" :plain="!check_result" @click="check_result=true">合格</el-button>
            <el-button type="warning" size="medium" :plain="check_result" @click="check_result=false">不合格</el-button>
          </div>
        </div>

        <div
          v-if="checkItemArr.filter(i=>i.check_result!=='').length===checkItemArr.length&&checkItemArr.length>0"
          class="content2   submitButton"
          style="margin-top: 10px;margin-bottom: 10px;"
        >
          <el-button
            v-waves
            type="primary"
            @click="submitButton"
          >提交
          </el-button>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import $ from 'jquery'
import { MesOrderStepCheckItemList, MesOrderStepCheckSearch, SaveMesOrderStepCheckItem } from '@/api/QualityManagement'
import { getCookie } from '@/utils/auth'

export default {
  name: 'ProcessCheck',

  directives: { waves },
  data() {
    return {
      mouseHoverType: 'mouseout',
      isExpandForm: false,
      mainHeight: 0,
      tableHeight: 0,

      form: {
        orderstepqrcode: '', // 扫描工序二维码信息
        checktype: 'FirstCheck',

        wocode: '',
        partcode: '',
        partname: '',
        partspec: '',
        stepcode: '',
        stepname: '',
        checkstandcode: '',
        checkstandname: '',
        check_type: '',
        sampmethod: '', // FIXED(固时抽检)  SCARE(比例抽检)
        sampscare: '',
        qualitystatus: '',
        good_qty: '', // 指的报工数量
        sampleqty: '',
        goodqty: '', // 合格数量
        ngqty: '', // 不良数量
        // checkitemcont: [],

        username: getCookie('admin')

      },
      checktypeArr: [
        { code: 'FirstCheck', name: '首检' },
        { code: 'PatroCheck', name: '巡检' },
        { code: 'EndCheck', name: '完工检' }
      ],
      stepActive: 0, // 当前处于第几件

      checkItemArr: [],
      check_result: ''

    }
  },

  watch: {
    'checkItemArr': {
      deep: true, // 深度监听时  监听到属性              当不为深度监听时，可监听长度
      handler: function(val) {
        // do something with the new and old value of myArray
        this.form.goodqty = 0
        for (var i = 0; i < this.form.sampscare; i++) {
          const flag = this.checkItemArr.filter(j => j.checkNumber === i + 1).every(j => j.check_result)
          if (flag) {
            this.form.goodqty++
          }
        }
        this.form.ngqty = this.form.sampscare - this.form.goodqty
      }
    }
  },

  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getFocus()
  },
  created() {

  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()

    this.getFocus()
  },
  methods: {
    // 获取聚焦
    getFocus() {
      this.$nextTick(() => {
        $('input[name=\'GXproduceCode\']')[0].focus()
      })
    },
    async enterNative() {
      const data = {
        orderstepqrcode: this.form.orderstepqrcode,
        checktype: this.form.checktype,
        stu_torgcode: getCookie('stu_torgcode')
      }
      const { data: res } = await MesOrderStepCheckSearch(data)
      this.form.wocode = res.labcont[0].wo_code
      this.form.partcode = res.labcont[0].partcode
      this.form.partname = res.labcont[0].partname
      this.form.partspec = res.labcont[0].partspec ? res.labcont[0].partspec : '/'
      this.form.stepcode = res.labcont[0].stepcode
      this.form.stepname = res.labcont[0].stepname
      this.form.good_qty = res.labcont[0].good_qty

      this.form.checkstandcode = res.chekstand[0].checkstandcode
      this.form.checkstandname = res.chekstand[0].checkstandname
      this.form.sampmethod = res.chekstand[0].sampmethod

      this.form.sampscare = res.chekstand[0].sampmethod === 'FIXED' ? res.chekstand[0].sampscare
        : res.labcont[0].good_qty * res.chekstand[0].sampscare / 100
      this.form.sampscare = this.form.sampscare <= this.form.good_qty ? this.form.sampscare : this.form.good_qty
      this.form.sampscare = Math.ceil(this.form.sampscare)// 向上取整
      await this.getMesOrderStepCheckItemList()
    },
    async getMesOrderStepCheckItemList() {
      const { data: res } = await MesOrderStepCheckItemList({ checkstandcode: this.form.checkstandcode })
      // this.checkItemArr = res
      this.checkItemArr = []
      for (let i = 0; i < this.form.sampscare; i++) {
        res.forEach(j => {
          this.checkItemArr.push({
            checkNumber: i + 1,
            stepcheckitem_seq: j.stepcheckitem_seq,
            name: j.name,
            code: j.code,
            standvalue: j.standvalue,
            lowervalue: j.lowervalue,
            uppervalue: j.uppervalue,

            unit: j.unit,
            stepcheckitem_desc: j.stepcheckitem_desc,
            required: j.required, // 是否必填
            numberjudge: j.numberjudge, // 数值判断
            real_value: '',
            check_result: j.numberjudge === 'Y' ? '' : true
          })
        })
      }

      if (this.checkItemArr.every(i => i.check_result)) {
        this.check_result = true
      } else {
        this.check_result = ''
      }
    },

    numberChange(currentValue, oldValue) {
      const t = this.checkItemArr.filter(i => i.checkNumber === 1)

      // 件数变少时执行
      if (currentValue < this.checkItemArr.length / t.length) {
        this.checkItemArr.reverse()
        this.checkItemArr.splice(0, t.length * (oldValue - currentValue))
        this.checkItemArr.reverse()

        this.stepActive = currentValue - 1
      }
      // 件数变多时执行
      if (currentValue > this.checkItemArr.length / t.length) {
        for (let i = currentValue; i > oldValue; i--) {
          t.forEach(j => {
            this.checkItemArr.push({
              checkNumber: i,
              name: j.name,
              code: j.code,
              standvalue: j.standvalue,
              lowervalue: j.lowervalue,
              uppervalue: j.uppervalue,
              stepcheckitem_seq: j.stepcheckitem_seq,
              unit: j.unit,
              stepcheckitem_desc: j.stepcheckitem_desc,
              required: j.required, // 是否必填
              numberjudge: j.numberjudge, // 数值判断
              real_value: '',
              check_result: j.numberjudge === 'Y' ? '' : true
            })
          })
        }
        this.checkItemArr.sort((a, b) => a.checkNumber - b.checkNumber)
      }
    },

    pre() {
      if (this.stepActive > 0) {
        this.stepActive--
      }
    },
    next() {
      if (this.stepActive < this.form.sampscare) {
        this.stepActive++
      }
    },

    inputChange(val, item) {
      if (val !== '') {
        if (item.numberjudge === 'Y') { // 如果需要进行数值判断
          if (item.uppervalue === '' && item.lowervalue === '') { // 上限值为空，下限值为空
            item.check_result = parseFloat(val) === parseFloat(item.standvalue)
          }

          if (item.uppervalue !== '' && item.lowervalue !== '') { // 上限值不为空，下限值不为空
            item.check_result = parseFloat(val) >= parseFloat(item.lowervalue) && parseFloat(val) <=
              parseFloat(item.uppervalue)
          }

          if (item.uppervalue !== '' && item.lowervalue === '') { // 上限值不为空，下限值为空
            item.check_result = parseFloat(val) <= parseFloat(item.uppervalue)
          }

          if (item.uppervalue === '' && item.lowervalue !== '') { // 上限值为空，下限值不为空
            item.check_result = parseFloat(val) >= parseFloat(item.lowervalue)
          }
        }
      }

      if (val === '') {
        item.check_result = ''
      }

      this.check_result = !!this.checkItemArr.every(i => i.check_result)
    },

    checkResultClick(val, item) {
      item.check_result = val === 'OK'

      if (this.checkItemArr.filter(i => i.check_result !== '').length === this.checkItemArr.length) {
        this.check_result = !!this.checkItemArr.every(i => i.check_result)
      }
    },

    submitButton() {
      this.$confirm('是否确认提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const checkitemcont = []
        this.checkItemArr.forEach((i, index) => {
          checkitemcont.push({
            checknum: i.checkNumber + '/' + this.checkItemArr.length / this
              .checkItemArr.filter(j => j.checkNumber === 1).length,
            checkiem_seq: i.stepcheckitem_seq,
            checkitem_code: i.code,
            checkitem_name: i.name,
            check_value: i.real_value ? i.real_value : '',
            check_result: i.check_result ? 'OK' : 'NG',
            checkitem_descr: ''
          })
        })

        const data = {
          stu_torgcode: getCookie('stu_torgcode'),
          wocode: this.form.wocode,
          partcode: this.form.partcode,
          stepcode: this.form.stepcode,
          checkstandcode: this.form.checkstandcode,
          check_type: this.form.checktype,
          sampmethod: this.form.sampmethod,
          qualitystatus: this.check_result ? 'OK' : 'NG',
          good_qty: this.form.good_qty,
          sampleqty: this.form.sampscare,
          goodqty: this.form.goodqty,
          ngqty: this.form.ngqty,
          admin: this.form.username,
          checkitemcont
        }

        SaveMesOrderStepCheckItem(data).then(res => {
          if (res.code === '200') {
            this.form.orderstepqrcode = ''

            this.form.wocode = ''
            this.form.partcode = ''
            this.form.partname = ''
            this.form.partspec = ''
            this.form.stepcode = ''
            this.form.stepname = ''
            this.form.checkstandcode = ''
            this.form.checkstandname = ''
            this.form.check_type = ''
            this.form.sampmethod = ''// FIXED(固时抽检)  SCARE(比例抽检)
            this.form.sampscare = ''
            this.form.qualitystatus = ''
            this.form.good_qty = '' // 指的报工数量
            this.form.sampleqty = ''
            this.form.goodqty = '' // 合格数量
            this.form.ngqty = '' // 不良数量
            this.stepActive = 0
            this.checkItemArr = []
            this.check_result = ''
            this.$message.success('检验成功！')
            this.getFocus()
          }
        })
      })
    },

    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 255
      })
    },
    tableRowClassName({ row, rowIndex }) {
      return 'custom-row'
    }
  }
}
</script>

<!--公共页面样式-->
<style lang="scss" scoped>
$main_color: #42b983;
::v-deep .el-button--text {
  font-size: 14px;
  cursor: pointer;
}

.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
  color: $main_color;
  cursor: pointer;
}

.el-icon-edit-outline {
  margin-right: 15px;
}

::v-deep .el-button--primary, .el-button--warning, .el-button--default, .el-button--info {
  //height: 34px;
  //display: flex;
  //align-items: center;
  //padding: 0 15px;
  width: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submitButton {
  ::v-deep .el-button--primary {
    width: 160px;
    letter-spacing: 10px;
    padding-left: 25px;
    font-size: 18px;
    //display: flex;
    //justify-content: center;
    //align-items: center;
  }
}

.resultButton {
  ::v-deep .el-button--primary {
    width: 100px;
    letter-spacing: 4px;
    padding-left: 22px;
  }

  ::v-deep .el-button--warning {
    width: 100px;
    letter-spacing: 4px;
    padding-left: 22px;
  }
}

::v-deep .el-button--default {
  background-color: #f8f8fa;
  border: none;
}

::v-deep .el-input__inner {
  height: 34px;
  line-height: 34px;
  //color: #a7a7a7;
}

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

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

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

::v-deep .el-dialog__footer {
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-table .caret-wrapper {
  transform: scale(0.8);
}

::v-deep .cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

::v-deep .el-table__body-wrapper {
  background-color: #f8f8fa;
}

::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: #eaecef;
}

::v-deep .el-form--inline .el-form-item__label {
  //color: #a7a7a7;
  //font-size: 16px;
}

.body ::v-deep .el-divider {
  border: 1px solid #eee;
  width: 99%;
  margin: 10px auto;
}

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

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

::v-deep .el-select__caret {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tableFixed {
  ::v-deep .el-table__fixed-right {
    height: 100% !important;
  }

  ::v-deep .el-table__fixed {
    height: 100% !important;
  }
}
</style>

<style lang="scss" scoped>
.content1 {
  display: flex;
  align-items: center;
  margin: 10px 0 0 10px;

  .title {
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
  }
}

.content2 {
  margin: 10px 0 0 20px;
  display: flex;
  font-size: 14px;
  width: 100%;
  align-items: center;
}

.orderMsg {
  width: 33.33%;
  display: flex;
  align-items: center;
}

::v-deep .el-input-number--medium {
  line-height: 32px;
  width: 120px;
}

.checkItem {
  display: flex;
  justify-content: space-between;
  min-height: 36px;

  align-items: center;
  flex-direction: column;
  margin-top: 5px;
}

.serialNumber {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #42B983;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.itemTitle {
  width: 300px;
  padding-left: 40px;
  height: 26px;
  color: #909399;
  display: flex;
  align-items: center;

  ::v-deep .el-input--mini {
    line-height: 24px;
    height: 24px;
  }

  ::v-deep .el-input__inner {
    line-height: 24px;
    height: 24px;
  }
}

.itemContent {
  width: 150px;
  height: 26px;
  padding-left: 20px;
  display: flex;
  align-items: center;

}

.orderMsg2 {
  width: 200px;
}
</style>

<style>

.el-table .custom-row {
  background: #f8f8fa;
}
</style>