update 完成订单里的弹窗内容

This commit is contained in:
lb 2023-04-25 13:48:38 +08:00
parent 2ea77ba8fa
commit 343aadc6d9
8 changed files with 849 additions and 362 deletions

View File

@ -1,29 +1,31 @@
<template>
<el-dialog
class="dialog-with-menu"
style="padding: 40px"
style="padding: 32px"
:fullscreen="fullscreen"
:visible="visible"
@close="handleClose"
:destroy-on-close="false"
:close-on-click-modal="configs.clickModalToClose ?? true">
<el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
<el-tab-pane name="sub" label="子订单进度">
<SubOrderDetail v-if="order !== null" :order="order" />
</el-tab-pane>
<el-tab-pane name="car" label="窑车详情">
<CarDetail v-if="order !== null" :order-id="order.id" :table-layout="carLayoutKey" />
</el-tab-pane>
<el-tab-pane name="tray" label="托盘详情">
<TrayDetail />
</el-tab-pane>
<el-tab-pane name="order" label="订单详情">
<OrderDetail ref="order-detail-tag" :configs="configs" />
</el-tab-pane>
</el-tabs>
<div slot="title" style="background: #eee; padding: 8px; text-align: center; border-bottom: 1px solid #ccc">
<el-checkbox-group v-model="activeTab" @change="handleTabClick">
<el-checkbox-button :true-label="1">子订单进度</el-checkbox-button>
<el-checkbox-button :true-label="2">窑车详情</el-checkbox-button>
<el-checkbox-button :true-label="3">托盘详情</el-checkbox-button>
<el-checkbox-button :true-label="4">订单详情</el-checkbox-button>
</el-checkbox-group>
</div>
<!-- <transition mode="out-in" :name="toLeft ? 'fade-left' : 'fade-right'"> -->
<transition mode="out-in" name="fade-left">
<SubOrderDetail v-if="activeTab === 1 && order !== null" :order="order" />
<CarDetail v-if="activeTab === 2 && order !== null" :order-id="order.id" :table-layout="carLayoutKey" />
<TrayDetail v-if="activeTab === 3" />
<OrderDetailWrapper v-if="activeTab === 4" :order="order" :order-detail-configs="configs" />
</transition>
<!-- footer -->
<div slot="footer" style="">
<div slot="footer" style="background: #eee; padding: 10px 20px">
<el-button @click="handleClose">取消</el-button>
</div>
</el-dialog>
@ -31,13 +33,13 @@
<script>
import CarDetail from "./tabs/carDetail.vue";
import OrderDetail from "./tabs/orderDetail.vue";
import OrderDetailWrapper from "./tabs/orderDetailWrapper.vue";
import SubOrderDetail from "./tabs/subOrderDetail.vue";
import TrayDetail from "./tabs/trayDetail.vue";
export default {
name: "DialogWithMenu--OrderVersion",
components: { CarDetail, OrderDetail, SubOrderDetail, TrayDetail },
components: { CarDetail, OrderDetailWrapper, SubOrderDetail, TrayDetail },
props: {
configs: {
type: Object,
@ -53,26 +55,41 @@ export default {
return {
detailMode: false,
visible: false,
activeTab: "sub",
activeTab: 1,
oldActiveTab: 1,
order: null,
carLayoutKey: 0,
toLeft: true,
orderNotReady: true
};
},
mounted() {
document.body.style.overflow = "hidden";
},
beforeDestroy() {
document.body.style.overflow = "unset";
},
methods: {
handleTabClick(tab, event) {
console.log("handle tab click", tab, event);
switch (tab.label) {
case "子订单进度":
handleTabClick(tab) {
console.log("handle tab click", tab);
if (tab > this.oldActiveTab) this.toLeft = true;
else this.toLeft = false;
switch (tab) {
case 1:
//
break;
case "窑车详情":
case 2:
// "":
this.carLayoutKey = Math.random();
break;
case "托盘详情":
case 3:
// "":
break;
case "订单详情":
case 4:
// "":
break;
}
this.oldActiveTab = tab;
},
/** init **/
@ -81,10 +98,6 @@ export default {
this.order = order;
this.detailMode = detailMode ?? false;
this.visible = true;
this.$nextTick(() => {
this.$refs["order-detail-tag"].init(this.order.id, this.detailMode);
});
},
handleClose() {
@ -110,11 +123,26 @@ export default {
width: 100% !important;
}
.dialog-with-menu >>> .el-dialog {
border-radius: 8px;
display: flex;
flex-direction: column;
}
.dialog-with-menu >>> .el-dialog__header {
padding: 0;
}
.dialog-with-menu >>> .el-dialog__body {
height: calc(100% - 72px);
/* height: calc(100% - 72px); */
height: 1px;
flex: 1;
/* padding-bottom: 10px; */
overflow-y: auto;
}
.dialog-with-menu >>> .el-dialog__footer {
padding: 0;
}
.dialog-with-menu >>> .el-tabs__content {
@ -131,4 +159,44 @@ export default {
height: 0;
width: 0;
}
.fade-left-enter {
transform: translateX(10px);
opacity: 0;
}
.fade-left-enter-active,
.fade-left-leave-active {
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.fade-left-enter-to,
.fade-left-leave {
transform: translate(0);
}
.fade-left-leave-to {
transform: translateX(-10px);
opacity: 0;
}
.fade-right-enter {
transform: translateX(-10px);
opacity: 0;
}
.fade-right-leave-to {
transform: translateX(10px);
opacity: 0;
}
.fade-right-enter-active,
.fade-right-leave-active {
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.fade-right-enter-to,
.fade-right-leave {
transform: translateX(0);
}
</style>

View File

@ -28,7 +28,8 @@
ref="edit-dialog"
v-if="!!dialogConfigs && dialogVisible"
:configs="dialogConfigs"
@refreshDataList="getList" />
@refreshDataList="getList"
@destroy-dialog="dialogVisible = false" />
<!-- :dialog-visible.sync="dialogVisible" :configs="dialogConfigs" @refreshDataList="getList" /> -->
</div>
</template>

View File

@ -0,0 +1,44 @@
<template>
<div class="inputs-area">
<div class="inputs-area__title">{{ title }}</div>
<div class="inputs-area__main">
<slot />
</div>
</div>
</template>
<script>
export default {
name: "InputsArea",
props: {
title: {
type: String,
default: ''
}
},
};
</script>
<style scoped>
.inputs-area {
/* background: #ccc3; */
position: relative;
border: 1px solid #ccc;
margin-bottom: 24px;
}
.inputs-area__title {
position: absolute;
top: -12px;
left: 20px;
padding: 0 12px;
line-height: 24px;
min-width: 12px;
background: white;
user-select: none;
}
.inputs-area__main {
padding: 16px;
}
</style>

View File

@ -31,7 +31,7 @@
import BaseListTable from "@/components/BaseListTable.vue";
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
// import StateSelect from '@/components/StateSelect.vue';
import { timeFilter } from "@/utils/filters";
import { timeFilter, dictFilter } from "@/utils/filters";
import DialogCarPayload from "@/components/DialogCarPayload.vue";
export default {
@ -44,8 +44,8 @@ export default {
},
tableLayout: {
type: Number,
default: 0
}
default: 0,
},
},
data() {
return {
@ -54,7 +54,7 @@ export default {
{ type: "index", label: "序号" },
// { prop: "createTime", label: "", filter: timeFilter },
{ prop: "code", label: "窑车号" },
{ prop: "stateDictValue", label: "状态" }, // , subcomponent: StateSelect },
{ prop: "stateDictValue", label: "状态", filter: dictFilter("car_state") }, // , subcomponent: StateSelect },
// { prop: "stateDictValue", label: "", filter: v => (v !== null && v !== undefined) ? ['', '', '', ''][v] : '-' }, // subcomponent
// { prop: "orderCode", label: "" },
{ prop: "posCode", label: "位置" },
@ -112,8 +112,8 @@ export default {
immediate: true,
},
tableLayout() {
this.doLayout()
}
this.doLayout();
},
},
// activated() {
// console.log("hhh");

View File

@ -1,47 +1,71 @@
<template>
<div class="order-detail">
<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-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length" :class="{ h0: col.hidden }">
<!-- 通过多个 col === null 可以控制更灵活的 span 大小 -->
<el-form-item v-if="col !== null" :label="col.label" :prop="col.prop" :rules="col.rules || null">
<el-input v-if="col.input" v-model="dataForm[col.prop]" clearable :disabled="detailMode" v-bind="col.elparams" />
<el-cascader
v-if="col.cascader"
v-model="dataForm[col.prop]"
:options="col.options"
:disabled="detailMode"
v-bind="col.elparams"
></el-cascader>
<el-select v-if="col.select" v-model="dataForm[col.prop]" clearable :disabled="detailMode" v-bind="col.elparams">
<el-option v-for="(opt, optIdx) in col.options" :key="'option_' + optIdx" :label="opt.label" :value="opt.value" />
</el-select>
<el-switch
v-if="col.switch"
v-model="dataForm[col.prop]"
:active-value="col.activeValue ?? 1"
:inactive-value="col.activeValue ?? 0"
@change="handleSwitchChange"
:disabled="detailMode"
/>
<el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
<el-date-picker v-if="col.datetime" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
<div class="order-detail" style="padding-bottom: 6px;">
<el-skeleton v-if="loadingStatus" />
<el-form ref="dataForm" :model="dataForm" v-else size="small" style="padding: 0">
<!-- <el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus" size="small" style="padding:0 "> -->
<InputsArea v-for="field in configs.form.field" :key="field.title" :title="field.title">
<el-row v-for="(row, rowIndex) in field.rows" :key="'row_' + rowIndex" :gutter="20">
<el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length" :class="{ h0: col.hidden }">
<!-- 通过多个 col === null 可以控制更灵活的 span 大小 -->
<el-form-item v-if="col !== null" :label="col.label" :prop="col.prop" :rules="col.rules || null">
<el-input
v-if="col.input"
v-model="dataForm[col.prop]"
clearable
:disabled="detailMode"
v-bind="col.elparams" />
<el-cascader
v-if="col.cascader"
v-model="dataForm[col.prop]"
:options="col.options"
:disabled="detailMode"
v-bind="col.elparams"></el-cascader>
<el-select
v-if="col.select"
v-model="dataForm[col.prop]"
clearable
:disabled="detailMode"
v-bind="col.elparams">
<el-option
v-for="(opt, optIdx) in col.options"
:key="'option_' + optIdx"
:label="opt.label"
:value="opt.value" />
</el-select>
<el-switch
v-if="col.switch"
v-model="dataForm[col.prop]"
:active-value="col.activeValue ?? 1"
:inactive-value="col.activeValue ?? 0"
@change="handleSwitchChange"
:disabled="detailMode" />
<el-input
v-if="col.textarea"
type="textarea"
v-model="dataForm[col.prop]"
:disabled="detailMode"
v-bind="col.elparams" />
<el-date-picker
v-if="col.datetime"
v-model="dataForm[col.prop]"
:disabled="detailMode"
v-bind="col.elparams" />
<div class="" v-if="col.component" style="margin: 42px 0 0">
<!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO后续可能会根据业务需求创建新的版本 -->
<component
:is="col.component"
:key="'component_' + col.prop"
@update:modelValue="handleComponentModelUpdate(col.prop, $event)"
:modelValue="dataForm[col.prop] ?? ''"
:mode="detailMode ? 'detail' : dataForm.id ? 'edit' : 'create'"
v-bind="col.bind"
/>
</div>
<!-- add more... -->
</el-form-item>
</el-col>
</el-row>
<div class="" v-if="col.component" style="margin: 32px 0 0">
<!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO后续可能会根据业务需求创建新的版本 -->
<component
:is="col.component"
:key="'component_' + col.prop"
@update:modelValue="handleComponentModelUpdate(col.prop, $event)"
:modelValue="dataForm[col.prop] ?? ''"
:mode="detailMode ? 'detail' : dataForm.id ? 'edit' : 'create'"
v-bind="col.bind" />
</div>
<!-- add more... -->
</el-form-item>
</el-col>
</el-row>
</InputsArea>
</el-form>
</div>
</template>
@ -50,9 +74,11 @@
// import textOnlyComponent from "@/components/noTemplateComponents/textOnlyComponent.js";
import moment from "moment";
import { pick as __pick } from "@/utils/filters";
import InputsArea from "./InputsArea.vue";
export default {
name: "OrderDetailTag",
components: { InputsArea },
props: {
configs: {
type: Object,
@ -68,45 +94,60 @@ export default {
const watchList = [];
const cachedList = {};
this.configs.form.rows.forEach((row) => {
row.forEach((col) => {
dataForm[col.prop] = col.default ?? null;
this.configs.form.field.forEach((field) => {
field.rows.forEach((row) => {
row.forEach((col) => {
if (!col.prop) return;
if (col.fetchData)
col.fetchData().then(({ data: res }) => {
if (res.code === 0 && res.data.list) {
if ("injectTo" in col) {
//
cachedList[col.prop] = res.data.list;
}
dataForm[col.prop] = col.default ?? null;
this.$set(
col,
"options",
res.data.list.map((i) => ({
label: col.optionLabel ? i[col.optionLabel] : i.name,
value: col.optionValue ? i[col.optionValue] : i.id,
}))
);
} else {
col.options.splice(0);
}
});
else if (col.fetchTreeData) {
// parentId 0
col.fetchTreeData().then(({ data: res }) => {
// console.log("[DialogJustForm fetchTreeData -->]", res.data);
if (res.code === 0 && res.data) {
if ("list" in res.data) {
this.$set(col, "options", res.data.list);
} else if (Array.isArray(res.data)) {
this.$set(col, "options", res.data);
if (col.fetchData)
col.fetchData().then(({ data: res }) => {
if (res.code === 0) {
if (typeof res.data === "object" && "list" in res.data) {
if ("injectTo" in col) {
//
cachedList[col.prop] = res.data.list;
}
this.$set(
col,
"options",
res.data.list.map((i) => ({
label: col.optionLabel ? i[col.optionLabel] : i.name,
value: col.optionValue ? i[col.optionValue] : i.id,
}))
);
} else if (Array.isArray(res.data)) {
this.$set(
col,
"options",
res.data.map((i) => ({
label: col.optionLabel ? i[col.optionLabel] : i.name,
value: col.optionValue ? i[col.optionValue] : i.id,
}))
);
}
} else {
// error
col.options.splice(0);
}
} else {
col.options.splice(0);
}
});
}
});
else if (col.fetchTreeData) {
// parentId 0
col.fetchTreeData().then(({ data: res }) => {
// console.log("[DialogJustForm fetchTreeData -->]", res.data);
if (res.code === 0 && res.data) {
if ("list" in res.data) {
this.$set(col, "options", res.data.list);
} else if (Array.isArray(res.data)) {
this.$set(col, "options", res.data);
}
} else {
col.options.splice(0);
}
});
}
});
});
});
@ -120,25 +161,30 @@ export default {
},
mounted() {
/** 处理 injectTo 选项 */
this.configs.form.rows.forEach((row) => {
row.forEach((col) => {
if ("injectTo" in col && Array.isArray(col.injectTo)) {
col.injectTo.map((item) => {
const unwatch = this.$watch(
() => this.dataForm[col.prop],
(newVal) => {
const chosenObject = this.cachedList[col.prop]?.find((i) => i.id === newVal);
if (chosenObject) {
this.$set(this.dataForm, item[0], chosenObject[item[1]]);
this.configs.form.field.forEach((field) => {
field.rows.forEach((row) => {
row.forEach((col) => {
if (!col.prop) return;
if ("injectTo" in col && Array.isArray(col.injectTo)) {
// console.log("watching options ..... ", col);
col.injectTo.map((item) => {
const unwatch = this.$watch(
() => this.dataForm[col.prop],
(newVal) => {
const chosenObject = this.cachedList[col.prop].find((i) => i.id === newVal);
if (chosenObject) {
//
this.$set(this.dataForm, item[0], chosenObject[item[1]]);
}
},
{
immediate: false,
}
},
{
immediate: false,
}
);
this.watchList.push(unwatch);
});
}
);
this.watchList.push(unwatch);
});
}
});
});
});
},
@ -200,7 +246,9 @@ export default {
const { startTime, endTime } = this.dataForm;
httpPayload = {
...httpPayload,
startTime: startTime ? moment(startTime).format("YYYY-MM-DDTHH:mm:ss") : moment().format("YYYY-MM-DDTHH:mm:ss"),
startTime: startTime
? moment(startTime).format("YYYY-MM-DDTHH:mm:ss")
: moment().format("YYYY-MM-DDTHH:mm:ss"),
endTime: endTime ? moment(endTime).format("YYYY-MM-DDTHH:mm:ss") : moment().format("YYYY-MM-DDTHH:mm:ss"),
};
}
@ -288,6 +336,9 @@ export default {
this.$http
.get(this.urls.base + `/${this.dataForm.id}`)
.then(({ data: res }) => {
// emit
this.$emit("detail-loaded");
if (res && res.code === 0) {
this.dataForm = __pick(res.data, Object.keys(this.dataForm));
/** 格式化文件上传列表 */

View File

@ -0,0 +1,41 @@
<template>
<div style="height: 100%;">
<el-skeleton v-show="orderNotReady" />
<OrderDetail v-show="!orderNotReady" ref="order-detail-tag" :configs="orderDetailConfigs" @detail-loaded="orderNotReady = false" />
</div>
</template>
<script>
import OrderDetail from './orderDetail.vue';
export default {
name: "OrderDetailWrapper",
components: { OrderDetail },
props: {
orderDetailConfigs: {
type: Object,
default: () => null,
},
order: {
type: Object,
default: () => null
}
},
data() {
return {
detailMode: true,
orderNotReady: true
};
},
created() { },
mounted() {
console.log('this.order', this.order)
this.$nextTick(() => {
this.$refs["order-detail-tag"].init(this.order.id, this.detailMode);
});
},
methods: {},
};
</script>
<style scoped></style>

View File

@ -95,239 +95,516 @@ export default function () {
const dictList = JSON.parse(localStorage.getItem("dictList"));
// const dialogConfigs = {
// form: {
// rows: [
// [
// {
// label: "订单状态",
// prop: "statusDictValue",
// component: textOnlyComponent,
// },
// {
// input: true,
// label: "订单号",
// prop: "code",
// rules: { required: true, message: "必填项不能为空", trigger: "blur" },
// elparams: { placeholder: "请输入订单号" },
// },
// {
// input: true,
// label: "订单子号",
// prop: "cate",
// rules: [
// { required: true, message: "必填项不能为空", trigger: "blur" },
// { type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
// ],
// elparams: { placeholder: "请输入订单子号" },
// },
// {
// input: true,
// label: "生产订单类型",
// prop: "specifications",
// // rules: { required: true, message: "必填项不能为空", trigger: "blur" },
// elparams: { placeholder: "请输入生产订单类型" },
// },
// {
// select: true,
// label: "物料编号",
// prop: "productId",
// options: [],
// optionLabel: "code",
// fetchData: () => this.$http.get("/pms/product/page", { params: { limit: 999, page: 1, key: "" } }),
// elparams: { placeholder: "请选择物料", filterable: true },
// },
// {
// select: true,
// label: "包装代码",
// prop: "packTech",
// options: [],
// optionLabel: "code",
// fetchData: () => this.$http.post("/pms/equipmentTech/pageView", { limit: 999, page: 1, key: "", shape: "", wsId: 5 }),
// elparams: { placeholder: "请选择物料", filterable: true },
// },
// ],
// [
// {
// input: true,
// label: "生产订单砖数",
// prop: "prodqty",
// rules: [
// { required: true, message: "必填项不能为空", trigger: "blur" },
// { type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
// ],
// elparams: { placeholder: "请输入要求生产的数量" },
// },
// {
// input: true,
// label: "已生产数",
// prop: "yieldqty",
// rules: [
// { type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
// ],
// elparams: { placeholder: "请输入已经生产的数量" },
// },
// {
// input: true,
// label: "托盘码放砖数",
// prop: "pcsKilnCar",
// rules: [
// { required: true, message: "必填项不能为空", trigger: "blur" },
// { type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
// ],
// elparams: { placeholder: "请输入要求生产的数量" },
// },
// {
// input: true,
// label: "Add on",
// prop: "sapParam1",
// rules: { required: true, message: "必填项不能为空", trigger: "blur" },
// elparams: { placeholder: "请输入addon" },
// },
// {
// select: true,
// label: "砖型",
// prop: "shape",
// optionLabel: "code",
// options: [],
// fetchData: () => this.$http.get("/pms/shape/page", { params: { limit: 999, page: 1, key: "" } }),
// elparams: { placeholder: "请选择砖型", filterable: true },
// },
// {
// select: true,
// label: "压机",
// prop: "press",
// options: [],
// optionLabel: "code",
// rules: { required: true, message: "必填项不能为空", trigger: "blur" },
// fetchData: () => this.$http.get("/pms/equipment/page", { params: { limit: 999, page: 1, name: "" } }),
// elparams: { placeholder: "请选择压机号", filterable: true },
// },
// ],
// [
// {
// select: true,
// label: "牌号",
// prop: "bomId",
// options: [],
// fetchData: () => this.$http.get("/pms/bom/page", { params: { limit: 999, page: 1, key: "", externalCode: "" } }),
// elparams: { placeholder: "请选择牌号", filterable: true },
// injectTo: [
// ['bomCode', 'code'],
// ['ai', 'externalCode']
// ]
// },
// {
// label: "配方号代码",
// prop: "bomCode",
// component: textOnlyComponent,
// bind: {
// useBuiltin: false,
// },
// },
// {
// label: "版本号",
// prop: "ai",
// component: textOnlyComponent,
// bind: {
// useBuiltin: false,
// },
// },
// {
// select: true,
// label: "混料机号",
// prop: "blender",
// options: [],
// optionLabel: "code",
// rules: { required: true, message: "必填项不能为空", trigger: "blur" },
// fetchData: () => this.$http.get("/pms/equipment/page", { params: { limit: 999, page: 1, name: "" } }),
// elparams: { placeholder: "请选择混料机号", filterable: true },
// },
// {
// select: true,
// label: "隧道窑号",
// prop: "kiln",
// options: [],
// optionLabel: "code",
// fetchData: () => this.$http.get("/pms/equipment/page", { params: { limit: 999, page: 1, name: "" } }),
// elparams: { placeholder: "请选择隧道窑号", filterable: true },
// },
// {
// input: true,
// label: "烧成温度 ℃",
// prop: "sapParam6",
// rules: [
// { required: true, message: "必填项不能为空", trigger: "blur" },
// { type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
// ],
// elparams: { placeholder: "请输入烧成温度" },
// },
// ],
// [
// {
// input: true,
// label: "烧成时间 H",
// prop: "sapParam7",
// rules: [
// { required: true, message: "必填项不能为空", trigger: "blur" },
// { type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
// ],
// elparams: { placeholder: "请输入烧成时间" },
// },
// {
// input: true,
// label: "销售订单号",
// prop: "saleNo",
// rules: { required: true, message: "必填项不能为空", trigger: "blur" },
// elparams: { placeholder: "请输入销售订单号" },
// },
// {
// input: true,
// label: "销售订单item号",
// prop: "saleOrderItem",
// elparams: { placeholder: "请输入销售订单item号" },
// },
// {
// input: true,
// label: "销售订单砖数",
// prop: "soqty",
// rules: [
// { required: true, message: "必填项不能为空", trigger: "blur" },
// { type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
// ],
// elparams: { placeholder: "请输入销售订单砖数" },
// },
// {
// // time
// datetime: true,
// label: "销售时间",
// prop: "deliveryTime",
// rules: { required: true, message: "必填项不能为空", trigger: "blur" },
// elparams: { placeholder: "请选择销售时间" },
// },
// {
// select: true,
// label: "客户",
// prop: "customerId",
// option: [],
// optionLabel: "name",
// fetchData: () => this.$http.get("/pms/customer/page", { params: { limit: 999, page: 1, name: "" } }),
// rules: { required: true, message: "必填项不能为空", trigger: "blur" },
// elparams: { placeholder: "请选择客户" },
// },
// ],
// [
// {
// label: "物料号销售文本",
// prop: "shortDesc",
// component: textOnlyComponent,
// bind: {
// useBuiltin: false,
// },
// },
// ],
// // 备注
// [{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
// ],
// operations: [
// { name: "add", label: "保存", type: "primary", permission: "", showOnEdit: false },
// { name: "update", label: "更新", type: "primary", permission: "", showOnEdit: true },
// { name: "reset", label: "重置", type: "warning", showAlways: true },
// ],
// },
// };
const dialogConfigs = {
form: {
rows: [
[
{
label: "订单状态",
prop: "statusDictValue",
component: textOnlyComponent,
},
{
input: true,
label: "订单号",
prop: "code",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入订单号" },
},
{
input: true,
label: "订单子号",
prop: "cate",
rules: [
{ required: true, message: "必填项不能为空", trigger: "blur" },
{ type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
field: [
{
title: "生产订单",
rows: [
[
{
label: "订单状态",
prop: "statusDictValue",
component: textOnlyComponent,
},
{
input: true,
label: "订单号",
prop: "code",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "输入订单号" },
},
{
input: true,
label: "订单子号",
prop: "cate",
rules: [
{ required: true, message: "必填项不能为空", trigger: "blur" },
{ type: "number", message: "输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
],
elparams: { placeholder: "输入订单子号" },
},
{
datetime: true,
label: "计划开始时间",
prop: "planStartTime",
rules: {
required: true,
message: "必填项不能为空",
trigger: "blur",
},
elparams: {
placeholder: "选择计划开始时间",
type: "datetime",
},
},
],
elparams: { placeholder: "请输入订单子号" },
},
{
input: true,
label: "生产订单类型",
prop: "specifications",
// rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入生产订单类型" },
},
{
select: true,
label: "物料编号",
prop: "productId",
options: [],
optionLabel: "code",
fetchData: () => this.$http.get("/pms/product/page", { params: { limit: 999, page: 1, key: "" } }),
elparams: { placeholder: "请选择物料", filterable: true },
},
{
select: true,
label: "包装代码",
prop: "packTech",
options: [],
optionLabel: "code",
fetchData: () => this.$http.post("/pms/equipmentTech/pageView", { limit: 999, page: 1, key: "", shape: "", wsId: 5 }),
elparams: { placeholder: "请选择物料", filterable: true },
},
],
[
{
input: true,
label: "生产订单砖数",
prop: "prodqty",
rules: [
{ required: true, message: "必填项不能为空", trigger: "blur" },
{ type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
],
},
{
title: "设备与参数",
rows: [
[
{
select: true,
label: "压机",
prop: "press",
options: [],
optionLabel: "code",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
fetchData: () => this.$http.get("/pms/equipment/search", { params: { equipmentTypeCode: "Press" } }),
elparams: { placeholder: "选择压机", filterable: true },
},
{
select: true,
label: "混料机号",
prop: "blender",
options: [],
optionLabel: "code",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
fetchData: () => this.$http.get("/pms/equipment/search", { params: { equipmentTypeCode: "Mix" } }),
elparams: { placeholder: "选择混料机", filterable: true },
},
{
select: true,
label: "隧道窑号",
prop: "kiln",
options: [],
optionLabel: "code",
fetchData: () => this.$http.get("/pms/equipment/search", { params: { equipmentTypeCode: "Kiln" } }),
elparams: { placeholder: "选择隧道窑", filterable: true },
},
{
input: true,
label: "Add on",
prop: "sapParam1",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "输入addon" },
},
],
elparams: { placeholder: "请输入要求生产的数量" },
},
{
input: true,
label: "已生产数",
prop: "yieldqty",
rules: [
{ type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
[
{
select: true,
label: "牌号",
prop: "bomId",
options: [],
fetchData: () =>
this.$http.get("/pms/bom/page", { params: { limit: 999, page: 1, key: "", externalCode: "" } }),
elparams: { placeholder: "选择牌号", filterable: true },
injectTo: [
["bomCode", "code"],
["ai", "externalCode"],
],
},
{
label: "配方号",
prop: "bomCode",
component: textOnlyComponent,
bind: {
useBuiltin: false,
},
},
{
label: "版本号",
prop: "ai",
component: textOnlyComponent,
bind: {
useBuiltin: false,
},
},
{
select: true,
label: "包装代码",
prop: "packTech",
options: [],
optionLabel: "code",
fetchData: () =>
this.$http.post("/pms/equipmentTech/pageView", { limit: 999, page: 1, key: "", shape: "", wsId: 5 }),
elparams: { placeholder: "选择包装代码", filterable: true },
},
],
elparams: { placeholder: "请输入已经生产的数量" },
},
{
input: true,
label: "托盘码放砖数",
prop: "pcsKilnCar",
rules: [
{ required: true, message: "必填项不能为空", trigger: "blur" },
{ type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
[
{
select: true,
label: "物料",
prop: "productId",
options: [],
optionLabel: "code",
fetchData: () => this.$http.get("/pms/product/page", { params: { limit: 999, page: 1, key: "" } }),
elparams: { placeholder: "选择物料", filterable: true },
},
{
select: true,
label: "砖型",
prop: "shape",
optionLabel: "code",
options: [],
fetchData: () => this.$http.get("/pms/shape/page", { params: { limit: 999, page: 1, key: "" } }),
elparams: { placeholder: "选择砖型", filterable: true },
},
{
input: true,
label: "烧成温度",
prop: "sapParam6",
rules: [
{ required: true, message: "必填项不能为空", trigger: "blur" },
{ type: "number", message: "输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
],
elparams: { placeholder: "输入烧成温度" },
},
{
input: true,
label: "烧成时间 H",
prop: "sapParam7",
rules: [
{ required: true, message: "必填项不能为空", trigger: "blur" },
{ type: "number", message: "输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
],
elparams: { placeholder: "输入烧成时间" },
},
],
elparams: { placeholder: "请输入要求生产的数量" },
},
{
input: true,
label: "Add on",
prop: "sapParam1",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入addon" },
},
{
select: true,
label: "砖型",
prop: "shape",
optionLabel: "code",
options: [],
fetchData: () => this.$http.get("/pms/shape/page", { params: { limit: 999, page: 1, key: "" } }),
elparams: { placeholder: "请选择砖型", filterable: true },
},
{
select: true,
label: "压机",
prop: "press",
options: [],
optionLabel: "code",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
fetchData: () => this.$http.get("/pms/equipment/page", { params: { limit: 999, page: 1, name: "" } }),
elparams: { placeholder: "请选择压机号", filterable: true },
},
],
[
{
select: true,
label: "牌号",
prop: "bomId",
options: [],
fetchData: () => this.$http.get("/pms/bom/page", { params: { limit: 999, page: 1, key: "", externalCode: "" } }),
elparams: { placeholder: "请选择牌号", filterable: true },
injectTo: [
['bomCode', 'code'],
['ai', 'externalCode']
]
},
{
label: "配方号代码",
prop: "bomCode",
component: textOnlyComponent,
bind: {
useBuiltin: false,
},
},
{
label: "版本号",
prop: "ai",
component: textOnlyComponent,
bind: {
useBuiltin: false,
},
},
{
select: true,
label: "混料机号",
prop: "blender",
options: [],
optionLabel: "code",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
fetchData: () => this.$http.get("/pms/equipment/page", { params: { limit: 999, page: 1, name: "" } }),
elparams: { placeholder: "请选择混料机号", filterable: true },
},
{
select: true,
label: "隧道窑号",
prop: "kiln",
options: [],
optionLabel: "code",
fetchData: () => this.$http.get("/pms/equipment/page", { params: { limit: 999, page: 1, name: "" } }),
elparams: { placeholder: "请选择隧道窑号", filterable: true },
},
{
input: true,
label: "烧成温度 ℃",
prop: "sapParam6",
rules: [
{ required: true, message: "必填项不能为空", trigger: "blur" },
{ type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
],
},
{
title: "其他",
rows: [
[
{
input: true,
label: "生产订单类型",
prop: "specifications",
elparams: { placeholder: "输入生产订单类型" },
},
{
input: true,
label: "生产订单砖数",
prop: "prodqty",
rules: [
{ required: true, message: "必填项不能为空", trigger: "blur" },
{ type: "number", message: "输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
],
elparams: { placeholder: "输入要求生产的数量" },
},
{
input: true,
label: "已生产数",
prop: "yieldqty",
rules: [
{ type: "number", message: "输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
],
elparams: { placeholder: "输入已经生产的数量" },
},
{
input: true,
label: "托盘码放砖数",
prop: "pcsKilnCar",
rules: [
{ required: true, message: "必填项不能为空", trigger: "blur" },
{ type: "number", message: "输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
],
elparams: { placeholder: "输入托盘码放砖数" },
},
],
elparams: { placeholder: "请输入烧成温度" },
},
],
[
{
input: true,
label: "烧成时间 H",
prop: "sapParam7",
rules: [
{ required: true, message: "必填项不能为空", trigger: "blur" },
{ type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
[
{
input: true,
label: "销售订单号",
prop: "saleNo",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "输入销售订单号" },
},
{
input: true,
label: "销售订单item号",
prop: "saleOrderItem",
elparams: { placeholder: "输入销售订单item号" },
},
{
input: true,
label: "销售订单砖数",
prop: "soqty",
rules: [
{ required: true, message: "必填项不能为空", trigger: "blur" },
{ type: "number", message: "输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
],
elparams: { placeholder: "输入销售订单砖数" },
},
{
datetime: true,
label: "销售时间",
prop: "deliveryTime",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "选择销售时间" },
},
],
elparams: { placeholder: "请输入烧成时间" },
},
{
input: true,
label: "销售订单号",
prop: "saleNo",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入销售订单号" },
},
{
input: true,
label: "销售订单item号",
prop: "saleOrderItem",
elparams: { placeholder: "请输入销售订单item号" },
},
{
input: true,
label: "销售订单砖数",
prop: "soqty",
rules: [
{ required: true, message: "必填项不能为空", trigger: "blur" },
{ type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
[
{
select: true,
label: "客户",
prop: "customerId",
option: [],
optionLabel: "name",
fetchData: () => this.$http.get("/pms/customer/page", { params: { limit: 999, page: 1, name: "" } }),
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "选择客户" },
},
{
label: "物料号销售文本",
prop: "shortDesc",
component: textOnlyComponent,
bind: {
useBuiltin: false,
},
},
{},
{}
],
elparams: { placeholder: "请输入销售订单砖数" },
},
{
// time
datetime: true,
label: "销售时间",
prop: "deliveryTime",
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请选择销售时间" },
},
{
select: true,
label: "客户",
prop: "customerId",
option: [],
optionLabel: "name",
fetchData: () => this.$http.get("/pms/customer/page", { params: { limit: 999, page: 1, name: "" } }),
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请选择客户" },
},
],
[
{
label: "物料号销售文本",
prop: "shortDesc",
component: textOnlyComponent,
bind: {
useBuiltin: false,
},
},
],
// 备注
[{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
[
{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } },
],
],
},
],
operations: [
{ name: "add", label: "保存", type: "primary", permission: "", showOnEdit: false },
@ -338,7 +615,6 @@ export default function () {
};
return {
dialogConfigs,
tableConfig: {

View File

@ -51,6 +51,8 @@
title="导入订单"
@destroy-dialog="uploadDialogVisible = false"
@refresh-list="handleRefreshList" />
<Overlay v-if="overlayVisible" />
</section>
</template>
@ -61,11 +63,12 @@ import DialogJustForm from "./DialogJustForm.vue";
import DialogWithMenu from "./DialogWithMenu.vue";
import DialogUpload from "@/components/DialogUpload.vue";
import moment from "moment";
import Overlay from "@/components/Overlay.vue";
// const dictList = JSON.parse(localStorage.getItem("dictList"));
export default {
name: "ListSectionWithHead",
components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm, DialogUpload },
components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm, DialogUpload, Overlay },
props: {
headConfig: {
type: Object,
@ -125,6 +128,7 @@ export default {
renderDialog: false,
renderMenuDialog: false,
uploadDialogVisible: false,
overlayVisible: false,
};
},
mounted() {
@ -188,6 +192,7 @@ export default {
type: "warning",
})
.then(() => {
this.overlayVisible = true;
return this.$http.post("/pms/order/confirm", data, {
headers: {
"Content-Type": "application/json",
@ -195,6 +200,7 @@ export default {
});
})
.then(({ data: res }) => {
this.overlayVisible = false;
if (res.code === 0) {
// success
this.$message({