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.trim="state.queryParams.taskTitle" clearable
        style="padding: 0; flex: 1" class="mr10"></van-search>
      <div>
        <van-button type="primary" style="width: 60px" shape="circle" size="small" @click="onSearch">
          搜索
        </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 v-if="item.frcnStartDate && item.frcnEndDate" class="title ml8">
                  {{ formatDate(new Date(item.frcnStartDate), 'YYYY-mm-dd') }}~{{
                    formatDate(new Date(item.frcnEndDate), 'YYYY-mm-dd')
                  }}
                </span>
                <span v-else class="title ml8">
                  -
                </span>
              </p>
              <p class="inst-title">
                <span>实际整改时间</span>
                <span class="title ml8">
                  {{ item.frcnCompleteDate ? 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-action-bar placeholder>
      <van-action-bar-icon icon="wap-home-o" text="首页" @click="router.push('/home')" />
      <!-- <van-action-bar-icon icon="revoke" text="返回" @click="router.push('/entry')" /> -->
      <!-- <van-action-bar-icon
          :icon="state.instDetail.following ? 'star' : 'star-o'"
          :class="{ follow: state.instDetail.following }"
          :text="state.instDetail.following ? '取消收藏' : '收藏'"
          @click="handleFollowInst"
        /> -->
      <van-action-bar-button type="primary" v-auth="'lab_inspection_add'" text="创建巡检" @click="onAdd" />
    </van-action-bar>
    <!-- <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 = []
  state.finished = false
  state.loading = true
  onLoad()
}

const onLoad = async () => {
  const params = JSON.parse(JSON.stringify(state.queryParams))
  if (!params.taskTitle) {
    delete params.taskTitle
  }
  const [err, res]: ToResponse = await to(inspectionNewApi.getList(params))
  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
  }
}

const onSearch = () => {
  state.queryParams.pageNum = 1
  state.list = []
  state.finished = false
  state.loading = true
  onLoad()
}

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>