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

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

const userStore = useUserStoreWithOut();

interface MenuItem {
  title: string;
  corner?: number;
  path?: string;
  icon: string;
}
const navMenus: 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",
  },
  {
    title: "我的周报",
    icon: "../assets/images/wdrz_icon.png",
  },
];
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: "我的考勤",
    icon: "../assets/images/wdkq_icon.png",
  },
  {
    title: "我的资产",
    path: "asset",
    icon: "../assets/images/wdzc_icon.png",
  },
  {
    title: "通知公告",
    corner: 1,
    icon: "../assets/images/tzgg_icon.png",
  },
];
const router = useRouter();
const toPageHandle = (path: string) => {
  router.push({
    path
  })
};
const toProcessHandle = (item: ProcessMenuItem): void => {
  createProcessByModalId({
    templateId: item.instanceId,
  }).then((result: any) => {
    if (typeof result === "string") {
      location.href=result
    }
  });
};
</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"] }}</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>