质控菌株性能验证自定义组件

src/views/component/sop/performanceVerification.vue

@@ -0,0 +1,180 @@
+<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="zhenJunXingTai" width="180">
+                    <template slot-scope="{row}">
+                        <template v-if="!readonly && !setDisabled(row,'1') && !shiFouGuoShen">
+                            <el-radio v-model="row.zhenJunXingTai" label="相符">相符</el-radio>
+                            <el-radio v-model="row.zhenJunXingTai" label="不相符">不相符</el-radio>
+                        </template>
+                        <template v-else>
+                            <span>{{ row.zhenJunXingTai||'/' }}</span>
+                        </template>
+                    </template>
+                </el-table-column>
+                <el-table-column label="染色性" prop="ranSeXing">
+                    <template slot-scope="{row}">
+                        <el-input v-if="!readonly && !setDisabled(row,'2') && !shiFouGuoShen" v-model="row.ranSeXing" size="mini" placeholder="请输入" />
+                        <span v-else>{{ row.ranSeXing || '/' }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="鉴定结果" prop="jianDingJieGuo" width="180">
+                    <template slot-scope="{row}">
+                        <template v-if="!readonly && !setDisabled(row,'3') && !shiFouGuoShen">
+                            <el-radio v-model="row.jianDingJieGuo" label="相符">相符</el-radio>
+                            <el-radio v-model="row.jianDingJieGuo" label="不相符">不相符</el-radio>
+                        </template>
+                        <template v-else>
+                            <span>{{ row.jianDingJieGuo||'/' }}</span>
+                        </template>
+                    </template>
+                </el-table-column>
+                <el-table-column label="β内酰胺酶" prop="neiXianAnMei" width="160">
+                    <template slot-scope="{row}">
+                        <template v-if="!readonly && !setDisabled(row,'4') && !shiFouGuoShen">
+                            <el-radio v-model="row.neiXianAnMei" label="阳性">阳性</el-radio>
+                            <el-radio v-model="row.neiXianAnMei" label="阴性">阴性</el-radio>
+                        </template>
+                        <template v-else>
+                            <span>{{ row.neiXianAnMei||'/' }}</span>
+                        </template>
+                    </template>
+                </el-table-column>
+                <el-table-column label="药敏质控状态" prop="yaoMinZhiKongZhua" width="180">
+                    <template slot-scope="{row}">
+                        <template v-if="!readonly && !setDisabled(row,'5') && !shiFouGuoShen">
+                            <el-radio v-model="row.yaoMinZhiKongZhua" label="通过">通过</el-radio>
+                            <el-radio v-model="row.yaoMinZhiKongZhua" label="不通过">不通过</el-radio>
+                        </template>
+                        <template v-else>
+                            <span>{{ row.yaoMinZhiKongZhua||'/' }}</span>
+                        </template>
+                    </template>
+                </el-table-column>
+                <el-table-column label="验证结果" prop="yanZhengJieGuo" width="180">
+                    <template slot-scope="{row}">
+                        <template v-if="!readonly && !setDisabled(row,'6') && !shiFouGuoShen">
+                            <el-radio v-model="row.yanZhengJieGuo" label="通过">通过</el-radio>
+                            <el-radio v-model="row.yanZhengJieGuo" label="不通过">不通过</el-radio>
+                        </template>
+                        <template v-else>
+                            <span>{{ row.yanZhengJieGuo||'/' }}</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" type="textarea" size="mini" placeholder="请输入" />
+                        <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: [],
+            dic: {
+                '1': '菌落形态',
+                '2': '染色性',
+                '3': '鉴定结果',
+                '4': 'β内酰胺酶',
+                '5': '药敏质控状态',
+                '6': '验证结果'
+            }
+        }
+    },
+    computed: {
+        shiFouGuoShen () {
+            return this.formData.shiFouGuoShen === '已编制'
+        }
+    },
+    watch: {
+        'formData.xuanZeJunZhu': {
+            async handler (val) {
+                if (val) {
+                    const arr = val?.split(',') || []
+                    const sql = `select * from t_zkjzxnyzpzb WHERE id_ in (${arr.map(i => `'${i}'`).join(',')})`
+                    const { variables: { data }} = await this.$common.request('sql', sql)
+                    // console.log('data', data)
+                    const newData = []
+                    data.forEach(item => {
+                        const t = this.tableData.find(i => i.peiZhiId === item.id_)
+                        if (t) {
+                            newData.push(t)
+                        } else {
+                            newData.push({
+                                'diDian': this.formData.diDian,
+                                'bianZhiRen': this.formData.bianZhiRen,
+                                'bianZhiBuMen': this.formData.bianZhiBuMen,
+                                'bianZhiShiJian': this.formData.bianZhiShiJian,
+                                'zhenJunXingTai': '',
+                                'ranSeXing': '',
+                                'jianDingJieGuo': '',
+                                'neiXianAnMei': '',
+                                'yaoMinZhiKongZhua': '',
+                                'yanZhengJieGuo': '',
+                                'beiZhu': '',
+                                junZhuId: item.jun_zhu_id_,
+                                junZhuBianHao: item.jun_zhu_bian_hao_,
+                                junZhuMingCheng: item.jun_zhu_ming_chen,
+                                peiZhiId: item.id_,
+                                yanZhengNeiRong: item.yan_zheng_nei_ron
+                            })
+                        }
+                    })
+                    this.tableData = newData
+                }
+            }
+            // immediate: true
+        },
+        'formData.zkjzxnyzxqb': {
+            handler (val) {
+                if (val && val.length) {
+                    // console.log(this.formData)
+                    this.tableData = val
+                }
+            }
+        },
+        tableData: {
+            handler (val) {
+                this.$emit('change-data', 'zkjzxnyzxqb', val)
+            },
+            deep: true
+        }
+    },
+
+    methods: {
+        setDisabled (row, index) {
+            const arr = row.yanZhengNeiRong?.split(',') || []
+            return !arr.includes(index)
+        }
+    }
+}
+</script>
+
+<style>
+.performance{
+    padding: 20px 0 0 20px;
+}
+</style>