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