task-6315 添加质控菌株性能验证记录自定义组件

src/views/component/performanceVerification.vue

@@ -0,0 +1,228 @@
+<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>
+import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
+
+export default {
+  props: {
+    formData: {
+      type: Object,
+      default: () => { }
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    flag: {
+      type: String,
+      default: ''
+    }
+  },
+  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}')`
+
+          curdPost('sql', sql).then(response => {
+            const newData = []
+            const data = response.variables.data
+            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>