血清学试验人员比对组件

src/views/component/sop/xueQingXueShiYan.vue

@@ -0,0 +1,155 @@
+<template>
+    <div class="performance">
+        <div class="table">
+            <el-table :data="tableData" border>
+                <el-table-column
+                    label="序号"
+                    width="50"
+                    type="index"
+                />
+                <el-table-column label="菌株编号" prop="junZhuBianHao" width="100" />
+                <el-table-column label="菌株名称" prop="junZhuMingCheng" width="120" />
+                <el-table-column label="沙门菌属诊断血清">
+                    <el-table-column label="O多价血清(A-F)" prop="duoJiaXieQing">
+                        <template slot-scope="{row}">
+                            <el-input v-if="!readonly && !shiFouGuoShen" v-model="row.duoJiaXieQing" size="mini" placeholder="请输入" />
+                            <span v-else>{{ row.duoJiaXieQing || '/' }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="O因子血清" prop="yinZiXieQing">
+                        <template slot-scope="{row}">
+                            <el-input v-if="!readonly && !shiFouGuoShen" v-model="row.yinZiXieQing" size="mini" placeholder="请输入" />
+                            <span v-else>{{ row.yinZiXieQing || '/' }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="H因子血清">
+                        <el-table-column label="1相" prop="yinZiXieQing1Xian">
+                            <template slot-scope="{row}">
+                                <el-input v-if="!readonly && !shiFouGuoShen" v-model="row.yinZiXieQing1Xian" size="mini" placeholder="请输入" />
+                                <span v-else>{{ row.yinZiXieQing1Xian || '/' }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="2相" prop="yinZiXieQing2Xian">
+                            <template slot-scope="{row}">
+                                <el-input v-if="!readonly && !shiFouGuoShen" v-model="row.yinZiXieQing2Xian" size="mini" placeholder="请输入" />
+                                <span v-else>{{ row.yinZiXieQing2Xian || '/' }}</span>
+                            </template>
+                        </el-table-column>
+                    </el-table-column>
+                </el-table-column>
+                <el-table-column label="志贺菌属诊断抗血清">
+                    <el-table-column label="4种多价血清" prop="siZhongDuoJiaXieQ">
+                        <template slot-scope="{row}">
+                            <el-input v-if="!readonly && !shiFouGuoShen" v-model="row.siZhongDuoJiaXieQ" size="mini" placeholder="请输入" />
+                            <span v-else>{{ row.siZhongDuoJiaXieQ || '/' }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="痢疾志贺菌多价" prop="liJiZhiHeJunDuoJi">
+                        <template slot-scope="{row}">
+                            <el-input v-if="!readonly && !shiFouGuoShen" v-model="row.liJiZhiHeJunDuoJi" size="mini" placeholder="请输入" />
+                            <span v-else>{{ row.liJiZhiHeJunDuoJi || '/' }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="福氏志贺菌多价" prop="fuShiZhiHeJunDuoJ">
+                        <template slot-scope="{row}">
+                            <el-input v-if="!readonly && !shiFouGuoShen" v-model="row.fuShiZhiHeJunDuoJ" size="mini" placeholder="请输入" />
+                            <span v-else>{{ row.fuShiZhiHeJunDuoJ || '/' }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="鲍氏志贺菌多价" prop="baoShiZhiHeJunDuo">
+                        <template slot-scope="{row}">
+                            <el-input v-if="!readonly && !shiFouGuoShen" v-model="row.baoShiZhiHeJunDuo" size="mini" placeholder="请输入" />
+                            <span v-else>{{ row.baoShiZhiHeJunDuo || '/' }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="宋内氏志贺菌多价" prop="songNeiShiZhiHeJu">
+                        <template slot-scope="{row}">
+                            <el-input v-if="!readonly && !shiFouGuoShen" v-model="row.songNeiShiZhiHeJu" size="mini" placeholder="请输入" />
+                            <span v-else>{{ row.songNeiShiZhiHeJu || '/' }}</span>
+                        </template>
+                    </el-table-column>
+                </el-table-column>
+                <el-table-column label="血清学鉴定结果" prop="xieQingXueJianDin">
+                    <template slot-scope="{row}">
+                        <el-input v-if="!readonly && !shiFouGuoShen" v-model="row.xieQingXueJianDin" size="mini" placeholder="请输入" />
+                        <span v-else>{{ row.xieQingXueJianDin || '/' }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="比对结果判断" prop="biDuiJieGuoPanDua">
+                    <template slot-scope="{row}">
+                        <template v-if="!readonly && !shiFouGuoShen">
+                            <el-radio v-model="row.biDuiJieGuoPanDua" label="通过">通过</el-radio>
+                            <el-radio v-model="row.biDuiJieGuoPanDua" label="不通过">不通过</el-radio>
+                        </template>
+                        <template v-else>
+                            <span>{{ row.biDuiJieGuoPanDua||'/' }}</span>
+                        </template>
+                    </template>
+                </el-table-column>
+                <el-table-column label="备注" prop="beiZhu">
+                    <template slot-scope="{row}">
+                        <el-input v-if="!readonly && !shiFouGuoShen" v-model="row.beiZhu" size="mini" placeholder="请输入" type="textarea" />
+                        <span v-else>{{ row.beiZhu || '/' }}</span>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        formData: {
+            type: Object,
+            default: () => ({})
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        return {
+            tableData: []
+        }
+    },
+    computed: {
+        shiFouGuoShen () {
+            return this.formData.shiFouGuoShen === '已编制'
+        },
+        passRate () {
+            if (this.tableData.length === 0) return '0'
+            const passRateArr = this.tableData.filter(item => item.biDuiJieGuoPanDua === '通过') || []
+            return ((passRateArr.length / this.tableData.length) * 100).toFixed(2)
+        }
+    },
+    watch: {
+        'formData.smjzhjxqxsyrybdxqb': {
+            handler (val) {
+                if (val && val.length) {
+                    // console.log(this.formData)
+                    this.tableData = val
+                }
+            }
+        },
+        tableData: {
+            handler (val) {
+                this.$emit('change-data', 'smjzhjxqxsyrybdxqb', val)
+                this.$emit('change-data', 'fuHeLv', this.passRate)
+            },
+            deep: true
+        }
+    },
+
+    methods: {
+
+    }
+}
+</script>
+
+<style>
+.performance{
+    padding: 20px 0 0 20px;
+}
+</style>