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

<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="13">
        <div class="box-shadow">
          <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" class="compact-form">
            <el-form-item label="样本号：" prop="ybh">
              <el-input v-model="queryParams.ybh" clearable placeholder="样本编号" prefix-icon="Search"
                @keyup.enter="handleQuery" @clear="handleQuery" style="width:100px" />
            </el-form-item>
            <el-form-item label="日期：" prop="jyrq">
              <el-date-picker v-model="queryParams.jyrq" type="date" label-width="20px" placeholder="检验日期"
                value-format="YYYY-MM-DD" :clearable="false" @change="fetchlabPatList"
                style="width:140px"></el-date-picker>
            </el-form-item>
            <el-form-item label="部门：" prop="instrGroup">
              <SelectTable v-model:data="queryParams.instrGroup" :fields="instrGroupFields"
                :tableData="instrGroupOptions" label="zdmc" value="zddh" objKey="zddh" :border="true" width="140px"
                placeholder="请选择部门" @getDataValue="handleinstrGroupChange" />
            </el-form-item>
            <el-form-item label="仪器：" prop="yq">
              <SelectTable v-model:data="queryParams.yq" :fields="yqFields" :tableData="instrOptions" label="yqmc"
                value="yq" objKey="yq" :border="true" width="140px" placeholder="请选择仪器"
                @getDataValue="yqHandleChange" />
            </el-form-item>
            <el-form-item>
              <el-icon color="#3c80d9" size="20" style="margin-right: 10px;" class="cp">
                <Search @click="fetchlabPatList" />
              </el-icon>
              <el-icon color="#3c80d9" size="20" class="cp" @click="selectJob(labPat)">
                <Refresh />
              </el-icon>
            </el-form-item>
          </el-form>
          <el-row :gutter="5">
            <el-col :span="8">
              <LabPat ref="labPatRef" v-model:labPat="labPat" :labPatKey="queryParams" :dictData="dictData" />
            </el-col>
            <el-col :span="16">
              <LabResult ref="labResultRef" v-model:labPat="labPat" :tableData="labResuts" :tableKey="queryParams"
                @fetchLabResults="fetchLabResults" @changeStatus="changeStatus" @previewHandle="previewHandle" />
            </el-col>
          </el-row>
        </div>
      </el-col>

      <el-col :span="11">
        <div>
          <div class="tab-list">
            <div :class="['text', activeTab == item.value ? 'active' : '']" v-for="item in tabList"
              @click="activeTab = item.value">{{ item.label }}
            </div>
          </div>
          <div class="box-shadow">
            <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" class="compact-form">
              <el-form-item label="筛选条件：" prop="ybh" label-width="90px">
                <el-input clearable placeholder="筛选条件" prefix-icon="Search" @keyup.enter="handleQuery"
                  @clear="handleQuery" style="width:100px" />
              </el-form-item>
              <el-form-item label="筛选条件：" prop="ybh" label-width="90px">
                <el-input clearable placeholder="筛选条件" prefix-icon="Search" @keyup.enter="handleQuery"
                  @clear="handleQuery" style="width:100px" />
              </el-form-item>
              <el-form-item label="筛选条件：" prop="ybh" label-width="90px">
                <el-input clearable placeholder="筛选条件" prefix-icon="Search" @keyup.enter="handleQuery"
                  @clear="handleQuery" style="width:100px" />
              </el-form-item>
              <el-form-item>
                <el-icon color="#3c80d9" size="20" style="margin-right: 10px;" class="cp">
                  <Search />
                </el-icon>
                <el-icon color="#3c80d9" size="20" class="cp">
                  <Menu />
                </el-icon>
              </el-form-item>
            </el-form>

            <div class="flex-between mb10">
              <div>
                <el-button type="primary" icon="RefreshRight" @click="fetchlabPatList">刷新</el-button>
                <el-button type="danger" icon="delete">删除</el-button>
                <el-button class="btn_green" icon="top" @click="handlePrev">上一个</el-button>
                <el-button class="btn_green" icon="bottom" @click="handleNext">下一个</el-button>
                <el-select placeholder="所有" style="width: 150px" class="ml10">
                  <el-option label="option" value="item.value" />
                </el-select>
              </div>
              <div>
                <el-checkbox> 列表翻页 </el-checkbox>
              </div>
            </div>
            <LabPatList ref="labPatListRef" :labPatList="labPatList" :loading="loading" @select="selectJob"
              :total="total" :dictData="dictData" @search="searchJobs" @page-change="pageChange" />

            <div class="button-group">
              <div class="text1">样本总数：<span>{{ ybs }}</span></div>
              <div class="text2">未审：<span>{{ ws }}</span></div>
              <div class="text3">危：<span>{{ wjs }}</span></div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog v-model="previewShow" title="预览" width="90vw" :close-on-click-modal="false">
      <iFrame v-if="pdfUrl" :src="pdfUrl" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted, toRaw } from 'vue';
import LabPat from './components/labpat.vue';
import SelectTable from '@/components/SelectTable/index.vue';
// @ts-ignore
import iFrame from "@/components/iFrame/index.vue";
// @ts-ignore
import LabResult from './components/labresult.vue';
import LabPatList from './components/labpatlist.vue';
// @ts-ignore
import { comDict } from '@/utils/dict'
import {
  getDate, queryLabPatList, queryLabResults, updateLabPat, queryLabPat,
  check2, uncheck2, unconfirmlog, checkuser, reglimit, queryXmInfo
} from "@/api/liswork/work/LisWork";
import { querylabInstrList, querylabInstrListByLisgroup } from "@/api/liswork/dict/LabInstr";
import { getComDicts, queryComDictListService } from "@/api/liswork/dict/ComDict";

import { ElMessage, ElMessageBox } from "element-plus";


const previewShow = ref(false);

const queryParams = ref({
  pageNum: 1,
  pageSize: 2000,
  jyrq: '2025-08-19',
  yq: '46',
  ybh: '1',
  instrGroup: '02',
  problemId: 0,
  days: 1,
})
const ybs = ref(0)
const ws = ref(0)
const wjs = ref(0)
const activeTab = ref(1)
const tabList = ref([
  { label: '标本列表', value: 1 },
  { label: '历史对照', value: 2 },
  { label: '其他结果', value: 3 },
  { label: '结果复查', value: 4 },
  { label: '收费信息', value: 5 },
  { label: '组合项目', value: 6 },
  { label: '临床意义', value: 7 },
  { label: '样本流转', value: 8 },
])
const labPat = ref<any>(
  {
    jyrq: '',
    yq: '',
    ybh: '',
    brly: '',
    jzbz: '0',
    brdh: '',
    brxm: '',
    brxb: '',
    nl: null,
    nldw: '1',
    ksdh: '',
    ch: '',
    sjys: '',
    sqsj: '',
    cyrq: '',
    dysj: '',
    zd: '',
    bz: '',
    yhdh: '',
    hdys: '',
    jgbz: '0',
    yblx: '',
  },
)
const labPatList = ref<Array<{ ybh: string; jgbz: string }>>([]);
const loading = ref(false)
const total = ref(0)

const rules = ref([])
const instrGroupOptions = ref<any[]>([])
const instrOptions = ref<{ label: string, value: string }[]>([])

const pdfUrl = ref('')
const previewHandle = (url: string) => {
  if (!url) return ElMessage.warning('未查询到文件')
  pdfUrl.value = `data:application/pdf;base64,${url}`
  previewShow.value = true
}
const handleinstrGroupChange = (val: any) => {
  queryParams.value.yq = ''
  // labResuts.value = []
  // labPat.value = {}
  getYqConfig()
}

const yqHandleChange = (val: any) => {
  labResuts.value = []
  labPat.value = {}
  fetchlabPatList()
}
const instrGroupFields = ref([
  { prop: 'zddh', label: '代号', width: 80, enablePinyinSearch: true },
  { prop: 'zdmc', label: '名称', width: 150, enablePinyinSearch: true },
])

// 部门
const loadinstrGroupOptions = () => {
  getComDicts({ zdlb: 'GROUP' }).then((res: any) => {
    instrGroupOptions.value = res.data
    queryParams.value.instrGroup = '02'
    queryParams.value.yq = '46'
    getYqConfig()
  });
}

const yqFields = ref([
  { prop: 'yq', label: '代号', width: 80, enablePinyinSearch: true },
  { prop: 'yqmc', label: '名称', width: 150, enablePinyinSearch: true },
])
// 仪器
const getYqConfig = () => {
  querylabInstrListByLisgroup({ pageNum: 1, pageSize: 100, lisgroup: queryParams.value.instrGroup })
    .then((res: any) => {
      if (res.code == 200) {
        instrOptions.value = res.rows.map((item: any) => ({
          yq: item.yq.trim(),
          yqmc: item.yqmc
        }))
      }
    })
}

const highlightRowIndex = ref(-1)
const labPatListRef = ref()
//样本列表点击切换样本信息,同步载入左边样本信息表单和中间结果表单
const selectJob = (job: any) => {
  // 复制选中的job数据到当前编辑状态
  // Object.assign(labPat.value, {...job})
  queryParams.value.jyrq = job.jyrq;
  queryParams.value.yq = job.yq.trim();
  queryParams.value.ybh = job.ybh;
  fetchLabResults();
  fetchLabPat();
  highlightRowIndex.value = labPatList.value.findIndex((item: any) => item.ybh.toLowerCase().includes(queryParams.value.ybh));
}
const labResuts = ref([])
//载入样本结果表单(中间labresult.vue组件)
const fetchLabResults = async () => {
  queryLabResults({ jyrq: queryParams.value.jyrq, yq: queryParams.value.yq, ybh: queryParams.value.ybh }).then((response: any) => {
    labResuts.value = response.data;
  })
}

//载入样本编辑表单(左边labpat.vue组件)
const fetchLabPat = () => {
  queryLabPat(queryParams.value).then((response: any) => {
    labPat.value = response.data[0];
  })
}

const handleQuery = () => {
  if (!labPatList.value.length) return
  // fetchlabPatList()
  if (!queryParams.value.ybh) {
    highlightRowIndex.value = -1;
    return;
  }

  // 查找匹配的行
  const matchedIndex = labPatList.value.findIndex((item: any) => item.ybh.toLowerCase().includes(queryParams.value.ybh));
  const row = labPatList.value[matchedIndex]
  if (matchedIndex !== -1) {
    highlightRowIndex.value = matchedIndex;
    // 等待DOM更新后滚动到目标行
    nextTick(() => {
      labPatListRef.value.setCurrentRow(row);
    });
  } else {
    highlightRowIndex.value = -1;
  }
  selectJob(row);
}

const handlePrev = () => {
  if (highlightRowIndex.value > 0) {
    highlightRowIndex.value--;
    const row = labPatList.value[highlightRowIndex.value];
    labPatListRef.value.setCurrentRow(row);
    selectJob(row);
  }
}
const handleNext = () => {
  if (highlightRowIndex.value < labPatList.value.length - 1) {
    highlightRowIndex.value++;
    const row = labPatList.value[highlightRowIndex.value];
    labPatListRef.value.setCurrentRow(row);
    selectJob(row);
  }
}


// 改变样本列表中样本状态
const changeStatus = (updatedPat: any) => {
  const index = labPatList.value.findIndex((item: any) => item.ybh == updatedPat.ybh);
  if (index !== -1) {
    labPatList.value[index] = updatedPat;
    labPat.value = updatedPat;
    highlightRowIndex.value = index;
    // 等待DOM更新后滚动到目标行
    nextTick(() => {
      labPatListRef.value.setCurrentRow(updatedPat);
    });
    selectJob(updatedPat)
  }
};
//样本列表检索时刷新列表信息
const searchJobs = async (text: string, page: number, size: number) => {
  queryParams.value.pageNum = page
  queryParams.value.pageSize = size
  fetchlabPatList()
}
//样本列表翻页时刷新列表信息
const pageChange = async (page: number, size: number) => {
  queryParams.value.pageNum = page
  queryParams.value.pageSize = size
  fetchlabPatList()
}


//载入样本列表(右边labpatlist.vue组件)
const fetchlabPatList = () => {
  loading.value = true;
  queryLabPatList(queryParams.value).then((res: any) => {
    if (res.code == 0) {
      labPatList.value = res.data;
      loading.value = false;
      if (res.data.length > 0) {
        highlightRowIndex.value = 0;
        labPat.value = res.data[0];
        labPatListRef.value.setCurrentRow(res.data[0]);
        selectJob(res.data[0])
        ybs.value = res.data.length
        ws.value = res.data.filter((item: any) => item.jgbz != 2).length
        wjs.value = res.data.filter((item: any) => item.alarmflag == 1).length
      }
    }
  })
}


loadinstrGroupOptions()
fetchlabPatList()


interface DictData {
  PT?: Array<any>;
  AU?: Array<any>;
  SX?: Array<any>;
  DP?: Array<any>;
  BT?: Array<any>;
  SRD?: Array<any>;
  HOS?: Array<any>;
  [key: string]: any[] | undefined; // 添加索引签名以支持动态访问
}
// 字典数据存储
const dictData = ref<DictData>({});

onMounted(async () => {
  // 加载病人来源字典
  const dictRefs = await comDict('PT', 'AU', 'SX', 'DP', 'BT', 'SRD', 'HOS');

  // 从 ref 中获取实际数据
  dictData.value = {
    PT: toRaw(dictRefs.PT.value) || [],
    AU: toRaw(dictRefs.AU.value) || [],
    SX: toRaw(dictRefs.SX.value) || [],
    DP: toRaw(dictRefs.DP.value) || [],
    BT: toRaw(dictRefs.BT.value) || [],
    SRD: toRaw(dictRefs.SRD.value) || [],
    HOS: toRaw(dictRefs.HOS.value) || [],
  };



});
</script>

<style scoped lang="scss">
.app-container {
  background: #F0F3F8;

}

.box-shadow {
  box-shadow: 2px 2px 4px 0px rgba(206, 217, 234, 0.7);
  border-radius: 12px;
  padding: 12px;
  background-color: #fff;
}

.compact-form {
  border-bottom: 1px solid #E1E9F7;
  margin-bottom: 16px;
}

.card-content {
  max-height: 450px;
  /* 设置最大高度 */
  overflow-y: auto;
  /* 超出高度时显示垂直滚动条 */
  padding: 5px;
  /* 保持与卡片默认一致的内边距 */
}

.tab-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  border: 1px solid #fff;
  border-radius: 12px;
  background-color: #fff;

  .text {
    font-weight: 400;
    font-size: 16px;
    color: #1F6DD3;
    width: 110px;
    height: 48px;
    line-height: 48px;
    text-align: center;

    &:first-child {
      border-radius: 12px 0 0 12px;
    }

    &:last-child {
      border-radius: 0 12px 12px 0;
    }
  }

  .active {
    background: #e9f1fb;
    color: #1F6DD3;
    font-weight: 600;
    font-family: SourceHanSansCN, SourceHanSansCN;
  }
}

.button-group {
  display: flex;
  justify-content: space-around;
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 500;
  font-size: 16px;
  color: #28BDBB;
  margin-top: 20px;

  span {
    display: inline-block;
    width: 150px;
    height: 32px;
    background: rgba(40, 189, 187, 0.1);
    border-radius: 16px;
    border: 1px solid #28BDBB;
    vertical-align: middle;
    text-align: center;
  }


  .text2 {
    color: #1F33FF;

    span {
      background: rgba(212, 229, 255, 0.5);
      border: 1px solid #96B8D9;
    }
  }

  .text3 {
    color: #FF0000;

    span {
      background: rgba(255, 193, 193, 0.5);
      border: 1px solid #FF0000;
    }
  }
}
</style>