dev/dcp-web-gate/src_old/views/NationalregionalCommissions/NationalregionalCommissionsEventRelease.vue

<template>
    <div>
        <div>
          <div class="autoBox box">
             <div class="crumbs">
                <el-breadcrumb separator="/" replace>
                    <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'nationalregionalCommittees' }">{{$t('common.NationalregionalCommissions')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'nationalregionalCommittees', name:'nationalregionalCommittees', params: { key: 'activities',lable: 'common.Committeeactivities' }}">{{$t('common.Committeeactivities')}}</el-breadcrumb-item></el-breadcrumb-item>
                    <el-breadcrumb-item >{{$i18n.locale=='zh'?'活动发布':'Event release'}}</el-breadcrumb-item>
                </el-breadcrumb>
                <el-breadcrumb separator="/" style="float: right;margin:0px 15px 0 0">
                  <span class="cursor" :class="screenIndex==index?'screen1':'screen2'" @click="realTimeInfoScreen(item,index)" v-for="(item,index) in realTimeInfoScreens2">
                    &nbsp;&nbsp;{{$t(item.lable)}}
                  </span>
                </el-breadcrumb>
                <!-- 选择语言版本 -->
                <div class="addLanguage">
                  <i class="el-icon-orange" style="font-size: 30px;line-height: 50px;color: #E6A23C;vertical-align: middle;"></i>
                  <span style="font-size: 18px;line-height: 50px;margin-left: 20px;vertical-align: middle;">{{$t('common.resourceLanguageVersion')}}</span>
<!--                    <i class="el-icon-plus" style="font-size: 30px;font-weight: 600;margin-left: 20px;line-height: 50px; color: #E6A23C;vertical-align: middle;">-->
<!--                    <i class="el-icon-plus" style="font-size: 30px;font-weight: 600;margin-left: 20px;line-height: 50px; color: #E6A23C;vertical-align: middle;"@click="addTabDialog(editableTabsValue)"></i>-->
                </div>
                <!-- 展示版本 -->
                <div style="margin: 0 20px;">
                  <!-- editable -->
                  <el-tabs v-model="editableTabsValue" type="card"  @edit="handleTabsEdit" @tab-click="tabClick">
                    <el-tab-pane
                      :key="item.name"
                      v-for="(item, index) in activeLanguage"
                      :label="$t(item.label)"
                      :name="item.value"
                    >
                      {{item.content}}
                    </el-tab-pane>
                  </el-tabs>
                </div>
               <!-- 弹窗框 -->
                <el-dialog
                  title="提示"
                  :visible.sync="dialogVisible"
                  width="30%"
                  :before-close="handleClose">

                  <div style="height: 200px;">
                    {{$t('common.language')}}:
                    <el-select v-model="activeLanguageNO" multiple placeholder="请选择">
                      <el-option
                        v-for="item in languageType"
                        :key="item.value"
                        :label="$t(item.label)"
                        :value="item">
                      </el-option>
                    </el-select>
                    <span style="margin-left: 20px;color: #0079ef;">语言版本可支持多选</span>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="determine" >确 定</el-button>
                  </span>
                </el-dialog>
                <!-- <NationalregionalCommissionsEventZH ref="EventZH" ></NationalregionalCommissionsEventZH> -->
                <NationalregionalCommissionsEventEN ref="EventEN"
                    :activityEntity="activityEntity"
                    :activity.sync="activity"
                    :editableTabsValue="editableTabsValue"
                    :languageType="activeLanguage"
                    :loading="loading"
                     @activityTime="activity"
                    @saveForm="submit"
                >
                </NationalregionalCommissionsEventEN>

               </div>
             </div>
          </div>
    </div>
  </template>

  <script>
    import {saveOrUpdate} from '@/api/committee/committeeActivityInfo'
    import {getDicts} from '@/api/dict'
    import { get } from '@/api/committee/committeeActivityInfo'
    import {submitApplyPortal,getBaseLeagueApplys} from '@/api/cooperation/baseLeagueApply'
    import {getBaseLeagues} from '@/api/cooperation/baseLeagueEntity'
    import {country} from '@/api/country'
    import Base from '@/views/base/Base'
    import userCenterTaberListUnionPrint from '@/views/userCenter/userCenterItem/userCenterTaberListUnionPrint'
    import LayuiInlineUe from '@/components/LayuiInlineUe'
    import NationalregionalCommissionsEventEN from '@/views/NationalregionalCommissions/NationalregionalCommissionsEventEN'

  export default {
    name: 'NationalregionalCommissionsEventRelease',
    extends: Base,
    components:{userCenterTaberListUnionPrint,LayuiInlineUe,NationalregionalCommissionsEventEN},
    props:['activity'],


    data () {
      return {
        active:1,
        readOnly: this.$route.params.readOnly || false,
        activeNames: ['1','2','3'],
        textIndex:1,
        dialogVisible:false,
        activities:[],
        activity:{},
        loading:false,
        activityEntity:{
            status:'2',//审批默认值 默认为待审批
            entityZh:'1',
            entityEn:'0',
            entityFr:'0',
            entityDe:'0',
            entityEs:'0',
            entityJa:'0',
            entityAr:'0',
            entityRu:'0'
        },
        activeLanguageNO:[{
          label:this.$i18n.locale == 'zh'?'common.CN':'common.English',
          value:this.$i18n.locale == 'zh'?'ZH':'EN'
        }],
        activeLanguage:[{
          label:this.$i18n.locale == 'zh'?'common.CN':'common.English',
          value:this.$i18n.locale == 'en'?'EN':'ZH'
        }],// 已选择语言版本
        editableTabsValue:this.$i18n.locale == 'zh'?'ZH':'EN',
        languageType:[{
          label:'common.CN',
          value:'ZH'
        },{
          label:'common.English',
          value:'EN'
        },{
          label:'common.French',
          value:'FR'
        },{
          label:'common.German',
          value:'DE'
        },{
          label:'common.Spanish',
          value:'ES'
        },{
          label:'common.Japanese',
          value:'JA'
        },{
          label:'common.arabic',
          value:'AR'
        },{
          label:'common.Russian',
          value:'RU'
        }],
        screenIndex: null,
        baseLeagueInfos:[],
        realTimeInfoScreens2:[{
            lable:"common.BriefintroductiontotheCommittee",
            value:'introduc'
            },{
            lable:"common.Committeelayout",
            value:'layout'
            },{
            lable:"common.Committeeactivities",
            value:'activities'
        }],
        dialogVisible:false,
        leagueType:[],
        editableTabs:[],
        processKey: 'ALLIANCE_APPROVAL',
        approvers:[],
        duty:'',
        group:'',
        defaultForm:{},
        parentId:this.$route.query,
      }
    },
    created(){
        getBaseLeagueApplys().then(res=>{
            var data = res.data;
            if(data){
                // this.baseLeagueApply = data.baseLeagueApplyList[0]||{};
                this.baseContactsInfo = data.baseContactsInfo||{};
                this.leagueType = data.leagueType||[];
                this.active=2;
            }
        });
    },
    mounted(){
        this.activeLanguage = [{
          label:this.$i18n.locale == 'zh'?'common.CN':'common.English',
          value:this.$i18n.locale == 'en'?'EN':'ZH'
        }];// 已选择语言版本
        this.getIntaData();

        // this.activities.push(this.activity);
    },
    watch:{
      "$i18n.locale"(){
        // this.$refs.form.clearValidate();
        // this.$refs.form2.clearValidate();
        this.getIntaData();
        this.activeLanguage = [{
          label:this.$i18n.locale == 'zh'?'common.CN':'common.English',
          value:this.$i18n.locale == 'en'?'EN':'ZH'
        }];// 已选择语言版本
      },
      "activeLanguage" (){
           this.getChangeData();
      },
      'editableTabsValue'(){
        let CurrentLanguage = this.activities.filter(item=>{
          return item.language == this.editableTabsValue;
        })
        this.activity = CurrentLanguage[0];
        console.log(this.activity,'当前选中的对象集合')
      }

    },
    computed:{


    },
    methods:{
      NewActiveLanguageArray(){
        this.activities = [];// 清空对象集合
        this.activity = {};// 清空对象
        let activity = {};
        this.activeLanguage.forEach((item,index) =>{
          activity = {
            picturesId:"",
            pictures:"",
            activityTypeDict:'',
            orderNumber:'',
            committeeName:'',
            committeeId:'',
            activityTime:'',
            activityPlace:'',
            registrationTime:'',
            registrationUrl:'',
            ids:[],// 附件id
            spareOne: 'PC',//前台传的
            activityName:'',
            activityLogo:'',
            path:'',
            activityIntroductionUe:'',
            activityReviewUe:'',
            activityPreviewTemplate:'',
            activityPreviewUe:'',
            language: item.value,
            externalFormData:[],
            ActivityTime:[],
            registrationTime:[],
            fileList:[],
        };
          // this.activities.push(activity);
        })
      },
        //表格初始内容
        getChangeData(){
            let that = this;
            let id = this.$route.query.id;
            that.activityEntity.id = id
            // let activity = {};
            get(id).then(result => {
              that.defaultForm = result.data.committeeActivityInfos[0];
              that.activity = {
                    id:this.defaultForm.id,
                    ids:this.defaultForm.ids?JSON.parse(this.defaultForm.ids):[],
                    activityTypeDict:this.defaultForm.activityTypeDict,
                    orderNumber:this.defaultForm.orderNumber,
                    picturesId:this.defaultForm.picturesId,
                    //委员会名称
                    committeeName:this.defaultForm.committeeName,
                    committeeId:this.defaultForm.committeeId,
                    activityPlace:this.defaultForm.activityPlace,
                    //报名时间
                    activityLogo:this.defaultForm.activityLogo,
                    registrationStartTime:this.formatDate(this.defaultForm.registrationStartTime),
                    registrationEndTime:this.formatDate(this.defaultForm.registrationEndTime),
                    // registrationTime:this.defaultForm.registrationTime,
                    RegistrationTime:[this.formatDate(this.defaultForm.registrationStartTime),this.formatDate(this.defaultForm.registrationEndTime)],

                    //活动时间
                    // ActivityTime:this.defaultForm.activityTime,
                    activityStartTime:this.formatDate(this.defaultForm.activityStartTime),
                    activityEndTime:this.formatDate(this.defaultForm.activityEndTime),
                    activityTime:[this.formatDate(this.defaultForm.activityStartTime),this.formatDate(this.defaultForm.activityEndTime)],

                    registrationUrl:this.defaultForm.registrationUrl,
                    spareOne: this.defaultForm.spareOne,//前台传的
                    activityName:this.defaultForm.activityName,
                    // activityLogo:this.defaultForm.activityLogo,
                    path:this.defaultForm.path,
                    activityIntroductionUe:this.defaultForm.activityIntroductionUe,
                    activityReviewUe:this.defaultForm.activityReviewUe,
                    activityPreviewTemplate:this.defaultForm.activityPreviewTemplate,
                    activityPreviewUe:this.defaultForm.activityPreviewUe,
                    language: this.defaultForm.language,
                    externalFormData:{},
                    fileList:this.defaultForm.fileList?JSON.parse(this.defaultForm.fileList):[],
                    fileList2:this.defaultForm.fileList2?JSON.parse(this.defaultForm.fileList2):[],
                };
              that.activity.cascader = this.defaultForm.orderNumber.split(",");
            }).catch(error => {
               that.NewActiveLanguageArray()
            });
        },
      tabClick(tab) {
         this.activity = this.activities.filter(item => {return item.language == tab.name})[0]
      },
      handleClose(){

      },
      getEmptyData(language){
        let obj = {
            activityTypeDict:'',
            orderNumber:'',
            activityTime:'',
            activityPlace:'',
            registrationTime:'',
            registrationUrl:'',
            ids:[],// 附件id

            activityName:'',
            activityLogo:'',
            path:'',
            activityIntroductionUe:'',

            activityPreviewTemplate:'',
            activityPreviewUe:'',
            language: language
        }
        return obj
      } ,
      determine(){
        //   //保留的
        //   let baoliu = []
        //   //新增的
        //   let xinzen = []

        //   //第一次加载全部新增 （加了默认中文）
        //   if(this.activities.length == 0){
        //       this.activeLanguageNO.forEach(item => {
        //           this.activities.push(this.getEmptyData(item.value))
        //       })
        //   }else{
        //       this.activeLanguageNO.forEach(item => {
        //           let o = this.activities.filter(obj => {
        //               return obj.language == item.value
        //           })
        //           if(o.length !== 0){
        //               baoliu.push(o[0])
        //           }else {
        //               xinzen.push(this.getEmptyData(item.value))
        //           }
        //       })
        //   }
        //   console.log(xinzen)
        // this.activities = [].concat(xinzen).concat(baoliu)


        // this.activeLanguage = this.activeLanguageNO;
        // this.dialogVisible = false;
      },
      handleTabsEdit(targetName,action){
        this.dialogVisible = true;
      },
      agreementChange(val){
        this.active=val;
      },
      getIntaData(){

      },
      // 提交并下载
     submitForm(){
      this.$refs["form"].validate((valid1) => {
          if (valid1) {
            this.$refs["form2"].validate((valid2) => {
                  if (valid2) {
                    this.print()

                  } else {
                    this.$notify.error({
                      title: 'error',
                      message: this.$t('common.pleaseContactInformation')
                    });
                    this.activeNames=["2"]
                    return false;
                  }
                })

          } else {
            this.$notify.error({
              title: 'error',
              message: this.$t('common.unitInfo')
            });
            this.activeNames=["1"]
            return false;
          }
        });

     },
     print(){
        loading();
          if (this.duty || this.group) {
              getUsers({
                  duty: this.duty,
                  groups: this.group,
              }).then(res => {
                  let data = res.data || {};
                  let approvers = data.authUsers || [];
                  if (approvers && approvers.length > 0) {
                      this.approver = '';
                      approvers.forEach(item => {
                          this.approver += item.userId + ",";
                      });
                      this.approver = this.approver.substring(0, this.approver.length - 1);
                  }
              });
          }
          this.baseLeagueApply.phaseDict = '1';
          this.baseLeagueApply.statusDict = this.submitStatus;
          this.baseLeagueApply.auditStatusDict = '1';
          this.baseLeagueApply.leagueId = this.leagueType.join(',');
          var leagueType = [];

          this.baseLeagueApply.leagueName = leagueType.join(',');
          this.submitHandler((token) => {
            submitApplyPortal(JSON.stringify(this.baseLeagueApply),JSON.stringify(this.baseContactsInfo),null,this.approver, this.taskComment,token).then(res=>{
                this.$message({
                  message: this.$i18n.locale.toUpperCase()=="ZH"?'添加资料成功':'submit success',
                  type: 'success'
                });
                console.log('this.baseLeagueApply-表单提交内容')
                console.log(this.baseLeagueApply)
                this.resetToken();
                this.active=2;
                closeLoading();
            }).catch(error => {
                this.resetToken();
                closeLoading();
            });
        })
     },
      // 发送申请表
      submitFormApplication(){

      },
      submit(){
        const that =this;
          // 获取数据对象
            this.activities = [];
            this.activities.push(this.activity);

            this.activities.forEach(item=>{
              item.language = this.$i18n.locale == 'zh'?'ZH':'EN';
              item.language == 'ZH'?this.activityEntity.entityZh = '1':this.activityEntity.entityZh = '0';
              item.language == 'EN'?this.activityEntity.entityEn = '1':this.activityEntity.entityEn = '0';
              item.language == 'FR'?this.activityEntity.entityFr = '1':this.activityEntity.entityFr = '0';
              item.language == 'DE'?this.activityEntity.entityDe = '1':this.activityEntity.entityDe = '0';
              item.language == 'ES'?this.activityEntity.entityEs = '1':this.activityEntity.entityEs = '0';
              item.language == 'JA'?this.activityEntity.entityJa = '1':this.activityEntity.entityJa = '0';
              item.language == 'AR'?this.activityEntity.entityAr = '1':this.activityEntity.entityAr = '0';
              item.language == 'RU'?this.activityEntity.entityRu = '1':this.activityEntity.entityRu = '0';
              item.status = '2';
              item.spareOne = 'PC';
            });
            console.log('this is this.activityEntity',this.activityEntity,'this is this.activityEntity',this.activities);
            this.loading = true;
            console.log('this.activities')
            console.log(this.activities)
          if(this.activities){
              this.activities.forEach((i)=>{
                  if(i.activityTime){
                      let  start = this.formatDate(i.activityTime[0]);
                      let  end = this.formatDate(i.activityTime[1]);
                      i.activityTime = start+'--'+end;
                  }
                  if(i.RegistrationTime){
                      let  start = this.formatDate(i.RegistrationTime[0]);
                      let  end = this.formatDate(i.RegistrationTime[1]);
                      i.RegistrationTime = start+'--'+end;
                  }
              })
          }
          this.submitHandler(token => {
            saveOrUpdate(JSON.stringify(this.activities),JSON.stringify(this.activityEntity),token).then(res => {
                this.$message({
                  message: this.$i18n.locale.toUpperCase()=="ZH"?'添加资料成功':'submit success',
                  type: 'success'
                });
                this.resetToken();
                this.loading = false;
              this.toView('myActivity');
              }).catch(error => {
                this.$message({
                  message: this.$i18n.locale.toUpperCase()=="ZH"?'添加资料失败':'submit error',
                  type: 'error'
                });
                this.resetToken();
                this.loading = false;
              });
          });


      },

     realTimeInfoScreen(i,index){
            this.screenIndex=i.value;
            this.Screens=i.lable;
            this.toView('nationalregionalCommittees',this.screenIndex)
        },
    getIconUrl(url){
      return require("@/assets/img/introductionCooperation/"+url);
    },
    toView(router,json){
        this.$router.push({name:router,query:{key:json}})
    },
    toNewView(router,json){
        this.$store.commit('modify', router);
        window.localStorage.setItem('router', router);
        const { href } = this.$router.resolve({
          name: router,
          query: {
            key: json
          },
        });
        window.open(href, '_blank');
    },
    toViewCenter(router,json){
        this.$router.push({name:router,params:{index:json}})
    },
    resetForm(item) {
      this[item] = {};
      console.log( this.form2)
      this.$refs.form2.resetFields()

        if(this.$refs[formName]){
          this.$refs[item].resetFields()
        }
        }
    }
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        min-height: 500px;
        padding: 20px 0;
    }
    .crumbs {
        margin-left: 20px;
    }
    body {
        margin: 0;
    }
    .screen1 {
        background: linear-gradient(180deg, #3280E2 0%, #144E97 100%);
        border-radius: 20px 20px 20px 20px;
        padding: 8px 12px;
        color: #F0F3F8;
        margin-left: 10px;
    }
    .screen2 {
        font-size: 14px;
        background: linear-gradient(180deg, #B4D5FF 0%, #4F81BF 100%);
        border-radius: 20px;
        padding: 8px 12px;
        color: #165099;
        margin-left: 10px;
    }
    .crumbs >>>.el-step__icon {
      width: 37px;
      height: 37px;
      font-size: 18px;
    }
    .crumbs>>> .el-step.is-horizontal .el-step__line {
      top:20px;
    }
    .crumbs>>>.el-step__head.is-process {
      color: #409eff;
      border-color:inherit;
    }
    .crumbs>>>.el-step__head.is-process .el-step__icon.is-text {
      background: #409eff;
      color: #fff;
      border-color:#409eff;
      width: 46px;
      height: 46px;
    }
    .crumbs>>>.el-step__title.is-process,
    .crumbs>>>.el-step__description.is-process {
      color: #409eff;
    }
    .crumbs>>>.el-collapse-item {
      /* width: 80%; */
      margin: auto;
    }
    .el-collapse {
      border: none;
    }
    .crumbs>>>.el-collapse-item__header {
      padding: 0 20px 0 30px;
      font-weight: 700;
    }
    .crumbs>>>.el-collapse-item__content {
      padding: 0 0 0 0px;

    }
    .el-checkbox {
      display: inline-block;
      margin-bottom: 20px;
    }
    .avatar-uploader >>>.el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .crumbs>>>.el-collapse-item__header.is-active {
          border-bottom-color:  #EBEEF5;
    }
  .button_409EFF {
      border-color:#409EFF ;
      color: #409EFF;
  }
  .textInfo {
      padding: 10px 20px;
      background-color: #1890ff;
      color: #fff;
      border: 1px solid rgba(228, 228, 228, 1);
  }
  .textInfo2 {
      padding: 10px 20px;
      background-color: rgba(249, 249, 249, 1);
      color: #333;
      border: 1px solid rgba(228, 228, 228, 1);
  }
  .form2Sty{

  margin-top: 20px;
  width: 100%;
  }
  .form2Sty>>>.el-collapse-item__content{
    /* padding-left: 20px; */
    width: 49%;
  }
  .form2Sty>>>.el-form-item{
    width: 50%;
    float: left;

  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .edui-editor {
      width: 100%;
  }
  .edui>>>.edui-editor-iframeholder {
      height: 679px !important;
  }
  .addLanguage{
        /* width: 100%; */
        height: 50px;
        margin: 25px 20px 10px 20px;
        border-bottom: 1px solid #666666;
    }
  </style>