labsop_h5/src/view/home/index.vue

<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-03-11 18:02:10
 * @LastEditors: wanglj wanglijie@dashoo.cn
 * @LastEditTime: 2025-03-28 10:55:46
 * @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="app-container">
    <!-- <header>
      <div class="search">
        <input v-model="state.form.keyWord" type="text" placeholder="输入关键词进行搜索" />
        <button @click="onSearch">搜索</button>
      </div>
      <ul>
        <li>仪器设备</li>
        <li>技术平台</li>
        <li>技术服务</li>
        <li>审批流程</li>
      </ul>
    </header> -->
    <div class="card">
      <h4>常用功能</h4>
      <ul class="nav">
        <li @click="onRouterPush('/instr-list')" v-auth="'h5-home-instr'">
          <img src="../../assets/img/仪器预约.png" alt="" />
          <p>仪器预约</p>
        </li>
        <li @click="onRouterPush('/entry')" v-auth="'h5-home-entry'">
          <img src="../../assets/img/入室申请.png" alt="" />
          <p>入室管理</p>
        </li>
        <!-- <li>
          <img src="../../assets/img/入室预约.png" alt="" />
          <p>入室预约</p>
        </li> -->
        <!-- <li v-auth="'h5-home-tech'">
          <img src="../../assets/img/技术委托.png" alt="" />
          <p>技术委托</p>
        </li> -->
        <li @click="onRouterPush('/training')" v-auth="'h5-home-training'">
          <img src="../../assets/img/培训考试.png" alt="" />
          <p>培训考试</p>
        </li>
        <li @click="onRouterPush('/my-cage')" v-auth="'h5-home-animal'">
          <img src="../../assets/img/动物笼位.png" alt="" />
          <p>动物笼位</p>
        </li>
        <!-- <li v-auth="'h5-home-reagent'">
          <img src="../../assets/img/试剂耗材.png" alt="" />
          <p>试剂耗材</p>
        </li> -->
        <!-- <li v-auth="'h5-home-more'">
          <img src="../../assets/img/更多应用.png" alt="" />
          <p>更多应用</p>
        </li> -->
        <li @click="onRouterPush('/inst/repairReport/home')" v-if="userInfos.userRoles !== 'project_group_member'">
          <img src="../../assets/img/更多应用.png" alt="" />
          <p>仪器报修</p>
        </li>
        <li @click="onRouterPush('/lab/inspection/home')" v-if="userInfos.userRoles !== 'project_group_member'">
          <img src="../../assets/img/更多应用.png" alt="" />
          <p>巡检任务</p>
        </li>
      </ul>
    </div>
    <div class="swipe-con flex justify-between mt10">
      <van-swipe class="my-swipe" :autoplay="5000" :show-indicators="false" vertical height="30">
        <van-swipe-item v-for="item in noticeList" :key="item.id"
          @click="onRouterPush('/notice/detail', { id: item.id })">
          <div class="flex justify-between">
            <span>{{ `【${item.noticeType === '10' ? '公告' : '通知'}】${item.noticeTitle}` }}</span>
            <span class="time">{{ formatDate(new Date(item.noticeTime), 'YYYY-mm-dd') }}</span>
          </div>
        </van-swipe-item>
      </van-swipe>
      <a href="javascript:void(0);" @click="onRouterPush('/notice')">更多</a>
    </div>
    <!-- <div class="card">
      <h4>
        审批流程
        <span class="link" @click="onRouterPush('/todo', { type: 'approval' })">全部审批>></span>
      </h4>
      <ul class="approval">
        <li v-for="item in approvalList" :key="item.id">
          <div class="flex justify-between">
            <van-text-ellipsis :content="`${item.instTitle}`" />
            <span class="time">{{ formatDate(new Date(item.createdTime), 'YYYY-mm-dd') }}</span>
          </div>
          <div class="flex justify-between">
            <van-text-ellipsis :content="`您提交的${item.defName}正在审核`" />
            <a href="javascript:void(0);" @click="onRouterPush('/todo/approval-detail', { id: item.id })">查看详情</a>
          </div>
        </li>
      </ul>
    </div> -->
    <div class="card mb20">
      <h4>
        培训通知
        <span class="link" @click="onRouterPush('/training')">全部培训>></span>
      </h4>
      <ul class="approval">
        <li v-for="item in trainingList" :key="item.id" @click="onRouterPush('/training/enroll', { state: item.id })">
          <div class="flex justify-between">
            <van-text-ellipsis :content="`${item.title}`" />
            <van-tag v-if="item.status === '40'">已结束</van-tag>
            <van-tag v-if="item.status !== '40' && item.applyStatus === '10'" type="warning">未报名</van-tag>
            <van-tag v-else-if="item.status !== '40' && item.applyStatus === '20'" type="primary">已报名</van-tag>
          </div>
          <footer class="flex justify-between">
            <span>发布人：{{ item.createdName }}</span>
            <span>{{ formatDate(new Date(item.startTime), 'YYYY-mm-dd') }}</span>
          </footer>
        </li>
      </ul>
    </div>
  </div>
</template>

<script name="home" lang="ts" setup>
import to from 'await-to-js'
import { formatDate } from '/@/utils/formatTime'
import { onMounted, reactive, ref } from 'vue'
import { useDictApi } from '/@/api/system/dict'
import { useProApi } from '/@/api/project'
import { useDeptApi } from '/@/api/system/dept'
import { useExecutionApi } from '/@/api/execution'
import { useNewsApi } from '/@/api/system/news'
import { useUserApi } from '/@/api/system/user'
import { useTrainingApi } from '/@/api/training'
import { useRouter } from 'vue-router'
import { useUserInfo } from '/@/stores/userInfo'

import { useUserInfos } from '/@/hooks/useUserInfos'

const { userInfos } = useUserInfos()
const newsApi = useNewsApi()
const dictApi = useDictApi()
const proApi = useProApi()
const deptApi = useDeptApi()
const executionApi = useExecutionApi()
const trainingApi = useTrainingApi()
const approvalList = ref<any[]>([])
const noticeList = ref<any[]>([])
const trainingList = ref<any[]>([])
const userTypeList = ref(<RowDicDataType[]>[])
const userSexList = ref(<RowDicDataType[]>[])
const userCertList = ref(<RowDicDataType[]>[])
const deptData = ref(<any[]>[])
const pjtList = ref(<any[]>[])
const pjtTypeList = ref(<any[]>[])
const router = useRouter()
const state = reactive({
  form: {
    keyWord: ''
  }
})
const getDicts = () => {
  Promise.all([
    dictApi.getDictDataByType('sys_user_type'),
    dictApi.getDictDataByType('sys_com_sex'),
    dictApi.getDictDataByType('sys_user_certificate'),
    deptApi.getDeptTree(),
    proApi.getProjectGroupListForApp({ noPage: true }),
    dictApi.getDictDataByType('sci_pjt_level'),
  ]).then(([type, sex, cert, dept, pjt, pjtType]) => {
    userTypeList.value = type.data.values || []
    userSexList.value = sex.data.values || []
    userCertList.value = cert.data.values || []
    deptData.value = dept.data || []
    pjtList.value = pjt.data.list || []
    pjtTypeList.value = pjtType.data.values || []
  })
}
const getApprovalList = async () => {
  // todo 平台id参数需要删除
  const [err, res]: ToResponse = await to(executionApi.getOwApproveList({ platformId: 1000103, pageNum: 1, pageSize: 3 }))
  if (err) return
  approvalList.value = res?.data?.list || []
}
const getNotice = async () => {
  const [err, res]: ToResponse = await to(newsApi.getNoticeList())
  if (err) return
  noticeList.value = res?.data?.list || []
}
const getTrainingList = async () => {
  const [err, res]: ToResponse = await to(trainingApi.getListForUser({ pageNum: 1, pageSize: 3, isAll: "10" }))
  if (err) return
  trainingList.value = res?.data?.list || []
}
const onSearch = () => { }
const onRouterPush = (val: string, params?: any) => {
  router.push({
    path: val,
    query: { ...params }
  })
}
onMounted(() => {
  getDicts()
  getApprovalList()
  getNotice()
  getTrainingList()
  useUserApi().updateUserWxInfo({
    wechatOpenId: localStorage.getItem('openId'),
    wechatUnionId: localStorage.getItem('unionId')
  })
})
</script>

<style lang="scss" scoped>
.app-container {
  header {
    padding: 12px;
    border-radius: 8px;
    background-color: #1c9bfd;
    margin-top: 10px;

    .search {
      display: flex;
      border-radius: 4px;
      overflow: hidden;
      height: 28px;

      input {
        flex: 1;
        outline: none;
        border: none;
        padding: 0 10px;
        line-height: 28px;
      }

      button {
        border: none;
        border-left: 1px solid #d7d7d7;
        background-color: #fff;
        color: #3c78e5;
        padding: 0 20px;
        font-weight: bold;
      }
    }

    ul {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;

      li {
        color: #fff;
        height: 14px;
        line-height: 14px;

        &::before {
          display: inline-block;
          content: '';
          height: 14px;
          width: 14px;
          border-radius: 9px;
          background-color: #ffff;
          vertical-align: top;
          margin-right: 2px;
        }
      }
    }
  }

  .card {
    min-height: 60px;
    margin-top: 10px;
    border-radius: 4px;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

    h4 {
      height: 18px;
      line-height: 18px;
      display: flex;

      span {
        font-weight: normal;
        margin-left: auto;
      }

      &::before {
        display: inline-block;
        content: '';
        width: 3px;
        height: 18px;
        background-color: #1c9bfd;
        margin-right: 4px;
        vertical-align: middle;
      }
    }

    .time {
      color: #f69a4d;
    }

    .nav {
      display: flex;
      margin: 10px 0;
      flex-wrap: wrap;
      font-weight: normal;

      li {
        flex: 0 0 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &:nth-child(n + 5) {
          margin-top: 10px;
        }

        img {
          height: 48px;
          width: 48px;
          margin-bottom: 4px;
        }
      }
    }

    .approval {
      li {
        padding: 10px;
        background-color: #f9f9f9;
        margin-top: 8px;
        border-bottom: 1px solid #ecf5fa;

        .van-text-ellipsis {
          font-weight: bold;
          font-size: 16px;
        }

        footer {
          color: #969799;
        }

        a {
          color: #3c78e3;
        }
      }
    }
  }

  .swipe-con {
    display: flex;

    .my-swipe {
      flex: 1;
      height: 30px !important;
      line-height: 30px !important;

      :deep(.flex) {
        height: 30px;
        overflow: hidden;

        span {
          display: inline-block;
          height: 30px;
          line-height: 30px;
        }

        span:first-child {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    >a {
      flex: 0 0 28px;
      margin-left: 4px;
      color: #3c78e3;
    }
  }
}
</style>