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

<template>
    <div  style="width: 100%;background: #fff;min-height: 700px;" class="userCenterAuthenticationPersonal">
        <div v-show="$i18n.locale == 'zh'" style="height: 80px;line-height: 80px;margin-top: 20px;margin: 0 20px; color: #666;font-size: 15px; border-bottom: 1px solid #bcbcbc;">
           添加期刊
        </div>     
        <div v-show="$i18n.locale == 'zh'" style="width: 600px;" >
            <el-form ref="form1" :model="infoJournalView" label-width="160px" class="demo-ruleForm"  style="margin-top: 20px;width: 1200px;" :rules="chineseFormRules">
                <el-form-item  label="期刊名称:" prop='name'>
                    <el-input v-model="infoJournalView.name" placeholder="请输入期刊名称" :disabled="disableDet" maxlength="100" show-word-limit style="width: 70%;"></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="期刊类型:" prop='typeDict'>
                    <el-select v-model="infoJournalView.typeDict" placeholder="请选择期刊类型" :disabled="disableDet"  style="width: 30%;">
                        <el-option
                            v-for="item in allJournalClassification"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="disableDet">
                        </el-option>
                      </el-select>
                  </el-form-item> -->
                  <el-form-item  label="作者:" >
                    <el-input v-model="infoJournalView.author" placeholder="请输入作者" :disabled="disableDet" style="width: 70%;" maxlength="100" show-word-limit></el-input>
                  </el-form-item>
                   <el-form-item :required="true" label="语言:" prop='languageDict'>
                    <el-select v-model="infoJournalView.languageDict" placeholder="请选择语言" :disabled="disableDet"  style="width: 30%;">
                        <el-option
                            v-for="item in jouralLanguageDicts"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="false">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item  label="年份:" prop='year'>
                    <el-input v-model="infoJournalView.year" placeholder="请输入年份" :disabled="disableDet" style="width: 30%;" maxlength="50" show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item  label="期次:" prop='period'>
                    <el-input v-model="infoJournalView.period" placeholder="请输入期次" :disabled="disableDet" style="width: 30%;" maxlength="50" show-word-limit></el-input>
                  </el-form-item>
                  <!-- <el-form-item  label="主题:" prop='topic'>
                    <el-input v-model="infoJournalView.topic" :disabled="disableDet" style="width: 70%;" maxlength="100" show-word-limit></el-input>
                  </el-form-item> -->
                  <el-form-item  label="出版单位:" >
                    <el-input v-model="infoJournalView.publisher" placeholder="请输入出版单位" :disabled="disableDet" style="width: 70%;" maxlength="100" show-word-limit></el-input>
                  </el-form-item>
                   <el-form-item  label="阅读链接:" prop='link'>
                    <el-input v-model="infoJournalView.link" placeholder="请输入阅读链接" :disabled="disableDet" style="width: 70%;" maxlength="100" show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="期刊摘要:">
                    <el-input type="textarea" :rows="10" v-model="infoJournalView.abstractPoint" placeholder="请输入期刊摘要" :disabled="disableDet"  style="width: 70%;min-height: 50px;" maxlength="5000" show-word-limit></el-input>
                  </el-form-item>
                   <!-- <el-form-item label="介绍:" prop='remark'>
                    <el-input type="textarea" :rows="10" v-model="infoJournalView.remark" placeholder="请输入介绍" :disabled="false"  style="width: 70%;min-height: 50px;" maxlength="500" show-word-limit></el-input>
                  </el-form-item> -->
                <el-form-item label="期刊图片:"  prop='pictureUrl'>
                    <el-upload
                        class="upload-demo"
                        action="/api/file/upload/attachment?module=InfoJournal&attachmentBusinessType=infoJournal"
                        :before-upload="beforeUploadCatalog"
                        :show-file-list="false"
                        :disabled="disableDet"
                        :on-success="photoSuccess"
                        :headers="myHeaders">
                        <img v-if="infoJournalView.pictureUrl != ''" :src="'/api/file/pub/'+infoJournalView.pictureUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip" >{{$t('common.resourceHint')}}{{$t('common.resourceUploadJPGPNG')}}，{{$t('common.resourceFilesCannotExceed10Mb')}}，{{$t('common.resourceUploadOne')}}</div>
                    </el-upload>
                </el-form-item>

                
              </el-form>
        </div>
       
        <div v-show="$i18n.locale == 'zh'" style="height: 200px;">
            <div style="margin-top: 100px;">
                <el-button v-if="!disableDet" type="warning" style="margin-left: 300px;" @click="save('form1')">保存</el-button>
                <el-button v-if="!disableDet" type="primary" style="margin-left: 30px;" @click="close">关闭</el-button>       
                <el-button v-if="disableDet" type="primary" style="margin-left: 450px;" @click="close">关闭</el-button>       
            </div>
        </div>
        <div  v-if="dialogVisible && $i18n.locale == 'zh'">
            <userCenterAddTag v-bind:systemLabel="systemLabel" :mergeSelectedLabels="mergeSelectedLabels" @closeMain="closeMain"></userCenterAddTag>
        </div>

        <div v-show="$i18n.locale == 'en'" style="height: 80px;line-height: 80px;margin-top: 20px;margin: 0 20px; color: #666;font-size: 15px; border-bottom: 1px solid #bcbcbc;">
            Add Journal
        </div>     
        <div v-show="$i18n.locale == 'en'" style="width: 600px;" >
            <el-form ref="form2" :model="infoJournalView" label-width="160px" class="demo-ruleForm"  style="margin-top: 20px;width: 1200px;" :rules="englishFormRules">
               <el-form-item  label="Journal Name:" prop='name'>
                    <el-input v-model="infoJournalView.name" placeholder="Please enter the journal name" :disabled="disableDet" style="width: 70%;" maxlength="100" show-word-limit></el-input>
                  </el-form-item>
                  <!-- <el-form-item :required="true" label="Journal Type:" prop='typeDict'>
                    <el-select v-model="infoJournalView.typeDict" placeholder="Please select journal type" :disabled="disableDet"  style="width: 30%;">
                        <el-option
                            v-for="item in allJournalClassification"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="false">
                        </el-option>
                      </el-select>
                  </el-form-item> -->
                  <el-form-item  label="Author:" prop='author' >
                    <el-input v-model="infoJournalView.author" placeholder="Please enter the author" :disabled="disableDet" style="width: 70%; " maxlength="100" show-word-limit></el-input>
                  </el-form-item>
                   <el-form-item :required="true" label="Language:" prop='languageDict'>
                    <el-select v-model="infoJournalView.languageDict" placeholder="Please select a language" :disabled="disableDet"  style="width: 30%;">
                        <el-option
                            v-for="item in jouralLanguageDicts"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="false">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item  label="Year:" prop='year'>
                    <el-input v-model="infoJournalView.year" placeholder="Please enter the year" :disabled="disableDet" style="width: 30%;" maxlength="50" show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item  label="Period:" prop='period'>
                    <el-input v-model="infoJournalView.period" placeholder="Please enter the period" :disabled="disableDet" style="width: 30%;" maxlength="50" show-word-limit></el-input>
                  </el-form-item>
                  <!-- <el-form-item  label="Topic:" prop='topic'>
                    <el-input v-model="infoJournalView.topic" :disabled="disableDet" style="width: 70%;" maxlength="100" show-word-limit></el-input>
                  </el-form-item> -->
                <el-form-item  label="Publisher:" >
                    <el-input v-model="infoJournalView.publisher" placeholder="Please enter the publisher" :disabled="disableDet" style="width: 70%;" maxlength="100" show-word-limit></el-input>
                  </el-form-item>
                   <el-form-item  label="Link:" prop='link'>
                    <el-input v-model="infoJournalView.link" placeholder="Please enter the link" :disabled="disableDet" style="width: 70%;" maxlength="100" show-word-limit></el-input>
                  </el-form-item>
                 <el-form-item label="Journal Summary:">
                    <el-input type="textarea" :rows="10" v-model="infoJournalView.abstractPoint" placeholder="Please enter the journal summary" :disabled="false"  style="width: 70%;min-height: 50px;" maxlength="5000" show-word-limit></el-input>
                  </el-form-item>
                   <!-- <el-form-item label="Remark:" prop='remark'>
                    <el-input type="textarea" :rows="10" v-model="infoJournalView.remark" placeholder="Please Input Remark" :disabled="false"  style="width: 70%;min-height: 50px;" maxlength="10000" show-word-limit></el-input>
                  </el-form-item> -->
                <el-form-item label="Journal Map:" prop='pictureUrl'>
                    <el-upload
                        class="upload-demo"
                        action="/api/file/upload/attachment?module=InfoJournal&attachmentBusinessType=infoJournal"
                        :before-upload="beforeUploadCatalog"
                        :show-file-list="false"
                        :disabled="disableDet"
                        :on-success="photoSuccess"
                        :headers="myHeaders">
                    <img v-if="infoJournalView.pictureUrl != ''" :src="'/api/file/pub/'+infoJournalView.pictureUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip" >{{$t('common.resourceHint')}}{{$t('common.resourceUploadJPGPNG')}}，{{$t('common.resourceFilesCannotExceed10Mb')}}，{{$t('common.resourceUploadOne')}}</div>
                     </el-upload>
                </el-form-item>
              </el-form>
        </div>
       
        <div v-show="$i18n.locale == 'en'" style="height: 200px;">
            <div style="margin-top: 100px;">
                <el-button v-if="!disableDet" type="warning" style="margin-left: 300px;" @click="save('form2')">Save</el-button>
                <el-button  v-if="!disableDet" type="primary" style="margin-left: 30px;" @click="close">Close</el-button>       
                <el-button  v-if="disableDet" type="primary" style="margin-left: 450px;" @click="close">Close</el-button>       
            </div>
        </div>
        <div v-if="dialogVisible && $i18n.locale == 'en'">
            <userCenterAddTag v-bind:systemLabel="systemLabel" :mergeSelectedLabels="mergeSelectedLabels" @closeMain="closeMain"></userCenterAddTag>
        </div>
    </div>

</template>
<script>
    import { regionDataPlus } from 'element-china-area-data'
    import ue  from '@/components/ue'
    import userCenterAddTag  from './userCenterAddTag'
    import Base from "@/views/base/Base";
    import { getDicts } from "@/api/dict";
    import { getTreeByLanguagePortal,getAllCountryAndCity } from "@/api/operation/baseCityInformationDict";
    import { saveOrUpdate,getBaseProjectBizViewById} from "@/api/project/baseProjectInfo";
    import {getAllJournalClassificationByUserCenter, saveOrUpdateByUserCenter,getInfoDataByUserCenter} from "@/api/userCenter/myPeriodical";
    import { getToken ,resetToken} from '@/utils/auth';
    import { searchFiles }  from '@/api/file';

     export default {
        name: 'userCenteraddMaintenanceJournalInformations',
        extends: Base,
        components: {
            ue,userCenterAddTag
        },
        data () {
            return {
                placehoders:'Please select',
                textareaMessaage:"",
                textareaMessaageEn:"",
                fileList:[],
                myHeaders: {Authorization: ('Bearer ' +getToken())}, 
                 isCreateNewUser: [
                    { label: "是", value: "Y"},
                    { label: "否（只对合作组织公开）", value: "N" }
                ],
                isCreateNewUserEn: [
                    { label: "Yes", value: "Y"},
                    { label: "No (Visible only to GEIDCO)", value: "N" }
                ],
                informationsClass:'1',
                dialogVisible: false,
                ifDiaslog:'',
                title:'',
                options: regionDataPlus,
                selectedOptions: [],
                systemLabel:[],
                mergeSelectedLabels:[],
                infoJournalView: {
                    pictureUrl:''
                },
                continentCountryDicts: [],
                unitCountryDicts: [],
                reserveOnes: [],
                technicalCategoriesDicts: [],
                technicalScopeDicts: [],
                phaseTypeDicts: [],
                languageDicts: [],
                imageUrl: '',
                form: {},
                files: [],
                imgList: [],
                path: "",
                allJournalClassification: [],
                jouralLanguageDicts: [],
                entityId:this.$route.query.key,
                disableDet: this.$route.query.disableDet ? this.$route.query.disableDet : false,
            }
        },
        watch: {
            // "baseProjectView.continentCountry"() {
            //     this.continentCountryDicts.forEach((i) => {
            //         if (this.baseProjectView.continentCountry == i.value) {
            //         this.unitCountryDicts = i.data;
            //         }
            //     });
            // },
            // "baseProjectView.unitCountry"() {
            //     this.unitCountryDicts.forEach((i) => {
            //         if (this.baseProjectView.unitCountry == i.value) {
            //             this.reserveOnes= i.data;
            //         }
            //     })
            // },
            '$i18n.locale'(){
            this.initData();
            // this.getBaseProject();
            }
        },
        mounted() {
            this.initData();
        },
        computed:{
            englishFormRules(){
                 return{
                    name: [
                       { required: true, message: 'Please enter the journal name', trigger: 'change' },
                    ],
                    typeDict: [
                        { required: true, message: 'Please enter the journal type', trigger: 'change' },
                    ],
                    languageDict: [
                        { required: true, message: 'Please select a language', trigger: 'change' },
                    ],
                    year: [
                       { required: true, message: 'Please enter the year', trigger: 'change' },
                    ],
                    period: [
                       { required: true, message: 'Please enter the  period', trigger: 'change' },
                    ],
                    // topic: [
                    //     { required: true, message: 'Please Input Topic', trigger: 'change' },
                    // ],
                    link: [
                        { required: true, message: 'Please enter the link', trigger: 'change' },
                    ],
                    pictureUrl: [
                        { required: true, message: 'Please upload  picture', trigger: 'change' },
                    ]
                }
            },
            chineseFormRules(){
                 return{
                    name: [
                       { required: true, message: '请输入期刊名称', trigger: 'change' },
                    ],
                    typeDict: [
                        { required: true, message: '请输入期刊类型', trigger: 'change' },
                    ],
                    languageDict: [
                        { required: true, message: '请选择语言', trigger: 'change' },
                    ],
                    year: [
                       { required: true, message: '请输入年份', trigger: 'change' },
                    ],
                    period: [
                       { required: true, message: '请输入期次', trigger: 'change' },
                    ],
                    // topic: [
                    //     { required: true, message: '请输入主题', trigger: 'change' },
                    // ],
                    link: [
                        { required: true, message: '请输入阅读链接', trigger: 'change' },
                    ],
                    pictureUrl: [
                        { required: true, message: '请上传图片', trigger: 'change' },
                    ]
                }
            },
        },
        methods:{
            initData(){
                    if (this.entityId) {
                        var params = {
                         id : this.entityId
                     }
                    getInfoDataByUserCenter(params).then(result => {
                        this.infoJournalView = result.data.infoJournal
                    });  
                    }
                    var parms = {
                       languageDict: "" 
                    };
                    parms.languageDict = this.$i18n.locale.toUpperCase();
                getAllJournalClassificationByUserCenter(parms).then(result => {
                        this.allJournalClassification = result.data.allJournalClassification
                    });  
                if (this.$i18n.locale.toUpperCase() == 'ZH') {

                    getDicts(
                        "JOURNAL_LANGUAGE_DICT"
                    ).then(result => {
                        var data = result.data;
                        if (data) {
                        this.jouralLanguageDicts = result.data[0] || [];
                        }
                    });   
                } 
                if (this.$i18n.locale.toUpperCase() == 'EN') {
                    var languageDict = [
                        {
                            label: "Chinese",
                            value: "ZH"
                        },
                        {
                            label: "English",
                            value: "EN"
                        }
                    ]
                    this.jouralLanguageDicts = []
                    this.jouralLanguageDicts = languageDict;
                    getDicts("").then(result => {
                        
                    });   
                }
                 
            },
            // 下载文件方法file参数为已上传文件的信息，其实就是取得fileList里的值
            handlePreview(file, fileList) {
                document.location.href = 'http://localhost:8080/api/file/pub/'+file.url
            },
            handleRemove(file, fileList) {
                this.files.forEach((i) => {
                    if (i == file.uid) {
                        var index = this.files.indexOf(i);
                        this.files.splice(index, 1);
                    }
                })
            },
            handleAvatarSuccessAnnex(res, file) {
               this.files.push(res.data.attachmentId);
            },  
            beforeUploadCatalog(file) {
            },
            
            save: function (formName) { 
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.infoJournalView.languageDict = this.$i18n.locale.toUpperCase();
                        this.infoJournalView.updateDate = new Date();
                        let token = getToken();
                        this.submitHandler(token => {
                            saveOrUpdateByUserCenter(
                                JSON.stringify(this.infoJournalView),
                                token
                            )
                                .then(result => {
                                if (this.$i18n.locale.toUpperCase() == 'ZH') {
                                    alert("期刊保存成功");
                                } else {
                                    alert("Periodical saved successfully");
                                }
                                
                                this.baseProjectView = {};
                                this.$router.go(-1);//返回上一层
                            })
                                .catch(error => {
                                // 此处你的业务代码
                                this.resetToken();
                            });
                        });
                     }else{
                        if (this.$i18n.locale.toUpperCase() == 'ZH') {
                            this.$notify.error({
                                title: '保存失败',
                                message: '请填写必填项'
                            });
                        } else {
                            this.$notify.error({
                                title: 'Error',
                                message: 'Please fill in the required fields'
                            });
                        }
                        return false;
                    }
                });
            },
            close(){
                this.$router.go(-1);
            },
            closeMain(val){
                this.mergeSelectedLabels = [];
                val.forEach((element,index) => {
                    this.mergeSelectedLabels.push(element.label)
                });
                this.systemLabel=val;
                this.baseProjectView.projectLabel = JSON.stringify(this.mergeSelectedLabels).replace(/\[|]/g,'').replace(/\"/g, "");;
                this.dialogVisible=false;
            },
            goAithentication(num){
                this.$router.go(-1);//返回上一层
            },
            handleChange (file, fileList) {
                this.fileList = fileList.slice(-3);
            },
            photoSuccess(res, file) {
                this.infoJournalView.pictureUrl = res.data.path
                this.imgList.push(res.data.attachmentId)

            }, 
            dialogVisibles(){
                this.dialogVisible=true
            }
        }
    }
</script>
<style scoped>
    .el-button {
        width: 200px;
        height: 45px;
    }
    .authenticationBox1 {
        margin-left: 35px;
        margin-right: 150px;
        height: 100px;
        border: 1px solid rgba(153, 153, 153, 1);
        border-radius: 10px;
        margin-top: 50px;
        position: relative;
    }
    .authenticationBox2 {
        margin: 50px 150px 0 35px;
         height: 100px;
         border: 1px solid rgba(153, 153, 153, 1);
         border-radius: 10px;
         position: relative;
    }
    .authenticationBox1:hover,
    .authenticationBox2:hover {
        border: 1px solid #ff8400;
    }
        .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;
    }
    .userCenterAuthenticationPersonal>>>.el-upload {
        border: 1px solid rgba(204, 204, 204, 1);
    }
    .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;
    }
     /deep/.el-textarea__inner {
        display: block;
        resize: vertical;
        padding: 5px 15px;
        line-height: 1.5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        font-size: inherit;
        color: #606266;
        background-color: #FFF;
        background-image: none;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    }
    /*.el-textarea/deep/::-webkit-input-placeholder {*/
    /*    color: red;*/
    /*}*/
    /*.el-textarea/deep/::-moz-input-placeholder {*/
    /*    color: red;*/
    /*}*/
    /*.el-textarea/deep/::-ms-input-placeholder {*/
    /*    color: red;*/
    /*}*/
</style>