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-19 11:51:27
 * @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>
          <img src="../../assets/img/home-equip.png" alt="" />
          <p>仪器预约</p>
        </li>
        <li>
          <img src="../../assets/img/home-in.png" alt="" />
          <p>入室申请</p>
        </li>
        <li>
          <img src="../../assets/img/home-appoint.png" alt="" />
          <p>入室预约</p>
        </li>
        <li>
          <img src="../../assets/img/home-tech.png" alt="" />
          <p>技术委托</p>
        </li>
        <li @click="onRouterPush('/training')">
          <img src="../../assets/img/home-training.png" alt="" />
          <p>培训报名</p>
        </li>
        <li @click="onRouterPush('/exam-cover')">
          <img src="../../assets/img/home-animal.png" alt="" />
          <p>动物笼位</p>
        </li>
        <li>
          <img src="../../assets/img/home-file.png" alt="" />
          <p>资料下载</p>
        </li>
        <li>
          <img src="../../assets/img/home-fund.png" alt="" />
          <p>财务中心</p>
        </li>
      </ul>
    </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">
      <h4>
        通知公告
        <span class="link" @click="onRouterPush('/todo', { type: 'notice' })">全部通知>></span>
      </h4>
      <ul class="approval">
        <li v-for="item in noticeList" :key="item.id" @click="onRouterPush('/todo/notice-detail', { id: item.id })">
          <div class="flex justify-between">
            <van-text-ellipsis :content="`【${item.noticeType === '10' ? '公告' : '通知'}】${item.noticeTitle}`" />
            <span class="time">{{ formatDate(new Date(item.noticeTime), 'YYYY-mm-dd') }}</span>
          </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}`" />
            <span class="time">{{ formatDate(new Date(item.startTime), 'YYYY-mm-dd') }}</span>
          </div>
        </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 { useTrainingApi } from '/@/api/training'
  import { useRouter } from 'vue-router'
  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.getProjectGroupList({ 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 () => {
    const [err, res]: ToResponse = await to(executionApi.getOwApproveList({ platformId: 1000103, noPage: true }))
    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.getList({ noPage: true }))
    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()
  })
</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 {
      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;
        li {
          flex: 0 0 25%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          &:nth-child(n + 5) {
            margin-top: 10px;
          }
          img {
            padding: 12px;
            height: 24px;
            width: 24px;
            background-color: #1c9bfd;
            border-radius: 50%;
            overflow: visible;
            margin-bottom: 4px;
          }
          &:nth-child(2) img {
            background-color: #ff751b;
          }
          &:nth-child(3) img {
            background-color: #0dda83;
          }
          &:nth-child(4) img {
            background-color: #595cac;
          }
          &:nth-child(5) img {
            background-color: #0dda83;
          }
          &:nth-child(6) img {
            background-color: #595cac;
          }
          &:nth-child(8) img {
            background-color: #ff751b;
          }
        }
      }
      .approval {
        li {
          padding: 10px;
          background-color: #f9ffff;
          margin-top: 8px;
          border-bottom: 1px solid #ecf5fa;
          a {
            color: #3c78e3;
          }
        }
      }
    }
  }
</style>