Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(block-mixin): 重构block-mixin 相关初始化field代码 #148

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

refactor(block-mixin): 重构block-mixin 相关初始化field代码 #148

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4f4cca4
refactor(block-mixin): 重构block-mixin 相关初始化field代码
ly525 May 3, 2021
1358683
Merge branch 'master' into refactor-block-mixin-init-field
ly525 Jun 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 84 additions & 98 deletions src/ams/mixins/block-mixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,11 @@ export default {
});
}
},
initResource() {
const resource = this.block.resource
const isString = typeof this.block.resource === 'string'
this.resource = isString ? ams.resources[resource] : ams.resource('', resource);
},
// 借鉴vue源码中的initMethods
initActionsToVM() {
const props = this.$options.props;
Expand Down Expand Up @@ -219,10 +224,7 @@ export default {
this.block = await ams.getBlock(this.name);
this.initActionsToVM(); // #70
if (this.block) {
this.resource =
typeof this.block.resource === 'string'
? ams.resources[this.block.resource]
: ams.resource('', this.block.resource);
this.initResource();
ams.$blocks[this.name] = this;
this.initFields();
this.getOperationsCounts();
Expand Down Expand Up @@ -276,94 +278,79 @@ export default {
field.ctx = this.block.ctx || 'view';
}
},
/**
* 初始化 列表/表格 字段信息
* @param {String} fieldKey 字段key
* @param {Object} field 字段对应的对象，即 { type, props, width }
* @returns
*/
initListField(fieldKey, field) {
const blockType = ams.configs.baseBlockType[this.block.type]
if (blockType !== 'list') return
// 排序
if (this.block.sorts[fieldKey]) {
field.props.sortable = 'custom';
}
// 过滤
const filter = this.block.filters[fieldKey];
if (!filter) return
let filterOptions = filter.options || field.props.options;
if (!filterOptions) return
if (Array.isArray(filterOptions)) {
filterOptions = filterOptions.map(option => ({
text: option.label,
value: option.value,
}));
} else {
filterOptions = Object.keys(filterOptions).map(key => ({
text: filterOptions[key],
value: key
}));
}
field.props.filters = filterOptions;
field.props['filter-multiple'] = !!filter.multiple;
if (filter.remote) return
field.props['filter-method'] = (value, row, column) => listStringHasValue(
row[fieldKey],
value
);
},
initFields() {
const resourceFields = this.resource && this.resource.fields;
const blockFields = this.block.fields || {};
if (!resourceFields) {
this.fields = null;
return;
}
// 为了可以做过滤、合并props等功能、通过computed属性重新处理field列表
// 为了上层可以快速定位修改
if (this.resource && this.resource.fields) {
const fields = {};
let fieldKeys = Object.keys(this.resource.fields);
fieldKeys.forEach(name => {
const resourceField = this.resource.fields[name];
let blockField =
this.block.fields && this.block.fields[name];
// 字段隐藏，bock内可以通过 fields: {testMarkdown: false} 隐藏字段
if (blockField === false) {
return;
}
blockField = blockField || {};

const field = {
// 默认block级ctx
name,
ctx: this.block.ctx || 'view',
props: {},
on: {}
};
// 按优先级测试合并
// deepExtend(field, defaultFieldConfig[blockField.type || resourceField.type]);
deepExtend(field, resourceField);
deepExtend(field, blockField);
this.initDefaultField(field);
// console.log(field);
// 处理列表
if (ams.configs.baseBlockType[this.block.type] === 'list') {
// 排序
if (this.block.sorts[name]) {
field.props.sortable = 'custom';
}
// 过滤
const filter = this.block.filters[name];
if (filter) {
let filterOptions =
filter.options || field.props.options;
const fields = {};
let fieldKeys = Object.keys(resourceFields);
fieldKeys.forEach(fieldKey => {
const resourceField = resourceFields[fieldKey];
let blockField = blockFields[fieldKey];
// 字段隐藏，bock内可以通过 fields: {[fieldKey]: false} 隐藏字段
if (blockField === false) return;
blockField = blockField || {};

if (filterOptions) {
if (Array.isArray(filterOptions)) {
filterOptions = filterOptions.map(option => {
return {
text: option.label,
value: option.value,
};
});
} else {
filterOptions = Object.keys(filterOptions).map(
key => {
const label = filterOptions[key];
return {
text: label,
value: key
};
}
);
}
field.props.filters = filterOptions;
field.props[
'filter-multiple'
] = !!filter.multiple;
if (!filter.remote) {
field.props['filter-method'] = (
value,
row,
column
) => {
// console.log('filter-method', value, row, column);
return listStringHasValue(
row[name],
value
);
};
}
}
}
}
fields[name] = field;
});
this.fields = fields;
this.layout = this.getFieldsLayout(fields, this.block.layout);
// console.log(this.layout)
} else {
this.fields = null;
}
const field = {
// 默认block级ctx
name: fieldKey,
ctx: this.block.ctx || 'view',
props: {},
on: {}
};
// 按优先级测试合并
// deepExtend(field, defaultFieldConfig[blockField.type || resourceField.type]);
deepExtend(field, resourceField);
deepExtend(field, blockField);
this.initDefaultField(field);
this.initListField(fieldKey, field) // 处理列表
fields[fieldKey] = field;
});
this.fields = fields;
this.layout = this.getFieldsLayout(fields, this.block.layout);
// console.log(this.layout)
},
getFieldsLayout(fields, layout) {
let la = {};
Expand Down Expand Up @@ -492,16 +479,15 @@ export default {
},
async emitEvent(name, args) {
// console.log('emitEvent', name, args)
if (name) {
const action = this.block.events[name];
// 保证传入action的都是一个对象
args = args || {};
if (action) {
await this.callAction(action, args);
} else {
// 如果没有绑定event、默认调用同名action、这样可以简化减少如 evnets:{list:'@list'} 的配置
await this.callAction(`@${name}`, args);
}
if (!name) return;
const action = this.block.events[name];
// 保证传入action的都是一个对象
args = args || {};
if (action) {
await this.callAction(action, args);
} else {
// 如果没有绑定event、默认调用同名action、这样可以简化减少如 events:{list:'@list'} 的配置
await this.callAction(`@${name}`, args);
}
},
async callAction(...args) {
Expand Down