jonhon-mes-web/src/views/periodicTesting/components/viewDialog.vue

<template>
  <el-dialog title="检验结果填报" append-to-body :modelValue="showDialog" width="80%" @close="closeDialog">
    <div style="height: 600px;overflow-y: auto;overflow-x:hidden ;">
        <div style="font-weight: 550;">任务信息</div>
        <div class="info_box">
            <el-row class="item_item" :gutter="20">
                <el-col :span="6">
                    <span>任务编号：</span><span>{{detailForm.code}}</span>
                </el-col>
                <el-col :span="6">
                    <span>试验项目：</span><span>{{detailForm.cycleTestItemName}}</span>
                </el-col>
                <el-col :span="6">
                    <span>试验件：</span><span>{{detailForm.testTypeName}}</span>
                </el-col>
                <el-col :span="6">
                    <span>试验标准：</span><span style="color: #1890ff;">{{detailForm.cycleTestItemStandard}}</span>
                </el-col>
            </el-row>
            <el-row class="item_item" :gutter="20">
                <el-col :span="6">
                    <span>试验条件：</span><span>{{detailForm.cycleTestItemCondition}}</span>
                </el-col>
                <el-col :span="6">
                    <span>工艺员：</span><span>{{detailForm.processUserName}}</span>
                </el-col>
                <!-- <el-col :span="6">
                    <span>试验员：</span><span>{{detailForm.mecMan.userName}}</span>
                </el-col> -->
                <el-col :span="6">
                    <span>任务状态：</span><span>{{detailForm.statusName}}</span>
                </el-col>
                 <el-col :span="6">
                    <span>任务生成时间：</span><span>{{detailForm.genDatetime}}</span>
                </el-col>
            </el-row>
            <el-row class="item_item" :gutter="20">
                <el-col :span="6">
                    <span>任务下发时间：</span><span>{{detailForm.issueDate}}</span>
                </el-col>
                <el-col :span="6">
                    <span>任务接收时间：</span><span>{{detailForm.acceptDate}}</span>
                </el-col>
                <el-col :span="6">
                    <span>任务完成时间：</span><span>{{detailForm.finishDate}}</span>
                </el-col>
            </el-row>
        </div>
        <div style="font-weight: 550;">试验结果</div>
        <div class="info_box">
            <el-row class="item_item" :gutter="20">
                <el-col :span="6">
                    <span>试验结果：</span><span style="color: #1890FF;cursor: pointer;">{{detailForm.testDate}}</span>
                </el-col>
                <el-col :span="6">
                    <span>试验时间：</span><span>{{detailForm.testDate}}</span>
                </el-col>
            </el-row>
            <el-row class="item_item" :gutter="20" v-show="detailForm.isDone == 0">
                <el-col :span="6">
                    <span>未试验原因：</span><span>{{detailForm.meterNum}}</span>
                </el-col>
            </el-row>
        </div>
    </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import {getDetail} from '@/api/qualityManagement/periodicTesting/testTask'
export default {
    props:{
        showDialog: {
            type: Boolean,
            default: false
        },
        rowId:{
            type:Number,
            default:0
        },
        rowObj:{
            type:Object,
            default:{}
        },
        dialogType:{
            type:String,
            default:''
        }
    },
    data(){
        return{
            detailForm:{},
            initialInspectionForm:{},
            auditForm:{},
            drugForm:{},
            recheckForm:{},
            userData:[
              {
                "jobName": "软件工程师",
                "deptName": "MES开发部",
                "ldapName": null,
                "userSex": 1,
                "deptId": 1,
                "mobile": null,
                "userName": "测试",
                "userId": 521,
                "userCode": "0001"
              },
              {
                "jobName": null,
                "deptName": "MES开发部",
                "ldapName": "jinna",
                "userSex": 2,
                "deptId": 1,
                "mobile": null,
                "userName": "靳娜",
                "userId": 21,
                "userCode": "jinna"
              },
              {
                "jobName": null,
                "deptName": "MES开发部",
                "ldapName": "zd001",
                "userSex": 1,
                "deptId": 1,
                "mobile": null,
                "userName": "张迪",
                "userId": 601,
                "userCode": "zd001"
              }
            ],
            initialInspectionFormRules:{
                isTest:[{required:true,message:'请选择是否进行化验',trigger:'blur'}],
                meterNum:[{required:true,message:'请输入测量值',trigger:'blur'}],
                testTime:[{required:true,message:'请选择化验时间',trigger:'blur'}],
            },
            auditRules:{
                isAudit:[{required:true,message:'请选择是否审核通过',trigger:'blur'}],
            },
            drugRules:{
                drugBatch:[{required:true,message:'请输入药品批次',trigger:'blur'}],
                drugRecipient:[{required:true,message:'请选择领药人',trigger:'blur'}],
            },
            recheckRules:{
                isTest:[{required:true,message:'请选择是否进行化验',trigger:'blur'}],
                meterNum:[{required:true,message:'请输入测量值',trigger:'blur'}],
                testTime:[{required:true,message:'请选择化验时间',trigger:'blur'}],
            }
        }
    },
    mounted(){
        console.log('row---------------------',this.rowObj)
        this.getDetail()
    },
    methods:{
        // 获取详情数据
        getDetail(){
            getDetail(this.rowId).then(res =>{
                this.detailForm = res.data.data
            })
        },
        closeDialog(){
            this.$emit('closeDialog');
        },
        //输入框数字校验
        handleMeterNum(value){
            this.initialInspectionForm.meterNum =  value.replace(/[^\d]/g, ''); 
        },
        handleCondNum(value){
            this.initialInspectionForm.condNum =  value.replace(/[^\d]/g, ''); 
        },
        handleActualAdd(value){
            // 1. 过滤非法字符
            let val = value.replace(/[^\d.]/g, '');
            
            // 2. 处理多个小数点
            const dotIndex = val.indexOf('.');
            if (dotIndex !== -1) {
                val = val.substring(0, dotIndex + 1) + 
                    val.substring(dotIndex + 1).replace(/\./g, '');
            }

            // 3. 限制小数点后五位
            if (dotIndex !== -1) {
                const decimalPart = val.split('.')
                if (decimalPart[1] && decimalPart[1].length > 5) {
                val = decimalPart[0] + '.' + decimalPart[1].substring(0, 5);
                }
            }
            console.log('val-----------------',val)
            this.initialInspectionForm.actualAdd = val
        },
        // 提交
        submit(){
            this.closeDialog()
        },
    }
}
</script>

<style lang="scss">
    .info_box{
        padding: 20px 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 20px;

        .item_item{
            padding: 5px 0;
        }
    }

</style>