Files
UNION_NSI/target/classes/views/platform/reimbursement/applyNew.html
T
2026-09-08 19:49:21 +08:00

730 lines
36 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!--#
layout("/layouts/platform.html"){
#-->
<style>
#billNumber .el-input__inner::placeholder {
color: orangered;
}
</style>
<div id="app" v-cloak>
<guava>
<el-card shadow="never">
<div slot="header" class="clearfix">
<h3 style="color: rgb(24, 103, 176);font-family: Microsoft YaHei;">报销申请</h3>
</div>
<el-form :model="formData" label-position="right" label-suffix=""
label-width="130px" :rules="rules" ref="addForm">
<el-row gutter="60">
<el-col :span="12">
<el-form-item label="经办人" prop="userName">
<el-input readonly type="text" v-model="formData.userName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工号" prop="loginName">
<el-input readonly type="text" v-model="formData.loginName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="报销类别" prop="reimbursementItemSort">
<el-radio-group v-model="formData.reimbursementItemSort"
@change="reimbursementItemSortChange">
<el-radio label="fy" border>费用报销</el-radio>
<el-radio label="zf" border>支付凭证</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="报销项目" prop="reimbursementItemId">
<el-radio-group v-model="formData.reimbursementItemId"
@change="reimbursementItemChange">
<el-radio :label="item.key" border
v-for="item in reimbursementItem.filter(v=>v.type==formData.reimbursementItemSort)">
{{item.name}}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="支付方式" prop="paymentMethodId">
<el-radio-group v-model="formData.paymentMethodId"
@change="paymentMethodChange">
<el-radio :label="item.key" border v-for="item in paymentMethod">
{{item.name}}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="报销经费来源" prop="jf_source">
<el-radio-group v-model="formData.jf_source" @change="jfSourceChange">
<el-radio border :label="i.key" v-for="i in jfSourceList">
{{i.name}}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系方式" prop="mobile">
<el-input type="text" v-model="formData.mobile"
placeholder="请填写联系方式"></el-input>
</el-form-item>
</el-col>
<el-col :span="12" v-if="formData.jf_source === '3'">
<el-form-item label="所属社团" prop="clubId">
<el-select v-model="formData.clubId" @change="clubChange"
style="width: 100%"
placeholder="请选择所属社团">
<el-option
v-for="item in clubList"
:key="item.clubid"
:label="item.clubName"
:value="item.clubid">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="经费余额" prop="balance">
<el-input type="text" v-model="balance" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="户名" prop="bankUserName">
<!--<el-input type="text" placeholder="请输入户名" style="width: 99%"
v-model="formData.bankUserName"></el-input>-->
<el-autocomplete style="width: 100%"
v-model="formData.bankUserName"
:fetch-suggestions="querySearchAsync"
placeholder="请输入户名"
@select="handleSelect"
></el-autocomplete>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="银行账号" prop="bankCardNumber">
<el-input type="text" placeholder="请输入银行账号"
v-model="formData.bankCardNumber"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开户行" prop="bankOfDeposit">
<el-input type="text" placeholder="请输入开户行"
v-model="formData.bankOfDeposit"></el-input>
</el-form-item>
</el-col>
<template
v-if="formData.reimbursementItemId==='fyww'||formData.reimbursementItemId==='zfww'">
<el-col :span="12">
<el-form-item label="慰问对象" prop="be_user">
<el-select
v-model="formData.be_user"
:remote-method="userRemoteMethod"
clearable
filterable
placeholder="请输入姓名或工号查找"
remote
reserve-keyword
style="width: 100%"
@change="userChange">
<el-option
v-for="item in userOptions"
:key="item.id"
:label="item.username+''+item.loginname+''"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<!--<el-col :span="12">
<el-form-item label="性&emsp;&emsp;别" prop="sex">
<el-input v-model="formData.sex" readonly maxlength="30" placeholder="输入慰问对象查询"
type="text"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="生&emsp;&emsp;日" prop="birthday">
<el-input v-model="formData.birthday" readonly maxlength="30" placeholder="输入慰问对象查询"
type="text"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号" prop="idCard">
<el-input v-model="formData.idCard" maxlength="30" placeholder="输入慰问对象查询"
type="text"></el-input>
</el-form-item>
</el-col>-->
<el-col :span="12">
<el-form-item label="联系方式" prop="conMobile">
<el-input v-model="formData.conMobile" maxlength="30"
placeholder="请输入慰问对象联系方式"
type="text"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="慰问类型" prop="type">
<el-select v-model="formData.type" style="width: 100%"
@change="typeChange"
placeholder="请选择慰问类型">
<el-option v-for="item in typeOptions2"
:label="item.name+' ('+item.code+')'"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<template v-if="formData.typeCode === 'D'">
<el-col :span="12">
<el-form-item label="住院病由">
<el-input v-model="formData.hospital_by"
placeholder="请填写住院病由"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="住院时间">
<el-date-picker
v-model="formData.hospital_time"
end-placeholder="结束日期"
range-separator="-"
start-placeholder="开始日期"
style="width: 100%"
type="daterange"
value-format="yyyy-MM-dd" placeholder="请选择住院时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="入住医院" prop="the_hospital">
<el-input v-model="formData.the_hospital"
placeholder="请填写入住医院"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="当年次数">
<el-input v-model="formData.hospital_yearNum"
placeholder="填写当年次数"></el-input>
</el-form-item>
</el-col>
</template>
<el-col :span="12">
<el-form-item label="慰问金额" prop="money">
<el-input-number v-model="formData.money" :controls="false"
:max="1000000000" :min="0"
controls-position="right"
placeholder="请填写慰问金额"
precision="2"
style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="慰问时间" prop="occur_time">
<el-date-picker
v-model="formData.occur_time"
clearable
placeholder="慰问时间"
style="width: 100%"
type="date"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
<template v-if="formData.typeCode==='E'">
<el-col :span="12">
<el-form-item label="去逝时间" prop="dead_time">
<el-date-picker
v-model="formData.dead_time"
clearable
placeholder="去逝时间"
style="width: 100%"
type="date"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="与被慰问人关系" prop="dead_gx">
<el-select v-model="formData.dead_gx" style="width: 100%"
placeholder="请选择与被慰问人关系">
<el-option label="配偶" value="配偶"></el-option>
<el-option label="父亲" value="父亲"></el-option>
<el-option label="母亲" value="母亲"></el-option>
<el-option label="子女" value="子女"></el-option>
</el-select>
</el-form-item>
</el-col>
</template>
<template v-if="formData.typeCode==='A'">
<el-col :span="12">
<el-form-item label="结婚时间" prop="marry_time">
<el-date-picker
v-model="formData.marry_time"
clearable
placeholder="结婚时间"
style="width: 100%"
type="date"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
</template>
<template v-if="formData.typeCode==='B'">
<el-col :span="12">
<el-form-item label="生育时间" prop="birth_time">
<el-date-picker
v-model="formData.birth_time"
clearable
placeholder="生育时间"
style="width: 100%"
type="date"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
</template>
</template>
<template v-else>
<el-col :span="12">
<el-form-item label="活动名称" prop="activity_name">
<el-input type="text" v-model="formData.activity_name"
placeholder="请输入活动名称"></el-input>
</el-form-item>
</el-col>
<el-col v-if="formData.reimbursementItemId=='fyhd'" :span="12">
<el-form-item label="活动类型" prop="activity_type">
<el-select v-model="formData.activity_type" placeholder="请选择活动类型"
style="width: 100%">
<el-option label="分工会活动" value="1"></el-option>
<el-option label="校工会活动" value="2"></el-option>
<el-option label="社团活动" value="3"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="活动人数" prop="activity_number"
v-if="formData.reimbursementItemId=='fyhd'">
<el-input v-model="formData.activity_number" placeholder="请输入活动人数"
type="number"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="活动地点" prop="venue">
<el-input v-model="formData.venue" placeholder="请输入活动地点"
type="text"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="报销金额" prop="money">
<el-input v-model="formData.money" placeholder="输入报销金额"
type="number"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="活动时间" prop="activity_time">
<el-date-picker v-model="formData.activity_time"
placeholder="活动时间"
style="width: 100%" type="date"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
</template>
<el-col :span="12" v-if="formData.reimbursementItemSort === 'fy'">
<el-form-item label="发票张数" prop="files_num">
<el-input-number v-model="formData.files_num" :controls="false"
:max="1000000000" :min="0" controls-position="right"
placeholder="请填写发票张数"
style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12" v-if="formData.reimbursementItemSort === 'fy'">
<el-form-item id="billNumber" label="发票号码" prop="billNumber">
<el-input v-model="formData.billNumber"
placeholder="请填写发票号码,如有多个请用逗号分隔"></el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="24">
<el-form-item label="参加随行人员" prop="personnel">
<el-input v-model="formData.personnel" :autosize="{ minRows: 4, maxRows: 8}" maxlength="500"
placeholder="请填写参加随行人员" type="textarea"></el-input>
</el-form-item>
</el-col>-->
<el-col :span="24">
<el-form-item label="支付内容" prop="cause">
<el-input v-model="formData.cause" :autosize="{ minRows: 4, maxRows: 8}"
maxlength="500"
placeholder="请填写支付内容" type="textarea"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark"
:autosize="{ minRows: 4, maxRows: 8}" maxlength="500"
placeholder="需要填写: 发票编号、开具方、金额" type="textarea"></el-input>
</el-form-item>
</el-col>
<el-col v-if="!ReimbursementIsSign" :span="24">
<el-form-item label="签&emsp;&emsp;字" prop="sign">
<sign :qz.sync="formData.sign" prefix="condolence"></sign>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item v-if="['zfzj', 'zflw'].includes(formData.reimbursementItemId)"
label="附件"
prop="files">
<file-upload card :max="50" :files.sync="formData.files"></file-upload>
</el-form-item>
<el-form-item v-else label="附件" prop="files">
<file-upload card :max="50" :files.sync="formData.files"></file-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div style="float: right;margin: 20px 0">
<el-button type="primary" :disabled="roleDisabled" @click="doAdd()">确 定</el-button>
</div>
</el-card>
</guava>
</div>
<script>
var vue = new Vue({
el: '#app',
mixins: [initTableMixins],
data() {
let self = this
let checkFiles = function (rule, value, callback) {
if (self.formData.reimbursementItemId === 'fyww' || self.formData.reimbursementItemId === 'zfww'
|| self.formData.reimbursementItemId === 'zfzj' || self.formData.reimbursementItemId === 'zflw') {
callback()
} else {
if (self.formData.files === undefined || self.formData.files === null) {
callback(new Error("请上传附件"))
}
callback()
}
};
return {
clubList: [],
balance: 0,
ReimbursementIsSign: false,
jfSourceList: [],
typeOptions: [],
typeOptions2: [],
userOptions: [],
reimbursementItem: [
{key: "fyww", name: '慰问', type: "fy"},
{key: "fyhd", name: '活动', type: "fy"},
{key: "fyjj", name: '建家', type: "fy"},
{key: "fyrc", name: '日常', type: "fy"},
{key: "zfww", name: '慰问', type: "zf"},
{key: "zfzj", name: '专家', type: "zf"},
{key: "zflw", name: '劳务', type: "zf"},
],
paymentMethod: [
{key: "dgzf", name: '对公支付'},
{key: "grdf", name: '个人垫付'},
],
rules: {
jf_source: [{required: true, message: '必填', trigger: ['change', 'blur']}],
be_user: [{required: true, message: '必填', trigger: ['change', 'blur']}],
reimbursementItemSort: [{
required: true,
message: '请选择报销类别',
trigger: ['change', 'blur']
}],
reimbursementItemId: [{
required: true,
message: '请选择报销项目',
trigger: ['change', 'blur']
}],
paymentMethodId: [{
required: true,
message: '请输入支付方式',
trigger: ['change', 'blur']
}],
mobile: [{required: true, message: '请输入联系方式', trigger: ['change', 'blur']}],
conMobile: [{
required: true,
message: '请输入慰问人联系方式',
trigger: ['change', 'blur']
}],
type: [{required: true, message: '请选择慰问类型', trigger: ['change']}],
occur_time: [{required: true, message: '请输入慰问时间', trigger: ['change', 'blur']}],
money: [{required: true, message: '请输入慰问金额', trigger: ['change', 'blur']}],
personnel: [{
required: true,
message: '请填写参加随行人员',
trigger: ['change', 'blur']
}],
cause: [{required: true, message: '请填写支付内容', trigger: ['change', 'blur']}],
//remark: [{required: true, message: '必填', trigger: ['change', 'blur']}],
files_num: [{required: true, message: '必填', trigger: ['change', 'blur']}],
bankUserName: [{required: true, message: '必填', trigger: ['change', 'blur']}],
bankCardNumber: [{required: true, message: '必填', trigger: ['change', 'blur']}],
bankOfDeposit: [{required: true, message: '必填', trigger: ['change', 'blur']}],
activity_name: [{required: true, message: '必填', trigger: ['change', 'blur']}],
clubId: [{required: true, message: '必填', trigger: ['change', 'blur']}],
billNumber: [{
required: true,
message: '请填写发票号码,如有多个请用逗号分隔',
trigger: ['change', 'blur']
}],
files: [{required: true, validator: checkFiles, trigger: ['blur', 'change']}],
},
roleDisabled: false,
}
},
methods: {
async querySearchAsync(queryString, cb) {
const resp = await $.get(loc() + "/getLastData", {
queryString: queryString
})
if (resp.data) {
cb(resp.data)
}
},
handleSelect(item) {
this.$set(this.formData, 'bankUserName', item.bankUserName)
this.$set(this.formData, 'bankCardNumber', item.bankCardNumber)
this.$set(this.formData, 'bankOfDeposit', item.bankOfDeposit)
},
async jfSourceChange(val) {
//判断权限
const resp = await $.get(loc() + '/validRole', {val: val})
this.roleDisabled = resp.code !== 0
if (resp.code !== 0) {
this.$alert(resp.msg, '提示', {
confirmButtonText: '确定',
type: 'warning'
});
//this.formData.jf_source = ''
return
}
if (!val) {
this.balance = 0
return
}
if (val == "1") {
const {data} = await $.get(loc() + "/getSchoolBudget")
this.balance = data
} else if (val == "2") {
await this.getBalance()
} else {
//this.balance = 0
await this.clubChange(this.formData.clubId)
}
},
async clubChange(val) {
const {data} = await $.get(loc() + "/getClubBudget", {
clubId: val
})
this.balance = data
},
doAdd() {
this.$refs["addForm"].validate(async (valid) => {
if (valid) {
if (this.balance < this.formData.money) {
this.notifyWarning("余额不足,请联系校工会")
return
}
const loading = this.$loading({
lock: true,
text: '正在提交...',
spinner: 'el-icon-loading',
background: COVER_LAYER_COLOR
});
const data = this.formData
data.starting_time = data.hospital_time ? data.hospital_time[0] : ''
data.end_time = data.hospital_time ? data.hospital_time[1] : ''
const resp = await $.post(loc() + (this.formData.id ? "/doEdit" : "/doAdd"), {
data: JSON.stringify(data),
sign: this.formData.sign
})
if (resp.code === 0) {
this.notifySuccess(resp.msg)
window.location.href = '/activity/reimbursement/list'
} else {
this.notifyWarning(resp.msg)
loading.close()
}
}
}
)
},
reimbursementItemSortChange(val) {
this.$set(this.formData, "type", null)
this.$set(this.formData, "money", null)
this.$set(this.formData, "way", null)
this.$set(this.formData, "typeName", null)
this.$set(this.formData, "typeCode", null)
const type = this.typeOptions
if (val === 'fy') {
this.typeOptions2 = type.filter(v => v.way === '慰问品 (C)')
} else {
this.typeOptions2 = type.filter(v => v.way === '慰问金 (A)')
}
},
paymentMethodChange(val) {
const paymentMethodName = this.paymentMethod.find(v => v.key == val)
this.$set(this.formData, "paymentMethodName", paymentMethodName.name)
},
reimbursementItemChange(val) {
const reimbursementItem = this.reimbursementItem.find(v => v.key == val)
this.$set(this.formData, "reimbursementItemName", reimbursementItem.name)
if (val === 'fyww' || val === 'zfww' || val === 'zfzj' || val === 'zflw') {
this.rules.files[0].required = false
} else {
this.rules.files[0].required = true
}
if (this.$refs["addForm"])
this.$refs["addForm"].clearValidate();
},
async initData() {
this.$set(this.formData, "reimbursementItemSort", "fy")
this.$set(this.formData, "userName", "${@shiro.getPrincipalProperty('username')}")
this.$set(this.formData, "loginName", "${@shiro.getPrincipalProperty('loginname')}")
this.$set(this.formData, "unitName", "${@shiro.getPrincipalProperty('unit').getName()}")
this.$set(this.formData, "unionName", "${@shiro.getPrincipalProperty('union').getUnionname()}")
this.$set(this.formData, "mobile", "${@shiro.getPrincipalProperty('mobile')}")
this.$set(this.formData, "reimbursementItemId", "fyhd")
await this.getTypeOptions()
this.reimbursementItemSortChange(this.formData.reimbursementItemSort)
this.reimbursementItemChange(this.formData.reimbursementItemId)
},
async getBalance() {
const {data} = await $.get(loc() + "/getBalance")
this.balance = data
},
async userRemoteMethod(query) {
if (query) {
const {data} = await $.get("/platform/fw/condolence/apply/queryUser", {query})
this.userOptions = data
}
},
async getTypeOptions() {
const {code, data} = await $.get("/platform/condolence/type/getAll")
if (code == 0) {
this.typeOptions = data
}
},
async typeChange(id) {
const {data, code, msg} = await $.get("/platform/condolence/type/findOne", {id})
if (data) {
this.$set(this.formData, "money", data.money)
this.$set(this.formData, "way", data.way)
this.$set(this.formData, "typeName", data.name)
this.$set(this.formData, "typeCode", data.code)
}
},
async getUserData(userId) {
const {data} = await $.get("/platform/fw/condolence/apply/getUserData", {userId})
return data
},
async userChange() {
const userData = await this.getUserData(this.formData.be_user);
this.$set(this.formData, 'sex', userData.sex)
this.$set(this.formData, 'birthday', userData.birthday)
this.$set(this.formData, 'idcard', userData.idcard)
this.$set(this.formData, 'conMobile', userData.mobile)
this.$set(this.formData, 'job_title', userData.jobtitle)
},
async findData(id) {
const refs = await $.get(loc() + "/findOne", {id})
if(refs.data.be_user) {
const userData = await this.getUserData(refs.data.be_user);
this.userOptions.push(userData)
}
// await this.userChange()
await this.jfSourceChange(refs.data.jf_source)
this.formData = refs.data
},
},
async created() {
this.initData()
if ("${@shiro.hasRole('sysadmin')}" === 'true') {
this.jfSourceList.push({key: "1", name: "校工会"})
this.jfSourceList.push({key: "2", name: "分工会"})
this.jfSourceList.push({key: "3", name: "社团"})
} else {
if ("${@shiro.hasRole('A06')}" === 'true') {
this.jfSourceList.push({key: "1", name: "校工会"})
}
if ("${@shiro.hasAnyRoles('H04', 'gh01')}" === 'true') {
this.jfSourceList.push({key: "2", name: "分工会"})
}
if ("${@shiro.hasRole('club01')}" === 'true') {
this.jfSourceList.push({key: "3", name: "社团"})
}
}
const id = getQueryVariable("id")
if (id) await this.findData(id)
this.clubList = await getClubsByUser()
await this.jfSourceChange(this.formData.jf_source)
const aa = await getDictState("ReimbursementIsSign")
this.ReimbursementIsSign = aa.disabled
}
})
</script>
<!--#
}
#-->