接口对接

src/components/page/ReferenceEditor.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-loading.fullscreen.lock="holeLoading">
       <div class="container" v-loading="importIoading" element-loading-text="In the process of importing, please later">             
            <div v-if="tableData.length == 0">  
           <!-- 没有引用时 -->
@@ -113,15 +113,15 @@
                             </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>
-                                <a class="doiLink" :href="scope.row.doilink" target="_blank">{{scope.row.doilink}}</a>                         
+                                <a class="doiLink" :href="'http://doi.org/' + scope.row.refer_doi" target="_blank">http://doi.org/{{scope.row.refer_doi}}</a>                         
                             </div>
                         </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">edit</el-button>  
+                        <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)" type="success" size="mini" plain>Add</el-button>   
+                            <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 == tableData.length-1 ? true : false" @click="changeOrder(scope.row,'down')">↓</el-button>                                                         
@@ -133,22 +133,24 @@
         </div>    
       </div>
       <!-- 修改引用 -->
-      <el-dialog title="Add References" :visible.sync="editboxVisible" width="500px">
+      <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">
-                    <el-form-item label="Show Content" label-width="120px">                        
+                    <!-- 内容开关 -->
+                    <!-- <el-form-item label="Show Content" label-width="120px">                        
                         <el-switch v-model="contentVisible"></el-switch>
-                    </el-form-item>
+                    </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-item label="Content:" required prop="refer_content" v-else>
                         <el-input rows="5" v-model="refenceForm.refer_content" type="textarea"></el-input>
-                    </el-form-item> 
+                    </el-form-item>  -->
                 </el-form>            
               <span slot="footer" class="dialog-footer">
-                  <el-button @click="editboxVisible = false">Cancel</el-button>
+                  <el-button @click="cancelSave">Cancel</el-button>
-                  <el-button type="primary" @click="saveChange">Save</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>
         <!-- 帮助信息 -->
@@ -196,8 +198,10 @@
       data(){
           return{
             user_name: localStorage.getItem('U_relname'), 
+            holeLoading : false,  // 进入页面的loading           
             importIoading: false,
             baseUrl: this.Common.baseUrl,
+            addLoading:false,
             contentVisible:false,
             // 引用数据列表
               tableData:[              
@@ -218,19 +222,27 @@
               // 引用表单
               refenceForm:{
                 refer_content:'',
-                refer_doi:''
+                refer_doi:'',
+                p_refer_id:null, // 当前行一行的引用序号
               },
               refenceFormrules:{
                 title:[
                 { required: true, message: 'The title cannot be empty', trigger: 'blur' },
                 ]
-              }
+              },
+              dialogTitle:''
           }
       },
       created(){
+        this.openFullScreen1()
          this.getRefData()
+         this.holeLoading = true
       },
       methods:{ 
+        // 全页面加载动画
+            openFullScreen1() {
+            this.holeLoading = true;            
+        },
          // 获取引用文献信息
          getRefData(){
             this.$api
@@ -240,6 +252,7 @@
                         if(res.code == 0 && res.data.refers.length > 0){
                             this.tableData = res.data.refers                            
                         }
+                        this.holeLoading = false
 					})
 					.catch(err => {
 						console.log(err);
@@ -291,13 +304,80 @@
             this.uploadVisible = true
           },
           // 显示修改引用
-          change(row){
+          change(row, optitle){   
+            this.dialogTitle = optitle     
             this.editboxVisible = true
-            this.refenceForm = row
+            this.refenceForm.refer_doi = row.refer_doi
+            this.refenceForm.p_refer_id = row.p_refer_id
           },
-          // 保存修改
-          saveChange(){
 
+          // 取消保存
+          cancelSave(){
+            this.editboxVisible = false
+           // refenceForm
+            this.$refs['refenceForm'].resetFields(); 
+            this.dialogTitle = ''           
+          }, 
+
+          // 编辑引用
+          saveChange(){
+              this.$refs.refenceForm.validate((valid) => {
+                this.addLoading = true
+                if(valid){
+                     this.$api
+					.post('api/Preaccept/editRefer', {
+						// 'article_id': this.$route.query.id,
+                        'p_refer_id': this.refenceForm.p_refer_id,
+                        'doi': this.refenceForm.refer_doi
+					})
+					.then(res => {
+						if (res.code == 0) {
+                            this.addLoading = false
+							this.$message.success('successed！')                                                       
+                            this.getRefData()
+                            this.cancelSave() 
+						} else {
+							this.$message.error(res.msg);
+						}
+					})
+					.catch(err => {
+						this.$message.error(err);
+					});
+                }else{
+
+                } 
+              }) 
+          },
+
+          // 保存新增
+          saveAdd(){
+            this.$refs.refenceForm.validate((valid) => {
+                this.addLoading = true
+                if(valid){
+                    this.$api
+					.post('api/Preaccept/addRefer', {
+						'article_id': this.$route.query.id,
+                        'pre_p_refer_id': this.refenceForm.p_refer_id,
+                        'doi': this.refenceForm.refer_doi
+					})
+					.then(res => {
+						if (res.code == 0) {
+                            this.addLoading = false
+							this.$message.success('successed！')                                                       
+                            this.getRefData()
+                            this.cancelSave() 
+						} else {
+							this.$message.error(res.msg);
+						}
+					})
+					.catch(err => {
+						this.$message.error(err);
+					});
+                }else{
+                    this.$message.error('error submit!!');
+                    return false;
+                }
+                })
           },
           beforeupload_manuscirpt(file) {
 				let flieArr = file.name.split(".")  
@@ -381,9 +461,15 @@
 					});
             },
             // 添加一行
-            addLine(row){
+            addLine(row, optitle){
+                //console.log(row)  
+                this.dialogTitle = optitle             
+                // this.$refs['refenceForm'].clearValidate()
                 this.editboxVisible = true                
-                this.refenceForm = {}
+                this.refenceForm.p_refer_id = row.p_refer_id
+                this.$nextTick(()=>{
+                    this.$refs['refenceForm'].clearValidate(['refer_doi']);
+                })
             },
 
             // 删除一行
@@ -393,11 +479,27 @@
                 cancelButtonText: 'Cancel',
                 type: 'warning'
                 }).then(() => {
-                this.$message({
+                    this.$api
-                    type: 'success',
+					.post('api/Preaccept/delRefer', {						
-                    message: 'remove successed!'
+                        'p_refer_id': row.p_refer_id                        
-                });
 					})
+					.then(res => {
+						if (res.code == 0) {
+							this.$message.success('remove successed!')         
+                            this.getRefData()
+						} else {
+							this.$message.error(res.msg);
+						}
+					})
+					.catch(err => {
+						this.$message.error(err);
+					});                    
+                }).catch(() => {
+                    // this.$message({
+                    //     type: 'info',
+                    //     message: '已取消删除'
+                    // });          
+                    }); 
             },
 
             // 调整顺序
@@ -409,11 +511,27 @@
                 cancelButtonText: 'Cancel',
                 type: 'warning'
                 }).then(() => {
-                this.$message({
+                    this.$api
-                    type: 'success',
+					.post('api/Preaccept/sortRefer', {						
-                    message: 'remove successed!'
+                        'p_refer_id': row.p_refer_id,
-                });
+                        'act': opName                     
 					})
+					.then(res => {
+						if (res.code == 0) {
+							this.$message.success('successed!')         
+                            this.getRefData()
+						} else {
+							this.$message.error(res.msg);
+						}
+					})
+					.catch(err => {
+						this.$message.error(err);
+					}); 
+                // this.$message({
+                //     type: 'success',
+                //     message: 'remove successed!'
+                // });
+                }).catch(()=>{});
             }
       },
       computed: {

src/components/page/articleList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div >		
 		<div class="crumbs">
 			<el-breadcrumb separator="/">
 				<el-breadcrumb-item>
@@ -92,12 +92,12 @@
 						<span @click="esy_deta(item.article_id)">
 							<i class="el-icon-paperclip"></i>My Manuscript
 						</span>
-						<span v-if="item.state == 3" >
+						<span v-if="item.state == 3" style="text-decoration: none;">
 							<font> | </font>
 							<span @click="goPre_ingested(item.article_id)" class="preButton">
-								<el-badge is-dot class="item" >
+								<!-- <el-badge is-dot class="item" > -->
 									<i class="el-icon-paperclip"></i>Complete the profile
-								</el-badge>
+								 <!-- </el-badge>  -->
 							</span>
 						</span>
 					</div>
@@ -737,7 +737,9 @@
 </script>
 
 <style scoped>
-.preButton{color: #66b1ff;}
+.preButton{color: #66b1ff;   display: inline-block; position: relative; }
+.preButton:after{content: ''; display: block; width: 6px; height: 6px; background: #ff0000; position: absolute; right: 0; top: -5px; border-radius: 6px;}
+.preButton:hover{text-decoration:underline !important;}
 	.container {
 		color: #333;
 	}