update shape upload

src/components/attachmentDialog.vue

@@ -5,44 +5,50 @@
     :close-on-click-modal="false"
     :append-to-body="true"
     :visible.sync="visible">
-    <!-- upload  -->
-    <div class="upload">
-      <!-- actionUrl() {
+    <div v-loading="loading">
+      <!-- upload  -->
+      <div class="upload">
+        <!-- actionUrl() {
       return window.SITE_CONFIG["apiURL"] + this.urls.importUrl;
     }, -->
-      <el-upload
-        class="upload-demo"
-        action="https://jsonplaceholder.typicode.com/posts/"
-        :on-preview="handlePreview"
-        :on-remove="handleRemove"
-        :before-remove="beforeRemove"
-        :on-success="handleSuccess"
-        multiple
-        :show-file-list="false">
-        <el-button size="small" type="primary" class="btn-upload">上传</el-button>
-        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
-      </el-upload>
-
-      <!-- filelist  -->
-      <div class="filelist">
-        <el-row :gutter="20">
-          <el-col :span="6" v-for="file in fileList" :key="file.name + Math.random()">
-            <div class="fileListItem">
-              <div class="filename">{{ file.name }}</div>
-              <div class="file-actions">
-                <el-button type="text" size="small" icon="el-icon-view" @click="handlePreview(file)"></el-button>
-                <el-button type="text" size="small" icon="el-icon-download" @click="handleDownload(file)"></el-button>
-                <el-button type="text" size="small" icon="el-icon-delete" @click="handleRemove(file)"></el-button>
+        <el-upload
+          class="upload-demo"
+          :on-preview="handlePreview"
+          :on-remove="handleRemove"
+          :before-remove="beforeRemove"
+          :http-request="handleUpload"
+          :action="actionUrl"
+          multiple
+          :show-file-list="false">
+          <el-button size="small" type="primary" class="btn-upload">上传</el-button>
+          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
+        </el-upload>
+
+        <!-- filelist  -->
+        <div class="filelist" v-if="fileList && fileList.length != 0">
+          <div style="">文件列表</div>
+          <el-row :gutter="20">
+            <el-col :span="8" v-for="file in fileList" :key="file.name + Math.random()">
+              <div class="fileListItem">
+                <div class="filename">{{ file.name }}</div>
+                <div class="file-actions">
+                  <el-button type="text" size="small" icon="el-icon-view" @click="handlePreview(file)"></el-button>
+                  <el-button type="text" size="small" icon="el-icon-download" @click="handleDownload(file)"></el-button>
+                  <el-button type="text" size="small" icon="el-icon-delete" @click="handleRemove(file)"></el-button>
+                </div>
               </div>
-            </div>
-          </el-col>
-        </el-row>
+            </el-col>
+          </el-row>
+        </div>
+        <p v-else>无附件</p>
       </div>
     </div>
   </el-dialog>
 </template>
 
 <script>
+import Cookies from "js-cookie";
+
 export default {
   name: "AttachmentDialog",
   props: {},
@@ -51,13 +57,26 @@ export default {
       visible: false,
       fileList: [],
       shapeId: null,
-      shapeInfo: null
+      shapeInfo: null,
+      loading: false,
+      actionUrl: window.SITE_CONFIG["apiURL"] + "/pms/attachment/uploadFileFormData?typeCode=shape",
     };
   },
   inject: ["urls"],
-  mounted() {},
+  mounted() {
+    this.clearInfo();
+  },
   methods: {
+    clearInfo() {
+      this.shapeId = null;
+      this.shapeInfo = null;
+      this.fileList = [];
+    },
     init(shapeId) {
+      if (!shapeId) {
+        this.$message.error("shapeId is required");
+        return;
+      }
       this.shapeId = shapeId;
       this.getFileList();
       this.visible = true;
@@ -67,26 +86,184 @@ export default {
     },
     // requests
     async getFileList() {
+      this.loading = true;
       // get shape info
       try {
-        this.shapeInfo = await this.$http.get(this.urls.base + `/${this.shapeId}`);
-        // extract filelist and save filelist seperately
-        this.fileList = this.shapeInfo.files;
-        // TODO....
+        const { data } = await this.$http.get(this.urls.base + `/${this.shapeId}`);
+        if (data.code !== 0) {
+          throw new Error(data.msg);
+        }
+        this.shapeInfo = data.data;
+        // this.fileList = (this.shapeInfo?.files || []).map((file) => ({
+        //   ...file,
+        //   name: file.fileName + "." + file.fileUrl.split(".").pop(),
+        // }));
+        this.fileList = (this.shapeInfo?.files || []).map((file) => ({
+          ...file,
+          name: file.fileName,
+        }));
+        // 删除 shapeInfo 的 files 字段
+        delete this.shapeInfo.files;
+        this.loading = false;
       } catch (error) {
         this.$message.error(error.msg);
+        this.loading = false;
       }
     },
 
     // operations
-    handlePreview(file) {},
-    handleDownload(file) {},
-    handleRemove(file) {},
+    handlePreview(file) {
+      // 加载图片
+      this.$http
+        .get("/pms/attachment/downloadFile", {
+          params: {
+            attachmentId: file.id,
+            type: 0, // 0 预览，1 下载
+          },
+          responseType: "blob",
+        })
+        .then(({ data: res }) => {
+          if (/image/i.test(res.type) || /pdf/i.test(res.type)) {
+            let a = document.createElement("a");
+            a.setAttribute("target", "_blank");
+            a.href = URL.createObjectURL(res);
+            a.click();
+            a.remove();
+          } else {
+            this.$message({
+              message: "非图片和PDF文件请下载后预览",
+              type: "error",
+              duration: 1500,
+            });
+          }
+        });
+    },
+
+    handleDownload(file) {
+      this.$http
+        .get("/pms/attachment/downloadFile", {
+          params: {
+            attachmentId: file.id,
+            type: 1,
+          },
+          responseType: "blob",
+        })
+        .then(({ data: res }) => {
+          const blob = new Blob([res]);
+          /** 通知 */
+          this.$notify({
+            title: "成功",
+            message: "开始下载",
+            type: "success",
+            duration: 1200,
+          });
+          if ("download" in document.createElement("a")) {
+            const alink = document.createElement("a");
+            alink.download = file.name;
+            alink.style.display = "none";
+            alink.target = "_blank";
+            alink.href = URL.createObjectURL(blob);
+            document.body.appendChild(alink);
+            alink.click();
+            URL.revokeObjectURL(alink.href);
+            document.body.removeChild(alink);
+          } else {
+            navigator.msSaveBlob(blob, fileName);
+          }
+        });
+    },
+
+    async handleRemove(file) {
+      try {
+        await this.$confirm("确定删除此文件?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        });
+        this.loading = true;
+        this.fileList = this.fileList.filter((f) => f.id.toString() !== file.id.toString());
+        await this.updateShapeInfo();
+        this.loading = false;
+        this.$message({
+          type: "success",
+          message: "删除成功!",
+        });
+      } catch (err) {
+        this.$message({
+          type: "info",
+          message: "已取消删除",
+        });
+      }
+    },
     // upload
+    async handleUpload(params) {
+      // params:
+      // { header, withCredentials, file, data, filename, action, onProgress, onSuccess, onError, onPreview, onRemove, beforeUpload, beforeRemove, }
+      // upload file
+      const formData = new FormData();
+      formData.append("files", params.file);
+
+      try {
+        const { data: res } = await this.$http({
+          url: params.action,
+          method: "post",
+          headers: {
+            token: Cookies.get("token"),
+            // 'Content-Type': 'multipart/form-data'
+          },
+          data: formData,
+        });
+        const { code, data, msg } = res;
+        // data is an array!
+        if (code != 0) throw new Error(msg || "上传出错");
+        this.fileList.push({
+          name: data[0].fileName,
+          id: data[0].id,
+          fileName: data[0].fileName,
+          fileUrl: data[0].fileUrl,
+          typeCode: data[0].typeCode,
+        });
+
+        // upload shape info
+        this.loading = true
+        await this.updateShapeInfo();
+        this.loading = false
+        this.$message.success("上传成功");
+      } catch (error) {
+        this.$message.error(error.msg);
+      }
+    },
+
+    async updateShapeInfo() {
+      try {
+        const { data: res } = await this.$http({
+          url: this.urls.base,
+          method: "put",
+          data: {
+            ...this.shapeInfo,
+            fileIds: this.fileList.map((file) => file.id),
+          },
+        });
+
+        const { code, msg } = res;
+        if (code != 0) throw new Error(msg || "上传出错");
+      } catch (err) {
+        this.$message.error(err.msg);
+      }
+    },
+
     beforeRemove(file, fileList) {},
-    handleSuccess(response, file, fileList) {
-      console.log("filelist", fileList, this.fileList);
-      this.fileList.push({ name: file.name });
+
+    handleUploadCheck(file) {
+      const LIMIT = 2 * 1024 * 1024; // bytes
+      if (file.size > LIMIT) {
+        this.$message({
+          message: "文件大小不能超过 2MB",
+          type: "error",
+          duration: 1500,
+        });
+        return false;
+      } else return true;
     },
   },
 };
@@ -105,6 +282,7 @@ export default {
 }
 
 .filename {
+  user-select: none;
 }
 
 .file__actions {
@@ -117,12 +295,10 @@ export default {
   background: #0001;
   border-radius: 6px;
   padding: 0 12px;
+  margin-top: 20px;
 }
 
 .btn-upload {
   padding: 10px 56px;
-  /* position: absolute;
-  top: 12px;
-  left: 100px; */
 }
 </style>

src/components/uploadBtn/index.vue

@@ -49,7 +49,7 @@ export default {
     },
     action: {
       type: String,
-      default: "http://192.168.1.62:8080/pms-am/pms/attachment/uploadFileFormData?typeCode=equipmentType", //
+      default: window.SITE_CONFIG['apiURL'] + "/pms/attachment/uploadFileFormData?typeCode=equipmentType", //
     },
     fileList: {
       type: Array,

src/views/atomViews/ListViewWithHead.vue

@@ -346,7 +346,7 @@ export default {
           // alert("查看附件");
           this.needAttachmentDialog = true;
           setTimeout(() => {
-            this.$refs["attachmentDialog"].init();
+            this.$refs["attachmentDialog"].init(data);
           }, 300);
           break;
         }