From e12d6d161bad53be3efd03ed50c61a79ac0d14b3 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Mon, 10 Jul 2023 10:57:50 +0800
Subject: [PATCH] add AttachmentDialog

---
 src/components/attachmentDialog.vue      | 107 +++++++++++++++++++++++
 src/views/atomViews/ListViewWithHead.vue |  23 +++--
 2 files changed, 124 insertions(+), 6 deletions(-)
 create mode 100644 src/components/attachmentDialog.vue

diff --git a/src/components/attachmentDialog.vue b/src/components/attachmentDialog.vue
new file mode 100644
index 0000000..02dd60b
--- /dev/null
+++ b/src/components/attachmentDialog.vue
@@ -0,0 +1,107 @@
+<template>
+  <el-dialog
+    class="attachment-dialog"
+    title="附件"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+    :visible.sync="visible">
+    <!-- upload  -->
+    <div class="upload">
+      <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">
+            <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>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "AttachmentDialog",
+  props: {},
+  data() {
+    return {
+      visible: false,
+      fileList: [],
+    };
+  },
+  mounted() {},
+  methods: {
+    init() {
+      this.visible = true;
+    },
+    close() {
+      this.visible = false;
+    },
+    // operations
+    handlePreview(file) {},
+    handleDownload(file) {},
+    handleRemove(file) {},
+    // upload
+    beforeRemove(file, fileList) {},
+    handleSuccess(response, file, fileList) {
+      console.log("filelist", fileList, this.fileList);
+      this.fileList.push({ name: file.name });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.attachment-dialog >>> .el-dialog__body {
+  padding: 8px 20px 20px;
+}
+
+.filelist {
+  margin-top: 20px;
+  max-height: 240px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.filename {
+}
+
+.file__actions {
+}
+
+.fileListItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #0001;
+  border-radius: 6px;
+  padding: 0 12px;
+}
+
+.btn-upload {
+  padding: 10px 56px;
+  /* position: absolute;
+  top: 12px;
+  left: 100px; */
+}
+</style>
diff --git a/src/views/atomViews/ListViewWithHead.vue b/src/views/atomViews/ListViewWithHead.vue
index e9dbeea..a2c58b7 100644
--- a/src/views/atomViews/ListViewWithHead.vue
+++ b/src/views/atomViews/ListViewWithHead.vue
@@ -44,6 +44,9 @@
       :dialog-visible.sync="carPayloadDialogVisible"
       :configs="carPayloadDialogConfigs"
       @refreshDataList="getList" />
+
+    <AttachmentDialog ref="attachmentDialog" v-if="needAttachmentDialog" />
+
     <DialogUpload
       ref="upload-dialog"
       v-if="uploadDialogVisible"
@@ -69,6 +72,7 @@ import DialogCarPayload from "@/components/DialogCarPayload.vue";
 import DialogUpload from "@/components/DialogUpload.vue";
 import Overlay from "@/components/Overlay.vue";
 import moment from "moment";
+import AttachmentDialog from "@/components/attachmentDialog.vue";
 
 const DIALOG_WITH_MENU = "DialogWithMenu";
 const DIALOG_JUST_FORM = "DialogJustForm";
@@ -84,6 +88,7 @@ export default {
     DialogCarPayload,
     DialogUpload,
     Overlay,
+    AttachmentDialog,
   },
   props: {
     navigator: {
@@ -167,6 +172,7 @@ export default {
       uploadDialogVisible: false,
       overlayVisible: false,
       cachedSearchCondition: {},
+      needAttachmentDialog: false,
     };
   },
   inject: ["urls"],
@@ -337,7 +343,11 @@ export default {
           break;
         }
         case "toggle-attachment-dialog": {
-          alert("查看附件");
+          // alert("查看附件");
+          this.needAttachmentDialog = true;
+          setTimeout(() => {
+            this.$refs["attachmentDialog"].init();
+          }, 300);
           break;
         }
         case "view-blender-batch-details": {
@@ -446,11 +456,12 @@ export default {
               if (shouldShowOverlay) this.overlayVisible = false;
             })
             .catch((errMsg) => {
-              errMsg !== 'cancel' && this.$message({
-                message: errMsg,
-                type: "error",
-                duration: 1500,
-              });
+              errMsg !== "cancel" &&
+                this.$message({
+                  message: errMsg,
+                  type: "error",
+                  duration: 1500,
+                });
               if (shouldShowOverlay) this.overlayVisible = false;
             });
           break;