<!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-columntype="index"width="40"></el-table-column><el-table-columnprop="requestId"label="申请编号"align="center"></el-table-column><el-table-columnprop="name"label="姓名"align="center"></el-table-column><el-table-columnprop="department"align="center"label="部门"></el-table-column><el-table-columnprop="destination"align="center"label="目的地"></el-table-column><el-table-columnprop="departureDate"align="center"label="出发日期"></el-table-column><el-table-columnprop="type"align="center"label="出差类别"></el-table-column><el-table-columnprop="statusStr"align="center"label="状态"></el-table-column><el-table-columnprop="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-columnprop="name"align="center"label="出差人姓名"></el-table-column><el-table-columnprop="department"align="center"label="部门"></el-table-column><el-table-columnprop="destination"align="center"label="目的地"></el-table-column><el-table-columnprop="departureDate"align="center"label="出发日期"></el-table-column><el-table-columnprop="statusStr"align="center"label="状态"></el-table-column><el-table-columnprop="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-columnlabel="报销编号"prop="recoverId"></el-table-column><el-table-columnlabel="出差人姓名"prop="name"></el-table-column><el-table-columnlabel="部门"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>
