From 1f7e3c484b0fc7daf752206fbc4f0501a5a6d1c1 Mon Sep 17 00:00:00 2001
From: "@fawn-nine" <1271023382@qq.com>
Date: Fri, 7 Jul 2023 12:22:08 +0800
Subject: [PATCH] =?UTF-8?q?12=EF=BC=9A22?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page/ReferenceEditor.vue   |   7 +-
 src/components/page/editPublicRefRdit.vue | 543 +++++++++++++++++++++-
 2 files changed, 539 insertions(+), 11 deletions(-)

diff --git a/src/components/page/ReferenceEditor.vue b/src/components/page/ReferenceEditor.vue
index a8fc4d4..1cb9708 100644
--- a/src/components/page/ReferenceEditor.vue
+++ b/src/components/page/ReferenceEditor.vue
@@ -501,10 +501,6 @@
            // refenceForm
            this.$refs['refenceForm'].clearValidate();            
            this.$refs['refenceForm'].resetFields(); 
-            
-        //    this.$refs['refenceLinkForm'].clearValidate();            
-        //    this.$refs['refenceLinkForm'].resetFields(); 
-
             this.refenceForm.doi = ''
             this.dialogTitle = ''           
           }, 
@@ -693,8 +689,7 @@
                 
              }else{
                 return false
-             }
-            
+             }            
             
             
           },
diff --git a/src/components/page/editPublicRefRdit.vue b/src/components/page/editPublicRefRdit.vue
index 49ef9fc..a9992e3 100644
--- a/src/components/page/editPublicRefRdit.vue
+++ b/src/components/page/editPublicRefRdit.vue
@@ -61,7 +61,7 @@
 								<br clear="both">
 							</div>
 
-							<div v-for="(item,index) in this.chanFerForm" v-if="showB_step ==2" class="ref_list">
+							<!-- <div v-for="(item,index) in this.chanFerForm" v-if="showB_step ==2" class="ref_list">
 								<div>
 									<span
 										style="float:left;margin: 3px 10px 0 0;width: 80px;text-align: right;font-size: 14px;">DOI
@@ -106,7 +106,52 @@
 								<i class="el-icon-top" @click="ChanFerMashUp(item)"
 									v-if="index!=0&&item.edit_mark==1&&item.cs!=0"
 									style="right: 40px;font-size: 10px;">up</i>
-							</div>
+							</div> -->
+							<!-- 新的 -->
+							<el-table :data="chanFerForm"  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="state"  width="55" align="center">
+											<template slot-scope="scope">                           
+												<span  class="status ok"   v-if="scope.row.refer_doi != '' && scope.row.author != ''" >
+													<i class="el-icon-circle-check"></i>
+												</span>
+												<span  class="status warn"  v-else >
+													<i class="el-icon-warning-outline"></i>
+												</span>                            
+											</template>
+										</el-table-column>			
+										<el-table-column  label="Title" align="left">
+											<template slot-scope="scope">
+												<!-- journal 形式 -->
+												<div style="text-align: left;" v-if="scope.row.refer_type == 'journal'">
+													<p>{{scope.row.author}},{{scope.row.title}}, <em>{{scope.row.joura}}</em> ,{{scope.row.dateno}}<br/></p>
+													<a class="doiLink" :href="scope.row.doilink" target="_blank">{{scope.row.doilink}}</a>                         
+												</div>
+												<!-- book 形式 -->
+												<div style="text-align: left;" v-if="scope.row.refer_type == 'book'">
+													<p>{{scope.row.author}},{{scope.row.title}},{{scope.row.dateno}}<br/></p>
+													<a class="doiLink" :href="scope.row.isbn" target="_blank">{{scope.row.isbn}}</a>                         
+												</div>
+												<!-- other 形式 -->
+												<p  class="wrongLine" style="text-align: left;" v-if="scope.row.refer_type == 'other'">
+													{{scope.row.refer_frag}}                                                                  
+												</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,'Edit')"  plain type="primary" size="mini" icon="el-icon-edit">edit</el-button>  
+											<el-tooltip popper-class="tps" class="item" effect="light" content="Add one under this line" placement="top">
+												<el-button @click="addLine(scope.row, 'Add')" type="success" size="mini" plain>Add</el-button>   
+											</el-tooltip>                        
+											<el-button type="warning" size="mini" plain :disabled="scope.$index != 0 ? false : true" @click="changeOrder(scope.row,'up')">↑</el-button>
+											<el-button type="warning" size="mini" plain :disabled="scope.$index == chanFerForm.length-1 ? true : false" @click="changeOrder(scope.row,'down')">↓</el-button>                                                         
+											<el-button  type="danger" icon="el-icon-delete" size="mini" style="float: right;" plain @click="deleteLine(scope.row)">delete</el-button>
+										</div>
+									</el-table-column>
+							</el-table>
+							<!-- end -->
 						</div>
 						<br clear="both">
 						<!-- <p v-if="this.chanFerForm==''" style="text-align: center;color: #999;margin-top: 50px;">No references</p> -->
@@ -121,20 +166,171 @@
 								</p>
 							</div>
 						</div>
-					</div>
+
+						<!-- 编辑引用 -->
+						<el-dialog v-loading="addLoading"  :title= "dialogTitle + ' References'" :visible.sync="editboxVisible" width="800px" @close="cancelSave">
+								<p class="yinyongPre c888">Now you are starting to add or modify this reference. If this reference has a DOI, you can directly copy it into the DOI input box and submit it. If this reference doesn’t have the DOI, please turn on the No DOI button, and write all details of this reference according to the hints.</p>
+											
+								<el-form  :model="refenceForm" :rules="refenceFormrules" ref="refenceForm" label-width="150px" class="editForm mt10">
+									<!-- 内容开关 -->          
+									<el-form-item label="Source:" >  
+										<el-select v-model="SourceType" placeholder="please pick">
+											<el-option
+											v-for="item in sourceOptions"
+											:key="item.value"
+											:label="item.label"
+											:value="item.value">
+											</el-option>
+										</el-select>
+									</el-form-item>
+									<!-- Journal -->
+									<div v-show="SourceType == 'journal' || SourceType == 'doi'" >        
+										<el-form-item label="Doi:" required  prop="doi" >
+											<el-input  v-model="refenceForm.doi" >
+												<el-button  @click="gotoFormate" slot="append" >Formate</el-button>
+											</el-input>
+										</el-form-item>                         
+									</div> 
+									<el-form-item  >
+										<div class="line"></div>
+									</el-form-item>
+									<!-- 中间部分 -->
+									<div v-show="SourceType !='other'">
+										<el-form-item label="Author(s):" required  prop="author" >
+											<el-input  v-model="refenceForm.author" ></el-input>
+											<p class="zhushi">Six or less authors are required to list all authors while more than six authors are required to list three of them with “et al”</p>
+										</el-form-item>
+										<el-form-item label="Title:" required  prop="title" >
+											<el-input  v-model="refenceForm.title" placeholder="eg: Tradit Med Res"></el-input>
+											<p class="zhushi">Abbreviated Journal Title</p>
+										</el-form-item>                        
+										<el-form-item label="Publication Details:" required  prop="dateno" >
+											<el-input  v-model="refenceForm.dateno" placeholder="eg: 2023;8(9):49-62"></el-input>
+											<p class="zhushi">Year;Volume(issue):Inclusive page numbers.</p>
+										</el-form-item>                        
+									</div>
+									<div v-show="SourceType == 'journal'">
+										<el-form-item label="Joura:" required  prop="joura" >
+											<el-input  v-model="refenceForm.joura" placeholder=""></el-input>                            
+										</el-form-item>
+										<el-form-item label="DOI/URL:" required  prop="doilink" >
+											<el-input  v-model="refenceForm.doilink" placeholder="eg:https://doi.org/10.1002/cncr.30667"></el-input>
+										</el-form-item>
+									</div>
+									<!-- Book -->
+									<div v-show="SourceType =='book'">                       
+										<el-form-item label="ISBN:" required  prop="isbn" >
+											<el-input  v-model="refenceForm.isbn" ></el-input>
+										</el-form-item>
+									</div>
+									<!-- others -->
+									<div v-show="SourceType =='other'">
+										<el-form-item label="Content:" required  prop="content" >
+											<el-input type="textarea" rows="5"  v-model="refenceForm.content" placeholder="please refer to the AMA manual of style (10th ed.)"></el-input>
+										</el-form-item>
+									</div>
+								</el-form> 
+								<!-- <el-form  :model="refenceLinkForm" :rules="refenceLinkFormrules" ref="refenceLinkForm" label-width="80px" class="editForm mt10">                     
+									<el-form-item label="Author(s):" required prop="author" >
+										<el-input  v-model="refenceLinkForm.author" placeholder=""></el-input>
+									</el-form-item> 
+									<span>Six or less authors are required to list all authors while more than six authors are required to list three of them with “et al”</span>
+									<el-form-item label="title:" required prop="title" >
+										<el-input  v-model="refenceLinkForm.title" placeholder="eg: Tradit Med Res"></el-input>
+									</el-form-item> 
+									<el-form-item label="Source:" required prop="joura" >
+										<el-input  v-model="refenceLinkForm.joura" placeholder="eg:Healthcare (Basel)."></el-input>
+									</el-form-item>
+									<el-form-item label="Publication Details:" required prop="dateno" >
+										<el-input  v-model="refenceLinkForm.dateno" placeholder="eg: 2023;8(9):49-62"></el-input>
+									</el-form-item>
+									<span>Year;Volume(issue):Inclusive page numbers.</span>
+									<el-form-item label="doilink:" required prop="doilink" >
+										<el-input  v-model="refenceLinkForm.doilink" placeholder="eg:https://doi.org/10.1002/cncr.30667"></el-input>
+									</el-form-item>
+								</el-form>             -->
+							<span slot="footer" class="dialog-footer">
+								<el-button @click="cancelSave">Cancel</el-button>
+								<el-button type="primary" @click="saveChange" v-if="dialogTitle == 'Edit'">Save</el-button>
+								<el-button type="primary" @click="saveAdd" v-else>Save</el-button>
+							</span>
+					</el-dialog>
+					</div>					
+					
 </template>
 
 <script>
 export default {
     data(){
         return{
+			dialogTitle:'',
             showB_step: 1,
             baseUrl: this.Common.baseUrl,
 			mediaUrl: this.Common.mediaUrl,
             placeRef: 'eg:\n[1]Kagabu M, Nagasawa T, Fukagawa D, et al. Immunotherapy for Uterine Cervical Cancer. Healthcare (Basel). 2019 Sep 17;7(3):108. PMID: 31533297; PMCID: PMC6787701.\nhttps://doi.org/10.3390/healthcare7030108\n\n[2]Small W Jr, Bacon MA, Bajaj A, et al. Cervical cancer: A global health crisis. Cancer. 2017 Jul 1;123(13):2404-2412. Epub 2017 May 2. PMID: 28464289.\nhttps://doi.org/10.1002/cncr.30667\n\n[3]Cohen PA, Jhingran A, Oaknin A, et al. Cervical cancer. Lancet. 2019 Jan 12;393(10167):169-182. PMID: 30638582.\nhttps://doi.org/10.1016/S0140-6736(18)32470-X',
             refAarray: '',
             refProcess: 0,
-        }
+			SourceType:'journal',
+			sourceOptions:[
+            {
+                value: 'journal',
+                label: 'journal'
+            },
+            {
+                value: 'book',
+                label: 'book'
+            },
+            {
+                value: 'other',
+                label: 'other'
+            },
+            ],
+			// 引用表单
+			refenceForm:{                
+                doi:'',                
+                article_id:null, 
+                p_refer_id:null, // 当前行一行的引用序号
+                pre_p_refer_id:null,  // 上一行
+                refer_type:'',  // 类型
+                joura:'',
+                author:'',
+                doilink:'',
+                dateno:'',
+                isbn:'',
+                content:'',
+                title:''
+                
+              },
+			  refenceFormrules:{
+                doi:[
+                { required: true, message: 'The Doi cannot be empty', trigger: 'blur' },
+                ],
+                joura:[
+                { required: true, message: 'The Joura cannot be empty', trigger: 'blur' },
+                ],
+                author:[
+                { required: true, message: 'The Author(s) cannot be empty', trigger: 'blur' },
+                ],
+                title:[
+                { required: true, message: 'The title cannot be empty', trigger: 'blur' },
+                ],
+                doilink:[
+                { required: true, message: 'The doi/url cannot be empty', trigger: 'blur' },
+                ],
+                dateno:[
+                { required: true, message: 'The Publication Details cannot be empty', trigger: 'blur' },
+                ],
+                isbn:[
+                { required: true, message: 'The ISBN cannot be empty', trigger: 'blur' },
+                ],
+                content:[
+                { required: true, message: 'The Content cannot be empty', trigger: 'blur' },
+                ],
+              },
+			  addLoading:false,
+			  editboxVisible:false,              
+		    
+			}
     },
     props:{
         p_article_id:{
@@ -288,11 +484,348 @@ export default {
 				//console.log(e,'5555')
 				this.$emit('ChanFerMashUp',e)
 			},
-    }
+			// 显示修改引用
+			change(row, optitle){   
+            this.dialogTitle = optitle     
+            this.editboxVisible = true
+            // console.log(this.refenceForm.content,55555)
+            this.$nextTick(() => {               
+                    console.log(row,'row')
+                    this.refenceForm.doi = row.refer_doi
+                    this.refenceForm.p_refer_id = row.p_refer_id    
+                    this.SourceType = row.refer_type                    
+                    this.refenceForm.author = row.author
+                    this.refenceForm.title = row.title
+                    this.refenceForm.joura = row.joura
+                    this.refenceForm.dateno = row.dateno
+                    this.refenceForm.doilink = row.doilink 
+                    this.refenceForm.content = row.refer_frag
+                    this.refenceForm.joura = row.joura 
+                    this.refenceForm.isbn =  row.isbn              
+             })
+
+          },
+		  // 编辑引用
+          saveChange(){   
+                
+				var journalValid = false
+				var bookValid = false
+				var otherValid = false
+				if(this.SourceType == 'journal') {
+					// Journal形式
+					var doi = ''
+					var author = ''
+					var title = ''
+					var dateno = ''
+					var joura = ''
+					var doilink = ''
+					this.$refs['refenceForm'].validateField('doi',(callback)=>{ 
+						doi = callback
+					}) 
+					this.$refs['refenceForm'].validateField('author',(callback)=>{ 
+						author = callback
+					}) 
+					this.$refs['refenceForm'].validateField('title',(callback)=>{ 
+						title = callback
+					}) 
+					this.$refs['refenceForm'].validateField('dateno',(callback)=>{ 
+						dateno = callback
+					})
+					this.$refs['refenceForm'].validateField('joura',(callback)=>{ 
+						joura = callback
+					})
+					this.$refs['refenceForm'].validateField('doilink',(callback)=>{ 
+						doilink = callback
+					})
+					doi == '' && author == '' && title == '' && dateno == '' && joura == '' && doilink == '' ? journalValid = true :''
+				 }else if(this.SourceType == 'book'){
+					// book 形式
+					var author = ''
+					var title = ''
+					var dateno = ''
+					var isbn = ''
+					this.$refs['refenceForm'].validateField('author',(callback)=>{ 
+						author = callback
+					}) 
+					this.$refs['refenceForm'].validateField('title',(callback)=>{ 
+						title = callback
+					}) 
+					this.$refs['refenceForm'].validateField('dateno',(callback)=>{ 
+						dateno = callback
+					})
+					this.$refs['refenceForm'].validateField('isbn',(callback)=>{ 
+						isbn = callback
+					})
+					author == '' && title == '' && dateno == '' && isbn == '' ? bookValid = true : ''
+				 }else if(this.SourceType == 'other'){
+					// others 形式
+					var content = ''
+					this.$refs['refenceForm'].validateField('content',(callback)=>{ 
+						content = callback
+					}) 
+					content == '' ? otherValid = true : ''
+				 }
+				// console.log(otherValid,99)
+				 
+				 if(journalValid || bookValid || otherValid){    // 有任意一个模式符合验证规则就提交 
+					this.editRefSave()
+				 }
+			  },
+			  //  提交引用修改          
+			  editRefSave(){            
+                this.refenceForm.refer_type = this.SourceType
+                this.addLoading = true
+                   console.log(this.refenceForm) 
+                                   
+                     this.$api
+					.post('api/Preaccept/editRefer', this.refenceForm)
+					.then(res => {
+						if (res.code == 0) {
+                            this.addLoading = false
+							this.$message.success('successed！')                                                       
+                            //this.getRefData()
+							this.changeRefer()
+                            this.cancelSave() 
+						}else if(res.code == 1){
+                            this.addLoading = false
+							this.$message.error(res.msg)     
+                        } else {
+							this.$message.error(res.msg);
+						}
+					})
+					.catch(err => {
+						this.$message.error(err);
+					});                
+             
+          },
+		   // 保存新增
+		   saveAdd(){ 
+            var journalValid = false
+            var bookValid = false
+            var otherValid = false
+            if(this.SourceType == 'journal') {
+                // Journal形式
+                var doi = ''
+                var author = ''
+                var title = ''
+                var dateno = ''
+                var joura = ''
+                var doilink = ''
+                this.$refs['refenceForm'].validateField('doi',(callback)=>{ 
+                    doi = callback
+                }) 
+                this.$refs['refenceForm'].validateField('author',(callback)=>{ 
+                    author = callback
+                }) 
+                this.$refs['refenceForm'].validateField('title',(callback)=>{ 
+                    title = callback
+                }) 
+                this.$refs['refenceForm'].validateField('dateno',(callback)=>{ 
+                    dateno = callback
+                })
+                this.$refs['refenceForm'].validateField('joura',(callback)=>{ 
+                    joura = callback
+                })
+                this.$refs['refenceForm'].validateField('doilink',(callback)=>{ 
+                    doilink = callback
+                })
+                doi == '' && author == '' && title == '' && dateno == '' && joura == '' && doilink == '' ? journalValid = true :''
+             }else if(this.SourceType == 'book'){
+                // book 形式
+                var author = ''
+                var title = ''
+                var dateno = ''
+                var isbn = ''
+                this.$refs['refenceForm'].validateField('author',(callback)=>{ 
+                    author = callback
+                }) 
+                this.$refs['refenceForm'].validateField('title',(callback)=>{ 
+                    title = callback
+                }) 
+                this.$refs['refenceForm'].validateField('dateno',(callback)=>{ 
+                    dateno = callback
+                })
+                this.$refs['refenceForm'].validateField('isbn',(callback)=>{ 
+                    isbn = callback
+                })
+                author == '' && title == '' && dateno == '' && isbn == '' ? bookValid = true : ''
+             }else if(this.SourceType == 'other'){
+                // others 形式
+                var content = ''
+                this.$refs['refenceForm'].validateField('content',(callback)=>{ 
+                    content = callback
+                }) 
+                content == '' ? otherValid = true : ''
+             }
+            // console.log(otherValid,99)
+             
+             if(journalValid || bookValid || otherValid){    // 有任意一个模式符合验证规则就提交                       
+                      
+                    this.refenceForm.refer_type = this.SourceType  
+                    // console.log(this.refenceForm,99)                                
+                    this.addLoading = true
+                    this.$api
+					.post('api/Preaccept/addRefer', this.refenceForm)
+					.then(res => {
+						if (res.code == 0) {
+                            this.addLoading = false
+							this.$message.success('successed！')                                                       
+                            //this.getRefData()
+							this.changeRefer()
+                            this.cancelSave() 
+						}else if(res.code == 1){
+                            // doi 错误
+                            this.addLoading = false
+							this.$message.error(res.msg)                                                       
+                          //  this.getRefData()
+                           // this.cancelSave() 
+                        } else {
+							this.$message.error(res.msg);
+						}
+					})
+					.catch(err => {
+						this.$message.error(err);
+					});
+                
+             }else{
+                return false
+             }            
+            
+            
+          },
+		  cancelSave(){           
+            this.editboxVisible = false
+           // refenceForm
+           this.$refs['refenceForm'].clearValidate();            
+           this.$refs['refenceForm'].resetFields(); 
+            this.refenceForm.doi = ''
+            this.dialogTitle = ''           
+          }, 
+		   // 格式化
+		   gotoFormate(){
+            this.$refs['refenceForm'].validateField('doi', (callback)=>{              
+            if(callback == ''){
+                this.$api
+                .post('/api/Preaccept/searchDoi',{'doi': this.refenceForm.doi})
+					.then(res => {
+						console.log(res)
+                        if(res.code == 0 ){
+                            //this.tableData = res.data.refers                            
+                        }else{
+                            this.$message.error(res.msg)
+                        }
+
+                        this.holeLoading = false
+					}).catch(()=>{})
+                }else{
+                    console.log('不合格')
+                 }
+            })
+        },
+		  // 添加一行
+		  addLine(row, optitle){
+               // console.log(row)  
+                this.dialogTitle = optitle             
+                // this.$refs['refenceForm'].clearValidate()
+                this.editboxVisible = true                
+                this.refenceForm.pre_p_refer_id = row.p_refer_id
+                this.refenceForm.article_id = this.$route.query.id
+
+                // this.refenceLinkForm.pre_p_refer_id = row.p_refer_id
+                 //this.refenceLinkForm.article_id = this.$route.query.id
+               
+                this.$nextTick(()=>{
+                    this.$refs['refenceForm'].clearValidate(['doi']);
+                })
+            },
+
+            // 删除一行
+            deleteLine(row){
+                this.$confirm('Are you sure you want to remove this reference?', 'Tips', {
+                confirmButtonText: 'Sure',
+                cancelButtonText: 'Cancel',
+                type: 'warning'
+                }).then(() => {
+                    this.$api
+					.post('api/Preaccept/delRefer', {						
+                        'p_refer_id': row.p_refer_id                        
+					})
+					.then(res => {
+						if (res.code == 0) {
+							this.$message.success('remove successed!')  
+							this.changeRefer()       
+                            // this.getRefData()
+						} else {
+							this.$message.error(res.msg);
+						}
+					})
+					.catch(err => {
+						this.$message.error(err);
+					});                    
+                }).catch(() => {
+                    // this.$message({
+                    //     type: 'info',
+                    //     message: '已取消删除'
+                    // });          
+                    }); 
+            },
+
+            // 调整顺序
+            changeOrder(row, opName){
+                let optitle = ''
+                opName == 'up' ? optitle = 'Move up this line?' : optitle = 'Move down this line?'
+                this.$confirm(optitle, 'Tips', {
+                confirmButtonText: 'Sure',
+                cancelButtonText: 'Cancel',
+                type: 'warning'
+                }).then(() => {
+                    this.$api
+					.post('api/Preaccept/sortRefer', {						
+                        'p_refer_id': row.p_refer_id,
+                        'act': opName                     
+					})
+					.then(res => {
+						if (res.code == 0) {
+							this.$message.success('successed!')
+							this.changeRefer()         
+                            // this.getRefData()
+						} else {
+							this.$message.error(res.msg);
+						}
+					})
+					.catch(err => {
+						this.$message.error(err);
+					}); 
+                // this.$message({
+                //     type: 'success',
+                //     message: 'remove successed!'
+                // });
+                }).catch(()=>{});
+            }
+    },
+	watch: {
+        SourceType : {
+        handler(newVal, oldVal) {  
+            this.$nextTick(()=>{ 
+               // console.log('清空验证信息')                 
+              //  this.$refs['refenceLinkForm'].clearValidate()                
+                this.$refs['refenceForm'].clearValidate()    
+               // this.$refs['refenceForm'].resetFields()     // 表单重置                           
+            })           
+        },
+       // immediate: true,
+        deep: true // 可以深度检测到 person 对象的属性值的变化
+        }
+        }
 }
 </script>
 
 <style scoped>
+ .status{ display: block; width: 40px; height: 40px; border-radius: 40px; font-size: 22px; line-height: 40px; color: #fff; text-align: center;}
+  .status.ok{background: #a7e389;}
+  .status.warn{background: #ffd192;}
+  .status.float{display: inline-block;}
+  .doiLink{color: #409EFF;}
 	.talkDialog{height: 500px; overflow-y: scroll;}
 
 	.contactAuthor{