梁华生--工作周报（2017-07-23）

周报

本周回顾

• 前端
  
  • 组件间交互扩展开发完成
  • 表单组件样式扩展开发完成
  • context与value的双向流动完成
  • 组件使用demo，整理完成大概70%

下周计划

• 元数据查询接口实现，目标打通服务到前端整个流程
• 设计文档、使用文档整理

以下是组件交互、样式扩展的使用方法样例：

this.suite(metadata)
    .select('result')
    .batchExt('grids', (item) => {
        switch (item.name) {
        // render 扩展
          case 'loginName': {
            item.render = (model) => `<div style="color:green;">${model.loginName}</div>`;
            break;
          }
          case 'gender': {
            item.render = (model) => model.gender == '1' ? '男' : '女';
            break;
          }
          case 'manager': {
            item.render = (model) => model.manager == '1' ? '是' : '否';
            break;
          }
        }
    })
    .select('actions')
    .select('staff-delete')
    .select('formMeta')
    .ext('beforeSubmit', (param) => {
        param.abc = 1;
        return param;
     })
    .unselect()
    .unselect()
    .select('staff-edit')
    .select('formMeta')
    .ext('style', {   // 样式扩展
        'container': `grid-column-gap: 4%;
                     grid-template-columns: 48% 48%;`,
        'container__item': undefined
     })
    .batchExt('fields', (field) => {
        if (field.name == 'englishName') {
            // 组件间数据监听
            field.onAttached = function (element) {
                this.watch(['gender', 'phone'], ({gender, phone}) => {
                     if (gender == 1) {
                         phone.length > 4 ?
                             element.style = 'background:red;' : element.style = 'background:green;'
                      } else {
                          phone.length > 4 ?
                            element.style = 'background:yellow;' : element.style = 'background:blue;'
                      }
                });
            }
        }
  });