zdqy_firm_former/src/views/component/sop/performanceVerification.vue

<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="junZhuMingCheng" width="180" />
                <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>