init
This commit is contained in:
Paidax
@@ -0,0 +1,455 @@
|
||||
<!--#
|
||||
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>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user