task-5184 菌株管理自定义组件

src/views/component/performanceVerification.vue

@@ -0,0 +1,276 @@
+<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>