init uploadBtn
This commit is contained in:
parent
72043ed63f
commit
e7bfb25d3d
@ -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>
|
||||
<% } %>
|
||||
<!-- 集成测试环境 -->
|
||||
|
||||
@ -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
89
src/components/uploadBtn/components/FileList.vue
Normal 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
122
src/components/uploadBtn/index.vue
Normal 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>
|
||||
@ -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 },
|
||||
|
||||
@ -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: "备注" },
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user