lis8.0-vue3/src/views/regional/circulation/bbcx/index.vue

<template>
  <div class="app-container">
    <div class="compact-form">
      <el-form :model="queryParams" ref="queryRef" label-width="5rem" style="width: 100%;" :size="aotuSize">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-form-item label="委托机构：" prop="SrcHospName">
              <SelectTable v-model:data="queryParams.SrcHospName" :fields="ksdhFields" :tableData="hosList"
                label="label" :size="aotuSize" value="label" objKey="label" :border="true" placeholder="请选择委托机构" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="检测医院：" prop="DstHospName">
              <SelectTable v-model:data="queryParams.DstHospName" :fields="ksdhFields" :tableData="hosList"
                label="label" :size="aotuSize" value="label" objKey="label" :border="true" placeholder="请选择" />
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="条码号：" prop="Barcode">
              <el-input v-model="queryParams.Barcode" placeholder="请输入条码号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="姓名：" prop="PatName">
              <el-input v-model="queryParams.PatName" placeholder="请输入姓名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="申请项目：" prop="checkPUR">
              <el-input v-model="queryParams.checkPUR" placeholder="请输入申请项目" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="标本状态：" prop="Status">
              <el-select v-model="queryParams.Status" placeholder="请选择" clearable>
                <el-option v-for="item in regdictList" :label="item.dictName" :value="item.dictCode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="采样人：" prop="AffirmUserName">
              <el-input v-model="queryParams.AffirmUserName" placeholder="请输入采样人" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="签收人：" prop="SignInUserName">
              <el-input v-model="queryParams.SignInUserName" placeholder="请输入签收人" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="时间类型：" prop="DateType">
              <el-select v-model="queryParams.DateType" placeholder="请选择">
                <el-option label="登记时间" value="登记时间" />
                <el-option label="采样时间" value="采样时间" />
                <el-option label="送出时间" value="送出时间" />
                <el-option label="签收时间" value="签收时间" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="日期：" prop="times">
              <el-date-picker v-model="queryParams.times" type="daterange" range-separator="-" start-placeholder="开始时间"
                end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetHandle">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <CustomTable ref="tableRefs" :data="tableData" :columns="columns" :config="tableConfig" :pagination="pagination"
      @size-change="sizeChange" @page-change="currentChange" @row-click="rowHandle">
      <template #patAge="{ row }">
        {{ row.patAge }}{{ row.ageUnit }}
      </template>
      <template #status="{ row }">
        {{ formatDict(row.status, regdictList) }}
      </template>
      <template #patSex="{ row }">
        {{ row.patSex == 1 ? '男' : '女' }}
      </template>
    </CustomTable>

    <!-- 样本流程 -->
    <div class="time-line-box">
      <div v-for="(item, i) in timelineItems" :key="i" class="time-line-item">
        <div v-if="i != 0" class="timeline-connector">
          <img class="timg" src="@/assets/images/yjt.png" alt="">
        </div>
        <div :class="['timeline-content', i > lastTimeIndex ? 'no_active' : '']">
          <div :class="['index', lastTimeIndex == i ? 'active' : '']">{{ i + 1 }}
          </div>
          <div class="timeline-title">{{ item.title }}</div>
          <div class="timeline-time">{{ item.time }}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import CustomTable from '@/components/elTable/index.vue'
import { querySample } from '@/api/regional/index'
import SelectTable from '@/components/SelectTable/index.vue';
import { classCom } from '@/utils/classCom';
const aotuSize = classCom.useAutoSize();
// @ts-ignore
import { listhospital } from "@/api/regional/dict/hospital.js";
// @ts-ignore
import { listregdict } from "@/api/regional/dict/regdict.js";

const queryParams: any = ref({
  pageSize: 50,
  pageNum: 1,
})
const tableData: any = ref([])
const columns: any = ref([
  { prop: 'barcode', label: '条码号', align: 'center', visible: true, width: 150 },
  { prop: 'srcHospName', label: '委托机构', align: 'center', visible: true, width: 200 },
  { prop: 'patName', label: '姓名', align: 'center', visible: true, width: 70 },
  { prop: 'patSex', label: '性别', align: 'center', visible: true, width: 60, slot: "patSex" },
  { prop: 'patAge', label: '年龄', align: 'center', visible: true, slot: "patAge", width: 60 },
  { prop: 'checkPUR', label: '申请项目', align: 'center', visible: true, width: 200 },
  { prop: 'sampleTypeName', label: '标本类型', align: 'center', visible: true, },
  { prop: 'tubeName', label: '采集容器', align: 'center', visible: true, },
  { prop: 'status', label: '标本状态', align: 'center', visible: true, slot: "status" },
  // { prop: 'moveStateName', label: '流转状态', align: 'center', visible: true, },
  { prop: 'affirmUserName', label: '采样人', align: 'center', visible: true, },
  { prop: 'affirmTime', label: '采样时间', align: 'center', visible: true, width: 150 },
  { prop: 'signInUserName', label: '签收人', align: 'center', visible: true, },
  { prop: 'signInTime', label: '签收时间', align: 'center', visible: true, width: 150 },
  { prop: 'dstHospName', label: '检测机构名称', align: 'center', visible: true, width: 150 },
])
const tableConfig = ref({
  border: true, // 边框
  height: '65vh', // 高度
  highlightCurrentRow: true, // 高亮当前行
  // fit: true, // 列宽自适应
})

const pagination = ref({
  show: true,
  total: 0,
  pageSize: 50,
  currentPage: 1,
})

const ksdhFields = ref([
  { prop: 'label', label: '名称', width: 150, enablePinyinSearch: true },
  { prop: 'value', label: '代号', width: 120, enablePinyinSearch: true },
])

// 时间线数据
const timelineItems = ref(
  [
    { title: '检验申请', time: '' },
    { title: '标本采集', time: '' },
    { title: '标本送检', time: '' },
    { title: '标本外送', time: '' },
    { title: '标本签收', time: '' },
    { title: '上机检测', time: '' },
    { title: '结果审核', time: '' },
    { title: '报告发布', time: '' },
  ]
);

// 计算最后一个有时间的节点索引
const lastTimeIndex = computed(() => {

  const lastIndex = timelineItems.value.findLastIndex(item => item.time);
  if (lastIndex === -1) {
    return -1
  } else {
    return lastIndex;
  }
});

const handleQuery = () => {
  if (queryParams.value.times && queryParams.value.times.length > 0) {
    queryParams.value.DateStart = queryParams.value.times[0]
    queryParams.value.DateEnd = queryParams.value.times[1]
  } else {
    queryParams.value.DateStart = ''
    queryParams.value.DateEnd = ''
  }

  getList()
}


const resetHandle = () => {
  queryParams.value = {
    pageSize: 50,
    pageNum: 1,
  }
  handleQuery()
}
const currentChange = (page: { currentPage: number, pageSize: number }) => {
  queryParams.value.pageNum = page.currentPage
  handleQuery()
}
const sizeChange = (page: { currentPage: number, pageSize: number }) => {
  queryParams.value.pageSize = page.pageSize
  handleQuery()
}

const rowHandle = (row: any) => {
  timelineItems.value =
    [
      { title: '检验申请', time: row.orderTime },
      { title: '标本采集', time: row.affirmTime },
      { title: '标本送检', time: row.signInDate },
      { title: '标本外送', time: row.sendPackTime },
      { title: '标本签收', time: row.signInTime },
      { title: '上机检测', time: row.testDate },
      { title: '结果审核', time: row.auditTime },
      { title: '报告发布', time: row.reportTime },
    ]
}

const tableRefs = ref()
const getList = () => {
  querySample(queryParams.value).then((res: any) => {
    tableData.value = res.rows
    pagination.value.total = res.total
    tableRefs.value.setCurrentRow(res.rows[0])
    rowHandle(res.rows[0])
  })
}
const hosList = ref([])
const regdictList: any = ref([])
onMounted(() => {
  getList()
  listhospital().then((res: any) => {
    hosList.value = res.rows.map((item: any) => {
      return {
        label: item.hospitalName,
        value: item.hospitalCode
      }
    })
  })

  listregdict({ pageSize: 100, pageNum: 1, dictType: 'ZT' }).then((res: any) => {
    regdictList.value = res.rows;
  })
})


const formatDict = (v: string, arr: Array<any>) => {
  return arr.find((item: any) => item.dictCode == v)?.dictName || v;
};
</script>

<style scoped lang="scss">
.compact-form {
  .el-form-item {
    margin-bottom: 5px;
  }
}
</style>