<!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>
