415 lines
19 KiB
HTML
415 lines
19 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<div id="app" v-cloak>
|
|
<van-nav-bar title="填写慰问申请" left-arrow placeholder fixed
|
|
@click-left="history.back()"></van-nav-bar>
|
|
<van-form ref="addForm" :show-error-message="false" input-align="right">
|
|
<van-cell-group inset class="mt10">
|
|
<van-field readonly value="${@shiro.getPrincipalProperty('username')}" name="manager_name"
|
|
label="申请人"></van-field>
|
|
|
|
<van-field readonly :value="formData.apply_time" name="apply_time"
|
|
label="申请时间"
|
|
></van-field>
|
|
|
|
<van-field @input="userRemoteMethod" name="be_user_name"
|
|
required
|
|
v-model="formData.be_user_name" label="慰问对象" placeholder="请输入慰问对象"
|
|
:rules="[{ required: true, message: '请填写慰问对象' }]"></van-field>
|
|
|
|
<van-action-sheet v-model="sheetShow"
|
|
:actions="userList"
|
|
cancel-text="重新输入姓名或工号查询"
|
|
@cancel="userList = []"
|
|
:close-on-click-overlay="false"
|
|
@select="onUserSelect">
|
|
</van-action-sheet>
|
|
|
|
<van-field :rules="[{ required: true, message: '请填写身份证号' }]" label="身份证号" name="be_user_idcard"
|
|
placeholder="身份证号" required v-model="formData.be_user_idcard"
|
|
></van-field>
|
|
|
|
<van-field :rules="[{ required: true, message: '请填写职务/职称' }]" label="职务/职称" name="be_user_zwzc"
|
|
placeholder="职务/职称" required v-model="formData.be_user_zwzc"
|
|
></van-field>
|
|
|
|
<van-field :rules="[{ required: true, message: '请填写联系电话' }]" label="联系电话" name="be_user_mobile"
|
|
placeholder="联系电话" required v-model="formData.be_user_mobile"
|
|
></van-field>
|
|
|
|
<van-field :rules="[{ required: true, message: '请填写单位' }]" label="单位" name="be_user_unitname"
|
|
placeholder="单位" required v-model="formData.be_user_unitname"
|
|
></van-field>
|
|
|
|
<van-field @input="payeeUserRemoteMethod" name="payee_name"
|
|
|
|
label="慰问金垫付人" placeholder="请输入垫付人" v-model="formData.payee_name"></van-field>
|
|
|
|
<van-action-sheet v-model="payeeSheetShow"
|
|
:actions="payeeUserList"
|
|
cancel-text="重新输入姓名或工号查询"
|
|
@cancel="payeeUserList = []"
|
|
:close-on-click-overlay="false"
|
|
@select="payeeOnUserSelect">
|
|
</van-action-sheet>
|
|
|
|
<!-- <van-field v-model="formData.payee_bank_number" name="payee_bank_number" type="number"
|
|
label="收款人银行卡" placeholder="请输入收款人银行卡"></van-field>
|
|
<van-field v-model="formData.payee_bank_name" name="payee_bank_name"
|
|
label="收款人开户行" placeholder="请输入收款人开户行"></van-field>-->
|
|
|
|
|
|
<van-field readonly clickable name="type" :value="formData.typeName"
|
|
required
|
|
label="慰问类型"
|
|
@click="showTypePicker = true" placeholder="点击选择慰问类型"
|
|
:rules="[{ required:true, message: '请选择慰问类型'}]"></van-field>
|
|
<van-popup v-model:show="showTypePicker" position="bottom" round>
|
|
<van-picker show-toolbar :columns="typeColumns" @confirm="onTypeConfirm"
|
|
@cancel="showTypePicker = false">
|
|
</van-picker>
|
|
</van-popup>
|
|
|
|
<van-field readonly clickable name="way" :value="formData.wayName"
|
|
label="慰问方式"
|
|
required
|
|
placeholder="点击选择慰问方式"
|
|
:rules="[{ required:true, message: '请选择慰问方式'}]"></van-field>
|
|
<van-popup v-model:show="showWayPicker" position="bottom" round>
|
|
<van-picker show-toolbar :columns="wayColumns" @confirm="onWayConfirm"
|
|
@cancel="showWayPicker = false">
|
|
</van-picker>
|
|
</van-popup>
|
|
|
|
|
|
<!-- <van-field v-model="formData.money" name="money" type="number" label="慰问金额"
|
|
:rules="[{ required:true, message: '请填写慰问金额' }]"></van-field>-->
|
|
|
|
<!-- <van-field
|
|
required
|
|
:rules="[{ required:true, message: '请填写慰问时间' }]"
|
|
readonly
|
|
clickable
|
|
name="occur_time"
|
|
:value="formData.occur_time"
|
|
label="慰问时间"
|
|
placeholder="点击选择慰问时间"
|
|
@click="showOccurTime = true"
|
|
></van-field>
|
|
<van-calendar v-model="showOccurTime"
|
|
@confirm="onOccurTimeConfirm"
|
|
:min-date="minDate"
|
|
:max-date="maxDate"
|
|
:color="themeColor"></van-calendar>-->
|
|
|
|
<!--<template
|
|
v-if="['c7175af55693441e8233be4552cef9d5','0872ea0b95aa463fb8d98c46bdf72537'].includes(formData.type)">
|
|
<van-field :value="formData.hospital_stay"
|
|
readonly clickable required
|
|
@click="hospital_stay = true"
|
|
name="hospital_stay" label="住院时间"
|
|
placeholder="请选择住院时间"
|
|
:rules="[{ required:true, message: '请选择住院时间' }]"></van-field>
|
|
<van-calendar v-model="hospital_stay" type="range" @confirm="onConfirm"
|
|
:min-date="new Date('1999-01-01')"
|
|
:color="themeColor"></van-calendar>
|
|
|
|
<van-field v-model="formData.the_hospital" name="the_hospital" name="type" label="所在医院"
|
|
placeholder="请填写所在医院" required
|
|
:rules="[{ required:true, message: '请填写所在医院' }]"></van-field>
|
|
</template>-->
|
|
|
|
<van-field v-model="formData.remark" name="remark" label="申请事由" style="flex-flow: column"
|
|
required
|
|
:rules="[{ required:true, message: '请填写申请事由' }]"
|
|
placeholder="请填写申请事由"
|
|
input-align="left"
|
|
rows="3" maxlength="200" type="textarea" show-word-limit autosize>
|
|
<template #label>
|
|
<div class="mb10">申请事由</div>
|
|
</template>
|
|
</van-field>
|
|
|
|
</van-cell-group>
|
|
<!--
|
|
<van-cell-group inset class="mt10 up_down">
|
|
<div class="van-cell">
|
|
<div class="van-cell__title van-field__label" style="display: flex;justify-content: space-between">
|
|
<div style="display: flex;">
|
|
<div class="van-field__left-icon">
|
|
<i class="van-icon van-icon-friends-o"></i>
|
|
</div>
|
|
<div class="van-cell__title van-field__label" style="width: auto">
|
|
<span>购置物品及价格</span>
|
|
</div>
|
|
</div>
|
|
|
|
<van-button v-if="goods && goods.length>0 && goods.length<3" style="width: 40px"
|
|
icon="plus" type="primary" round size="mini"
|
|
@click="goods.push({})"
|
|
native-type="button"></van-button>
|
|
</div>
|
|
<van-divider></van-divider>
|
|
<template v-if="goods && goods.length>0">
|
|
<div v-for="o,i in goods" class="mt5">
|
|
<div style="font-weight: 700;display: flex;justify-content: space-between">
|
|
<span>物品{{toChinesNum(i+1)}}</span>
|
|
<van-button style="width: 40px"
|
|
icon="minus" type="danger" round size="mini"
|
|
@click="goods.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.price" placeholder="请填写物品价格"
|
|
type="number"
|
|
:rules="[{ required:true, message: '请填写物品价格' }]" @input="priceInput"></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="goods.push({})"
|
|
native-type="button"></van-button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</van-cell-group>-->
|
|
|
|
<van-cell-group inset class="mt10">
|
|
<van-field label="附  件" name="files"
|
|
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>
|
|
|
|
<van-cell-group inset class="mt10">
|
|
<van-field label="签字" required style="flex-flow: column">
|
|
<template #label>
|
|
<div class="mb10">签  字</div>
|
|
</template>
|
|
<template #input>
|
|
<mobile-sign ref="signature" :my_sign.sync="formData.sign"></mobile-sign>
|
|
</template>
|
|
</van-field>
|
|
</van-cell-group>
|
|
|
|
<div style="margin: 20px 20px 10px 20px">
|
|
<van-button @click="onSubmit()" style="border-radius: 10px" block type="info" :color="themeColor">
|
|
提 交
|
|
</van-button>
|
|
</div>
|
|
</van-form>
|
|
</div>
|
|
|
|
<script>
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
mixins: [mobileMixins],
|
|
data() {
|
|
return {
|
|
goods: [],
|
|
payeeSheetShow: false,
|
|
payeeUserList: [],
|
|
hospital_stay: false,
|
|
userList: [],
|
|
formData: {},
|
|
showTypePicker: false,
|
|
showWayPicker: false,
|
|
sheetShow: false,
|
|
typeColumns: [],
|
|
wayColumns: [],
|
|
files: [],
|
|
showOccurTime: false,
|
|
minDate: moment().subtract(5, 'year')._d,
|
|
maxDate: new Date(),
|
|
money: 0
|
|
}
|
|
},
|
|
watch: {
|
|
"formData.money"(val) {
|
|
if (val > this.money) {
|
|
this.$notify({
|
|
title: '警告',
|
|
message: '金额超过规定金额' + this.money + "（元）",
|
|
type: 'warning'
|
|
});
|
|
this.$set(this.formData, "money", this.money)
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
'mobile-sign': httpVueLoader('/components/sign/mobileSign.vue'),
|
|
},
|
|
methods: {
|
|
priceInput() {
|
|
let num = 0
|
|
this.goods.forEach(v => {
|
|
num += parseFloat(v.price)
|
|
})
|
|
this.$set(this.formData, "money", num)
|
|
},
|
|
onOccurTimeConfirm(val) {
|
|
this.$set(this.formData, "occur_time", moment(val).format("YYYY-MM-DD"))
|
|
this.showOccurTime = false
|
|
},
|
|
onConfirm(date) {
|
|
const [start, end] = date;
|
|
this.hospital_stay = false;
|
|
this.formData.hospital_stay = moment(start).format('YYYY-MM-DD') + "-" + moment(end).format('YYYY-MM-DD');
|
|
this.$set(this.formData, "hospital_stay_1", moment(start).format('YYYY-MM-DD'))
|
|
this.$set(this.formData, "hospital_stay_2", moment(end).format('YYYY-MM-DD'))
|
|
},
|
|
async userRemoteMethod(event) {
|
|
if (event) {
|
|
const arr = await this.queryUser(event)
|
|
this.userList = arr.map(v => {
|
|
return {
|
|
name: v.username + "(" + v.loginname + ")",
|
|
id: v.id,
|
|
idcard: v.idcard,
|
|
unitname: v.unitname,
|
|
mobile: v.mobile,
|
|
sex: v.sex
|
|
}
|
|
})
|
|
this.sheetShow = true
|
|
}
|
|
},
|
|
async payeeUserRemoteMethod(event) {
|
|
if (event) {
|
|
const arr = await this.queryUser(event)
|
|
this.payeeUserList = arr.map(v => {
|
|
return {
|
|
name: v.username + "(" + v.loginname + ")",
|
|
id: v.id,
|
|
username: v.username,
|
|
loginname: v.loginname
|
|
}
|
|
})
|
|
this.payeeSheetShow = true
|
|
}
|
|
},
|
|
async queryUser(query) {
|
|
const {data} = await $.get("/platform/fw/condolence/apply/queryUser", {query})
|
|
return data
|
|
},
|
|
onUserSelect(u) {
|
|
this.$set(this.formData, 'be_user', u.id)
|
|
this.$set(this.formData, 'be_user_name', u.name)
|
|
this.$set(this.formData, "be_user_mobile", u.mobile)
|
|
this.$set(this.formData, "be_user_idcard", u.idcard)
|
|
this.$set(this.formData, "be_user_unitname", u.unitname)
|
|
this.$set(this.formData, "be_user_sex", u.sex)
|
|
this.sheetShow = false
|
|
},
|
|
async payeeOnUserSelect(u) {
|
|
this.$set(this.formData, 'payee', u.id)
|
|
this.$set(this.formData, 'payee_name', u.name)
|
|
this.$set(this.formData, "solatiumAdvancesPeoplesName", u.username)
|
|
this.$set(this.formData, "solatiumAdvancesArtificialNumber", u.loginname)
|
|
|
|
this.payeeSheetShow = false
|
|
},
|
|
async onTypeConfirm(val) {
|
|
this.$set(this.formData, "typeName", val.text)
|
|
this.$set(this.formData, "type", val.value)
|
|
const {data, code, msg} = await $.get("/platform/condolence/type/findOne", {id: val.value})
|
|
this.$set(this, "money", data.money)
|
|
await this.moneyChange(val.value)
|
|
this.showTypePicker = false;
|
|
},
|
|
onWayConfirm(val) {
|
|
this.$set(this.formData, "wayName", val.text)
|
|
this.$set(this.formData, "way", val.value)
|
|
this.showWayPicker = false;
|
|
},
|
|
async moneyChange(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, "wayName", data.way)
|
|
this.$set(this.formData, "way", data.way)
|
|
}
|
|
},
|
|
async onSubmit() {
|
|
if (!this.formData.files) {
|
|
vant.Toast('请上传附件材料!')
|
|
return
|
|
}
|
|
this.$refs.signature.submitSign()
|
|
if (this.$refs.signature.checkNull()) {
|
|
vant.Toast('请签名!')
|
|
return
|
|
}
|
|
await this.$refs.signature.updateSign()
|
|
const formData = clone(this.formData)
|
|
formData.mobile = "${@shiro.getPrincipalProperty('mobile')}"
|
|
formData.files = JSON.stringify(formData.files)
|
|
formData.goods = this.goods
|
|
this.$refs['addForm'].validate().then(async () => {
|
|
this.$toast.loading('提交中...')
|
|
const res = await $.post('/platform/fw/condolence/apply/doAdd', {
|
|
data: JSON.stringify(formData),
|
|
sign: formData.sign
|
|
})
|
|
if (res.code === 0) {
|
|
this.$toast.success('申请成功');
|
|
setTimeout(() => {
|
|
location.replace('/mobile/condolence/apply')
|
|
}, 1000)
|
|
} else {
|
|
this.$toast.fail('申请失败');
|
|
}
|
|
})
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
if (this.$refs.signature) {
|
|
this.$refs.signature.getMySign()
|
|
}
|
|
})
|
|
},
|
|
async created() {
|
|
this.formData.apply_time = moment().format('YYYY-MM-DD')
|
|
const {code, data} = await $.get("/platform/condolence/type/getAll")
|
|
data.forEach(v => {
|
|
this.typeColumns.push({value: v.id, text: v.name + "(" + v.code + ")"})
|
|
})
|
|
for (let i in condolence.way) {
|
|
this.wayColumns.push({value: condolence.way[i], text: condolence.way[i]})
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<style>
|
|
|
|
.up_down > .van-cell {
|
|
flex-flow: column;
|
|
}
|
|
|
|
.up_down > .van-cell > .van-field__label {
|
|
width: 100%;
|
|
}
|
|
|
|
.van-cell, .van-picker button, .submit .van-button--normal {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.van-divider {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
</style>
|
|
<!--#
|
|
}
|
|
#--> |