zjugis_OA/client_h5/src/pages/home/index.vue

<script setup lang="ts">
import { useUserStoreWithOut } from "@/stores/modules/user";
import { getAssetsURI, getStoreObject } from "@/utils/common";
import { getAttendCount, createProcessByModalId } from "@/service/flow";
import request from "@/utils/request";

const userStore = useUserStoreWithOut();

interface MenuItem {
  title: string;
  corner?: number;
  path?: string;
  icon: string;
}
const navMenus = reactive<MenuItem[]>([
  {
    title: "办件中心",
    corner: 1,
    path: "/handleCenter",
    icon: "../assets/images/bjzx_icon.png",
  },
  {
    title: "日志填写",
    icon: "../assets/images/rztx_icon.png",
    path: "daily",
  },
  {
    title: "周报填写",
    icon: "../assets/images/wdxx_icon.png",
    path: "weekly",
  },
  {
    title: "我的日志",
    icon: "../assets/images/wdrz_icon.png",
    path: "myDailyLogs",
  },
  {
    title: "我的周报",
    icon: "../assets/images/wdrz_icon.png",
    path: "myWeeklyLogs",
  },
]);
interface ProcessMenuItem extends MenuItem {
  instanceId: string;
}
const processMenus: ProcessMenuItem[] = [
  {
    title: "请假申请",
    corner: 0,
    icon: "../assets/images/qjsq_icon.png",
    instanceId: "018c1f593f2c09477b1b8c1080b6000b",
  },
  {
    title: "出差申请",
    corner: 0,
    icon: "../assets/images/ccsq_icon.png",
    instanceId: "018c389986fb0947969a8c33d89b000a",
  },
  {
    title: "考情说明条",
    corner: 0,
    icon: "../assets/images/kqsmt_icon.png",
    instanceId: "018c24045d65094794178c23e986001e",
  },
  {
    title: "借款申请",
    corner: 0,
    icon: "../assets/images/jksq_icon.png",
    instanceId: "018e36519fd70a0796ba8dd062c80830",
  },
];

const personMenus: MenuItem[] = [
  {
    title: "我的资产",
    path: "assetMy",
    icon: "../assets/images/wdzc_icon.png",
  },
  {
    title: "通知公告",
    path: 'notice',
    icon: "../assets/images/tzgg_icon.png",
    corner: 0
  },
];
const router = useRouter();
/***
 * 根据用户ID获取待办角标
 */
const initAttendCount = async () => {
  const result = await getAttendCount({
    userId: getStoreObject("_userInfo", "id")
  })
  if (result) {
    navMenus[0]['corner'] = result?.data
  }
}
initAttendCount()
/**
 * 获取通知公告角标
 */
 async function queryNoticeAndLearnCount() {
  const urlApi = `/admin-api/adm/noticeAndLearn/readNo/count`
   const result = await request.get(urlApi)
   personMenus[1]['corner'] = result?.data
}
queryNoticeAndLearnCount()
const toPageHandle = (path: string) => {
  router.push({
    path
  })
};
const toProcessHandle = (item: ProcessMenuItem): void => {
  createProcessByModalId({
    templateId: item.instanceId,
  }).then((result: any) => {
    if (typeof result === "string") {
      //@ts-ignore
      const arr = result.split(window?.locationBaseUrl)
      if (arr.length > 1) {
        router.push(arr[1])
      }
    }
  });
};
</script>

<template>
  <div class="home_box">
    <div class="header">
      <div class="nav">
        <div class="login_info">
          <img src="@/assets/images/user_log.jpg" />
          <span>{{ userStore.userInfo.nickname }}</span>
        </div>
      </div>
      <ul>
        <li
          v-for="(item, index) in navMenus"
          :key="index"
          @click="toPageHandle(item.path as string)"
        >
          <img :src="getAssetsURI(item['icon'])" />
          <p class="title">{{ item["title"] }}</p>
          <span class="corner" v-if="item['corner'] && item['corner'] > 0">{{ item["corner"] }}</span>
        </li>
      </ul>
    </div>
    <div class="content">
      <div class="card">
        <p class="card_title">常用流程</p>
        <ul>
          <li
            v-for="(item, index) in processMenus"
            :key="index"
            @click="toProcessHandle(item)"
          >
            <span class="title">{{ item["title"] }}</span>
            <img :src="getAssetsURI(item['icon'])" />
          </li>
        </ul>
      </div>
      <div class="item">
        <p class="card_title">个人中心</p>
        <ul>
          <li
            v-for="(item, index) in personMenus"
            :key="index"
            @click="toPageHandle(item.path as string)"
          >
            <img :src="getAssetsURI(item['icon'])" />
            <span class="title">{{ item["title"] }}</span>
            <span class="corner" v-if="item['corner']">{{
              item["corner"]
            }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import "./index.scss";
</style>