威宁试剂更换验证定性组件

src/views/component/reagentQualitative/reagentQualitativeWN.vue

@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <div class="reagentQualitative">
+      <el-row type="flex">
+        <el-col class="button">
+          <div class="title">*</div>
+          <div v-if="isRead" />
+          <div v-else>
+            <el-button
+              type="primary"
+              size="mini"
+              icon="ibps-icon-add"
+              @click="handleAdd"
+            >
+              添加</el-button
+            >
+            <el-button
+              type="primary"
+              size="mini"
+              icon="ibps-icon-copy"
+              @click="handleCopy"
+            >
+              复制</el-button
+            >
+            <el-button
+              type="danger"
+              size="mini"
+              icon="ibps-icon-remove"
+              @click="handleDelete"
+            >
+              删除</el-button
+            >
+          </div>
+        </el-col>
+      </el-row>
+      <el-row type="flex">
+        <el-col>
+          <el-table
+            ref="external"
+            :data="reagentBatchDataFilter"
+            :span-method="objectSpanMethod"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="55" />
+            <el-table-column label="检测项目" prop="jianCeXiangMu">
+              <template slot-scope="{ row }">
+                <el-input
+                  v-if="!isRead"
+                  v-model="row.jianCeXiangMu"
+                  size="mini"
+                  maxlength="32"
+                  placeholder="请输入"
+                  @input="handleJCXM"
+                />
+                <span v-else>{{ row.jianCeXiangMu }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              :label="
+                formData.yiYuan === '深圳肿瘤' ? '病理号' : '标本号 （条码号）'
+              "
+              prop="biaoBenHao"
+            >
+              <template slot-scope="{ row }">
+                <el-input
+                  v-if="!isRead"
+                  v-model="row.biaoBenHao"
+                  size="mini"
+                  maxlength="32"
+                  placeholder="请输入"
+                />
+                <span v-else>{{ row.biaoBenHao }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="旧号结果" prop="jiuJieGuo">
+              <template slot-scope="{ row }">
+                <el-input
+                  v-if="!isRead"
+                  v-model="row.jiuJieGuo"
+                  size="mini"
+                  maxlength="32"
+                  placeholder="请输入"
+                />
+                <span v-else>{{ row.jiuJieGuo }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="新号结果" prop="xinJieGuo">
+              <template slot-scope="{ row }">
+                <el-input
+                  v-if="!isRead"
+                  v-model="row.xinJieGuo"
+                  size="mini"
+                  maxlength="32"
+                  placeholder="请输入"
+                />
+                <span v-else>{{ row.xinJieGuo }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="一致性" prop="xiangFu">
+              <template slot-scope="{ row }">
+                <el-radio-group v-model="row.xiangFu" :disabled="isRead">
+                  <el-radio label="是">是</el-radio>
+                  <el-radio label="否">否</el-radio>
+                </el-radio-group>
+              </template>
+            </el-table-column>
+            <!-- <el-table-column label="可接受范围" prop="biaoZhun">
+              <template slot-scope="{ row }">
+                <el-input
+                  v-if="!isRead"
+                  v-model="row.biaoZhun"
+                  size="mini"
+                  maxlength="32"
+                  placeholder="请输入"
+                  @input="handleInput"
+                />
+                <span v-else>{{ row.biaoZhun }}</span>
+              </template>
+            </el-table-column> -->
+          </el-table>
+          <el-pagination
+            layout="total,sizes,prev, pager, next,jumper"
+            :current-page="requestPage.pageNo"
+            :page-size="requestPage.limit"
+            :page-sizes="[10, 15, 20, 30, 50, 100]"
+            :total="reagentBatchData.length"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+import { cloneDeep } from 'lodash'
+export default {
+  props: {
+    formData: {
+      type: Object,
+      default: () => {}
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    params: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      reagentBatchData: [],
+      disabled: false,
+      requestPage: {
+        limit: 10,
+        pageNo: 1
+      },
+      multipleSelection: [],
+      isRead: false
+    }
+  },
+  computed: {
+    reagentBatchDataFilter() {
+      return this.reagentBatchData.slice(
+        (this.requestPage.pageNo - 1) * this.requestPage.limit,
+        (this.requestPage.pageNo - 1) * this.requestPage.limit +
+          this.requestPage.limit
+      )
+    }
+  },
+  watch: {
+    'formData.sjghyzjlbbbzb': {
+      handler(value, old) {
+        if (value && value.length) {
+          this.reagentBatchData = value
+        }
+      },
+      immediate: true
+    },
+    reagentBatchData: {
+      handler(value, old) {
+        this.$emit('change-data', 'sjghyzjlbbbzb', value)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.isRead = this.readonly || this.params.nodeId === 'Activity_1envuj2'
+  },
+  methods: {
+    handleInput(e) {
+      this.reagentBatchData.forEach((item) => {
+        item.biaoZhun = e
+      })
+    },
+    handleJCXM(e) {
+      console.log(
+        this.reagentBatchData.sort((a, b) =>
+          a.jianCeXiangMu.localeCompare(b.jianCeXiangMu, 'zh-Hans-CN')
+        )
+      )
+    },
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 1) {
+        const currentValue = row[column.property]
+        const preRow = this.reagentBatchData[rowIndex - 1]
+        // 上一行这一列的数据
+        const preValue = preRow ? preRow[column.property] : null
+        // 如果当前值和上一行的值相同，则将当前单元格隐藏
+        // 同一个'jianCeXiangMu'进行表格合并
+        if (
+          currentValue === preValue &&
+          row['jianCeXiangMu'] === preRow['jianCeXiangMu']
+        ) {
+          return { rowspan: 0, colspan: 0 }
+        } else {
+          let rowspan = 1
+          // 计算应该合并的行数
+          for (let i = rowIndex + 1; i < this.reagentBatchData.length; i++) {
+            const nextRow = this.reagentBatchData[i]
+            const nextValue = nextRow[column.property]
+            if (
+              nextValue === currentValue &&
+              nextRow['jianCeXiangMu'] === row['jianCeXiangMu']
+            ) {
+              rowspan++
+            } else {
+              break
+            }
+          }
+          return { rowspan, colspan: 1 }
+        }
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    handleAdd() {
+      this.reagentBatchData.push({
+        jianCeXiangMu: '',
+        biaoBenHao: '',
+        xinJieGuo: '',
+        jiuJieGuo: '',
+        xiangFu: '是'
+        // biaoZhun:
+        //   this.reagentBatchData.length > 0
+        //     ? this.reagentBatchData[0].biaoZhun
+        //     : ''
+        // 如果已有数据，则添加biaozhun的值应该是统一的
+      })
+    },
+    // 删除
+    handleDelete() {
+      this.$confirm('确定删除当前选中数据？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        if (this.multipleSelection.length > 0) {
+          this.reagentBatchData = this.reagentBatchData.filter(
+            (row) => !this.multipleSelection.includes(row)
+          )
+        } else {
+          this.$message.warning('请选择数据')
+        }
+      })
+    },
+    // 复制
+    handleCopy() {
+      if (this.multipleSelection.length > 0) {
+        this.reagentBatchData = this.reagentBatchData.concat(
+          cloneDeep(this.multipleSelection)
+        )
+      } else {
+        this.$message.warning('请选择数据')
+      }
+    },
+    // 当前页码改变
+    handleCurrentChange(val) {
+      this.requestPage.pageNo = val
+    },
+    // 页码选择器改变
+    handleSizeChange(val) {
+      this.requestPage.limit = val
+      this.requestPage.pageNo = 1
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.reagentQualitative {
+  margin-bottom: 20px;
+  .button {
+    display: flex;
+    justify-content: space-between;
+    padding: 0px 0px 0px 15px;
+    background: #f0ffff;
+    .title {
+      color: red;
+      font-size: 12px;
+      font-weight: bold;
+      margin-bottom: 0;
+    }
+    .el-button {
+      margin: 0;
+    }
+  }
+}
+// ::v-deep .el-table--border  td, .el-table--border th, .el-table__body-wrapper .el-table--border .is-scrolling-left .el-table__fixed {
+//     border-right: 1px solid rgba(255, 0, 0, 0)!important;
+// }
+</style>