1. 内容转行配置在 styles 里 border 同级后面加这一段代码实现内容转行如果高度还不对则设置每一列的宽度textwrap: true, word-wrap: break-word2. 多页面布局代码page_layout: { items: [ { key: dw_inm_070401new_rk, flex: 1, source: self, page_key: dw_inm_070401new_rk, minHeight: 60px }, { key: printmx, flex: 1, name: printmx, visible: false, page_key: dw_inm_070401_rkewmprint, minHeight: 100px, initialHeight: 30% } ], pattern: 11, version: 1, primary_key: dw_inm_070401new_rk }3. SQL 执行代码res await ctx.oracleQuery({ sql: sql, binds: { ls_item: ls_item, }, to_lower: true }) if (!res) { return; }; ls_unit res.data.result.rows[0].ls_unit4. 行返回上一个状态ctx.revertItem(row, name.name);5. 调整页面的顺序正确搜索出数据看 SQL。排序draggroup: 10过滤filterable是否能点击tabsequence: 0。style 里面加转行textwrap: true、word-wrap: break-word。props 添加props: { showSelector: true, showHScrollBar: true, showVScrollBar: true, currentRowSelected: true, showFixedRowHeader: true }汉化子查询(select proj_no || || proj_name from prj_head where proj_no pur_order.prj_no)字段是否有值。函数逻辑看 PB。6. 页面按钮代码page_toolbar: { custom: [ { id: cbx_all, icon: , type: primary, label: 全审 }, { id: cbx_all_not, icon: , type: primary, label: 全不审 } ], buttons: { copy: { label: 复制行, visible: false }, save: { label: 保存, visible: true }, print: { label: 打印, visible: false }, query: { label: 查询, visible: true }, reset: { label: 重置, visible: false }, delete: { label: 删除行, visible: false }, insert: { label: 新增行, visible: false }, nextRow: { label: 下一条, visible: false }, priorRow: { label: 上一条, visible: false } }, version: 1 }7常用内置变量comp_list公司分管body_list事业部分管dept_list部门分管current_emp_id隐藏current_comp_no隐藏current_dept_no隐藏current_body_no隐藏dropdown_sqlSQL下拉手动下拉 values/optionsselect8:常用函数语句1执行查询ctx.runBuiltin(query)2开始截止日期-页面代码{ arg: ls_rqtype, type: dropdown_sql, label: , value: select 1,库存当月期间 from dual union select 2,库存上月期间 from dual union select 3,自然期间 from dual },3开始截止日期-事件函数async function(ctx, evt, name, value, oldValue) { let ls_sql if (value 1) { ls_sql select to_char(date_start,yyyy-mm-dd) y1,to_char(date_end,yyyy-mm-dd) y2 from month_close a where a.comp_no :ls_comp and a.year||a.month (select min(b.year||b.month) from month_close b where b.trans_idN and b.comp_no :ls_comp) } else { if (value 2) { ls_sql select to_char(date_start,yyyy-mm-dd) y1,to_char(date_end,yyyy-mm-dd) y2 from month_close a where a.comp_no :ls_comp and a.year||a.month (select max(b.year||b.month) from month_close b where b.trans_idY and b.comp_no :ls_comp) } else { let today new Date(); // 创建一个表示当前日期和时间的Date对象 let year today.getFullYear(); // 获取年份 let month today.getMonth() 1; // 获取月份注意月份是从0开始的所以要加1 let day today.getDate(); if (month.length 1) { month 0 month } if (day.length 1) { day 0 day } ctx.setArg(ldt_1, year - month -01) ctx.setArg(ldt_2, year - month - day) return; } } let res0 await ctx.oracleQuery({ sql: ls_sql, binds: { ls_comp: ctx.utils.getCurrentCompNo() }, to_lower: true }) if (!res0) { return 0; }; // console.log(res0); ctx.setArg(ldt_1, res0.data.result.rows[0].y1) ctx.setArg(ldt_2, res0.data.result.rows[0].y2) }4全选全不选函数示例async function(ctx) { dw_detail ctx.dw // 获取总行数 const rowCount dw_detail.rowCount(); // 如果没有数据提示 if (rowCount 0) { await ctx.message.info(没有数据可操作); return; } // 遍历所有行 for (let i 1; i rowCount; i) { dw_detail.setItem(i, sflag, Y); } }5getbillno函数async function f_get_billno(key, prefix, dateFormat, seqLen, desc) { try { const response await ctx.api.post(/sales_manage/inner_order_input/get_billno_new, { as_billtype: key, as_pre: prefix, as_ym: dateFormat, al_len: seqLen, as_desc: desc }); if (response.data response.code 200) { return response.data; } else { console.error(生成编号失败:, response.data?.msg); return null; } } catch (e) { console.error(调用编号接口异常:, e); return null; } };9常用H5变量及语句和相关函数1常用系统变量let comp_no ctx.utils.getCurrentCompNo();//当前人公司 let dept_no ctx.utils.getCurrentDeptNo();//当前人部门 let body_no ctx.utils.getCurrentBodyNo();//当前人事业部 let current_emp_id ctx.utils.getCurrentEmpId();//当前人员工号 let nowStr ctx.utils.nowStr();//当前时间2常用语句及相关函数1获取某个表let dw_master ctx.getDw(dw_inm_kcdb_hn);2获取某个表的某个字段dw_master.getItem(row, proj_no);3获取某个表的行数rowCount dw_master.rowCount();4获取某个表的当前点击行下标row dw_master.getRow();5获取页面搜索框内的某个字段let cbx_end ctx.args.cbx_end;6设置页面搜索框内的某个字段为某个值ctx.setArg(cbx_end,%)7设置某个表的某个字段的值为dw_master.setItem(row, proj_no, proj_no);8获取某个表的某个子列dept_select dw_master.getChild(proj_num);9重置子列的选项dept_select.retrieve(proj_no, ls_comp);10返回行改变行之前的某个字段ctx.revertItem(row, colName.name);11打开某个弹窗相关代码var picked; picked await ctx.openDwDialog({ pageKey: dw_cont_proj_nocomp, title: 选择项目, multiSelect: false, autoQuery: true, selectFlagColumn: sflag, width: 80%, height: 60vh }); // 如果未选择任何项目直接返回 if (!picked) return; dw_master.setItem(row, proj_no_name, picked.value.proj_no picked.value.proj_name); dw_master.setItem(row, proj_no, picked.value.proj_no);12时间日期页面初始化函数function(ctx) { let ls_sql ls_sql select to_char(date_start,yyyy-mm-dd) y1,to_char(date_end,yyyy-mm-dd) y2 from month_close a where a.comp_no :ls_comp and a.year||a.month (select min(b.year||b.month) from month_close b where b.trans_idN and b.comp_no :ls_comp) let res0 await ctx.oracleQuery({ sql: ls_sql, binds: { ls_comp: ctx.utils.getCurrentCompNo() }, to_lower: true }) if (!res0) { return 0; }; // console.log(res0); ctx.setArg(ldt_1, res0.data.result.rows[0].y1) ctx.setArg(ldt_2, res0.data.result.rows[0].y2) }13时间日期页面切换函数async function(ctx, evt, name, value, oldValue) { let ls_sql if (value 1) { ls_sql select to_char(date_start,yyyy-mm-dd) y1,to_char(date_end,yyyy-mm-dd) y2 from month_close a where a.comp_no :ls_comp and a.year||a.month (select min(b.year||b.month) from month_close b where b.trans_idN and b.comp_no :ls_comp) } else { if (value 2) { ls_sql select to_char(date_start,yyyy-mm-dd) y1,to_char(date_end,yyyy-mm-dd) y2 from month_close a where a.comp_no :ls_comp and a.year||a.month (select max(b.year||b.month) from month_close b where b.trans_idY and b.comp_no :ls_comp) } else { let today new Date(); // 创建一个表示当前日期和时间的Date对象 let year today.getFullYear(); // 获取年份 let month today.getMonth() 1; // 获取月份注意月份是从0开始的所以要加1 let day today.getDate(); if (month.length 1) { month 0 month } if (day.length 1) { day 0 day } ctx.setArg(ldt_1, year - month -01) ctx.setArg(ldt_2, year - month - day) return; } } let res0 await ctx.oracleQuery({ sql: ls_sql, binds: { ls_comp: ctx.utils.getCurrentCompNo() }, to_lower: true }) if (!res0) { return 0; }; // console.log(res0); ctx.setArg(ldt_1, res0.data.result.rows[0].y1) ctx.setArg(ldt_2, res0.data.result.rows[0].y2) }14搜索区域控制组件动态显隐{ arg: test1, type: checkbox, label: test1, props: { on: %, off: N, defaultValue: N } }, { arg: test2, type: checkbox, label: test2, props: { on: %, off: N, defaultValue: N }, visibleWhen: { field: test1, checked: true } }, { arg: test3, type: checkbox, label: test3, props: { on: %, off: N, defaultValue: N }, visibleWhen: { field: test1, equals: % } }15控制显隐和设置页面值await ctx.setDwVisible(dw_detail, true); await ctx.setDwDataObject(dw_detail, dw_sal_0504ok1); 
长河君 · 2026/9/7 20:13:25 · 阅读 1.2k 低代码平台页面配置与开发笔记
1. 内容转行配置在 styles 里 border 同级后面加这一段代码实现内容转行如果高度还不对则设置每一列的宽度textwrap: true, word-wrap: break-word2. 多页面布局代码page_layout: { items: [ { key: dw_inm_070401new_rk, flex: 1, source: self, page_key: dw_inm_070401new_rk, minHeight: 60px }, { key: printmx, flex: 1, name: printmx, visible: false, page_key: dw_inm_070401_rkewmprint, minHeight: 100px, initialHeight: 30% } ], pattern: 11, version: 1, primary_key: dw_inm_070401new_rk }3. SQL 执行代码res await ctx.oracleQuery({ sql: sql, binds: { ls_item: ls_item, }, to_lower: true }) if (!res) { return; }; ls_unit res.data.result.rows[0].ls_unit4. 行返回上一个状态ctx.revertItem(row, name.name);5. 调整页面的顺序正确搜索出数据看 SQL。排序draggroup: 10过滤filterable是否能点击tabsequence: 0。style 里面加转行textwrap: true、word-wrap: break-word。props 添加props: { showSelector: true, showHScrollBar: true, showVScrollBar: true, currentRowSelected: true, showFixedRowHeader: true }汉化子查询(select proj_no || || proj_name from prj_head where proj_no pur_order.prj_no)字段是否有值。函数逻辑看 PB。6. 页面按钮代码page_toolbar: { custom: [ { id: cbx_all, icon: , type: primary, label: 全审 }, { id: cbx_all_not, icon: , type: primary, label: 全不审 } ], buttons: { copy: { label: 复制行, visible: false }, save: { label: 保存, visible: true }, print: { label: 打印, visible: false }, query: { label: 查询, visible: true }, reset: { label: 重置, visible: false }, delete: { label: 删除行, visible: false }, insert: { label: 新增行, visible: false }, nextRow: { label: 下一条, visible: false }, priorRow: { label: 上一条, visible: false } }, version: 1 }7常用内置变量comp_list公司分管body_list事业部分管dept_list部门分管current_emp_id隐藏current_comp_no隐藏current_dept_no隐藏current_body_no隐藏dropdown_sqlSQL下拉手动下拉 values/optionsselect8:常用函数语句1执行查询ctx.runBuiltin(query)2开始截止日期-页面代码{ arg: ls_rqtype, type: dropdown_sql, label: , value: select 1,库存当月期间 from dual union select 2,库存上月期间 from dual union select 3,自然期间 from dual },3开始截止日期-事件函数async function(ctx, evt, name, value, oldValue) { let ls_sql if (value 1) { ls_sql select to_char(date_start,yyyy-mm-dd) y1,to_char(date_end,yyyy-mm-dd) y2 from month_close a where a.comp_no :ls_comp and a.year||a.month (select min(b.year||b.month) from month_close b where b.trans_idN and b.comp_no :ls_comp) } else { if (value 2) { ls_sql select to_char(date_start,yyyy-mm-dd) y1,to_char(date_end,yyyy-mm-dd) y2 from month_close a where a.comp_no :ls_comp and a.year||a.month (select max(b.year||b.month) from month_close b where b.trans_idY and b.comp_no :ls_comp) } else { let today new Date(); // 创建一个表示当前日期和时间的Date对象 let year today.getFullYear(); // 获取年份 let month today.getMonth() 1; // 获取月份注意月份是从0开始的所以要加1 let day today.getDate(); if (month.length 1) { month 0 month } if (day.length 1) { day 0 day } ctx.setArg(ldt_1, year - month -01) ctx.setArg(ldt_2, year - month - day) return; } } let res0 await ctx.oracleQuery({ sql: ls_sql, binds: { ls_comp: ctx.utils.getCurrentCompNo() }, to_lower: true }) if (!res0) { return 0; }; // console.log(res0); ctx.setArg(ldt_1, res0.data.result.rows[0].y1) ctx.setArg(ldt_2, res0.data.result.rows[0].y2) }4全选全不选函数示例async function(ctx) { dw_detail ctx.dw // 获取总行数 const rowCount dw_detail.rowCount(); // 如果没有数据提示 if (rowCount 0) { await ctx.message.info(没有数据可操作); return; } // 遍历所有行 for (let i 1; i rowCount; i) { dw_detail.setItem(i, sflag, Y); } }5getbillno函数async function f_get_billno(key, prefix, dateFormat, seqLen, desc) { try { const response await ctx.api.post(/sales_manage/inner_order_input/get_billno_new, { as_billtype: key, as_pre: prefix, as_ym: dateFormat, al_len: seqLen, as_desc: desc }); if (response.data response.code 200) { return response.data; } else { console.error(生成编号失败:, response.data?.msg); return null; } } catch (e) { console.error(调用编号接口异常:, e); return null; } };9常用H5变量及语句和相关函数1常用系统变量let comp_no ctx.utils.getCurrentCompNo();//当前人公司 let dept_no ctx.utils.getCurrentDeptNo();//当前人部门 let body_no ctx.utils.getCurrentBodyNo();//当前人事业部 let current_emp_id ctx.utils.getCurrentEmpId();//当前人员工号 let nowStr ctx.utils.nowStr();//当前时间2常用语句及相关函数1获取某个表let dw_master ctx.getDw(dw_inm_kcdb_hn);2获取某个表的某个字段dw_master.getItem(row, proj_no);3获取某个表的行数rowCount dw_master.rowCount();4获取某个表的当前点击行下标row dw_master.getRow();5获取页面搜索框内的某个字段let cbx_end ctx.args.cbx_end;6设置页面搜索框内的某个字段为某个值ctx.setArg(cbx_end,%)7设置某个表的某个字段的值为dw_master.setItem(row, proj_no, proj_no);8获取某个表的某个子列dept_select dw_master.getChild(proj_num);9重置子列的选项dept_select.retrieve(proj_no, ls_comp);10返回行改变行之前的某个字段ctx.revertItem(row, colName.name);11打开某个弹窗相关代码var picked; picked await ctx.openDwDialog({ pageKey: dw_cont_proj_nocomp, title: 选择项目, multiSelect: false, autoQuery: true, selectFlagColumn: sflag, width: 80%, height: 60vh }); // 如果未选择任何项目直接返回 if (!picked) return; dw_master.setItem(row, proj_no_name, picked.value.proj_no picked.value.proj_name); dw_master.setItem(row, proj_no, picked.value.proj_no);12时间日期页面初始化函数function(ctx) { let ls_sql ls_sql select to_char(date_start,yyyy-mm-dd) y1,to_char(date_end,yyyy-mm-dd) y2 from month_close a where a.comp_no :ls_comp and a.year||a.month (select min(b.year||b.month) from month_close b where b.trans_idN and b.comp_no :ls_comp) let res0 await ctx.oracleQuery({ sql: ls_sql, binds: { ls_comp: ctx.utils.getCurrentCompNo() }, to_lower: true }) if (!res0) { return 0; }; // console.log(res0); ctx.setArg(ldt_1, res0.data.result.rows[0].y1) ctx.setArg(ldt_2, res0.data.result.rows[0].y2) }13时间日期页面切换函数async function(ctx, evt, name, value, oldValue) { let ls_sql if (value 1) { ls_sql select to_char(date_start,yyyy-mm-dd) y1,to_char(date_end,yyyy-mm-dd) y2 from month_close a where a.comp_no :ls_comp and a.year||a.month (select min(b.year||b.month) from month_close b where b.trans_idN and b.comp_no :ls_comp) } else { if (value 2) { ls_sql select to_char(date_start,yyyy-mm-dd) y1,to_char(date_end,yyyy-mm-dd) y2 from month_close a where a.comp_no :ls_comp and a.year||a.month (select max(b.year||b.month) from month_close b where b.trans_idY and b.comp_no :ls_comp) } else { let today new Date(); // 创建一个表示当前日期和时间的Date对象 let year today.getFullYear(); // 获取年份 let month today.getMonth() 1; // 获取月份注意月份是从0开始的所以要加1 let day today.getDate(); if (month.length 1) { month 0 month } if (day.length 1) { day 0 day } ctx.setArg(ldt_1, year - month -01) ctx.setArg(ldt_2, year - month - day) return; } } let res0 await ctx.oracleQuery({ sql: ls_sql, binds: { ls_comp: ctx.utils.getCurrentCompNo() }, to_lower: true }) if (!res0) { return 0; }; // console.log(res0); ctx.setArg(ldt_1, res0.data.result.rows[0].y1) ctx.setArg(ldt_2, res0.data.result.rows[0].y2) }14搜索区域控制组件动态显隐{ arg: test1, type: checkbox, label: test1, props: { on: %, off: N, defaultValue: N } }, { arg: test2, type: checkbox, label: test2, props: { on: %, off: N, defaultValue: N }, visibleWhen: { field: test1, checked: true } }, { arg: test3, type: checkbox, label: test3, props: { on: %, off: N, defaultValue: N }, visibleWhen: { field: test1, equals: % } }15控制显隐和设置页面值await ctx.setDwVisible(dw_detail, true); await ctx.setDwDataObject(dw_detail, dw_sal_0504ok1);