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

src/views/component/sop/performanceVerification.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="performance">
+      <div class="table">
+          <el-table :data="showPaperList" border>
+              <el-table-column
+                  label="序号"
+                  width="50"
+                  type="index"
+                  :index="showIndex"
+              />
+              <el-table-column label="菌株名称" prop="junZhuMingCheng" width="180">
+                  <template slot-scope="{row}">
+                      <template>
+                          <span>{{ row.junZhuMingCheng+' '+row.junZhuBianHao }}</span>
+                      </template>
+                  </template>
+              </el-table-column>
+              <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>
+          <el-pagination
+              style="margin-top: 5px; padding-bottom: 10px"
+              :current-page="pagination.currentPage"
+              :page-sizes="[10, 20,30, 50]"
+              :page-size="pagination.pageSize"
+              layout="prev,pager,next,jumper,sizes,->,total"
+              :total="tableData.length"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+          />
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+      formData: {
+          type: Object,
+          default: () => {}
+      },
+      readonly: {
+          type: Boolean,
+          default: false
+      }
+  },
+  data () {
+      return {
+          pagination: {
+              pageSize: 10,
+              currentPage: 1
+          },
+          tableData: [],
+          dic: {
+              '1': '菌落形态',
+              '2': '染色性',
+              '3': '鉴定结果',
+              '4': 'β内酰胺酶',
+              '5': '药敏质控状态',
+              '6': '验证结果'
+          }
+      }
+  },
+  computed: {
+      shiFouGuoShen () {
+          return this.formData.shiFouGuoShen === '已编制'
+      },
+      showPaperList () {
+          const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
+          const end = start + this.pagination.pageSize
+          return this.tableData.slice(start, end)
+      }
+  },
+  watch: {
+      'formData.xuanZeJunZhu': {
+          async handler (val) {
+              if (val) {
+                  // const sql = `select * from t_zkjzxnyzpzb WHERE find_in_set(id_, '${val}')`
+                  const { variables: { data }} = await this.$common.request('query', {
+                      key: 'getStrainPvConfig',
+                      params: [val]
+                  })
+                  // 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
+              }
+          },
+          immediate: true
+      },
+      tableData: {
+          handler (val) {
+              this.$emit('change-data', 'zkjzxnyzxqb', val)
+          },
+          deep: true
+      }
+  },
+
+  methods: {
+      setDisabled (row, index) {
+          const arr = row.yanZhengNeiRong?.split(',') || []
+          return !arr.includes(index)
+      },
+      // 选择器切换
+      onSelectorChange () {
+          this.pagination = {
+              pageSize: 10,
+              currentPage: 1
+          }
+      },
+
+      // 当前页码改变
+      handleCurrentChange (val) {
+          this.pagination.currentPage = val
+      },
+      // 页码选择器改变
+      handleSizeChange (val) {
+          this.pagination.pageSize = val
+          this.pagination.currentPage = 1
+      },
+      // 分页连续序号
+      showIndex (index) {
+          return index + 1 + (this.pagination.currentPage - 1) * this.pagination.pageSize
+      }
+  }
+}
+</script>
+
+<style>
+.performance{
+  padding: 20px 0 0 20px;
+}
+</style>