标签：11 style 27 document element getElementById recover display row
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
</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-menu-item index="2" v-if="staff.position==='普通职员' || staff.position==='部门经理'">
出差申请
</el-menu-item>
<el-menu-item index="3" v-if="staff.position==='普通职员' || staff.position==='部门经理'">
报销差旅费
</el-menu-item>
<el-submenu index="4" v-if="staff.position==='总经理' || 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-menu-item index="4-3">审核单据</el-menu-item>
<el-menu-item index="4-4">报销制证</el-menu-item>
</el-submenu>
<el-submenu index="5" v-if="staff.position==='财务人员'">
<template slot="title">汇总统计</template>
<el-menu-item index="5-1">查询进度</el-menu-item>
<el-menu-item index="5-2">汇总统计</el-menu-item>
</el-submenu>
<el-menu-item index="6"><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" @click="travelApply()">进度查询</el-button>
<el-divider></el-divider>
<span>我的出差申请</span>
<!--表格-->
<template>
<el-table
:data="tableData.filter(row => row.name === this.staff.userName)"
style="width: 100%"
:row-class-name="tableRowClassName"
>
<el-table-column
type="index"
width="40">
</el-table-column>
<el-table-column
prop="requestId"
label="申请编号"
align="center"
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
align="center"
>
</el-table-column>
<el-table-column
prop="department"
align="center"
label="部门">
</el-table-column>
<el-table-column
prop="destination"
align="center"
label="目的地">
</el-table-column>
<el-table-column
prop="departureDate"
align="center"
label="出发日期">
</el-table-column>
<el-table-column
prop="type"
align="center"
label="出差类别">
</el-table-column>
<el-table-column
prop="statusStr"
align="center"
label="状态">
</el-table-column>
<el-table-column
prop="id"
align="center"
label="操作">
<template slot-scope="scope">
<el-row>
<el-button type="primary" @click="detail(scope.row)">详情</el-button>
<el-button type="primary" @click="update(scope.row)">修改</el-button>
<el-button type="danger" @click="withdraw(scope.row.requestId)">撤回</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</template>
</div>
<!-- 出差审批界面-->
<div style="width: 100%;height: 500px; display: none;" id = "approval">
<span>审批出差申请</span>
<el-table :data="tableData" style="width: 100%">
<el-table-column
prop="name"
align="center"
label="出差人姓名">
</el-table-column>
<el-table-column
prop="department"
align="center"
label="部门">
</el-table-column>
<el-table-column
prop="destination"
align="center"
label="目的地">
</el-table-column>
<el-table-column
prop="departureDate"
align="center"
label="出发日期">
</el-table-column>
<el-table-column
prop="statusStr"
align="center"
label="状态">
</el-table-column>
<el-table-column
prop="id"
align="center"
label="操作">
<template slot-scope="scope">
<el-row>
<el-button type="primary" @click="approvalRequest(scope.row)">审批</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</div>
<!-- 报销差旅费界面-->
<div style="width: 100%;height: 500px; display: none;" id = "reimbursement">
<el-button type="primary" @click="openRecover()">报销差旅费</el-button>
<el-button type="primary" @click="openRecover()">查看报销进度</el-button>
<el-divider></el-divider>
<span>我的报销单据</span>
<template>
<el-table
:data="recoverTableData"
style="width: 100%">
<el-table-column type="expand">
<template slot-scope="recover">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="目的地">
<span>{{ recover.row.name }}</span>
</el-form-item>
<el-form-item label="出发日期">
<span>{{ recover.row.departureDate }}</span>
</el-form-item>
<el-form-item label="返回日期">
<span>{{ recover.row.returnDate }}</span>
</el-form-item>
<el-form-item label="出差事由">
<span>{{ recover.row.reason }}</span>
</el-form-item>
<el-form-item label="出发车费">
<span>{{ recover.row.startFare }}</span>
</el-form-item>
<el-form-item label="返回车费">
<span>{{ recover.row.returnFare }}</span>
</el-form-item>
<el-form-item label="伙食补助">
<span>{{ recover.row.foodAllowance }}</span>
</el-form-item>
<el-form-item label="公杂补助">
<span>{{ recover.row.localTrans }}</span>
</el-form-item>
<el-form-item label="住宿费">
<span>{{ recover.row.accommodation }}</span>
</el-form-item>
<el-form-item label="总金额">
<span>{{ recover.row.totalAmount }}</span>
</el-form-item>
<el-form-item label="报销状态">
<span>{{ recover.row.scheduleStr }}</span>
</el-form-item>
<el-form-item label="审批理由">
<span>{{ recover.row.scheduleReason }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
label="报销编号"
prop="recoverId">
</el-table-column>
<el-table-column
label="出差人姓名"
prop="name">
</el-table-column>
<el-table-column
label="部门"
prop="department">
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button type="primary" @click="recoverRequest(scope.row)">修改</el-button>
<el-button type="danger" @click="recoverDelete(scope.row)">撤回</el-button>
</template>
</el-table-column>
</el-table>
</template>
</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.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.typeContent"></el-input>
</el-form-item>
<el-form-item label="出差事由">
<el-input type="textarea" v-model="request.reason"></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>
<!-- 修改申请对话框表单-->
<el-dialog title="修改出差申请" :visible.sync="dialogFormVisible2">
<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.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.typeContent"></el-input>
</el-form-item>
<el-form-item label="出差事由">
<el-input type="textarea" v-model="request.reason"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible2 = false">取 消</el-button>
<el-button type="primary" @click="updateRequest">提 交</el-button>
</div>
</el-dialog>
<!-- 审批对话框表单-->
<el-dialog title="审批出差申请" :visible.sync="dialogFormVisible3">
<el-form :model="request">
<el-form-item label="出差人姓名" label-width="120px">
<el-input v-model="request.name" disabled></el-input>
</el-form-item>
<el-form-item label="部门" label-width="120px">
<el-input v-model="request.department" disabled></el-input>
</el-form-item>
<el-form-item label="目的地" label-width="120px">
<el-input v-model="request.destination" disabled></el-input>
</el-form-item>
<el-form-item label="暂定出发日期" label-width="120px">
<el-input v-model="request.departureDate" disabled></el-input>
</el-form-item>
<el-form-item label="预计返回日期" label-width="120px">
<el-input v-model="request.returnDate" disabled></el-input>
</el-form-item>
<el-form-item label="出差类别">
<el-radio-group v-model="request.type" disabled>
<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.typeContent" disabled></el-input>
</el-form-item>
<el-form-item label="出差事由">
<el-input type="textarea" v-model="request.reason" disabled></el-input>
</el-form-item>
<el-form-item label="审批理由(退回需要填写退回理由)">
<el-input type="textarea" v-model="request.stateReason"></el-input>
</el-form-item>
</el-form>
<div slot="footer" style="text-align: center;">
<el-button @click="returnRequest()">退 回</el-button>
<el-button type="primary" @click="approval()">通 过</el-button>
</div>
</el-dialog>
<!-- 详细查看对话框表单-->
<el-dialog title="详细" :visible.sync="dialogFormVisible4">
<el-form :model="request">
<el-form-item label="出差人姓名" label-width="120px">
<el-input v-model="request.name" disabled></el-input>
</el-form-item>
<el-form-item label="部门" label-width="120px">
<el-input v-model="request.department" disabled></el-input>
</el-form-item>
<el-form-item label="目的地" label-width="120px">
<el-input v-model="request.destination" disabled></el-input>
</el-form-item>
<el-form-item label="暂定出发日期" label-width="120px">
<el-input v-model="request.departureDate" disabled></el-input>
</el-form-item>
<el-form-item label="预计返回日期" label-width="120px">
<el-input v-model="request.returnDate" disabled></el-input>
</el-form-item>
<el-form-item label="出差类别">
<el-radio-group v-model="request.type" disabled>
<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.typeContent" disabled></el-input>
</el-form-item>
<el-form-item label="出差事由">
<el-input type="textarea" v-model="request.reason" disabled></el-input>
</el-form-item>
<el-form-item label="审批理由(退回需要填写退回理由)">
<el-input type="textarea" v-model="request.stateReason" disabled></el-input>
</el-form-item>
</el-form>
<div slot="footer" style="text-align: center;">
<el-button @click="dialogFormVisible4 = false">返 回</el-button>
</div>
</el-dialog>
<!-- 报销差旅费对话框表单-->
<el-dialog title="报销差旅费" :visible.sync="dialogFormVisible5">
<el-form :model="recover">
<el-form-item label="出差人姓名" label-width="120px">
<el-input v-model="recover.name"></el-input>
</el-form-item>
<el-form-item label="部门" label-width="120px">
<el-input v-model="recover.department"></el-input>
</el-form-item>
<el-form-item label="目的地" label-width="120px">
<el-input v-model="recover.destination"></el-input>
</el-form-item>
<el-form-item label="出发日期" label-width="120px">
<el-input v-model="recover.departureDate"></el-input>
</el-form-item>
<el-form-item label="返回日期" label-width="120px">
<el-input v-model="recover.returnDate"></el-input>
</el-form-item>
<el-form-item label="出差事由">
<el-input type="textarea" v-model="recover.reason"></el-input>
</el-form-item>
<el-form-item label="出发车费" label-width="120px">
<el-input v-model="recover.startFare"></el-input>
</el-form-item>
<el-form-item label="返回车费" label-width="120px">
<el-input v-model="recover.returnFare"></el-input>
</el-form-item>
<el-form-item label="伙食补助" label-width="120px">
<el-input v-model="recover.foodAllowance"></el-input>
</el-form-item>
<el-form-item label="公杂补助" label-width="120px">
<el-input v-model="recover.localTrans"></el-input>
</el-form-item>
<el-form-item label="住宿费" label-width="120px">
<el-input v-model="recover.accommodation"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible5 = false">取 消</el-button>
<el-button type="primary" @click="addRecover">提 交</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 {
// 修改弹框
dialogFormVisible2:false,
// 审批弹框
dialogFormVisible3:false,
// 详情弹框
dialogFormVisible4:false,
// 报销差旅费弹框
dialogFormVisible5:false,
activeIndex: '1',
staff:{
userId:'1',
userName:'1',
position:'1',
department:'1'
},
dialogFormVisible: false,
request: {
name: '',
typeContent: '',
department: '',
destination:'',
departureDate: '',
returnDate: '',
type: '',
reason: '',
stateReason:''
},
//报销数据
recover:{
recoverId:'',
name:'',
department:'',
destination:'',
departureDate:'',
returnDate:'',
reason:'',
startFare:'',
returnFare:'',
foodAllowance:'',
localTrans:'',
accommodation:'',
totalAmount:'',
schedule:'',
scheduleReason:'',
scheduleStr:''
},
// 表格数据
tableData: [],
recoverTableData:[],
}
},
methods: {
addRecover(){
axios({
method:'post',
url:"http://localhost:8080/travel-recover/recover/addRecover",
data:this.recover
}).then(res=>{
console.log(res.data);
if(res.data != null){
this.$message({
message: '报销申请提交成功',
type: 'success'
});
this.dialogFormVisible5 = false;
}
})
this.selectAll();
},
// 报销差旅费申请
openRecover(){
this.dialogFormVisible5 = true;
},
// 详情
detail(row){
this.request = row;
this.dialogFormVisible4 = true;
},
// 退回
returnRequest(){
this.request.state = 2;
this.updateRequest();
this.dialogFormVisible3 = false;
},
// 通过
approval(){
this.request.state = 1;
this.updateRequest();
this.dialogFormVisible3 = false;
},
// 审批
approvalRequest(row){
this.request = row;
this.dialogFormVisible3 = true;
},
// 撤回
withdraw(id){
console.log(id);
this.$confirm('是否撤回此条出差申请?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios({
method:'get',
url:"http://localhost:8080/travel-recover/request/withdraw",
params:{
id:id
}
}).then(res=>{
if(res.data == "success"){
this.selectAll();
this.$message({
message: '撤回成功',
type: 'success'
});
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消撤回'
});
});
},
// 修改出出差申请
updateRequest(){
axios({
method:'post',
url:"http://localhost:8080/travel-recover/request/update",
data:this.request
}).then(res=>{
if(res.data == "success"){
this.dialogFormVisible2 = false;
this.selectAll();
this.$message({
message: '修改成功',
type: 'success'
});
}
})
},
//修改
update(row){
this.dialogFormVisible2 = true;
this.request = row;
},
// 表格样式
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
//查询出差申请
selectAll(){
axios({
method:'get',
url:"http://localhost:8080/travel-recover/request/selectAll"
}).then(res=>{
console.log(res.data);
this.tableData = res.data;
})
axios({
method:'get',
url:"http://localhost:8080/travel-recover/recover/selectAll"
}).then(res=>{
console.log(res.data);
this.recoverTableData = res.data;
})
},
summitRequest(){
console.log(this.request);
axios({
method:'post',
url:"http://localhost:8080/travel-recover/request/addRequest",
data:this.request
}).then(res=>{
if(res.data == "success"){
this.dialogFormVisible = false;
this.$message({
message: '出差申请提交成功',
type: 'success'
});
this.selectAll();
}
})
},
//出差申请
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";
document.getElementById("approval").style.display = "none";
document.getElementById("reimbursement").style.display = "none";
}
else if(key == "2"){
this.selectAll();
document.getElementById("reimbursement").style.display = "none";
document.getElementById("homePage").style.display = "none";
document.getElementById("approval").style.display = "none";
document.getElementById("apply").style.display = "block";
// window.location.href = "http://localhost:8080/travel-recover/travelApply.html";
}
else if(key == "3"){
this.selectAll();
document.getElementById("homePage").style.display = "none";
document.getElementById("approval").style.display = "none";
document.getElementById("apply").style.display = "none";
document.getElementById("reimbursement").style.display = "block";
}
else if(key == "4-1"){
this.selectAll();
document.getElementById("reimbursement").style.display = "none";
document.getElementById("homePage").style.display = "none";
document.getElementById("apply").style.display = "none";
document.getElementById("approval").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>
标签：11,
style,
27,
document,
element,
getElementById,
recover,
display,
row
From： https://www.cnblogs.com/XYu1230/p/18573327