first-add

吴健

4 天以前 105d6b807d69eb95b3426f5cf6e87a8ff7b0611c

 billion-ui/src/views/main/bq/workstationOperation/index.vue

@@ -1,202 +1,99 @@
<template>
  <div class="app-container">
    <el-row :gutter="5">
      <el-col :span="6">
        <el-card class="box-card">
          <div class="card-item">
            <span class="label">工位编号:</span>
            <el-select v-model="locationCode" placeholder="请选择" class="content-item" @change="handleLocationChange">
              <el-option
                v-for="item in locationCodeOptions"
                :key="item.locationCode"
                :label="item.locationCode"
                :value="item.locationCode">
              </el-option>
            </el-select>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div class="card-item">
            <span class="label">样机编号:</span>
            <span class="content-item">{{prototypeNumber}}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div class="card-item">
            <span class="label">物料编号:</span>
            <el-input class="content-item" v-model="materialCode" placeholder="请输入物料编号" @keyup.enter.native="handleMaterialCodeEnter"></el-input>
            <el-button @click="test1" type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <el-table
            ref="formulaTable"
            :data="sortedFormulaData"
            height="350"
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column show-overflow-tooltip label="工位编号" align="center" prop="locationCode" />
            <el-table-column show-overflow-tooltip label="产品编号" align="center" prop="productCode" />
            <el-table-column show-overflow-tooltip label="操作内容" align="center" prop="operationContent" />
            <el-table-column show-overflow-tooltip label="物料编码" align="center" prop="materialCode" />
            <el-table-column show-overflow-tooltip label="采集值" align="center" prop="collectData" />
            <el-table-column show-overflow-tooltip label="结果" align="center" prop="results" />
          </el-table>
          <div slot="header" class="clearfix">
            <span>扫码下线</span>
          </div>
          <el-form ref="form" :model="form" :rules="rules" label-width="100px" @submit.native.prevent>
            <el-form-item label="序列号" prop="SNCode">
              <input
                v-model="form.SNCode"
                ref="inputdata"
                placeholder="请输入序列号"
                style="width: 100%; height: 40px; font-size: 30px"
              />
            </el-form-item>

          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <span>缺陷记录:</span>
          <el-input style="width: 70%" v-model="defectInformation" placeholder="请输入缺陷记录"></el-input>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { listLocationInfo, getLocationInfo, delLocationInfo, addLocationInfo, updateLocationInfo } from "@/api/main/bs/locationInfo";
import {addInfo, delInfo, getInfo, listInfo, updateCollectData, updateInfo} from "@/api/main/bs/formulaChildinfo";
import {addPassStationCollection} from "@/api/main/da/stationCollection";

export default {
  name: "workstationOperation",
  data() {
    return {
      printInfoData: {
        softwareVersion: 'SW001.001', //软件版本号
        hardwareVersion: 'HW001.001', //硬件版本号
        printModel: 'H2155D', //型号
        partNumber: '0', //零部件号
        supplierCode: '993983', //供应商编码
      scannerFlag: false,
      form: {
        SNCode: '',
        LocationCode: 'OP450'
      },
      locationCode: '',
      prototypeNumber: '',
      materialCode: '',
      defectInformation: '',
      locationCodeOptions: [],
      formulaTableData: [],
      isFirstEnter: true
    }
      rules: {
        SNCode: [
          { required: true, message: '请输入序列号', trigger: 'blur' }
        ]
  },
  created() {
    this.initLocationOptions()
  },
  computed: {
    sortedFormulaData() {
      // 对数据进行排序，OK的放在前面
      return [...this.formulaTableData].sort((a, b) => {
        if (a.results === 'OK' && b.results !== 'OK') return -1;
        if (a.results !== 'OK' && b.results === 'OK') return 1;
        return 0;
      });
    }
  },
  methods: {
    async initLocationOptions() {
      try {
        const res = await listLocationInfo()
        this.locationCodeOptions = res.rows
      } catch (error) {
        this.$message.error('获取工位列表失败')
      }
    },
    handleLocationChange(value) {
      if (!value) {
        this.prototypeNumber = ''
        this.materialCode = ''
        this.formulaTableData = []
        return
      }
      this.isFirstEnter = true
      this.prototypeNumber = ''
      this.materialCode = ''
      this.formulaTableData = []
    },
    async handleMaterialCodeEnter() {
      if (!this.locationCode) {
        this.$message.warning('请先选择工位')
        return
      }

      if (this.isFirstEnter) {
        this.prototypeNumber = this.materialCode
        this.materialCode = ''
        this.isFirstEnter = false

        try {
          const res = await listInfo({
            locationCode: this.locationCode,
            pageFlag: true,
    setFocus(){
      this.$nextTick(()=>{
        this.$refs.inputdata.focus()
          })
          console.log(res)
          this.formulaTableData = res.rows
        } catch (error) {
          this.$message.error('获取配方数据失败')
    },

    handleScannerInput(event){
      if (this.scannerFlag){
        this.form.SNCode = ''
        this.$refs.inputdata.value = ''
        this.scannerFlag = false
        }
      } else {
        try {
          const res = await updateCollectData({
            locationCode: this.locationCode,
            inputValue: this.materialCode
          })
      const input = event.target
      this.form.SNCode = input.value
      if (event.key === 'Enter'){
        this.scannerFlag = true
        //扫描完成
        addPassStationCollection({SNCode:this.form.SNCode,LocationCode: this.form.LocationCode}).then(res => {

          if (res.code === 200) {
            this.formulaTableData = res.data
            this.$message.success('更新成功')
            this.materialCode = '' // 清空输入框

            // 在数据更新后，滚动到合适的位置
            this.$message({
              message: "扫码完成",
              type: "success"
            })
          } else {
            this.$message({
              message: "扫码错误，请重试",
              type: "error"
            })
          }
        })
      }
    },
  },
  mounted() {
    console.log('00')
    this.setFocus();
            this.$nextTick(() => {
              const table = this.$refs.formulaTable;
              const completedCount = this.sortedFormulaData.filter(item => item.results === 'OK').length;
              const totalCount = this.sortedFormulaData.length;
      if (this.$refs.inputdata){
        this.$refs.inputdata.addEventListener('keydown',this.handleScannerInput)
      }

              if (completedCount < totalCount) {
                // 计算需要滚动的位置：将第一个未完成的行显示在中间
                const rowHeight = 40; // 预估的行高
                const scrollPosition = completedCount * rowHeight - (table.$el.clientHeight / 2) + rowHeight;
    })

                // 设置表格的滚动位置
                table.bodyWrapper.scrollTop = Math.max(0, scrollPosition);
              }
            });
          } else {
            this.$message.warning(res.msg)
          }
        } catch (error) {
          this.$message.error('更新失败')
        }
      }
    },

    // 添加行样式方法
    tableRowClassName({row}) {
      if (row.results === 'OK') {
        return 'success-row'
      }
      return ''
    },

    test1(){
      let scanValue = '0RSMB05A132E3AF3V0000001'
      if(scanValue.includes("0RSMB")){
        this.$message.warning("成功"+scanValue)
      }else {
        this.$message.error('扫码识别错误的产品序列号'+scanValue+'请重新扫码');
      }
    }
  beforeDestroy() {
    this.$refs.inputdata.removeEventListener('keydown',this.handleScannerInput)
  }
}
</script>