labsop_h5/src/view/laboratory/inspection/index.vue

<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-03-11 18:02:10
 * @LastEditors: wanglj wanglijie@dashoo.cn
 * @LastEditTime: 2025-04-16 16:19:33
 * @FilePath: \vant-demo-master\vant\vue3-ts\src\view\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="entry-container">
    <div class="search-wrap">
      <van-search placeholder="请输入任务名称" v-model="state.queryParams.taskTitle" :clearabled="true" style="padding: 0; flex: 1" class="mr10"></van-search>
      <div>
        <van-button type="primary" style="width: 60px" shape="circle" size="small" @click="onLoad"> 搜索 </van-button>
      </div>
    </div>
    <van-tabs v-model:active="state.queryParams.frcnStatus" @change="changeType">
      <van-tab title="待整改" name="10"></van-tab>
      <van-tab title="整改完成" name="40"></van-tab>
      <van-tab title="全部" name=""></van-tab>
    </van-tabs>
    <div class="list-container">
      <van-list v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in state.list" :key="item" @click.stop="toDetails(item.id)">
          <template #default>
            <div class="list">
              <header class="flex justify-between">
                <strong class="title">{{ `${item.taskTitle}` }}</strong>
                <van-tag v-if="item.frcnStatus == 10" type="primary">待整改</van-tag>
                <van-tag v-else-if="item.frcnStatus == 40" type="success">整改完成</van-tag>
              </header>
              <p class="inst-title">
                <span>实验室名称</span>
                <span class="title ml8"> {{ item.labName }} </span>
              </p>
              <p class="inst-title">
                <span>实验室负责人</span>
                <span class="title ml8"> {{ item.frcnPmName }}</span>
              </p>
              <p class="inst-title">
                <span>限定整改时间</span>
                <span class="title ml8">
                  {{ formatDate(new Date(item.frcnStartDate), 'YYYY-mm-dd') }}~{{ formatDate(new Date(item.frcnEndDate), 'YYYY-mm-dd') }}</span
                >
              </p>
              <p class="inst-title">
                <span>实际整改时间</span>
                <span class="title ml8">{{ formatDate(new Date(item.frcnCompleteDate), 'YYYY-mm-dd') }}</span>
              </p>
              <!-- <footer class="flex justify-between mt4">
                <span class="title">{{ item.createdName }}</span>
                <span class="time">{{ formatDate(new Date(item.createdTime), 'YYYY-mm-dd') }}</span>
              </footer> -->
              <div class="flex mt20 btns">
                <van-button
                  style="width: 70px; height: 30px; margin: 0; font-size: 14px"
                  type="success"
                  size="small"
                  v-if="item.frcnStatus == 10"
                  @click.native.stop="onFeedback(item.id)"
                >
                  反馈
                </van-button>
              </div>
            </div>
          </template>
        </van-cell>
      </van-list>
    </div>
    <van-floating-bubble v-model:offset="offset" icon="plus" @click="onAdd" axis="y" />
  </div>
</template>

<script name="repairReportHome" lang="ts" setup>
  import to from 'await-to-js'
  import { formatDate } from '/@/utils/formatTime'
  import { onMounted, reactive, ref } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useRectificationNewApi } from '/@/api/laboratory/inspection'
  import { showImagePreview, showConfirmDialog, showNotify } from 'vant'
  import 'vant/es/image-preview/style'

  const inspectionNewApi = useRectificationNewApi()

  const router = useRouter()
  const route = useRoute()
  const offset = ref({ x: -80, y: 450 })
  const offsetScan = ref({ x: -80, y: 540 })
  const state = reactive({
    queryParams: {
      taskTitle: '',
      frcnStatus: '10',
      pageNum: 1,
      pageSize: 10
    },
    finished: false,
    loading: true,
    list: [] as any[]
  })

  const changeType = () => {
    state.queryParams.pageNum = 1
    state.list = []
    onLoad()
  }

  const onLoad = async () => {
    const [err, res]: ToResponse = await to(inspectionNewApi.getList(state.queryParams))
    if (err) return
    const list = res?.data?.list || []
    for (const item of list) {
      state.list.push(item)
    }
    state.loading = false
    state.queryParams.pageNum++
    if (list.length < state.queryParams.pageSize) {
      state.finished = true
    }
  }

  onMounted(() => {
    onLoad()
  })

  const onClose = async (item: any) => {
    // showConfirmDialog({
    //   title: '提示',
    //   message: '确认关闭当前报修记录？'
    // }).then(async () => {
    //   const [err, res]: ToResponse = await to(repairReportApi.close({ id: item.id }))
    //   if (err) return
    //   showNotify({ type: 'success', message: '关闭成功' })
    //   changeType() // 刷新列表
    // })
  }

  const showPreviewImg = (fullPhoto: string, index: number) => {
    console.log('fullPhoto', fullPhoto)
    const images = JSON.parse(fullPhoto).map((item: any) => item.url)
    showImagePreview({
      images,
      startPosition: index
    })
  }

  const onAdd = () => {
    router.push('/lab/inspection/addInspTask')
  }

  const toDetails = async (id: number) => {
    router.push('/lab/inspection/details?id=' + id)
  }

  const onFeedback = (id: number) => {
    router.push('/lab/inspection/feedback?id=' + id)
  }
</script>

<style lang="scss" scoped>
  .entry-container {
    position: relative;
    display: flex;
    flex-direction: column;
    .list-container {
      overflow-y: auto;
      padding: 10px;
      border-radius: 4px;
      flex: 1;
    }
    .van-list {
      .van-cell {
        background-color: #fff;
        + .van-cell {
          margin-top: 10px;
        }
        header,
        footer {
          color: #333;
        }
        .title {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;
        }
        .inst-title {
          color: #333;
          text-align: left;
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-top: 4px;
          span:first-child {
            color: rgb(120, 120, 120);
          }
        }
        .time {
          color: #f69a4d;
        }
      }
    }
  }
  .pic-col {
    color: #333;
    text-align: left;
    flex: 1;
    margin-top: 4px;
    display: flex;
    span:first-child {
      width: 100px;
      color: rgb(120, 120, 120);
    }
  }
  .btns {
    justify-content: flex-end;
  }
  .search-wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 15px 15px 0;
    background: #fff;
  }
</style>