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

<template>
    <div>
          <div class="autoBox2 ">
             <div >
                <div style="width: 100%;margin: auto;margin-top: 20px;">
                  <el-collapse v-model="activeNames" >
                    <!-- 基本信息 -->
                    <el-collapse-item  name="3" v-if="active==1">
                      <template slot="title">
                        <span style="color: red;margin-right: 3px;">* </span>  基本信息
                      </template>
                      <el-form ref="form" :model="baseLeagueApply" :rules="form1Rules" label-width="260px" class="demo-ruleForm"
                        style="margin-top: 20px;width: 1000px;margin-left: 100px;">
                         <!-- 类型 -->
                          <el-form-item label="类型" prop='unitCountryDict'>
                              <el-select
                                filterable
                                :no-match-text="$i18n.locale=='zh'?'无匹配数据':'No Data'"
                                v-model="baseLeagueApply.unitCountryDict"
                                placeholder="请选择类型"
                                style="width: 70%;">
                                  <el-option :label="item.name" :value="item.value"
                                      v-for="(item,index) in type">
                                </el-option>
                              </el-select>
                            </el-form-item>
                          <!-- 委员会 -->
                          <el-form-item label="委员会" prop='unitZhName' >
                            <el-cascader
                                style="width: 70%;"
                                v-model="value"
                                :options="options"
                                >
                            </el-cascader>
                          </el-form-item>
                          <!-- 活动时间 -->
                          <el-form-item label="活动时间"  prop='unitEnName' style="display: block;">
                            <el-date-picker
                                style="width: 70%;"
                                v-model="value2"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                >
                            </el-date-picker>
                          </el-form-item>
                          <!-- 活动地点 -->
                          <el-form-item label="活动地点">
                              <el-input v-model="baseLeagueApply.unitWebsite" 
                               style="width: 70%;" 
                               placeholder="请参照格式：北京市-海淀区-交通大道123号"></el-input>
                          </el-form-item>
                          <!-- 报名时间 -->
                          <el-form-item label="报名时间">
                            <el-date-picker
                                style="width: 70%;"
                                v-model="value2"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                >
                            </el-date-picker>
                          </el-form-item>
                            <!-- 报名链接 -->
                          <el-form-item label="报名链接">
                              <el-input v-model="baseLeagueApply.postalCode"  style="width: 70%;" ></el-input>
                          </el-form-item>
                          <!-- 相关附件 -->
                          <el-form-item label="相关附件" prop='LegalRepresentative'>
                            <el-upload
                            class="upload-demo"
                            action="./api/file/upload/attachment?module=committeeActivityInfo"
                            :on-change="handleChange"
                            :on-success="docSuccess"
                            :headers="myHeaders"
                            :before-upload="beforeUpload"
                            :file-list="fileList">
                                <el-button size="small" type="primary">{{$t('common.SelectUploadCUnit')}}</el-button>
                                <div slot="tip" class="el-upload__tip">{{$t('common.OnlyUpload')}}</div>
                            </el-upload>
                          </el-form-item>
                          
                      </el-form>
                    </el-collapse-item>
  
                    <!-- 活动信息 -->
                    <el-collapse-item  name="1" v-if="active==1">
                      <template slot="title">
                        <span style="color: red;margin-right: 3px;">* </span>  活动信息
                      </template>
                      <el-form ref="form" :model="baseLeagueApply" :rules="form1Rules" label-width="260px" class="demo-ruleForm"
                        style="margin-top: 20px;width: 1000px;margin-left: 100px;">
                         <!-- 名称 -->
                          <el-form-item label="名称" prop='unitCountryDict'>
                            <el-input v-model="baseLeagueApply.unitCountryDict"  style="width: 70%;" :placeholder="$t('common.PleaseEnter')+$t('common.NameoftheEntity')"></el-input>  
                            </el-form-item>
                          <!-- 封面 -->
                          <el-form-item label="封面" prop='photo' style="position: relative;">
                            <el-upload
                                class="avatar-uploader"
                                action="/api/file/upload/img?module=authenticationUnit"
                                :show-file-list="false"
                                :on-success="photoSuccess"
                                :headers="myHeaders"
                                :before-upload="beforeAvatarUpload1">
                                <img v-if="baseLeagueApply.photo" :src="'/api/file/pub/' + baseLeagueApply.photo" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <span style="position: absolute;left: 200px;top: 80px;">图片大小不超过10M，建议尺寸320*240</span>
                          </el-form-item>
                          <!-- 简介 -->
                          <el-form-item label="简介"  prop='unitEnName' style="display: block;">
                           
                            <layui-inline-ue
                              label=""
                              :cssStyle="{'width':'100%','height':'100%'}"
                              :value="textarea2"
                              :readonly="readOnly"
                              ref="contentUe">
                            </layui-inline-ue>
                          </el-form-item>
                          
                      </el-form>
                    </el-collapse-item>
                    <!-- 详情 -->
                    <el-collapse-item  name="2" v-if="active==1">
                      <template slot="title">
                        <span style="color: red;margin-right: 3px;">* </span>  详情
                      </template>
                      <div style="margin: 30px 20px;">
                        <span :class="textIndex==1?'textInfo cursor':'textInfo2 cursor'" @click="textIndex=1">活动预告</span>
                        <span :class="textIndex==2?'textInfo cursor':'textInfo2 cursor'" @click="textIndex=2">活动回顾</span>
                    </div>
                    <div style="margin: 0px 20px;">
                     定制模板:
                     <el-select
                                 filterable
                                 v-model="baseLeagueApply.unitCountryDict"
                                 placeholder="请选择类型"
                                  :no-match-text="$i18n.locale=='zh'?'无匹配数据':'No Data'"
                                 >
                                   <el-option :label="item.name" :value="item.value"
                                       v-for="(item,index) in type">
                                 </el-option>
                     </el-select>
                    </div>
                    <div style="margin: 30px 20px;">
                     <div style="display: inline-block;width: 100px;height: 760px;line-height: 760px;text-align: center;
                     border: 1px solid rgba(210, 210, 210, 1);background: #fbfbfb;">
                         {{textIndex==1?'活动预告':'活动回顾'}}
                     </div>
                     <div style="display: inline-block;width: 1000px;height: 760px;vertical-align: top;" class="edui">
                         <layui-inline-ue
                             label=""
                             :cssStyle="{'width':'100%','height':'100%'}"
                             :value="baseLeagueApply.contentHtml"
                             :readonly="readOnly"
                             ref="contentUe">
                         </layui-inline-ue>
                     </div>
                    </div>
                    </el-collapse-item>
                  
                  </el-collapse>
                </div>
               </div>
             </div>
          </div>  
    </div>
  </template>
  
  <script>
    import {getDicts} from '@/api/dict'
    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'
  
  export default {
    name: 'NationalregionalCommissionsEventZH',
    extends: Base,
    components:{userCenterTaberListUnionPrint,LayuiInlineUe},
    data () {
      return {
        active:1,
        readOnly: this.$route.params.readOnly || false,
        activeNames: ['1','2','3'],
        countryList:[],
        textIndex:1,
        type:[{
            name:'委员会活动',
            value:'0'
        },{
            name:'委员会动态',
            value:'1'
        }],
        options: [], 
        screenIndex: 2,
        baseLeagueInfos:[],
        realTimeInfoScreens2:[{
            lable:"委员会简介",
            value:'0'
        },{
            lable:"委员会布局",
            value:'1'
        },{
            lable:"委员会活动",
            value:'2'
        }],
        dialogVisible:false,
        leagueType:[],
        baseLeagueApply: {
            id: null,
            userId: '',
            leagueName: '',
            contentHtml:'',
            leagueId: '',
            unitId: '',
            photo:'',
            unitZhName: '',
            unitEnName: '',
            unitCountry: '',
            unitCountryDict: '',
            corporateName: '',
            unitAddress: '',
            postalCode: '',
            unitWebsite: '',
            unitIntroduction: '',
            linkName: '',
            linkDuty: '',
            linkDept: '',
            linkPhoneNumber: '',
            linkEmail: '',
            linkFaxNumber: '',
            area: '',
            areaDict: '',
            leagueApplyDate: '',
            status: '',
            statusDict: '',
            phase: '',
            phaseDict: '1',
            firstApprovalUser: '',
            firstApprovalResult: '',
            firstApprovalComment: '',
            firstApprovalTime: '',
            secondApprovalUser: '',
            secondApprovalResult: '',
            secondApprovalComment: '',
            secondApprovalTime: '',
            auditUser: '',
            auditTime: '',
            auditStatusDict: '1',
            baseMessage: '',
            createBy: '',
            createDate: '',
            updateBy: '',
            updateDate: '',
        },
        baseContactsInfo:{
            id: null,
            contactsType: '',
            contactsTypeDict: '',
            contactsName: '',
            currentDuty: '',
            depart: '',
            telephoneNumber: '',
            mobilePhone: '',
            email: '',
            spareEmail: '',
            faxNumber: '',
            userId: '',
            userType:'alliance_apply',
            remarks: '',
            createBy: '',
            createDate: '',
            updateBy: '',
            updateDate: '',
        },
        processKey: 'ALLIANCE_APPROVAL',
        approvers:[],
        duty:'',
        group:'',
        leagueMap:{}
      }
    },
    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.getIntaData();
    },
    watch:{
      "$i18n.locale"(){
        // this.$refs.form.clearValidate();
        // this.$refs.form2.clearValidate();
        this.getIntaData();
      },
      leagueType: function () {
          var leagueType = [];
          if(this.leagueType.length > 0){
              this.leagueType.forEach(e=>{
                  leagueType.push(this.leagueMap[e])
              })
          }
          this.baseLeagueApply.leagueName = leagueType.join(',');
      },
    },
    computed:{
      form1Rules(){
          return {
            unitCountry:[
              {required: true, message: this.$t('common.PleaseSelect')+'  '+this.$t('common.Country'), trigger: 'change'}
            ],
            unitZhName: [
              { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.NameoftheEntity'), trigger: 'blur' }
            ],
            unitAddress:[
              { required: true, message: "", trigger: 'blur' }           
            ],
            LegalRepresentative:[
              { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.LegalRepresentative'), trigger: 'blur' }           
            ], 
            duty:[
              { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.Position'), trigger: 'blur' }           
            ],
            unitIntroduction:[
              { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.BriefIntroductionOfApplicant'), trigger: 'blur' }           
            ],
          }
        },
        rules(){
         return {
          contactsName: [
            { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.fullName'), trigger: 'blur' },
          ],
             depart:[{ required: true,trigger: 'blur' },],
          currentDuty: [
            { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.Position'), trigger: 'blur' }
          ],
          telephoneNumber: [
            { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.ContactPhoneNumber'), trigger: 'blur' }
          ],
          mobilePhone: [
              {required: true,message: this.$t('common.PleaseEnter')+'  '+this.$t('common.mobilePhone'),trigger: 'blur'},
              { pattern: /^0{0,1}(13[0-9]|15[7-9]|17[1-9]|153|156|18[7-9])[0-9]{8}$/, message: this.$t('common.Theformatofmobilephonenumberisincorrect'), trigger: 'blur'}
          ],
          email: [
            { required: true, message: this.$t('common.PleaseEnter')+'  '+this.$t('common.Email'), trigger: 'blur' },
            { pattern:  /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/, message: this.$t('common.Emailformatisnotcorrect'), trigger: 'blur'}
          ],
         }
      
      },
    },
    methods:{
      agreementChange(val){
        this.active=val;
      },
      getIntaData(){
        getBaseLeagues({language:this.$i18n.locale.toUpperCase()}).then(result =>{
            const data = result.data
            this.baseLeagueInfos = data.baseLeagueInfos;
            this.baseLeagueInfos.forEach(element=>{
                this.leagueMap[element.baseEntityId] = element.leagueName;
            })
        });
        country({language:this.$i18n.locale.toUpperCase()}).then(res=>{
            this.countryList=res.data.countryList;
        })
      },
      // 提交并下载
     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 = [];
          if(this.leagueType.length > 0){
              this.leagueType.forEach(e=>{
                  leagueType.push(this.leagueMap[e])
              })
          }
          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'
                });
                this.resetToken();
                this.active=2;
                closeLoading();
            }).catch(error => {
                this.resetToken();
                closeLoading();
            });
        })
     },
      // 发送申请表
      submitFormApplication(){
  
      },
      realTimeInfoScreen(i,index){
        this.toView('nationalregionalCommissions2',index)
     },
      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;
    }
    .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 100px;
      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;
  }
  </style>