update DialogJustForm 的销毁逻辑

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

@@ -3,7 +3,7 @@
     class="dialog-just-form"
     style="padding: 40px"
     :fullscreen="fullscreen"
-    :visible="dialogVisible"
+    :visible="visible"
     @close="handleClose"
     :destroy-on-close="false"
     :close-on-click-modal="configs.clickModalToClose ?? true"
@@ -81,7 +81,7 @@
 
 <script>
 import { pick as __pick } from "@/utils/filters";
-import Cookies from "js-cookie";
+import Cookies, { get } from "js-cookie";
 import moment from "moment";
 
 export default {
@@ -95,10 +95,6 @@ export default {
         forms: null,
       }),
     },
-    dialogVisible: {
-      type: Boolean,
-      default: false,
-    },
     fullscreen: {
       type: Boolean,
       default: false,
@@ -107,6 +103,8 @@ export default {
   inject: ["urls"],
   data() {
     const dataForm = {};
+    const watchList = [];
+    const cachedList = {};
 
     this.configs.form.rows.forEach((row) => {
       row.forEach((col) => {
@@ -116,6 +114,11 @@ export default {
           col.fetchData().then(({ data: res }) => {
             console.log("[DialogJustForm fetchData -->]", res.data.list);
             if (res.code === 0 && res.data.list) {
+              if ("injectTo" in col) {
+                // 保存完整的数据列表
+                cachedList[col.prop] = res.data.list;
+              }
+
               this.$set(
                 col,
                 "options",
@@ -150,12 +153,38 @@ export default {
     return {
       loadingStatus: false,
       dataForm,
+      watchList,
+      cachedList,
       detailMode: false,
       baseDialogConfig: null,
+      visible: false
     };
   },
-  created() {
+  mounted() {
-    // console.log('[dialog] created!!! wouldn\'t create again...')
+    /** 处理 injectTo 选项 */
+    this.configs.form.rows.forEach((row) => {
+      row.forEach((col) => {
+        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,
+              }
+            );
+            this.watchList.push(unwatch);
+          });
+        }
+      });
+    });
   },
   computed: {
     uploadHeaders() {
@@ -204,6 +233,8 @@ export default {
           console.log("[DialogJustForm resetForm()] clearing form...");
           this.$refs.dataForm.clearValidate();
           this.$emit("dialog-closed"); // 触发父组件销毁自己
+          this.watchList.map((unwatch) => unwatch());
+          this.cachedList = {};
         },
         immediate ? 0 : 200
       );
@@ -211,6 +242,7 @@ export default {
 
     /** init **/
     init(id, detailMode) {
+      this.visible = true
       // console.log("[DialogJustForm] init", this.dataForm, id, detailMode);
       if (this.$refs.dataForm) {
         // console.log("[DialogJustForm] clearing form validation...");
@@ -387,8 +419,13 @@ export default {
     },
 
     handleClose() {
-      this.resetForm();
+      this.visible = false;
-      this.$emit("update:dialogVisible", false);
+      
+      setTimeout(() => {
+        this.$emit('destroy-dialog')
+        // this.resetForm();
+        // this.$emit("update:dialogVisible", false);
+      }, 200);
     },
   },
 };

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

@@ -27,7 +27,14 @@
       layout="total, sizes, prev, pager, next, jumper"
     ></el-pagination>
 
-    <DialogJustForm modal-append-to-body ref="order-dialog" :dialog-visible.sync="dialogVisible" fullscreen :configs="dialogConfig" />
+    <DialogJustForm
+      modal-append-to-body
+      ref="order-dialog"
+      v-if="renderDialog"
+      fullscreen
+      :configs="dialogConfig"
+      @destroy-dialog="renderDialog = false"
+    />
   </section>
 </template>
 
@@ -97,6 +104,7 @@ export default {
       },
       dataList: [],
       totalPage: 0,
+      renderDialog: false
     };
   },
   mounted() {
@@ -259,7 +267,7 @@ export default {
             .then(() => {
               // this.$http.delete(this.urls.base + `/${data}`).then((res) => {
               this.$http({
-                url: '/pms/order',
+                url: "/pms/order",
                 method: "DELETE",
                 data: [`${data.id}`],
               }).then(({ data: res }) => {
@@ -306,6 +314,7 @@ export default {
           this.getAList(Object.assign({}, this.listQuery, this.extraSearchConditions, this.params));
         }
         case "新增":
+          this.openDialog();
           break;
       }
     },
@@ -323,10 +332,10 @@ export default {
 
     /** 打开对话框 */
     openDialog(row_id, detail_mode) {
-      this.dialogVisible = true;
+      this.renderDialog = true;
-
+      
       this.$nextTick(() => {
-        console.log('init dialog', row_id, detail_mode)
+        console.log("init dialog", row_id, detail_mode);
         this.$refs["order-dialog"].init(/** some args... */ row_id, detail_mode);
       });
     },

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

@@ -268,7 +268,10 @@ export default function () {
             input: true,
             label: "生产订单砖数",
             prop: "prodqty",
-            rules: { required: true, message: "必填项不能为空", trigger: "blur" },
+            rules: [
+              { required: true, message: "必填项不能为空", trigger: "blur" },
+              { type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
+            ],
             elparams: { placeholder: "请输入要求生产的数量" },
           },
           {
@@ -276,13 +279,20 @@ export default function () {
             label: "已生产数",
             prop: "yieldqty",
             // rules: { required: true, message: "必填项不能为空", trigger: "blur" },
+            rules: [
+              // { required: true, message: "必填项不能为空", trigger: "blur" },
+              { type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
+            ],
             elparams: { placeholder: "请输入已经生产的数量" },
           },
           {
             input: true,
             label: "托盘码放砖数",
             prop: "pcsKilnCar",
-            rules: { required: true, message: "必填项不能为空", trigger: "blur" },
+            rules: [
+              { required: true, message: "必填项不能为空", trigger: "blur" },
+              { type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
+            ],
             elparams: { placeholder: "请输入要求生产的数量" },
           },
           {
@@ -321,9 +331,13 @@ export default function () {
             prop: "brand",
             options: [],
             // optionLabel: '',
-            fetchData: () => this.$http.get("/pms/bom/page", { params: { limit: 999, page: 1, key: "" } }),
+            fetchData: () => this.$http.get("/pms/bom/page", { params: { limit: 999, page: 1, key: "", externalCode: "" } }),
             elparams: { placeholder: "请选择牌号", filterable: true },
             // TODO: 选择后，需要带出一些数据
+            injectTo: [
+              [ 'bomCode', 'code' ],
+              [ 'ai', 'externalCode' ]
+            ]
           },
           {
             // input: true,
@@ -370,7 +384,10 @@ export default function () {
             input: true,
             label: "烧成温度 ℃",
             prop: "ktmp",
-            rules: { required: true, message: "必填项不能为空", trigger: "blur" },
+            rules: [
+              { required: true, message: "必填项不能为空", trigger: "blur" },
+              { type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
+            ],
             elparams: { placeholder: "请输入烧成温度" },
           },
           // {
@@ -386,7 +403,10 @@ export default function () {
             input: true,
             label: "烧成时间 H",
             prop: "tt",
-            rules: { required: true, message: "必填项不能为空", trigger: "blur" },
+            rules: [
+              { required: true, message: "必填项不能为空", trigger: "blur" },
+              { type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
+            ],
             elparams: { placeholder: "请输入烧成时间" },
           },
           {
@@ -407,7 +427,10 @@ export default function () {
             input: true,
             label: "销售订单砖数",
             prop: "soqty",
-            rules: { required: true, message: "必填项不能为空", trigger: "blur" },
+            rules: [
+              { required: true, message: "必填项不能为空", trigger: "blur" },
+              { type: "number", message: "请输入正确的数字类型", trigger: "blur", transform: (val) => Number(val) },
+            ],
             elparams: { placeholder: "请输入销售订单砖数" },
           },
           {