完成原材料、产品检验、过程检，包装检键盘切换输入框

licp

2024-05-22 ef4e46f182aee6253805e66286dee847c573cbde

 src/views/quality/processInspect/processInspect-form.vue

@@ -146,7 +146,9 @@
                                                    class="item" effect="dark" content="请先选择设备！" placement="top-start">
                                                    <el-input :disabled="scope.row.eId == null"
                                                        v-model="scope.row.empiricalValueAddss[index]"
                                                        @blur="changeState(scope.row,true)" placeholder="请输入检测值"></el-input>
                                                        @blur="changeState(scope.row,true)" placeholder="请输入检测值"
                                                        :id="`detectionValue${index}`+scope.$index"
                                @keyup.native="moveFocus($event, scope.$index, `detectionValue${index}`)"></el-input>
                                                    <span v-if="resultVal != null && processInspectVo.id != null"
                                                        v-text="scope.row.empiricalValueAddss[index]"></span>
                                                </el-tooltip>
@@ -192,7 +194,9 @@
                                                    class="item" effect="dark" content="请先选择设备！" placement="top-start">
                                                    <el-input :disabled="scope.row.eId == null"
                                                        v-model="scope.row.inote"
                                                        @blur="changeState(scope.row)" placeholder="请输入检验描述"></el-input>
                                                        @blur="changeState(scope.row)" placeholder="请输入检验描述"
                                                        :id="`remark`+scope.$index"
                            @keyup.native="moveFocus($event, scope.$index, `remark`)"></el-input>
                                                    <span v-if="resultVal != null && processInspectVo.id != null"
                                                        v-text="scope.row.inote"></span>
                                                </el-tooltip>
@@ -391,6 +395,27 @@
            <el-button type="primary" @click="deviceCode = false">确 定</el-button>
        </span>
        </el-dialog>
        <el-dialog
        title="不合格信息"
        :visible.sync="unqualified"
        width="30%">
        <div style="height: 30vh;width: 100%;">
            <el-form :model="ruleForm" :rules="unqualifiedRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="不合格数量" prop="number">
                    <el-input v-model="ruleForm.number"></el-input>
                </el-form-item>
                <el-form-item label="批次号" prop="outBatchNo">
                <el-select v-model="ruleForm.outBatchNo" multiple placeholder="请选择批次号" style="width: 100%;" :multiple-limit="Number(ruleForm.number)">
                    <el-option :label="m" :value="m" v-for="(m,i) in outBatchNoList" :key="i"></el-option>
                </el-select>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="unqualified = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
        </span>
        </el-dialog>
    <processPart :paramObj="paramObj" :currshowlist.sync="workshop" />
    </div>
</template>
@@ -404,6 +429,7 @@
    updateProcessInsProduct,
    updateProcessInsProduct2,
    updateProcessInspectsById,
    selOutBatchNo,
} from '@/api/quality/processInspect'
import {
    getProcessConfigFiles,
@@ -423,6 +449,23 @@
    },
    data() {
        return {
            outBatchNoList:[],
            unqualifiedInfo:null,
            loading:false,
            ruleForm:{
                number:'',
                outBatchNo:[]
            },
            unqualifiedRules:{
                number: [
                    { required: true, message: '请输入不合格数量', trigger: 'blur' },
                    { pattern: /^\d+$/, message: '请输入数字', trigger: 'blur' }
                ],
                outBatchNo: [
                    { required: true, message: '请选择批次号', trigger: 'change' },
                ],
            },
            unqualified:false,
            progrecessFileLoading: false,
            processConfigFileTableData: [],
            headers: {
@@ -477,10 +520,24 @@
            inspectionItems: [], // 新增检验项目表格
            inspectionResultForm: [],
            configFileTableData:[],
            dataForm:null
            dataForm:null,
            keyfield:['remark'],
            keyfield0:['detectionValue0']
        }
    },
    watch: {
        empiricalValueAdd(newVal){
        if(newVal!=this.keyfield0.length){
            if(newVal>this.keyfield0.length){
                this.keyfield0 = []
                for(let i=0;i<newVal;i++){
                    this.keyfield0.push('detectionValue'+i)
                }
            }else{
                this.keyfield0.splice(this.keyfield0.length-1,1);
            }
        }
      }
    },
    beforeUpdate() {
        this.$nextTick(() => {
@@ -498,8 +555,14 @@
            val == undefined ? this.resultVal = null : this.resultVal = val
        }
        this.init()
        this.selOutBatchNo()
    },
    methods: {
        selOutBatchNo(){
            selOutBatchNo({id:this.$route.query.id}).then((res)=>{
                this.outBatchNoList = res.data.data
            })
        },
        getProcessConfigFile(){
            getProcessConfigFile({
            orderNumber: this.dataForm.orderNumber,
@@ -651,27 +714,30 @@
                number: 0,
                result: this.inspectionResultForm[0].result
            }
            this.unqualifiedInfo = obj;
            if (pro > 0) {
                this.$prompt('请输入不合格数量', '不合格数量', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^\d+$/,
                    inputErrorMessage: '请输入正确数字格式'
                }).then(({ value }) => {
                    obj.number = value
                    updateProcessInspectsById(obj).then(res => {
                        let data = res.data.data
                        if (data) {
                            if (data.indexOf("成功") > 0) {
                                this.$message.success(data);
                                this.checkTestState()
                            } else {
                                this.$message.warning(data);
                            }
                            return
                        }
                    });
                }).catch(() => { });
                this.unqualified = true;
                this.$refs.ruleForm.resetFields();
                // this.$prompt('请输入不合格数量', '不合格数量', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     inputPattern: /^\d+$/,
                //     inputErrorMessage: '请输入正确数字格式'
                // }).then(({ value }) => {
                //     obj.number = value
                //     updateProcessInspectsById(obj).then(res => {
                //         let data = res.data.data
                //         if (data) {
                //             if (data.indexOf("成功") > 0) {
                //                 this.$message.success(data);
                //                 this.checkTestState()
                //             } else {
                //                 this.$message.warning(data);
                //             }
                //             return
                //         }
                //     });
                // }).catch(() => { });
            } else {
                updateProcessInspectsById(obj).then(res => {
                    let data = res.data.data
@@ -687,6 +753,36 @@
                });
            }
            this.init()
        },
        handleSubmit(){
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    if(this.ruleForm.outBatchNo.length!=this.ruleForm.number){
                        this.$message.error(`请选择${this.ruleForm.number}个批次号`)
                        return
                    }
                    this.loading = true;
                    let obj = {number:this.ruleForm.number,outBatchNo:this.ruleForm.outBatchNo.join(','),...this.unqualifiedInfo};
                    updateProcessInspectsById(obj).then(res => {
                        let data = res.data.data
                        if (data) {
                            if (data.indexOf("成功") > 0) {
                                this.$message.success(data);
                                this.$refs.ruleForm.resetFields();
                                this.unqualified = false;
                                this.checkTestState()
                                this.init()
                            } else {
                                this.$message.warning(data);
                            }
                            return
                        }
                        this.loading = false;
                    });
                } else {
                    return false;
                }
            });
        },
        checkTestState() {
            let resultVal = '1'
@@ -735,8 +831,10 @@
                                    arr = obj.inspectionValue.split(",")
                                }
                                this.$set(obj, "empiricalValueAddss", arr)
                                this.$set(obj, "inote", obj.inote)
                                if(!obj.inote){
                                    obj.inote = null
                                    // obj.inote = null
                                    this.$set(obj, "inote", null)
                                }
                                if (arr.length > this.empiricalValueAdd) {
                                    this.empiricalValueAdd = arr.length
@@ -927,7 +1025,7 @@
            } else {
                if (_than.empiricalValueAddMaxNumber != _than.empiricalValueAdd - 1) {
                    _than.empiricalValueAdd = _than.empiricalValueAdd - 1;
                    // _than.changeRowResult()
                    _than.changeRowResult()
                    _than.inspectionItems.forEach(i => {
                        if(i.children){
                            i.children.forEach(ele=>{
@@ -942,7 +1040,121 @@
        // 添加检验值列
        clickAddInspectionColumn() {
            this.empiricalValueAdd = this.empiricalValueAdd + 1;
        },
        moveFocus(event, index, key) {
        console.log(key, index,key)
        let keyfield = this.insertArrayAt(this.keyfield,0,this.keyfield0);
        // enter键
        // if (event.keyCode === 13) { // 回车
        //     if (index === this.getLen() - 1 && key === keyfield[keyfield.length - 1]) { // 最后一行最后一个
        //         console.log('最后一行最后一个无法回车')
        //     return
        //     }
        //     this.$nextTick(() => {
        //         event.target.blur()
        //     })
        //     if (key === keyfield[keyfield.length - 1]) { // 当前行最后一个,跳转下一行第一个

        //     } else { // 跳转下一个
        //     const nextkeyindex = keyfield.findIndex(k => k === key) + 1
        //     this.$nextTick(() => {
        //         document.getElementById(keyfield[nextkeyindex] + index).focus()
        //     })
        //     }
        // }

        // 向上 =38
        if (event.keyCode === 38) {
            console.log('向上')
            if (index === 0) { // 第一行
            console.log('第一行无法向上')
            return
            }
            document.getElementById(key + index).blur()
            let i = 0;
            while (true){
                let dom = document.getElementById(key + (index - 1-i))
                if(dom){
                    dom.focus()
                    return
                }else if((index-1-i)==0){
                    return
                }
                i++
            }
        }

        // 下 = 40
        if (event.keyCode === 40) {
            console.log('向下')
            if (index === this.getLen() - 1) { // 最后一行
            console.log('最后一行无法向下')
            return
            }
            document.getElementById(key + index).blur()
            this.$nextTick(() => {
            let i = 0;
            while (true){
                let dom = document.getElementById(key + (index + 1+i))
                console.log(dom,key + (index + 1+i))
                if(dom){
                    dom.focus()
                    return
                }else if((index+1+i)==this.getLen() - 1){
                    return
                }
                i++
            }
            })
        }

        // 左 = 37
        if (event.keyCode === 37) {
            console.log('向左')
            if (index === 0 && key === keyfield[0]) { // 第一行第一个
            console.log('第一行第一个无法向左')
            return
            }
            document.getElementById(key + index).blur()
            const prevkeyindex = keyfield.findIndex(k => k === key) - 1
            this.$nextTick(() => {
                let dom = document.getElementById(keyfield[prevkeyindex] + index)
                if(dom){
                    dom.focus()
                }
            })
        }

        // 右 = 39
        if (event.keyCode === 39) {
            console.log('向右')
            if (index === this.getLen() - 1 && key === keyfield[keyfield.length - 1]) { // 最后一行最后一个
            console.log('最后一行最后一个无法向右')
            return
            }
            document.getElementById(key + index).blur()
            const nextkeyindex = keyfield.findIndex(k => k === key) + 1
            this.$nextTick(() => {
                let dom = document.getElementById(keyfield[nextkeyindex] + index)
                if(dom){
                    dom.focus()
                }
            })
        }
        },
      insertArrayAt(arr1, index, arr2) {
        return arr1.slice(0, index).concat(arr2, arr1.slice(index));
        },
        getLen(){
        let arr = []
        this.inspectionItems.forEach(item => {
            arr.push(item)
            item.children.forEach(child => {
                arr.push(child)
            })
        })
        return arr.length
      }
    },
}
</script>