315 lines
10 KiB
Vue
315 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<div class="main" v-loading="loading">
|
|||
|
|
<div class="">
|
|||
|
|
<div class="">
|
|||
|
|
<el-card style="">
|
|||
|
|
<el-row>
|
|||
|
|
<div>
|
|||
|
|
<h1>差旅费报销申请单</h1>
|
|||
|
|
</div>
|
|||
|
|
<el-button type="primary">
|
|||
|
|
<i class="el-icon-check" @click="addTripClaim">提交</i>
|
|||
|
|
</el-button>
|
|||
|
|
</el-row>
|
|||
|
|
</el-card>
|
|||
|
|
<el-card>
|
|||
|
|
<div class="header">
|
|||
|
|
基本信息
|
|||
|
|
</div>
|
|||
|
|
<el-divider></el-divider>
|
|||
|
|
<div>
|
|||
|
|
<el-form :form="form" label-width="100px" :rules="rules">
|
|||
|
|
<el-form-item label="报销描述：" prop="remark">
|
|||
|
|
<el-input type="textarea" v-model="form.remark" :rows="5"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-form-item label="开始时间：" prop="startTime">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="form.startTime"
|
|||
|
|
align="right"
|
|||
|
|
type="date"
|
|||
|
|
placeholder="选择日期"
|
|||
|
|
value-format="yyyy-MM-dd"
|
|||
|
|
>
|
|||
|
|
</el-date-picker>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="出差天数：" prop="tripDays">
|
|||
|
|
<el-input type="number" v-model="form.tripDays"placeholder="请输入出差天数" ></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-form-item label="结束时间：" prop="endTime" >
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="form.endTime"
|
|||
|
|
align="right"
|
|||
|
|
type="date"
|
|||
|
|
placeholder="选择日期"
|
|||
|
|
value-format="yyyy-MM-dd"
|
|||
|
|
>
|
|||
|
|
</el-date-picker>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="报销总额：" prop="cost">
|
|||
|
|
<el-input v-model="form.cost" placeholder="请输入报销总额">
|
|||
|
|
<template slot="append">元</template>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-form-item label="关联项目：" prop="projectId">
|
|||
|
|
<el-select v-model="form.projectId" filterable placeholder="请选择">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in projectList"
|
|||
|
|
:key="item.projectId"
|
|||
|
|
:label="item.projectName"
|
|||
|
|
:value="item.projectId">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="票据总数：" prop="detailNumber">
|
|||
|
|
<el-input v-model="form.detailNumber" placeholder="请输入票据总数">
|
|||
|
|
<template slot="append">张</template>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
<el-divider></el-divider>
|
|||
|
|
<div style="font-weight: 900;display: flex;">
|
|||
|
|
<div style="width: 50%">
|
|||
|
|
最终报销金额：
|
|||
|
|
<span style="color: red">{{form.cost===""?'请输入金额':form.cost}}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
大写：<span style="color: red">{{numberToCNY(form.cost)}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<el-card>
|
|||
|
|
报销明细补充
|
|||
|
|
<el-divider></el-divider>
|
|||
|
|
<div>
|
|||
|
|
<div style="margin-bottom: 10px">
|
|||
|
|
<el-button @click="addRow" type="primary">添加</el-button>
|
|||
|
|
<el-button @click="deleteRows" type="danger" :disabled="selectedRows.length === 0">删除</el-button>
|
|||
|
|
<el-button @click="co" type="danger">打印</el-button>
|
|||
|
|
</div>
|
|||
|
|
<el-table
|
|||
|
|
:data="form.claimDetailList"
|
|||
|
|
style="width: 100%"
|
|||
|
|
border
|
|||
|
|
stripe
|
|||
|
|
v-loading="loading"
|
|||
|
|
highlight-current-row
|
|||
|
|
@selection-change="handleSelectionChange"
|
|||
|
|
>
|
|||
|
|
<el-table-column type="selection" width="55"></el-table-column>
|
|||
|
|
<el-table-column label="序号" width="80" type="index"></el-table-column>
|
|||
|
|
<el-table-column label="报销类型">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-select v-model="scope.row.claimType" placeholder="请选择报销类型">
|
|||
|
|
<el-option
|
|||
|
|
v-for="dict in dict.type.claim_detail_type"
|
|||
|
|
:key="dict.value"
|
|||
|
|
:label="dict.label"
|
|||
|
|
:value="parseInt(dict.value)"
|
|||
|
|
></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="开始时间">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="scope.row.beginTime"
|
|||
|
|
align="right"
|
|||
|
|
type="date"
|
|||
|
|
placeholder="选择日期"
|
|||
|
|
value-format="yyyy-MM-dd"
|
|||
|
|
>
|
|||
|
|
</el-date-picker>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="结束时间">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="scope.row.endTime"
|
|||
|
|
align="right"
|
|||
|
|
type="date"
|
|||
|
|
placeholder="选择日期"
|
|||
|
|
value-format="yyyy-MM-dd"
|
|||
|
|
>
|
|||
|
|
</el-date-picker>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column label="入住地点">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input v-model="scope.row.lodgingAddress" placeholder="请输入入住地点" :disabled="scope.row.claimType!==1"></el-input>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="款项金额">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input v-model="scope.row.cost" size="small" placeholder="请输入" >
|
|||
|
|
<template slot="append">元</template>
|
|||
|
|
</el-input>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
<el-card>
|
|||
|
|
票据留存
|
|||
|
|
<el-divider></el-divider>
|
|||
|
|
<div style="display: flex">
|
|||
|
|
<div style="margin-right: 20px">
|
|||
|
|
上传票据:
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<fileUpload v-model="files"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {addUser, deptTreeSelect, listUser} from "@/api/system/user";
|
|||
|
|
import {addOnboarding} from "@/api/oa/onboarding";
|
|||
|
|
import {listProject} from "../../../api/oa/project";
|
|||
|
|
import {numberToCNY} from "../../../utils/currencyFormatter";
|
|||
|
|
import {startClaim} from "../../../api/workflow/process";
|
|||
|
|
import {addOaClaim} from "../../../api/oa/claim";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
dicts: ['claim_detail_type'],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
loading: false,
|
|||
|
|
// 表单参数
|
|||
|
|
form: {
|
|||
|
|
claimDetailList: [],
|
|||
|
|
fileList:[]
|
|||
|
|
},
|
|||
|
|
// 表单校验
|
|||
|
|
rules: {
|
|||
|
|
|
|||
|
|
startTime: [
|
|||
|
|
{ required: true, message: "开始时间不能为空", trigger: "blur" }
|
|||
|
|
],
|
|||
|
|
endTime: [
|
|||
|
|
{ required: true, message: "结束时间不能为空", trigger: "blur" }
|
|||
|
|
],
|
|||
|
|
tripDays: [
|
|||
|
|
{ required: true, message: "出差天数不能为空", trigger: "blur" }
|
|||
|
|
],
|
|||
|
|
cost: [
|
|||
|
|
{ required: true, message: "报销金额不能为空", trigger: "blur" }
|
|||
|
|
],
|
|||
|
|
detailNumber: [
|
|||
|
|
{ required: true, message: "票据总数不能为空", trigger: "blur" }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
// 项目列表
|
|||
|
|
projectList: [],
|
|||
|
|
selectedRows: [],
|
|||
|
|
files:[]
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
created() {
|
|||
|
|
this.getProjectList();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 提交报销表单
|
|||
|
|
addTripClaim(){
|
|||
|
|
this.loading = true
|
|||
|
|
// 将文件列表进行处理
|
|||
|
|
this.form.fileList = this.files.split(',').map(file=>({fileUrl:file.trim()}))
|
|||
|
|
startClaim().then(res=>{
|
|||
|
|
this.form.procInsId = res.data
|
|||
|
|
addOaClaim(this.form).then(res => {
|
|||
|
|
this.loading = false
|
|||
|
|
this.$modal.msgSuccess("新增成功");
|
|||
|
|
this.goBack()
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
co(){
|
|||
|
|
console.log(this.files)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 添加新的一行
|
|||
|
|
addRow() {
|
|||
|
|
this.form.claimDetailList.push({
|
|||
|
|
claimType: '',
|
|||
|
|
beginTime: '',
|
|||
|
|
endTime: '',
|
|||
|
|
cost: '',
|
|||
|
|
lodgingAddress:''
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 删除勾选的行
|
|||
|
|
deleteRows() {
|
|||
|
|
this.form.claimDetailList = this.form.claimDetailList.filter(row => !this.selectedRows.includes(row));
|
|||
|
|
this.selectedRows = []; // 清空选中的行
|
|||
|
|
},
|
|||
|
|
// 处理表格头部的序号显示
|
|||
|
|
renderHeader(h, { column }) {
|
|||
|
|
return h('span', column.label);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getProjectList(){
|
|||
|
|
let query = {
|
|||
|
|
pageSize:9999,
|
|||
|
|
pageNum:1,
|
|||
|
|
}
|
|||
|
|
listProject(query).then(res => {
|
|||
|
|
this.projectList = res.rows
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
/** 返回页面 */
|
|||
|
|
goBack() {
|
|||
|
|
// 关闭当前标签页并返回上个页面
|
|||
|
|
this.$tab.closePage(this.$route)
|
|||
|
|
this.$router.back()
|
|||
|
|
},
|
|||
|
|
numberToCNY,
|
|||
|
|
// 处理表格选择变化，更新选中的行
|
|||
|
|
handleSelectionChange(val) {
|
|||
|
|
this.selectedRows = val;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.main {
|
|||
|
|
padding: 10px;
|
|||
|
|
background-color: #f6f6f6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
margin: 10px;
|
|||
|
|
padding: 10px;
|
|||
|
|
background-color: white;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
</style>
|