@@ -9,3 +9,5 @@ | |||
@import "./pages/404.scss"; | |||
// 模块 | |||
@import "./modules/home.scss"; | |||
// 组件 | |||
@import "./components/dialog.scss"; |
@@ -0,0 +1,4 @@ | |||
[modal-append-to-body], | |||
.el-dialog__wrapper { | |||
backdrop-filter: blur(2px); | |||
} |
@@ -0,0 +1,110 @@ | |||
<template> | |||
<el-dialog | |||
class="dialog-just-form" | |||
title="查看批次" | |||
width="75%" | |||
:visible="visible" | |||
@close="handleClose" | |||
@closed="$emit('destroy')" | |||
:append-to-body="true" | |||
:close-on-click-modal="false"> | |||
<!-- list --> | |||
<BaseListTable | |||
:key="Math.random()" | |||
v-loading="tableLoading" | |||
:column-config="tableConfigs" | |||
:table-data="dataList" | |||
@operate-event="handleOperate" | |||
:refresh-layout-key="refreshLayoutKey" /> | |||
</el-dialog> | |||
</template> | |||
<script> | |||
import BaseListTable from "@/components/BaseListTable.vue"; | |||
import TableTextComponent from "@/components/noTemplateComponents/detailComponent"; | |||
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent"; | |||
import { timeFilter } from "@/utils/filters"; | |||
// import { pick as __pick } from "@/utils/filters"; | |||
export default { | |||
name: "DialogList", | |||
components: { BaseListTable }, | |||
props: { | |||
configs: { | |||
type: Object, | |||
default: () => ({ | |||
clickModalToClose: false, | |||
forms: null, | |||
}), | |||
}, | |||
}, | |||
data() { | |||
return { | |||
visible: false, | |||
loading: false, | |||
dataForm: {}, | |||
refreshLayoutKey: Math.random(), | |||
tableLoading: false, | |||
dataList: [], | |||
tableConfigs: [ | |||
{ type: "index", label: "序号" }, | |||
{ prop: "batchNo", label: "批次编码" }, | |||
{ prop: "batchSize", label: "批次重量 [kg]" }, | |||
{ prop: "status", label: "状态" }, | |||
{ prop: "startTime", label: "开始时间" }, | |||
{ prop: "task", label: "任务分类" }, | |||
{ prop: "blenderCode", label: "混料机" }, | |||
{ | |||
prop: "description", | |||
label: "详情", | |||
subcomponent: TableTextComponent, | |||
actionName: "view-blender-batch-details", | |||
}, | |||
{ width: 160, prop: "createTime", label: "添加时间", filter: timeFilter }, | |||
{ | |||
prop: "operations", | |||
name: "操作", | |||
fixed: "right", | |||
width: 90, | |||
subcomponent: TableOperaionComponent, | |||
options: [ | |||
// 只有 injectRow.task 为手动时,才允许编辑 | |||
// { name:"edit", label: "编辑", icon: "edit-outline", enable: injectRow => { return 'task' in injectRow && injectRow.task === 'Manual' } }, | |||
// { name: 'delete', icon: 'delete', enable: injectRow => { return 'task' in injectRow && injectRow.task === 'Manual' } }, | |||
// 只有 injectRow.status 为 waiting 时,才允许编辑 | |||
{ | |||
name: "edit", | |||
label: "编辑", | |||
icon: "edit-outline", | |||
enable: (injectRow) => { | |||
return "status" in injectRow && injectRow.status === "Waiting"; | |||
}, | |||
}, | |||
{ | |||
name: "delete", | |||
icon: "delete", | |||
emitFull: true, | |||
promptField: "batchNo", | |||
enable: (injectRow) => { | |||
return "status" in injectRow && injectRow.status === "Waiting"; | |||
}, | |||
}, | |||
], | |||
}, | |||
], | |||
}; | |||
}, | |||
methods: { | |||
init(id) { | |||
this.visible = true; | |||
}, | |||
handleClose() { | |||
this.visible = false; | |||
}, | |||
handleOperate() {}, | |||
}, | |||
}; | |||
</script> |
@@ -1,107 +0,0 @@ | |||
<template> | |||
<el-dialog | |||
class="dialog-just-form" | |||
:fullscreen="fullscreen" | |||
:title="查看批次" | |||
:visible="visible" | |||
@close="handleClose" | |||
:destroy-on-close="false" | |||
:close-on-click-modal="configs.clickModalToClose ?? false"></el-dialog> | |||
</template> | |||
<script> | |||
import { pick as __pick } from "@/utils/filters"; | |||
export default { | |||
name: "DialogList", | |||
components: {}, | |||
props: { | |||
configs: { | |||
type: Object, | |||
default: () => ({ | |||
clickModalToClose: false, | |||
forms: null, | |||
}), | |||
}, | |||
}, | |||
data() { | |||
return { | |||
loadingStatus: false, | |||
dataForm, | |||
watchList, | |||
cachedList, | |||
detailMode: false, | |||
baseDialogConfig: null, | |||
visible: false, | |||
}; | |||
}, | |||
methods: { | |||
/** init **/ | |||
init(id, detailMode) { | |||
this.visible = true; | |||
// console.log("[DialogJustForm] init", this.dataForm, id, detailMode); | |||
if (this.$refs.dataForm) { | |||
// console.log("[DialogJustForm] clearing form validation..."); | |||
// 当不是首次渲染dialog的时候,一开始就清空验证信息,本组件的循环里只有一个 dataForm 所以只用取 [0] 即可 | |||
this.$refs.dataForm.clearValidate(); | |||
} | |||
this.detailMode = detailMode ?? false; | |||
this.$nextTick(() => { | |||
this.dataForm.id = id || null; | |||
if (this.dataForm.id) { | |||
// 如果是编辑 | |||
this.loadingStatus = true; | |||
// 获取基本信息 | |||
this.$http | |||
.get(this.urls.base + `/${this.dataForm.id}`) | |||
.then(({ data: res }) => { | |||
if (res && res.code === 0) { | |||
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():", this.dataForm); | |||
} else { | |||
this.$message({ | |||
message: `${res.code}: ${res.msg}`, | |||
type: "error", | |||
duration: 1500, | |||
}); | |||
} | |||
this.loadingStatus = false; | |||
}) | |||
.catch((err) => { | |||
this.loadingStatus = false; | |||
this.$message({ | |||
message: `${err}`, | |||
type: "error", | |||
duration: 1500, | |||
}); | |||
}); | |||
} else { | |||
// 如果不是编辑 | |||
this.loadingStatus = false; | |||
} | |||
}); | |||
}, | |||
handleClose() { | |||
this.visible = false; | |||
setTimeout(() => { | |||
this.$emit("destroy-dialog"); | |||
// this.resetForm(); | |||
// this.$emit("update:dialogVisible", false); | |||
}, 200); | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -21,18 +21,22 @@ | |||
<!-- 编辑弹窗 --> | |||
<DialogJustForm ref="vdialog" v-if="false" /> | |||
<!-- 批次弹窗 --> | |||
<DialogList ref="dialogList" :configs="{}" /> | |||
<BatchDialog | |||
ref="batchDialog" | |||
v-if="batchDialogVisible" | |||
@destroy="batchDialogVisible = false" | |||
:configs="batchDialogConfigs" /> | |||
</div> | |||
</template> | |||
<script> | |||
import BaseListTable from "./BaseListTable.vue"; | |||
import DialogJustForm from "./DialogJustForm.vue"; | |||
import DialogList from "./DialogList.vue"; | |||
import BatchDialog from "./BatchDialog.vue"; | |||
export default { | |||
name: "TablePaginationComp", | |||
components: { BaseListTable, DialogJustForm, DialogList }, | |||
components: { BaseListTable, DialogJustForm, BatchDialog }, | |||
props: { | |||
tableConfig: { | |||
type: Object, | |||
@@ -64,6 +68,9 @@ export default { | |||
}, | |||
totalPage: 0, | |||
refreshLayoutKey: 0, | |||
/** batch related */ | |||
batchDialogVisible: false, | |||
batchDialogConfigs: {}, | |||
}; | |||
}, | |||
mounted() { | |||
@@ -80,7 +87,10 @@ export default { | |||
break; | |||
case "view-batch": | |||
// 查看批次 | |||
console.log("查看批次"); | |||
this.batchDialogVisible = true; | |||
this.$nextTick(() => { | |||
this.$refs.batchDialog.init(); | |||
}); | |||
break; | |||
case "detach": | |||
// 下发 | |||