lis8.0-vue3/src/views/liswork/work/others/index.vue

<template>
  <div class="others-box">
    <el-row :gutter="5">
      <el-col :span="8">
        <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick" highlight-current-row border
          height="82vh" show-overflow-tooltip>
          <el-table-column prop="yq" label="仪器名称" align="center" width="120">
            <template #default="scope">
              {{ formatyq(scope.row.yq) }}
            </template>
          </el-table-column>
          <el-table-column prop="yljg" label="医疗机构" align="center" width="120">
            <template #default="scope">
              {{ formatDict(scope.row.yljg, 'HOS') }}
            </template>
          </el-table-column>
          <el-table-column prop="jyrq" label="检验日期" align="center" width="150" />
        </el-table>
      </el-col>
      <el-col :span="16">
        <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick" highlight-current-row border
          height="82vh">
          <el-table-column prop="xmmc" label="项目名称" fixed align="center" />
          <template v-for="(period) in periods" :key="period">
            <el-table-column :label="period" :prop="period" :width="150" align="center" />
          </template>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import { ref, watch, computed, reactive, toRefs, onMounted } from 'vue';
import { otherinstr } from '@/api/liswork/work/LisWork';
const baseUrl = import.meta.env.VITE_APP_BASE_API

const props = defineProps({
  // 主键
  queryParams: {
    type: Object,
    default: {}
  },
  dictData: {
    type: Object,
    default: () => { }
  },
  instrOptions: {
    type: Array as PropType<Array<{ yq: string; yqmc: string }>>,
    default: () => []
  }
})

// 解构 props
const { queryParams, dictData, instrOptions } = toRefs(props);
const tableData = ref([]);
const periods = ref<string[]>([])
const getOthersInfo = () => {
  otherinstr(queryParams.value).then((res: any) => {
    tableData.value = res.data
  })
}

watch(() => props.queryParams, (newValue) => {
  getOthersInfo()
}, { immediate: true })

const handleRowClick = (row: any) => { }


const formatDict = (v: string, dictType: string) => {
  return dictData.value[dictType]?.find((item: any) => item.value == v)?.label
}

const formatyq = (v: string) => {
  return instrOptions.value.find((item: any) => item.yq == v.trim())?.yqmc
}
</script>

<style scoped lang="scss">
.others-box {
  height: 82vh;
  overflow-y: auto;
  overflow-x: hidden;

  :deep(.el-table__cell) {
    padding: 0 !important;
  }
}
</style>