DeXun/fad_oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

流程+任务分发+报销功能完成

Browse Source
This commit is contained in:
86156
2025-02-23 16:24:29 +08:00
parent f54dc4aa3e
commit 330036b272
33 changed files with 1669 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
ruoyi-ui/src/views/oa/claim/add.vue Normal file
View File

@@ -0,0 +1,314 @@
<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>