update almost finished
This commit is contained in:
parent
2afdb1d23d
commit
4e01129793
@ -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") {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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) }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user