fad_oa/ruoyi-ui/src/views/index.vue

<template>
  <div class="home">
    <div v-if="currentRole.roleKey==='temp'">
      <div class="onboarding-homepage">
        <!-- 提示信息 -->
        <el-alert
          title="欢迎加入，请尽快补充您的必要信息！"
          type="info"
          show-icon>
        </el-alert>

        <!-- 数据补充表单 -->
        <el-form :model="employeeData" class="employee-form" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="employeeData.name"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="employeeData.email"></el-input>
          </el-form-item>
          <!-- 根据实际需求添加更多字段 -->
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </el-form>

        <!-- 流程图 -->
        <div class="flow-chart">
          <el-steps :active="activeStep" finish-status="success">
            <el-step title="填写信息"></el-step>
            <el-step title="审批中"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
        </div>
      </div>
    </div>
    <div v-else>
    <el-container style="height: 100vh;">
        <el-main>
          <el-row :gutter="20">
            <!-- 右侧展示区域 -->
            <el-col :span="18" class="content-area">
              <announcements />
              <financial-charts />
            </el-col>

            <!-- 左侧功能区域 -->
            <el-col :span="6" class="sidebar">
              <quick-access />
              <inventory />
              <project-management />
            </el-col>
          </el-row>
        </el-main>


    </el-container>

    </div>
  </div>
</template>

<script>
import { getCache } from "@/api/monitor/cache";
import { getFinishedCount, getOwnCount, getTodoListCount } from "@/api/oa/homeCount";
import { getNotice, listNoticeLimit } from "@/api/system/notice";
import QuickAccess from "../components/QuickAccess/index.vue";
import Inventory from "../components/Inventory/index.vue";
import Announcements from "../components/Announcements/index.vue";
import ProjectManagement from "../components/ProjectManagement/index.vue";
import FinancialCharts from "../components/FinancialCharts/index.vue";
import {currentRole} from "@/api/system/role";

export default {
  name: "Index",
  components: {
    FinancialCharts,
    ProjectManagement,
    Announcements,
    Inventory,
    QuickAccess,
  },
  data() {
    return {
      // 新员工填写的信息
      employeeData: {
        name: "",
        email: "",
        // 其他必要字段
      },
      // 当前步骤，从 0 开始计数
      activeStep: 0,
      version: "0.8.3",
      commandstats: null,
      usedmemory: null,
      cache: [],
      finishedCount: 0,
      todoListCount: 0,
      ownCount: 0,
      noticeList: [],
      noticeTitle: '',
      noticeContent: '',
      drawer: false,
      currentRole:{}
    };
  },
  created() {
    this.getCurrentUserRole();
    this.getList();
    this.getListNotice();
  },
  methods: {
    submitForm() {
      // 这里可以加入表单验证与提交逻辑
      // 模拟提交后进入下一流程（例如审批中）
      this.activeStep = 1;
      this.$message({
        message: "表单提交成功，进入审批流程！",
        type: "success"
      });
    },
    getCurrentUserRole(){
      currentRole().then(res => {
        this.currentRole = res.data;
      })
    },
    getList() {
      getCache().then((response) => {
        this.cache = response.data;
        this.$modal.closeLoading();
      });
    },
    getListNotice() {
      this.loading = true;
      listNoticeLimit().then((response) => {
        this.noticeList = response;
        this.loading = false;
      });
    },
    toDrawer(nid) {
      this.drawer = true;
      getNotice(nid).then((res) => {
        this.noticeTitle = res.data.noticeTitle;
        this.noticeContent = res.data.noticeContent;
      });
    },
    goTarget(href) {
      this.$router.push({path: href});
    },
  },
};
</script>

<style scoped lang="scss">
.onboarding-homepage {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}
.employee-form {
  margin-top: 20px;
  margin-bottom: 30px;
}
.flow-chart {
  margin-top: 30px;
}
/* 栅格列样式 */
.content-area {
  background: #fff;
}

/* 左侧功能区域 */
.sidebar {
  background: #f9f9f9;
}

/* 响应式隐藏侧边栏 */
@media screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }

  .content-area {
    width: 100% !important;
  }
}
</style>