123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497 |
- <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>
|