day03_20211217_前端代码-奥莱资产管理系统

Home.vue

<template>
  <el-container>
<!--    头部设计-->
    <el-header>
      <HomeHeader ></HomeHeader>
    </el-header>
    <el-divider></el-divider>
    <el-container>
<!--      左边设计-->
      <el-aside width="300px" style="border: solid 1px #ddd">
        <HomeAside></HomeAside>
      </el-aside>
      <el-container>
<!--        主要设计-->
        <el-main>
          <HomeMain></HomeMain>
        </el-main>
<!--        底部设计-->
        <el-footer>
          <HomeFooter></HomeFooter>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import HomeHeader from "@/components/HomeHeader";
import HomeAside from "@/components/HomeAside";
import HomeMain from "@/components/HomeMain";
import HomeFooter from "@/components/HomeFooter";

export default {
  name: "Home",
  components: {HomeFooter, HomeMain, HomeAside, HomeHeader}
}
</script>

<style scoped>

</style>

Login.vue

<template>
    <el-container direction="vertical">
      <el-row>
        <el-col :span="9"></el-col>
        <el-col :span="6">
          <el-form :model="form"  label-width="120px" style="width:500px; height: 200px;margin-top:200px">

            <el-form-item label="用户名：">
              <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="密码：">
              <el-input v-model="form.pwd" show-password></el-input>
            </el-form-item>

            <el-form-item >
              <el-button type="primary" @click="onsubmit">Create</el-button>
              <el-button>Cancel</el-button>
            </el-form-item>
          </el-form>

        </el-col>
        <el-col :span="9"></el-col>
      </el-row>
    </el-container>
</template>

<script>
import {reactive,toRefs} from 'vue';
import axios from 'axios';
import {useRouter} from 'vue-router'
export default {
  name:"Login",
  setup() {
    //  数据和方法的定义

    //  定义表单元素
    //  reactive里面可以放多个对象或者是基本数据类型
    const state = reactive({
      form: {
        name: '',
        pwd: ''
      }
    })
    const router=useRouter();
    const methods={
      // 定义所有的方法，除了生命周期元素函数，如果要被页面元素使用，需要在return返回
      onsubmit(){
        // let uid=state.form.name;
        // let pwd=state.form.pwd;
        let params=new URLSearchParams();
        let url="http://127.0.0.1:8085/login";
        //append方法两个参数，第一个参数对应后端接受的参数，第二个参数是传递的数
        params.append("uid",state.form.name);
        params.append("pwd",state.form.pwd);

        axios.post(url,params).then((result)=>{
          // console.log(result);
          console.log(JSON.stringify(result.data));
          if (result.data.length!=0){
            router.push('/Home');
          }else{
            alert("error");
          }
        })
      }

    }

    //通过return暴露给元素页面
    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>

<style scoped>

</style>

App.vue

<template>
<!--  <div id="nav">-->
<!--    <router-link to="/">Home</router-link> |-->
<!--    <router-link to="/about">About</router-link>-->
<!--  </div>-->
  <router-view/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//入口
createApp(App).use(router).use(ElementPlus).use(router).mount('#app')

index.js

import { createRouter, createWebHistory } from 'vue-router'
import Login from "@/views/Login";
import Home from "@/views/Home";
import dict from "@/components/baseinfo/Dict";
import Employee from "@/components/baseinfo/Employee";
import SysUser from "@/components/baseinfo/SysUser";
import Category from "@/components/baseinfo/Category";
import CarAssets from "@/components/assets/CarAssets";
import CommonTrans from "@/components/trans/CommonTrans";
import FinanceAsstes from "@/components/assets/FinanceAsstes";
import RealAssets from "@/components/assets/RealAssets";
import CarTrans from "@/components/trans/CarTrans";
import CommonAssets from "@/components/assets/CommonAssets";
import FinanceTrans from "@/components/trans/FinanceTrans";
import RealTrans from "@/components/trans/RealTrans";


const routes = [
  {
    path: '/',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Home
  },
  {
    path:'/1',
    name:'aside1',
    component: Home,
    title:'基础信息管理',
    index:'1',
    icon:'Document',
    children:[
          {path:'/dict',
            name:'dict',
            component: dict,
            title:'数据字典管理',
            icon:'Avatar'
          },
          {
            path:'/Category',
            name:'Category',
            component: Category,
            title: '资产分类管理',
            icon:'FolderRemove'
          },
          {
            path:'/Employee',
            name:'Employee',
            component: Employee,
            title:'公司职员管理',
            icon:'Briefcase'
          },
          {
            path:'/SysUser',
            name:'SysUser',
            component: SysUser,
            title:'系统用户管理',
            icon:'Calendar'
          }
      ]
  },
  {
    path:'/2',
    name:'aside2',
    component: Home,
    title:'资产信息管理',
    index:'2',
    icon:'Briefcase',
    children:[
      {path:'/CarAssets',
        name:'CarAssets',
        component: CarAssets,
        title:'汽车资产管理管理',
        icon:'Aim'
      },
      {
        path:'/FinanceAsstes',
        name:'FinanceAsstes',
        component: FinanceAsstes,
        title:'金融资产管理',
        icon:'IconMenu'
      },
      {
        path:'/RealAssets',
        name:'RealAssets',
        component: RealAssets,
        title:'不动产资产管理',
        icon:'Setting'
      },
      {
        path:'/CommonAssets',
        name:'CommonAssets',
        component: CommonAssets,
        title:"普通资产管理",
        icon:'Document'
      }
    ]
  },
  {
    path:'/3',
    name:'aside3',
    component: Home,
    title:'资产流转管理',
    index:'3',
    icon:'Briefcase',
    children:[
      {
        path:'/CommonTrans',
        name:'CommonTrans',
        component: CommonTrans,
        title:'普通资产流转管理',
        icon:'FolderRemove'
      },
      {
        path:'/FinanceTrans',
        name:'FinanceTrans',
        component: FinanceTrans,
        title:'金融资产流转管理',
        icon:'IconMenu'
      },
      {
        path:'/CarTrans',
        name:'CarTrans',
        component: CarTrans,
        title:'车辆资产流转管理',
        icon:'Setting'
      },
      {
        path:'/RealTrans',
        name:'RealTrans',
        component: RealTrans,
        title: '不动产流转管理',
        icon:'Briefcase'
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

HomeHeader.vue

<template>
  <el-container direction="vertical">
    <el-row>
     <el-col :span="24">
       <el-col :span="7">
         <span style="font-size: 48px">奥凯航空</span>&nbsp;
         <span style="font-size: 30px">资产管理系统</span>
       </el-col>
       <el-col :span="12" align="40px">
         <div style="margin-top:40px;margin-left: 450px">
           <el-icon color="blue" ><Clock/></el-icon>&nbsp;
           <label >{{nowTime}}</label>
         </div>
       </el-col>
       <el-col :span="5" >
         <div style="margin-top:40px;">&nbsp;&nbsp;
           <el-icon><Avatar /></el-icon>
           <span >欢迎登陆资产管理系统</span>&nbsp;&nbsp;
           <el-button size="small" type="primary"><el-icon><SwitchButton/></el-icon>注销</el-button>
         </div>
       </el-col>
     </el-col>
    </el-row>
  </el-container>
</template>

<script>
import {Clock} from '@element-plus/icons';
import {Avatar} from '@element-plus/icons';
import {SwitchButton} from '@element-plus/icons';
import moment from 'moment';
import {onMounted, reactive, toRefs} from 'vue';
export default {
    name: "HomeHeader",
    components:{
      Clock,Avatar,SwitchButton
    },
    setup(){
      const state=reactive({
        nowTime:''
      })

        onMounted(()=>{
          methods.getNowTime();
          moment.locale("zh-cn")
          setInterval(methods.getNowTime,1000)
        })
      const methods={
        getNowTime(){
          state.nowTime=moment().format("yyyy-MM-DD HH:mm:ss dddd")
        }
      }
      return{
        ...toRefs(state),
        ...methods
      }
    }
  }
</script>

<style scoped>

</style>

HomeAside.vue

<template>
  <el-row>
    <el-col>
      <el-menu
          :default-active="$router.path"
          :router="true"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          v-for="(subMenu) in $router.options.routes.slice(2)"
          v-bind:key="subMenu.path"
          :default-openeds="['1','2','3']"
      >
        <!--      整个导航第一级菜单-->
        <el-sub-menu :index="subMenu.index" style="background-color: #428bca">
          <template #title>
            <component v-bind:is="subMenu.icon" style="width: 20px;height:20px;color: white"></component>&nbsp;&nbsp;
            <span style="color: white">
              {{subMenu.title}}
            </span>
          </template>
          <el-menu-item v-for="(item) in subMenu.children" :index="item.path">
            <component v-bind:is="item.icon" style="width: 20px;height:20px;"></component>&nbsp;&nbsp;
            {{item.title}}
            </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import {
    Location,
    Document,
    Setting,
    Menu as IconMenu,
    Aim,
    Calendar,
    Briefcase,
    FolderRemove,
    Avatar
} from '@element-plus/icons'
export default {
  name: "HomeAside",
  components:{
    Location,
    Document,
    Setting,
    IconMenu,
    Aim,
    Calendar,
    Briefcase,
    FolderRemove,
    Avatar

  }
}
</script>

<style scoped>

</style>