人员比对评价表组件

src/views/component/reagent/personnelComparison.vue

@@ -0,0 +1,291 @@
+<template>
+  <div>
+    <div v-if="show" class="comparisonChange">
+      <el-row type="flex">
+        <el-col class="button">
+          <div class="title">比对实验</div>
+          <div v-if="!isReadOnly">
+            <el-button
+              type="success"
+              size="mini"
+              icon="ibps-icon-refresh"
+              @click="handleGenerate"
+            >
+              一键生成
+            </el-button>
+            <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="comparison"
+            :data="comparisonDataFilter"
+            :span-method="spanMethod"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="55" />
+            <el-table-column label="比对人员" prop="renYuan" width="110" >
+              <template slot-scope="{ row }">
+                <span>{{ getUserName(row.renYuan) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="比对项目" prop="biDuiXiangMu"  width="200">
+              <template slot-scope="{ row }">
+                <span>{{ row.biDuiXiangMu }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="样品编号" prop="yangPinBianHao">
+              <template slot-scope="{ row }">
+                <el-input
+                  v-if="isEditable"
+                  v-model="row.yangPinBianHao"
+                  size="mini"
+                  placeholder="请输入"
+                />
+                <span v-else>{{ row.yangPinBianHao || '/' }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="结果（比对人员）" prop="jieGuo1">
+              <template slot-scope="{ row }">
+                <el-input
+                  v-if="isEditable"
+                  v-model="row.jieGuo1"
+                  size="mini"
+                  placeholder="请输入"
+                />
+                <span v-else>{{ row.jieGuo1 || '/' }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="结果（基准人员）" prop="jieGuo2">
+              <template slot-scope="{ row }">
+                <el-input
+                  v-if="isEditable"
+                  v-model="row.jieGuo2"
+                  size="mini"
+                  placeholder="请输入"
+                />
+                <span v-else>{{ row.jieGuo2 || '/' }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="是否一致" prop="shiFouYiZhi1"  width="90">
+              <template slot-scope="{ row }">
+                <el-select
+                  v-if="isEditable"
+                  v-model="row.shiFouYiZhi1"
+                  size="mini"
+                  placeholder="请选择"
+                >
+                  <el-option label="是" value="是" />
+                  <el-option label="否" value="否" />
+                </el-select>
+                <span v-else>{{ row.shiFouYiZhi1 || '/' }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { cloneDeep } from 'lodash'
+
+export default {
+  props: {
+    formData: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      comparisonData: [],
+      multipleSelection: [],
+      show: true,
+      nodeId: 'Activity_0xxvzg0',
+      userList: this.$store.getters.userList
+    }
+  },
+  computed: {
+    isEditable() {
+      return this.nodeId === 'Activity_0xxvzg0'
+    },
+    isReadOnly() {
+      return !this.isEditable
+    },
+    comparisonDataFilter() {
+      return this.comparisonData
+    }
+  },
+  methods: {
+    getUserName(userId) {
+      const user = this.userList.find((i) => i.userId === userId)
+      return user ? user.userName : ''
+    },
+    // 添加
+    handleAdd() {
+      const { xuanZeXiangMu, xuanZeBiDuiRen } = this.formData
+      if (!xuanZeXiangMu) {
+        return this.$message.warning('请选择比对项目')
+      }
+      if (!xuanZeBiDuiRen) {
+        return this.$message.warning('请选择比对人员')
+      }
+      this.comparisonData.push({
+        renYuan: '',
+        biDuiXiangMu: xuanZeXiangMu,
+        yangPinBianHao: '',
+        jieGuo1: '',
+        jieGuo2: '',
+        shiFouYiZhi1: '是'
+      })
+    },
+    // 复制
+    handleCopy() {
+      if (this.multipleSelection.length > 0) {
+        this.comparisonData = this.comparisonData.concat(
+          cloneDeep(this.multipleSelection)
+        )
+      } else {
+        this.$message.warning('请选择数据')
+      }
+    },
+    // 删除
+    handleDelete() {
+      this.$confirm('确定删除当前选中数据？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        if (this.multipleSelection.length > 0) {
+          this.comparisonData = this.comparisonData.filter(
+            (row) => !this.multipleSelection.includes(row)
+          )
+        } else {
+          this.$message.warning('请选择数据')
+        }
+      })
+    },
+    // 一键生成
+    handleGenerate() {
+      const { xuanZeBiDuiRen, shiYanXiangMu, biaoBenGeShu } = this.formData
+      if (!xuanZeBiDuiRen || !shiYanXiangMu || !biaoBenGeShu) {
+        return this.$message.warning('请填写比对试验项目、选择比对人员、标本个数')
+      }
+      const personnel = xuanZeBiDuiRen.split(',')
+      const projects = shiYanXiangMu.split(',')
+      const samples = parseInt(biaoBenGeShu, 10)
+
+      const generatedData = []
+      personnel.forEach((person) => {
+        projects.forEach((project) => {
+          for (let i = 1; i <= samples; i++) {
+            generatedData.push({
+              renYuan: person,
+              biDuiXiangMu: project,
+              yangPinBianHao: ``,
+              jieGuo1: '',
+              jieGuo2: '',
+              shiFouYiZhi1: '是'
+            })
+          }
+        })
+      })
+      this.comparisonData = generatedData
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    spanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 1) {
+        const currentValue = row.renYuan
+        const preRow = this.comparisonData[rowIndex - 1]
+        const preValue = preRow ? preRow.renYuan : null
+        if (currentValue === preValue) {
+          return { rowspan: 0, colspan: 0 }
+        } else {
+          let rowspan = 1
+          for (let i = rowIndex + 1; i < this.comparisonData.length; i++) {
+            const nextRow = this.comparisonData[i]
+            if (nextRow.renYuan === currentValue) {
+              rowspan++
+            } else {
+              break
+            }
+          }
+          return { rowspan, colspan: 1 }
+        }
+      }
+      if (columnIndex === 2) {
+        const currentValue = row.biDuiXiangMu
+        const preRow = this.comparisonData[rowIndex - 1]
+        const preValue = preRow ? preRow.biDuiXiangMu : null
+        if (currentValue === preValue && row.renYuan === preRow.renYuan) {
+          return { rowspan: 0, colspan: 0 }
+        } else {
+          let rowspan = 1
+          for (let i = rowIndex + 1; i < this.comparisonData.length; i++) {
+            const nextRow = this.comparisonData[i]
+            if (
+              nextRow.biDuiXiangMu === currentValue &&
+              nextRow.renYuan === row.renYuan
+            ) {
+              rowspan++
+            } else {
+              break
+            }
+          }
+          return { rowspan, colspan: 1 }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.comparisonChange {
+  margin-bottom: 20px;
+  .button {
+    display: flex;
+    justify-content: space-between;
+    padding: 0px 0px 0px 15px;
+    background: #f0ffff;
+    .title {
+      color: #999;
+      font-size: 12px;
+      font-weight: bold;
+      margin-bottom: 0;
+    }
+    .el-button {
+      margin: 0;
+    }
+  }
+}
+</style>