dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterMyActivityIssue.vue

<template>
    <div class="container-box">
        <div class="filter-box">
            <el-radio-group v-model="auditStatusDict" id="radioGroup">
                <el-radio-button label="">{{$i18n.locale=='en'? 'All': '全部'}}({{listTotal}})</el-radio-button>
<!--                <el-radio-button label="1">{{$i18n.locale=='en'? 'Drafts':'草稿'}}({{numMap[1]}})</el-radio-button>-->

                <el-radio-button label="2">{{$t('common.ToAudit')}}({{numMap[2]}})</el-radio-button>
                <el-radio-button label="3">{{$t('common.Approved')}}({{numMap[3]}})</el-radio-button>
                <el-radio-button label="4">{{$t('common.notApproved')}}({{numMap[4]}})</el-radio-button>
            </el-radio-group>
            <div>
                <div style="display: inline-block;margin-right: 10px;">
                    <el-select v-model="activityTypeDict" style="width: 150px;">
                        <el-option
                                v-for="item in activityTypeDictList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="false">
                        </el-option>
                    </el-select>
                </div>
                <div style="display: inline-block;">
                    <el-input :placeholder="$t('common.keywordSearch')"
                              v-model="searchInput" class="input-with-select" maxlength="100" show-word-limit @change="search">
                        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                    </el-input>
                </div>
            </div>
        </div>
        <div v-show="listData.length!=0&&listData.length!=undefined">
            <div style="min-height: 20px;">
                <div v-for="(item,index) in listData"
                     style="width: 430px;height: 281px;"
                     :style="{float:index%2==0?'left':'right',marginTop:index!=0&&index!=1?'20px':'0'}"
                    id="list">
                    <div style="width: 100%;height: 146px;position: relative">
                        <img v-if="item.activityLogo" :src="'api/file/pub/'+ item.activityLogo" alt="" style="width: 100%;height: 100%;">
                        <img v-else :src="'api/file/pub/'+'/def/def1.png'" alt="" style="width: 100%;height: 100%;">
                        <span style="position: absolute;top: 0;left: 0;width: 82px;height: 25px;display: inline-block;background-color: #ff9933;color: white;text-align: center;line-height: 25px;">
                            {{item.activityTypeDict==1?$t("common.Activity"):$t("common.Dynamic")}}
                        </span>
                    </div>
                    <div style="width: 100%;height: calc(100% - 146px);border: 1px solid #f2f2f2;box-sizing: border-box;padding-left: 8px;">
                        <p style="margin: 7px 0 0 0;font-size: 16px;font-weight: 600;height: 42px;" class="twoLine">{{item.activityName}}</p>
                        <p style="margin: 7px 0 0 0;font-size: 12px;">
                            <span>{{item.activityPlace}}</span>
                            <!--报名时间-->
                            <!--<span style="margin-left: 50px;">{{item.registrationTime}}</span>-->
                            <!--活动时间-->
                            <span style="margin-left: 50px;">{{formatDate(item.activityStartTime)}}--{{formatDate(item.activityEndTime)}}</span>
                        </p>
                        <p style="margin: 7px 0 0 0;font-size: 12px;">
                            <span style="display: inline-block;width: 100%;" class="oneLine" :title="item.activityIntroductionUe">{{item.activityIntroductionUe}}</span>
                        </p>
                        <!--操作按钮-->
                        <p style="margin: 7px 0 0 0;font-size: 12px;color: #1990fe;text-align: right;" class="hoverShow">
                            <span style="margin-right: 25px;cursor: pointer;" @click="showDetails(item)">{{$t('common.look')}}</span>
                            <span style="margin-right: 25px;cursor: pointer;" @click="change(item)">{{$t('common.edit')}}</span>
                            <span style="margin-right: 10px;cursor: pointer;" @click="dele(item)">{{$t('common.delete')}}</span>
                        </p>
                    </div>
                </div>
                <div style="clear: both;"></div>
            </div>
            <div style="width: 100%;text-align: center;">
                <el-pagination
                        style="margin-top: 20px"
                        layout="prev, pager, next"
                        @current-change="currentChange"
                        :page-size="10"
                        :total="totalNum">
                </el-pagination>
            </div>
        </div>
        <ul style="margin:30px;width: 90%;" v-show="listData.length==0||listData.length==undefined">
            <img v-if="this.$i18n.locale.toUpperCase()=='ZH'" src="@/assets/img/noData.png" alt=""
                 style="width: 100%;height: 100%;">
            <img v-if="this.$i18n.locale.toUpperCase()=='EN'" src="@/assets/img/noDataEn.png" alt=""
                 style="width: 100%;height: 100%;">
        </ul>
        <el-dialog
                :title="$i18n.locale=='zh'?'活动信息':'activity information'"
                center
                :visible.sync="detailDialog"
                width="1000px"
                class="detailDialog"
                :before-close="beforeClose">
            <div style="height: 80%;font-size: 16px;font-weight: 700">
                <div style="height: 60px;line-height: 60px;margin-left: 30px;margin-right: 30px; border-bottom: 1px solid rgba(228, 228, 228, 1);">
                    <span>{{$i18n.locale=='zh'?'语言版本':'Language Version'}}</span>
                </div>
                <div style="width: 100%;padding: 0 150px;box-sizing: border-box;font-size: 14px;font-weight: 400;margin-top: 30px;">
                    <el-tabs v-model="editableTabsValue" type="card" closable>
                        <el-tab-pane
                                v-for="(item, index) in detaile"
                                :key="item.language"
                                :label="item.language=='ZH'?$t('common.Chinese'):$t('common.English')"
                        >
                            <div style="width: 100%;;box-sizing: border-box">
                                <el-collapse v-model="activeNames" >
                                    <!-- 基本信息 -->
                                    <el-collapse-item  name="3">
                                        <template slot="title">
                                            <span style="color: red;margin-right: 3px;">* </span>  {{$t('common.BasicInformation')}}
                                        </template>
                                        <el-form ref="externalFormData" label-width="200px"
                                                 class="demo-ruleForm"
                                                 style="margin-top: 20px;width: 1000px;">
                                            <!-- 类型 -->
                                            <el-form-item :label="$t('common.Type')" >
                                                <el-input v-show="$i18n.locale=='zh'&&item.activityTypeDict=='1'" value="委员会活动" style="width: 320px;float: left;" disabled></el-input>
                                                <el-input v-show="$i18n.locale=='en'&&item.activityTypeDict=='1'" value="Committee activities" style="width: 320px;float: left;" disabled></el-input>
                                                <el-input v-show="$i18n.locale=='zh'&&item.activityTypeDict=='2'" value="委员会动态" style="width: 320px;float: left;" disabled></el-input>
                                                <el-input v-show="$i18n.locale=='en'&&item.activityTypeDict=='2'" value="Committee dynamics" style="width: 320px;float: left;" disabled></el-input>
                                            </el-form-item>
                                            <!-- 委员会 -->
                                            <el-form-item :label="$t('common.Committee')"  >
                                                <el-input :value="item.committeeName" style="width: 320px;float: left;" disabled></el-input>
                                            </el-form-item>
                                            <!-- v-model="" -->
                                            <!-- 活动时间 -->
                                            <el-form-item :label="$t('common.ActivityTime')" style="display: block;">
                                                <el-input :value="item.activityTime" style="width: 320px;float: left;" disabled></el-input>
                                            </el-form-item>
                                            <!-- 活动地点 -->
                                            <el-form-item :label="$t('common.Venue')">
                                                <el-input :value="item.activityPlace" style="width: 320px;float: left;" disabled></el-input>
                                            </el-form-item>
                                            <!-- 报名时间 -->
                                            <el-form-item :label="$t('common.RegistrationTime')">
                                                <el-input :value="item.registrationTime" style="width: 320px;float: left;" disabled></el-input>
                                            </el-form-item>
                                            <!-- 报名链接 -->
                                            <el-form-item :label="$t('common.RegistrationLink')">
                                                <el-input :value="item.registrationUrl" style="width: 320px;float: left;" disabled></el-input>
                                            </el-form-item>
                                            <!-- 相关附件 -->
                                            <!--<el-form-item :label="$t('common.RelatedAttachments')" prop='LegalRepresentative'>
                                                <el-input :value="item.registrationUrl" style="width: 320px;float: left;" disabled></el-input>
                                            </el-form-item>-->
                                        </el-form>
                                    </el-collapse-item>
                                    <!--活动信息-->
                                    <el-collapse-item  name="1">
                                        <template slot="title">
                                            <span style="color: red;margin-right: 3px;">* </span>  {{$t('common.ActivityInformation')}}
                                        </template>
                                        <el-form ref="externalFormData2" label-width="200px" class="demo-ruleForm"
                                                 style="margin-top: 20px;width: 1000px;">
                                            <!-- 名称 -->
                                            <el-form-item :label="$t('common.Name')">
                                                <el-input :value="item.activityName" style="width: 320px;float: left;" disabled></el-input>
                                            </el-form-item>
                                            <!-- 封面 -->
                                            <el-form-item :label="$t('common.Cover')"  style="position: relative;">
                                                <img :src="'api/file/pub/'+item.activityLogo" style="width: 180px;height: 180px;">
                                            </el-form-item>
                                            <!-- 简介 -->
                                            <el-form-item :label="$t('common.Introduction')"   style="display: block;">
                                                <el-input :value="item.activityIntroductionUe" style="width: 320px;float: left;" disabled></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </el-collapse-item>
                                    <!-- 详情 -->
                                    <el-collapse-item  name="2">
                                        <template slot="title">
                                            <span style="color: red;margin-right: 3px;">* </span>  {{$t('common.ActivitiesInfo')}}
                                        </template>
                                        <el-form ref="externalFormData2" label-width="200px" class="demo-ruleForm"
                                                 style="margin-top: 20px;width: 1000px;">
                                            <el-form-item :label="$t('common.ActivityPreview')" v-show="item.activityPreviewUe">
                                                <div style="width: 320px;height: 320px;overflow: auto;border: 1px solid #ddd;" v-html="item.activityPreviewUe"></div>
                                            </el-form-item>
                                            <el-form-item :label="$t('common.ActivityReview')" v-show="item.activityReviewUe">
                                                <div style="width: 320px;height: 320px;overflow: auto;border: 1px solid #ddd;" v-html="item.activityReviewUe"></div>
                                            </el-form-item>
                                        </el-form>
                                    </el-collapse-item>
                                </el-collapse>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Base from "@/views/base/Base";
    import {getDicts} from "@/api/dict";
    import {formatDate} from "@/utils/formatUtils";
    import { get } from '@/api/committee/committeeActivityInfo'
    import { del } from '@/api/committee/committeeActivityEntity'
    import { getActivityByIdForWeb } from "@/api/meeting/meetingApply";

    export default {
        name: "userCenterMyActivityIssue",
        extends: Base,
        data() {
            return {
                language:'',
                userId: JSON.parse(localStorage.getItem('user')).userId,
                // 检索
                auditStatusDict:'',
                searchInput:'',
                activityTypeDict:null,
                activityTypeDictList:[],
                // 分页
                cureentPage: 1,
                totalNum: 0,
                // 数据
                listData:[],
                numMap:[],
                // listTotal:0,
                // 查看
                detaile:[],
                detailDialog:false,
                editableTabsValue:'0',
                activeNames: ['1','2','3'],
            }
        },
        mounted() {
            const that = this;
            this.$nextTick(function () {
                if(this.$i18n.locale=='zh'){
                    getDicts('COMMITTEE_ACTIVITY_TYPE').then(res => {
                        that.activityTypeDictList = res.data[0];
                        let arr = {
                            label:"全部类型",
                            value:null,
                        }
                        that.activityTypeDictList.unshift(arr)
                    })
                }else if(this.$i18n.locale=='en'){
                    getDicts('COMMITTEE_ACTIVITY_TYPE_EN').then(res => {
                        that.activityTypeDictList = res.data[0];
                        let arr = {
                            label:"All",
                            value:null,
                        }
                        that.activityTypeDictList.unshift(arr)
                    })
                }
                that.getActivity();
            })
            this.getNumber()

        },
        watch:{
            "$i18n.locale"() {
                this.numMap = [];
                this.cureentPage = 1;
                this.$nextTick(function () {
                    if(this.$i18n.locale=='zh'){
                        getDicts('COMMITTEE_ACTIVITY_TYPE').then(res => {
                            this.activityTypeDictList = res.data[0];
                            let arr = {
                                label:"全部类型",
                                value:null,
                            }
                            this.activityTypeDictList.unshift(arr)
                        })
                    }else if(this.$i18n.locale=='en'){
                        getDicts('COMMITTEE_ACTIVITY_TYPE_EN').then(res => {
                            this.activityTypeDictList = res.data[0];
                            let arr = {
                                label:"All",
                                value:null,
                            }
                            this.activityTypeDictList.unshift(arr)
                        })
                    }
                    this.getActivity();
                })
            },
            'auditStatusDict'(val,oldVal){
                this.getActivity();
            },
            'activityTypeDict'(val,oldVal){
                this.getActivity();
            },
        },
        computed : {
            'listTotal'(){
                let num = (this.numMap[1]-0)+(this.numMap[2]-0)+(this.numMap[3]-0)+(this.numMap[4]-0);
                if( (typeof num) === 'number' && window.isNaN(num)){
                    num = 0
                }
                return num
            }
        },
        methods: {
            // 获取数据
            getActivity() {
                const that = this;
                let params = {
                    pageNo: this.cureentPage,
                    pageSize: 10,
                    language: this.$i18n.locale.toUpperCase(),
                    activityName:this.searchInput,
                    activityTypeDict:this.activityTypeDict,
                    status:this.auditStatusDict,
                };
                getActivityByIdForWeb(params).then(res => {
                    if (res.data) {

                        if (res.data.page) {
                            this.totalNum = Number(res.data.page.totalCount);
                            if (res.data.page.list) {
                                that.listData = res.data.page.list;
                                that.listData.forEach((i)=>{
                                    if(i.activityIntroductionUe){
                                        i.activityIntroductionUe = i.activityIntroductionUe.replace(/<[^>]+>/ig, '')

                                    }
                                    i.activityStartTime = i.activityStartTime ? formatDate(i.activityStartTime, "YYYY-MM-DD") : "";
                                    i.activityEndTime = i.activityEndTime ? formatDate(i.activityEndTime, "YYYY-MM-DD") : "";
                                })
                            } else {
                                that.listData = []
                            }
                        }else{
                            that.listData = []
                        }
                        if(that.numMap.length==0){
                            if (res.data.numMap) {
                                that.numMap = res.data.numMap
                            }else{
                                that.numMap = {
                                    1: "0",
                                    2: "0",
                                    3: "0",
                                    4: "0",
                                }
                            }
                        }
                    } else {
                        that.listData = []
                    }
                })
            },
            // 输入关键字检索
            search(){
                this.getActivity()
            },
            // 查看
            showDetails(ele){
                const that = this;
                let id = ele.entityId;
                this.detailDialog = true;
                get(id).then(result => {
                    let data = result.data.committeeActivityInfos;
                    that.detaile = [];
                    if(data) {
                        that.detaile = data;
                        // var reg = /<[^>]+>/ig;
                        that.detaile.forEach((i)=>{
                            if(i.activityIntroductionUe){
                                i.activityIntroductionUe = i.activityIntroductionUe.replace(/<[^>]+>/ig, '')
                            }
                        })
                    }
                }).catch(error => {
                    this.detailDialog = false;
                });
            },
            beforeClose(done){
                this.detaile = []
                this.detailDialog=false
                done()
            },
            // 修改
            change(ele){
                const that = this;
                let id = {
                    id: ele.entityId
                };
                this.toView('nationalregionalCommissionsEventRelease',id)
            },
            // 删除
            dele(ele){
                const that = this;
                let id = ele.entityId;
                if(that.$i18n.locale=='zh'){
                    this.$confirm('确定删除该记录吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        del(id).then(result => {
                            let data = result.data
                        }).then(() => {
                            that.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                        }).then(() => {
                            that.numMap = [];
                            that.getActivity()
                        }).catch(() => {
                            that.$message({
                                type: 'info',
                                message: '已取消删除'
                            })
                        })
                    }).catch(() => {
                        that.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }else{
                    this.$confirm('Are you sure to delete this record?', 'message', {
                        confirmButtonText: 'OK',
                        cancelButtonText: 'Cancel',
                        type: 'warning'
                    }).then(() => {
                        del(id).then(result => {
                            let data = result.data
                        }).then(() => {
                            that.$message({
                                type: 'success',
                                message: 'successfully delete!'
                            })
                        }).catch(() => {
                            that.$message({
                                type: 'info',
                                message: 'Cancelled Delete'
                            })
                        })
                    }).catch(() => {
                        that.$message({
                            type: 'info',
                            message: 'Cancelled Delete'
                        });
                    });
                }
            },
            toView(router,json){
                this.$router.push({
                    name:router,
                    query:json
                })
            },
            // 分页
            currentChange(p) {
                this.cureentPage = p;
                this.getActivity();
            },
        }
    }
</script>
<style scoped>
    .oneLine{
        /* 隐藏溢出元素 */
        overflow: hidden;
        /* 单行显示 */
        white-space: nowrap;
        /* 溢出显示省略号 */
        text-overflow: ellipsis;
    }
    .twoLine{
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .container-box {
        padding: 20px;
    }
    .filter-box {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
    }
    /deep/ #radioGroup .el-radio-button__inner{
        border: none;
    }
    /deep/ #radioGroup .el-radio-button.is-active .el-radio-button__inner{
        background-color: white;
        color: #ff3b00;
        box-shadow: none;
    }
    .hoverShow{
        display: none;
    }
    #list:hover .hoverShow{
        display: block;
    }
    .detailDialog /deep/ .el-input.is-disabled .el-input__inner{
        color: black;
    }
</style>