birt form 样式修改

08335 / hivui-platform-template

hivui平台项目模板

Browse code birt form 样式修改 master
1 parent e12ff18 commit f2350b26bd1e41eaf3f8d82fc9f9faa2add3731b hhb authored on 16 Mar 2022

Showing 2 changed files

Ignore Space Show notes View project/hivuiBirt/styles/index.css
.custom-tree-node { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px; width: 80%; flex: 1 140px; } .custom-tree-node > span:nth-child(1){ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .custom-tree-node .btn{ opacity: 0; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } .custom-tree-node:hover .btn{ opacity: 1; } .custom-tree-node .btn .el-icon-edit{ color: #67c23a; } .custom-tree-node .btn .el-icon-delete{ color: #f56c6c; } .cell .el-input-group__append{ padding: 0 5px !important; text-align: center; } .cell .el-input-group__append .el-button{ padding: 0; margin: 0; } /* .el-form-item__error{ line-height: 0; } / .el-row>.zhc-birt-cell-children>.el-button { border: none; border-right: 1px solid #ddd; border-radius: 0; padding: 5px 15px; } / 整个滚动条 / ::-webkit-scrollbar { width: 8px; height: 10px; } / 滚动条上的滚动滑块 / ::-webkit-scrollbar-thumb { / background-color: #49b1f5; / / 关键代码 / / background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); / background-color: rgba(0,0,0,.3); border-radius: 32px; } / 滚动条轨道 / ::-webkit-scrollbar-track { background-color: #dbeffd; border-radius: 32px; } .custom-tree-node .el-icon-folder-opened,.el-icon-folder{ color: #ffc107; } .custom-tree-node .el-icon-document{ color: #009688; } .custom-tree-node .icon-root{ color: blue; } .custom-tree-node .icon-ptm{ color: royalblue; } .custom-tree-node .el-icon-user{ color: coral;; } .custom-tree-node .icon-org, .icon-func{ color: aqua; } .custom-tree-node .icon-dpt, .icon-flow{ color: deepskyblue; } .custom-tree-node .el-button.is-disabled i{ color: #C0C4CC !important; cursor: not-allowed; } .el-table__header-wrapper th.isrequired ::before{ content: ''; color: red; margin-right: 5px; } .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { background-color: #f0f7ff; color: #2355f1; } /* 取消查找定义input红色边框 / .el-form-item.is-error .queryPanel .el-input__inner, .el-form-item.is-error .el-pagination__sizes .el-input__inner, .el-form-item.is-error .el-pagination__jump .el-input__inner{ border-color: #DCDFE6; } / 弹框样式 / .el-dialog__body .el-main{ padding: 0; } .el-dialog .queryPanel .zhc-birt-data-list thead { display: none; } / tabs / .el-tabs--left .el-tabs__item, .el-tabs--right .el-tabs__item{ width: 60px; line-height: 24px; height: auto; word-wrap: break-word; white-space: pre-line; padding-bottom: 20px; } .el-tabs--right .el-tabs__item{ width: 40px; } .el-tabs--left, .el-tabs--right{ height: auto !important; } .el-tabs--right .queryPanel + div .el-button { margin-right: 10px; } /取消mian的padding,防止大屏看板高度超出100%/ .chart .zhc-birt-cell-children .el-main{ padding: 0; } .el-tabs .el-main{ padding: 0 } .toolBar{ padding: 5px 5% !important; border-bottom: 1px solid #c2bcc0; } .extra .toolBar{ border: none; padding: 0!important; } .dataList_title{ margin-top:5px; } .dataList_title td{ margin-top:5px; position: relative; } .dataList_title td::before{ content: ' '; display: block; width: 5px; height: 30px; position: absolute; border-radius: 5px; background: #3f96ed; } .toolBar button .icon-XLSX{ font-size: 22px; } .avatar-uploader{ background: #f5f3f6; } .avatar-uploader .el-upload { background-color: #fff; } .zhc-birt-data-list .el-form-item__content > span, .zhc-birt-data-list .el-form-item__content > .lookup > span, .zhc-birt-data-list .el-form-item__content > .el-radio-group, .zhc-birt-data-list .el-form-item__content > .el-checkbox{ padding-left: 12px; } .el-table .el-table__cell{ padding: 7px 0; } .el-table .el-table__header-wrapper .el-table__cell, .el-table .el-table__fixed-header-wrapper .el-table__cell{ background: #f5f7fa !important; } .el-table.table_edit > .el-table__body-wrapper > .el-table__body > tbody > .el-table__row > .el-table__cell, .el-table.table_edit .el-table__fixed-right > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell, .el-table.table_edit .el-table__fixed-right > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell{ padding-top: 0; padding-bottom: 0; } .table_edit > .el-table__body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell .cell, .table_edit > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell .cell{ padding: 0 10px; } .el-table--small .el-form-item .el-form-item__content{ line-height: 32px; } .custom-tree-node { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px; width: 80%; flex: 1 140px; } .custom-tree-node > span:nth-child(1){ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .custom-tree-node .btn{ opacity: 0; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } .custom-tree-node:hover .btn{ opacity: 1; } .custom-tree-node .btn .el-icon-edit{ color: #67c23a; } .custom-tree-node .btn .el-icon-delete{ color: #f56c6c; } .cell .el-input-group__append{ padding: 0 5px !important; text-align: center; } .cell .el-input-group__append .el-button{ padding: 0; margin: 0; } / .el-form-item__error{ line-height: 0; } / .el-row>.zhc-birt-cell-children>.el-button { border: none; border-right: 1px solid #ddd; border-radius: 0; padding: 5px 15px; } / 整个滚动条 / ::-webkit-scrollbar { width: 8px; height: 10px; } / 滚动条上的滚动滑块 / ::-webkit-scrollbar-thumb { / background-color: #49b1f5; / / 关键代码 / / background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); / background-color: rgba(0,0,0,.3); border-radius: 32px; } / 滚动条轨道 / ::-webkit-scrollbar-track { background-color: #dbeffd; border-radius: 32px; } .custom-tree-node .el-icon-folder-opened,.el-icon-folder{ color: #ffc107; } .custom-tree-node .el-icon-document{ color: #009688; } .custom-tree-node .icon-root{ color: blue; } .custom-tree-node .icon-ptm{ color: royalblue; } .custom-tree-node .el-icon-user{ color: coral;; } .custom-tree-node .icon-org, .icon-func{ color: aqua; } .custom-tree-node .icon-dpt, .icon-flow{ color: deepskyblue; } .custom-tree-node .el-button.is-disabled i{ color: #C0C4CC !important; cursor: not-allowed; } .el-table__header-wrapper th.isrequired ::before{ content: ''; color: red; margin-right: 5px; } .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { background-color: #f0f7ff; color: #2355f1; } /* 取消查找定义input红色边框 / .el-form-item.is-error .queryPanel .el-input__inner, .el-form-item.is-error .el-pagination__sizes .el-input__inner, .el-form-item.is-error .el-pagination__jump .el-input__inner{ border-color: #DCDFE6; } / 弹框样式 / .el-dialog__body .el-main{ padding: 0; } .el-dialog .queryPanel .zhc-birt-data-list thead { display: none; } / tabs / .el-tabs--left .el-tabs__item, .el-tabs--right .el-tabs__item{ width: 60px; line-height: 24px; height: auto; word-wrap: break-word; white-space: pre-line; padding-bottom: 20px; } .el-tabs--right .el-tabs__item{ width: 40px; } .el-tabs--left, .el-tabs--right{ height: auto !important; } .el-tabs--right .queryPanel + div .el-button { margin-right: 10px; } /取消mian的padding,防止大屏看板高度超出100%*/ .chart .zhc-birt-cell-children .el-main{ padding: 0; }

Ignore Space Show notes View

project/hivuiBirt/styles/index.css

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  width: 80%;
  flex: 1 140px;
}
.custom-tree-node > span:nth-child(1){
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.custom-tree-node .btn{
  opacity: 0;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
}
.custom-tree-node:hover .btn{
    opacity: 1;
}
.custom-tree-node .btn .el-icon-edit{
  color: #67c23a;
}
.custom-tree-node .btn .el-icon-delete{
  color: #f56c6c;
}
.cell .el-input-group__append{
  padding: 0 5px !important;
  text-align: center;
}
.cell .el-input-group__append .el-button{
  padding: 0;
  margin: 0;
}
/* .el-form-item__error{
  line-height: 0;
} */
.el-row>.zhc-birt-cell-children>.el-button {
  border: none;
  border-right: 1px solid #ddd;
  border-radius: 0;
  padding: 5px 15px;
}
/* 整个滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 10px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  /* background-color: #49b1f5; */
  /* 关键代码 */
  /* background-image: -webkit-linear-gradient(45deg,
          rgba(255, 255, 255, 0.4) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.4) 50%,
          rgba(255, 255, 255, 0.4) 75%,
          transparent 75%,
          transparent); */
  background-color: rgba(0,0,0,.3);
  border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #dbeffd;
  border-radius: 32px;
}

.custom-tree-node .el-icon-folder-opened,.el-icon-folder{
    color: #ffc107;
}
.custom-tree-node .el-icon-document{
    color: #009688;
}
.custom-tree-node .icon-root{
    color: blue;
}
.custom-tree-node .icon-ptm{
    color: royalblue;
}
.custom-tree-node .el-icon-user{
    color: coral;;
}
.custom-tree-node .icon-org, .icon-func{
    color: aqua;
}
.custom-tree-node .icon-dpt, .icon-flow{
    color: deepskyblue;
}
.custom-tree-node .el-button.is-disabled i{
  color: #C0C4CC !important;
  cursor: not-allowed;
}
.el-table__header-wrapper th.isrequired ::before{
  content: '*';
  color: red;
  margin-right: 5px;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #f0f7ff;
  color: #2355f1;
}
/*
取消查找定义input红色边框
*/
.el-form-item.is-error .queryPanel .el-input__inner,
.el-form-item.is-error .el-pagination__sizes .el-input__inner,
.el-form-item.is-error .el-pagination__jump .el-input__inner{
  border-color: #DCDFE6;
}

/*
弹框样式
*/
.el-dialog__body .el-main{
  padding: 0;
}
.el-dialog .queryPanel .zhc-birt-data-list thead {
  display: none;
}

/*
tabs
*/
.el-tabs--left .el-tabs__item, .el-tabs--right .el-tabs__item{
  width: 60px;
  line-height: 24px;
  height: auto;
  word-wrap: break-word;
  white-space: pre-line;
  padding-bottom: 20px;
}
.el-tabs--right .el-tabs__item{
  width: 40px;
}
.el-tabs--left, .el-tabs--right{
  height: auto !important;
}
.el-tabs--right .queryPanel + div .el-button {
  margin-right: 10px;
}

/*取消mian的padding,防止大屏看板高度超出100%*/
.chart .zhc-birt-cell-children .el-main{
  padding: 0;
}

.el-tabs .el-main{
  padding: 0
}
.toolBar{
  padding: 5px 5% !important;
  border-bottom: 1px solid #c2bcc0;
}
.extra .toolBar{
  border: none;
  padding: 0!important;
}

.dataList_title{
  margin-top:5px;
}
.dataList_title td{
  margin-top:5px;
  position: relative;
}
.dataList_title td::before{
  content: ' ';
  display: block;
  width: 5px;
  height: 30px;
  position: absolute;
  border-radius: 5px;
  background: #3f96ed;
}
.toolBar button .icon-XLSX{
  font-size: 22px;
}
.avatar-uploader{
  background: #f5f3f6;
}
.avatar-uploader .el-upload {
  background-color: #fff;
}
.zhc-birt-data-list .el-form-item__content > span,
.zhc-birt-data-list .el-form-item__content > .lookup > span,
.zhc-birt-data-list .el-form-item__content > .el-radio-group,
.zhc-birt-data-list .el-form-item__content > .el-checkbox{
  padding-left: 12px;
}
.el-table .el-table__cell{
  padding: 7px 0;
}
.el-table .el-table__header-wrapper .el-table__cell,
.el-table .el-table__fixed-header-wrapper  .el-table__cell{
  background: #f5f7fa !important;
}
.el-table.table_edit > .el-table__body-wrapper > .el-table__body > tbody > .el-table__row > .el-table__cell,
.el-table.table_edit .el-table__fixed-right > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell,
.el-table.table_edit .el-table__fixed-right > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell{
  padding-top: 0;
  padding-bottom: 0;
}
.table_edit > .el-table__body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell .cell,
.table_edit > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell .cell{
  padding: 0 10px;
}
.el-table--small .el-form-item .el-form-item__content{
  line-height: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #dbeffd;
  border-radius: 32px;
}

/*
弹框样式
*/
.el-dialog__body .el-main{
  padding: 0;
}
.el-dialog .queryPanel .zhc-birt-data-list thead {
  display: none;
}

/*取消mian的padding,防止大屏看板高度超出100%*/
.chart .zhc-birt-cell-children .el-main{
  padding: 0;
}

Ignore Space Show notes View project/hivuiBirt/templates/compose/data-list/form-style-01.js
/** * datalist网格表单布局风格1 * @param {} form 表单配置[{rowspan:2,colspan:3,prop:"fieldName1",label:"字段1"}] @param {} option.hcDataList 数据列表个性化配置 @param {} option.row 网格行通用配置 @param {} option.cols 网格列配置 @returns / import { $CONST } from "@birt/funclib/ConstUtil"; import { $HCBIRT } from "@birt/funclib/HCBIRT" export function formStyle01(form, option = {}) { // let TitleTrStyle = option.titleTrStyle \|\| "background-color:rgb(195,231,248);color:rgb(14,96,137);border: 1px solid #E6E6E6;font-family:Microsoft YaHei UI;font-size:11pt;font-weight:bold;text-indent:10px;" let TitleTrStyle = option.titleTrStyle \|\| "font-family:Microsoft YaHei UI;font-size:11pt;font-weight:bold;text-indent:10px;" let LabelTdStyle = option.labelTdStyle \|\| "background-color: #f5f3f6;border: 1px solid #dfd9e0;color:#333;font-family: "Microsoft YaHei UI"; font-size: 10pt; text-align: right;padding-right: 12px;" let emptyStyle = option.emptyStyle \|\| "background-color: #f5f3f6;border: 1px solid #dfd9e0;" // let PropTdStyle = option.propTdStyle \|\| "background-color: #EBEEF5;color:rgb(28,115,153);font-family:Microsoft YaHei UI;font-size:10pt;" let PropTdStyle = option.propTdStyle \|\| "color:rgb(28,115,153);border: 1px solid #dfd9e0;font-family:Microsoft YaHei UI;font-size:10pt;" // 初始化数据列表配置 let hcDataList = Object.assign( { controlName: "HcDataList", width: form.width \|\| $HCBIRT.formWidth, layout: "form", style: "border-spacing:0px;border-collapse: collapse;margin:auto" }, option.hcDataList \|\| {} ); // 初始化cols列配置, 默认6列，700px宽 let cols = option.cols \|\| [ { colWidth: 120, }, { colWidth: "auto", }, { colWidth: 120, }, { colWidth: "auto", }, { colWidth: 120, }, { colWidth: "auto", }, ] // 初始化变量 let rows = {}; let curtRow = newEmptyRow(); let rIndex = 1; let colTotalCount = cols.length; let colSpanCount = 0; let rowspanTds = {}; // 计算rows行配置 function newEmptyRow() { // 创建空行 return Object.assign({ rowHeight: 20, tds: {} }, option.row \|\| {}); } // 获取分隔标题行 function getSplitTitleTr(rIndex, colspan, splitRow = {}) { let splitTr = Object.assign( { style: 'height: 50px;line-height: 32px;', class: 'dataList_title', tds: { }, }, splitRow.tr \|\| {}); let rAxis = "A" + rIndex; splitTr.tds[rAxis] = Object.assign( { value: splitRow.title, class: 'formTitle', style: TitleTrStyle, colspan: colspan, }, splitRow.td \|\| {}) return splitTr; } // 标签列 function getLabelTd(fItem, colspan) { return { value: fItem.label, labelProp: fItem.prop, style: LabelTdStyle + (fItem.style \|\| ""), colspan: colspan \|\| 1, } } // 空格 function getEmptyTd(colspan) { return { colspan: colspan \|\| 1, style: emptyStyle, // style: "background-color: #EBEEF5;" } } // 获取项绑定字段td function getPropTd(formItem, rowspan, colspan) { return { style: PropTdStyle + (formItem.style \|\| ""), className: "", rowspan: rowspan, colspan: colspan, children: [ Object.assign(formItem, { label: "" }), ], } } // 不足列进行补全 function fillTd(rIndex, curtColIndex, colCount, curtRow) { if (curtColIndex < colCount) { for (let m = curtColIndex; m < colCount; m++) { let mAxis = String.fromCharCode(65 + m) + rIndex; if (!rowspanTds[mAxis]) { curtRow.tds[mAxis] = { colspan: 1 } } } } } // 编辑列添加前置或后置项 function propTdAppendBrother(tdChildren, fiChildren) { let instI = 0; fiChildren.forEach(fi => { if (fi.slot && fi.slot == $CONST.PREPEND) { tdChildren.splice(instI, 0, fi); instI++; } else { tdChildren.push(fi); } }) } for (let i = 0, l = form.length; i < l; i++) { let fItem = form[i]; let prop = fItem.prop; let rowspan = fItem.rowspan \|\| 1; let colspan = fItem.colspan \|\| 1; let tdAxis = String.fromCharCode(65 + colSpanCount); // 记录跨行数大于1的列 if (rowspan > 1) { for (let j = rowspan; j > 1; j--) { for (let k = 0; k < colspan; k++) { let tdSpanAxis = String.fromCharCode(65 + colSpanCount + k) + (rIndex + j - 1); rowspanTds[tdSpanAxis] = true; } } } // 判断当前坐标是否被跨行包含 let checkAxis = tdAxis + rIndex; while (rowspanTds[checkAxis]) { colSpanCount++; if (colSpanCount > colTotalCount) { rIndex++; colSpanCount = 0; } checkAxis = String.fromCharCode(65 + colSpanCount) + rIndex; } // 获取表单项类型 let type = fItem.type; // 当前项已超本行总列数或当前是行分隔项，补全空余, 别取新行 if ((colSpanCount + colspan > colTotalCount) \|\| (type == $CONST.SPLITROW)) { // 不足列进行补全 fillTd(rIndex, colSpanCount, colTotalCount, curtRow); // 当前列添加到rows,另取新行 let rAxis = "r" + rIndex; rows[rAxis] = JSON.parse(JSON.stringify(curtRow)); curtRow = newEmptyRow(); rIndex++; colSpanCount = 0; tdAxis = String.fromCharCode(65); // 添加分隔行 if (type == $CONST.SPLITROW) { let splitTr = getSplitTitleTr(rIndex, colTotalCount, fItem); let splitRAxis = "r" + rIndex; rows[splitRAxis] = splitTr; rIndex++; continue; } } // 当前行curtRow添加表单项td if (prop) { let propAxis = tdAxis + rIndex; let propColspan = colspan; // 当前有标签配置时，补全标签显示列 if (fItem.label) { curtRow.tds[tdAxis + rIndex] = getLabelTd(fItem, fItem.labelColspan); propColspan -= 1; propAxis = String.fromCharCode(65 + colSpanCount + 1); } let propTd = getPropTd(fItem, rowspan, propColspan); // 当表单存在children 前置、后置项时添加到添加prop列 if (fItem.brother) { propTdAppendBrother(propTd.children, fItem.brother); } curtRow.tds[propAxis] = propTd; } else { if (fItem.label) { curtRow.tds[tdAxis + rIndex] = getLabelTd(fItem, colspan); } else { curtRow.tds[tdAxis + rIndex] = getEmptyTd(colspan); } } colSpanCount += colspan; } // 添加最后一行 if (colSpanCount > 0) { // 补全最后一行 fillTd(rIndex, colSpanCount, colTotalCount, curtRow); let rAxis = "r" + rIndex; rows[rAxis] = JSON.parse(JSON.stringify(curtRow)); } // console.log('rows', rows) // console.log('cols', cols) hcDataList.rows = rows; hcDataList.cols = cols; // 返回表单结构 return hcDataList; } /* * datalist网格表单布局风格1 * @param {} form 表单配置[{rowspan:2,colspan:3,prop:"fieldName1",label:"字段1"}] @param {} option.hcDataList 数据列表个性化配置 @param {} option.row 网格行通用配置 @param {} option.cols 网格列配置 @returns */ import { $CONST } from "@birt/funclib/ConstUtil"; import { $HCBIRT } from "@birt/funclib/HCBIRT" export function formStyle01(form, option = {}) { let TitleTrStyle = option.titleTrStyle \|\| "background-color:rgb(195,231,248);color:rgb(14,96,137);border: 1px solid #E6E6E6;font-family:Microsoft YaHei UI;font-size:11pt;font-weight:bold;text-indent:10px;" let LabelTdStyle = option.labelTdStyle \|\| "background-color: #EBEEF5;color:#333;font-family: "Microsoft YaHei UI"; font-size: 10pt; text-align: right; padding-right: 12px;" let PropTdStyle = option.propTdStyle \|\| "background-color: #EBEEF5;color:rgb(28,115,153);font-family:Microsoft YaHei UI;font-size:10pt;" // 初始化数据列表配置 let hcDataList = Object.assign( { controlName: "HcDataList", width: $HCBIRT.formWidth, layout: "form", style: "border-spacing:0px;border-collapse: collapse;margin:auto" }, option.hcDataList \|\| {} ); // 初始化cols列配置, 默认6列，700px宽 let cols = option.cols \|\| [ { colWidth: 120, }, { colWidth: "auto", }, { colWidth: 120, }, { colWidth: "auto", }, { colWidth: 120, }, { colWidth: "auto", }, ] // 初始化变量 let rows = {}; let curtRow = newEmptyRow(); let rIndex = 1; let colTotalCount = cols.length; let colSpanCount = 0; let rowspanTds = {}; // 计算rows行配置 function newEmptyRow() { // 创建空行 return Object.assign({ rowHeight: 20, tds: {} }, option.row \|\| {}); } // 获取分隔标题行 function getSplitTitleTr(rIndex, colspan, splitRow = {}) { let splitTr = Object.assign( { rowHeight: 33, tds: { }, }, splitRow.tr \|\| {}); let rAxis = "A" + rIndex; splitTr.tds[rAxis] = Object.assign( { value: splitRow.title, style: TitleTrStyle, colspan: colspan, }, splitRow.td \|\| {}) return splitTr; } // 标签列 function getLabelTd(fItem, colspan) { return { value: fItem.label, labelProp: fItem.prop, style: LabelTdStyle + (fItem.style \|\| ""), colspan: colspan \|\| 1, } } // 空格 function getEmptyTd(colspan) { return { colspan: colspan \|\| 1, style: "background-color: #EBEEF5;" } } // 获取项绑定字段td function getPropTd(formItem, rowspan, colspan) { return { style: PropTdStyle + (formItem.style \|\| ""), className: "", rowspan: rowspan, colspan: colspan, children: [ Object.assign(formItem, { label: "" }), ], } } // 不足列进行补全 function fillTd(rIndex, curtColIndex, colCount, curtRow) { if (curtColIndex < colCount) { for (let m = curtColIndex; m < colCount; m++) { let mAxis = String.fromCharCode(65 + m) + rIndex; if (!rowspanTds[mAxis]) { curtRow.tds[mAxis] = { colspan: 1 } } } } } // 编辑列添加前置或后置项 function propTdAppendBrother(tdChildren, fiChildren) { let instI = 0; fiChildren.forEach(fi => { if (fi.slot && fi.slot == $CONST.PREPEND) { tdChildren.splice(instI, 0, fi); instI++; } else { tdChildren.push(fi); } }) } for (let i = 0, l = form.length; i < l; i++) { let fItem = form[i]; let prop = fItem.prop; let rowspan = fItem.rowspan \|\| 1; let colspan = fItem.colspan \|\| 1; let tdAxis = String.fromCharCode(65 + colSpanCount); // 记录跨行数大于1的列 if (rowspan > 1) { for (let j = rowspan; j > 1; j--) { for (let k = 0; k < colspan; k++) { let tdSpanAxis = String.fromCharCode(65 + colSpanCount + k) + (rIndex + j - 1); rowspanTds[tdSpanAxis] = true; } } } // 判断当前坐标是否被跨行包含 let checkAxis = tdAxis + rIndex; while (rowspanTds[checkAxis]) { colSpanCount++; if (colSpanCount > colTotalCount) { rIndex++; colSpanCount = 0; } checkAxis = String.fromCharCode(65 + colSpanCount) + rIndex; } // 获取表单项类型 let type = fItem.type; // 当前项已超本行总列数或当前是行分隔项，补全空余, 别取新行 if ((colSpanCount + colspan > colTotalCount) \|\| (type == $CONST.SPLITROW)) { // 不足列进行补全 fillTd(rIndex, colSpanCount, colTotalCount, curtRow); // 当前列添加到rows,另取新行 let rAxis = "r" + rIndex; rows[rAxis] = JSON.parse(JSON.stringify(curtRow)); curtRow = newEmptyRow(); rIndex++; colSpanCount = 0; tdAxis = String.fromCharCode(65); // 添加分隔行 if (type == $CONST.SPLITROW) { let splitTr = getSplitTitleTr(rIndex, colTotalCount, fItem); let splitRAxis = "r" + rIndex; rows[splitRAxis] = splitTr; rIndex++; continue; } } // 当前行curtRow添加表单项td if (prop) { let propAxis = tdAxis + rIndex; let propColspan = colspan; // 当前有标签配置时，补全标签显示列 if (fItem.label) { curtRow.tds[tdAxis + rIndex] = getLabelTd(fItem, fItem.labelColspan); propColspan -= 1; propAxis = String.fromCharCode(65 + colSpanCount + 1); } let propTd = getPropTd(fItem, rowspan, propColspan); // 当表单存在children 前置、后置项时添加到添加prop列 if (fItem.brother) { propTdAppendBrother(propTd.children, fItem.brother); } curtRow.tds[propAxis] = propTd; } else { if (fItem.label) { curtRow.tds[tdAxis + rIndex] = getLabelTd(fItem, colspan); } else { curtRow.tds[tdAxis + rIndex] = getEmptyTd(colspan); } } colSpanCount += colspan; } // 添加最后一行 if (colSpanCount > 0) { // 补全最后一行 fillTd(rIndex, colSpanCount, colTotalCount, curtRow); let rAxis = "r" + rIndex; rows[rAxis] = JSON.parse(JSON.stringify(curtRow)); } // console.log('rows', rows) // console.log('cols', cols) hcDataList.rows = rows; hcDataList.cols = cols; // 返回表单结构 return hcDataList; }

Ignore Space Show notes View

project/hivuiBirt/templates/compose/data-list/form-style-01.js

/**
* datalist网格表单布局风格1
* @param {*} form 表单配置[{rowspan:2,colspan:3,prop:"fieldName1",label:"字段1"}]
* @param {*} option.hcDataList 数据列表个性化配置
* @param {*} option.row 网格行通用配置
* @param {*} option.cols 网格列配置
* @returns
*/
import { $CONST } from "@birt/funclib/ConstUtil";
import { $HCBIRT } from "@birt/funclib/HCBIRT"

export function formStyle01(form, option = {}) { 
    // let TitleTrStyle = option.titleTrStyle || "background-color:rgb(195,231,248);color:rgb(14,96,137);border: 1px solid #E6E6E6;font-family:Microsoft YaHei UI;font-size:11pt;font-weight:bold;text-indent:10px;"
    let TitleTrStyle = option.titleTrStyle || "font-family:Microsoft YaHei UI;font-size:11pt;font-weight:bold;text-indent:10px;"
    let LabelTdStyle = option.labelTdStyle || "background-color: #f5f3f6;border: 1px solid #dfd9e0;color:#333;font-family: &quot;Microsoft YaHei UI&quot;; font-size: 10pt; text-align: right;padding-right: 12px;"
    let emptyStyle = option.emptyStyle || "background-color: #f5f3f6;border: 1px solid #dfd9e0;"
    // let PropTdStyle = option.propTdStyle || "background-color: #EBEEF5;color:rgb(28,115,153);font-family:Microsoft YaHei UI;font-size:10pt;"
    let PropTdStyle = option.propTdStyle || "color:rgb(28,115,153);border: 1px solid #dfd9e0;font-family:Microsoft YaHei UI;font-size:10pt;"
    // 初始化数据列表配置
    let hcDataList = Object.assign(
        {
            controlName: "HcDataList",
            width: form.width || $HCBIRT.formWidth,
            layout: "form",
            style: "border-spacing:0px;border-collapse: collapse;margin:auto"
        },
        option.hcDataList || {}
    );
    // 初始化cols列配置, 默认6列，700px宽
    let cols = option.cols || [
        {
            colWidth: 120,
        },
        {
            colWidth: "auto",
        },
        {
            colWidth: 120,
        },
        {
            colWidth: "auto",
        },
        {
            colWidth: 120,
        },
        {
            colWidth: "auto",
        },
    ]
    // 初始化变量
    let rows = {};
    let curtRow = newEmptyRow();
    let rIndex = 1;
    let colTotalCount = cols.length;
    let colSpanCount = 0;
    let rowspanTds = {};
    // 计算rows行配置
    function newEmptyRow() {
        // 创建空行
        return Object.assign({ rowHeight: 20, tds: {} }, option.row || {});
    }
    // 获取分隔标题行
    function getSplitTitleTr(rIndex, colspan, splitRow = {}) {
        let splitTr = Object.assign(
            {
                style: 'height: 50px;line-height: 32px;',
                class: 'dataList_title',
                tds: {
                },
            }, splitRow.tr || {});
        let rAxis = "A" + rIndex;
        splitTr.tds[rAxis] = Object.assign(
            {
                value: splitRow.title,
                class: 'formTitle',
                style: TitleTrStyle,
                colspan: colspan,
            }, splitRow.td || {})
        return splitTr;
    }
    // 标签列
    function getLabelTd(fItem, colspan) {
        return {
            value: fItem.label,
            labelProp: fItem.prop,
            style: LabelTdStyle + (fItem.style || ""),
            colspan: colspan || 1,
        }
    }
    // 空格
    function getEmptyTd(colspan) {
        return {
            colspan: colspan || 1,
            style: emptyStyle,
            // style: "background-color: #EBEEF5;"
        }
    }
    // 获取项绑定字段td
    function getPropTd(formItem, rowspan, colspan) {
        return {
            style: PropTdStyle + (formItem.style || ""),
            className: "",
            rowspan: rowspan,
            colspan: colspan,
            children: [
                Object.assign(formItem, {
                    label: ""
                }),
            ],
        }
    }
    // 不足列进行补全
    function fillTd(rIndex, curtColIndex, colCount, curtRow) {
        if (curtColIndex < colCount) {
            for (let m = curtColIndex; m < colCount; m++) {
                let mAxis = String.fromCharCode(65 + m) + rIndex;
                if (!rowspanTds[mAxis]) {
                    curtRow.tds[mAxis] = {
                        colspan: 1
                    }
                }
            }
        }
    }
    // 编辑列添加前置或后置项
    function propTdAppendBrother(tdChildren, fiChildren) {
        let instI = 0;
        fiChildren.forEach(fi => {
            if (fi.slot && fi.slot == $CONST.PREPEND) {
                tdChildren.splice(instI, 0, fi);
                instI++;
            } else {
                tdChildren.push(fi);
            }
        })
    }

for (let i = 0, l = form.length; i < l; i++) {
        let fItem = form[i];
        let prop = fItem.prop;
        let rowspan = fItem.rowspan || 1;
        let colspan = fItem.colspan || 1;
        let tdAxis = String.fromCharCode(65 + colSpanCount);
        // 记录跨行数大于1的列
        if (rowspan > 1) {
            
            for (let j = rowspan; j > 1; j--) {
                for (let k = 0; k < colspan; k++) {
                    let tdSpanAxis = String.fromCharCode(65 + colSpanCount + k) + (rIndex + j - 1);
                    rowspanTds[tdSpanAxis] = true;
                }
            }
        }
        // 判断当前坐标是否被跨行包含
        let checkAxis = tdAxis + rIndex;
        while (rowspanTds[checkAxis]) {
            colSpanCount++;
            if (colSpanCount > colTotalCount) {
                rIndex++;
                colSpanCount = 0;
            }
            checkAxis = String.fromCharCode(65 + colSpanCount) + rIndex;
        }
        // 获取表单项类型
        let type = fItem.type;
        // 当前项已超本行总列数或当前是行分隔项，补全空余, 别取新行
        if ((colSpanCount + colspan > colTotalCount) || (type == $CONST.SPLITROW)) {
            // 不足列进行补全
            fillTd(rIndex, colSpanCount, colTotalCount, curtRow);
            // 当前列添加到rows,另取新行
            let rAxis = "r" + rIndex;
            rows[rAxis] = JSON.parse(JSON.stringify(curtRow));
            curtRow = newEmptyRow();
            rIndex++;
            colSpanCount = 0;
            tdAxis = String.fromCharCode(65);
            // 添加分隔行
            if (type == $CONST.SPLITROW) {
                let splitTr = getSplitTitleTr(rIndex, colTotalCount, fItem);
                let splitRAxis = "r" + rIndex;
                rows[splitRAxis] = splitTr;
                rIndex++;
                continue;
            }
        }
        // 当前行curtRow添加表单项td
        if (prop) {
            let propAxis = tdAxis + rIndex;
            let propColspan = colspan;
            // 当前有标签配置时，补全标签显示列
            if (fItem.label) {
                curtRow.tds[tdAxis + rIndex] = getLabelTd(fItem, fItem.labelColspan);
                propColspan -= 1;
                propAxis = String.fromCharCode(65 + colSpanCount + 1);
            }
            let propTd = getPropTd(fItem, rowspan, propColspan);
            // 当表单存在children 前置、后置项时添加到添加prop列
            if (fItem.brother) {
                propTdAppendBrother(propTd.children, fItem.brother);
            }
            curtRow.tds[propAxis] = propTd;
        } else {
            if (fItem.label) {
                curtRow.tds[tdAxis + rIndex] = getLabelTd(fItem, colspan);
            } else {
                curtRow.tds[tdAxis + rIndex] = getEmptyTd(colspan);
            }
        }
        colSpanCount += colspan;
    }
    // 添加最后一行
    if (colSpanCount > 0) {
        // 补全最后一行
        fillTd(rIndex, colSpanCount, colTotalCount, curtRow);
        let rAxis = "r" + rIndex;
        rows[rAxis] = JSON.parse(JSON.stringify(curtRow));
    }
    // console.log('rows', rows)
    // console.log('cols', cols)
    hcDataList.rows = rows;
    hcDataList.cols = cols;
    // 返回表单结构
    return hcDataList;
}

export function formStyle01(form, option = {}) {

Show line notes below