1.文件替换

loulijun2021

2024-05-07 dc1879fd0713eed48b2c75af5f29a1085291d276

 src/views/qualityManager/processCheck.vue

@@ -0,0 +1,802 @@
<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: 'Zzjg',

  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
      }
    }
  },

  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

      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>