update upload

2023-02-07 17:10:04 +08:00
parent e7bfb25d3d
commit 4dff2473e5
3 changed files with 155 additions and 105 deletions
--- a/src/components/DialogJustForm.vue
+++ b/src/components/DialogJustForm.vue
@@ -46,21 +46,16 @@
              :disabled="detailMode"
            />
            <el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
-            <el-upload
+
+            <uploadBtn
              v-if="col.upload"
              :key="'upload_' + Math.random()"
              :action="col.actionUrl"
              :file-list="col.fileList"
              :disabled="detailMode || !dataForm.id"
-              :on-change="handleUploadChange"
              v-bind="col.elparams"
-              :headers="uploadHeaders"
-              name="files"
-              :on-success="handleUploadSuccess"
-            >
-              <el-button :disabled="detailMode || !dataForm.id" type="primary" size="small">选择文件</el-button>
-              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-            </el-upload>
+            />
+
            <div class="" v-if="col.component" style="margin: 42px 0 0">
              <!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO：后续可能会根据业务需求创建新的版本  -->
              <component
@@ -92,6 +87,7 @@
 <script>
 import { pick as __pick } from "@/utils/filters";
 import Cookies from "js-cookie";
+import uploadBtn from "@/components/uploadBtn";

 function reConstructTreeData(listObj) {
  const entry = [];
@@ -114,6 +110,7 @@ function reConstructTreeData(listObj) {

 export default {
  name: "DialogJustForm",
+  components: { uploadBtn },
  props: {
    configs: {
      type: Object,
--- a/src/components/uploadBtn/components/FileList.vue
+++ b/src/components/uploadBtn/components/FileList.vue
@@ -1,8 +1,8 @@
 <template>
-  <el-popover placement="right" :title="title" width="300" trigger="hover" class="mt-2 x-scroll">
+  <el-popover placement="right" :title="title" width="300" trigger="hover" class="mt-2">
    <!-- <div slot="content"> -->
-    <ul style="max-height: 100px; overflow-y: auto">
-      <li v-for="(file, index) in filteredList" :key="index" class="flex justify-between items-center py-1">
+    <ul style="max-height: 100px; overflow-y: auto" class="filelist">
+      <li v-for="(file, index) in filteredList" :key="index">
        <span>
          {{ file.name }}
        </span>
@@ -14,22 +14,26 @@
      <li v-if="filteredList.length === 0">无</li>
    </ul>

-    <div class="search absolute top-0 right-0 mt-2 mr-2 cursor-pointer">
+    <div class="top-search">
      <transition name="fade" mode="out-in">
-        <button v-if="!showSearchInput" class="el-icon-search inline-block w-6 h-6" @click="handleSearchClick"></button>
+        <button v-if="!showSearchInput" class="el-icon-search search-btn" @click="handleSearchClick"></button>
        <el-input
          v-else
          size="mini"
          placeholder="请输入关键字"
          clearable
          @keydown.enter.native="showSearchInput = false"
-          @keydown.esc.native="showSearchInput = false"
+          @keydown.esc.prevent.native="showSearchInput = false"
          v-model="searchCondition"
-      /></transition>
+        />
+      </transition>
    </div>

    <!-- </div> -->
-    <el-button type="text" slot="reference" class="">{{ label }}</el-button>
+    <el-button v-if="label" type="text" slot="reference" class="">{{ label }}</el-button>
+    <el-button v-else type="text" slot="reference" class="el-icon-folder-opened" style="margin-left: 16px; width: 32px; height: 32px">
+      已上传文件</el-button
+    >
  </el-popover>
 </template>

@@ -39,7 +43,7 @@ export default {
  props: {
    label: {
      type: String,
-      default: "文件列表",
+      default: "",
    },
    title: {
      type: String,
@@ -86,4 +90,42 @@ export default {
 .fade-leave-active {
  transition: opacity 100ms linear;
 }
+
+.mt-2 {
+  margin-top: 16px;
+}
+
+button {
+  background: none;
+  border: none;
+}
+
+ul,
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.filelist > li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 0;
+}
+
+.top-search {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin-top: 6px;
+  margin-right: 6px;
+  cursor: pointer;
+}
+
+.search-btn {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+}
 </style>
--- a/src/components/uploadBtn/index.vue
+++ b/src/components/uploadBtn/index.vue
@@ -1,28 +1,28 @@
 <template>
-	<div class="p-8 w-96">
-		<el-upload
-			name="files"
-			class="upload-demo"
-			:action="action"
-			:show-file-list="false"
-			:headers="uploadHeaders"
-			:on-success="handleUploadSuccess"
-		>
-			<el-button size="small" type="primary" class="text-blue-400">{{
-				buttonText
-			}}</el-button>
-			<div slot="tip" class="el-upload__tip">
-				<transition name="fade" mode="out-in">
-					<span key="noupload" v-if="!showMsg">
-						{{ tips }}
-					</span>
-					<span key="uploaded" v-else class="text-green-300"> 上传成功! </span>
-				</transition>
-			</div>
-		</el-upload>
+  <div>
+    <el-upload
+      :disabled="disabled"
+      name="files"
+      class="upload-demo"
+      :action="action"
+      :show-file-list="false"
+      :headers="uploadHeaders"
+      :on-success="handleUploadSuccess"
+    >
+      <el-button :disabled="disabled" size="small" type="primary">{{ buttonText }}</el-button>
+      <div slot="tip" class="el-upload__tip">
+        <transition name="fade" mode="out-in">
+          <span key="noupload" v-if="!showMsg">
+            {{ tips.hint }}
+          </span>
+          <span key="uploaded" v-else class="success-msg"> {{ tips.success }} </span>
+        </transition>
+      </div>

-		<FileList :file-list="fileList" />
-	</div>
+			<FileList :file-list="fileList" />
+    </el-upload>
+
+  </div>
 </template>

 <script>
@@ -30,93 +30,104 @@ import Cookie from "js-cookie";
 import FileList from "./components/FileList.vue";

 export default {
-	name: "UploadBtn",
-	props: {
-		buttonText: {
-			type: String,
-			default: "点击上传",
-		},
-		tips: {
-			type: String,
-			default: "只能上传jpg/png文件, 且不超过500kb",
-		},
-		fileListProp: {
-			type: Array,
-			default: () => [],
-		},
-	},
-	components: { FileList },
-	data() {
-		return {
-			action:
-				"http://192.168.1.62:8080/pms-am/pms/attachment/uploadFileFormData?typeCode=equipmentType", //
-			showMsg: false,
-		};
-	},
-	computed: {
-		uploadHeaders() {
-			return {
-				token: Cookie.get("demo-token") || "",
-			};
-		},
-		fileList: {
-			get() {
-				return this.fileListProp
-			}
-		}
-	},
-	methods: {
-		handleUploadSuccess(response, file, fileList) {
-			/** 上传成功修改本地展示的文件名 */
-			if (response.code === 0) {
-				// const { fileName } = response.data[0];
-				const fileName = response.data[0].fileUrl.split("/").pop();
-				file.name = fileName;
-				this.showMsg = true;
-				setTimeout(() => {
-					this.showMsg = false;
-				}, 3000);
-			} else {
-				console.log("response, file, fileList", response, file, fileList);
-			}
+  name: "UploadBtn",
+  props: {
+    buttonText: {
+      type: String,
+      default: "点击上传",
+    },
+    tips: {
+      type: Object,
+      default: () => ({
+        hint: "只能上传jpg/png文件, 且不超过500kb",
+        success: "上传成功!",
+      }),
+    },
+    action: {
+      type: String,
+      default: "http://192.168.1.62:8080/pms-am/pms/attachment/uploadFileFormData?typeCode=equipmentType", //
+    },
+    fileListProp: {
+      type: Array,
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: { FileList },
+  data() {
+    return { showMsg: false, fileList: [] };
+  },
+  computed: {
+    uploadHeaders() {
+      return {
+        token: Cookie.get("token") || "",
+      };
+    },
+  },
+  watch: {
+    fileListProp(list) {
+      this.fileList = list;
+    },
+  },
+  methods: {
+    handleUploadSuccess(response, file, fileList) {
+      /** 上传成功修改本地展示的文件名 */
+      if (response.code === 0) {
+        // const { fileName } = response.data[0];
+        const fileName = response.data[0].fileUrl.split("/").pop();
+        file.name = fileName;
+        this.showMsg = true;
+        setTimeout(() => {
+          this.showMsg = false;
+        }, 3000);
+      } else {
+        console.log("response, file, fileList", response, file, fileList);
+      }

-			this.fileList = fileList;
-			console.log("[vue] fileList", this.fileList);
-		},
-	},
+      this.fileList = fileList;
+      console.log("[vue] fileList", this.fileList);
+    },
+  },
 };
 </script>

 <style scoped>
 .upload-demo {
+	margin-top: 48px;
 }

-.upload-demo >>> .el-upload__tip {
-	display: inline-block;
-	margin-left: 12px;
-}
+/* .upload-demo >>> .el-upload__tip {
+  display: inline-block;
+  margin-left: 12px;
+} */

 .fade-enter,
 .fade-leave-to {
-	opacity: 0;
+  opacity: 0;
 }

 .fade-enter-active,
 .fade-leave-active {
-	transition: opacity 500ms ease-out;
+  transition: opacity 500ms ease-out;
 }

 ::-webkit-scrollbar {
-	width: 8px;
+  width: 8px;
 }
 ::-webkit-scrollbar-track {
-	width: 8px;
+  width: 8px;
 }
 ::-webkit-scrollbar-button {
-	display: none;
+  display: none;
 }
 ::-webkit-scrollbar-thumb {
-	background: rgb(175, 175, 175);
-	border-radius: 4px;
+  background: rgb(175, 175, 175);
+  border-radius: 4px;
+}
+.success-msg {
+	color: #67c23a;
 }
 </style>