add 新增导入组件; update 更新配方bom的导入功能

This commit is contained in:
lb 2023-04-11 10:53:15 +08:00
parent 30d577e65b
commit 4ef75b055e
3 changed files with 302 additions and 72 deletions

View File

@ -0,0 +1,188 @@
<template>
<el-dialog
class="dialog-just-form"
:visible="visible"
@close="handleClose"
width="30%"
:title="title"
:destroy-on-close="false"
:close-on-click-modal="configs.clickModalToClose ?? true">
<el-upload
style="margin-top: 24px; text-align: center"
drag
:action="urls.importOrderUrl"
:headers="uploadHeaders"
:show-file-list="false"
:on-error="handleError"
:on-success="handleSuccess">
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">{{ hint }}</div>
</el-upload>
<div slot="footer">
<el-button type="success" @click="handleBtnClick({ name: 'download-template', filename, url })">下载模板</el-button>
<el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
</div>
</el-dialog>
</template>
<script>
import { pick as __pick } from "@/utils/filters";
import Cookies from "js-cookie";
// import moment from "moment";
export default {
name: "DialogUpload",
props: {
title: {
type: String,
default: '导入'
},
hint: {
hint: String,
default: '只能上传 Excel 文件'
},
filename: {
hint: String,
default: 'default_file.xlsx'
},
url: { //
hint: String,
default: '/importTemplates/orderImport.xlsx'
},
configs: {
type: Object,
default: () => ({
clickModalToClose: true,
forms: null,
}),
},
},
inject: ["urls"],
data() {
return {
loadingStatus: false,
visible: false,
};
},
computed: {
uploadHeaders() {
return {
token: Cookies.get("token") || "",
};
},
},
methods: {
init(data) {
this.visible = true;
},
fileTypeCheck() {
// : Boolean
},
fileSizeCheck() {
// : Boolean
},
handleSuccess(response, file, fileList) {
// console.log("success response", response);
let message = "";
let isError = false;
if (typeof response === "object" && "msg" in response) message = response.msg;
if (typeof response === "object" && "data" in response) message = response.data.toString();
if (typeof response === "string") {
message = response;
isError = true;
}
this.handleClose();
this.$message({
message,
type: isError ? "error" : "info",
duration: 2000,
});
},
handleError(err, file, fileList) {
console.log("err", err);
},
handleBtnClick(payload) {
if ("name" in payload) {
switch (payload.name) {
case "cancel":
this.handleClose();
break;
case "download-template":
this.handleDownloadTemplate(payload.filename, payload.url);
break;
}
}
},
handleDownloadTemplate(filename, href) {
this.$notify({
title: "提示",
message: "开始下载",
type: "success",
});
//
let a = document.createElement("a");
a.href = href;
a.download = filename ?? "orderTemplate.xlsx";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
},
handleUploadChange(file, fileList) {
// console.log("[Upload] handleUploadChange...", file, fileList);
},
handleClose() {
this.visible = false;
setTimeout(() => {
this.$emit("destroy-dialog");
}, 200);
},
},
};
</script>
<style scoped>
.dialog-just-form >>> .el-dialog__body {
/* padding-top: 16px !important;
padding-bottom: 16px !important; */
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.el-select,
.el-cascader,
.el-date-editor {
width: 100% !important;
}
.dialog-just-form >>> .el-dialog__header {
padding: 10px 20px 10px;
/* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
}
.h0 {
height: 0;
width: 0;
}
.dialog-just-form >>> .dialog-demo {
text-align: center;
}
</style>

View File

@ -4,23 +4,54 @@
<!-- <head-form :form-config="headFormConfig" @headBtnClick="btnClick" /> -->
<BaseSearchForm :head-config="headConfig" @btn-click="handleBtnClick" />
<BaseListTable v-loading="tableLoading" :table-config="tableConfig.table" :column-config="tableConfig.column"
:table-data="dataList" @operate-event="handleOperate" :current-page="page" :current-size="size"
<BaseListTable
v-loading="tableLoading"
:table-config="tableConfig.table"
:column-config="tableConfig.column"
:table-data="dataList"
@operate-event="handleOperate"
:current-page="page"
:current-size="size"
:refresh-layout-key="refreshLayoutKey" />
<el-pagination class="mt-5 flex justify-end" @size-change="handleSizeChange" @current-change="handlePageChange"
:current-page.sync="page" :page-sizes="[1, 5, 10, 20, 50, 100]" :page-size="size" :total="totalPage"
<el-pagination
class="mt-5 flex justify-end"
@size-change="handleSizeChange"
@current-change="handlePageChange"
:current-page.sync="page"
:page-sizes="[1, 5, 10, 20, 50, 100]"
:page-size="size"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
<!-- :current-page.sync="currentPage"
<!-- :current-page.sync="currentPage"
:page-size.sync="pageSize" -->
<DialogWithMenu ref="edit-dialog" v-if="!!dialogConfigs && dialogType === DIALOG_WITH_MENU"
:dialog-visible.sync="dialogVisible" :configs="dialogConfigs" @refreshDataList="getList" />
<DialogJustForm ref="edit-dialog" v-if="!!dialogConfigs && dialogType === DIALOG_JUST_FORM"
:dialog-visible.sync="dialogVisible" :configs="dialogConfigs" @refreshDataList="getList"
<DialogWithMenu
ref="edit-dialog"
v-if="!!dialogConfigs && dialogType === DIALOG_WITH_MENU"
:dialog-visible.sync="dialogVisible"
:configs="dialogConfigs"
@refreshDataList="getList" />
<DialogJustForm
ref="edit-dialog"
v-if="!!dialogConfigs && dialogType === DIALOG_JUST_FORM"
:dialog-visible.sync="dialogVisible"
:configs="dialogConfigs"
@refreshDataList="getList"
@emit-data="handleOperate" />
<DialogCarPayload ref="car-payload-dialog" v-if="!!carPayloadDialogConfigs"
:dialog-visible.sync="carPayloadDialogVisible" :configs="carPayloadDialogConfigs" @refreshDataList="getList" />
<DialogCarPayload
ref="car-payload-dialog"
v-if="!!carPayloadDialogConfigs"
:dialog-visible.sync="carPayloadDialogVisible"
:configs="carPayloadDialogConfigs"
@refreshDataList="getList" />
<DialogUpload
ref="upload-dialog"
v-if="uploadDialogVisible"
title="导入配方"
url="/importTemplates/bomImport.xlsx"
filename="bomTemplate.xlsx"
@refresh-list="getList" />
</div>
</template>
@ -30,6 +61,7 @@ import BaseSearchForm from "@/components/BaseSearchForm.vue";
import DialogWithMenu from "@/components/DialogWithMenu.vue";
import DialogJustForm from "@/components/DialogJustForm.vue";
import DialogCarPayload from "@/components/DialogCarPayload.vue";
import DialogUpload from "@/components/DialogUpload.vue";
import moment from "moment";
const DIALOG_WITH_MENU = "DialogWithMenu";
@ -38,7 +70,7 @@ const DIALOG_CARPAYLOAD = "DialogCarPayload";
export default {
name: "ListViewWithHead",
components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm, DialogCarPayload },
components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm, DialogCarPayload, DialogUpload },
props: {
tableConfig: {
type: Object,
@ -109,6 +141,7 @@ export default {
dataList: [],
tableLoading: false,
refreshLayoutKey: null,
uploadDialogVisible: false,
};
},
inject: ["urls"],
@ -123,9 +156,9 @@ export default {
const params = queryParams
? { ...queryParams, page: this.page, limit: this.size }
: {
page: this.page,
limit: this.size,
};
page: this.page,
limit: this.size,
};
if (!queryParams && this.listQueryExtra && this.listQueryExtra.length) {
this.listQueryExtra.map((nameOrObj) => {
@ -138,18 +171,15 @@ export default {
});
}
// if (this.urls.pageIsPostApi) {
// } else {
// get page
this.$http[this.urls.pageIsPostApi ? "post" : "get"](
this.urls.page,
this.urls.pageIsPostApi
? {
...params,
}
...params,
}
: {
params,
}
params,
}
)
.then(({ data: res }) => {
console.log("[http response] res is: ", res);
@ -245,7 +275,7 @@ export default {
}
});
})
.catch((err) => { });
.catch((err) => {});
}
case "edit": {
this.openDialog(data); /** data is ==> id */
@ -300,7 +330,7 @@ export default {
break;
}
case "to-bom-detail": {
console.log('to-bom-detail', data)
console.log("to-bom-detail", data);
//
return this.$router.push({
name: "pms-bomDetails",
@ -381,40 +411,39 @@ export default {
});
}
case "detach": {
return this.$confirm('是否下发?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http
.post(this.urls.detach, data /* { id: data } */, { headers: { "Content-Type": "application/json" } })
.then(({ data: res }) => {
if (res.code === 0) {
this.$message({
message: "下发成功",
type: "success",
duration: 1500,
onClose: () => {
this.getList();
},
});
} else {
this.$message({
message: `${res.code}: ${res.msg}`,
type: "error",
duration: 1500,
});
}
return this.$confirm("是否下发?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$http
.post(this.urls.detach, data /* { id: data } */, { headers: { "Content-Type": "application/json" } })
.then(({ data: res }) => {
if (res.code === 0) {
this.$message({
message: "下发成功",
type: "success",
duration: 1500,
onClose: () => {
this.getList();
},
});
} else {
this.$message({
message: `${res.code}: ${res.msg}`,
type: "error",
duration: 1500,
});
}
});
})
.catch(() => {
this.$message({
type: "warning",
message: "已取消下发",
});
}).catch(() => {
this.$message({
type: 'warning',
message: '已取消下发'
});
});
}
case "to-car-history": {
return this.$router.push({
@ -431,19 +460,21 @@ export default {
}
case "sync": {
//
this.$http.post(this.urls.syncSingleUrl, data, {
headers: {
"Content-Type": "application/json"
}
}).then(({ data: res }) => {
if (res.code === 0) {
this.$message({
message: '同步成功',
type: 'success'
});
this.getList();
}
})
this.$http
.post(this.urls.syncSingleUrl, data, {
headers: {
"Content-Type": "application/json",
},
})
.then(({ data: res }) => {
if (res.code === 0) {
this.$message({
message: "同步成功",
type: "success",
});
this.getList();
}
});
}
}
},
@ -461,7 +492,9 @@ export default {
case "新增":
this.openDialog();
break;
case "导入":
this.openUploadDialog();
break;
case "手动添加": {
this.openDialog();
return;
@ -502,9 +535,9 @@ export default {
case "同步":
case "全部同步":
this.$http.post(this.urls.syncUrl).then(({ data: res }) => {
console.log('全部同步', res)
console.log("全部同步", res);
if (res.code === 0) {
this.$message({ message: '同步成功', type: 'success' })
this.$message({ message: "同步成功", type: "success" });
this.getList();
}
});
@ -540,6 +573,14 @@ export default {
this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode, tag_info, extraParams);
});
},
openUploadDialog() {
this.uploadDialogVisible = true;
this.$nextTick(() => {
this.$refs["upload-dialog"].init();
});
},
},
};
</script>

View File

@ -251,6 +251,7 @@ export default function () {
copyUrl: "/pms/bom/copy",
subase: "/pms/bomMaterial",
subpage: "/pms/bomMaterial/page",
importOrderUrl: '/pms/order/importExcelBom', // 导入的api
},
};
}