一个好看的界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<div id="app">
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">首页</el-menu-item>
<el-submenu index="2" v-if="staff.position==='普通职员' || staff.position==='部门经理'" >
<template slot="title">出差申请</template>
<el-menu-item index="2-1">出差申请</el-menu-item>
<el-menu-item index="2-2">进度查询</el-menu-item>
<el-menu-item index="2-3">报销差旅费</el-menu-item>
</el-submenu>
<el-submenu index="3" v-if="staff.position==='总经理' || staff.position==='部门经理'">
<template slot="title">出差审批</template>
<el-menu-item index="3-1">审批申请</el-menu-item>
<el-menu-item index="3-2">审批报销</el-menu-item>
<el-menu-item index="3-3">审核单据</el-menu-item>
<el-menu-item index="3-4">报销制证</el-menu-item>
</el-submenu>
<el-submenu index="4" v-if="staff.position==='财务人员'">
<template slot="title">汇总统计</template>
<el-menu-item index="4-1">查询进度</el-menu-item>
<el-menu-item index="4-2">汇总统计</el-menu-item>
</el-submenu>
<el-menu-item index="5"><a href = "http://localhost:8080/travel-recover/index.html" target="_self">退出登录</a></el-menu-item>
</el-menu>
<center><span style="font: bold 30px/40px 宋体 ">欢迎使用差旅费报销管理信息系统</span><br></center>
<div style="width: 100%;height: 500px;" id="homePage">
<span style="font: bold 30px/40px 宋体 ">员工编号：</span>
<span style="font: bold 30px/40px 宋体 ">{{staff.userId}}</span><br>
<span style="font: bold 30px/40px 宋体 ">姓名：</span>
<span style="font: bold 30px/40px 宋体 ">{{staff.userName}}</span><br>
<span style="font: bold 30px/40px 宋体 ">部门：</span>
<span style="font: bold 30px/40px 宋体 ">{{staff.department}}</span><br>
<span style="font: bold 30px/40px 宋体 ">职位：</span>
<span style="font: bold 30px/40px 宋体 ">{{staff.position}}</span>
</div>
<!-- 出差申请-->
<div style="width: 100%;height: 500px; display: none;" id="apply" >
<el-button type="primary" @click="travelApply()">出差申请</el-button>
<el-button type="primary">修改出差申请</el-button>
<el-button type="primary">撤回出差申请</el-button>
</div>
<!-- 出差申请对话框表单 -->
<el-dialog title="出差申请" :visible.sync="dialogFormVisible">
<el-form :model="request">
<el-form-item label="出差人姓名" label-width="120px">
<el-input v-model="request.name"></el-input>
</el-form-item>
<el-form-item label="部门" label-width="120px">
<el-input v-model="request.department"></el-input>
</el-form-item>
<el-form-item label="岗位" label-width="120px">
<el-input v-model="request.position"></el-input>
</el-form-item>
<el-form-item label="目的地" label-width="120px">
<el-input v-model="request.destination"></el-input>
</el-form-item>
<el-form-item label="暂定出发日期" label-width="120px">
<el-input v-model="request.departureDate"></el-input>
</el-form-item>
<el-form-item label="预计返回日期" label-width="120px">
<el-input v-model="request.returnDate"></el-input>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="request.type">
<el-radio label="业务洽谈"></el-radio>
<el-radio label="培训"></el-radio>
<el-radio label="会议"></el-radio>
<el-radio label="其他"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="出差事由">
<el-input type="textarea" v-model="request.desc"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="summitRequest">提 交</el-button>
</div>
</el-dialog>
</div>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
new Vue({
el: '#app',
data() {
return {
activeIndex: '1',
staff:{
userId:'1',
userName:'1',
position:'1',
department:'1'
},
dialogFormVisible: false,
request: {
name: '',
position: '',
department: '',
destination:'',
departureDate: '',
returnDate: '',
type: '',
desc: ''
},
}
},
methods: {
summitRequest(){
},
//出差申请
travelApply(){
this.dialogFormVisible = true;
},
//切换导航栏
handleSelect(key, keyPath) {
console.log(key);
if(key == "1"){
document.getElementById("homePage").style.display = "block";
document.getElementById("apply").style.display = "none";
}
else if(key == "2-1"){
document.getElementById("homePage").style.display = "none";
document.getElementById("apply").style.display = "block";
}
},
},
mounted(){
this.$message({
message: '登录成功',
type: 'success'
});
this.staff.userId = sessionStorage.getItem("userId");
this.staff.userName = sessionStorage.getItem("userName");
this.staff.position = sessionStorage.getItem("position");
this.staff.department = sessionStorage.getItem("department");
}
})
</script>
</body>
</html>