（高级）前端代码片段

1. 如何获取明细的行数

前提：假设表单中有一个明细组件，id 为 tableField_k6age73g
代码：**

const ctx  = window.LeGao.getContext();
const tableField = ctx.store.get('tableField_k6age73g');
const value = tableField.getVal();
const length = (value || []).length;
console.log('length: ', length);

示例：

2. 如何给“关联其它表单数据”的“下拉单选框”添加默认值？

前提：假设表单中有一个“下拉单选框”，id为selectField_k6blcyi6，然后选项是“关联其它表单数据”。
代码：

function didMount(ctx) {
  // 判断当前属于什么状态
  const instanceData = ctx.getInstanceData() || {};
  const modeData = instanceData.flowData || {};
  const isViewMode = modeData.viewMode;
  const isEditMode = modeData.editMode;
  const isSubmitMode = !(isViewMode || isEditMode);
  const select = ctx.store.get('selectField_k6bm4ef4');
  // 只有提交态才需要设置默认值，详情页不需要设置
  if (isSubmitMode) {
    // 如果参数是从 url 上面获取的，需要添加一个延时，否则无法赋值成功
        setTimeout(() => {
      select.set('fieldData', {
        text: '1148-中',
        value: '1148-中',
      });
    }, 10);
  }
}

示例：

3. 如何判断当前表单或者流程的状态？

依照下列代码，可以判断当前表单的提交态、编辑态、预览态。

const ctx = window.LeGao.getContext();
/* 判断页面状态的代码 -begin */
  const instanceData = ctx.getInstanceData() || {};
  const modeData = instanceData.flowData || {};
  // 详情态
  const isViewMode = modeData.viewMode;
  // 单据详情页编辑态 & 流程审批态
  const isEditMode = modeData.editMode;
  // 提交态
  const isSubmitMode = !(isViewMode || isEditMode);
/* 判断页面状态的代码 -end */
/* 测试代码 */
  if (isSubmitMode) {
    ctx.fn.dialog({
      method: 'alert', // 或confirm
      title: '当前是提交态',
    });
  }
  if (isViewMode) {
    ctx.fn.dialog({
      method: 'alert', // 或confirm
      title: '当前是详情态',
    });
  }
  if (isEditMode) {
    ctx.fn.dialog({
      method: 'alert', // 或confirm
      title: '当前是详情页编辑态',
    });
  }
/* 测试代码 */

4. 单据页面提交成功后的回调函数执行

说明：定义一个名为“onYidaPageSubmit”的函数，然后 export 出来即可。在单据提交成功后，页面链接跳转之前，会执行 onYidaPageSubmit 这个函数。
PS：

• onYidaPageSubmit 需要返回一个 Promise。标准格式代码如下所示；
• 如果需要嵌套调用多个远程接口，可以直接在回调里面再 return Promise 即可；
• 如果是单据免登页面提交的话，需要首先在「设置」里面配置好跳转链接，否则该回调不会执行。

代码：

export function onYidaPageSubmit(ctx, params) {
  return ctx.fn.fetch({
    url: 'https://mocks.alibaba-inc.com/mock/xxpt/demo/DescribeDBInstances.json',
    data: {},
    method: 'GET'
  }).then((content) => {
    debugger;
    console.log('content: ', content);
    return ctx.fn.fetch({
      url: 'https://mocks.alibaba-inc.com/mock/xxpt/demo/DescribeDBInstances.json',
      data: {},
      method: 'GET'
    }).then(result => {
      debugger;
      console.log('result: ', result);
      return ctx.fn.fetch({
        url: 'https://mocks.alibaba-inc.com/mock/xxpt/demo/DescribeDBInstances.json',
        data: {},
        method: 'GET'
      }).then(haha => {
        debugger;
        console.log('haha: ', haha);
      });
    });
  }).catch(function (error) {
    console.log(error)
  });
}

示例：

在设置中配置跳转的地址方式

5. JS 如何动态设置表单组件必填

说明：假设表单中有一个 id 为 textField_k6jfrb12 的单行输入框。
代码：

const ctx = window.LeGao.getContext();
const name = ctx.store.get('textField_k6jfrb12');
name.set('validation', [{ type: 'required', message: '请输入名字' }]);
name.forceValid();

示例：


**

6. 如何监听数据联动值变化？

const _context = window.LeGao && window.LeGao.getContext();
_context && _context.emitter.on(设置了数据联动的组件id, (params = {}) => {
  console.log('params: ', params);
})

利用上面这段代码，将“设置了数据联动的组件id”替换成实际的组件 id，即可监听数据联动值变化，触发后面的回调函数，打印出 params 参数。