mt-fe-group/pms-aomei
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

init uploadBtn

Browse Source
This commit is contained in:
lb
2023-02-07 16:31:47 +08:00
parent 72043ed63f
commit e7bfb25d3d
6 changed files with 231 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@@ -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>
<% } %>
<!-- 集成测试环境 -->

15
src/components/DialogJustForm.vue
View File

@@ -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;

89
src/components/uploadBtn/components/FileList.vue Normal file
View File

@@ -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>

122
src/components/uploadBtn/index.vue Normal file
View File

@@ -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>

5
src/views/modules/pms/equipmentType/config.js
View File

@@ -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 },

2
src/views/modules/pms/materialStorage/config.js
View File

@@ -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: "备注" },
{