From e7bfb25d3d4f1e8554ab0df063693972c5c5fd3b Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Tue, 7 Feb 2023 16:31:47 +0800
Subject: [PATCH] init uploadBtn

---
 public/index.html                             |   4 +-
 src/components/DialogJustForm.vue             |  15 ++-
 .../uploadBtn/components/FileList.vue         |  89 +++++++++++++
 src/components/uploadBtn/index.vue            | 122 ++++++++++++++++++
 src/views/modules/pms/equipmentType/config.js |   5 +-
 .../modules/pms/materialStorage/config.js     |   2 +-
 6 files changed, 231 insertions(+), 6 deletions(-)
 create mode 100644 src/components/uploadBtn/components/FileList.vue
 create mode 100644 src/components/uploadBtn/index.vue

diff --git a/public/index.html b/public/index.html
index 2a3aa34..d204e3c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -38,8 +38,8 @@
   <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
     <script>
     // window.SITE_CONFIG['apiURL'] = 'http://192.168.1.103:8080/pms-am';
-    window.SITE_CONFIG['apiURL'] = 'http://192.168.1.49:8080/pms-am'; // tengyun
-    // window.SITE_CONFIG['apiURL'] = 'http://192.168.1.62:8080/pms-am'; // tao
+    // window.SITE_CONFIG['apiURL'] = 'http://192.168.1.49:8080/pms-am'; // tengyun
+    window.SITE_CONFIG['apiURL'] = 'http://192.168.1.62:8080/pms-am'; // tao
     </script>
   <% } %>
   <!-- 集成测试环境 -->
diff --git a/src/components/DialogJustForm.vue b/src/components/DialogJustForm.vue
index f0b1351..3d9d437 100644
--- a/src/components/DialogJustForm.vue
+++ b/src/components/DialogJustForm.vue
@@ -55,8 +55,10 @@
               :on-change="handleUploadChange"
               v-bind="col.elparams"
               :headers="uploadHeaders"
+              name="files"
+              :on-success="handleUploadSuccess"
             >
-              <el-button type="primary" size="small">选择文件</el-button>
+              <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">
@@ -189,6 +191,17 @@ export default {
     },
   },
   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;
+      } else {
+        console.log("response, file, fileList", response, file, fileList);
+      }
+    },
+
     /** utitilities */
     showButton(operate) {
       const notDetailMode = !this.detailMode;
diff --git a/src/components/uploadBtn/components/FileList.vue b/src/components/uploadBtn/components/FileList.vue
new file mode 100644
index 0000000..eaf5e65
--- /dev/null
+++ b/src/components/uploadBtn/components/FileList.vue
@@ -0,0 +1,89 @@
+<template>
+  <el-popover placement="right" :title="title" width="300" trigger="hover" class="mt-2 x-scroll">
+    <!-- <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">
+        <span>
+          {{ file.name }}
+        </span>
+        <div class="h-4 space-x-2">
+          <button class="el-icon-download text-blue-300" @click="handleDownload(file)"></button>
+          <button class="el-icon-delete text-red-300" @click="handleDelete(file)"></button>
+        </div>
+      </li>
+      <li v-if="filteredList.length === 0">无</li>
+    </ul>
+
+    <div class="search absolute top-0 right-0 mt-2 mr-2 cursor-pointer">
+      <transition name="fade" mode="out-in">
+        <button v-if="!showSearchInput" class="el-icon-search inline-block w-6 h-6" @click="handleSearchClick"></button>
+        <el-input
+          v-else
+          size="mini"
+          placeholder="请输入关键字"
+          clearable
+          @keydown.enter.native="showSearchInput = false"
+          @keydown.esc.native="showSearchInput = false"
+          v-model="searchCondition"
+      /></transition>
+    </div>
+
+    <!-- </div> -->
+    <el-button type="text" slot="reference" class="">{{ label }}</el-button>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    label: {
+      type: String,
+      default: "文件列表",
+    },
+    title: {
+      type: String,
+      default: "文件列表",
+    },
+    fileList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      showSearchInput: false,
+      searchCondition: "",
+    };
+  },
+  computed: {
+    filteredList() {
+      return this.fileList.filter((item) => item.name.startsWith(this.searchCondition));
+    },
+  },
+  methods: {
+    handleDownload(file) {
+      console.log("handleDownload", file);
+    },
+    handleDelete(file) {
+      console.log("handleDelete", file);
+    },
+    handleSearchClick() {
+      console.log("[FileList] handleSearchClick()");
+      this.showSearchInput = true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 100ms linear;
+}
+</style>
diff --git a/src/components/uploadBtn/index.vue b/src/components/uploadBtn/index.vue
new file mode 100644
index 0000000..d6f9a53
--- /dev/null
+++ b/src/components/uploadBtn/index.vue
@@ -0,0 +1,122 @@
+<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>
+
+		<FileList :file-list="fileList" />
+	</div>
+</template>
+
+<script>
+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);
+			}
+
+			this.fileList = fileList;
+			console.log("[vue] fileList", this.fileList);
+		},
+	},
+};
+</script>
+
+<style scoped>
+.upload-demo {
+}
+
+.upload-demo >>> .el-upload__tip {
+	display: inline-block;
+	margin-left: 12px;
+}
+
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 500ms ease-out;
+}
+
+::-webkit-scrollbar {
+	width: 8px;
+}
+::-webkit-scrollbar-track {
+	width: 8px;
+}
+::-webkit-scrollbar-button {
+	display: none;
+}
+::-webkit-scrollbar-thumb {
+	background: rgb(175, 175, 175);
+	border-radius: 4px;
+}
+</style>
diff --git a/src/views/modules/pms/equipmentType/config.js b/src/views/modules/pms/equipmentType/config.js
index 06f5ce0..df5ab95 100644
--- a/src/views/modules/pms/equipmentType/config.js
+++ b/src/views/modules/pms/equipmentType/config.js
@@ -1,5 +1,5 @@
 import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
-import StatusComponent from "@/components/noTemplateComponents/statusComponent";
+import detailComponent from "@/components/noTemplateComponents/detailComponent";
 import request from "@/utils/request";
 import { dictFind, timeFilter } from '@/utils/filters'
 
@@ -10,6 +10,7 @@ export default function () {
     { prop: "code", label: "类型编码" },
     // { prop: "description", label: "描述" },
     { prop: "remark", label: "备注" },
+    { prop: 'detail', label: "详情", subcomponent: detailComponent },
     {
       prop: "operations",
       name: "操作",
@@ -94,7 +95,7 @@ export default function () {
         ],
         // [{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],
         [{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
-        [{ upload: true, actionUrl: window.SITE_CONFIG['apiURL'] + '/pms/equipmentTypeFile', label: "上传资料", fileList:[], prop: "upload", elparams: null }],
+        [{ upload: true, actionUrl: window.SITE_CONFIG['apiURL'] + '/pms/attachment/uploadFileFormData?typeCode=equipmentType', label: "上传资料", fileList: [], prop: "upload", elparams: null }],
       ],
       operations: [
         { name: "add", label: "保存", type: "primary", permission: "pms:equipmentType:save", showOnEdit: false },
diff --git a/src/views/modules/pms/materialStorage/config.js b/src/views/modules/pms/materialStorage/config.js
index f2961b1..7292055 100644
--- a/src/views/modules/pms/materialStorage/config.js
+++ b/src/views/modules/pms/materialStorage/config.js
@@ -8,7 +8,7 @@ export default function () {
     { prop: "name", label: "料仓名称" },
     { prop: "code", label: "料仓编码" },
     { prop: "typeDictValue", label: "料仓类型", filter: dictFilter('liaocang') },
-    { prop: "status", label: "状态", subcomponent: switchBtn }, // subcomponent
+    { prop: "enabled", label: "状态", subcomponent: switchBtn }, // subcomponent
     { prop: "description", label: "描述" },
     { prop: "remark", label: "备注" },
     {