试剂每日质控（二）子表组件

src/views/component/qualityControl/qualityControlChildTabTwo.vue

@@ -0,0 +1,486 @@
+<!--该组件实际差值和实际偏倚有正负值-->
+<template>
+  <div>
+    <div v-if="show" class="reagentChange">
+      <el-row type="flex">
+        <el-col class="button">
+          <div class="title">{{ configuration[field.name].title }}</div>
+          <div v-if="readonly" />
+          <div v-else> </div>
+        </el-col>
+      </el-row>
+      <el-row type="flex">
+        <el-col>
+          <el-table
+            :data="reagentDataFilter"
+            @selection-change="handleSelectionChange"
+          >
+            <!-- <el-table-column type="selection" width="55" /> -->
+            <el-table-column
+              v-if="field.name === 'component_1qyrt3i'"
+              label="凝聚胺法"
+              prop="fangFa"
+              width="130"
+              align="center"
+            />
+            <el-table-column
+              :label="
+                field.name === 'component_1qyrt3i' ? '供者编号' : '质控编号'
+              "
+              prop="bianHao"
+              width="130"
+              align="center"
+            />
+            <el-table-column
+              v-for="(item, ind) in columnParent"
+              :label="item.name"
+              :key="'parent' + ind"
+              align="center"
+            >
+              <el-table-column
+                v-for="(it, i) in configuration[field.name].colChild"
+                :prop="item.val[i]"
+                :label="it"
+                :key="'child1' + i"
+                width="120"
+                align="center"
+              >
+                <template slot-scope="{ row }">
+                  <el-input
+                    v-if="!disabled"
+                    v-model="row[item.val[i]]"
+                    :min="0"
+                    size="mini"
+                    placeholder="请输入"
+                    type="text"
+                  />
+                  <span v-else>{{ row[item.val[i]] || '/' }}</span>
+                </template>
+              </el-table-column>
+            </el-table-column>
+            <div
+              slot="append"
+              :style="{
+                width: field.name === 'component_1qyrt3i' ? '1940px' : '2650px'
+              }"
+            >
+              <el-row
+                v-if="field.name === 'component_1orinpd'"
+                type="flex"
+                class="lastRow"
+              >
+                <el-col>
+                  <el-table
+                    ref="reagent"
+                    :data="reagentDataFilterL"
+                    @selection-change="handleSelectionChange"
+                  >
+                    <!-- <el-table-column type="selection" width="55" /> -->
+                    <el-table-column
+                      label="质控编号"
+                      prop="bianHao"
+                      width="130"
+                      align="center"
+                    />
+                    <el-table-column
+                      v-for="(item, ind) in columnParent"
+                      :key="'parent1' + ind"
+                      label-class-name="heightLabel"
+                      align="center"
+                    >
+                      <el-table-column
+                        v-for="(it, i) in configuration[field.name].colChildL"
+                        :prop="item.val[i]"
+                        :label="it"
+                        :key="'child2' + i"
+                        width="120"
+                        align="center"
+                      >
+                        <template slot-scope="{ row }">
+                          <el-input
+                            v-if="!disabled"
+                            v-model="row[item.val[i]]"
+                            :min="0"
+                            size="mini"
+                            placeholder="请输入"
+                            type="text"
+                          />
+                          <span v-else>{{ row[item.val[i]] || '/' }}</span>
+                        </template>
+                      </el-table-column>
+                    </el-table-column>
+                  </el-table>
+                </el-col>
+              </el-row>
+              <!-- 自定义内容，例如一个按钮 -->
+              <div v-if="lastShow" class="lastRow">
+                <div
+                  class="labelSty"
+                  :style="{
+                    width:
+                      field.name === 'component_1qyrt3i' ? '260px' : '130px'
+                  }"
+                  >结果符合预期：</div
+                >
+                <div
+                  v-for="(em, x) in personJGLabel"
+                  class="chooseSty"
+                  :style="{
+                    width:
+                      field.name === 'component_1qyrt3i' ? '220px' : '340px'
+                  }"
+                >
+                  <el-radio-group
+                    v-if="!disabled"
+                    v-model="
+                      reagentData.find(
+                        (m) =>
+                          m.leiXing === field.name &&
+                          m.tianXieLeiXing === 'result'
+                      )[em]
+                    "
+                  >
+                    <el-radio label="Y">Y</el-radio>
+                    <el-radio label="N">N</el-radio>
+                  </el-radio-group>
+                  <span v-else>{{ row[item.val[i]] || '/' }}</span>
+                </div>
+              </div>
+              <div v-if="lastShow" class="lastRow">
+                <div
+                  class="labelSty"
+                  :style="{
+                    width:
+                      field.name === 'component_1qyrt3i' ? '260px' : '130px'
+                  }"
+                  >操作人：</div
+                >
+                <div
+                  v-for="(em, x) in personJGLabel"
+                  class="chooseSty"
+                  :style="{
+                    width:
+                      field.name === 'component_1qyrt3i' ? '220px' : '340px'
+                  }"
+                >
+                  <ibps-user-selector
+                    v-model="
+                      reagentData.find(
+                        (m) =>
+                          m.leiXing === field.name &&
+                          m.tianXieLeiXing === 'person'
+                      )[em]
+                    "
+                    type="user"
+                    readonly-text="text"
+                    :disabled="disabled"
+                    :multiple="false"
+                    size="mini"
+                    :filter="filter"
+                    filtrate
+                    style="width: 100%"
+                    @change-link-data="changeGuanLiRen"
+                  />
+                </div>
+              </div>
+            </div>
+          </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="reagentData.length"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          /> -->
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+import importTable from '@/business/platform/form/formrender/dynamic-form/components/import-table'
+import IbpsImport from '@/plugins/import'
+import { downloadFile } from '@/business/platform/file/utils'
+import { cloneDeep, forIn } from 'lodash'
+export default {
+  components: {
+    importTable,
+    IbpsUserSelector: () => ({
+      component: import('@/business/platform/org/selector'),
+      delay: 200
+    })
+  },
+  props: {
+    formData: {
+      type: Object,
+      default: () => {}
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    params: {
+      type: Object,
+      default: () => {}
+    },
+    field: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      reagentData: [],
+      disabled: false,
+      show: true,
+      lastShow: false,
+      requestPage: {
+        limit: 20,
+        pageNo: 1
+      },
+      multipleSelection: [],
+      daysArr: [],
+      filter: [
+        {
+          descVal: '1',
+          includeSub: true,
+          old: 'position',
+          partyId: this.$store.getters.userInfo.employee.positions,
+          partyName: '',
+          scriptContent: '',
+          type: 'user',
+          userType: 'position'
+        }
+      ],
+      columnParent: [
+        { name: 'Mon', val: ['zhouYi1', 'zhouYi2', 'zhouYi3'] },
+        { name: 'Tue', val: ['zhouEr1', 'zhouEr2', 'zhouEr3'] },
+        { name: 'Wed', val: ['zhouSan1', 'zhouSan2', 'zhouSan3'] },
+        { name: 'Thur', val: ['zhouSi1', 'zhouSi2', 'zhouSi3'] },
+        { name: 'Fri', val: ['zhouWu1', 'zhouWu2', 'zhouWu3'] },
+        { name: 'Sat', val: ['zhouLiu1', 'zhouLiu2', 'zhouLiu3'] },
+        { name: 'Sun', val: ['zhouRi1', 'zhouRi2', 'zhouRi3'] }
+      ],
+      configuration: {
+        component_1orinpd: {
+          title: '血型鉴定-试管法',
+          colChild: ['抗-A', '抗-B', '抗-D'],
+          colChildL: ['Ac', 'Bc', 'Dc']
+        },
+        component_136l4wr: {
+          title: '抗体筛选-手工法',
+          colChild: ['Ⅰ', 'Ⅱ', 'Ⅲ']
+        },
+        component_1qyrt3i: {
+          title: '交叉配血-凝聚胺法',
+          colChild: ['主侧', '次侧']
+        }
+      },
+      personJGLabel: [
+        'zhouYi1',
+        'zhouEr1',
+        'zhouSan1',
+        'zhouSi1',
+        'zhouWu1',
+        'zhouLiu1',
+        'zhouRi1'
+      ],
+      primarySize: '2650px'
+    }
+  },
+  computed: {
+    reagentDataFilter() {
+      let data = this.reagentData.filter(
+        (t) =>
+          t.leiXing === this.field.name && t.tianXieLeiXing === 'information'
+      )
+      return data.slice(
+        (this.requestPage.pageNo - 1) * this.requestPage.limit,
+        (this.requestPage.pageNo - 1) * this.requestPage.limit +
+          this.requestPage.limit
+      )
+    },
+    reagentDataFilterL() {
+      let data = this.reagentData.filter(
+        (t) =>
+          t.leiXing === this.field.name + 'L' &&
+          t.tianXieLeiXing === 'information'
+      )
+      return data.slice(
+        (this.requestPage.pageNo - 1) * this.requestPage.limit,
+        (this.requestPage.pageNo - 1) * this.requestPage.limit +
+          this.requestPage.limit
+      )
+    }
+  },
+  watch: {
+    'formData.mrzkezb': {
+      handler(value, old) {
+        if (value && value.length > 0) {
+          this.reagentData = value
+          this.lastShow = true
+        } else {
+          this.reagentData = []
+          this.lastShow = false
+        }
+      },
+      immediate: true
+    },
+    'formData.kaiShiShiJian': {
+      handler(value, old) {
+        if (value && value !== '') {
+          this.daysArr = this.getNextSevenDays(value)
+        } else {
+          this.daysArr = []
+        }
+      },
+      immediate: true
+    },
+    reagentData: {
+      handler(value, old) {
+        if (value.length > 0) {
+          this.$emit('change-data', 'mrzkezb', value)
+        }
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    const { first = '' } = this.$store.getters.level
+    const { deptList = [] } = this.$store.getters || {}
+    // if (this.$refs.component_1qyrt3ireagent) {
+    //   console.log(this.$refs.component_1qyrt3ireagent, 'rrrr')
+
+    //   this.$refs.component_1qyrt3ireagent.$refs.appendWrapper.clientWidth = 1940
+    // }
+  },
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 当前页码改变
+    handleCurrentChange(val) {
+      this.requestPage.pageNo = val
+    },
+    // 页码选择器改变
+    handleSizeChange(val) {
+      this.requestPage.limit = val
+      this.requestPage.pageNo = 1
+    },
+    changeGuanLiRen(key, data) {
+      // this.form.fuZeRenDianHua = data?.mobile
+    },
+    // 去除小数*100精度方法（支持负数）
+    deleteAccuracy(num) {
+      // 处理负数
+      const isNegative = num < 0
+      const absoluteNum = Math.abs(num)
+
+      // 是否带小数点
+      if (absoluteNum.toString().includes('.')) {
+        // 保留小数点后面3位
+        const numArry = absoluteNum.toFixed(3).toString().split('.')
+        let result
+
+        // 整数位是否大于0
+        if (numArry[0] > 0) {
+          result =
+            Number(
+              numArry[0] +
+                numArry[1].substring(0, 2) +
+                '.' +
+                numArry[1].substring(2, 3)
+            ) + '%'
+        } else {
+          // 小数位第一位是否大于0
+          if (numArry[1][0] > 0) {
+            result =
+              Number(
+                numArry[1].substring(0, 2) + '.' + numArry[1].substring(2, 3)
+              ) + '%'
+          } else {
+            // 小数位第二位是否大于0
+            if (numArry[1][1] > 0) {
+              result =
+                Number(
+                  numArry[1].substring(1, 2) + '.' + numArry[1].substring(2, 3)
+                ) + '%'
+            } else {
+              result = Number(0 + '.' + numArry[1].substring(2, 3)) + '%'
+            }
+          }
+        }
+
+        // 恢复负号
+        return isNegative ? '-' + result : result
+      } else {
+        const result = absoluteNum * 100 + '%'
+        return isNegative ? '-' + result : result
+      }
+    },
+    /**
+     * 获取指定日期之后连续7天的日期数组
+     **/
+    getNextSevenDays(inputDate) {
+      // 转换为Date对象
+      const date = new Date(inputDate)
+      if (isNaN(date)) {
+        throw new Error('Invalid date')
+      }
+      const result = []
+      for (let i = 0; i < 7; i++) {
+        // 基于原始日期增加 i 天，避免修改原对象
+        const nextDate = new Date(date)
+        nextDate.setDate(date.getDate() + i)
+        const day = String(nextDate.getDate()).padStart(2, '0')
+        result.push(day)
+      }
+      return result
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.reagentChange {
+  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;
+    }
+  }
+  ::v-deep .heightLabel {
+    height: 0;
+    line-height: 0;
+    padding: 0;
+    border-bottom: 0;
+  }
+  ::v-deep .el-table__append-wrapper {
+    // width: 2650px;
+    overflow: visible;
+    .lastRow {
+      display: flex;
+      .labelSty {
+        text-align: center;
+      }
+      .chooseSty {
+        padding: 0 10px;
+      }
+      .el-table__body-wrapper.is-scrolling-none {
+        width: 2650px;
+      }
+    }
+  }
+}
+</style>