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

update upload

Browse Source
This commit is contained in:
lb 2023-02-07 17:10:04 +08:00
parent e7bfb25d3d
commit 4dff2473e5
3 changed files with 155 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/DialogJustForm.vue
View File

@ -46,21 +46,16 @@
:disabled="detailMode" :disabled="detailMode"
/> />
<el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" /> <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" v-if="col.upload"
:key="'upload_' + Math.random()" :key="'upload_' + Math.random()"
:action="col.actionUrl" :action="col.actionUrl"
:file-list="col.fileList" :file-list="col.fileList"
:disabled="detailMode || !dataForm.id" :disabled="detailMode || !dataForm.id"
:on-change="handleUploadChange"
v-bind="col.elparams" 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"> <div class="" v-if="col.component" style="margin: 42px 0 0">
<!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO：后续可能会根据业务需求创建新的版本 --> <!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO：后续可能会根据业务需求创建新的版本 -->
<component <component
@ -92,6 +87,7 @@
<script> <script>
import { pick as __pick } from "@/utils/filters"; import { pick as __pick } from "@/utils/filters";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import uploadBtn from "@/components/uploadBtn";
function reConstructTreeData(listObj) { function reConstructTreeData(listObj) {
const entry = []; const entry = [];
@ -114,6 +110,7 @@ function reConstructTreeData(listObj) {
export default { export default {
name: "DialogJustForm", name: "DialogJustForm",
components: { uploadBtn },
props: { props: {
configs: { configs: {
type: Object, type: Object,

60
src/components/uploadBtn/components/FileList.vue
View File

@ -1,8 +1,8 @@
<template> <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"> --> <!-- <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> <span>
{{ file.name }} {{ file.name }}
</span> </span>
@ -14,22 +14,26 @@
<li v-if="filteredList.length === 0">无</li> <li v-if="filteredList.length === 0">无</li>
</ul> </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"> <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 <el-input
v-else v-else
size="mini" size="mini"
placeholder="请输入关键字" placeholder="请输入关键字"
clearable clearable
@keydown.enter.native="showSearchInput = false" @keydown.enter.native="showSearchInput = false"
@keydown.esc.native="showSearchInput = false" @keydown.esc.prevent.native="showSearchInput = false"
v-model="searchCondition" v-model="searchCondition"
/></transition> />
</transition>
</div> </div>
<!-- </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> </el-popover>
</template> </template>
@ -39,7 +43,7 @@ export default {
props: { props: {
label: { label: {
type: String, type: String,
default: "文件列表", default: "",
}, },
title: { title: {
type: String, type: String,
@ -86,4 +90,42 @@ export default {
.fade-leave-active { .fade-leave-active {
transition: opacity 100ms linear; 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> </style>

185
src/components/uploadBtn/index.vue
View File

@ -1,28 +1,28 @@
<template> <template>
<div class="p-8 w-96"> <div>
<el-upload <el-upload
name="files" :disabled="disabled"
class="upload-demo" name="files"
:action="action" class="upload-demo"
:show-file-list="false" :action="action"
:headers="uploadHeaders" :show-file-list="false"
:on-success="handleUploadSuccess" :headers="uploadHeaders"
> :on-success="handleUploadSuccess"
<el-button size="small" type="primary" class="text-blue-400">{{ >
buttonText <el-button :disabled="disabled" size="small" type="primary">{{ buttonText }}</el-button>
}}</el-button> <div slot="tip" class="el-upload__tip">
<div slot="tip" class="el-upload__tip"> <transition name="fade" mode="out-in">
<transition name="fade" mode="out-in"> <span key="noupload" v-if="!showMsg">
<span key="noupload" v-if="!showMsg"> {{ tips.hint }}
{{ tips }} </span>
</span> <span key="uploaded" v-else class="success-msg"> {{ tips.success }} </span>
<span key="uploaded" v-else class="text-green-300"> 上传成功! </span> </transition>
</transition> </div>
</div>
</el-upload>
<FileList :file-list="fileList" /> <FileList :file-list="fileList" />
</div> </el-upload>
</div>
</template> </template>
<script> <script>
@ -30,93 +30,104 @@ import Cookie from "js-cookie";
import FileList from "./components/FileList.vue"; import FileList from "./components/FileList.vue";
export default { export default {
name: "UploadBtn", name: "UploadBtn",
props: { props: {
buttonText: { buttonText: {
type: String, type: String,
default: "点击上传", default: "点击上传",
}, },
tips: { tips: {
type: String, type: Object,
default: "只能上传jpg/png文件, 且不超过500kb", default: () => ({
}, hint: "只能上传jpg/png文件, 且不超过500kb",
fileListProp: { success: "上传成功!",
type: Array, }),
default: () => [], },
}, action: {
}, type: String,
components: { FileList }, default: "http://192.168.1.62:8080/pms-am/pms/attachment/uploadFileFormData?typeCode=equipmentType", //
data() { },
return { fileListProp: {
action: type: Array,
"http://192.168.1.62:8080/pms-am/pms/attachment/uploadFileFormData?typeCode=equipmentType", // default: () => [],
showMsg: false, },
}; disabled: {
}, type: Boolean,
computed: { default: false,
uploadHeaders() { },
return { },
token: Cookie.get("demo-token") || "", components: { FileList },
}; data() {
}, return { showMsg: false, fileList: [] };
fileList: { },
get() { computed: {
return this.fileListProp uploadHeaders() {
} return {
} token: Cookie.get("token") || "",
}, };
methods: { },
handleUploadSuccess(response, file, fileList) { },
/** 上传成功修改本地展示的文件名 */ watch: {
if (response.code === 0) { fileListProp(list) {
// const { fileName } = response.data[0]; this.fileList = list;
const fileName = response.data[0].fileUrl.split("/").pop(); },
file.name = fileName; },
this.showMsg = true; methods: {
setTimeout(() => { handleUploadSuccess(response, file, fileList) {
this.showMsg = false; /** 上传成功修改本地展示的文件名 */
}, 3000); if (response.code === 0) {
} else { // const { fileName } = response.data[0];
console.log("response, file, fileList", response, file, fileList); 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; this.fileList = fileList;
console.log("[vue] fileList", this.fileList); console.log("[vue] fileList", this.fileList);
}, },
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.upload-demo { .upload-demo {
margin-top: 48px;
} }
.upload-demo >>> .el-upload__tip { /* .upload-demo >>> .el-upload__tip {
display: inline-block; display: inline-block;
margin-left: 12px; margin-left: 12px;
} } */
.fade-enter, .fade-enter,
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity 500ms ease-out; transition: opacity 500ms ease-out;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
width: 8px; width: 8px;
} }
::-webkit-scrollbar-button { ::-webkit-scrollbar-button {
display: none; display: none;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgb(175, 175, 175); background: rgb(175, 175, 175);
border-radius: 4px; border-radius: 4px;
}
.success-msg {
color: #67c23a;
} }
</style> </style>