update upload

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,

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">
+    <ul style="max-height: 100px; overflow-y: auto" class="filelist">
-      <li v-for="(file, index) in filteredList" :key="index" class="flex justify-between items-center py-1">
+      <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>

src/components/uploadBtn/index.vue

@@ -1,6 +1,7 @@
 <template>
-	<div class="p-8 w-96">
+  <div>
     <el-upload
+      :disabled="disabled"
       name="files"
       class="upload-demo"
       :action="action"
@@ -8,20 +9,19 @@
       :headers="uploadHeaders"
       :on-success="handleUploadSuccess"
     >
-			<el-button size="small" type="primary" class="text-blue-400">{{
+      <el-button :disabled="disabled" size="small" type="primary">{{ buttonText }}</el-button>
-				buttonText
-			}}</el-button>
       <div slot="tip" class="el-upload__tip">
         <transition name="fade" mode="out-in">
           <span key="noupload" v-if="!showMsg">
-						{{ tips }}
+            {{ tips.hint }}
           </span>
-					<span key="uploaded" v-else class="text-green-300"> 上传成功! </span>
+          <span key="uploaded" v-else class="success-msg"> {{ tips.success }} </span>
         </transition>
       </div>
-		</el-upload>
 
 			<FileList :file-list="fileList" />
+    </el-upload>
+
   </div>
 </template>
 
@@ -37,33 +37,40 @@ export default {
       default: "点击上传",
     },
     tips: {
+      type: Object,
+      default: () => ({
+        hint: "只能上传jpg/png文件, 且不超过500kb",
+        success: "上传成功!",
+      }),
+    },
+    action: {
       type: String,
-			default: "只能上传jpg/png文件, 且不超过500kb",
+      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 {
+    return { showMsg: false, fileList: [] };
-			action:
-				"http://192.168.1.62:8080/pms-am/pms/attachment/uploadFileFormData?typeCode=equipmentType", //
-			showMsg: false,
-		};
   },
   computed: {
     uploadHeaders() {
       return {
-				token: Cookie.get("demo-token") || "",
+        token: Cookie.get("token") || "",
       };
     },
-		fileList: {
+  },
-			get() {
+  watch: {
-				return this.fileListProp
+    fileListProp(list) {
-			}
+      this.fileList = list;
-		}
+    },
   },
   methods: {
     handleUploadSuccess(response, file, fileList) {
@@ -89,12 +96,13 @@ export default {
 
 <style scoped>
 .upload-demo {
+	margin-top: 48px;
 }
 
-.upload-demo >>> .el-upload__tip {
+/* .upload-demo >>> .el-upload__tip {
   display: inline-block;
   margin-left: 12px;
-}
+} */
 
 .fade-enter,
 .fade-leave-to {
@@ -119,4 +127,7 @@ export default {
   background: rgb(175, 175, 175);
   border-radius: 4px;
 }
+.success-msg {
+	color: #67c23a;
+}
 </style>