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