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

update upload&download

Browse Source
This commit is contained in:
lb 2023-02-10 16:57:29 +08:00
parent 660803f34a
commit 39bf107fbe
5 changed files with 157 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/DialogJustForm.vue
View File

@ -51,9 +51,10 @@
v-if="col.upload"
:key="'upload_' + Math.random()"
:action="col.actionUrl"
:file-list="col.fileList"
:file-list="dataForm['files']"
:disabled="detailMode || !dataForm.id"
v-bind="col.elparams"
@update-file-list="handleFilelistUpdate"
/>
<quillEditor
@ -142,21 +143,14 @@ export default {
inject: ["urls"],
data() {
const dataForm = {};
const uploadComponentsList = []; // 保存当前窗口里的上传组件的配置信息的引用
this.configs.form.rows.forEach((row) => {
row.forEach((col) => {
// if (col.upload) dataForm[col.prop] = col.default ?? [];
// else dataForm[col.prop] = col.default ?? null;
dataForm[col.prop] = col.default ?? null;
if (col.upload) {
uploadComponentsList.push(col);
}
if (col.fetchData)
col.fetchData().then(({ data: res }) => {
console.log("[Fetch Data]", res.data.list);
console.log("[DialogJustForm fetchData -->]", res.data.list);
if (res.code === 0 && res.data.list) {
this.$set(
col,
@ -172,7 +166,7 @@ export default {
else if (col.fetchTreeData) {
// 获取设备类型时触发的，用于前端构建属性结构，约定，parentId 为0时是顶级节点
col.fetchTreeData().then(({ data: res }) => {
console.log("[Fetch Tree Data]", res.data.list);
console.log("[DialogJustForm fetchTreeData -->]", res.data.list);
if (res.code === 0 && res.data.list) {
// 先把数据先重构成一个对象
const obj = {};
@ -181,7 +175,6 @@ export default {
});
// 再过滤这个对象
let filteredList = reConstructTreeData(obj);
console.log("** filteredList **", filteredList);
// 最后设置 options
this.$set(col, "options", filteredList);
} else {
@ -195,7 +188,6 @@ export default {
loadingStatus: false,
dataForm,
detailMode: false,
uploadComponentsList,
baseDialogConfig: null,
defaultQuillConfig: {
modules: {
@ -233,15 +225,14 @@ 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);
}
handleFilelistUpdate(newFilelist) {
// TODO: 直接访问 .files 可能不太合适
this.dataForm.files = newFilelist.map((file) => ({
id: file.id,
name: file.name,
url: file.url,
typeCode: file.typeCode
}));
},
/** utitilities */
@ -257,12 +248,11 @@ export default {
resetForm(excludeId = false, immediate = false) {
setTimeout(
() => {
console.log("[Dialog Just Form] clearing form...");
Object.keys(this.dataForm).forEach((key) => {
if (excludeId && key === "id") return;
this.dataForm[key] = null;
});
console.log("[Dialog Just Form] cleared form...", this.dataForm);
console.log("[DialogJustForm resetForm()] clearing form...");
this.$refs.dataForm.clearValidate();
this.$emit("dialog-closed"); // 触发父组件销毁自己
},
@ -273,13 +263,11 @@ export default {
/** init **/
init(id, detailMode) {
if (this.$refs.dataForm) {
console.log("[dialog REUSE] clearing form validation...");
console.log("[DialogJustForm] clearing form validation...");
// 当不是首次渲染dialog的时候，一开始就清空验证信息，本组件的循环里只有一个 dataForm 所以只用取 [0] 即可
this.$refs.dataForm.clearValidate();
}
console.log("[Dialog Just Form] init():", id, detailMode);
this.detailMode = detailMode ?? false;
this.$nextTick(() => {
this.dataForm.id = id || null;
@ -290,30 +278,35 @@ export default {
// 获取基本信息
this.$http.get(this.urls.base + `/${this.dataForm.id}`).then(({ data: res }) => {
if (res && res.code === 0) {
const dataFormKeys = Object.keys(this.dataForm);
console.log("keys ===> ", dataFormKeys);
// console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys))
this.dataForm = __pick(res.data, dataFormKeys);
console.log("pick(res.data, dataFormKeys) ===> ", __pick(res.data, dataFormKeys));
this.dataForm = __pick(res.data, Object.keys(this.dataForm));
/** 格式化文件上传列表 */
if (Array.isArray(this.dataForm.files)) {
this.dataForm.files = this.dataForm.files.map((file) => ({
id: file.id,
name: file.fileUrl.split("/").pop(),
typeCode: file.typeCode,
url: file.fileUrl,
}));
}
console.log("[DialogJustForm] init():", __pick(res.data, Object.keys(this.dataForm)));
}
this.loadingStatus = false;
});
// 获取文件信息
this.uploadComponentsList.forEach((col) => {
this.$http
.get(col.fetchUrl, {
params: {
limit: 999,
page: 1,
[col.paramName]: this.dataForm.id,
},
})
.then(({ data: res }) => {
console.log("fetch filelist:", res);
});
});
// // 获取文件信息
// this.uploadComponentsList.forEach((col) => {
// this.$http
// .get(col.fetchUrl, {
// params: {
// limit: 999,
// page: 1,
// [col.paramName]: this.dataForm.id,
// },
// })
// .then(({ data: res }) => {
// console.log("fetch filelist:", res);
// });
// });
} else {
// 如果不是编辑
}
@ -356,13 +349,23 @@ export default {
this.$refs.dataForm.validate((passed, result) => {
if (passed) {
// 如果通过验证
this.loadingStatus = true;
const method = payload.name === "add" ? "POST" : "PUT";
let httpPayload = null;
/** 针对有文件上传选项的弹窗提供特殊的 payload */
if (this.dataForm.files) {
httpPayload = {
...this.dataForm,
fileIds: this.dataForm.files.map((file) => file.id),
};
} else {
httpPayload = this.dataForm;
}
/** 发送 */
this.$http({
url: this.urls.base,
method,
data: this.dataForm,
data: httpPayload,
})
.then(({ data: res }) => {
console.log("[add&update] res is: ", res);

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

@ -7,8 +7,8 @@
{{ 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>
<button class="el-icon-download color-blue" @click="handleDownload(file)" title="点击下载"></button>
<button class="el-icon-delete color-red" @click="handleDelete(file)" title="点击删除"></button>
</div>
</li>
<li v-if="filteredList.length === 0">无</li>
@ -31,7 +31,7 @@
<!-- </div> -->
<div v-if="label" slot="reference" class="">{{ label }}</div>
<div v-else slot="reference" class="el-icon-folder-opened" style="margin-left: 24px; cursor: pointer;"> 已上传文件</div>
<div v-else slot="reference" class="el-icon-folder-opened" style="margin-left: 24px; cursor: pointer">已上传文件</div>
</el-popover>
</template>
@ -58,6 +58,13 @@ export default {
searchCondition: "",
};
},
watch: {
fileList(val) {
if (val) {
console.log("[FileList] fileList prop:", val);
}
},
},
computed: {
filteredList() {
return this.fileList.filter((item) => item.name.startsWith(this.searchCondition));
@ -65,10 +72,35 @@ export default {
},
methods: {
handleDownload(file) {
console.log("handleDownload", file);
console.log("[FileList] handleDownload", file);
this.$http
.get("/pms/attachment/downloadFile", {
params: {
attachmentId: file.id,
type: 1,
},
})
.then(({ data: res }) => {
const blob = new Blob([res]);
if ("download" in document.createElement("a")) {
const alink = document.createElement("a");
alink.download = file.name;
alink.style.display = "none";
alink.target = "_blank";
alink.href = URL.createObjectURL(blob);
document.body.appendChild(alink);
alink.click();
URL.revokeObjectURL(alink.href);
document.body.removeChild(alink);
} else {
navigator.msSaveBlob(blob, fileName);
}
});
},
handleDelete(file) {
console.log("handleDelete", file);
console.log("[FileList] handleDelete", file);
// TODO: 警示删除操作
this.$emit("delete-a-file", file.id);
},
handleSearchClick() {
console.log("[FileList] handleSearchClick()");
@ -126,4 +158,27 @@ li {
width: 24px;
height: 24px;
}
::-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;
}
.color-blue {
color: #0b58ff;
cursor: pointer;
}
.color-red {
color: rgba(222, 15, 15, 0.89);
cursor: pointer;
}
</style>

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

@ -1,5 +1,5 @@
<template>
<div class="" style="position: relative;">
<div class="" style="position: relative">
<el-upload
:disabled="disabled"
name="files"
@ -18,10 +18,8 @@
<span key="uploaded" v-else class="success-msg"> {{ tips.success }} </span>
</transition>
</div>
</el-upload>
<FileList :file-list="fileList" style="display: inline-block; position: absolute; top: 0; left: 72px;" />
<FileList :file-list="uploadedFileList" @delete-a-file="handleRemoveFile" style="display: inline-block; position: absolute; top: 0; left: 72px" />
</div>
</template>
@ -47,7 +45,7 @@ export default {
type: String,
default: "http://192.168.1.62:8080/pms-am/pms/attachment/uploadFileFormData?typeCode=equipmentType", //
},
fileListProp: {
fileList: {
type: Array,
default: () => [],
},
@ -58,7 +56,17 @@ export default {
},
components: { FileList },
data() {
return { showMsg: false, fileList: [] };
return { showMsg: false, uploadedFileList: [] };
},
watch: {
// fileList: {
// handler: (arr) => {
// if (arr && arr.length > 0) {
// this.uploadedFileList = arr;
// }
// },
// immediate: true,
// },
},
computed: {
uploadHeaders() {
@ -67,28 +75,34 @@ export default {
};
},
},
watch: {
fileListProp(list) {
this.fileList = list;
},
mounted() {
console.log("[UploadBtn] mounted()", this.fileList, this.uploadedFileList);
this.uploadedFileList = this.fileList ?? [];
},
methods: {
handleRemoveFile(fileId) {
this.uploadedFileList = this.uploadedFileList.filter((file) => file.id.toString() !== fileId.toString());
this.$emit("update-file-list", this.uploadedFileList);
},
handleUploadSuccess(response, file, fileList) {
/** 上传成功修改本地展示的文件名 */
console.log("[UploadBtn] uploadedFileList", response, file, fileList, this.uploadedFileList);
if (response.code === 0) {
// const { fileName } = response.data[0];
const fileName = response.data[0].fileUrl.split("/").pop();
file.name = fileName;
const uploadedFile = response.data[0];
const fileItem = {
id: uploadedFile.id,
name: uploadedFile.fileUrl.split("/").pop(),
url: uploadedFile.fileUrl,
typeCode: file.typeCode,
};
this.uploadedFileList.push(fileItem);
this.$emit("update-file-list", this.uploadedFileList);
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);
},
},
};
@ -96,7 +110,7 @@ export default {
<style scoped>
.upload-demo {
margin-top: 48px;
margin-top: 48px;
}
/* .upload-demo >>> .el-upload__tip {
@ -114,20 +128,7 @@ export default {
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;
}
.success-msg {
color: #67c23a;
color: #67c23a;
}
</style>

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

@ -98,11 +98,8 @@ export default function () {
[{
upload: true,
actionUrl: window.SITE_CONFIG['apiURL'] + '/pms/attachment/uploadFileFormData?typeCode=equipmentType',
fetchUrl: '/pms/equipmentTypeFile/page',
label: "上传资料",
fileList: [],
prop: "upload",
paramName: 'equipmentTypeId',
prop: "files",
elparams: null
}],
],

14
src/views/modules/pms/material/config.js
View File

@ -13,8 +13,10 @@ export default function () {
{ prop: "type", label: "物料类型" },
{ prop: "enName", label: "英文名称" },
{ prop: "enAb", label: "英文缩写" },
{ prop: "description", label: "详情", subcomponent: TableTextComponent },
{ prop: "remark", label: "备注" },
{ prop: "density", label: "堆积密度" },
// { prop: "description", label: "详情", subcomponent: TableTextComponent },
{ prop: "description", label: "原料描述", },
{ prop: "remark", label: "中文描述" },
/** TODO: parentId 是用来前端重构成树形结构的... */
{
prop: "operations",
@ -81,7 +83,8 @@ export default function () {
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入物料编码" },
},
{ input: true, label: "规格", prop: "specifications", elparams: { placeholder: "规格" } },
{ input: true, label: "堆积密度(g/cm3)", prop: "density", elparams: { placeholder: "堆积密度" } },
],
[
{
@ -152,7 +155,10 @@ export default function () {
},
],
[{ textarea: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
[
{ input: true, label: "原料描述", prop: "description", elparams: { placeholder: "原料描述" } },
],
[{ input: true, label: "中文描述", prop: "remark", elparams: { placeholder: "备注" } }],
],
operations: [
{ name: "add", label: "保存", type: "primary", permission: "pms:material:save", showOnEdit: false },