Browse Source

能提交git吗

Qukatie 2 weeks ago
parent
commit
61af32e53d
1 changed files with 65 additions and 28 deletions
  1. 65 28
      src/components/uploadFile/index.vue

+ 65 - 28
src/components/uploadFile/index.vue

@@ -2,8 +2,13 @@
   <div>
   <div>
     <avue-crud :option="option" :data="data" id="out-table" ref="crud" @selection-change="selectionChange">
     <avue-crud :option="option" :data="data" id="out-table" ref="crud" @selection-change="selectionChange">
       <template slot="menuLeft">
       <template slot="menuLeft">
-        <div style="display: flex;">
-          <el-upload :headers="headers" action="/api/blade-resource/oss/endpoint/put-file" :on-success="onSuccess" :on-error="onError">
+        <div style="display: flex">
+          <el-upload
+            :headers="headers"
+            action="/api/blade-resource/oss/endpoint/put-file"
+            :on-success="onSuccess"
+            :on-error="onError"
+          >
             <el-button icon="el-icon-upload" type="primary" size="mini" :disabled="disabled">点击上传</el-button>
             <el-button icon="el-icon-upload" type="primary" size="mini" :disabled="disabled">点击上传</el-button>
           </el-upload>
           </el-upload>
           <!-- <el-button type="success" size="mini" :disabled="disabled" @click.stop="submit">一键保存</el-button> -->
           <!-- <el-button type="success" size="mini" :disabled="disabled" @click.stop="submit">一键保存</el-button> -->
@@ -11,30 +16,45 @@
       </template>
       </template>
       <template slot="fileUrl" slot-scope="{ row, index }">
       <template slot="fileUrl" slot-scope="{ row, index }">
         <span v-if="row.$cellEdit" @click.stop="rowPick(row, index)">
         <span v-if="row.$cellEdit" @click.stop="rowPick(row, index)">
-          <el-upload :headers="headers" action="/api/blade-resource/oss/endpoint/put-file" :on-success="rowonSuccess" :on-error="onError">
+          <el-upload
+            :headers="headers"
+            action="/api/blade-resource/oss/endpoint/put-file"
+            :on-success="rowonSuccess"
+            :on-error="onError"
+          >
             <el-input placeholder="请选择上传文件" v-model="row.fileUrl" readonly size="small"></el-input>
             <el-input placeholder="请选择上传文件" v-model="row.fileUrl" readonly size="small"></el-input>
           </el-upload>
           </el-upload>
         </span>
         </span>
-        <span v-else>
+        <span v-else style="color: #1e9fff; cursor: pointer" @click="download(row, index)">
           {{ row.fileUrl }}
           {{ row.fileUrl }}
         </span>
         </span>
       </template>
       </template>
       <template slot="menu" slot-scope="{ row, index }">
       <template slot="menu" slot-scope="{ row, index }">
-        <el-button size="small" type="text" icon="el-icon-edit" :disabled="disabled" @click="rowEdit(row)">{{ row.$cellEdit ? "保存" : "编辑" }}</el-button>
-        <el-button size="small" type="text" icon="el-icon-delete" @click="rowDel(row, index)" :disabled="disabled">删 除 </el-button>
+        <el-button size="small" type="text" icon="el-icon-edit" :disabled="disabled" @click="rowEdit(row)">{{
+          row.$cellEdit ? "保存" : "编辑"
+        }}</el-button>
+        <el-button size="small" type="text" icon="el-icon-delete" @click="rowDel(row, index)" :disabled="disabled"
+          >删 除
+        </el-button>
       </template>
       </template>
     </avue-crud>
     </avue-crud>
+    <PreviewImage :visible="innerVisible" :currentIndex="0" :previewImgList="[imgUrl]" />
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
+// @ts-nocheck
 import { getToken } from "@/util/auth";
 import { getToken } from "@/util/auth";
 import { updateListRemove, submitList } from "@/api/uploadFile/upload-file";
 import { updateListRemove, submitList } from "@/api/uploadFile/upload-file";
+import PreviewImage from "@/components/PreviewImage/index.vue";
 export default {
 export default {
   name: "detailsPage",
   name: "detailsPage",
+  components: { PreviewImage },
   data() {
   data() {
     return {
     return {
-      rowIndex:null,
+      innerVisible: false,
+      imgUrl: "",
+      rowIndex: null,
       headers: { "Blade-Auth": "Bearer " + getToken() },
       headers: { "Blade-Auth": "Bearer " + getToken() },
       option: {
       option: {
         maxHeight: 340,
         maxHeight: 340,
@@ -58,51 +78,50 @@ export default {
             label: "原始文件名",
             label: "原始文件名",
             prop: "fileName",
             prop: "fileName",
             cell: true,
             cell: true,
-            overHidden: true
+            overHidden: true,
           },
           },
           {
           {
             label: "文件地址",
             label: "文件地址",
             prop: "fileUrl",
             prop: "fileUrl",
             // cell: true,
             // cell: true,
-            overHidden: true
+            overHidden: true,
           },
           },
           {
           {
             label: "文件类型",
             label: "文件类型",
             prop: "fileType",
             prop: "fileType",
             // cell: true,
             // cell: true,
-            overHidden: true
+            overHidden: true,
           },
           },
           {
           {
             label: "备注",
             label: "备注",
             prop: "remarks",
             prop: "remarks",
             cell: true,
             cell: true,
             width: 150,
             width: 150,
-            overHidden: true
-          }
-        ]
-      }
+            overHidden: true,
+          },
+        ],
+      },
     };
     };
   },
   },
-  components: {},
   props: {
   props: {
     data: {
     data: {
       type: Array,
       type: Array,
-      default: function() {
+      default: function () {
         return [];
         return [];
-      }
+      },
     },
     },
     linkKey: {
     linkKey: {
       type: String,
       type: String,
-      default: "link"
+      default: "link",
     },
     },
     delUrl: {
     delUrl: {
       type: String,
       type: String,
-      default: "/gubersail-admin/bladeclaimattachment/remove"
+      default: "/gubersail-admin/bladeclaimattachment/remove",
     },
     },
     disabled: {
     disabled: {
       type: Boolean,
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   },
   created() {},
   created() {},
   methods: {
   methods: {
@@ -120,10 +139,10 @@ export default {
         lock: true,
         lock: true,
         text: "加载中",
         text: "加载中",
         spinner: "el-icon-loading",
         spinner: "el-icon-loading",
-        background: "rgba(255,255,255,0.7)"
+        background: "rgba(255,255,255,0.7)",
       });
       });
       submitList(this.data)
       submitList(this.data)
-        .then(res => {
+        .then((res) => {
           this.$emit("upDate", res.data.data);
           this.$emit("upDate", res.data.data);
         })
         })
         .finally(() => {
         .finally(() => {
@@ -142,6 +161,24 @@ export default {
         this.$set(row, "$cellEdit", true);
         this.$set(row, "$cellEdit", true);
       }
       }
     },
     },
+    // /**
+    //  * @param {{ id: any; }} row
+    //  * @param {any} index
+    //  */
+    download(row) {
+      if (row.fileUrl) {
+        const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"];
+        const fileExt = row.fileUrl.substring(row.fileUrl.lastIndexOf(".")).toLowerCase();
+        if (imageExtensions.includes(fileExt)) {
+          this.innerVisible = true;
+          this.imgUrl = row.fileUrl;
+        } else {
+          window.open(row.fileUrl);
+        }
+      } else {
+        this.$message.error("请上传附件");
+      }
+    },
     /**
     /**
      * @param {{ id: any; }} row
      * @param {{ id: any; }} row
      * @param {any} index
      * @param {any} index
@@ -150,10 +187,10 @@ export default {
       this.$confirm("确定将选择数据删除?", {
       this.$confirm("确定将选择数据删除?", {
         confirmButtonText: "确定",
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
       }).then(() => {
       }).then(() => {
         if (row.id) {
         if (row.id) {
-          updateListRemove(row.id, this.delUrl).then(res => {
+          updateListRemove(row.id, this.delUrl).then((res) => {
             if (res.data.success) {
             if (res.data.success) {
               this.$message.success("操作成功!");
               this.$message.success("操作成功!");
               this.data.splice(index, 1);
               this.data.splice(index, 1);
@@ -181,7 +218,7 @@ export default {
         fileName: res.data.originalName,
         fileName: res.data.originalName,
         fileUrl: res.data[this.linkKey],
         fileUrl: res.data[this.linkKey],
         fileType: this.getFileExtension(res.data.originalName),
         fileType: this.getFileExtension(res.data.originalName),
-        $cellEdit: true
+        $cellEdit: true,
       });
       });
     },
     },
     rowonSuccess(res, file, fileList) {
     rowonSuccess(res, file, fileList) {
@@ -201,8 +238,8 @@ export default {
     onError(err, file, fileList) {
     onError(err, file, fileList) {
       console.log(err);
       console.log(err);
       this.$message.error(err);
       this.$message.error(err);
-    }
-  }
+    },
+  },
 };
 };
 </script>
 </script>