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