引用页面调整

src/components/page/Complete_profile.vue

@@ -76,6 +76,6 @@
     p{color: #333;}
     .mt10{margin-top: 10px;}
     .more{font-weight: bold;}
-    .helpcontent{color: #888; margin-top: 150px;}
+    .helpcontent{color: #888; margin-top: 150px; padding-top: 30px; border-top: 2px solid #f1f1f1;}
     .helpcontent p{color: inherit; font-size: 12px;}
   </style>

src/components/page/ReferenceEditor.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-loading.fullscreen.lock="holeLoading">
-      <div class="container" v-loading="importIoading" element-loading-text="In the process of importing, please later">             
+      <div class="container" v-loading="importIoading" element-loading-text="In the process of importing, please wait">             
            <div v-if="tableData.length == 0">  
           <!-- 没有引用时 -->
           <div class="noneData">            
@@ -19,32 +19,20 @@
                 </h2>
                 <p class="mt10 c666">you can add a citation in the following way.</p>
                 <ul> 
-                    <!-- 文本域 -->
-                    <li>
-                        <div class="mt20">
-                            <h4>Add in bulk by text field &nbsp;&nbsp;&nbsp;<el-button @click="addText" class="inlinebutton" type="primary" plain size="mini">Add</el-button></h4> 
-                            <div v-if="textareaVisible">
-                                <el-input class="textarea mt10"
-                                type="textarea"
-                                :rows="3"
-                                placeholder="Put your reference entry here"
-                                v-model="textarea">
-                                </el-input>
-                                <el-button class="mt10" icon="el-icon-check" type="primary" size="mini" @click="importText()">Import</el-button>
-                            </div>
-                        </div> 
-                    </li>
                     <!-- 文件上传的形式 -->
                     <li>
                         <div class="mt20">
-                            <h4>Add in bulk by uploading excel files</h4>
+                            <h4>Add in bulk by uploading excel files &nbsp;&nbsp;
+                                <!-- <el-button class="inlinebutton" type="primary" plain size="mini" @click="showUpload">Add</el-button> -->
+                            </h4>
                             <p class="mt10 c666">Before uploading the file, you need to download the template file,  
                                 <a  href="https://submission.tmrjournals.com/public/coverLetter/system/refer.xlsx" download="refer" target="_blank" class="downloadbtn"  >click download</a>  
-                                ,to add your references to the template file, and upload it. &nbsp;&nbsp;&nbsp;
+                                ,to add your references to the template file, and upload it.                                 
-                                <el-button class="inlinebutton" type="primary" plain size="mini" @click="showUpload">upload</el-button></p>
+                              
+                            </p>
                             <div v-if="uploadVisible">
                                 <div class="uploadBox">
-                                    <el-upload  ref="uploadFile" class="upload-demo up_newstyle" :action="upload_manuscirpt"
+                                    <el-upload  ref="uploadFile" class="upload-demo up_newstyle mt10" :action="upload_manuscirpt"
                                     accept=".xlsx" name="referFile" :before-upload="beforeupload_manuscirpt"
                                     :on-error="uperr_coverLetter" :on-success="upSuccess_manuscirpt" :limit="1"
                                     :on-exceed="alertlimit" 
@@ -59,6 +47,21 @@
                             </div>
                         </div>
                     </li>
+                    <!-- 文本域 -->
+                    <!-- <li>
+                        <div class="mt20">
+                            <h4>Add in bulk by text field &nbsp;&nbsp;&nbsp;<el-button @click="addText" class="inlinebutton" type="primary" plain size="mini">Add</el-button></h4> 
+                            <div v-if="textareaVisible">
+                                <el-input class="textarea mt10"
+                                type="textarea"
+                                :rows="3"
+                                placeholder="Put your reference entry here"
+                                v-model="textarea">
+                                </el-input>
+                                <el-button class="mt10" icon="el-icon-check" type="primary" size="mini" @click="importText()">Import</el-button>
+                            </div>
+                        </div> 
+                    </li> -->                    
                 </ul>                               
             </div>
         </div>        
@@ -112,8 +115,8 @@
                                 {{scope.row.refer_content}}                                                                  
                             </p>
                             <div style="text-align: left;" v-else>
-                                <p>{{scope.row.author}}{{scope.row.title}} <em>{{scope.row.joura}}</em> {{scope.row.dateno}}<br/></p>
+                                <p>{{scope.row.author}},{{scope.row.title}}, <em>{{scope.row.joura}}</em> ,{{scope.row.dateno}}<br/></p>
-                                <a class="doiLink" :href="'http://doi.org/' + scope.row.refer_doi" target="_blank">http://doi.org/{{scope.row.refer_doi}}</a>                         
+                                <a class="doiLink" :href="scope.row.doilink" target="_blank">{{scope.row.doilink}}</a>                         
                             </div>
                         </template> 
                     </el-table-column>
@@ -135,17 +138,33 @@
       <!-- 修改引用 -->
       <el-dialog v-loading="addLoading"  :title= "dialogTitle + ' References'" :visible.sync="editboxVisible" width="500px">
                 <p class="yinyongPre c888">现在您可以添加或者修改您的引用文献信息，如果您有引用文献的Doi数据，可以直接复制到Doi输入框，并提交，系统会自动识别您的引用文献，如果您没有Doi数据，也可以打开“Show Content”开关，直接填写您的引用文献内容。</p>
-                <el-form :model="refenceForm" :rules="refenceFormrules" ref="refenceForm" label-width="80px" class="editForm mt10">
+                <p v-if="this.dialogTitle == 'Add'">There is no Doi data:  <el-switch v-model="contentVisible"></el-switch></p>
-                    <!-- 内容开关 -->
+                <el-form v-show="!contentVisible" :model="refenceForm" :rules="refenceFormrules" ref="refenceForm" label-width="80px" class="editForm mt10">
-                    <!-- <el-form-item label="Show Content" label-width="120px">                        
+                    <!-- 内容开关 -->                    
-                        <el-switch v-model="contentVisible"></el-switch>
+                    <el-form-item label="Doi:" required  prop="refer_doi" >
-                    </el-form-item> -->
-                    <el-form-item label="Doi:" required  prop="refer_doi" v-if="!contentVisible">
                         <el-input  v-model="refenceForm.refer_doi" ></el-input>
                     </el-form-item> 
-                    <!-- <el-form-item label="Content:" required prop="refer_content" v-else>
+                </el-form> 
-                        <el-input rows="5" v-model="refenceForm.refer_content" type="textarea"></el-input>
+                <el-form v-show="contentVisible" :model="refenceLinkForm" :rules="refenceLinkFormrules" ref="refenceLinkForm" label-width="80px" class="editForm mt10">
-                    </el-form-item>  -->
+                    <!-- 内容开关 -->
+                    <!-- <el-form-item label="There is no Doi data" label-width="160px">                        
+                        <el-switch v-model="contentVisible"></el-switch>
+                    </el-form-item>                     -->
+                    <el-form-item label="author:" required prop="author" >
+                        <el-input  v-model="refenceLinkForm.author"></el-input>
+                    </el-form-item> 
+                    <el-form-item label="title:" required prop="title" >
+                        <el-input  v-model="refenceLinkForm.title" ></el-input>
+                    </el-form-item> 
+                    <el-form-item label="joura:" required prop="joura" >
+                        <el-input  v-model="refenceLinkForm.joura" ></el-input>
+                    </el-form-item>
+                    <el-form-item label="dateno:" required prop="dateno" >
+                        <el-input  v-model="refenceLinkForm.dateno" ></el-input>
+                    </el-form-item>
+                    <el-form-item label="link:" required prop="link" >
+                        <el-input  v-model="refenceLinkForm.link" ></el-input>
+                    </el-form-item>
                 </el-form>            
               <span slot="footer" class="dialog-footer">
                   <el-button @click="cancelSave">Cancel</el-button>
@@ -168,7 +187,7 @@
         <!-- 临时引用信息 -->
         <el-dialog title="Reference List" :visible.sync="linVisible" width="800px">           
             <div class="refenceCentent mt20" v-if="Tempredable.length > 0">
-                <el-table :data="Tempredable"  ref="tempredableTable" 
+                <el-table :data="Tempredable"  ref="tempredableTable" max-height="400px"
                     empty-text="New messages (0)" :show-header="false" :stripe="false" :highlight-current-row="false">              
                     <el-table-column type="index" label="No." width="55" align="center"></el-table-column>
                     <el-table-column  label="Title" align="left">
@@ -182,7 +201,7 @@
                     </el-table-column>              
                 </el-table>
                 <div class="shuoming mt20">
-                    <p class="c888"><i class="el-icon-message-solid"></i>&nbsp;&nbsp;The above is the citation data identified according to your uploaded file, you can choose to import, or discard this data and import again.</p>
+                    <p class="c888"><i class="el-icon-message-solid"></i>&nbsp;&nbsp;The above is the citation data identified according to your uploaded file, you can choose to import, or discard this data and upload again.</p>
                 </div>    
             </div>
               <span slot="footer" class="dialog-footer" >
@@ -211,7 +230,7 @@
               ],       
               editboxVisible:false,
               helpVisible:false,
-              uploadVisible:false,
+              uploadVisible:true,
               linVisible:false,
               textarea:'',
               textareaVisible:false,
@@ -220,15 +239,37 @@
                 referFile: '',                
               },
               // 引用表单
-              refenceForm:{
+              refenceForm:{                
-                refer_content:'',
                 refer_doi:'',
                 p_refer_id:null, // 当前行一行的引用序号
               },
               refenceFormrules:{
+                refer_doi:[
+                { required: true, message: 'The Doi cannot be empty', trigger: 'blur' },
+                ]
+              },
+              // 引用表单
+              refenceLinkForm:{
+                author:'',
+                title:'',
+                joura:'',
+                dateno:'',
+                link:'',
+                p_refer_id:null, // 当前行一行的引用序号
+              },
+              refenceLinkFormrules:{
+                author:[
+                { required: true, message: 'The author cannot be empty', trigger: 'blur' },
+                ],
                 title:[
                 { required: true, message: 'The title cannot be empty', trigger: 'blur' },
-                ]
+                ],
+                dateno:[
+                { required: true, message: 'The dateno cannot be empty', trigger: 'blur' },
+                ],
+                link:[
+                { required: true, message: 'The link cannot be empty', trigger: 'blur' },
+                ]                
               },
               dialogTitle:''
           }
@@ -271,6 +312,7 @@
           },
           // 导入文本域
           importText(){
+            this.linVisible = false
             this.importIoading = true               
                 //console.log(this.form.referFile,'referFile')  
                 this.$api
@@ -307,8 +349,16 @@
           change(row, optitle){   
             this.dialogTitle = optitle     
             this.editboxVisible = true
-            this.refenceForm.refer_doi = row.refer_doi
+            if(row.refer_doi){
-            this.refenceForm.p_refer_id = row.p_refer_id
+                // 有doi
+                this.refenceForm.refer_doi = row.refer_doi
+                this.refenceForm.p_refer_id = row.p_refer_id
+            }else{
+                // doi
+                this.contentVisible = true
+            }
+            
+
           },
 
           // 取消保存
@@ -316,14 +366,34 @@
             this.editboxVisible = false
            // refenceForm
             this.$refs['refenceForm'].resetFields(); 
+            this.refenceForm.refer_doi = ''
             this.dialogTitle = ''           
           }, 
 
           // 编辑引用
           saveChange(){
-              this.$refs.refenceForm.validate((valid) => {
+            if(this.contentVisible){ // 无doi形式
+                this.editNoneDoi()
+            }else{
+                this.editHaveDoi()
+            }
+            
+          },
+          //  编辑无doi
+          editNoneDoi(){
+            this.$refs.refenceLinkForm.validate((valid) => {
                 this.addLoading = true
                 if(valid){
+                    console.log('没有doi编辑情况')
+                }
+            })
+          },
+
+          // 编辑有doi
+          editHaveDoi(){            
+            this.$refs.refenceForm.validate((valid) => {
+                this.addLoading = true
+                if(valid){                                    
                      this.$api
 					.post('api/Preaccept/editRefer', {
 						// 'article_id': this.$route.query.id,
@@ -336,7 +406,10 @@
 							this.$message.success('successed！')                                                       
                             this.getRefData()
                             this.cancelSave() 
-						} else {
+						}else if(res.code == 1){
+                            this.addLoading = false
+							this.$message.error(res.msg)     
+                        } else {
 							this.$message.error(res.msg);
 						}
 					})
@@ -351,9 +424,9 @@
 
           // 保存新增
           saveAdd(){
-            this.$refs.refenceForm.validate((valid) => {
+            this.$refs.refenceForm.validate((valid) => {               
-                this.addLoading = true
                 if(valid){
+                    this.addLoading = true
                     this.$api
 					.post('api/Preaccept/addRefer', {
 						'article_id': this.$route.query.id,
@@ -366,7 +439,13 @@
 							this.$message.success('successed！')                                                       
                             this.getRefData()
                             this.cancelSave() 
-						} else {
+						}else if(res.code == 1){
+                            // doi 错误
+                            this.addLoading = false
+							this.$message.error(res.msg)                                                       
+                          //  this.getRefData()
+                           // this.cancelSave() 
+                        } else {
 							this.$message.error(res.msg);
 						}
 					})
@@ -440,17 +519,20 @@
 				this.$refs['uploadFile'].clearFiles();
 			},
             // 清空引用文献
-            removeAll(){ 
+            removeAll(){
+                this.$confirm('Are you sure you want to empty the reference?', 'Tips', {
+                confirmButtonText: 'Sure',
+                cancelButtonText: 'Cancel',
+                type: 'warning'
+                }).then(()=>{ 
                 this.$api
 					.post('api/Preaccept/discardRefers', {
 						'article_id': this.$route.query.id
 					})
 					.then(res => {
 						if (res.code == 0) {
-							this.$message.success('success！')
+							this.$message.success('success！')                            
-                            setTimeout(()=>{
                               location.reload()  // 刷新本页面 
-                            },2000)
 
 						} else {
 							this.$message.error(res.msg);
@@ -459,6 +541,7 @@
 					.catch(err => {
 						this.$message.error(err);
 					});
+                }).catch(()=>{})
             },
             // 添加一行
             addLine(row, optitle){
@@ -539,11 +622,24 @@
 				// return this.baseUrl + 'api/Article/up_file/type/manuscirpt';
                 return this.baseUrl + 'api/Preaccept/up_refer_file';
 			},        
-      }
+      },
-  }
+      watch: {
+        contentVisible: {
+        handler(newVal, oldVal) {  
+            this.$nextTick(()=>{                  
+                this.$refs['refenceLinkForm'].clearValidate()                
+                this.$refs['refenceForm'].clearValidate()                               
+            })
+            console.log(newVal)
+        },
+       // immediate: true,
+        deep: true // 可以深度检测到 person 对象的属性值的变化
+        }
+        }
+    }
   </script>
   
-  <style  scoped>
+  <style  scoped> 
   .wrongLine{ color: #f15f44;}
   .doiLink{color: #409EFF;}
   .editForm{background-color:#f9f9f9; padding: 20px 0; padding-right: 20px;}