zgty-mas-m/pages/analysis/sample/sample-report-search.vue

<template>
  <view>
    <navbar-back :autoBack="false" title="分析记录" @leftClick="customBack"></navbar-back>
    <u-row gutter="16">
      <u-col span="4">
        <view class="content-title-name">
          <text>任务列表</text>
        </view>
        <u-gap height="5" bg-color="#0055A2"></u-gap>
        <scroll-view
          style="height: 82vh"
          scroll-y
          scroll-with-animation
          class="content-main-left"
          :scroll-top="scrollTop"
          @scrolltolower="handleScrolltolower"
        >
          <TaskItem
            v-for="(task, index) in listData"
            :key="index"
            :task="task"
            :seq="index + 1"
            :active="selectedIndex === index"
            @click="switchTask(index)"
          >
            <template #tag="{ task }">
              <u-icon v-if="task.flowStatus === 'approved'" name="/static/images/status/completed.png" size="45" />
              <u-icon v-else name="/static/images/status/wait_for_audit.png" size="45" />
            </template>
          </TaskItem>
          <up-loadmore :status="loadStatus" />
        </scroll-view>
      </u-col>
      <u-col span="8">
        <view class="content-title-name">
          <text>样品列表</text>
        </view>
        <u-gap height="5" bg-color="#0055A2"></u-gap>
        <view>
          <scroll-view scroll-y scroll-with-animation style="height: calc(82vh - 60px)">
            <block v-for="(sample, index) in sampleList" :key="index">
              <view class="sample-item">
                <u-row @click="showSampleDetail(sample.businessAssayTaskDataId, index)">
                  <u-col span="2" class="text-center">
                    <view>
                      <text>【{{ index + 1 }}】</text>
                    </view>
                  </u-col>
                  <u-col span="4">
                    <view>
                      <text class="pl5">{{ sample.sampleAssayCode }}</text>
                    </view>
                    <view class="mt10">
                      <text class="pl5">
                        {{ sample.sampleName }}
                      </text>
                    </view>
                  </u-col>
                  <u-col span="4">
                    <view>
                      <rich-text :nodes="sample.assayProject"> </rich-text>
                    </view>
                  </u-col>
                </u-row>
                <u-icon class="sample-status" name="/static/images/status/return_b.png" size="45" />
              </view>
            </block>
          </scroll-view>
          <view class="content-main-right-operation">
            <u-row>
              <u-col span="3"></u-col>
              <u-col span="6">
                <u-button class="btn-operation" type="primary" @click="previewPDF" v-if="currentTask.id">
                  任务单预览
                </u-button>
              </u-col>
              <u-col span="3"> </u-col>
            </u-row>
          </view>
        </view>
      </u-col>
    </u-row>

    <sample-detail-popup
      ref="sampleDetailPopup"
      v-model:showPopup="showDetailPopup"
      :detailId="detailId"
    ></sample-detail-popup>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad, onBackPress, onPullDownRefresh } from '@dcloudio/uni-app'
import SampleDetailPopup from '@/components/sample/sample-detail-popup.vue'
import TaskItem from './components/task-item.vue'
import nx from '@/nx'
import { useListData } from '@/nx/hooks/usePageListData'
import { getDataSourceTypeShow } from '../common'

// 响应式数据
const scrollTop = ref(0)
const selectedIndex = ref(0)
const sampleList = ref([])
const showDetailPopup = ref(false)
const detailId = ref('')

// 计算属性
const userInfo = computed(() => nx.$store('user').userInfo)

// 方法
const customBack = () => {
  uni.reLaunch({ url: '/pages/analysis/index/index' })
}

function handleScrolltolower() {
  scrollToLower()
}

const currentTask = computed(() => {
  if (listData.value.length > 0) {
    return listData.value[selectedIndex.value]
  } else {
    return {}
  }
})
const switchTask = async index => {
  if (index === selectedIndex.value) return
  selectedIndex.value = index
  getAssayTaskDetail(currentTask.value.id)
}

const showSampleDetail = (id, index) => {
  detailId.value = id
  showDetailPopup.value = true
}
const searchParams = computed(() => ({
  taskAssignStatus: 'submitted',
  taskAssayStatus: 'submitted'
}))

const { listData, scrollToLower, loadStatus, getInitData } = useListData({
  searchParams,
  api: nx.$api.assayTask.getAssayTaskPage
})

const getAssayTaskDetail = async businessAssayTaskId => {
  const res = await nx.$api.assayTask.getAssayTaskDetailList({ businessAssayTaskId })
  sampleList.value = res || []
}

const previewPDF = () => {
  const { id, configReportTemplateKey } = currentTask.value
  const url = `/pages/analysis/sample/pdf-preview?businessAssayTaskId=${id}&reportKey=${configReportTemplateKey}`
  uni.navigateTo({ url })
}

// 生命周期
onMounted(async () => {
  await getInitData()
  if (listData.value.length > 0) {
    getAssayTaskDetail(currentTask.value.id)
  }
})

onBackPress(() => {
  customBack()
  return true
})
</script>

<style lang="scss" scoped>
.content-title-name {
  height: 60px;
  box-sizing: border-box;
  font-size: 20px;
  padding: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sample-item {
  position: relative;
  border-bottom: 1px solid #eee;
  padding: 4px;
  .sample-status {
    position: absolute;
    top: 0;
    right: 0;
  }
}
.content-main-left {
  background-color: #f6f6f6;
}
.content-main-right-operation {
  height: 50px;
  padding-top: 10px;
  padding-right: 10px;
}
.btn-operation {
  font-size: 18px;
  width: 95%;
}
.selected_Sample {
  background-color: #d7e9fa;
}
</style>