平台renderer事件

jecloud低代码平台实现简单功能的增删改查。这里如果我想做一下的需求：
1.在列表上的某一列或者某几行根据某个值不同的状态改变颜色？
2.想要在点击某个按钮之前传一些过滤条件？
在不频繁的改动源码的情况下，做个性化或者逻辑操作，就会用到平台提供的事件，这样就显得方便灵活。

列字段事件

注册入口

双击列表字段字段的表头–>单击事件编辑图标

使用场景

1. 普通渲染,支持ajax同步获取数据(适用于电脑端、移动端)

renderer事件不支持异步，得用同步进行请求数据;非必要，不要写ajax,耗性能

const res = JE.syncAjax({ 
    url: '/je/common/script/sql/select', 
    params: {
        projectCode: 'test',
        templateCode:'selectData', 
        param1: '测试列表插入数据'
    }, 
    headers: {pd: 'test'},
});
if(res.success){
    return res.data.some(item=>item.TEST_GYSDW == columnValue) ? '正常状态' : "异常状态"
}

2. 插槽函数渲染点（列表字段超链接打开某个功能表单并带值给赋值在表单字段）(适用于电脑端、移动端)

const {
    $func, // 功能对象
    $columnIndex, // 列索引
    $table, // 表格对象
    column, // 列对象
    row, // 行数据
    rowid, // 行唯一id
    data, //列表数据
} = EventOptions;
// vue对象
const {h} = JE.useVue(); 
const aClick = ()=>{
    // 弹出窗体，显示功能表单
    const {showFuncForm} = JE.useSystem();
    showFuncForm("VERSION_PT_TEST",{
        bean:{
            "TEST_XM":"测试带值",
            "TEST_USER_NAME":"张三",
            "TEST_SL":"20",
            "TEST_JE":"100"
        }
    });
}

return h('a',{onClick:aClick,style:{cursor:'pointer'}},row.GYS_GYSMC);

列事件

注册入口

适用于电脑端的注册入口：单击功能配置–>列表配置–>列表JS事件

适用于移动端的注册入口：单击手机配置–>列表配置

使用场景

1. 扩展面板渲染（只适用电脑端）

扩展面板包括： top-renderer（扩展面板外上）、bottom-renderer（扩展面板外下）、 left-renderer（扩展面板外左）、 right-renderer（扩展面板外右）、 tbar-renderer（扩展面板内上）、 bbar-renderer（扩展面板内下）、 lbar-renderer（扩展面板内左）、 rbar-renderer（扩展面板内右）

• 普通渲染（处理渲染内容，每次列表数据加载后，都会执行）

const {
    $func,  // 功能对象
    $grid,  // 功能列表对象
} = EventOptions;
return JE.h('div', { style:'' }, '展示内容');

• 插槽函数渲染（用于微模块嵌入使用）

/**
 * 插槽函数
 * @param {HTMLElement} container 插槽dom
 * @param {Object} options 插槽配置项
 * @returns {Promise}
 */
return (container, options) => {
    // 异步事件，需要返回，用于加载完组件后，刷新panel布局
    return JE.useAdmin()?.emitMicroEvent('微应用编码', 'extend-renderer', container, options);
};

2. 行渲染（只适用移动端）

平台在【开发–>手机套件–>APP官方模版】中默认提供了3种行渲染方式，渲染默认模版的第一个。

表单事件

注册入口

单击功能配置–>表单配置–>表单JS事件

1. 表单渲染（适用于电脑端、移动端）

表单字段事件

注册入口

双击表单字段名称–>点击事件编辑图标

使用场景

• 普通字段渲染

  const { h } = JE.useVue();
  return h('div', {style: "background: pink;padding: 4px 10px;border: 1px solid #d9d9d9;borderRadius: 2px;"}, value);

• 插槽函数渲染（用于微模块嵌入使用）

  const admin = JE.useAdmin();
  return (dom,options)=>{
    // 图表配置
    const chartOptions = {
        code:'ZZTTB',// 图表编码
        style:'height:200px;',// 高度
        hideSearch:'left',// 隐藏查询区域
        params:{} // 默认参数
    };
    return admin?.emitMicroEvent('JE_PLUGIN_CHART_MODULE','chart-renderer',dom,chartOptions).then((chartRef)=>{
        // 列表刷新时，刷新图表
        $grid.store.on('load',()=>{
            const params = {};// 设置查询参数
            chartRef.value?.load(params);
        })
    });
  }