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

<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>