整合前端

ruoyi-ui/src/components/QuickEntry/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="quick-entry-container">
+    <div class="quick-entry-item" v-for="(entry, index) in quickEntries" :key="index" @click="goTarget(entry.url)">
+      <!-- 图标 + Badge -->
+      <div class="icon-wrapper">
+        <!-- 如果有count，则使用el-badge显示，否则只展示图标 -->
+        <el-badge v-if="entry.count !== 0" :value="entry.count" :max="99" class="badge-wrapper">
+          <i :class="entry.icon" class="icon"></i>
+        </el-badge>
+        <i v-else :class="entry.icon" class="icon"></i>
+      </div>
+
+      <!-- 文本说明 -->
+      <span>{{ entry.text }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRemindList } from "@/api/oa/remind";
+import { listTodoProcess } from "@/api/workflow/process";
+
+export default {
+  name: "QuickEntry",
+  data () {
+    return {
+      quickEntries: [
+        // 这四个入口需要在右上角显示数量
+        { icon: "el-icon-user", text: "待办任务", count: 0, url: 'work/todo' },
+        { icon: "el-icon-bell", text: "事件提醒", count: 0, url: 'hint/home' },
+        { icon: "el-icon-warning", text: "问题反馈", count: 0, url: 'hint/feedback' },
+        { icon: "el-icon-setting", text: "个人中心", url: 'user/profile' },
+        { icon: "el-icon-date", text: "每日报工", url: 'hint/projectReport' },
+        { icon: "el-icon-view", text: "项目中心", url: 'project/project' },
+        // 下面示例：不需要显示数量的入口，不加 count 即可
+        // { icon: "el-icon-document", text: "抄送文件", url: 'work/copy' },
+        { icon: "el-icon-edit-outline", text: "请假申请", url: 'hrm/HrmLeaveRequest' },
+        { icon: "el-icon-guide", text: "差旅申请", url: 'hrm/HrmTravelRequest' },
+        { icon: "el-icon-coordinate", text: "用印申请", url: 'hrm/HrmSealRequest' },
+        // { icon: "el-icon-chat-line-square", text: "招待申请", url: 'claim/entertain' },
+        // { icon: "el-icon-money", text: "拨款申请", url: 'claim/money' },
+        { icon: "el-icon-sold-out", text: "报销申请", url: 'hrm/HrmReimburseRequest' },
+        // { icon: "el-icon-folder-add", text: "全部申请", url: 'hrm/apply' },
+        { icon: "el-icon-check", text: "我的代办", url: 'hrm/requests' },
+        { icon: "el-icon-document", text: "抄送我的", url: 'hrm/cc' },
+
+      ],
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 999,
+        targetUserId: this.$store.getters.id,
+      },
+    };
+  },
+  methods: {
+    //路由跳转
+    goTarget (href) {
+      this.$router.push({ path: href });
+    },
+    /** 查询流程定义列表 */
+    getList () {
+      // 代办事项的数量
+      listTodoProcess(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+        this.quickEntries[0].count = response.total;
+      });
+      // 事件提醒的数量
+      getRemindList(this.queryParams).then(response => {
+        this.quickEntries[1].count = response.data.length;
+      });
+    },
+  },
+  created () {
+    this.getList();
+  }
+};
+</script>
+
+<style scoped>
+.quick-entry-card .el-card {
+  padding: 10px;
+}
+
+.quick-entry-container {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(1, 1fr);
+  /* 默认1列 */
+}
+
+.quick-entry-item {
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border: 1px solid #fff;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+  padding: 10px;
+}
+
+/* 响应式媒体查询 */
+@media (min-width: 600px) {
+  .quick-entry-container {
+    grid-template-columns: repeat(2, 1fr);
+    /* 2列 */
+  }
+}
+
+@media (min-width: 768px) {
+  .quick-entry-container {
+    grid-template-columns: repeat(3, 1fr);
+    /* 3列 */
+  }
+}
+
+@media (min-width: 992px) {
+  .quick-entry-container {
+    grid-template-columns: repeat(4, 1fr);
+    /* 4列 */
+  }
+}
+
+@media (min-width: 1200px) {
+  .quick-entry-container {
+    grid-template-columns: repeat(6, 1fr);
+    /* 6列（可根据需求调整） */
+  }
+}
+
+/* 其他原有样式保持不变 */
+.icon-wrapper {
+  position: relative;
+}
+
+.icon {
+  font-size: 24px;
+}
+
+.badge-wrapper .el-badge__content {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+}
+
+.quick-entry-item:hover {
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+</style>