Browse Source

上传图片部分界面优化

XU 9 months ago
parent
commit
c680f7ac84
1 changed files with 13 additions and 8 deletions
  1. 13 8
      src/views/technology-archives/TechnologyArchivesMain.vue

+ 13 - 8
src/views/technology-archives/TechnologyArchivesMain.vue

@@ -261,10 +261,10 @@
                     <span v-else>{{ scope.row.issuingAuthority }}</span>
                   </template>
                 </el-table-column>
-                <el-table-column prop="image" label="图片链接">
+                <el-table-column prop="image" label="图片链接" min-width="180" >
                   <template v-slot="scope">
                     <!-- <el-input  size="small" v-model="scope.row.image"></el-input>-->
-                    <div v-if="scope.row.isEdit" stylr="display:flex;">
+                    <div v-if="scope.row.isEdit">
                       <el-upload
                           ref="upload"
                           v-model:file-list="fileList"
@@ -282,8 +282,8 @@
                         <el-icon> <Plus /></el-icon>
                       </el-upload>
                       <el-button style="margin-top: 10px" type="success" icon="Upload" @click="submitUpload(scope.row)">上传到服务器</el-button>
-                      <el-dialog width="75%" v-model="dialogVisible">
-                        <img width="100%" :src="dialogImageUrl"  />
+                      <el-dialog v-model="dialogVisible" append-to-body >
+                        <img w-full :src="dialogImageUrl"  />
                       </el-dialog>
                     </div>
                     <!-- <span v-else>{{ scope.row.image }}</span> -->
@@ -295,6 +295,7 @@
                         :max-scale="7"
                         :min-scale="0.2"
                         :preview-src-list="srcList"
+                        :preview-teleported="true"
                         fit="cover"
                       />
                   </div>
@@ -361,7 +362,7 @@
                     <span v-else>{{ scope.row.comment }}</span>
                   </template>
                 </el-table-column>
-                <el-table-column prop="image" label="图片链接">
+                <el-table-column prop="image" label="图片链接" min-width="180">
                   <template v-slot="scope">
                     <!-- <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.image"></el-input> -->
                     <div v-if="scope.row.isEdit" stylr="display:flex;">
@@ -382,8 +383,8 @@
                         <el-icon> <Plus /></el-icon>
                       </el-upload>
                       <el-button style="margin-top: 10px" type="success" icon="Upload" @click="submitUpload(scope.row)">上传到服务器</el-button>
-                      <el-dialog width="75%" v-model="dialogVisible">
-                        <img width="100%" :src="dialogImageUrl"  />
+                      <el-dialog v-model="dialogVisible" append-to-body >
+                        <img w-full :src="dialogImageUrl"  />
                       </el-dialog>
                     </div>
                     <div v-else class="demo-image__preview">
@@ -394,7 +395,8 @@
                         :max-scale="7"
                         :min-scale="0.2"
                         :preview-src-list="srcList"
-                        fit="cover"
+                        :preview-teleported="true"
+                        fit="cover" 
                       />
                     </div>
                     <!-- <span v-else>{{ scope.row.image }}</span> -->
@@ -1727,6 +1729,9 @@ const cancelFirstInfo = (row, index) => {
   }
   if(!row.isUpload){
     fileList.value = []
+  } 
+  if(row.getTime == null || row.issuingAuthority == null || row.name == null){
+    fileList.value = []
   }
   firstKey.value = Math.random()
 }