557 lines
26 KiB
HTML
557 lines
26 KiB
HTML
<!--#
|
||
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="24">
|
||
<el-form-item label="活动类型" prop="jf_source">
|
||
<el-radio-group v-model="formData.jf_source" @change="jfSourceChange">
|
||
<el-radio border :label="i.code" v-for="i in budgetTypeOption">
|
||
{{i.name}}
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
<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="mobile">
|
||
<el-input type="text" v-model="formData.mobile"
|
||
placeholder="请填写联系方式"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
|
||
<el-col :span="12"
|
||
v-if="['ACTIVITY_BUDGET_TYPE_FOUR','ACTIVITY_BUDGET_TYPE_THREE'].includes(formData.jf_source)">
|
||
<el-form-item label="所属协会" prop="clubId">
|
||
<el-select v-model="formData.clubId" @change="getBudgetMoneyOrActivity"
|
||
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="budgetMoney">
|
||
<el-input type="text" v-model="budgetMoney" readonly></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<template>
|
||
<el-col :span="12">
|
||
<el-form-item label="项目名称" prop="activity_name"
|
||
v-if="['ACTIVITY_BUDGET_TYPE_FOUR','ACTIVITY_BUDGET_TYPE_THREE'].includes(formData.jf_source)">
|
||
<el-input v-model="formData.activity_name" placeholder="请输入项目名称"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="项目名称" prop="activityId" v-else>
|
||
<el-select v-model="formData.activityId" filterable
|
||
@change="activityNameChange"
|
||
default-first-option
|
||
placeholder="请选择项目名称" style="width: 100%">
|
||
<el-option :label="item.activityMatter"
|
||
:value="item.id"
|
||
v-for="item in activityList"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item label="金额" prop="money">
|
||
<el-input v-model="formData.money" :placeholder="moneyPlaceholder"
|
||
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="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="files">
|
||
<file-upload card :max="50" :files.sync="formData.files">
|
||
<template #el-upload__tip>
|
||
<div class="el-upload__tip" slot="tip"
|
||
style="color: red;display: contents;font-size: 13px">
|
||
附件需上传本人签名的发票照片或者PDF
|
||
</div>
|
||
</template>
|
||
</file-upload>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="签  字" prop="signUrl">
|
||
<sign :qz.sync="formData.signUrl" prefix="reimbursement"
|
||
:is_value_base64="false"></sign>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</el-form>
|
||
|
||
<div style="float: right;margin: 20px 0">
|
||
<el-button plain type="primary" :disabled="roleDisabled" @click="doAdd(false)">保
|
||
存
|
||
</el-button>
|
||
<el-button type="primary" :disabled="roleDisabled" @click="doAdd(true)">提 交
|
||
</el-button>
|
||
</div>
|
||
|
||
|
||
</el-card>
|
||
</guava>
|
||
|
||
</div>
|
||
|
||
|
||
<script>
|
||
const 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'
|
||
|| self.formData.reimbursementItemId === 'zfjl') {
|
||
callback()
|
||
} else {
|
||
if (self.formData.files === undefined || self.formData.files === null) {
|
||
callback(new Error("请上传附件"))
|
||
}
|
||
callback()
|
||
}
|
||
};
|
||
return {
|
||
clubList: [],
|
||
budgetMoney: 0,
|
||
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"},
|
||
{key: "zfjl", 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: false,
|
||
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']}],
|
||
activityId: [{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']}],
|
||
unionId: [{required: true, message: '必填', trigger: ['change', 'blur']}],
|
||
billNumber: [{
|
||
required: true,
|
||
message: '请填写发票号码，如有多个请用逗号分隔',
|
||
trigger: ['change', 'blur']
|
||
}],
|
||
files: [{required: true, validator: checkFiles, trigger: ['blur', 'change']}],
|
||
signUrl: [{required: true, message: '必填', trigger: ['change', 'blur']}],
|
||
activity_time: [{required: true, message: '必填', trigger: ['change', 'blur']}],
|
||
activity_number: [{
|
||
required: true,
|
||
message: '必填',
|
||
trigger: ['change', 'blur']
|
||
}],
|
||
},
|
||
roleDisabled: false,
|
||
|
||
activityList: [],
|
||
budgetTypeOption: [],
|
||
moneyPlaceholder: "请输入金额",
|
||
totalBudgetMoney: 0
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
async getBxMoneyByActivityId(activityId, jf_source) {
|
||
const resp = await $.post("/platform/reimbursement/applyNew/getBxMoneyByActivityId", {
|
||
activityId,
|
||
jf_source
|
||
})
|
||
if (resp.code === 0) {
|
||
return resp.data
|
||
} else {
|
||
return 0
|
||
}
|
||
},
|
||
async activityNameChange(val) {
|
||
if (val) {
|
||
if (["ACTIVITY_BUDGET_TYPE_TWO", "ACTIVITY_BUDGET_TYPE_ONE"].includes(this.formData.jf_source)) {
|
||
const data = this.activityList.find(a => a.id === val)
|
||
if (this.formData.jf_source === "ACTIVITY_BUDGET_TYPE_TWO") {
|
||
if (data.isSchoolBudget) {
|
||
this.moneyPlaceholder = "预算金额" + data.totalBudgetMoney + "元"
|
||
} else {
|
||
if (data.isRepeatReimbursement) {
|
||
const money = await this.getBxMoneyByActivityId(val, this.formData.jf_source)
|
||
if (money > 0) {
|
||
this.moneyPlaceholder = "预算金额：" + data.totalBudgetMoney + "元，已报销金额：" + money + ",不能超过20%"
|
||
} else {
|
||
this.moneyPlaceholder = "预算金额：" + data.totalBudgetMoney + "元,不能超过20%"
|
||
}
|
||
} else {
|
||
|
||
}
|
||
}
|
||
} else {
|
||
if (data.isRepeatReimbursement) {
|
||
const money = await this.getBxMoneyByActivityId(val, this.formData.jf_source)
|
||
if (money > 0) {
|
||
this.moneyPlaceholder = "预算金额：" + data.totalBudgetMoney + "元，已报销金额：" + money + ",不能超过20%"
|
||
} else {
|
||
this.moneyPlaceholder = "预算金额：" + data.totalBudgetMoney + "元,不能超过20%"
|
||
}
|
||
} else {
|
||
const money = await this.getBxMoneyByActivityId(val, this.formData.jf_source)
|
||
if (money > 0) {
|
||
this.moneyPlaceholder = "预算金额：" + (data.totalBudgetMoney - money) + "元"
|
||
} else {
|
||
this.moneyPlaceholder = "预算金额：" + data.totalBudgetMoney + "元,不能超过20%"
|
||
}
|
||
}
|
||
}
|
||
this.totalBudgetMoney = data.totalBudgetMoney
|
||
this.$set(this.formData, 'activity_name', data.activityMatter)
|
||
} else {
|
||
this.moneyPlaceholder = "预算金额" + this.budgetMoney + "元"
|
||
this.totalBudgetMoney = this.budgetMoney
|
||
this.$set(this.formData, 'activity_name', val)
|
||
}
|
||
} else {
|
||
this.moneyPlaceholder = "请输入金额"
|
||
this.totalBudgetMoney = 0
|
||
this.$set(this.formData, 'activity_name', null)
|
||
}
|
||
},
|
||
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) {
|
||
if (!val) {
|
||
this.budgetMoney = 0
|
||
return
|
||
}
|
||
this.$set(this.formData, "activityId", null)
|
||
await this.getBudgetMoneyOrActivity()
|
||
if (val === "ACTIVITY_BUDGET_TYPE_TWO") {
|
||
this.$set(this.formData, "unionId", "${@shiro.getPrincipalProperty('unit').getUnionid()}")
|
||
}
|
||
},
|
||
async getBudgetMoneyOrActivity() {
|
||
const {data} = await $.get(loc() + "/getBudgetMoneyOrActivity", {
|
||
clubId: this.formData.clubId,
|
||
unionId: this.formData.unionId,
|
||
id: this.formData.id,
|
||
jf_source: this.formData.jf_source
|
||
})
|
||
this.budgetMoney = data.budgetMoney
|
||
this.activityList = data.activityList
|
||
},
|
||
async addValidate() {
|
||
const {activityId, jf_source, money, clubId} = this.formData
|
||
const resp = await $.post("/platform/reimbursement/applyNew/bxAddValidate", {
|
||
activityId,
|
||
jf_source,
|
||
money,
|
||
clubId
|
||
})
|
||
return resp
|
||
},
|
||
async doAdd(flag) {
|
||
let valid = false
|
||
if (flag) {
|
||
valid = await this.$refs["addForm"].validate()
|
||
if (!valid) {
|
||
return
|
||
}
|
||
}
|
||
const validateResp = await this.addValidate()
|
||
if (validateResp.code !== 0) {
|
||
this.$alert(validateResp.msg, '温馨提示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
|
||
}
|
||
});
|
||
|
||
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,
|
||
flag: flag
|
||
})
|
||
loading.close()
|
||
if (resp.code === 0) {
|
||
this.notifySuccess(resp.msg)
|
||
window.location.href="/activity/reimbursement/list"
|
||
} else {
|
||
this.notifyWarning(resp.msg)
|
||
|
||
}
|
||
},
|
||
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, "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, "goods", [])
|
||
this.budgetTypeOption = await getDictByCode("ACTIVITY_BUDGET_TYPE");
|
||
},
|
||
|
||
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()
|
||
this.formData = refs.data
|
||
await this.getBudgetMoneyOrActivity()
|
||
this.activityNameChange(this.formData.activityId ? this.formData.activityId : this.formData.activity_name)
|
||
},
|
||
async getClubsByUser() {
|
||
const {data} = await $.get("/platform/reimbursement/applyNew/getClubsByUser", {})
|
||
return data
|
||
}
|
||
},
|
||
async created() {
|
||
await this.initData()
|
||
this.clubList = await this.getClubsByUser()
|
||
let budgetTypeOption = []
|
||
if ("${@shiro.hasRole('sysadmin')}" === 'true') {
|
||
|
||
} else {
|
||
if ("${@shiro.hasRole('A06')||@shiro.hasRole('xghjf')}" === 'true') {
|
||
this.budgetTypeOption.map(v => {
|
||
if (["ACTIVITY_BUDGET_TYPE_ONE"].includes(v.code)) {
|
||
budgetTypeOption.push(v)
|
||
}
|
||
})
|
||
}
|
||
if ("${@shiro.hasRole('H01')}" === 'true') {
|
||
this.budgetTypeOption.map(v => {
|
||
if (["ACTIVITY_BUDGET_TYPE_TWO"].includes(v.code)) {
|
||
budgetTypeOption.push(v)
|
||
}
|
||
})
|
||
}
|
||
|
||
if (this.clubList.length>0) {
|
||
this.budgetTypeOption.map(v => {
|
||
if (["ACTIVITY_BUDGET_TYPE_THREE", "ACTIVITY_BUDGET_TYPE_FOUR"].includes(v.code)) {
|
||
budgetTypeOption.push(v)
|
||
}
|
||
})
|
||
}
|
||
this.budgetTypeOption = budgetTypeOption
|
||
}
|
||
|
||
const id = getQueryVariable("id")
|
||
if (id) await this.findData(id)
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<!--#
|
||
}
|
||
#-->
|