update 订单新增编辑的字段

This commit is contained in:
lb 2023-03-09 17:01:53 +08:00
parent 79ed2d4f6a
commit 2eaafd5786
4 changed files with 284 additions and 145 deletions

View File

@ -1,6 +1,7 @@
<template> <template>
<el-dialog <el-dialog
class="dialog-just-form" class="dialog-just-form"
style="padding: 40px"
:visible="dialogVisible" :visible="dialogVisible"
@close="handleClose" @close="handleClose"
:destroy-on-close="false" :destroy-on-close="false"
@ -8,14 +9,14 @@
:fullscreen="fullscreen" :fullscreen="fullscreen"
> >
<!-- title --> <!-- title -->
<div slot="title" class="dialog-title"> <div slot="title" class="dialog-title" style="padding: 40px 40px 0">
<h1 class=""> <h1 class="">
{{ detailMode ? "查看详情" : dataForm.id ? "编辑" : "新增" }} {{ detailMode ? "查看详情" : dataForm.id ? "修改订单" : "新增订单" }}
</h1> </h1>
</div> </div>
<!-- form --> <!-- form -->
<el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus"> <el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus" style="padding: 0 40px">
<el-row v-for="(row, rowIndex) in configs.form.rows" :key="'row_' + rowIndex" :gutter="20"> <el-row v-for="(row, rowIndex) in configs.form.rows" :key="'row_' + rowIndex" :gutter="20">
<el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length" :class="{ h0: col.hidden }"> <el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length" :class="{ h0: col.hidden }">
<!-- 通过多个 col === null 可以控制更灵活的 span 大小 --> <!-- 通过多个 col === null 可以控制更灵活的 span 大小 -->
@ -66,7 +67,7 @@
:is="col.component" :is="col.component"
:key="'component_' + col.prop" :key="'component_' + col.prop"
@update:modelValue="handleComponentModelUpdate(col.prop, $event)" @update:modelValue="handleComponentModelUpdate(col.prop, $event)"
:modelValue="dataForm[col.prop]" :modelValue="dataForm[col.prop] ?? ''"
:mode="detailMode ? 'detail' : dataForm.id ? 'edit' : 'create'" :mode="detailMode ? 'detail' : dataForm.id ? 'edit' : 'create'"
/> />
</div> </div>
@ -108,8 +109,8 @@ export default {
}, },
fullscreen: { fullscreen: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
inject: ["urls"], inject: ["urls"],
data() { data() {
@ -124,7 +125,10 @@ export default {
this.$set( this.$set(
col, col,
"options", "options",
res.data.list.map((i) => ({ label: i.name, value: i.id })) res.data.list.map((i) => ({
label: i.name,
value: col.optionValueProp && `${col.optionValueProp}` in i ? i[col.optionValueProp] : i.id,
}))
); );
} else { } else {
col.options.splice(0); col.options.splice(0);
@ -175,6 +179,7 @@ export default {
/** init **/ /** init **/
init(parentId, detailMode) { init(parentId, detailMode) {
console.log("herer........", this.fullscreen);
if (this.$refs.dataForm) { if (this.$refs.dataForm) {
this.$refs.dataForm.clearValidate(); this.$refs.dataForm.clearValidate();
} }

View File

@ -27,7 +27,7 @@
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
></el-pagination> ></el-pagination>
<DialogJustForm ref="order-dialog" v-if="dialogVisible" /> <DialogJustForm modal-append-to-body ref="order-dialog" :dialog-visible.sync="dialogVisible" fullscreen :configs="dialogConfig" />
</section> </section>
</template> </template>
@ -326,6 +326,7 @@ export default {
this.dialogVisible = true; this.dialogVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
console.log('init dialog', row_id, detail_mode)
this.$refs["order-dialog"].init(/** some args... */ row_id, detail_mode); this.$refs["order-dialog"].init(/** some args... */ row_id, detail_mode);
}); });
}, },

View File

@ -84,7 +84,7 @@ export default function () {
subcomponent: TableOperaionComponent, subcomponent: TableOperaionComponent,
options: operations[type], options: operations[type],
width: operations[type].length * 64 width: operations[type].length * 64
}: {} } : {}
]; ];
@ -172,152 +172,285 @@ export default function () {
})[type] })[type]
const textOnlyComponent = {
props: {
modelValue: {
type: String,
required: true
}
},
data() {
return {
orderStatusMap: [
'等待', '确认', '生产', '暂停', '结束', '接受', '拒绝'
]
}
},
methods: {},
mounted() {
console.log('this.modelValue', this.modelValue)
},
render: function (h) {
return h('span', { style: { display: 'block', marginTop: '0' } }, this.orderStatusMap[this.modelValue] ?? '-')
}
}
const dictList = JSON.parse(localStorage.getItem("dictList")); const dictList = JSON.parse(localStorage.getItem("dictList"));
const dialogConfigs = { const dialogConfigs = {
menu: [
{ name: "原料信息", key: "info" },
{ name: "原料属性信息", key: "attr", onlyEditMode: true },
// { name: "添加子类", key: "add-sub", onlyEditMode: true },
],
form: { form: {
rows: [ rows: [
// 订单号
// 订单子号 int
// 订单状态
// 生产订单类型
// 物料 - 产品 select fitler
[ [
{ {
input: true, input: true,
label: "原料名称", label: "订单号",
prop: "name",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入原料名称" },
},
{
input: true,
label: "原料编码",
prop: "code", prop: "code",
rules: { required: true, message: "必填项不能为空", trigger: "blur" }, rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入原料编码" }, elparams: { placeholder: "请输入订单号" },
},
{},
{
input: true,
label: "订单子号",
prop: "cate",
rules: [
{ required: true, message: "必填项不能为空", trigger: "blur" },
{ type: 'number', message: "请输入正确的数字类型", trigger: "blur", transform: val => Number(val) },
],
elparams: { placeholder: "请输入订单子号" },
},
{
label: "订单状态",
prop: "statusDictValue",
component: textOnlyComponent
},
{
input: true,
label: "生产订单类型",
prop: "specifications",
// rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入生产订单类型" },
}, },
{ {
select: true, select: true,
label: "单位", label: "物料",
prop: "unitDictValue", prop: "productCode",
options: dictList["unit"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
elparams: { placeholder: "单位" },
},
],
[
// {
// cascader: true,
// label: "父级原料",
// prop: "parentId",
// // TODO: 待解决DialogWithMenu 中设置default只在初始化的时候有效一旦清空过就无效了
// // default: '0',
// // rules: { required: true, message: "必填项不能为空", trigger: "blur" },
// options: [{ id: '0', name: '无' }], // 手动注入额外选项,用到的场景不多...
// fetchData: () => this.$http.get('/pms/material/page', { params: { page: 1, limit: 999, key: '' } }),
// elparams: { placeholder: "请选择父级原料", filterable: true, clearable: true },
// // fetchTreeData: () => {
// // // TODO前提是工厂里总的设备类型数不会超过 999
// // return this.$http.get('/pms/material/tree', {
// // params: { rootId: '0' }
// // })
// // },
// // elparams: { placeholder: "请选择父级原料", 'show-all-levels': false, props: { checkStrictly: true } },
// },
{
select: true,
label: "原料类型",
prop: "typeId",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
options: [], options: [],
fetchData: () => this.$http.get('/pms/materialType/page', { params: { page: 1, limit: 999 } }), fetchData: () => this.$http.get('/pms/product/page', { params: { limit: 999, page: 1, key: '' } }),
elparams: { placeholder: "请输入原料类型" }, // label: "单位",
// autoDisabled: true, // 有某个条件触发后,自动变成 disabled 状态 // prop: "unitDictValue",
// options: dictList["unit"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
elparams: { placeholder: "请选择物料", filterable: true },
}, },
{
select: true,
label: "原料类别",
prop: "typeDictValue",
options: dictList["material_category"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
elparams: { placeholder: "原料类别" },
// autoDisabled: true
},
{ input: true, label: "堆积密度(g/cm³)", prop: "density", elparams: { placeholder: "堆积密度" } },
// {
// input: true,
// label: "设备类型",
// prop: "eqTypeId",
// rules: { required: true, message: "必填项不能为空", trigger: "blur" },
// elparams: { placeholder: "请输入设备类型" },
// },
], ],
// 生产订单数 int
// 已生产数 int uneditable
// 托盘码放砖数
// 包装代码 - 包装工艺 s f
// addon
[ [
{ {
input: true, input: true,
label: "英文名称", label: "生产订单砖数",
prop: "enName", prop: "prodqty",
elparams: { placeholder: "请输入英文名称" }, rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入要求生产的数量" },
}, },
{ {
input: true, input: true,
label: "缩写", label: "已生产数",
prop: "enAb", prop: "yieldqty",
elparams: { placeholder: "请输入缩写" }, // rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入已经生产的数量" },
},
{
input: true,
label: "托盘码放砖数",
prop: "pcsKilnCar",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入要求生产的数量" },
},
{
input: true,
label: "Add on",
prop: "addon",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入addon" },
},
{
select: true,
label: "包装代码",
prop: "packTechCode",
options: [],
fetchData: () => this.$http.post('/pms/equipmentTech/pageView', { limit: 999, page: 1, key: '', shape: '', wsId: 5 }),
// label: "单位",
// prop: "unitDictValue",
// options: dictList["unit"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
elparams: { placeholder: "请选择物料", filterable: true },
}, },
{ input: true, label: "原料描述", prop: "description", elparams: { placeholder: "原料描述" } },
], ],
[{ input: true, label: "中文描述", prop: "remark", elparams: { placeholder: "备注" } }],
// 砖型 select fitler
// 牌号 select f
// 压机号 - 设备 s f
// 混料机号 - 设备 s f
// 隧道窑号 - 设备 s f
[
{
select: true,
label: "砖型",
prop: "shapeCode",
options: [],
fetchData: () => this.$http.get('/pms/shape/page', { params: { limit: 999, page: 1, key: '' } }),
// label: "单位",
// prop: "unitDictValue",
// options: dictList["unit"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
elparams: { placeholder: "请选择砖型", filterable: true },
},
{
select: true,
label: "牌号",
prop: "brand",
options: [],
fetchData: () => this.$http.get('/pms/bom/page', { params: { limit: 999, page: 1, key: '' } }),
elparams: { placeholder: "请选择牌号", filterable: true },
// TODO: 选择后,需要带出一些数据
},
{
select: true,
label: "压机号",
prop: "pressCode",
options: [],
fetchData: () => this.$http.get('/pms/equipment/page', { params: { limit: 999, page: 1, name: '' } }),
elparams: { placeholder: "请选择压机号", filterable: true },
},
{
select: true,
label: "混料机号",
prop: "blenderCode",
options: [],
fetchData: () => this.$http.get('/pms/equipment/page', { params: { limit: 999, page: 1, name: '' } }),
elparams: { placeholder: "请选择混料机号", filterable: true },
},
{
select: true,
label: "隧道窑号",
prop: "kilnCode",
options: [],
fetchData: () => this.$http.get('/pms/equipment/page', { params: { limit: 999, page: 1, name: '' } }),
elparams: { placeholder: "请选择隧道窑号", filterable: true },
},
],
// 烧成温度
// 烧成时间
// ai 随配方自动带出
// 配方号代码 随配方自动带出
// 物料号销售文本 随配方自动带出
[
{
input: true,
label: "烧成温度",
prop: "ktmp",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入烧成温度" },
},
{
input: true,
label: "烧成时间",
prop: "tt",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入烧成时间" },
},
{
input: true,
label: "版本号",
prop: "ai",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入版本号" },
},
{
input: true,
label: "配方号代码",
prop: "bomCode",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入配方号代码" },
},
{
input: true,
label: "物料号销售文本",
prop: "shortDesc",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入物料号销售文本" },
},
],
// 销售订单号
// 销售订单item号
// 销售订单砖数 int
// 销售时间
// 客户名
[
{
input: true,
label: "销售订单号",
prop: "saleNo",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入销售订单号" },
},
{
input: true,
label: "销售订单item号",
prop: "saleOrderItem",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入销售订单item号" },
},
{
input: true,
label: "销售订单砖数",
prop: "soqty",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入销售订单砖数" },
},
{
// time
input: true,
label: "销售时间",
prop: "deliveryTime",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入销售时间" },
},
{
input: true,
label: "客户",
prop: "customerCode",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入客户" },
},
],
// 备注
[{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
// {
// select: true,
// label: "原料类别",
// prop: "typeDictValue",
// options: dictList["material_category"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
// elparams: { placeholder: "原料类别" },
// // autoDisabled: true
// },
], ],
operations: [ operations: [
{ name: "add", label: "保存", type: "primary", permission: "pms:material:save", showOnEdit: false }, { name: "add", label: "保存", type: "primary", permission: "pms:material:save", showOnEdit: false },
{ name: "update", label: "更新", type: "primary", permission: "pms:material:save", showOnEdit: true }, { name: "update", label: "更新", type: "primary", permission: "pms:material:save", showOnEdit: true },
{ name: "reset", label: "重置", type: "warning", showAlways: true }, { name: "reset", label: "重置", type: "warning", showAlways: true },
// { name: 'cancel', label: '取消', showAlways: true },
],
},
table: {
// extraParams: ['stepId'],
extraParams: "materialId",
props: [
{ type: 'index', label: '序号' },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: "name", label: "属性名", isEditField: true },
{ prop: "value", label: "属性值", isEditField: true },
{
prop: "operations",
name: "操作",
fixed: "right",
width: 120,
subcomponent: TableOperaionComponent,
options: [
{ name: "edit", permission: "pms:materialArrt:save" },
{ name: "delete", emitFull: true, permission: "pms:materialArrt:save" },
],
},
],
data: [
// TOOD 暂时用不到,但获取可以考虑把拉取接口数据的函数迁移到此文件(没有太大必要)
],
},
subDialog: {
extraParam: "materialId",
forceAttachCode: true,
rows: [
[
{ input: true, label: "属性名", prop: "name", elparams: { placeholder: "请输入属性名" } }
],
[
{ input: true, label: "属性值", prop: "value", elparams: { placeholder: "请输入属性值" } }
],
[
{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "请输入备注" } },
]
],
operations: [
{ name: "add", label: "保存", type: "primary", permission: "pms:materialArrt:save", showOnEdit: false },
{ name: "update", label: "更新", type: "primary", permission: "pms:materialArrt:update", showOnEdit: true },
// { name: 'reset', label: '重置', type: 'warning', showAlways: true },
// { name: 'cancel', label: '取消', showAlways: true },
], ],
}, },
}; };

View File

@ -15,7 +15,7 @@
:page-url="allUrls.confirmedOrder" :page-url="allUrls.confirmedOrder"
:table-config="{ table: null, column: tableConfigs.ongoingTable }" :table-config="{ table: null, column: tableConfigs.ongoingTable }"
:head-config="{ title: '进行中的订单', form: headFormConfigs.ongoingTableSearch }" :head-config="{ title: '进行中的订单', form: headFormConfigs.ongoingTableSearch }"
:dialog-config="null" :dialog-config="dialogConfigs"
@refresh-tables="handleRefreshTable" @refresh-tables="handleRefreshTable"
/> />
<ListSectionWithHead <ListSectionWithHead
@ -25,7 +25,7 @@
:page-url="allUrls.unConfirmedOrder" :page-url="allUrls.unConfirmedOrder"
:table-config="{ table: null, column: tableConfigs.pendingTable }" :table-config="{ table: null, column: tableConfigs.pendingTable }"
:head-config="{ title: '等待中的订单', form: headFormConfigs.pendingTableSearch }" :head-config="{ title: '等待中的订单', form: headFormConfigs.pendingTableSearch }"
:dialog-config="null" :dialog-config="dialogConfigs"
@refresh-tables="handleRefreshTable" @refresh-tables="handleRefreshTable"
/> />
<ListSectionWithHead <ListSectionWithHead
@ -35,7 +35,7 @@
:page-url="allUrls.finishedOrder" :page-url="allUrls.finishedOrder"
:table-config="{ table: null, column: tableConfigs.finishedTable }" :table-config="{ table: null, column: tableConfigs.finishedTable }"
:head-config="{ title: '完成的订单', form: headFormConfigs.finishedTableSearch }" :head-config="{ title: '完成的订单', form: headFormConfigs.finishedTableSearch }"
:dialog-config="null" :dialog-config="dialogConfigs"
@refresh-tables="handleRefreshTable" @refresh-tables="handleRefreshTable"
/> />
</div> </div>
@ -103,21 +103,21 @@ export default {
}, },
}, },
methods: { methods: {
handleUp({ $index, row }) { // handleUp({ $index, row }) {
console.log("row: ", $index, row); // console.log("row: ", $index, row);
if ($index === 0) return; // if ($index === 0) return;
const [item] = this.dataList.splice($index, 1); // const [item] = this.dataList.splice($index, 1);
console.log("item: ", item); // console.log("item: ", item);
this.dataList.splice($index - 1, 0, item); // this.dataList.splice($index - 1, 0, item);
console.log("dataList: ", this.dataList); // console.log("dataList: ", this.dataList);
// this.dataList // // this.dataList
}, // },
handleDown({ $index, row }) { // handleDown({ $index, row }) {
// const { id } = row; // // const { id } = row;
if ($index === this.limit) return; // if ($index === this.limit) return;
const [item] = this.dataList.splice($index, 1); // const [item] = this.dataList.splice($index, 1);
this.dataList.splice($index + 1, 0, item); // this.dataList.splice($index + 1, 0, item);
}, // },
// //
handleRefreshTable(tableNameList) { handleRefreshTable(tableNameList) {
if (Array.isArray(tableNameList)) { if (Array.isArray(tableNameList)) {