update upload
This commit is contained in:
parent
e7bfb25d3d
commit
4dff2473e5
@ -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,
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user