221 lines
9.9 KiB
HTML
221 lines
9.9 KiB
HTML
<!--#
|
||
layout("/layouts/platform.html"){
|
||
#-->
|
||
|
||
<style>
|
||
.el-input-number input {
|
||
text-align: left !important;
|
||
}
|
||
</style>
|
||
|
||
<div id="app" v-cloak>
|
||
<guava>
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<h3 style="color: rgb(24, 103, 176);" v-if="formData.reimbursementItemId==1">文体活动申请</h3>
|
||
<h3 style="color: rgb(24, 103, 176);" v-if="formData.reimbursementItemId==2">日常活动申请</h3>
|
||
<h3 style="color: rgb(24, 103, 176);" v-if="formData.reimbursementItemId==3">人员经费申请</h3>
|
||
<h3 style="color: rgb(24, 103, 176);" v-if="formData.reimbursementItemId==4">慰问申请</h3>
|
||
<h3 style="color: rgb(24, 103, 176);" v-if="formData.reimbursementItemId==5">困难帮扶申请</h3>
|
||
</template>
|
||
|
||
<div>
|
||
<el-form label-width="100px">
|
||
<el-form-item class="view-header" label="填写申请信息 " label-width="135px">
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
|
||
<el-form :model="formData" label-position="right" label-suffix="："
|
||
label-width="120px">
|
||
<el-row gutter="60">
|
||
|
||
<el-col :span="8">
|
||
<el-form-item label="经办人" prop="userName">
|
||
<el-input disabled type="text" v-model="formData.userName"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="8">
|
||
<el-form-item label="工号" prop="loginName">
|
||
<el-input disabled type="text" v-model="formData.loginName"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="8">
|
||
<el-form-item label="联系方式" prop="mobile">
|
||
<el-input disabled type="text" v-model="formData.mobile"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="24">
|
||
<el-form-item label="报销项目" prop="reimbursementItemId">
|
||
<el-radio-group @change="reimbursementItemChange"
|
||
v-model="formData.reimbursementItemId">
|
||
<el-radio :label="item.key" border v-for="item in reimbursementItem">{{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 @change="paymentMethodChange" v-model="formData.paymentMethodId">
|
||
<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" v-if="formData.paymentMethodId==3">
|
||
<el-form-item label="户名" prop="payerId">
|
||
<el-select
|
||
:remote-method="userRemoteMethod"
|
||
@change="userChange"
|
||
clearable
|
||
filterable
|
||
placeholder="请输入姓名或工号查找"
|
||
remote
|
||
reserve-keyword
|
||
style="width: 100%"
|
||
v-model="formData.payerId">
|
||
<el-option
|
||
:key="item.id"
|
||
:label="item.username+'（'+item.loginname+'）'"
|
||
:value="item.id"
|
||
v-for="item in userOptions">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12" v-if="formData.paymentMethodId!=3">
|
||
<el-form-item label="户名" prop="bankUserName">
|
||
<el-input type="text" placeholder="请输入户名" v-model="formData.bankUserName"></el-input>
|
||
</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>
|
||
|
||
|
||
</el-row>
|
||
</el-form>
|
||
<template>
|
||
<style-activity :judgment_h02="judgmentH02" :judgment_union="judgmentUnion"
|
||
:judgment_unit="judgmentUnit"
|
||
:z.sync="styleActivityData"
|
||
v-show="formData.reimbursementItemId!=4"></style-activity>
|
||
<condolence :x.sync="condolenceData" v-show="formData.reimbursementItemId==4"></condolence>
|
||
</template>
|
||
</div>
|
||
</el-card>
|
||
</guava>
|
||
</div>
|
||
|
||
<script>
|
||
const vue = new Vue({
|
||
el: '#app',
|
||
data() {
|
||
return {
|
||
judgmentUnit: "${@shiro.hasRole('sysadmin')||@shiro.hasRole('H04')||@shiro.hasRole('gh12')}" === 'true',
|
||
judgmentUnion: "${@shiro.hasRole('sysadmin')||@shiro.hasRole('A06')||@shiro.hasRole('xghhdwy')}" === 'true',
|
||
judgmentH02: "${@shiro.hasRole('H02')}" === 'true',
|
||
formData: {
|
||
reimbursementItemId: 4
|
||
},
|
||
reimbursementItem: [
|
||
{key: 4, name: '慰问'},
|
||
{key: 1, name: '文体活动'},
|
||
// {key: 2, name: '日常活动'},
|
||
{key: 3, name: '人员经费'},
|
||
|
||
],
|
||
userOptions: [],
|
||
paymentMethod: [
|
||
{key: 1, name: '对公支付'},
|
||
// {key: 2, name: '校内支付'},
|
||
{key: 3, name: '个人垫付'},
|
||
],
|
||
condolenceData: {},
|
||
styleActivityData: {},
|
||
difficultyData: {apply_mode: 1, jtfc: [], jtcc: [], jtcys: []},
|
||
userId: "${@shiro.getPrincipalProperty('id')}"
|
||
}
|
||
},
|
||
components: {
|
||
'style-activity': httpVueLoader('/components/reimbursement/StyleActivity.vue?v=2.0.0'),
|
||
'condolence': httpVueLoader('/components/reimbursement/Condolence.vue?v=' + moment(new Date()).unix()),
|
||
'difficulty': httpVueLoader('/components/reimbursement/Difficulty.vue?v=' + moment(new Date()).unix()),
|
||
},
|
||
methods: {
|
||
paymentMethodChange(val) {
|
||
this.formData.paymentMethodId = val
|
||
const paymentMethodName = this.paymentMethod.find(v => v.key == val)
|
||
this.formData.paymentMethodName = paymentMethodName.name
|
||
},
|
||
async userChange() {
|
||
},
|
||
async userRemoteMethod(query) {
|
||
if (query) {
|
||
const {data} = await $.get("/platform/fw/condolence/apply/queryUser", {query})
|
||
this.userOptions = data
|
||
}
|
||
},
|
||
flush() {
|
||
this.formData = {
|
||
userId: "${@shiro.getPrincipalProperty('id')}",
|
||
userName: "${@shiro.getPrincipalProperty('username')}",
|
||
loginName: "${@shiro.getPrincipalProperty('loginname')}",
|
||
unitName: "${@shiro.getPrincipalProperty('unit').getName()}",
|
||
mobile: "${@shiro.getPrincipalProperty('mobile')}",
|
||
applyTime: moment().format('YYYY-MM-DD'),
|
||
reimbursementItemId: 4,
|
||
reimbursementItemName: "慰问",
|
||
paymentMethodId: 1,
|
||
paymentMethodName: '对公支付',
|
||
}
|
||
},
|
||
reimbursementItemChange(val) {
|
||
this.formData.reimbursementItemId = val
|
||
const reimbursementItem = this.reimbursementItem.find(v => v.key == val)
|
||
this.formData.reimbursementItemName = reimbursementItem.name
|
||
this.styleActivityData=this.formData
|
||
}
|
||
},
|
||
watch: {
|
||
'condolenceData': {
|
||
deep: true,
|
||
handler(s) {
|
||
this.condolenceData = Object.assign(this.formData, s)
|
||
}
|
||
},
|
||
'styleActivityData': {
|
||
deep: true,
|
||
handler(s) {
|
||
this.styleActivityData = Object.assign(this.formData, s)
|
||
}
|
||
},
|
||
'difficultyData': {
|
||
deep: true,
|
||
handler(s) {
|
||
this.formData = Object.assign(this.formData, s)
|
||
}
|
||
}
|
||
},
|
||
async created() {
|
||
this.flush()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
|
||
<!--#
|
||
}
|
||
#--> |