试剂更换验证定量表单调整

src/views/component/reagent/reagentChange.vue

@@ -0,0 +1,251 @@
+<template>
+    <div>
+        <div class="reagentChange">
+            <el-row type="flex">
+                <el-col style="margin:0 0 5px 0">
+                    <div class="button">
+                        <el-button v-if="!disabled" type="primary" size="mini" icon="ibps-icon-close" @click="computedResult">计算结果</el-button>
+                        <el-button v-else type="primary" size="mini" icon="ibps-icon-close" @click="disabled=false">编辑</el-button>
+                        <el-button type="success" size="mini" icon="ibps-icon-plus" @click="generateData">生成数据</el-button>
+                        <el-button type="danger" size="mini" icon="ibps-icon-edit" @click="openDialog">配置样品</el-button>
+                    </div>
+                </el-col>
+            </el-row>
+            <el-row type="flex">
+                <el-col>
+                    <el-table ref="reagent" :data="reagentData" :span-method="spanMethod" border>
+                        <el-table-column
+                            label="检验项目"
+                            prop="jyxm"
+                        />
+                        <el-table-column label="样品编号" prop="ypbh" />
+                        <el-table-column label="旧试剂测得结果" prop="jsjcdjg">
+                            <template slot-scope="{row}">
+                                <el-input v-if="!disabled" v-model="row.jsjcdjg" :min="0" size="mini" placeholder="请输入" type="number" oninput="value=value.replace(/^0|[^0-9]/g,'')" />
+                                <span v-else>{{ row.jsjcdjg|| '/' }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="新试剂测得结果" prop="xsjcdjg">
+                            <template slot-scope="{row}">
+                                <el-input v-if="!disabled" v-model="row.xsjcdjg" :min="0" size="mini" placeholder="请输入" type="number" oninput="value=value.replace(/^0|[^0-9]/g,'')" />
+                                <span v-else>{{ row.xsjcdjg|| '/' }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="偏倚" prop="pq" />
+                        <el-table-column label="限定范围" prop="xdfw" />
+                        <el-table-column label="是否相符" prop="sfxf" />
+                        <el-table-column label="符合率" prop="fhl" />
+                        <el-table-column label="结论" prop="jl" />
+                    </el-table>
+                </el-col>
+            </el-row>
+        </div>
+        <el-dialog
+            class="ragent-dialog"
+            title="配置样品"
+            :visible.sync="centerDialogVisible"
+            width="30%"
+            append-to-body
+            center
+        >
+            <div v-for="(item, index) in dialogData" :key="index" class="ragent-dialog-content">
+                <span>样品编号{{ index+1 }}</span>
+                <el-input v-model="item.number" oninput="value=value.replace(/^0|[^0-9]/g,'')" type="number" style="width: 30%;" />
+                <div>
+                    <el-button type="text" @click="addRow">添加</el-button>
+                    <el-button type="text" style="color:red;" @click="deleteRow(index)">删除</el-button>
+                </div>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="centerDialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="dialogDataConfirm">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        formData: {
+            type: Object,
+            default: () => {}
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        isCul: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data () {
+        return {
+            reagentData: [],
+            dialogData: [
+                { number: '' },
+                { number: '' },
+                { number: '' },
+                { number: '' },
+                { number: '' }
+            ],
+            copyDialogData: [],
+            centerDialogVisible: false,
+            validateFlag: false,
+            disabled: false,
+            ypData: [
+                { pjName: 'A', range: '50%' },
+                { pjName: 'B', range: '40%' },
+                { pjName: 'C', range: '30%' }
+            ]
+        }
+    },
+    computed: {
+    },
+    watch: {
+        formData: {
+            handler (val) {
+
+            },
+            deep: true,
+            immediate: true
+        },
+        forms: {
+            handler (val) {
+            },
+            deep: true
+        }
+    },
+    mounted () {
+
+    },
+    methods: {
+        // 配置样品
+        openDialog () {
+            this.centerDialogVisible = true
+            if (this.copyDialogData.length > 0) {
+                this.dialogData = JSON.parse(JSON.stringify(this.copyDialogData))
+            } else {
+                this.dialogData = [
+                    { number: '' },
+                    { number: '' },
+                    { number: '' },
+                    { number: '' },
+                    { number: '' }
+                ]
+            }
+        },
+        // 生成数据
+        generateData () {
+            if (this.copyDialogData.length > 0) {
+                if (this.reagentData.length > 0) {
+                    this.$confirm('将重置表格数据，是否确认操作?', '提示', {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        type: 'warning'
+                    }).then(() => {
+                        // 将配置样品数据填入reagentData
+                        this.initData()
+                    })
+                } else {
+                    // 将配置样品数据填入reagentData
+                    this.initData()
+                }
+            } else {
+                this.$message.error('请先配置样品数据')
+            }
+        },
+        computedResult () {
+            // computedFlag:true表示里面有空数据或填写不规范数据
+            let computedFlag = false
+            this.reagentData.forEach(item => {
+                if (!item.jsjcdjg || item.jsjcdjg <= 0 || !item.xsjcdjg || item.xsjcdjg <= 0) {
+                    computedFlag = true
+                }
+            })
+            if (!computedFlag) {
+                this.reagentData.forEach(item => {
+                    item.pq = ((item.xsjcdjg - item.jsjcdjg) / item.jsjcdjg).toFixed(3) * 100 + '%'
+                    item.sfxf = Number(item.pq.replace('%', '')) < (item.xdfw.replace('%', '')) ? '是' : '否'
+                })
+                this.disabled = true
+            } else {
+                this.$message.error('试剂测得结果必须大于0且不能为空！')
+            }
+        },
+        initData () {
+            this.reagentData = []
+            this.ypData.forEach(item => {
+                this.copyDialogData.forEach(el => {
+                    this.reagentData.push({ jyxm: item.pjName, ypbh: el.number, jsjcdjg: '', xsjcdjg: '', pq: '', xdfw: item.range, sfxf: '', fhl: '', jl: '' })
+                })
+            })
+            this.$refs.reagent.doLayout()
+            console.log(this.reagentData)
+        },
+        spanMethod ({ row, column, rowIndex, columnIndex }) {
+            const rowspan = this.copyDialogData.length
+            if (columnIndex === 0 || columnIndex === 5 || columnIndex === 7 || columnIndex === 8) {
+                if (rowIndex % rowspan === 0) {
+                    return {
+                        rowspan,
+                        colspan: 1
+                    }
+                } else {
+                    return {
+                        rowspan: 0,
+                        colspan: 0
+                    }
+                }
+            }
+        },
+        addRow () {
+            this.dialogData.push({ number: '' })
+        },
+        deleteRow (index) {
+            if (this.dialogData.length === 1) {
+                this.$message.error('删除失败，样品不能为空!')
+            } else {
+                this.dialogData.splice(index, 1)
+            }
+        },
+        dialogDataConfirm () {
+            // validateFlag：true 表单校验未通过
+            this.validateFlag = false
+            this.dialogData.forEach(item => {
+                if (!item.number) {
+                    this.validateFlag = true
+                }
+            })
+            if (this.validateFlag) {
+                console.log(this.dialogData)
+                this.$message.warning('样品编号未填写完!')
+            } else {
+                this.centerDialogVisible = false
+                this.copyDialogData = JSON.parse(JSON.stringify(this.dialogData))
+            }
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.reagentChange{
+    margin-bottom: 20px;
+    .button{
+        display: flex;
+        flex-direction: row-reverse;
+        .el-button{
+            margin-left: 5px;
+        }
+    }
+}
+.ragent-dialog ::v-deep .el-dialog__body {
+    max-height: 300px;
+}
+.el-dialog__body .ragent-dialog-content {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        padding: 10px;
+    }
+</style>