dev/dcp-app-gate/pages/service/others/myActivityRegistration.vue

<template>
    <view style="margin-top: 100upx;">
        <u-mask :show="show" @click="show = false" :mask-click-able="false">
            <view style="display: flex;align-items: center;justify-content: center;height: 100%;">
                <view style="width: 20px;height: 20px;">
                    <u-loading mode="circle"></u-loading>
                </view>
            </view>
        </u-mask>
        <view class="">
            <u-tabs :list="list" :is-scroll="true" :current="current" @change="change"></u-tabs>
        </view>
        <view class="offline-signup-list" v-if="tableData.length">
            <view class="offline-signup-list-item" v-for="(item, index) in tableData" :key="index"
                  @click="resubmit(item)">
                <!--                <view class="conference-title">{{ array2Obj(item.meetingId, $i18n.locale=='en'?'meetingNameEn':'meetingName') }}</view>-->
                <view class="conference-title">{{ item.guestRoomInfoId }}</view>
                <view class="signup-info">
                    <view>
                        <text class="signup-info-label">{{$i18n.locale=='en'?'ApplyName':'报名人员：'}}</text>
                        <text class="signup-info-value">{{item.applyWay=='zh'? item.name: item.nameEn}}</text>
                    </view>
                    <!--<view>
                        <text class="signup-info-label">{{$i18n.locale=='en'?'ApplyDate':'报名时间：'}}</text>
                        <text class="signup-info-value">{{item.isAcceptMeeting}}</text>
                    </view>-->
                    <view>
                        <text class="signup-info-label">{{$i18n.locale=='en'?'Date':'活动时间：'}}</text>
                        <text class="signup-info-value">
                            {{item.isAcceptMeeting}} ~ {{item.isAcceptVisit}}
                        </text>
                    </view>
                    <!-- <view><text class="signup-info-label">会议地点：</text><text class="signup-info-value">北京，中国</text></view> -->
                    <text v-if="item.auditStatusDict != '4'" class="approval-com" v-for="(com,c) in item.comments"
                          :key="c">{{com}}
                    </text>
                    <view class="operation-btn-group">
                        <button @click="resubmit(item)" v-if="item.auditStatusDict=='2' && item.comments.length"
                                type="resubmit" hover-class="button-hover" class="operation-btn" plain="true">
                            {{$i18n.locale=='en'?'ReApply':'重新提交'}}
                        </button>
                    </view>
                </view>
                <!-- 审批中:2 审批不通过:3 审批通过:4 -->
                <view
                        class="approval-state"
                        :style="{background: getStateColor(item.auditStatusDict).c, 'box-shadow': '0 4px 4px '+getStateColor(item.auditStatusDict).sc}">
                    {{ approvalStatus(item.auditStatusDict) }}
                </view>
            </view>
            <view style="margin-top: 30upx;">
                <u-loadmore :status="status" :load-text="loadText"/>
            </view>
        </view>
        <view class="nodata-box" v-else>
            <image src="@/static/img/public/7.png" mode=""></image>
            <text>{{$i18n.locale=='en'? 'No Data': '暂无数据'}}</text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                list: [
                    {
                        name: this.$i18n.locale == 'zh' ? '全部' : 'All',
                    }, {
                        name: this.$i18n.locale == 'zh' ? '审批中' : 'Under Approval',
                    }, {
                        name: this.$i18n.locale == 'zh' ? '审批不通过' : 'Registration Failed',
                    }, {
                        name: this.$i18n.locale == 'zh' ? '审批通过' : 'Registration Successful',
                    }
                ],
                current: 0,
                tableData: [],
                statusArray: [],
                userId: JSON.parse(uni.getStorageSync('user')).id,
                auditStatusDict: '',
                pageNo: 0,
                totalPage: 1,
                status: 'loading',
                isLoading: true,
                loadText: {
                    loading: this.$i18n.locale == 'zh' ? '加载中' : 'Loading',
                    nomore: this.$i18n.locale == 'zh' ? '没有更多数据了' : 'No more'
                },
            }
        },
        props: {
            fatherData: {
                type: Number,
                default: function() {
                    return {};
                }
            },
        },
        mounted() {
            // console.log(JSON.parse(uni.getStorageSync('user')))
            this.getMeetingInfo();
            this.getDicts();
        },
        /*onReachBottom() { //页面拉到底部加载
            if (this.isLoading) {
                this.getMeetingInfo();
            }
        },*/
        watch:{
            'fatherData'(val,oldval){
                if (this.isLoading) {
                    this.getMeetingInfo();
                }
            }
        },
        methods: {
            async getDicts() {
                const res = await this.$myRequest({
                    url: '/sys/sysDicts',
                    data: {
                        type: 'APPROVAL_STATUS'
                    }
                })
                this.statusArray = res.data[0];
                this.statusEnArray = [{"label": "Approvaling", "value": "2"},
                    {"label": "Failed", "value": "3"},
                    {"label": "Successful", "value": "4"}];
                // console.log(this.statusArray)
            },
            async getMeetingInfo() {
                console.log(this.pageNo)
                console.log(this.totalPage)
                const that = this;
                this.show = true;
                let params = {
                    pageNo: '',
                    pageSize: 10,
                    language: this.$i18n.locale.toUpperCase(),
                    auditStatusDict: that.auditStatusDict,
                    createBy: that.userId,
                };
                if (this.pageNo >= this.totalPage) {
                    this.isLoading = false;
                    this.status = 'nomore';
                    this.show = false;
                } else {
                    this.isLoading = true;
                    this.pageNo++;
                    params.pageNo = this.pageNo;
                    await this.$myRequest({
                        url: '/meeting/meetingApplys/getActivityApplyByIdForWeb',
                        data: {
                            ...params
                        }
                    }).then(res => {
                        if (res.data && res.data.page.list) {
                            if (that.tableData.length == 0 || that.tableData.length == undefined) {
                                that.tableData = res.data.page.list;
                            } else {
                                that.tableData = that.tableData.concat(res.data.page.list);
                            }
                            that.tableData.forEach(item => {
                                item.isAcceptMeeting = item.isAcceptMeeting - 0;
                                item.isAcceptVisit = item.isAcceptVisit - 0;
                                item.isAcceptMeeting = item.isAcceptMeeting ? this.formatDate(item.isAcceptMeeting, "YYYY-MM-DD") : "";
                                item.isAcceptVisit = item.isAcceptVisit ? this.formatDate(item.isAcceptVisit, "YYYY-MM-DD") : "";
                                that.$set(item, 'comments', [])
                                this.$myRequest({
                                    url: '/workflow/approval/history',
                                    data: {
                                        processKey: 'MEETING_APPROVE',
                                        businessKey: item.id
                                    }
                                }).then(taskRes => {
                                    if (taskRes.data && taskRes.data.tasks) {
                                        taskRes.data.tasks.forEach(com => {
                                            if (com.comment) {
                                                item.comments.push(com.comment)
                                            }
                                        })
                                    }
                                })
                            });
                            if (res.data.page.list.length < 10) {
                                that.status = 'nomore';
                            }
                            this.totalPage = res.data.page.totalPage;
                        }
                        this.show = false
                    })
                }
            },
            change(index) {
                this.current = index;
                if (index == 0) {
                    this.auditStatusDict = '';
                } else {
                    this.auditStatusDict = index - 0 + 1;
                }
                this.tableData = [];
                this.pageNo = 0;
                this.totalPage = 1;
                this.getMeetingInfo()
            },
            approvalStatus(val) {
                let arr = this.$i18n.locale == 'en' ? this.statusEnArray : this.statusArray;
                let targeTapproval = arr.filter(item => {
                    return val == item.value;
                })
                return targeTapproval[0]['label'];
            },
            getStateColor(s) {
                let color;
                let sColor;
                switch (s) {
                    case '2':
                        color = '#f59a23';
                        sColor = '#fad1c5';
                        break;
                    case '3':
                        color = '#fd5c5c';
                        sColor = '#f99b9b';
                        break;
                    case '4':
                        color = '#03b6b3';
                        sColor = '#5ddedd';
                        break;
                }
                return {
                    c: color,
                    sc: sColor
                };
            },

            resubmit(data) {
                console.log(data)
                uni.navigateTo({
                    url: `/pages/cooperationExchange/cooperationExchangeList/cooperationActiveRegistration?id=${data.travelPointId}&Rep=${data.id}`,
                    /*success: function(res) {
                        res.eventChannel.emit('reapply', { data: data })
                    }*/
                })
            },
        }
    }
</script>

<style scoped>
    .uni-page-body {
        height: 100%;
    }

    .menu {
        position: relative;
        height: 100 upx;
        margin-top: 100 upx;
    }

    .offline-signup-list {
        /*padding-top: 10px;*/
    }

    .offline-signup-list-item {
        background: #FFFFFF;
        color: #666;
        padding: 10px;
        position: relative;
        overflow: hidden;
        margin-top: 10px;
    }

    .conference-title {
        width: 80%;
        font-size: 18px;
        font-weight: bold;
        padding: 16px 0;
    }

    .signup-info {
        padding: 0 10px;
    }

    .signup-info-label {
        color: #999;
        padding-right: 10px;
        line-height: 30px;
    }

    .approval-state {
        position: absolute;
        top: 0;
        right: -100px;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 28px;
        width: 200px;
        text-align: center;
        font-weight: bold;
        transform: rotate(45deg) translate(-10px, 30px);
        transform-origin: 50% 50%;
    }

    .approval-com {
        color: #f8c897;
        line-height: 30px;
    }

    .operation-btn-group {
        display: flex;
    }

    .operation-btn {
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        width: 100px;
        border-color: #6ec8c8;
        color: #6ec8c8;
        margin-left: 0;
        margin-right: 10px;
    }

    .button-hover[type = resubmit] {
        background: #6ec8c8;
        color: #FFFFFF;
    }

    .nodata-box {
        text-align: center;
        padding-top: 50px;
    }

    .nodata-box image {
        width: 60%;
        /* height: 200px; */
    }

    .nodata-box text {
        display: block;
        font-size: 20px;
        color: #CCE6FF;
        line-height: 40px;
    }
</style>