修改下载ui

src/views/system/modelModify.vue

@@ -39,26 +39,44 @@
                         <el-input v-model="url_ad" style="width:150px"></el-input>
                     </el-form-item>
 
-                    <el-form-item label="当前文件" width="150px">
-                        <el-input v-model="filePath" :readonly="true" style="width:300px"></el-input>
+                    <el-form-item label="当前文件">
+<!--                        <el-input v-model="filePath" :readonly="true" style="width:300px"></el-input>-->
+                        <el-popover
+                                placement="bottom"
+                                width="50"
+                                trigger="hover"
+                        >
+                            <p class="center">{{ getFileName() }}</p>
+                            <div class="center">
+                                <el-button icon="el-icon-download" @click="downloadFile">下载</el-button>
+                            </div>
+                            <el-image :src="getFileIcon" ref="icon" class="bordered-image" fit="scale-down"
+                                      style="width: 40px" alt="Image"
+                                      @mouseover="showDetails" slot="reference"></el-image>
+
+                        </el-popover>
                     </el-form-item>
 
+
                     <el-form-item v-if="model_type!='4'" label="选择文件" width="200px">
                         <input type="file" ref="myfile">
                         <span>  文件大小限制：小于50M </span>
                     </el-form-item>
                 </el-form>
+
                 <div class="upper_bottom_bar" style="margin-top: 20px">
                     <el-button round type="success" size="medium" style="margin-right: 10px;" @click="confirmModel">
                         确认修改
                     </el-button>
-                    <el-button round type="warning" size="medium" style="margin-right: 10px;" @click="downloadFile">
-                        下载
-                    </el-button>
+
                     <el-button round type="primary" size="medium" style="margin-right: 10px;" @click="returnLink">
                         返回
                     </el-button>
+
+
                 </div>
+
+
             </el-main>
         </el-container>
     </div>
@@ -81,6 +99,7 @@ export default {
 
     data() {
         return {
+            tooltipText: "提示",
             modelId: this.$route.query.modelId,
             modelNo: this.$route.query.modelNo,
             modelName: this.$route.query.modelName,
@@ -97,6 +116,9 @@ export default {
             model_name: "",
             model_type: "",
             output_list: [],
+            fileIcon: "",
+            isDetailsVisible: false,
+            fileName: "",
             type_list: [
                 {
                     key: 1,
@@ -117,10 +139,59 @@ export default {
             // model_type: this.type_list[this.$route.query.modelType - 1].label,
         }
     },
+    computed: {
+        getFileIcon() {
+            const filename = this.filePath.split('/').pop();
+            const index = filename.lastIndexOf(".");
+            const suffix = filename.substr(index + 1).toLowerCase();
+
+            if (suffix == "jar") {
+                this.fileIcon = "jar.png";
+            } else if (suffix == "py") {
+                this.fileIcon = "py.png";
+            }
+            return require(`@/assets/${this.fileIcon}`);
+        },
+        overlayStyle() {
+            if (this.iconRect) {
+                return {
+                    position: 'absolute',
+                    left: this.iconRect.left + 'px',
+                    top: this.iconRect.top + 'px'
+                };
+            } else {
+                return {}; // 默认样式
+            }
+        },
+
+    },
     mounted() {
+        this.iconRect = this.$refs.icon.getBoundingClientRect();
         this.model_type = this.type_list[this.$route.query.modelType - 1].key;
+
+        // const filename = this.filePath.split('/').pop();
+        // const index = filename.lastIndexOf(".");
+        // const suffix = filename.substr(index + 1).toLowerCase();
+        //
+        // if(suffix=="jar")
+        // {
+        //     this.fileIcon="../../assets/jar.png";
+        // }
+        // else if(suffix=="py")
+        // {
+        //     this.fileIcon="../../assets/py.png";
+        // }
     },
     methods: {
+        getFileName() {
+            return this.filePath.split('/').pop();
+        },
+        showDetails() {
+            this.isDetailsVisible = true;
+        },
+        hideDetails() {
+            this.isDetailsVisible = false;
+        },
         downloadFile() {
             const filename = this.filePath.split('/').pop(); // 要下载的文件名
             request.get(`/othermodel/download/${filename}`).then(res => {
@@ -139,9 +210,9 @@ export default {
                 link.download = filename; // 替换为你的文件名及扩展名
                 link.click();
             })
-            .catch(error => {
-                console.error('Error downloading file:', error);
-            });
+                .catch(error => {
+                    console.error('Error downloading file:', error);
+                });
 
         },
         confirmModel() {
@@ -356,10 +427,21 @@ export default {
 </script>
 
 <style scoped>
+
 .top_show {
     margin-bottom: 30px;
 }
 
+.bordered-image {
+    border: 2px solid #ccc;
+}
+
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .model_add_button {
     float: right;
     margin-left: 10px
@@ -392,4 +474,5 @@ export default {
 
     margin-top: 20px
 }
+
 </style>