tijiao

src/components/page/ReferenceEditor.vue

@@ -142,6 +142,7 @@
                     </ul>
                 </div>
                 <div class="refenceCentent mt20">
+                    <span @click="deleteSomeRefs">删除</span>
                     <el-table
                         :data="tableData"
                         ref="multipleTable"
@@ -388,41 +389,16 @@
             </span>
         </el-dialog>
         <!-- 临时引用信息 -->
-        <el-dialog title="Reference List" :visible.sync="linVisible" width="1200px" :close-on-click-modal="false">
+        <el-dialog title="Reference List" :visible.sync="linVisible" width="1200px" :close-on-click-modal="false" class="reference-dialog">
-            <div class="refenceCentent mt20" v-if="Tempredable.length > 0">
+            <div class="newpro">
-                <el-table
+      <el-progress
-                    :data="Tempredable"
+        v-if="isUpload"
-                    ref="tempredableTable"
+        :stroke-width="15"
-                    max-height="400px"
+        :percentage="progressPercent"
-                    empty-text="New messages (0)"
+        style="width: 100%"
-                    :show-header="false"
+      ></el-progress>
-                    :stripe="false"
+    </div>
-                    :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 upload again.
-                    </p>
-                </div>
-            </div>
-            <span slot="footer" class="dialog-footer">
-                <el-button @click="abandon">Abandon and Reimport</el-button>
-                <el-button type="primary" @click="handleparse">Import</el-button>
-            </span>
-        </el-dialog>
-        <el-dialog title="References" :visible.sync="parseVisible" width="1200px" :close-on-click-modal="false">
             <div class="refenceCentent mt20" v-if="Tempredable.length > 0">
                 <el-table
                     :data="Tempredable"
@@ -436,30 +412,42 @@
                     <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">
+                            <p style="text-align: left;line-height: 18px;">
                                 <!-- <el-badge is-dot :hidden="scope.row.author_act==1?false:true" class="item"> -->
-                                {{ scope.row.content }}&nbsp;&nbsp;<el-link type="primary">{{ scope.row.doi }}</el-link>
+                                {{ scope.row.content }}<br/><el-link type="primary">{{ scope.row.doi }}</el-link>
                                 <!-- </el-badge> -->
                             </p>
                         </template>
                     </el-table-column>
-                    <el-table-column label="Status" align="left" width="55">
+                    <el-table-column label="Status" align="center" width="55" v-if="parseVisible">
                         <template slot-scope="scope">
                            
+                           <i class="el-icon-loading" style="font-size: 24px;color: #606266;"></i><i class="el-icon-success" style="font-size: 24px;color: #2ac95c;"></i>
                         </template>
                     </el-table-column>
                 </el-table>
-                <div class="shuoming mt20">
+                <div class="shuoming mt20" >
                     <p class="c888">
-                        <i class="el-icon-message-solid"></i>&nbsp;&nbsp;We are currently identifying the citation data you uploaded. Please be patient.
+                        <i class="el-icon-message-solid"></i>&nbsp;&nbsp;<span v-if="!parseVisible" >The above is the citation data identified according to your
+                        uploaded file, you can choose to import, or discard this data and upload again.</span>
+                        <span v-if="parseVisible">We are currently identifying the citation data you uploaded. Please be patient.</span>
+                    
+                       
                     </p>
                 </div>
             </div>
-            <!-- <span slot="footer" class="dialog-footer">
+            <span slot="footer" class="dialog-footer">
-                <el-button @click="abandon">Abandon and Reimport</el-button>
+                <div v-if="!parseVisible">
+                     <el-button @click="abandon">Abandon and Reimport</el-button>
                 <el-button type="primary" @click="handleparse">Import</el-button>
-            </span> -->
+                </div>
+                <div v-if="parseVisible">
+                    <el-button  @click="parseVisible=false;linVisible=false;">Cancel</el-button>
+                </div>
+               
+            </span>
         </el-dialog>
+      
     </div>
 </template>
 
@@ -467,6 +455,10 @@
 export default {
     data() {
         return {
+            uploadTimer: null,//调取进度条的轮询定时器
+      isUpload: false,//文件是否上传中
+      progressPercent: 0,//进度条当前进度
+      curPercentage: 0,
             user_name: localStorage.getItem('U_relname'),
             holeLoading: false, // 进入页面的loading
             importIoading: false,
@@ -563,7 +555,55 @@ export default {
         this.getRefData();
         this.holeLoading = true;
     },
+    beforeDestroy() {
+        clearInterval(this.uploadTimer);
+    },
     methods: {
+        async getProgress() {
+      var that = this;
+   
+      var progress = 0;
+   
+    //   await axios
+    //     .get('获取进度条接口地址')
+    //     .then(async (res) => {
+         //percent是后端返回的进度
+          progress = Number(this.progressPercent+1);
+          if (progress == this.Tempredable.length) {
+     
+            this.isUpload = false;
+            clearInterval(this.uploadTimer);
+            that.uploadTimer = null;
+
+        
+            this.$forceUpdate();
+          }
+        // });
+    
+      return progress;
+    },
+
+         // 删除部分引用
+         deleteSomeRefs() {
+            var ids = [];
+            ids = this.tableData.map((item) => {
+            	
+                return item.p_refer_id;
+            });
+            console.log('ids at line 570:', ids)
+            
+            this.$api
+                        .post('api/Preaccept/delRefers', {
+                            ids: ids
+                        })
+                        .then((res) => {
+                            
+                           
+                        })
+                        .catch((err) => {
+                           
+                        });
+        },
         tableRowStyle({ row }) {
             if (row.is_repeat === 1) {
                 return { backgroundColor: '#ffecec' }; // 浅红色
@@ -632,7 +672,7 @@ export default {
             this.helpVisible = true;
         },
         handleparse() {
-            this.linVisible = false;
+            // this.linVisible = false;
             // setTimeout(() => {
                 this.getParseData();
             // }, 1000);
@@ -647,6 +687,7 @@ export default {
             });
             setTimeout(() => {loading.close()
                 this.parseVisible = true;
+                this.isUpload=true
             }, 2000);
           
             
@@ -1074,6 +1115,8 @@ export default {
             return this.baseUrl + 'api/Preaccept/up_refer_file';
         }
     },
+  
+
     watch: {
         SourceType: {
             handler(newVal, oldVal) {
@@ -1086,7 +1129,22 @@ export default {
             },
             // immediate: true,
             deep: true // 可以深度检测到 person 对象的属性值的变化
+        },
+        //监听文件是否上传
+    isUpload: {
+      handler(val, oldVal) {
+        if (this.isUpload) {
+          this.uploadTimer = setInterval(async () => {
+            //需要定时执行的代码
+            this.progressPercent = await this.getProgress();
+          }, 1000);
+        } else {
+          clearInterval(this.uploadTimer);
+          this.currentFile = {};
         }
+      },
+      deep: true,
+    },
     }
 };
 </script>
@@ -1238,4 +1296,43 @@ p {
 /deep/ .el-table tr:nth-child(2n) {
     background: #fff;
 }
+::v-deep .reference-dialog .el-dialog__body{
+    padding: 0 20px !important;
+}
+.newpro .el-progress-bar__inner:before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  display: block;
+  background-image: repeating-linear-gradient(
+    -45deg,
+    hsla(0, 0%, 100%, 0.15) 25%,
+    transparent 0,
+    transparent 50%,
+    hsla(0, 0%, 100%, 0.15) 0,
+    hsla(0, 0%, 100%, 0.15) 75%,
+    transparent 0,
+    transparent
+  );
+  background-size: 40px 40px;
+  animation: mymove 2s linear infinite;
+}
+@keyframes mymove {
+  0% {
+    background-position: 0;
+  }
+  25% {
+    background-position: 50px;
+  }
+  50% {
+    background-position: 100px;
+  }
+  75% {
+    background-position: 150px;
+  }
+  100% {
+    background-position: 200px;
+  }
+}
+
 </style>