update 完成订单里的弹窗内容

src/views/modules/pms/finishedOrder/components/DialogWithMenu.vue

@@ -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">
+    <div slot="title" style="background: #eee; padding: 8px; text-align: center; border-bottom: 1px solid #ccc">
-      <el-tab-pane name="sub" label="子订单进度">
+      <el-checkbox-group v-model="activeTab" @change="handleTabClick">
-        <SubOrderDetail v-if="order !== null" :order="order" />
+        <el-checkbox-button :true-label="1">子订单进度</el-checkbox-button>
-      </el-tab-pane>
+        <el-checkbox-button :true-label="2">窑车详情</el-checkbox-button>
-      <el-tab-pane name="car" label="窑车详情">
+        <el-checkbox-button :true-label="3">托盘详情</el-checkbox-button>
-        <CarDetail v-if="order !== null" :order-id="order.id" :table-layout="carLayoutKey" />
+        <el-checkbox-button :true-label="4">订单详情</el-checkbox-button>
-      </el-tab-pane>
+      </el-checkbox-group>
-      <el-tab-pane name="tray" label="托盘详情">
+    </div>
-        <TrayDetail />
+
-      </el-tab-pane>
+    <!-- <transition mode="out-in" :name="toLeft ? 'fade-left' : 'fade-right'"> -->
-      <el-tab-pane name="order" label="订单详情">
+    <transition mode="out-in" name="fade-left">
-        <OrderDetail ref="order-detail-tag" :configs="configs" />
+      <SubOrderDetail v-if="activeTab === 1 && order !== null" :order="order" />
-      </el-tab-pane>
+      <CarDetail v-if="activeTab === 2 && order !== null" :order-id="order.id" :table-layout="carLayoutKey" />
-    </el-tabs>
+      <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) {
+    handleTabClick(tab) {
-      console.log("handle tab click", tab, event);
+      console.log("handle tab click", tab);
-      switch (tab.label) {
+      if (tab > this.oldActiveTab) this.toLeft = true;
-        case "子订单进度":
+      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>

src/views/modules/pms/finishedOrder/components/ListViewWithHead.vue

@@ -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>

src/views/modules/pms/finishedOrder/components/tabs/InputsArea.vue

@@ -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>

src/views/modules/pms/finishedOrder/components/tabs/carDetail.vue

@@ -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");

src/views/modules/pms/finishedOrder/components/tabs/orderDetail.vue

@@ -1,47 +1,71 @@
 <template>
-  <div class="order-detail">
+  <div class="order-detail" style="padding-bottom: 6px;">
-    <el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus" style="padding: 0 40px">
+    <el-skeleton v-if="loadingStatus" />
-      <el-row v-for="(row, rowIndex) in configs.form.rows" :key="'row_' + rowIndex" :gutter="20">
+    <el-form ref="dataForm" :model="dataForm" v-else size="small" style="padding: 0">
-        <el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length" :class="{ h0: col.hidden }">
+      <!-- <el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus" size="small" style="padding:0 "> -->
-          <!-- 通过多个 col === null 可以控制更灵活的 span 大小 -->
+      <InputsArea v-for="field in configs.form.field" :key="field.title" :title="field.title">
-          <el-form-item v-if="col !== null" :label="col.label" :prop="col.prop" :rules="col.rules || null">
+        <el-row v-for="(row, rowIndex) in field.rows" :key="'row_' + rowIndex" :gutter="20">
-            <el-input v-if="col.input" v-model="dataForm[col.prop]" clearable :disabled="detailMode" v-bind="col.elparams" />
+          <el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length" :class="{ h0: col.hidden }">
-            <el-cascader
+            <!-- 通过多个 col === null 可以控制更灵活的 span 大小 -->
-              v-if="col.cascader"
+            <el-form-item v-if="col !== null" :label="col.label" :prop="col.prop" :rules="col.rules || null">
-              v-model="dataForm[col.prop]"
+              <el-input
-              :options="col.options"
+                v-if="col.input"
-              :disabled="detailMode"
+                v-model="dataForm[col.prop]"
-              v-bind="col.elparams"
+                clearable
-            ></el-cascader>
+                :disabled="detailMode"
-            <el-select v-if="col.select" v-model="dataForm[col.prop]" clearable :disabled="detailMode" v-bind="col.elparams">
+                v-bind="col.elparams" />
-              <el-option v-for="(opt, optIdx) in col.options" :key="'option_' + optIdx" :label="opt.label" :value="opt.value" />
+              <el-cascader
-            </el-select>
+                v-if="col.cascader"
-            <el-switch
+                v-model="dataForm[col.prop]"
-              v-if="col.switch"
+                :options="col.options"
-              v-model="dataForm[col.prop]"
+                :disabled="detailMode"
-              :active-value="col.activeValue ?? 1"
+                v-bind="col.elparams"></el-cascader>
-              :inactive-value="col.activeValue ?? 0"
+              <el-select
-              @change="handleSwitchChange"
+                v-if="col.select"
-              :disabled="detailMode"
+                v-model="dataForm[col.prop]"
-            />
+                clearable
-            <el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
+                :disabled="detailMode"
-            <el-date-picker v-if="col.datetime" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
+                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">
+              <div class="" v-if="col.component" style="margin: 32px 0 0">
-              <!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO：后续可能会根据业务需求创建新的版本  -->
+                <!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO：后续可能会根据业务需求创建新的版本  -->
-              <component
+                <component
-                :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'"
-                v-bind="col.bind"
+                  v-bind="col.bind" />
-              />
+              </div>
-            </div>
+              <!-- add more...  -->
-            <!-- add more...  -->
+            </el-form-item>
-          </el-form-item>
+          </el-col>
-        </el-col>
+        </el-row>
-      </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) => {
+    this.configs.form.field.forEach((field) => {
-      row.forEach((col) => {
+      field.rows.forEach((row) => {
-        dataForm[col.prop] = col.default ?? null;
+        row.forEach((col) => {
+          if (!col.prop) return;
 
-        if (col.fetchData)
+          dataForm[col.prop] = col.default ?? null;
-          col.fetchData().then(({ data: res }) => {
-            if (res.code === 0 && res.data.list) {
-              if ("injectTo" in col) {
-                // 保存完整的数据列表
-                cachedList[col.prop] = res.data.list;
-              }
 
-              this.$set(
+          if (col.fetchData)
-                col,
+            col.fetchData().then(({ data: res }) => {
-                "options",
+              if (res.code === 0) {
-                res.data.list.map((i) => ({
+                if (typeof res.data === "object" && "list" in res.data) {
-                  label: col.optionLabel ? i[col.optionLabel] : i.name,
+                  if ("injectTo" in col) {
-                  value: col.optionValue ? i[col.optionValue] : i.id,
+                    // 保存完整的数据列表，用于自动更新关联字段
-                }))
+                    cachedList[col.prop] = res.data.list;
-              );
+                  }
-            } else {
+                  this.$set(
-              col.options.splice(0);
+                    col,
-            }
+                    "options",
-          });
+                    res.data.list.map((i) => ({
-        else if (col.fetchTreeData) {
+                      label: col.optionLabel ? i[col.optionLabel] : i.name,
-          // 获取设备类型时触发的，用于前端构建属性结构，约定，parentId 为0时是顶级节点
+                      value: col.optionValue ? i[col.optionValue] : i.id,
-          col.fetchTreeData().then(({ data: res }) => {
+                    }))
-            // console.log("[DialogJustForm fetchTreeData -->]", res.data);
+                  );
-            if (res.code === 0 && res.data) {
+                } else if (Array.isArray(res.data)) {
-              if ("list" in res.data) {
+                  this.$set(
-                this.$set(col, "options", res.data.list);
+                    col,
-              } else if (Array.isArray(res.data)) {
+                    "options",
-                this.$set(col, "options", res.data);
+                    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) => {
+    this.configs.form.field.forEach((field) => {
-      row.forEach((col) => {
+      field.rows.forEach((row) => {
-        if ("injectTo" in col && Array.isArray(col.injectTo)) {
+        row.forEach((col) => {
-          col.injectTo.map((item) => {
+          if (!col.prop) return;
-            const unwatch = this.$watch(
+          if ("injectTo" in col && Array.isArray(col.injectTo)) {
-              () => this.dataForm[col.prop],
+            // console.log("watching options ..... ", col);
-              (newVal) => {
+            col.injectTo.map((item) => {
-                const chosenObject = this.cachedList[col.prop]?.find((i) => i.id === newVal);
+              const unwatch = this.$watch(
-                if (chosenObject) {
+                () => this.dataForm[col.prop],
-                  this.$set(this.dataForm, item[0], chosenObject[item[1]]);
+                (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,
                 }
-              },
+              );
-              {
+              this.watchList.push(unwatch);
-                immediate: false,
+            });
-              }
+          }
-            );
+        });
-            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));
                 /** 格式化文件上传列表 */

src/views/modules/pms/finishedOrder/components/tabs/orderDetailWrapper.vue

@@ -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>

src/views/modules/pms/finishedOrder/config.js

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

src/views/modules/pms/order/components/ListSectionWithHead.vue

@@ -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({