update 订单管理的cell-class-name

This commit is contained in:
lb 2023-08-09 14:11:57 +08:00
parent bfd6a42349
commit bc5b6c2868
8 changed files with 161 additions and 56 deletions

View File

@ -305,7 +305,13 @@ export default function () {
return { return {
dialogConfigs, dialogConfigs,
tableConfig: { tableConfig: {
table: null, // 此处可省略el-table 上的配置项 table: {
"cell-class-name": ({ row, column, rowIndex, columnIndex }) => {
if ("statusDictValue" in row && row.statusDictValue == "2") {
return "cell-in-production";
}
},
},
column: tableProps, // el-column-item 上的配置项 column: tableProps, // el-column-item 上的配置项
}, },
headFormConfigs: { headFormConfigs: {

View File

@ -1,5 +1,6 @@
<template> <template>
<ListViewWithHead <ListViewWithHead
class="highlight-cell"
key="blender-order" key="blender-order"
:table-config="tableConfig" :table-config="tableConfig"
:head-config="headFormConfigs" :head-config="headFormConfigs"
@ -34,4 +35,11 @@ export default {
}; };
</script> </script>
<style scoped></style> <style scoped>
.highlight-cell >>> .cell-in-production {
background: rgba(33, 207, 134, 0.35);
}
.highlight-cell >>> .hover-row .cell-in-production {
background: rgba(33, 207, 134, 0.7);
}
</style>

View File

@ -220,8 +220,11 @@ export default {
}).then(() => { }).then(() => {
this.overlayVisible = true; this.overlayVisible = true;
return this.$http return this.$http
.post(this.urls.pressDetach, data /* { id: data } */, { headers: { "Content-Type": "application/json" } }) .post(this.urls.pressDetach, data /* { id: data } */, {
headers: { "Content-Type": "application/json" },
})
.then(({ data: res }) => { .then(({ data: res }) => {
this.overlayVisible = false;
if (res.code === 0) { if (res.code === 0) {
this.$message({ this.$message({
message: `下发成功`, message: `下发成功`,
@ -238,7 +241,6 @@ export default {
duration: 1500, duration: 1500,
}); });
} }
this.overlayVisible = false;
}); });
}); });
} }
@ -329,7 +331,9 @@ export default {
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code === 0) { if (res.code === 0) {
this.$message({ this.$message({
message: `${type === "detach" ? "下发" : type === "pause-blender" ? "暂停" : "开始"}成功`, message: `${
type === "detach" ? "下发" : type === "pause-blender" ? "暂停" : "开始"
}成功`,
type: "success", type: "success",
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {

View File

@ -9,11 +9,19 @@ export default function () {
{ width: 160, prop: "orderCode", label: "主订单号" }, { width: 160, prop: "orderCode", label: "主订单号" },
{ width: 60, prop: "orderCate", label: "子号" }, { width: 60, prop: "orderCate", label: "子号" },
{ width: 160, prop: "code", label: "混料订单号" }, { width: 160, prop: "code", label: "混料订单号" },
{ width: 60, prop: "percent", label: "进度", filter: (val) => (val !== null && val !== undefined ? val + " %" : "-") }, {
width: 60,
prop: "percent",
label: "进度",
filter: (val) => (val !== null && val !== undefined ? val + " %" : "-"),
},
{ {
prop: "statusDictValue", prop: "statusDictValue",
label: "订单状态", label: "订单状态",
filter: (val) => (val !== null && val !== undefined ? ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝", "已下发"][val] : "-"), filter: (val) =>
val !== null && val !== undefined
? ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝", "已下发"][val]
: "-",
}, },
{ prop: "bomCode", label: "配方" }, { prop: "bomCode", label: "配方" },
{ width: 120, prop: "qty", label: "混料总量 [kg]" }, { width: 120, prop: "qty", label: "混料总量 [kg]" },
@ -25,20 +33,30 @@ export default function () {
prop: "operations", prop: "operations",
name: "操作", name: "操作",
fixed: "right", fixed: "right",
width: 180, width: 188,
subcomponent: TableOperaionComponent, subcomponent: TableOperaionComponent,
options: [ options: [
{ {
name: "edit", label: "编辑", emitFull: true, icon: 'edit-outline', enable: injectData => { name: "edit",
const v = injectData.statusDictValue label: "编辑",
if (v && +v === 1) return true emitFull: true,
return false icon: "edit-outline",
} enable: (injectData) => {
const v = injectData.statusDictValue;
if (v && +v === 1) return true;
return false;
}, },
{ name: "view-batch", label: "查看批次", color: "#ff8000", toRouter: 'pms-blenderBatch', icon: 'document-copy' }, // 路由跳转至 pms-blenderBatch },
{ name: "pause-blender", label: "暂停", color: "#f10000", icon: 'video-pause' }, {
{ name: "start-blender", label: "开始", color: "#0b58ff", icon: 'video-play' }, name: "view-batch",
{ name: "detach", label: "下发", color: "#099", icon: 'bottom-right' }, label: "查看批次",
color: "#ff8000",
toRouter: "pms-blenderBatch",
icon: "document-copy",
}, // 路由跳转至 pms-blenderBatch
{ name: "pause-blender", label: "暂停", color: "#f10000", icon: "video-pause" },
{ name: "start-blender", label: "开始", color: "#0b58ff", icon: "video-play" },
{ name: "detach", label: "下发", color: "#099", icon: "bottom-right" },
], ],
}, },
]; ];
@ -48,8 +66,20 @@ export default function () {
{ width: 160, prop: "orderCode", label: "主订单号" }, { width: 160, prop: "orderCode", label: "主订单号" },
{ width: 60, prop: "orderCate", label: "子号" }, { width: 60, prop: "orderCate", label: "子号" },
{ width: 160, prop: "code", label: "压制订单号" }, { width: 160, prop: "code", label: "压制订单号" },
{ width: 60, prop: "percent", label: "进度", filter: (val) => (val !== null && val !== undefined ? val + " %" : "-") }, {
{ prop: "statusDictValue", label: "订单状态", filter: (val) => (val !== null && val !== undefined ? ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝", "已下发"][val] : "-"), }, width: 60,
prop: "percent",
label: "进度",
filter: (val) => (val !== null && val !== undefined ? val + " %" : "-"),
},
{
prop: "statusDictValue",
label: "订单状态",
filter: (val) =>
val !== null && val !== undefined
? ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝", "已下发"][val]
: "-",
},
{ prop: "startTime", label: "开始时间" }, { prop: "startTime", label: "开始时间" },
{ width: 100, prop: "shapeCode", label: "砖型" }, { width: 100, prop: "shapeCode", label: "砖型" },
{ prop: "pressCode", label: "压机" }, { prop: "pressCode", label: "压机" },
@ -64,11 +94,10 @@ export default function () {
fixed: "right", fixed: "right",
width: 80, width: 80,
subcomponent: TableOperaionComponent, subcomponent: TableOperaionComponent,
options: [{ name: 'detach', label: '下发', icon: 'bottom-right' }] options: [{ name: "detach", label: "下发", icon: "bottom-right" }],
}, },
]; ];
const headFormFields = [ const headFormFields = [
{ {
prop: "code", prop: "code",
@ -109,8 +138,8 @@ export default function () {
[ [
{ {
forceDisabled: true, forceDisabled: true,
prop: 'code', prop: "code",
label: '混料订单号' label: "混料订单号",
}, },
], ],
[ [
@ -119,10 +148,11 @@ export default function () {
label: "配方", label: "配方",
prop: "bomId", prop: "bomId",
options: [], options: [],
optionLabelProp: 'code', optionLabelProp: "code",
/** ====== */ /** ====== */
fetchData: (bomCode) => this.$http.get('/pms/bom/pageVersion', { params: { key: bomCode, limit: 999, page: 1 } }), fetchData: (bomCode) =>
fetchDataParam: 'bomCode', this.$http.get("/pms/bom/pageVersion", { params: { key: bomCode, limit: 999, page: 1 } }),
fetchDataParam: "bomCode",
delayRequest: true, delayRequest: true,
/** ====== */ /** ====== */
rules: { required: true, message: "必填项不能为空", trigger: "blur" }, rules: { required: true, message: "必填项不能为空", trigger: "blur" },
@ -135,8 +165,9 @@ export default function () {
label: "混料机", label: "混料机",
prop: "blender", prop: "blender",
options: [], options: [],
optionLabelProp: 'code', optionLabelProp: "code",
fetchData: () => this.$http.get('/pms/equipment/list', { params: { workSequenceName: '混料工序' } }), fetchData: () =>
this.$http.get("/pms/equipment/list", { params: { workSequenceName: "混料工序" } }),
rules: { required: true, message: "必填项不能为空", trigger: "blur" }, rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { clearable: true, filterable: true, placeholder: "请选择混料机" }, elparams: { clearable: true, filterable: true, placeholder: "请选择混料机" },
}, },
@ -146,18 +177,30 @@ export default function () {
{ name: "add", label: "保存", type: "primary", permission: "", showOnEdit: false }, { name: "add", label: "保存", type: "primary", permission: "", showOnEdit: false },
{ name: "update", label: "更新", type: "primary", permission: "", showOnEdit: true }, { name: "update", label: "更新", type: "primary", permission: "", showOnEdit: true },
// { name: "reset", label: "重置", type: "warning", showAlways: true }, // { name: "reset", label: "重置", type: "warning", showAlways: true },
] ],
}, },
}; };
return { return {
dialogConfigs, dialogConfigs,
tableConfig: { tableConfig: {
table: null, table: {
"cell-class-name": ({ row, column, rowIndex, columnIndex }) => {
if ("statusDictValue" in row && row.statusDictValue == "2") {
return "cell-in-production";
}
},
},
column: tableProps, column: tableProps,
}, },
pressTableConfig: { pressTableConfig: {
table: null, table: {
"cell-class-name": ({ row, column, rowIndex, columnIndex }) => {
if ("statusDictValue" in row && row.statusDictValue == "2") {
return "cell-in-production";
}
},
},
column: pressTableProps, column: pressTableProps,
}, },
headFormConfigs: { headFormConfigs: {
@ -171,7 +214,7 @@ export default function () {
pauseBlender: "/pms/trans/blenderPause", pauseBlender: "/pms/trans/blenderPause",
startBlender: "/pms/trans/blenderStart", startBlender: "/pms/trans/blenderStart",
pageIsPostApi: true, // 使用post接口来获取page数据极少用目前基本上只有工艺管理模块里在用 pageIsPostApi: true, // 使用post接口来获取page数据极少用目前基本上只有工艺管理模块里在用
changeBlender: '/pms/order/changeBlender', changeBlender: "/pms/order/changeBlender",
pressPage: "/pms/pressOrder/pageView", pressPage: "/pms/pressOrder/pageView",
pressDetach: "/pms/trans/pressDeli", pressDetach: "/pms/trans/pressDeli",
}, },

View File

@ -1,12 +1,12 @@
<template> <template>
<ListViewWithHead <ListViewWithHead
class="highlight-cell"
key="blender-order" key="blender-order"
:table-config="tableConfig" :table-config="tableConfig"
:press-table-config="pressTableConfig" :press-table-config="pressTableConfig"
:head-config="headFormConfigs" :head-config="headFormConfigs"
:dialog-configs="dialogConfigs" :dialog-configs="dialogConfigs"
:list-query-extra="[]" :list-query-extra="[]" />
/>
</template> </template>
<script> <script>
@ -37,4 +37,11 @@ export default {
}; };
</script> </script>
<style scoped></style> <style scoped>
.highlight-cell >>> .cell-in-production {
background: rgba(33, 207, 134, 0.35);
}
.highlight-cell >>> .hover-row .cell-in-production {
background: rgba(33, 207, 134, 0.7);
}
</style>

View File

@ -6,21 +6,19 @@
:refresh-key="keys.ongoing" :refresh-key="keys.ongoing"
:extra-search-conditions="{ code: '' }" :extra-search-conditions="{ code: '' }"
:page-url="allUrls.confirmedOrder" :page-url="allUrls.confirmedOrder"
:table-config="{ table: null, column: tableConfigs.ongoingTable }" :table-config="{ table: { 'cell-class-name': cellClassName }, column: tableConfigs.ongoingTable }"
:head-config="{ title: '进行中的订单', form: headFormConfigs.ongoingTableSearch }" :head-config="{ title: '进行中的订单', form: headFormConfigs.ongoingTableSearch }"
:dialog-config="dialogConfigs" :dialog-config="dialogConfigs"
@refresh-tables="handleRefreshTable" @refresh-tables="handleRefreshTable" />
/>
<ListSectionWithHead <ListSectionWithHead
id="pending" id="pending"
:refresh-key="keys.pending" :refresh-key="keys.pending"
:extra-search-conditions="{ code: '' }" :extra-search-conditions="{ code: '' }"
:page-url="allUrls.unConfirmedOrder" :page-url="allUrls.unConfirmedOrder"
:table-config="{ table: null, column: tableConfigs.pendingTable }" :table-config="{ table: { 'cell-class-name': cellClassName }, column: tableConfigs.pendingTable }"
:head-config="{ title: '等待中的订单', form: headFormConfigs.pendingTableSearch }" :head-config="{ title: '等待中的订单', form: headFormConfigs.pendingTableSearch }"
:dialog-config="dialogConfigs" :dialog-config="dialogConfigs"
@refresh-tables="handleRefreshTable" @refresh-tables="handleRefreshTable" />
/>
<!-- <ListSectionWithHead <!-- <ListSectionWithHead
id="finished" id="finished"
:refresh-key="keys.finished" :refresh-key="keys.finished"
@ -73,23 +71,30 @@ export default {
}, },
methods: { methods: {
scrollTo(pos) { scrollTo(pos) {
const el = document.querySelector(pos) const el = document.querySelector(pos);
window.scrollTo({ window.scrollTo({
top: el.offsetTop - 16, top: el.offsetTop - 16,
behavior: 'smooth' behavior: "smooth",
}) });
}, },
handleRefreshTable(tableNameList) { handleRefreshTable(tableNameList) {
if (Array.isArray(tableNameList)) { if (Array.isArray(tableNameList)) {
tableNameList.forEach(name => { tableNameList.forEach((name) => {
this.keys[name] = Math.random().toString() this.keys[name] = Math.random().toString();
}) });
} else { } else {
console.log('handleRefreshTable 需要传递数组!') console.log("handleRefreshTable 需要传递数组!");
} }
},
cellClassName({ row, column, rowIndex, columnIndex }) {
if ("statusDictValue" in row && row.statusDictValue == "2") {
console.log("setting cell style.....", row);
return "cell-in-production";
} }
}, },
},
}; };
</script> </script>
@ -138,4 +143,10 @@ export default {
/* margin-left: 144px; */ /* margin-left: 144px; */
flex-grow: 1; flex-grow: 1;
} }
.list-section-with-head >>> .cell-in-production {
background: rgba(33, 207, 134, 0.35);
}
.list-section-with-head >>> .hover-row .cell-in-production {
background: rgba(33, 207, 134, 0.7);
}
</style> </style>

View File

@ -10,8 +10,20 @@ export default function () {
{ width: 160, prop: "orderCode", label: "主订单号" }, { width: 160, prop: "orderCode", label: "主订单号" },
{ width: 60, prop: "orderCate", label: "子号" }, { width: 60, prop: "orderCate", label: "子号" },
{ width: 160, prop: "code", label: "压制订单号" }, { width: 160, prop: "code", label: "压制订单号" },
{ width: 90, prop: "percent", label: "进度", filter: (val) => (val !== null && val !== undefined ? val + " %" : "-") }, {
{ prop: "statusDictValue", label: "订单状态", filter: (val) => (val !== null && val !== undefined ? ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝", "已下发"][val] : "-"), }, width: 90,
prop: "percent",
label: "进度",
filter: (val) => (val !== null && val !== undefined ? val + " %" : "-"),
},
{
prop: "statusDictValue",
label: "订单状态",
filter: (val) =>
val !== null && val !== undefined
? ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝", "已下发"][val]
: "-",
},
{ width: 160, prop: "startTime", label: "开始时间", filter: timeFilter }, { width: 160, prop: "startTime", label: "开始时间", filter: timeFilter },
{ width: 100, prop: "shapeCode", label: "砖型" }, { width: 100, prop: "shapeCode", label: "砖型" },
{ prop: "pressCode", label: "压机" }, { prop: "pressCode", label: "压机" },
@ -30,7 +42,7 @@ export default function () {
fixed: "right", fixed: "right",
width: 80, width: 80,
subcomponent: TableOperaionComponent, subcomponent: TableOperaionComponent,
options: [{ name: 'detach', label: '下发', icon: 'bottom-right' }] // , url: '/pms/trans/pressDeli' }] options: [{ name: "detach", label: "下发", icon: "bottom-right" }], // , url: '/pms/trans/pressDeli' }]
// options: ["copy", { name: "edit", label: "编辑", icon: "edit-outline" }, { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "pms:blenderStep:delete" }], // options: ["copy", { name: "edit", label: "编辑", icon: "edit-outline" }, { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "pms:blenderStep:delete" }],
}, },
]; ];
@ -233,7 +245,13 @@ export default function () {
return { return {
// dialogConfigs, // dialogConfigs,
tableConfig: { tableConfig: {
table: null, // 此处可省略el-table 上的配置项 table: {
"cell-class-name": ({ row, column, rowIndex, columnIndex }) => {
if ("statusDictValue" in row && row.statusDictValue == "2") {
return "cell-in-production";
}
},
},
column: tableProps, // el-column-item 上的配置项 column: tableProps, // el-column-item 上的配置项
}, },
headFormConfigs: { headFormConfigs: {

View File

@ -1,5 +1,6 @@
<template> <template>
<ListViewWithHead <ListViewWithHead
class="highlight-cell"
:table-config="tableConfig" :table-config="tableConfig"
:head-config="headFormConfigs" :head-config="headFormConfigs"
:dialog-configs="dialogConfigs" :dialog-configs="dialogConfigs"
@ -30,4 +31,11 @@ export default {
}; };
</script> </script>
<style scoped></style> <style scoped>
.highlight-cell >>> .cell-in-production {
background: rgba(33, 207, 134, 0.35);
}
.highlight-cell >>> .hover-row .cell-in-production {
background: rgba(33, 207, 134, 0.7);
}
</style>