From fa8a3caf9a135f5e16a1ec84ec4c181df4de8f6a Mon Sep 17 00:00:00 2001
From: "@fawn-nine" <1271023382@qq.com>
Date: Mon, 12 Jun 2023 18:07:36 +0800
Subject: [PATCH] 0612

---
 src/components/page/ReferenceEditor.vue | 245 ++++++++++++++----------
 src/components/page/articleList.vue     |   3 +-
 2 files changed, 151 insertions(+), 97 deletions(-)

diff --git a/src/components/page/ReferenceEditor.vue b/src/components/page/ReferenceEditor.vue
index 1150a5f..e8953fa 100644
--- a/src/components/page/ReferenceEditor.vue
+++ b/src/components/page/ReferenceEditor.vue
@@ -10,7 +10,7 @@
           <el-row :gutter="20">
           <!-- 教程 -->
           <el-col >
-          <div class="flexbox whoDo mt20">                        
+          <div class=" whoDo mt20">                        
             <div>
                 <h2>What should I do 
                     <el-tooltip class="item" effect="light" content="click for more help" placement="right">
@@ -30,7 +30,7 @@
                                 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>
+                                <el-button class="mt10" icon="el-icon-check" type="primary" size="mini" @click="importText()">Import</el-button>
                             </div>
                         </div> 
                     </li>
@@ -39,13 +39,13 @@
                         <div class="mt20">
                             <h4>Add in bulk by uploading excel files</h4>
                             <p class="mt10 c666">Before uploading the file, you need to download the template file,  
-                                <el-link @click="" class="downloadbtn" type="primary" >click download</el-link>  
+                                <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;
                                 <el-button class="inlinebutton" type="primary" plain size="mini" @click="showUpload">upload</el-button></p>
                             <div v-if="uploadVisible">
                                 <div class="uploadBox">
                                     <el-upload  ref="uploadFile" class="upload-demo up_newstyle" :action="upload_manuscirpt"
-                                    accept=".xls, .xlsx" name="manuscirpt" :before-upload="beforeupload_manuscirpt"
+                                    accept=".xlsx" name="referFile" :before-upload="beforeupload_manuscirpt"
                                     :on-error="uperr_coverLetter" :on-success="upSuccess_manuscirpt" :limit="1"
                                     :on-exceed="alertlimit" 
                                     :on-remove="removefilemanuscirpt"
@@ -55,28 +55,14 @@
                                             <em>Upload</em>
                                         </div>                                    
                                 </el-upload>
-                                </div>
-                                <el-button v-if="fileL_manuscirpt.length > 0" class="mt10" icon="el-icon-check" type="primary" size="mini">Import</el-button>
+                                </div>                                
                             </div>
                         </div>
                     </li>
-                </ul>                
+                </ul>                               
             </div>
-        </div>
-        </el-col>
-          <!-- 辅助信息 -->
-        <!-- <el-col >
-            <div class="flexbox helpcontent mt20">
-                <span class="el-icon-info"></span>
-                <div>
-                    <h4>Any questions/Help</h4>
-                    <p class="mt20">If you do not understand the operation items on this page or need help, you can find us in the following ways:</p>
-                    <p class="mt20">- Way one</p>
-                    <p class="mt10">- Way two</p>
-                    <p class="mt10">- Way three</p>
-                </div>
-            </div>
-        </el-col> -->
+        </div>        
+        </el-col>        
     </el-row>
         </div>
         <!-- 有引用数据-->
@@ -86,10 +72,10 @@
                 <p class="mt10">您可以在本页面对引用数据进行对应的修改和调整，主要包括如下操作:</p>
                 <ul class="mt20">
                     <li>
-                        <p>需要您调整一下引用条目，将                            
-                            <el-button class="status" icon="el-icon-warning-outline"  type="warning"  plain circle></el-button>
+                        <p>需要您调整一下引用条目，将                           
+                           <span  class="status warn float" ><i class="el-icon-warning-outline"></i></span>
                         状态的引用信息调整到
-                        <el-button class="status" icon="el-icon-circle-check"  type="success"  plain circle></el-button>
+                        <span  class="status ok float" ><i class="el-icon-warning-outline"></i></span>
                         的状态。</p>
                     </li>
                     <li>
@@ -110,37 +96,41 @@
                 <el-table :data="tableData"  ref="multipleTable" 
               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="status" prop="status"  width="55" align="center">
-                <template slot-scope="scope">
-                    <el-button  autofocus='true' class="status" icon="el-icon-circle-check" v-if="scope.row.status == 1" type="success"  plain circle></el-button>
-                    <el-button autofocus='true' class="status" icon="el-icon-warning-outline" v-if="scope.row.status == 0" type="warning"  plain circle></el-button>
-                </template>
-              </el-table-column>			
-              <el-table-column prop="title" label="Title" align="left">
-                  <template slot-scope="scope">
-                      <p style="text-align: left;">
-                          <!-- <el-badge is-dot :hidden="scope.row.author_act==1?false:true" class="item"> -->
-                              {{scope.row.title}}
-                          <!-- </el-badge> -->
-                      </p>
-                  </template> 
-              </el-table-column>
-              <el-table-column align="center" width="360">
-                  <div slot-scope="scope">
-                      <el-button style="margin-left:10px;" @click="change(scope.row)"  plain type="primary" size="mini" icon="el-icon-edit">change</el-button>  
-                      <el-tooltip popper-class="tps" class="item" effect="light" content="Add one under this line" placement="top">
-                        <el-button type="primary" size="mini" plain>+</el-button>   
-                      </el-tooltip>
-                      <el-button type="primary" size="mini" plain>↑</el-button>
-                      <el-button type="primary" size="mini" plain>↓</el-button>                                   
-                      <el-button  type="danger" icon="el-icon-delete" size="mini" style="float: right;" plain>delete</el-button>
-                  </div>
-              </el-table-column>
+                    <el-table-column label="state"  width="55" align="center">
+                        <template slot-scope="scope">
+                            <span  class="status warn"  v-if="scope.row.refer_doi == ''"  >
+                                <i class="el-icon-warning-outline"></i>
+                            </span>
+                            <span  class="status ok"  v-else >
+                                <i class="el-icon-circle-check"></i>
+                            </span>                            
+                        </template>
+                    </el-table-column>			
+                    <el-table-column  label="Title" align="left">
+                        <template slot-scope="scope">
+                            <p style="text-align: left;" v-if="scope.row.refer_doi == ''">
+                                {{scope.row.refer_content}}                                                                  
+                            </p>
+                            <p style="text-align: left;" v-else>
+                                {{scope.row.refer_doi}}                         
+                            </p>
+                        </template> 
+                    </el-table-column>
+                <el-table-column align="center" width="360">
+                    <div slot-scope="scope">
+                        <el-button v-if="scope.row.refer_doi == ''" style="margin-left:10px;" @click="change(scope.row)"  plain type="warning" size="mini" icon="el-icon-edit" >edit</el-button>
+                        <el-button  v-else style="margin-left:10px;" @click="change(scope.row)"  plain type="primary" size="mini" icon="el-icon-edit">change</el-button>  
+                        <el-tooltip popper-class="tps" class="item" effect="light" content="Add one under this line" placement="top">
+                            <el-button type="primary" size="mini" plain>+</el-button>   
+                        </el-tooltip>
+                        <el-button type="primary" size="mini" plain>↑</el-button>
+                        <el-button type="primary" size="mini" plain>↓</el-button>                                   
+                        <el-button  type="danger" icon="el-icon-delete" size="mini" style="float: right;" plain>delete</el-button>
+                    </div>
+                </el-table-column>
           </el-table>
-            </div>
-            
-        </div>
-    
+            </div>            
+        </div>    
       </div>
       <!-- 修改引用 -->
       <el-dialog title="Add References" :visible.sync="editboxVisible" width="500px">
@@ -165,7 +155,32 @@
               <span slot="footer" class="dialog-footer">
                   <el-button @click="helpVisible = false" type="primary">OK</el-button>                  
               </span>
-          </el-dialog>
+        </el-dialog>
+        <!-- 临时引用信息 -->
+        <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" 
+                    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">
+                        <template slot-scope="scope">
+                            <p style="text-align: left;">
+                                <!-- <el-badge is-dot :hidden="scope.row.author_act==1?false:true" class="item"> -->
+                                    {{scope.row.content}}<br/><el-link type="primary">{{scope.row.doi}}</el-link>
+                                <!-- </el-badge> -->
+                            </p>
+                        </template> 
+                    </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>
+                </div>    
+            </div>
+              <span slot="footer" class="dialog-footer" >
+                  <el-button @click="abandon">Abandon and Reimport</el-button>
+                  <el-button type="primary" @click="importText">Import</el-button>
+              </span>
+      </el-dialog>
     </div>
   </template>
   
@@ -177,30 +192,20 @@
             importIoading: false,
             baseUrl: this.Common.baseUrl,
             // 引用数据列表
-              tableData:[
-                //   {   id:'01',
-                //       status:0,
-                //       title: `Zhang Y, Ren L, Min S, Lv F, Yu J. Effects of N-Methyl-D-aspartate receptor (NMDAR) and Ca2+/calmodulin-dependent protein kinase IIα (CaMKIIα) on learning and memory impairment in depressed rats with different charge by modified electroconvulsive shock. Ann Transl Med 2021;9(16):1320–1320. Availa`},
-                //  {   id:'02',
-                //      status:1,
-                //       title: `Zhang Y, Ren L, Min S, Lv F, Yu J. Effects of N-Methyl-D-aspartate receptor (NMDAR) and Ca2+/calmodulin-dependent protein kinase IIα (CaMKIIα) on learning and memory impairment in depressed rats with different charge by modified electroconvulsive shock. Ann Transl Med 2021;9(16):1320–1320. Availa`},
-                //  {   id:'01',
-                //     status:0,
-                //     title: `Zhang Y, Ren L, Min S, Lv F, Yu J. Effects of N-Methyl-D-aspartate receptor (NMDAR) and Ca2+/calmodulin-dependent protein kinase IIα (CaMKIIα) on learning and memory impairment in depressed rats with different charge by modified electroconvulsive shock. Ann Transl Med 2021;9(16):1320–1320. Availa`},
-                //  {   id:'02',
-                //       status:0,
-                //      title: `Zhang Y, Ren L, Min S, Lv F, Yu J. Effects of N-Methyl-D-aspartate receptor (NMDAR) and Ca2+/calmodulin-dependent protein kinase IIα (CaMKIIα) on learning and memory impairment in depressed rats with different charge by modified electroconvulsive shock. Ann Transl Med 2021;9(16):1320–1320. Availa`
-                // }
-
-              ],              
+              tableData:[              
+              ],    
+            // 临时引用列表
+              Tempredable:[              
+              ],       
               editboxVisible:false,
               helpVisible:false,
               uploadVisible:false,
+              linVisible:false,
               textarea:'',
               textareaVisible:false,
               fileL_manuscirpt: [],
               form: {
-                manuscirpt: '',                
+                referFile: '',                
               },
               // 引用表单
               refenceForm:{
@@ -213,18 +218,59 @@
               }
           }
       },
-      methods:{                 
+      created(){
+         this.getRefData()
+      },
+      methods:{ 
+         // 获取引用文献信息
+         getRefData(){
+            this.$api
+					.post('api/Preaccept/getArticleReferences',{'article_id': this.$route.query.id})
+					.then(res => {
+						console.log(res)
+                        if(res.code == 0 && res.data.refers.length > 0){
+                            this.tableData = res.data.refers
+                        }
+					})
+					.catch(err => {
+						console.log(err);
+			});
+         },
+         // 放弃导入数据
+         abandon(){            
+            this.form.referFile = '';
+			this.fileL_manuscirpt = [];
+            this.linVisible = false;
+            this.Tempredable = []
+         },                
           // 显示帮助信息
           showHelp(){
             this.helpVisible = true
           },
           // 导入文本域
           importText(){
-            this.importIoading = true
-            setTimeout(()=>{
-                this.importIoading = false 
-                this.$message.success('Import successful!')                      
-            },3000)
+            this.importIoading = true               
+                //console.log(this.form.referFile,'referFile')  
+                this.$api
+					.post('api/Preaccept/addRefersByExcel', {
+                       'article_id' :this.$route.query.id,
+                       'referFile' : this.form.referFile
+                    })
+					.then(res => {
+						if (res.code == 0) {
+                            this.$message.success('Import succeeded')
+                            this.linVisible = false
+                            this.Tempredable = []
+							this.importIoading = false                            
+                           // 有可以可用的文献数据，刷新当前页面
+                            // location.reload() // 刷新本页面
+                            this.getRefData()          
+						}
+					})
+					.catch(err => {
+						console.log(err);
+				});
+           
           },
           // 文本域添加
           addText(){
@@ -245,14 +291,13 @@
 
           },
           beforeupload_manuscirpt(file) {
-				let flieArr = file.name.split(".")
-                
-                
+				let flieArr = file.name.split(".")  
 				let fileSuffix = flieArr[flieArr.length - 1];
                 console.log(fileSuffix)
+                console.log(this.upload_manuscirpt,'upload_manuscirpt')
                 // return false
-				if (fileSuffix != 'xls' && fileSuffix != 'xlsx') {
-					this.$message.error('Only excel and compressed files can be uploaded(.xls, .xlsx)');
+				if (fileSuffix != 'xlsx') {
+					this.$message.error('Only excel and compressed files can be uploaded(.xlsx)');
 					return false;
 				}
 				// const ismau =
@@ -268,23 +313,26 @@
             uperr_coverLetter(err) {
 				this.$message.error('Upload error');
 			},
-            upSuccess_manuscirpt(res, file) {
+            upSuccess_manuscirpt(res, file) {  
 				if (res.code == 0) {
-					this.form.manuscirpt = 'manuscirpt/' + res.upurl;
+					this.form.referFile = res.upurl;
 					this.fileL_manuscirpt = [{}];
-					this.fileL_manuscirpt[0].name = "Manuscirpt File";
-					this.fileL_manuscirpt[0].url = 'manuscirpt/' + res.upurl;
-					// this.onStaging(5)
+					this.fileL_manuscirpt[0].name = "referFile";
+					this.fileL_manuscirpt[0].url = res.upurl;
+                    if(res.refers.length > 0){
+                        this.Tempredable = res.refers
+                        this.linVisible = true
+                    }    
 				} else {
 					this.$message.error('service error: ' + res.msg);
 				}
-			},
+			},            
             //超出传送文件个数限制
 			alertlimit() {
 				this.$message.error('The maximum number of uploaded files has been exceeded');
 			},
             removefilemanuscirpt(file, fileList) {
-				this.form.manuscirpt = '';
+				this.form.referFile = '';
 				this.fileL_manuscirpt = [];   
                 this.$message.success('Deletion succeeded!');             
 				// this.$api
@@ -298,7 +346,7 @@
 				// 			this.$message.error(res.msg);
 				// 		}
 				// 	});
-			},
+			},                  
             clearUploadedFile() {
 				this.$refs['uploadFile'].clearFiles();
 			},
@@ -328,18 +376,22 @@
         upload_manuscirpt: function() {
 				// return this.baseUrl + 'api/Article/up_file/type/manuscirpt';
                 return this.baseUrl + 'api/Preaccept/up_refer_file';
-			},
+			},        
       }
   }
   </script>
   
   <style  scoped>
- 
-  .status{border: none;}
+.shuoming{font-size: 14px; line-height: 26px; }
+.shuoming i{color: #F5BF6D;}
+  .status{ display: block; width: 40px; height: 40px; border-radius: 40px; font-size: 22px; line-height: 40px; color: #fff; text-align: center;}
+  .status.ok{background: #67c23a;}
+  .status.warn{background: #e6a23c;}
+  .status.float{display: inline-block;}
   .topInfo{padding: 20px;  }
   .topInfo ul{padding-left: 30px;}
   .topInfo ul li{margin-top: 10px;}
-  .downloadbtn{font-weight: bold;}
+  .downloadbtn{font-weight: bold; color: #409EFF !important;}
   .uploadBox{width: 400px;}
   .el-upload__text{width: 80px; height: 80px; text-align: center; line-height: 80px;}
   .help{font-size: 18px; color: #F5BF6D; cursor: pointer;}
@@ -360,6 +412,7 @@
   .helpcontent{color: #888; margin-top: 150px;}
   .helpcontent p{color: inherit; font-size: 12px;}
   .c666{color: #666;}
+  .c888{color: #888;}
 
   /deep/ .el-table tr:nth-child(2n){
     background: #fff;
diff --git a/src/components/page/articleList.vue b/src/components/page/articleList.vue
index b12ba68..224dcc3 100644
--- a/src/components/page/articleList.vue
+++ b/src/components/page/articleList.vue
@@ -446,7 +446,8 @@
 				this.$router.push({
 					path: 'PreIngested',
 					query: {
-						id: id
+						// id: id
+						id: 3070
 					}
 				});
 			},