UNION_HUTB/target/classes/views/platform/member/change/Apply.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: calc(100% - 0px);
        height: calc(100% - 0px);
        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 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 style="width: 500px">
                                    <div slot="header" class="clearfix">
                                        <h4>工会信息</h4>
                                    </div>
                                    <div v-loading="unionInfoLoading">

                                        <el-form label-suffix=":" label-width="120px">
                                            <el-form-item label="工会名称">{{unionInfo.unionname}}</el-form-item>
                                            <el-form-item label="工会编码">{{unionInfo.unioncode}}</el-form-item>
                                            <el-form-item label="工会负责人">{{unionInfo.manager}}</el-form-item>
                                            <el-form-item label="联系电话">{{unionInfo.telephone}}</el-form-item>
                                        </el-form>
                                        <el-button :disabled="!(unionInfo.apply||unionInfo.reApply)"
                                                   type="primary"
                                                   @click="apply"
                                                   style="width: 70%;margin-left: 15%;margin-top: 20px">
                                            <span v-if="unionInfo.apply||unionInfo.reApply">{{unionInfo.reApply?'重新申请':'申请变更'}}</span>
                                            <span v-else-if="unionInfo.record">{{unionInfo.record.stateName}}</span>
                                            <span v-else>非会员</span>
                                        </el-button>

                                    </div>
                                </el-card>
                            </div>


                        </el-tab-pane>
                        <el-tab-pane label="个人信息" name="second">
                            <div style="padding: 0 8%;padding-top: 50px">
                                <member ref="memberInfo" :id="'${@shiro.getPrincipalProperty('id')}'" view></member>
                            </div>
                        </el-tab-pane>

                        <el-tab-pane label="申请记录" name="third">

                            <mem-change-records v-model="unionInfo.records"></mem-change-records>

                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </div>
        </template>


        <template #edit>
            <mem-change-apply ref="apply" :userid="userId" @submit="doSubmit"></mem-change-apply>
        </template>

        <template #view>

        </template>
    </guava>


</div>

<script>
    const vue = new Vue({
        el: '#app',
        mixins: [initTableMixins],
        data() {
            return {
                activeName: 'first',
                unionInfoLoading: true,
                unionInfo: {},

                changeTypeOptions: [],
                changeType: {},
                changeOriginOptions: [],
                changeOrigin: {},

                formData: {},
                formRules: {
                    type: [{required: true, message: '必选', trigger: ['blur', 'change']}],
                },
                submitLoading: false,

                userId: "${@shiro.getPrincipalProperty('id')}"
            }
        },
        components: {
            'guava': httpVueLoader('/components/plugins/Guava.vue?v=1.0.0'),
            'member': httpVueLoader('/components/member/MemberInfo.vue?v=1.0.3'),
            'enum-select': httpVueLoader('/components/plugins/EnumSelect.vue?v=1.0.0'),
            'dict-select': httpVueLoader('/components/plugins/DictSelect.vue?v=1.0.0'),
            'mem-change-records': httpVueLoader('/components/member/MemChangeRecords.vue?v=1.0.0'),
            'mem-change-apply': httpVueLoader('/components/member/MemChangeApply.vue?v=1.0.0'),
        },
        methods: {

            async doSubmit(formData) {
                const resp = await $.post(loc() + "/doApply", formData)
                this.$refs.apply.closeLoading()
                if(resp.code===0){
                    this.getUnionInfo()
                    this.$refs.guava.index()
                }else{
                    this.notifyWarning(resp.msg)
                }
            },
            apply() {
                this.formData = {}
                this.$refs.guava.edit()
                if (this.$refs["form"])
                    this.$refs["form"].resetFields();
            },

            async getUnionInfo() {
                this.unionInfoLoading = true
                const resp = await $.get(loc() + "/unionInfo")
                this.unionInfoLoading = false
                if(resp.code===0){
                    this.unionInfo = resp.data
                }else{
                    this.notifyWarning(resp.msg)
                }

                this.unionInfoLoading = false
                if(resp.code===0){
                    this.unionInfo = resp.data
                }else{
                    this.notifyWarning(resp.msg)
                }
            },
        },
        async created() {
            this.getUnionInfo()

            this.changeType = await member.getChangeType()
            this.changeOrigin = await member.getChangeOrigin()

        }
    })
</script>
<!--#
}
#-->