Ng-Alain学习记录一
Ng-Alain学习记录一
- 第一阶段代码整理
- 模态框
- 搜索并完成展示列表组件
- 其他
第一阶段代码整理
模态框
schema: SFSchema = {
properties: {
(属性变量名):{
type:'string',
title:'属性命名',
enum:[
{label: '选项一命名', value: '0'},
{label: '选项二命名', value: '1'},
{label: '默认选项', value: ''}
],
default:''},
},
required:['必输项一变量命名', '必输项二'],
};
ui: SFUISchema = {
'*': {
spanLabelFixed: 200,//这是标签的固定宽度
grid: {span: 12},
},
$属性变量名: {
widget: 'select'//选择要用什么小部件渲染，如：widget:'string',
spanControl: 12,//栅格占位数
}
};
搜索并完成展示列表组件
expandForm = false;
@ViewChild('sf', {static: false}) sf: SFComponent;
url = `...`;
searchSchema: SFSchema = {
properties:{
(属性变量名)： {
type:'string',
title:'属性命名',
enum:[
{label: '选项一命名', value: '0'},
{label: '选项二命名'，value: '1'},
{label: '默认选项'， value: ''},
],
default:'',
},
ui: {hidden: true,}
}
};
@ViewChild('st',{static: false}) st: STComponent;
columns: STColumn[] = [
{title: '',
buttons:[
{text: '新增'，type: 'modal',
modal: {component: 调用的模态框组件名,},
click: (record: any,modal: any) => {this.st.reload();}
},
{text: '详情', type: 'link',
click: (item: any) => {this.router.navigate(["跳转的url",item])}
}
]
},
{title:'第一列列名', index: '对应属性命名'，(可选)type: 'date'}，
];
ui: SFUISchema = {
'*': {
spanLabelFixed: 150,
grid: {span: 8},
spanControl: 8,
},
$属性变量名: {
widget: 'select'//选择要用什么小部件渲染，如：widget:'string',
spanControl: 12,//栅格占位数
}
}
req: STReq = {
reName: {
pi: 'page',
ps: 'size'},
//如果是日期，需要对数据预处理，将如2019-10-20的横杠去除使其成为字符串：
process: (requestOptions: STRequestOptions) => {
Utils.recoverDate(requestOptions.params['operDttm']) == undefined ? "" : requestOptions.params['operDttm'] = Utils.recoverDate(requestOptions.params['operDttm']);
return requestOptions;}
};
res: STRes = {
reName: {
list: 'data.list',
total: 'data.totalElements'}
}
resetSearchSchema() {
this.expandForm = !this.expandForm;
if(this.expandForm == true){
this.searchSchema.properties['属性变量名'].ui['hidden'] = false;}
else{
this.searchSchema.properties['属性变量名'].ui['hidden'] = true;}
}
stQuery(){
this.st.reset(this.sf.value);
}
//如果按键在外部，点击绑定了新增的功能，则调用模态框：
add(){
this.modal.createStatic(新增模态框组件名，{i:{id:0}}).subscribe(
() => this.st.reload());
}
//上面的按钮点击详情中传输了record，接收的component中：
ngOnInit(): void{
this.route.params.subscribe(（params：Param）=>{
this.data=params;//已经接收到数据可以进行具体访问访问，如：
this.http.get(`http://172.176.1.53:8098/fillRecInfs/core/info?acNo=${this.data.acNo}`).subscribe((res: any)=>{this.stData=res.data;})
})
}
对应的HTML代码：
其他
可以使用共有的服务进行数据传递:
在服务里声明变量，并定义set函数（将要传输的值set进去），另一个component就能通过访问这个变量获得所需数据。