zdqy_firm_former/src/views/component/qualityControl/qualityControlChildTabTwo.vue

<!--该组件实际差值和实际偏倚有正负值-->
<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"
                  /> -->
                  <el-select
                    v-if="!disabled"
                    v-model="row[item.val[i]]"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="s in optionsS"
                      :key="s.value"
                      :label="s.label"
                      :value="s.value"
                    >
                    </el-option>
                  </el-select>
                  <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>{{
                    reagentData.find(
                      (m) =>
                        m.leiXing === field.name &&
                        m.tianXieLeiXing === 'result'
                    )[em] || '/'
                  }}</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', 'Oc']
        },
        component_136l4wr: {
          title: '抗体筛选-手工法',
          colChild: ['Ⅰ', 'Ⅱ', 'Ⅲ']
        },
        component_1qyrt3i: {
          title: '交叉配血-凝聚胺法',
          colChild: ['主侧', '次侧']
        }
      },
      personJGLabel: [
        'zhouYi1',
        'zhouEr1',
        'zhouSan1',
        'zhouSi1',
        'zhouWu1',
        'zhouLiu1',
        'zhouRi1'
      ],
      primarySize: '2650px',
      optionsS: [
        {
          value: '0',
          label: '0'
        },
        {
          value: '1+',
          label: '1+'
        },
        {
          value: '2+',
          label: '2+'
        },
        {
          value: '3+',
          label: '3+'
        },
        {
          value: '4+',
          label: '4+'
        }
      ]
    }
  },
  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 || {}
    this.disabled = this.readonly
    // 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 {
        .el-radio__original[aria-hidden='true'] {
          display: none !important;
        }
        padding: 0 10px;
      }
      .el-table__body-wrapper.is-scrolling-none {
        width: 2650px;
      }
    }
  }
}
</style>