update almost finished

src/components/DialogJustForm.vue

@@ -142,7 +142,6 @@ export default {
     const savedDatalist = {};
     const cachedList = {};
     const watchList = [];
-    const promiseChain = {};
 
     this.configs.form.rows.forEach((row) => {
       row.forEach((col) => {
@@ -152,68 +151,6 @@ export default {
         if ("autoUpdateProp" in col) {
           savedDatalist[col.prop] = [];
         }
-
-        if (col.fetchData && typeof col.fetchData === "function" && !col.fetchDataWait) {
-          const ps = col.fetchData().then(({ data: res }) => {
-            if (res.code === 0) {
-              if ("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,
-                  }))
-                );
-
-                if ("autoUpdateProp" in col) {
-                  this.$set(savedDatalist, col.prop, res.data.list);
-                }
-              } else if (Array.isArray(res.data)) {
-                if ("injectTo" in col) {
-                  // 保存完整的数据列表
-                  cachedList[col.prop] = 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,
-                  }))
-                );
-                if ("autoUpdateProp" in col) {
-                  this.$set(savedDatalist, col.prop, res.data);
-                }
-              }
-              // col.options = res.data.list;
-            } else {
-              col.options.splice(0);
-            }
-            // dataForm[col.prop] = col.default ?? null; // not perfect!
-          });
-
-          promiseChain[col.prop] = ps;
-        } else if (col.fetchTreeData && typeof col.fetchTreeData === "function") {
-          // 获取设备类型时触发的，用于前端构建属性结构，约定，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);
-            }
-          });
-        }
       });
     });
     return {
@@ -223,8 +160,8 @@ export default {
       savedDatalist,
       cachedList,
       watchList,
-      promiseChain,
       detailMode: false,
+      editMode: false,
       baseDialogConfig: null,
       defaultQuillConfig: {
         modules: {
@@ -254,137 +191,188 @@ export default {
   mounted() {
     /** 临时保存所有发出的请求 */
     const promiseHistory = {};
-    /** 处理 injectTo 选项 */
-    this.configs.form.rows.forEach((row) => {
-      row.forEach((col) => {
-        if (col.fetchData && typeof col.fetchData === "function" && !col.hasPrev) {
-          // 获取数据 - 不需要等待前置条件时
-          promiseHistory[col.prop] = col.fetchData().then(({ data: res }) => {
-            if (res.code === 0) {
-              if ("list" in res.data) {
-                // 填充 options
-                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,
-                  }))
-                );
-
-                // 是否需要缓存数据列表
-                if ("injectTo" in col) {
-                  // 缓存
-                  this.cachedList[col.prop] = res.data.list;
-                  // 设置监听
-                  const valueProp = "optionValue" in col ? col.optionValue : "id";
-                  const unwatch = this.$watch(
-                    () => this.dataForm[col.prop],
-                    (val) => {
-                      const chosenObject = this.cachedList[col.prop].find((i) => i[valueProp] === val);
-                      if (chosenObject) {
-                        // 如果找到了
-                        col.injectTo.map((item) => {
-                          this.$set(this.dataForm, item[0], chosenObject[item[1]]);
-                          this.$forceUpdate();
-                        });
-                      } else {
-                        console.log("DialogJustForm mounted(): 没有找到 injectTo 关联的对象");
-                      }
-                    },
-                    {
-                      immediate: false,
-                    }
-                  );
-                  this.watchList.push(unwatch);
-                }
 
-                if ("autoUpdateProp" in col) {
-                  this.$set(savedDatalist, col.prop, res.data.list);
-                }
+    const getData = (col, param) => {
+      console.log("getData: ", col.prop, "/", param ?? "no param!");
+      // 获取数据 - 不需要等待前置条件时
+      promiseHistory[col.prop] = col.fetchData(param).then(({ data: res }) => {
+        if (res.code === 0) {
+          if ("list" in res.data) {
+            // 填充 options
+            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,
+              }))
+            );
+
+            // 是否需要缓存数据列表
+            if ("injectTo" in col || col.cached) {
+              this.cachedList[col.prop] = res.data.list;
+            }
 
-                // end branch
-              } else if (Array.isArray(res.data)) {
-                // 是否需要缓存数据列表
-                if ("injectTo" in col) {
-                  // 缓存
-                  this.cachedList[col.prop] = res.data;
+            // 设置监听
+            if ("injectTo" in col) {
+              console.log("set watcher: ", col.prop);
+
+              const valueProp = "optionValue" in col ? col.optionValue : "id";
+              const unwatch = this.$watch(
+                () => this.dataForm[col.prop],
+                (val) => {
+                  console.log("do watcher: ", col.prop);
+                  if (col.disableWatcherOnEdit && this.editMode) return;
+                  if (!val) {
+                    col.injectTo.map((item) => {
+                      this.$set(this.dataForm, item[0], null);
+                      this.$forceUpdate();
+                    });
+                    return;
+                  }
+                  const chosenObject = this.cachedList[col.prop].find((i) => i[valueProp] === val);
+                  if (chosenObject) {
+                    col.injectTo.map((item) => {
+                      this.$set(this.dataForm, item[0], chosenObject[item[1]]);
+                      this.$forceUpdate();
+                    });
+                  } else {
+                    console.log('[x] if ("injectTo" in col) {');
+                  }
+                },
+                {
+                  immediate: false,
                 }
-                this.$set(
-                  col,
-                  "options",
-                  res.data.map((i) => ({
-                    label: col.optionLabel ? i[col.optionLabel] : i.name,
-                    value: col.optionValue ? i[col.optionValue] : i.id,
-                  }))
-                );
-                if ("autoUpdateProp" in col) {
-                  this.$set(savedDatalist, col.prop, res.data);
+              );
+              this.watchList.push(unwatch);
+            }
+
+            if ("autoUpdateProp" in col) {
+              this.$set(this.savedDatalist, col.prop, res.data.list);
+            }
+
+            // end branch
+          } else if (Array.isArray(res.data)) {
+            // 填充 options
+            this.$set(
+              col,
+              "options",
+              res.data.map((i) => ({
+                label: col.optionLabel ? i[col.optionLabel] : i.name,
+                value: col.optionValue ? i[col.optionValue] : i.id,
+              }))
+            );
+
+            // 是否需要缓存数据列表
+            if ("injectTo" in col || col.cached) {
+              this.cachedList[col.prop] = res.data;
+            }
+
+            // 设置监听
+            if ("injectTo" in col && !col.watcher) {
+              console.log("set watcher: ", col.prop);
+
+              const valueProp = "optionValue" in col ? col.optionValue : "id";
+              const unwatch = this.$watch(
+                () => this.dataForm[col.prop],
+                (val) => {
+                  if (col.disableWatcherOnEdit && this.editMode) return;
+                  console.log("do watcher: ", col.prop);
+                  if (!val) {
+                    col.injectTo.map((item) => {
+                      this.$set(this.dataForm, item[0], null);
+                      this.$forceUpdate();
+                    });
+                    return;
+                  }
+                  const chosenObject = this.cachedList[col.prop].find((i) => i[valueProp] === val);
+                  if (chosenObject) {
+                    col.injectTo.map((item) => {
+                      this.$set(this.dataForm, item[0], chosenObject[item[1]]);
+                      this.$forceUpdate();
+                    });
+                  } else {
+                    console.log('[x] if ("injectTo" in col) {');
+                  }
+                },
+                {
+                  immediate: false,
                 }
-              }
-            } else {
-              col.options.splice(0);
+              );
+              this.$set(col, "watcher", unwatch);
+              this.watchList.push(unwatch);
             }
-          });
+
+            if ("autoUpdateProp" in col) {
+              this.$set(this.savedDatalist, col.prop, res.data);
+            }
+          }
+          // end branch
+        } else {
+          col.options.splice(0);
         }
+      });
+
+      console.log("after getData: ", promiseHistory);
+    };
+
+    /** 处理函数 */
+    const handleFn = (prevProp, anchorField, anchorValue, targetField, col) => {
+      console.log("[handleFn]: ", prevProp, anchorField, anchorValue, targetField);
+      /** 此时 cachedList 已经确保可用了 */
+      const target = this.cachedList[prevProp].find((i) => i[anchorField] === anchorValue);
+      const param = target ? target[targetField] : "";
+      console.log("((( chosenObject )))", target);
+
+      getData(col, param);
+    };
+
+    this.configs.form.rows.forEach((row) => {
+      row.forEach((col) => {
+        if (col.fetchData && typeof col.fetchData === "function" && !col.hasPrev) {
+          getData(col);
+        }
+      });
+    });
 
+    /** 必须要遍历两遍 */
+    this.configs.form.rows.forEach((row) => {
+      row.forEach((col) => {
         if (col.fetchData && typeof col.fetchData === "function" && col.hasPrev) {
-          // 获取数据 - 需要等待前置条件时
+          console.log("[hasPrev] set watcher: ", col.hasPrev);
 
-          // 1.检查前置条件是否已经 fullfilled
-          // 2.没有则等待，有则 fetchData
+          // 获取数据 - 需要等待前置条件时
           const unwatch = this.$watch(
-            () => this.dataForm[col.toggleFetchData],
+            () => this.dataForm[col.hasPrev],
             (val) => {
-              const { search, get } = col.fetchDataParam; // 伴随着 toggleFetchData 出现的
-              const chosenObject = this.cachedList[col.toggleFetchData]?.find((i) => i[search] === val);
-              const paramValue = chosenObject ? chosenObject[get] : "";
-              console.log("((( chosenObject )))", chosenObject);
-
-              col.fetchData(paramValue).then(({ data: res }) => {
-                console.log("((( col.fetchData )))", paramValue, data);
-                if (res.code === 0) {
-                  if ("list" in res.data) {
-                    if ("injectTo" in col) this.$set(this.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,
-                      }))
-                    );
-
-                    if ("autoUpdateProp" in col) {
-                      this.$set(savedDatalist, col.prop, res.data.list);
-                    }
-                  } else if (Array.isArray(res.data)) {
-                    if ("injectTo" in col) this.$set(this.cachedList, col.prop, 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,
-                      }))
-                    );
-                    if ("autoUpdateProp" in col) {
-                      this.$set(savedDatalist, col.prop, res.data);
-                    }
-                  } 
-                } else {
-                  col.options.splice(0);
-                } 
-              });
+              console.log("[hasPrev] do watcher: ", col.hasPrev);
+              if (!val) {
+                col.injectTo.map((item) => {
+                  this.$set(this.dataForm, item[0], null);
+                  this.$forceUpdate();
+                });
+                return;
+              }
+
+              if (!this.editMode) this.$set(this.dataForm, col.prop, null);
+
+              const { search, get } = col.fetchDataParam; // 伴随着 hasPrev 出现的
+
+              if (!this.cachedList[col.hasPrev]) {
+                // 如果 prev 还尚不存在，但此时 promiseHistory 一定存在了
+                promiseHistory[col.hasPrev].then(() => {
+                  handleFn(col.hasPrev, search, val, get, col);
+                });
+              } else {
+                handleFn(col.hasPrev, search, val, get, col);
+              }
             },
             {
-              immediate: true,
+              immediate: false,
             }
           );
           this.watchList.push(unwatch);
         }
-
-        /// old part ====================
       });
     });
   },
@@ -452,6 +440,7 @@ export default {
       }
 
       this.detailMode = detailMode ?? false;
+      this.editMode = id ? true : false;
 
       /** 判断 extraParams */
       if (extraParams && typeof extraParams === "object") {

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

@@ -145,7 +145,7 @@ export default function () {
             optionLabel: 'code',
             rules: { required: true, message: "必填项不能为空", trigger: "blur" },
             elparams: { filterable: true, placeholder: "请选择订单" },
-            autoUpdateProp: 'cate' // 改变时自动更新 cate 字段
+            autoUpdateProp: 'cate' // 改变时自动更新 cate 字段, TODO: 修改此处
           },
           {
             forceDisabled: true,

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

@@ -102,8 +102,8 @@ export default function () {
             options: [],
             optionLabel: 'code',
             optionValue: 'carId',
-            needCache: true,
             fetchData: () => this.$http.post("/pms/carHandle/pageView", { page: 1, limit: 999 }),
+            disableWatcherOnEdit: true,
             rules: { required: true, message: "必填项不能为空", trigger: "blur" },
             elparams: { placeholder: "请输入窑车号", filterable: true },
             injectTo: [
@@ -152,11 +152,9 @@ export default function () {
             optionLabel: 'orderCode',
             // toggleFetchData: 'carId', // 当 carId 改变的时候，也会 fetchData
             hasPrev: 'carId', // 当 carId 改变的时候，也会 fetchData
-            // 需要保存当前状态
-            needCache: true,
-            fetchDataParam: { search: 'carId', get: 'id' }, // 伴随着 toggleFetchData 出现
+            fetchDataParam: { search: 'carId', get: 'id' }, // 伴随着 hasPrev 出现
             fetchData: (hisId) => this.$http.get(`/pms/carHandle/${hisId}`),
-            fetchDataWait: true,
+            disableWatcherOnEdit: true,
             rules: { required: true, message: "必选项不能为空", trigger: "blur" },
             elparams: { placeholder: "请选择订单" },
             injectTo: [
@@ -188,7 +186,7 @@ export default function () {
           {
             input: true,
             label: "抽检数量",
-            prop: "orderQty",
+            prop: "qty",
             rules: [
               { required: true, message: "必填项不能为空", trigger: "blur" },
               { type: 'number', message: '请输入正确的数字类型', trigger: 'blur', transform: val => Number(val) }