From 4e011297930bd57cd6016c5604e979e574a176bb Mon Sep 17 00:00:00 2001 From: lb Date: Mon, 3 Apr 2023 14:54:36 +0800 Subject: [PATCH] update almost finished --- src/components/DialogJustForm.vue | 345 +++++++++--------- .../modules/pms/palletizingLine/config.js | 2 +- .../pms/qualityInspectionRecord/config.js | 10 +- 3 files changed, 172 insertions(+), 185 deletions(-) diff --git a/src/components/DialogJustForm.vue b/src/components/DialogJustForm.vue index 712293b..fc79958 100644 --- a/src/components/DialogJustForm.vue +++ b/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 选项 */ + + 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; + } + + // 设置监听 + 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.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, + } + ); + 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) { - // 获取数据 - 不需要等待前置条件时 - 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); - } - - // end branch - } else if (Array.isArray(res.data)) { - // 是否需要缓存数据列表 - if ("injectTo" in col) { - // 缓存 - 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); - } - }); + 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); + console.log("[hasPrev] do watcher: ", col.hasPrev); + if (!val) { + col.injectTo.map((item) => { + this.$set(this.dataForm, item[0], null); + this.$forceUpdate(); + }); + return; + } - 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 (!this.editMode) this.$set(this.dataForm, col.prop, null); - 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); - } - }); + 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") { diff --git a/src/views/modules/pms/palletizingLine/config.js b/src/views/modules/pms/palletizingLine/config.js index 8bc7ce8..6fa2d6c 100644 --- a/src/views/modules/pms/palletizingLine/config.js +++ b/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, diff --git a/src/views/modules/pms/qualityInspectionRecord/config.js b/src/views/modules/pms/qualityInspectionRecord/config.js index d01e329..41d986e 100644 --- a/src/views/modules/pms/qualityInspectionRecord/config.js +++ b/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) }