整合前端
This commit is contained in:
砂糖
310
ruoyi-ui/src/views/oa/claim/add.vue
Normal file
310
ruoyi-ui/src/views/oa/claim/add.vue
Normal file
@@ -0,0 +1,310 @@
|
||||
<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>
|
||||
</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>
|
||||
<file-upload v-model="form.fileIds"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { addOaClaim } from "@/api/oa/claim";
|
||||
import { listProject } from "@/api/oa/project";
|
||||
import { startClaim } from "@/api/workflow/process";
|
||||
import { numberToCNY } from "@/utils/currencyFormatter";
|
||||
|
||||
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: [],
|
||||
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getProjectList();
|
||||
},
|
||||
methods: {
|
||||
// 提交报销表单
|
||||
addTripClaim(){
|
||||
this.loading = true
|
||||
// 将文件列表进行处理
|
||||
startClaim().then(res=>{
|
||||
this.form.procInsId = res.data
|
||||
addOaClaim(this.form).then(res => {
|
||||
this.loading = false
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.goBack()
|
||||
})
|
||||
})
|
||||
},
|
||||
co(){
|
||||
|
||||
},
|
||||
|
||||
// 添加新的一行
|
||||
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>
|
||||
885
ruoyi-ui/src/views/oa/claim/detail.vue
Normal file
885
ruoyi-ui/src/views/oa/claim/detail.vue
Normal file
@@ -0,0 +1,885 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-tabs
|
||||
tab-position="top"
|
||||
:value="processed === true ? 'approval' : 'form'"
|
||||
>
|
||||
<el-tab-pane label="任务办理" name="approval" v-if="processed === true">
|
||||
<el-card class="box-card" shadow="hover" v-if="taskFormOpen">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>填写表单</span>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card" shadow="hover">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>审批流程</span>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="20" :offset="2">
|
||||
<el-form
|
||||
ref="taskForm"
|
||||
:model="taskForm"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="审批意见" prop="comment">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="5"
|
||||
v-model="taskForm.comment"
|
||||
placeholder="请输入 审批意见"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="抄送人" prop="copyUserIds">
|
||||
<el-tag
|
||||
:key="index"
|
||||
v-for="(item, index) in copyUser"
|
||||
closable
|
||||
:disable-transitions="false"
|
||||
@close="handleClose('copy', item)"
|
||||
>
|
||||
{{ item.nickName }}
|
||||
</el-tag>
|
||||
<el-button
|
||||
class="button-new-tag"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
circle
|
||||
@click="onSelectCopyUsers"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="指定审批人" prop="copyUserIds">
|
||||
<el-tag
|
||||
:key="index"
|
||||
v-for="(item, index) in nextUser"
|
||||
closable
|
||||
:disable-transitions="false"
|
||||
@close="handleClose('next', item)"
|
||||
>
|
||||
{{ item.nickName }}
|
||||
</el-tag>
|
||||
<el-button
|
||||
class="button-new-tag"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
circle
|
||||
@click="onSelectNextUsers"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" type="flex" justify="center">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
icon="el-icon-circle-check"
|
||||
type="success"
|
||||
@click="handleComplete"
|
||||
>通过</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5"> </el-col>
|
||||
<el-col :span="1.5"> </el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
icon="el-icon-refresh-left"
|
||||
type="warning"
|
||||
@click="handleReturn"
|
||||
>退回</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5"> </el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="表单信息" name="form">
|
||||
<div>
|
||||
<div class="main" v-loading="loading">
|
||||
<div class="">
|
||||
<div class="">
|
||||
<el-card style="">
|
||||
<el-row>
|
||||
<div>
|
||||
<h1>报销申请单</h1>
|
||||
</div>
|
||||
</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"
|
||||
disabled
|
||||
></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"
|
||||
disabled
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="出差天数：" prop="tripDays">
|
||||
<el-input
|
||||
type="number"
|
||||
v-model="form.tripDays"
|
||||
placeholder="请输入出差天数"
|
||||
disabled
|
||||
></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"
|
||||
disabled
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="报销总额：" prop="cost">
|
||||
<el-input
|
||||
v-model="form.cost"
|
||||
placeholder="请输入报销总额"
|
||||
disabled
|
||||
>
|
||||
<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="请选择"
|
||||
disabled
|
||||
>
|
||||
<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="请输入票据总数"
|
||||
disabled
|
||||
>
|
||||
<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>
|
||||
<el-table
|
||||
:data="detailList"
|
||||
style="width: 100%"
|
||||
border
|
||||
stripe
|
||||
v-loading="loading"
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
width="80"
|
||||
type="index"
|
||||
></el-table-column>
|
||||
<el-table-column label="报销类型">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.claim_detail_type"
|
||||
:value="scope.row.claimType"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="开始时间">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
parseTime(scope.row.beginTime, "{y}-{m}-{d}")
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="结束时间">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
parseTime(scope.row.endTime, "{y}-{m}-{d}")
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="入住地点"
|
||||
prop="lodgingAddress"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="款项金额"
|
||||
prop="cost"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card>
|
||||
票据留存
|
||||
<el-divider></el-divider>
|
||||
<div style="display: flex">
|
||||
<div style="margin-right: 20px">上传票据:</div>
|
||||
<file-preview v-model="form.fileIds"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="流转记录" name="record">
|
||||
<div class="title-record">流程标题：{{ processTitleValue }}</div>
|
||||
|
||||
<el-card class="box-card" shadow="never">
|
||||
<el-col :span="20" :offset="2">
|
||||
<div class="block">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(item, index) in historyProcNodeList"
|
||||
:key="index"
|
||||
:icon="setIcon(item.endTime)"
|
||||
:color="setColor(item.endTime)"
|
||||
>
|
||||
<p style="font-weight: 700">{{ item.activityName }}</p>
|
||||
<el-card
|
||||
v-if="item.activityType === 'startEvent'"
|
||||
class="box-card"
|
||||
shadow="hover"
|
||||
>
|
||||
{{ item.assigneeName }} 在 {{ item.createTime }} 发起流程
|
||||
</el-card>
|
||||
<el-card
|
||||
v-if="item.activityType === 'userTask'"
|
||||
class="box-card"
|
||||
shadow="hover"
|
||||
>
|
||||
<el-descriptions
|
||||
:column="5"
|
||||
:labelStyle="{ 'font-weight': 'bold' }"
|
||||
>
|
||||
<el-descriptions-item label="实际办理">{{
|
||||
item.assigneeName || "-"
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="接收时间">{{
|
||||
item.createTime || "-"
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="办结时间">{{
|
||||
item.endTime || "-"
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="耗时">{{
|
||||
item.duration || "-"
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div v-if="item.commentList && item.commentList.length > 0">
|
||||
<el-divider content-position="left">
|
||||
<el-tag
|
||||
:type="approveTypeTag(item.commentList[0].type)"
|
||||
size="mini"
|
||||
>{{ commentType(item.commentList[0].type) }}</el-tag
|
||||
>
|
||||
<el-tag type="info" effect="plain" size="mini">{{
|
||||
item.commentList[0].time
|
||||
}}</el-tag>
|
||||
</el-divider>
|
||||
<span>{{ item.commentList[0].fullMessage }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card
|
||||
v-if="item.activityType === 'endEvent'"
|
||||
class="box-card"
|
||||
shadow="hover"
|
||||
>
|
||||
{{ item.createTime }} 结束流程
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="流程跟踪" name="track">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<process-viewer
|
||||
:key="`designer-${loadIndex}`"
|
||||
:style="'height:' + height"
|
||||
:xml="xmlData"
|
||||
:finishedInfo="finishedInfo"
|
||||
:allCommentList="historyProcNodeList"
|
||||
/>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOaClaim } from "@/api/oa/claim";
|
||||
import { listProject } from "@/api/oa/project";
|
||||
import { deptTreeSelect, selectUser } from "@/api/system/user";
|
||||
import { detailProcess } from "@/api/workflow/process";
|
||||
import {
|
||||
complete,
|
||||
delegate,
|
||||
rejectTask,
|
||||
returnList,
|
||||
transfer
|
||||
} from "@/api/workflow/task";
|
||||
import FilePreview from "@/components/FilePreview/index.vue";
|
||||
import ProcessViewer from "@/components/ProcessViewer";
|
||||
import { numberToCNY } from "@/utils/currencyFormatter";
|
||||
import Parser from "@/utils/generator/parser";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "WorkDetail",
|
||||
dicts: ["claim_detail_type"],
|
||||
components: {
|
||||
FilePreview,
|
||||
ProcessViewer,
|
||||
Parser,
|
||||
},
|
||||
props: {},
|
||||
computed: {
|
||||
commentType() {
|
||||
return (val) => {
|
||||
switch (val) {
|
||||
case "1":
|
||||
return "通过";
|
||||
case "2":
|
||||
return "退回";
|
||||
case "3":
|
||||
return "驳回";
|
||||
case "4":
|
||||
return "委派";
|
||||
case "5":
|
||||
return "转办";
|
||||
case "6":
|
||||
return "终止";
|
||||
case "7":
|
||||
return "撤回";
|
||||
}
|
||||
};
|
||||
},
|
||||
approveTypeTag() {
|
||||
return (val) => {
|
||||
switch (val) {
|
||||
case "1":
|
||||
return "success";
|
||||
case "2":
|
||||
return "warning";
|
||||
case "3":
|
||||
return "danger";
|
||||
case "4":
|
||||
return "primary";
|
||||
case "5":
|
||||
return "success";
|
||||
case "6":
|
||||
return "danger";
|
||||
case "7":
|
||||
return "info";
|
||||
}
|
||||
};
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
baseUrl: process.env.VUE_APP_BASE_API,
|
||||
uploadFileUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传文件服务器地址
|
||||
height: document.documentElement.clientHeight - 205 + "px;",
|
||||
// 模型xml数据
|
||||
loadIndex: 0,
|
||||
xmlData: undefined,
|
||||
detailList: [],
|
||||
finishedInfo: {
|
||||
finishedSequenceFlowSet: [],
|
||||
finishedTaskSet: [],
|
||||
unfinishedTaskSet: [],
|
||||
rejectedTaskSet: [],
|
||||
},
|
||||
historyProcNodeList: [],
|
||||
// 部门名称
|
||||
deptName: undefined,
|
||||
// 部门树选项
|
||||
deptOptions: undefined,
|
||||
userLoading: false,
|
||||
// 用户表格数据
|
||||
userList: null,
|
||||
deptProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
deptId: undefined,
|
||||
},
|
||||
total: 0,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
taskForm: {
|
||||
comment: "", // 意见内容
|
||||
procInsId: "", // 流程实例编号
|
||||
taskId: "", // 流程任务编号
|
||||
copyUserIds: "", // 抄送人Id
|
||||
vars: "",
|
||||
targetKey: "",
|
||||
},
|
||||
rules: {
|
||||
comment: [
|
||||
{ required: true, message: "请输入审批意见", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
currentUserId: null,
|
||||
variables: [], // 流程变量数据
|
||||
taskFormOpen: false,
|
||||
taskFormData: {}, // 流程变量数据
|
||||
processFormList: [], // 流程变量数据
|
||||
processTitleValue: null,
|
||||
formOpen: false, // 是否加载流程变量数据
|
||||
returnTaskList: [], // 回退列表数据
|
||||
processed: false,
|
||||
returnTitle: null,
|
||||
returnOpen: false,
|
||||
rejectOpen: false,
|
||||
rejectTitle: null,
|
||||
userData: {
|
||||
title: "",
|
||||
type: "",
|
||||
open: false,
|
||||
},
|
||||
copyUser: [],
|
||||
nextUser: [],
|
||||
userMultipleSelection: [],
|
||||
userDialogTitle: "",
|
||||
userOpen: false,
|
||||
form: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getClaimDetail();
|
||||
},
|
||||
methods: {
|
||||
numberToCNY,
|
||||
getProjectList() {
|
||||
let params = {
|
||||
pageSize: 999,
|
||||
pageNum: 1,
|
||||
};
|
||||
listProject(params).then((response) => {
|
||||
this.projectList = response.rows;
|
||||
});
|
||||
},
|
||||
/** 获取报销单详情 */
|
||||
getClaimDetail() {
|
||||
getOaClaim(this.$route.params.claimId).then((res) => {
|
||||
this.form = res.data;
|
||||
this.detailList = res.data.detailList;
|
||||
this.initData();
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/** 初始化流程数据 */
|
||||
initData() {
|
||||
this.taskForm.procInsId = this.form.procInsId;
|
||||
|
||||
this.processed =
|
||||
this.$route.query && eval(this.$route.query.processed || false);
|
||||
// 流程任务重获取变量表单
|
||||
this.getProcessDetails(this.form.procInsId);
|
||||
this.loadIndex = this.taskForm.procInsId;
|
||||
},
|
||||
/** 查询部门下拉树结构 */
|
||||
getTreeSelect() {
|
||||
deptTreeSelect().then((response) => {
|
||||
this.deptOptions = response.data;
|
||||
});
|
||||
},
|
||||
/** 查询用户列表 */
|
||||
getList() {
|
||||
this.userLoading = true;
|
||||
selectUser(this.addDateRange(this.queryParams, this.dateRange)).then(
|
||||
(response) => {
|
||||
this.userList = response.rows;
|
||||
this.total = response.total;
|
||||
this.toggleSelection(this.userMultipleSelection);
|
||||
this.userLoading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
// 筛选节点
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
// 节点单击事件
|
||||
handleNodeClick(data) {
|
||||
this.queryParams.deptId = data.id;
|
||||
this.getList();
|
||||
},
|
||||
setIcon(val) {
|
||||
if (val) {
|
||||
return "el-icon-check";
|
||||
} else {
|
||||
return "el-icon-time";
|
||||
}
|
||||
},
|
||||
setColor(val) {
|
||||
if (val) {
|
||||
return "#2bc418";
|
||||
} else {
|
||||
return "#b3bdbb";
|
||||
}
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.userMultipleSelection = selection;
|
||||
},
|
||||
toggleSelection(selection) {
|
||||
if (selection && selection.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
selection.forEach((item) => {
|
||||
let row = this.userList.find((k) => k.userId === item.userId);
|
||||
this.$refs.userTable.toggleRowSelection(row);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.userTable.clearSelection();
|
||||
});
|
||||
}
|
||||
},
|
||||
// 关闭标签
|
||||
handleClose(type, tag) {
|
||||
let userObj = this.userMultipleSelection.find(
|
||||
(item) => item.userId === tag.id
|
||||
);
|
||||
this.userMultipleSelection.splice(
|
||||
this.userMultipleSelection.indexOf(userObj),
|
||||
1
|
||||
);
|
||||
if (type === "copy") {
|
||||
this.copyUser = this.userMultipleSelection;
|
||||
// 设置抄送人ID
|
||||
if (this.copyUser && this.copyUser.length > 0) {
|
||||
const val = this.copyUser.map((item) => item.id);
|
||||
this.taskForm.copyUserIds =
|
||||
val instanceof Array ? val.join(",") : val;
|
||||
} else {
|
||||
this.taskForm.copyUserIds = "";
|
||||
}
|
||||
} else if (type === "next") {
|
||||
this.nextUser = this.userMultipleSelection;
|
||||
// 设置抄送人ID
|
||||
if (this.nextUser && this.nextUser.length > 0) {
|
||||
const val = this.nextUser.map((item) => item.id);
|
||||
this.taskForm.nextUserIds =
|
||||
val instanceof Array ? val.join(",") : val;
|
||||
} else {
|
||||
this.taskForm.nextUserIds = "";
|
||||
}
|
||||
}
|
||||
},
|
||||
/** 流程变量赋值 */
|
||||
handleCheckChange(val) {
|
||||
if (val instanceof Array) {
|
||||
this.taskForm.values = {
|
||||
approval: val.join(","),
|
||||
};
|
||||
} else {
|
||||
this.taskForm.values = {
|
||||
approval: val,
|
||||
};
|
||||
}
|
||||
},
|
||||
//获取的表单信息、流转记录、流程跟踪信息
|
||||
getProcessDetails(procInsId) {
|
||||
const params = { procInsId: procInsId, taskId: null };
|
||||
detailProcess(params).then((res) => {
|
||||
const data = res.data;
|
||||
this.xmlData = data.bpmnXml;
|
||||
this.processFormList = data.processFormList;
|
||||
this.historyProcNodeList = data.historyProcNodeList;
|
||||
this.finishedInfo = data.flowViewer;
|
||||
this.formOpen = true;
|
||||
this.processTitleValue =
|
||||
data.processFormList[0].fields[0].__config__.defaultValue;
|
||||
});
|
||||
},
|
||||
onSelectCopyUsers() {
|
||||
this.userMultipleSelection = this.copyUser;
|
||||
this.onSelectUsers("添加抄送人", "copy");
|
||||
},
|
||||
onSelectNextUsers() {
|
||||
this.userMultipleSelection = this.nextUser;
|
||||
this.onSelectUsers("指定审批人", "next");
|
||||
},
|
||||
onSelectUsers(title, type) {
|
||||
this.userData.title = title;
|
||||
this.userData.type = type;
|
||||
this.getTreeSelect();
|
||||
this.getList();
|
||||
this.userData.open = true;
|
||||
},
|
||||
/** 通过任务 */
|
||||
handleComplete() {
|
||||
// 校验表单
|
||||
const taskFormRef = this.$refs.taskFormParser;
|
||||
const isExistTaskForm = taskFormRef !== undefined;
|
||||
// 若无任务表单，则 taskFormPromise 为 true，即不需要校验
|
||||
const taskFormPromise = !isExistTaskForm
|
||||
? true
|
||||
: new Promise((resolve, reject) => {
|
||||
taskFormRef.$refs[taskFormRef.formConfCopy.formRef].validate(
|
||||
(valid) => {
|
||||
valid ? resolve() : reject();
|
||||
}
|
||||
);
|
||||
});
|
||||
const approvalPromise = new Promise((resolve, reject) => {
|
||||
this.$refs["taskForm"].validate((valid) => {
|
||||
valid ? resolve() : reject();
|
||||
});
|
||||
});
|
||||
Promise.all([taskFormPromise, approvalPromise]).then(() => {
|
||||
if (isExistTaskForm) {
|
||||
this.taskForm.variables =
|
||||
taskFormRef[taskFormRef.formConfCopy.formModel];
|
||||
}
|
||||
//执行是否同意的任务
|
||||
complete(this.taskForm).then((response) => {
|
||||
this.$modal.msgSuccess(response.msg);
|
||||
this.goBack();
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 委派任务 */
|
||||
handleDelegate() {
|
||||
this.$refs["taskForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.userData.type = "delegate";
|
||||
this.userData.title = "委派任务";
|
||||
this.userData.open = true;
|
||||
this.getTreeSelect();
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 转办任务 */
|
||||
handleTransfer() {
|
||||
this.$refs["taskForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.userData.type = "transfer";
|
||||
this.userData.title = "转办任务";
|
||||
this.userData.open = true;
|
||||
this.getTreeSelect();
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 拒绝任务 */
|
||||
handleReject() {
|
||||
this.$refs["taskForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
const _this = this;
|
||||
this.$modal
|
||||
.confirm("拒绝审批单流程会终止，是否继续？")
|
||||
.then(function () {
|
||||
return rejectTask(_this.taskForm);
|
||||
})
|
||||
.then((res) => {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.goBack();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
changeCurrentUser(val) {
|
||||
this.currentUserId = val.userId;
|
||||
},
|
||||
/** 返回页面 */
|
||||
goBack() {
|
||||
// 关闭当前标签页并返回上个页面
|
||||
this.$tab.closePage(this.$route);
|
||||
this.$router.back();
|
||||
},
|
||||
/** 接收子组件传的值 */
|
||||
getData(data) {
|
||||
if (data) {
|
||||
const variables = [];
|
||||
data.fields.forEach((item) => {
|
||||
let variableData = {};
|
||||
variableData.label = item.__config__.label;
|
||||
// 表单值为多个选项时
|
||||
if (item.__config__.defaultValue instanceof Array) {
|
||||
const array = [];
|
||||
item.__config__.defaultValue.forEach((val) => {
|
||||
array.push(val);
|
||||
});
|
||||
variableData.val = array;
|
||||
} else {
|
||||
variableData.val = item.__config__.defaultValue;
|
||||
}
|
||||
variables.push(variableData);
|
||||
});
|
||||
this.variables = variables;
|
||||
}
|
||||
},
|
||||
submitUserData() {
|
||||
let type = this.userData.type;
|
||||
if (type === "copy" || type === "next") {
|
||||
if (
|
||||
!this.userMultipleSelection ||
|
||||
this.userMultipleSelection.length <= 0
|
||||
) {
|
||||
this.$modal.msgError("请选择用户");
|
||||
return false;
|
||||
}
|
||||
let userIds = this.userMultipleSelection.map((k) => k.userId);
|
||||
if (type === "copy") {
|
||||
// 设置抄送人ID信息
|
||||
this.copyUser = this.userMultipleSelection;
|
||||
this.taskForm.copyUserIds =
|
||||
userIds instanceof Array ? userIds.join(",") : userIds;
|
||||
} else if (type === "next") {
|
||||
// 设置下一级审批人ID信息
|
||||
this.nextUser = this.userMultipleSelection;
|
||||
this.taskForm.nextUserIds =
|
||||
userIds instanceof Array ? userIds.join(",") : userIds;
|
||||
}
|
||||
this.userData.open = false;
|
||||
} else {
|
||||
if (!this.taskForm.comment) {
|
||||
this.$modal.msgError("请输入审批意见");
|
||||
return false;
|
||||
}
|
||||
if (!this.currentUserId) {
|
||||
this.$modal.msgError("请选择用户");
|
||||
return false;
|
||||
}
|
||||
this.taskForm.userId = this.currentUserId;
|
||||
if (type === "delegate") {
|
||||
delegate(this.taskForm).then((res) => {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.goBack();
|
||||
});
|
||||
}
|
||||
if (type === "transfer") {
|
||||
transfer(this.taskForm).then((res) => {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.goBack();
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
/** 可退回任务列表 */
|
||||
handleReturn() {
|
||||
this.$refs["taskForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.returnTitle = "退回流程";
|
||||
returnList(this.taskForm).then((res) => {
|
||||
this.returnTaskList = res.data;
|
||||
this.taskForm.values = null;
|
||||
this.returnOpen = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.title-record {
|
||||
font-size: 16px;
|
||||
padding: 10px 0;
|
||||
color: #1ab394;
|
||||
}
|
||||
</style>
|
||||
352
ruoyi-ui/src/views/oa/claim/index.vue
Normal file
352
ruoyi-ui/src/views/oa/claim/index.vue
Normal file
@@ -0,0 +1,352 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:oaClaim:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:oaClaim:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:oaClaim:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="oaClaimList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="序号" align="center" type="index" v-if="true"/>
|
||||
<el-table-column label="描述" align="center" prop="remark" />
|
||||
<el-table-column label="出差天数" align="center" prop="tripDays" />
|
||||
<el-table-column label="报销金额" align="center" prop="cost" />
|
||||
<el-table-column label="关联项目" align="center" prop="projectName" >
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" >{{ scope.row.projectName!==null?scope.row.projectName:'未关联项目' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="projectId">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status_===1?'success':'warning'">{{scope.row.status_===1?'完成':'进行中'}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="报销时间" align="center" prop="completedTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.completedTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleDetail(scope.row)"
|
||||
v-hasPermi="['system:oaClaim:edit']"
|
||||
>详情</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:oaClaim:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改差旅费报销对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="报销人" prop="userId">
|
||||
<el-input v-model="form.userId" placeholder="请输入报销人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="票据文件id列表" prop="fileIds">
|
||||
<el-input v-model="form.fileIds" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="报销缘由/备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择开始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择结束时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="出差天数" prop="tripDays">
|
||||
<el-input v-model="form.tripDays" placeholder="请输入出差天数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="报销金额" prop="cost">
|
||||
<el-input v-model="form.cost" placeholder="请输入报销金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="票据总数" prop="detailNumber">
|
||||
<el-input v-model="form.detailNumber" placeholder="请输入票据总数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="关联项目" prop="projectId">
|
||||
<el-input v-model="form.projectId" placeholder="请输入关联项目" />
|
||||
</el-form-item>
|
||||
<el-form-item label="关联流程id" prop="procInsId">
|
||||
<el-input v-model="form.procInsId" placeholder="请输入关联流程id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="报销时间" prop="completedTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.completedTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择报销时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addOaClaim, delOaClaim, getOaClaim, listOaClaim, updateOaClaim } from "@/api/oa/claim";
|
||||
|
||||
export default {
|
||||
name: "OaClaim",
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 差旅费报销表格数据
|
||||
oaClaimList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
userId: undefined,
|
||||
fileIds: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
tripDays: undefined,
|
||||
cost: undefined,
|
||||
detailNumber: undefined,
|
||||
projectId: undefined,
|
||||
procInsId: undefined,
|
||||
completedTime: undefined
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
claimId: [
|
||||
{ required: true, message: "主键id不能为空", trigger: "blur" }
|
||||
],
|
||||
userId: [
|
||||
{ required: true, message: "报销人不能为空", trigger: "blur" }
|
||||
],
|
||||
fileIds: [
|
||||
{ required: true, message: "票据文件id列表不能为空", trigger: "blur" }
|
||||
],
|
||||
remark: [
|
||||
{ required: true, message: "报销缘由/备注不能为空", trigger: "blur" }
|
||||
],
|
||||
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" }
|
||||
],
|
||||
projectId: [
|
||||
{ required: true, message: "关联项目不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询差旅费报销列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listOaClaim(this.queryParams).then(response => {
|
||||
this.oaClaimList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
claimId: undefined,
|
||||
userId: undefined,
|
||||
fileIds: undefined,
|
||||
remark: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
tripDays: undefined,
|
||||
cost: undefined,
|
||||
detailNumber: undefined,
|
||||
projectId: undefined,
|
||||
createTime: undefined,
|
||||
createBy: undefined,
|
||||
updateTime: undefined,
|
||||
updateBy: undefined,
|
||||
delFlag: undefined,
|
||||
procInsId: undefined,
|
||||
completedTime: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.claimId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.$router.push('/claim/addTripClaim')
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const claimId = row.claimId || this.ids
|
||||
getOaClaim(claimId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改报销";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.claimId != null) {
|
||||
updateOaClaim(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addOaClaim(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const claimIds = row.claimId || this.ids;
|
||||
this.$modal.confirm('是否确认删除报销编号为"' + claimIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delOaClaim(claimIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/oaClaim/export', {
|
||||
...this.queryParams
|
||||
}, `oaClaim_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
|
||||
/******************路由*******************/
|
||||
handleDetail(row){
|
||||
this.$router.push('/claim/detail/'+row.claimId);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user