@@ -9,3 +9,5 @@ | |||||
@import "./pages/404.scss"; | @import "./pages/404.scss"; | ||||
// 模块 | // 模块 | ||||
@import "./modules/home.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" /> | <DialogJustForm ref="vdialog" v-if="false" /> | ||||
<!-- 批次弹窗 --> | <!-- 批次弹窗 --> | ||||
<DialogList ref="dialogList" :configs="{}" /> | |||||
<BatchDialog | |||||
ref="batchDialog" | |||||
v-if="batchDialogVisible" | |||||
@destroy="batchDialogVisible = false" | |||||
:configs="batchDialogConfigs" /> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import BaseListTable from "./BaseListTable.vue"; | import BaseListTable from "./BaseListTable.vue"; | ||||
import DialogJustForm from "./DialogJustForm.vue"; | import DialogJustForm from "./DialogJustForm.vue"; | ||||
import DialogList from "./DialogList.vue"; | |||||
import BatchDialog from "./BatchDialog.vue"; | |||||
export default { | export default { | ||||
name: "TablePaginationComp", | name: "TablePaginationComp", | ||||
components: { BaseListTable, DialogJustForm, DialogList }, | |||||
components: { BaseListTable, DialogJustForm, BatchDialog }, | |||||
props: { | props: { | ||||
tableConfig: { | tableConfig: { | ||||
type: Object, | type: Object, | ||||
@@ -64,6 +68,9 @@ export default { | |||||
}, | }, | ||||
totalPage: 0, | totalPage: 0, | ||||
refreshLayoutKey: 0, | refreshLayoutKey: 0, | ||||
/** batch related */ | |||||
batchDialogVisible: false, | |||||
batchDialogConfigs: {}, | |||||
}; | }; | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
@@ -80,7 +87,10 @@ export default { | |||||
break; | break; | ||||
case "view-batch": | case "view-batch": | ||||
// 查看批次 | // 查看批次 | ||||
console.log("查看批次"); | |||||
this.batchDialogVisible = true; | |||||
this.$nextTick(() => { | |||||
this.$refs.batchDialog.init(); | |||||
}); | |||||
break; | break; | ||||
case "detach": | case "detach": | ||||
// 下发 | // 下发 | ||||