/** * datalist网格查询面板布局风格1 * @param {*} form 表单配置[{colspan:1,prop:"fieldName1",label:"字段1"}] * @param {*} option.hcQueryPanel 查询面板个性化配置 * @param {*} option.hcDataList 数据列表个性化配置 * @param {*} option.row 网格行通用配置 * @param {*} option.cols 网格列配置 * @returns */ export function queryStyle01(form, option = {}) { // 初始化cols列配置, 默认3列 let cols = option.cols || [ { colWidth: "40%", }, { colWidth: "30%", }, { colWidth: "30%", } ] // 计算rows查询面板内容 let rows = {}; let curtRow = newEmptyRow(); let rIndex = 1; let colTotalCount = cols.length; let colSpanCount = 0; // 计算rows行配置 function newEmptyRow() { // 创建空行 return Object.assign({ tds: {} }, option.row || {}); } // 不足列进行补全 function fillTd(rIndex, curtColIndex, colCount, curtRow) { if (curtColIndex < colCount) { for (let m = curtColIndex; m < colCount; m++) { let mAxis = String.fromCharCode(65 + m) + rIndex; curtRow.tds[mAxis] = { colspan: 1 } } } } for (let i = 0, l = form.length; i < l; i++) { let fItem = form[i]; let colspan = fItem.colspan || 1; let tdAxis = String.fromCharCode(65 + colSpanCount); // 当前项已超本行总列数或当前是行分隔项,补全空余, 别取新行 if (colSpanCount + colspan > colTotalCount) { // 不足列进行补全 fillTd(rIndex, colSpanCount, colTotalCount, curtRow); // 当前列添加到rows,另取新行 let rAxis = "r" + rIndex; rows[rAxis] = JSON.parse(JSON.stringify(curtRow)); curtRow = newEmptyRow(); rIndex++; colSpanCount = 0; } // 当前行curtRow添加表单项td let propAxis = tdAxis + rIndex; curtRow.tds[propAxis] = fItem; colSpanCount += colspan; } // 添加最后一行 if (colSpanCount > 0) { // 补全最后一行 fillTd(rIndex, colSpanCount, colTotalCount, curtRow); let rAxis = "r" + rIndex; rows[rAxis] = JSON.parse(JSON.stringify(curtRow)); } // 定义dataList布局 let dataList = { controlName: "HcDataList", controlId: "HcDataList_02", width: "100%", style: "border-spacing:0px;border-collapse: collapse;table-layout:fixed;word-break:break-all;", rows: rows, cols: cols } // 应用datalist个性化配置 Object.assign(dataList, option.hcDataList); // 定义查询面板 let queryPanel = { inline: true, size: "small", children: [ dataList ], }; // 查询面板 return Object.assign(queryPanel, Option.hcQueryPanel); }