mt-fe-group/pms-aomei
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update almost finished

Browse Source
This commit is contained in:
lb
2023-04-03 14:54:36 +08:00
parent 2afdb1d23d
commit 4e01129793
3 changed files with 172 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
src/components/DialogJustForm.vue
View File

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