山东大学项目实训审计系统（三）主界面

一、设计分析

1.个人信息：显示个人信息如账号、姓名、身份、电子签名

2.我的审计：创建审计项目、查看审计项目

3.我的审批：对提交的审计项目进行查看并审批

4.文件模板：下载已上传的文件模板

二、具体代码

1.主页

<template>
<!--  <el-container style="height: 500px; border: 1px solid #eee">-->
  <el-container style="height: 100%;width: 100%">
    <el-header height="50px" style="background-color: #1491bd;color: white;
    margin-top: -10px;margin-left: -8px;margin-right: -8px">
      <span>山东大学审计系统</span>
      <div style="float: right">
        <a href="#" style="margin-right: 20px">退出</a><span v-html=username></span>
      </div>

    </el-header>
          <el-container style="height: 100%;width: 100%">
            <el-aside width="200px" style="height: 100%">
              <el-menu :default-openeds="default_openeds_array"
                       :default-active=activeIndex
                       @open="handleOpen"
                       @close="handleClose"
                       @select="handleSelect"
                       style="background-color: white"
                       active-text-color=#409dfe
                       >
                <el-menu-item index="1" @click="open_geren">
                  <span slot="title"><i class="el-icon-user" ></i>个人中心</span>
                </el-menu-item>
                <el-menu-item index="2" @click="open_wodeshenji">
                  <span slot="title"><i class="el-icon-edit-outline"></i>我的审计</span>
                </el-menu-item>
                <el-menu-item index="3" @click="open_wodeshenpi">
                  <span slot="title"><i class="el-icon-document-checked" ></i>我的审批</span>
                </el-menu-item>
                <el-menu-item index="4" @click="open_moban">
                  <span slot="title"><i class="el-icon-document" ></i>文件模板</span>
                </el-menu-item>
              </el-menu>
            </el-aside>
            <el-main>
              <geren v-show=geren></geren>
              <wodeshenji :username=username v-show=wodeshenji></wodeshenji>
              <wodeshenpi :username=username v-show=wodeshenpi></wodeshenpi>
              <moban v-show=moban></moban>
            </el-main>
        </el-container>
  </el-container>



</template>
<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  margin-left: -20px;
  margin-right: -20px;
  background-color: white;
  height: 100%;
  border: 1px solid #eee;
}
.el-submenu__title,.el-menu-item{
  color: black;
  /*background-color: #2b2b2b;*/
  background-color: white;
}
/*设置悬浮时的背景颜色统一*/
.el-menu-item:hover,.el-submenu__title:hover{
  background-color: #ebf4fe;
}

</style>
<style>

::-webkit-scrollbar {
  width: 6px;
  height: 3px;
  background-color: white;
}

/*定义滑块颜色+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: grey;
}

/*定义滚动条轨道内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: white;
}
</style>

<script>
import wodeshenji from "../components/wodeshenji";
import wodeshenpi from "../components/wodeshenpi";
import shenpi from "../components/shenpi";
import moban from "../components/moban";
import geren from "../components/geren";
import axios from "axios";
export default {
  components: {
    wodeshenji,
    wodeshenpi,
    shenpi,
    moban,
    geren,
  },
  data() {
    normal_search: '';
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
      state:'审核中'
    };
    return {
      tableData: Array(13).fill(item),
      normal_search:'',
      username:'张三',

      geren:false,
      wodeshenji:false,
      wodeshenpi:false,
      moban:false,

      activeIndex:'',
      default_openeds_array:[],


    }

  },
  mounted(){
    let token = localStorage.getItem("token");
    console.log(token);
    axios.get("http://10.2.9.173/api/user", {
      headers: {
        "token": token
      }
    }).then(res => {
      let user = res.data.content;
      // user.name
      //