表单子表视图的使用方法
作者:
视图就是过滤某些子表数据不显示
基于插件的实现
参考:apps/link/src/extensions/business/bizform/project/calendar/participant-item-view/
{
"$scheme": "http://front.q7link.com:3000/json-schema/manifest.json",
"name": "form.calendarEntry.participantItemView",
"publisher": "wangshushuo",
"version": "1.0.0",
"activationEvents": ["Construct"],
"dependencies": {
"tableView": "*"
},
"contributes": {
"tableView": [
{
"cp": "form.tableView.participants.display",
"name": "form.calendarEntry.participantsView"
}
]
}
}
cp和name中的participants是子表字段名
import { IFormActiveContext } from '@q7/micro-form-base-app/biz-form/index';
export default {
activate(ctx: IFormActiveContext) {
ctx.tableView.enhance('form.calendarEntry.participantsView', (parent) => {
return ctx.tableView.createFilterView({
source: parent,
filter: (item) => {
return item.participantType?.id !== 'User'
}
});
})
}
}
旧的实现方案——DynamicView
- 主表在formPresenter的getDataOptions中声明给哪个子表设置视图
getDataOptions(): DataOptions {
return {
dynamicViews: {
[F_BudgetAccount_refDocMappings(子表名字)]: 'viewName(视图名字)',
},
};
}
- 子表presenter,需要做下面几件事
// 视图的数据
private viewData = observable.array([]);
// 查看态,渲染视图
onFormViewed(form: EntityForm<any>, disposers: IDisposer[]) {
this.addView(disposers)
}
// 编辑态,渲染视图
onFormCreated(form: EntityForm<any>, disposers: IDisposer[]) {
this.addView(disposers)
}
addView = (disposers) => {
this.formPresenter.formController.addDynamicView(
this.logicPath,
'viewName',
this.viewData,
)
disposers.push(
// 监听子表的数据变化
reaction(
() => {
return this.form.select(this.logicPath).value.slice();
},
this.updateData,
{ fireImmediately: true },
),
);
}
// 将子表数据进行处理后赋值给视图数据
updateData = () => {
const data = this.form.select(this.logicPath).value
this.viewData.replace(data.filter());
}
注意事项
this.viewData.replace()
这里要求参数是js原生数据类型,不能是observable。