456 lines
21 KiB
HTML
456 lines
21 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<div id="app" v-cloak>
|
|
<van-nav-bar title="填写申报信息" left-arrow placeholder fixed @click-left="pjaxReplace('/mobile/index')"></van-nav-bar>
|
|
|
|
<van-form ref="addForm" :show-error-message="false" input-align="right" @submit="onSubmit">
|
|
<van-cell-group inset class="mt10">
|
|
<van-field readonly v-model="formData.user_name" name="user_name" label="申请人姓名"></van-field>
|
|
<van-field readonly v-model="formData.apply_time" name="apply_time" label="申请时间"></van-field>
|
|
<van-field readonly v-model="formData.mobile" name="mobile" label="联系方式"></van-field>
|
|
<van-field readonly
|
|
clickable
|
|
name="activity_type"
|
|
:value="formData.activity_type_name"
|
|
required
|
|
label="活动主体类型"
|
|
@click="showActivityTypePicker = true"
|
|
placeholder="点击选择活动主体类型"
|
|
:rules="[{ required:true, message: '请选择活动主体类型'}]"></van-field>
|
|
<van-popup v-model:show="showActivityTypePicker" position="bottom" round>
|
|
<van-picker show-toolbar
|
|
:columns="activityTypeColumns"
|
|
@confirm="onActivityTypeConfirm"
|
|
@cancel="showActivityTypePicker = false">
|
|
</van-picker>
|
|
</van-popup>
|
|
|
|
<van-field readonly
|
|
clickable
|
|
name="projectTypeCode"
|
|
:value="formData.projectTypeCodeName"
|
|
required
|
|
label="活动项目类型"
|
|
@click="showActivityProjectTypePicker = true"
|
|
placeholder="点击选择活动项目类型"
|
|
:rules="[{ required:true, message: '请选择活动项目类型'}]"></van-field>
|
|
<van-popup v-model:show="showActivityProjectTypePicker" position="bottom" round>
|
|
<van-picker show-toolbar
|
|
:columns="activityProjectTypeColumns"
|
|
@confirm="onActivityProjectTypeConfirm"
|
|
@cancel="showActivityProjectTypePicker = false">
|
|
</van-picker>
|
|
</van-popup>
|
|
|
|
<van-field v-model="formData.activity_name"
|
|
name="activity_name"
|
|
label="活动名称"
|
|
placeholder="请输入活动名称"
|
|
required
|
|
:rules="[{ required:true, message: '请输入活动名称' }]"></van-field>
|
|
<van-field readonly
|
|
v-model="formData.projectCode"
|
|
name="projectCode"
|
|
label="项目编号"
|
|
required
|
|
:rules="[{ required:true, message: '选择活动类型自动生成' }]"
|
|
placeholder="选择活动类型自动生成"></van-field>
|
|
|
|
<template v-if="formData.activity_type!=40003">
|
|
<van-field v-model="formData.fundsUnitName"
|
|
name="fundsUnitName"
|
|
label="申报(承办)单位"
|
|
required
|
|
:rules="[{ required:true, message: '选择活动类型自动生成' }]"
|
|
placeholder="请输入申报(承办)单位"></van-field>
|
|
</template>
|
|
<template v-else>
|
|
<van-field readonly
|
|
clickable
|
|
name="fundsUnitName"
|
|
:value="formData.fundsUnitName"
|
|
required
|
|
label="申报(承办)单位"
|
|
@click="showFundsUnitNamePicker = true"
|
|
placeholder="请选择申报(承办)单位"
|
|
:rules="[{ required:true, message: '请选择申报(承办)单位'}]"></van-field>
|
|
<van-popup v-model:show="showFundsUnitNamePicker" position="bottom" round>
|
|
<van-picker show-toolbar
|
|
:columns="fundsUnitNameColumns"
|
|
@confirm="onFundsUnitNameConfirm"
|
|
@cancel="showFundsUnitNamePicker = false">
|
|
</van-picker>
|
|
</van-popup>
|
|
</template>
|
|
|
|
<van-field
|
|
required
|
|
:rules="[{ required:true, message: '请填写活动计划开始时间' }]"
|
|
readonly
|
|
clickable
|
|
name="startPlannedDate"
|
|
:value="formData.startPlannedDate"
|
|
label="活动计划开始时间"
|
|
placeholder="点击选择活动计划开始时间"
|
|
@click="showStartPlannedDatePicker = true"
|
|
></van-field>
|
|
<van-popup v-model:show="showStartPlannedDatePicker" position="bottom" round>
|
|
<van-datetime-picker
|
|
v-model="formData.startPlannedDate"
|
|
type="date"
|
|
title="选择年月日"
|
|
:min-date="minDate"
|
|
:max-date="maxDate"
|
|
@confirm="onStartPlannedDateConfirm"
|
|
@cancel="showStartPlannedDatePicker=false"
|
|
></van-datetime-picker>
|
|
</van-popup>
|
|
|
|
<van-field
|
|
required
|
|
:rules="[{ required:true, message: '请填写活动计划结束时间' }]"
|
|
readonly
|
|
clickable
|
|
name="endPlannedDate"
|
|
:value="formData.endPlannedDate"
|
|
label="活动计划结束时间"
|
|
placeholder="点击选择活动计划结束时间"
|
|
@click="showEndPlannedDatePicker = true"
|
|
></van-field>
|
|
<van-popup v-model:show="showEndPlannedDatePicker" position="bottom" round>
|
|
<van-datetime-picker
|
|
v-model="formData.endPlannedDate"
|
|
type="date"
|
|
title="选择年月日"
|
|
:min-date="minDate"
|
|
:max-date="maxDate"
|
|
@confirm="onEndPlannedDateConfirm"
|
|
@cancel="showEndPlannedDatePicker=false"
|
|
></van-datetime-picker>
|
|
</van-popup>
|
|
|
|
<van-field v-model="formData.address"
|
|
name="address"
|
|
label="活动地址"
|
|
required
|
|
:rules="[{ required:true, message: '选择活动类型自动生成' }]"
|
|
placeholder="请输入活动地址"></van-field>
|
|
|
|
<van-field v-model="formData.activity_content"
|
|
rows="2"
|
|
autosize
|
|
type="textarea"
|
|
name="activity_content"
|
|
label="活动方案及简介"
|
|
required
|
|
:rules="[{ required:true, message: '选择活动类型自动生成' }]"
|
|
placeholder="请输入活动方案及简介"></van-field>
|
|
|
|
<van-cell-group inset class="up_down" style="margin: 0">
|
|
<div class="van-cell" style="flex-direction: column;">
|
|
<div class="van-cell__title van-field__label"
|
|
style="display: flex;justify-content: space-between;width: 100%">
|
|
<div style="display: flex;">
|
|
<div class="van-cell__title van-field__label" style="width: auto">
|
|
<span>活动费用预算表</span>
|
|
</div>
|
|
</div>
|
|
<van-button v-if="formData.budgets && formData.budgets.length>0 && formData.budgets.length<3"
|
|
style="width: 40px"
|
|
icon="plus" type="primary" round size="mini"
|
|
@click="formData.budgets.push({})"
|
|
native-type="button"></van-button>
|
|
</div>
|
|
<van-divider></van-divider>
|
|
<template v-if="formData.budgets && formData.budgets.length>0">
|
|
<div v-for="o,i in formData.budgets" :key="i" class="mt5">
|
|
<div style="display: flex;justify-content: space-between">
|
|
<span>费用{{(i+1)}}</span>
|
|
<van-button style="width: 40px"
|
|
:disabled="formData.budgets.length==1"
|
|
icon="minus" type="danger" round size="mini"
|
|
@click="formData.budgets.splice(i,1)"
|
|
native-type="button"></van-button>
|
|
</div>
|
|
<van-field label="费用项目名称" v-model="o.name" placeholder="费用项目名称"
|
|
:rules="[{ required:true, message: '请填写费用项目名称' }]"></van-field>
|
|
<van-field label="单价（元）" v-model="o.unitPrice" placeholder="单价（元）" type="number"
|
|
:rules="[{ required:true, message: '请填写单价' }]"></van-field>
|
|
<van-field label="数量" v-model="o.num" placeholder="请填写数量" type="digit"
|
|
:rules="[{ required:true, message: '请填写数量' }]"></van-field>
|
|
<van-field label="合计(元)" v-model="o.total" placeholder="输入单价和数量自动计算">
|
|
<template #input>
|
|
{{isNaN(o.unitPrice * o.num) ? '输入单价和数量自动计算' : (o.unitPrice *
|
|
o.num).toFixed(2)}}
|
|
</template>
|
|
</van-field>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div style="padding: 50px;text-align: center">
|
|
<van-button style="width: 50px"
|
|
icon="plus" type="primary" round size="mini"
|
|
@click="formData.budgets.push({})"
|
|
native-type="button"></van-button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</van-cell-group>
|
|
|
|
<van-field name="files" label="附件" style="flex-flow: column" input-align="left">
|
|
<template #label>
|
|
<div class="mb10">附件</div>
|
|
</template>
|
|
<template #input>
|
|
<vant-file-upload :files.sync="formData.files"></vant-file-upload>
|
|
</template>
|
|
</van-field>
|
|
|
|
<van-cell-group inset style="margin: 0">
|
|
<van-field label="签字" required style="flex-flow: column">
|
|
<template #label>
|
|
<div class="mb10">签字</div>
|
|
</template>
|
|
<template #input>
|
|
<mobile-sign ref="signature" v-model="formData.sign"></mobile-sign>
|
|
</template>
|
|
</van-field>
|
|
</van-cell-group>
|
|
</van-cell-group>
|
|
|
|
<div style="margin: 20px 20px 10px 20px">
|
|
<van-button native-type="submit" style="border-radius: 10px" block type="info" :color="themeColor">
|
|
提 交
|
|
</van-button>
|
|
</div>
|
|
|
|
</van-form>
|
|
</div>
|
|
|
|
<script>
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
mixins: [mobileMixins],
|
|
components: {
|
|
'mobile-sign': httpVueLoader('/components/sign/mobileSign.vue?v=' + new Date().getTime()),
|
|
},
|
|
data() {
|
|
return {
|
|
minDate: new Date(2010, 0, 1),
|
|
maxDate: new Date(2030, 10, 1),
|
|
currentDate: new Date(),
|
|
|
|
showActivityTypePicker: false,
|
|
activityTypeColumns: [],
|
|
|
|
showActivityProjectTypePicker: false,
|
|
activityProjectTypeColumns: [],
|
|
|
|
showFundsUnitNamePicker: false,
|
|
fundsUnitNameColumns: [],
|
|
|
|
showStartPlannedDatePicker: false,
|
|
|
|
showEndPlannedDatePicker: false,
|
|
|
|
formData: {},
|
|
|
|
id: null
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
onActivityTypeConfirm(val) {
|
|
this.showActivityTypePicker = false
|
|
this.formData.activity_type = val.value
|
|
this.formData.activity_type_name = val.text
|
|
this.getProjectCodeChange()
|
|
},
|
|
onActivityProjectTypeConfirm(val) {
|
|
this.showActivityProjectTypePicker = false
|
|
this.formData.projectTypeCode = val.value
|
|
this.formData.projectTypeCodeName = val.text
|
|
},
|
|
onFundsUnitNameConfirm(val) {
|
|
this.formData.fundsUnitName = val.text
|
|
this.formData.fundsUnitId = val.value
|
|
this.showFundsUnitNamePicker = false
|
|
},
|
|
onStartPlannedDateConfirm(val) {
|
|
console.log(val)
|
|
this.formData.startPlannedDate = moment(val).format("YYYY-MM-DD")
|
|
this.showStartPlannedDatePicker = false
|
|
},
|
|
onEndPlannedDateConfirm(val) {
|
|
console.log(val)
|
|
this.formData.endPlannedDate = moment(val).format("YYYY-MM-DD")
|
|
this.showEndPlannedDatePicker = false
|
|
},
|
|
|
|
onSubmit() {
|
|
if(!this.formData.sign){
|
|
this.$toast('请签字')
|
|
return
|
|
}
|
|
this.$dialog.confirm({
|
|
title: '提示',
|
|
message: '您确定提交吗?'
|
|
}).then(async () => {
|
|
const formData = clone(this.formData)
|
|
if (formData.budgets) {
|
|
formData.budgets.forEach(v => {
|
|
v.total = (v.unitPrice * v.num).toFixed(2)
|
|
})
|
|
}
|
|
|
|
const url = this.formData.id ? '/platform/jf/Funds/apply/doEdit' : '/platform/jf/Funds/apply/doAdd'
|
|
|
|
const resp = await $.post(url, {
|
|
activityBx: JSON.stringify(formData),
|
|
sign: this.formData.sign
|
|
})
|
|
if (resp.code === 0) {
|
|
this.$toast.success(resp.msg)
|
|
setTimeout(() => {
|
|
pjaxReplace('/platform/jf/funds/reimbursement/mobile')
|
|
}, 500)
|
|
} else {
|
|
this.$toast.fail('申请失败');
|
|
}
|
|
})
|
|
},
|
|
|
|
async init() {
|
|
this.formData = {
|
|
apply_type: 1,
|
|
budgets: [
|
|
{}
|
|
],
|
|
files: [],
|
|
time: [],
|
|
activity_type: null,
|
|
activity_money: null,
|
|
user_name: '${@shiro.getPrincipalProperty("username")}',
|
|
mobile: '${@shiro.getPrincipalProperty("mobile")}',
|
|
apply_time: moment().format('YYYY-MM-DD'),
|
|
activity_card_number: '${@shiro.getPrincipalProperty("bank_number")}'
|
|
}
|
|
|
|
if ("${@shiro.hasRole('H04')&&!(@shiro.hasRole('A06')||@shiro.hasRole('sysadmin')||@shiro.hasRole('club01'))}" === 'true') {
|
|
this.$set(this.formData, "activity_type", "40002")
|
|
this.$set(this.formData, "fundsUnitName", '${@shiro.getPrincipalProperty("union").getUnionname()}')
|
|
} else if ("${@shiro.hasRole('club01')&&!(@shiro.hasRole('H04')||@shiro.hasRole('sysadmin')||@shiro.hasRole('A06'))}" === 'true') {
|
|
this.$set(this.formData, "activity_type", "40003")
|
|
} else if ("${(@shiro.hasRole('xghng')||@shiro.hasRole('H10'))&&!(@shiro.hasRole('H04')||@shiro.hasRole('sysadmin')||@shiro.hasRole('club01'))}" === 'true') {
|
|
this.$set(this.formData, "activity_type", "40001")
|
|
this.$set(this.formData, "fundsUnitName", '校工会')
|
|
}
|
|
|
|
if (this.formData.activity_type) {
|
|
await this.getProjectCodeChange()
|
|
}
|
|
},
|
|
|
|
async activityChange(val) {
|
|
if (!this.formData.activity_type) {
|
|
const activity = this.activity.find(v => v.v_name == val)
|
|
this.$set(this.formData, 'activity_id', activity ? activity.id : null)
|
|
this.$set(this.formData, 'projectTypeCode', activity ? activity.projectTypeCode : null)
|
|
if (!activity) await this.generateProjectCode(this.formData.activity_type)
|
|
}
|
|
},
|
|
async generateProjectCode(val) {
|
|
const {data} = await $.get('/platform/jf/Funds/apply/generateProjectCode', {activity_type: val})
|
|
this.$set(this.formData, 'projectCode', data)
|
|
},
|
|
async getProjectCodeChange(val) {
|
|
this.$set(this.formData, "fundsUnitName", null)
|
|
await this.generateProjectCode(this.formData.activity_type)
|
|
if (this.formData.activity_type == 40001) {
|
|
this.$set(this.formData, "fundsUnitName", '校工会')
|
|
} else if (this.formData.activity_type == 40002) {
|
|
this.$set(this.formData, "fundsUnitName", '${@shiro.getPrincipalProperty("union").getUnionname()}')
|
|
} else if (this.formData.activity_type == 40003) {
|
|
const allClubs = await getClubs()
|
|
$.get('/platform/jf/Funds/apply/getUserClub').then(resp => {
|
|
if (resp.code === 0) {
|
|
const userClubIds = resp.data.map(v => v.clubid)
|
|
this.fundsUnitNameColumns = allClubs.filter(v => {
|
|
return userClubIds.includes(v.id)
|
|
}).map(v => {
|
|
return {
|
|
text: v.name,
|
|
value: v.id
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
async findOne(id) {
|
|
const resp = await $.get('/platform/jf/Funds/apply/findOne', {id})
|
|
if (resp.code === 0) {
|
|
return resp.data
|
|
}
|
|
},
|
|
async openEdit(id) {
|
|
const data = await this.findOne(id)
|
|
data.activity_type = data.activity_type.toString()
|
|
if (data.files && data.files.length > 0) data.files = JSON.parse(data.files)
|
|
data.plannedDate = [data.startPlannedDate, data.endPlannedDate]
|
|
|
|
if(data.budgets){
|
|
data.budgets = JSON.parse(data.budgets)
|
|
}else{
|
|
data.budgets = []
|
|
}
|
|
|
|
if(data.us_s){
|
|
data.sign = data.us_s
|
|
}
|
|
|
|
this.formData = data
|
|
|
|
const activity_type_name = this.activityTypeColumns.find(v => v.value === this.formData.activity_type)?.text
|
|
this.$set(this.formData,'activity_type_name',activity_type_name)
|
|
|
|
const projectTypeCodeName = this.activityProjectTypeColumns.find(v => v.value === this.formData.projectTypeCode)?.text
|
|
this.$set(this.formData,'projectTypeCodeName',projectTypeCodeName)
|
|
|
|
}
|
|
|
|
},
|
|
async created() {
|
|
getActivityTwoLevelType("40000").then(data => {
|
|
this.activityTypeColumns = data.map(v => {
|
|
return {
|
|
text: v.name,
|
|
value: v.code
|
|
}
|
|
})
|
|
})
|
|
getActivityTwoLevelType("50000").then(data => {
|
|
this.activityProjectTypeColumns = data.map(v => {
|
|
return {
|
|
text: v.name,
|
|
value: v.code
|
|
}
|
|
})
|
|
})
|
|
|
|
let id = GetQueryString("id")
|
|
if (id) {
|
|
this.openEdit(id)
|
|
} else {
|
|
this.init()
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|