317 lines
16 KiB
HTML
317 lines
16 KiB
HTML
<!--#
|
||
layout("/layouts/platform.html"){
|
||
#-->
|
||
<style>
|
||
.v-body {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #f0f2f5;
|
||
}
|
||
|
||
.v-card {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.transition-row {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.transition-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
|
||
.demo-table-expand {
|
||
font-size: 0;
|
||
}
|
||
|
||
.demo-table-expand label {
|
||
color: #99a9bf;
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
<div id="app" v-cloak>
|
||
<guava ref="guava" style="width: 100%;height: 100%">
|
||
<template>
|
||
<div class="v-body">
|
||
<el-card class="v-card" shadow="never">
|
||
<el-tabs @tab-click="id = '${@shiro.getPrincipalProperty('id')}'" v-model="activeName">
|
||
<el-tab-pane label="申请入会" name="first">
|
||
|
||
<div style="display: flex;width: 100%;height: 100%;align-items: center;justify-content: center;position: relative;padding: 10px">
|
||
<el-card shadow="never" style="width: 90%">
|
||
<div class="clearfix" slot="header">
|
||
<h4>申请信息</h4>
|
||
</div>
|
||
<div>
|
||
<el-form :model="formData" :rules="formRules" label-suffix="："
|
||
:disabled="applyInfo.disabled"
|
||
label-width="100px"
|
||
ref="form">
|
||
<el-row type="flex" :gutter="10">
|
||
<el-col :span="8">
|
||
<el-form-item label="姓名" prop="userName">
|
||
<el-input readonly placeholder="请输入内容"
|
||
v-model="formData.userName"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="工号" prop="userName">
|
||
<el-input readonly placeholder="请输入内容"
|
||
v-model="formData.loginName"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="性别" poop="sex">
|
||
<el-radio-group v-model="formData.sex" size="small">
|
||
<el-radio label="男" border>男</el-radio>
|
||
<el-radio label="女" border>女</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row type="flex" :gutter="10">
|
||
<el-col :span="8">
|
||
<el-form-item label="单位" prop="unitName">
|
||
<el-input readonly v-model="formData.unitName"
|
||
placeholder="请输入内容"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="分工会" prop="unionName">
|
||
<el-input readonly v-model="formData.unionName"
|
||
placeholder="请输入内容"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row type="flex" :gutter="10">
|
||
<el-col :span="8">
|
||
<el-form-item label="出生年月" prop="birthday">
|
||
<el-date-picker
|
||
type="date"
|
||
style="width: 100%"
|
||
value-format="yyyy-MM-dd"
|
||
placeholder="请输入出生年月"
|
||
v-model="formData.birthday"></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="工作时间" prop="workDate">
|
||
<el-date-picker
|
||
placeholder="选择日期"
|
||
style="width: 100%"
|
||
type="date"
|
||
v-model="formData.workDate"
|
||
value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="进校时间" prop="comeSchoolDate">
|
||
<el-date-picker
|
||
placeholder="选择日期"
|
||
style="width: 100%"
|
||
type="date"
|
||
v-model="formData.comeSchoolDate"
|
||
value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- <el-form-item label="申请时间" prop="applyTime">-->
|
||
<!-- <el-date-picker disabled-->
|
||
<!-- placeholder="选择日期"-->
|
||
<!-- style="width: 100%"-->
|
||
<!-- type="date"-->
|
||
<!-- v-model="formData.applyTime"-->
|
||
<!-- value-format="yyyy-MM-dd">-->
|
||
<!-- </el-date-picker>-->
|
||
<!-- </el-form-item>-->
|
||
|
||
<el-row type="flex" :gutter="10">
|
||
<el-col :span="8">
|
||
<el-form-item label="联系电话" prop="mobile">
|
||
<el-input placeholder="请输入内容"
|
||
v-model="formData.mobile"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row type="flex" :gutter="10">
|
||
<el-col :span="24">
|
||
<el-form-item label="申请理由" prop="applyReason">
|
||
<el-input placeholder="请输入内容"
|
||
type="textarea"
|
||
maxlength="100"
|
||
rows="5"
|
||
v-model="formData.applyReason"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</el-form>
|
||
|
||
<el-button :disabled="applyInfo.disabled"
|
||
@click="apply"
|
||
style="width: 70%;margin-left: 15%;margin-top: 20px"
|
||
type="primary">
|
||
<span>{{applyInfo.label}}</span>
|
||
</el-button>
|
||
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
|
||
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="变更记录" name="second">
|
||
<app_record :userid="id" ref="app_record"></app_record>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<el-dialog :close-on-click-modal="false" :title="payRecordsDialogTitle" :visible.sync="formDialogVisible"
|
||
width="40%">
|
||
<pay_record :records="payRecords" ref="pay_record" v-if="payRecords.length>0"></pay_record>
|
||
<el-alert :closable="false" class="mt10" type="warning" v-if="!isAidFundMember">
|
||
本次入会，您需要缴费会费{{payMoney}}元，请详知。
|
||
</el-alert>
|
||
<el-row class="mt10" justify="end" type="flex">
|
||
<el-button @click="formDialogVisible=false">取消</el-button>
|
||
<el-button @click="doSubmit" type="primary">提交</el-button>
|
||
</el-row>
|
||
</el-dialog>
|
||
|
||
</guava>
|
||
|
||
|
||
</div>
|
||
|
||
<script>
|
||
const vue = new Vue({
|
||
el: '#app',
|
||
mixins: [initTableMixins],
|
||
computed: {
|
||
payRecordsDialogTitle() {
|
||
if (this.payRecords && this.payRecords.length > 0) {
|
||
return '历年缴费记录(2019年之前的缴费记录未入库)'
|
||
}
|
||
return '温馨提醒:'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
id: "",
|
||
formData: {},
|
||
activeName: 'first',
|
||
applyInfo: {
|
||
disabled: true,
|
||
label: '申请加入'
|
||
},
|
||
formRules: {
|
||
userName: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
loginName: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
sex: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
unitName: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
unionName: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
birthday: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
workDate: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
comeSchoolDate: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
mobile: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
applyReason: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
},
|
||
formDialogVisible: false,
|
||
payRecords: [],
|
||
payMoney: 0,
|
||
isAidFundMember: "${@shiro.getPrincipalProperty('aidFundMember')}" === '1'
|
||
}
|
||
},
|
||
components: {
|
||
'guava': httpVueLoader('/components/plugins/Guava.vue?v=1.0.0'),
|
||
'app_record': httpVueLoader('/components/diseaseaid/aidfund/AppRecord.vue'),
|
||
'pay_record': httpVueLoader('/components/diseaseaid/aidfund/PayRecord.vue'),
|
||
},
|
||
methods: {
|
||
apply() {
|
||
this.$refs.form.validate(async (valid) => {
|
||
if (valid) {
|
||
const isMember = "${@shiro.getPrincipalProperty('aidFundMember')}" === '1'
|
||
const confirm = await this.$confirm(isMember ? '是否确认退出医疗互助基金会？' : '是否提交申请？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
iconClass: "el-icon-question"
|
||
})
|
||
if (confirm !== 'confirm') return
|
||
const response = await $.post(loc() + '/apply', this.formData)
|
||
AssertResponseMessage({
|
||
app: this,
|
||
response,
|
||
success: () => {
|
||
this.$set(this.applyInfo, "disabled", true)
|
||
this.canApply()
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
async doSubmit() {
|
||
const isMember = "${@shiro.getPrincipalProperty('aidFundMember')}" === '1'
|
||
const confirm = await this.$confirm(isMember ? '是否确认退出医疗互助基金会？' : '是否提交申请？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
iconClass: "el-icon-question"
|
||
})
|
||
if (confirm !== 'confirm') return
|
||
const response = await $.post(loc() + '/apply', this.formData)
|
||
AssertResponseMessage({
|
||
app: this,
|
||
response,
|
||
success: () => {
|
||
this.$set(this.applyInfo, "disabled", true)
|
||
this.formDialogVisible = false
|
||
this.canApply()
|
||
}
|
||
})
|
||
},
|
||
async canApply() {
|
||
const response = await $.get(loc() + '/canApply')
|
||
AssertResponse({
|
||
response,
|
||
success: ({data}) => {
|
||
this.applyInfo = data
|
||
}
|
||
})
|
||
},
|
||
async getApplyInfo(){
|
||
const {data} = await $.get(loc() + '/getUserInfo')
|
||
this.formData = data
|
||
}
|
||
|
||
},
|
||
async created() {
|
||
this.canApply()
|
||
this.getApplyInfo()
|
||
}
|
||
})
|
||
</script>
|
||
<!--#
|
||
}
|
||
#-->
|