n-cols for rbform

2024-09-20 23:45:55 +08:00 · 2021-10-31 17:31:24 +08:00 · 2021-10-31 17:31:24 +08:00 · 49f7f7965e
parent 4789415a7e
commit 49f7f7965e
6 changed files with 112 additions and 92 deletions
--- a/src/main/resources/web/assets/css/rb-page.css
+++ b/src/main/resources/web/assets/css/rb-page.css
@ -837,6 +837,44 @@ select.form-control:not([disabled]) {

 /* FormPage */

+.form-layout > .row {
+  display: flex;
+}
+
+.form-layout > .row .form-group {
+  display: flex;
+  margin: 0;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.form-layout > .row .form-group > .col-form-label {
+  width: 140px;
+  padding-right: 17px;
+  text-align: right;
+}
+
+.form-layout > .row .form-group > .col-form-control {
+  flex: 1;
+  position: relative;
+}
+
+.form-layout .form-line {
+  width: 100%;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+.rbform > .row.form {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.rbform > .dialog-footer {
+  margin-left: -20px;
+  margin-right: -20px;
+}
+
 .rbform > form > .alert {
  margin: 20px 20px 0;
 }
@ -879,18 +917,6 @@ select.form-control:not([disabled]) {
  margin-right: 18px;
 }

-/* .rbform .select2-container--default .select2-selection--multiple::after,
-.type-REFERENCE .select2-container--default .select2-selection--single .select2-selection__arrow b::after {
-    content: '\f1c3';
-    font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
-    font-size: 1.5rem;
-    font-weight: 400;
-    color: #aaa;
-    position: absolute;
-    right: 8px;
-    top: 9px;
-} */
-
 .type-REFERENCE .select2-container--default .select2-selection--single .select2-selection__arrow b::after {
  right: 7px;
  top: 8px;
--- a/src/main/resources/web/assets/css/view-page.css
+++ b/src/main/resources/web/assets/css/view-page.css
@ -67,8 +67,9 @@ body {
  opacity: 0.8;
 }

-.rbview-form .form-group.row {
-  padding: 4px 0;
+.rbview-form > .row .form-group {
+  padding-top: 4px;
+  padding-bottom: 4px;
 }

 .rbview-form .form-control-plaintext {
@ -331,7 +332,9 @@ body {
  border-radius: 99px;
 }

-.rbview-form .form-group.row.editable a.edit {
+/* editable */
+
+.rbview-form .form-group.editable a.edit {
  position: absolute;
  right: 15px;
  top: 0;
@ -345,35 +348,31 @@ body {
  display: none;
 }

-.rbview-form .form-group.row.editable a.edit::before {
+.rbview-form .form-group.editable a.edit::before {
  font-family: 'Material-Design-Iconic-Font';
  content: '\f158';
  font-size: 16px;
  display: inline-block;
 }

-.rbview-form .form-group.row.editable a.edit:hover {
+.rbview-form .form-group.editable a.edit:hover {
  color: #4285f4;
 }

-.rbview-form .form-group.row.editable a.edit:active {
+.rbview-form .form-group.editable a.edit:active {
  box-shadow: inset 0 2px 0 #e6e6e6;
  background-color: #f0f0f0;
 }

-.rbview-form .form-group.row.editable > div {
-  position: relative;
-}
-
-.rbview-form .form-group.row.editable > div:hover > a.edit {
+.rbview-form .form-group.editable > div:hover > a.edit {
  display: block;
 }

-.rbview-form .form-group.row.editable > div .edit-oper {
+.rbview-form .form-group.editable > div .edit-oper {
  text-align: right;
 }

-.rbview-form .form-group.row.editable > div .edit-oper .btn {
+.rbview-form .form-group.editable > div .edit-oper .btn {
  width: 28px;
  height: 28px;
  overflow: hidden;
@ -384,6 +383,12 @@ body {
  font-weight: bold;
 }

+.rbview-form.readonly .form-group.editable a.edit {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
 .type-AVATAR .edit-oper,
 .type-BOOL .edit-oper,
 .type-FILE .edit-oper,
@ -408,12 +413,6 @@ body {
  margin-top: -1px;
 }

-.rbview-form.readonly .form-group.row.editable a.edit {
-  display: none !important;
-  width: 0 !important;
-  height: 0 !important;
-}
-
 .rbview-form .img-field .img-upload.img-thumbnail.zoom-in {
  background-color: transparent;
 }
--- a/src/main/resources/web/assets/js/rb-components.js
+++ b/src/main/resources/web/assets/js/rb-components.js
@ -22,7 +22,7 @@ class RbModal extends React.Component {

    return (
      <div className={`modal rbmodal colored-header colored-header-${this.props.colored || 'primary'}`} style={styles} ref={(c) => (this._rbmodal = c)}>
-        <div className="modal-dialog" style={{ maxWidth: `${this.props.width || 680}px` }}>
+        <div className="modal-dialog" style={{ maxWidth: this.props.width || 680 }}>
          <div className="modal-content">
            <div className="modal-header modal-header-colored">
              <h3 className="modal-title">{this.props.title || 'UNTITLED'}</h3>
--- a/src/main/resources/web/assets/js/rb-datalist.common.js
+++ b/src/main/resources/web/assets/js/rb-datalist.common.js
@ -566,11 +566,11 @@ const RbListCommon = {
      })
    }

-    // 自动打开新建
-    if (location.hash === '#!/New') $('.J_new').trigger('click')
-
    const entity = wpc.entity

+    RbListPage.init(wpc.listConfig, entity, wpc.privileges)
+    if (wpc.advFilter !== false) AdvFilters.init('.adv-search', entity[0])
+
    // 新建
    $('.J_new').click(() => RbFormModal.create({ title: $L('新建%s', entity[1]), entity: entity[0], icon: entity[2] }))
    // 导出
@ -578,8 +578,9 @@ const RbListCommon = {
    // 批量修改
    $('.J_batch').click(() => renderRbcomp(<BatchUpdate listRef={RbListPage._RbList} entity={entity[0]} />))

-    RbListPage.init(wpc.listConfig, entity, wpc.privileges)
-
-    if (wpc.advFilter !== false) AdvFilters.init('.adv-search', entity[0])
+    // 自动打开新建
+    if (location.hash === '#!/New') {
+      setTimeout(() => $('.J_new').trigger('click'), 200)
+    }
  },
 }
--- a/src/main/resources/web/assets/js/rb-forms.js
+++ b/src/main/resources/web/assets/js/rb-forms.js
@ -17,12 +17,14 @@ class RbFormModal extends React.Component {
  }

  render() {
+    const maxWidth = { maxWidth: this.props.width || 1064 }
+
    return (
      this.state.isDestroy !== true && (
        <div className="modal-wrapper">
          <div className="modal rbmodal colored-header colored-header-primary" ref={(c) => (this._rbmodal = c)}>
-            <div className="modal-dialog modal-lg">
-              <div className="modal-content">
+            <div className="modal-dialog" style={maxWidth}>
+              <div className="modal-content" style={maxWidth}>
                <div className="modal-header modal-header-colored">
                  {this.state.icon && <span className={'icon zmdi zmdi-' + this.state.icon} />}
                  <h3 className="modal-title">{this.state.title || $L('新建')}</h3>
@ -204,14 +206,14 @@ class RbForm extends React.Component {

  render() {
    return (
-      <div className="rbform">
-        <div className="form" ref={(c) => (this._form = c)}>
+      <div className="rbform form-layout">
+        <div className="form row" ref={(c) => (this._form = c)}>
          {this.props.children.map((fieldComp) => {
            const refid = fieldComp.props.field === TYPE_DIVIDER ? null : `fieldcomp-${fieldComp.props.field}`
            return React.cloneElement(fieldComp, { $$$parent: this, ref: refid })
          })}
-          {this.renderFormAction()}
        </div>
+        {this.renderFormAction()}
      </div>
    )
  }
@ -242,24 +244,22 @@ class RbForm extends React.Component {
    }

    return (
-      <div className="form-group row footer">
-        <div className="col-12 col-sm-8 offset-sm-3" ref={(c) => (this._formAction = c)}>
-          <div className="btn-group dropup btn-space">
-            <button className="btn btn-primary" type="button" onClick={() => this.post()}>
-              {$L('保存')}
-            </button>
-            {moreActions.length > 0 && (
-              <React.Fragment>
-                <button className="btn btn-primary dropdown-toggle w-auto" type="button" data-toggle="dropdown">
-                  <i className="icon zmdi zmdi-chevron-up" />
-                </button>
-                <div className="dropdown-menu dropdown-menu-primary dropdown-menu-right">{moreActions}</div>
-              </React.Fragment>
-            )}
-          </div>
-          <button className="btn btn-secondary btn-space" type="button" onClick={() => this.props.$$$parent.hide()}>
-            {$L('取消')}
+      <div className="dialog-footer">
+        <button className="btn btn-secondary btn-space" type="button" onClick={() => this.props.$$$parent.hide()}>
+          {$L('取消')}
+        </button>
+        <div className="btn-group dropup btn-space">
+          <button className="btn btn-primary" type="button" onClick={() => this.post()}>
+            {$L('保存')}
          </button>
+          {moreActions.length > 0 && (
+            <React.Fragment>
+              <button className="btn btn-primary dropdown-toggle w-auto" type="button" data-toggle="dropdown">
+                <i className="icon zmdi zmdi-chevron-up" />
+              </button>
+              <div className="dropdown-menu dropdown-menu-primary dropdown-menu-right">{moreActions}</div>
+            </React.Fragment>
+          )}
        </div>
      </div>
    )
@ -409,20 +409,19 @@ class RbFormElement extends React.Component {
  render() {
    const props = this.props

-    let colWidths = [3, 8]
-    if (props.onView) {
-      colWidths[0] = 4
-      if (props.isFull === true) colWidths = [2, 10]
-    }
+    let colspan = 6 // default
+    if (props.colspan === 4 || props.isFull === true) colspan = 12
+    else if (props.colspan === 1) colspan = 3
+    else if (props.colspan === 3) colspan = 9

    const editable = props.$$$parent.onViewEditable && props.onView && !props.readonly

    return (
-      <div className={`form-group row type-${props.type} ${editable ? 'editable' : ''}`} data-field={props.field}>
-        <label ref={(c) => (this._fieldLabel = c)} className={`col-12 col-sm-${colWidths[0]} col-form-label text-sm-right ${!props.onView && !props.nullable ? 'required' : ''}`}>
+      <div className={`col-12 col-sm-${colspan} form-group type-${props.type} ${editable ? 'editable' : ''}`} data-field={props.field}>
+        <label ref={(c) => (this._fieldLabel = c)} className={`col-form-label ${!props.onView && !props.nullable ? 'required' : ''}`}>
          {props.label}
        </label>
-        <div ref={(c) => (this._fieldText = c)} className={'col-12 col-sm-' + colWidths[1]}>
+        <div ref={(c) => (this._fieldText = c)} className="col-form-control">
          {!props.onView || (editable && this.state.editMode) ? this.renderElement() : this.renderViewElement()}
          {!props.onView && props.tip && <p className="form-text">{props.tip}</p>}
          {editable && !this.state.editMode && <a className="edit" title={$L('编辑')} onClick={() => this.toggleEditMode(true)} />}
@ -1752,25 +1751,23 @@ class RbFormDivider extends React.Component {

  render() {
    return (
-      <div className="form-line hover" ref={(c) => (this._element = c)}>
-        <fieldset>{this.props.label && <legend onClick={() => this.toggle()}>{this.props.label}</legend>}</fieldset>
+      <div className="form-line hover" ref={(c) => (this._$formLine = c)}>
+        <fieldset>
+          {this.props.label && (
+            <legend onClick={() => this.toggle()} className="text-bold">
+              {this.props.label}
+            </legend>
+          )}
+        </fieldset>
      </div>
    )
  }

  toggle() {
-    if (this.props.onView) {
-      let $next = $(this._element).parent()
-      while (($next = $next.next()).length > 0) {
-        if ($next.find('>.form-line').length > 0) break
-        $next.toggleClass('hide')
-      }
-    } else {
-      let $next = $(this._element)
-      while (($next = $next.next()).length > 0) {
-        if ($next.hasClass('form-line') || $next.hasClass('footer')) break
-        $next.toggleClass('hide')
-      }
+    let $next = $(this._$formLine)
+    while (($next = $next.next()).length > 0) {
+      if ($next.hasClass('form-line') || $next.hasClass('footer')) break
+      $next.toggleClass('hide')
    }
  }
 }
--- a/src/main/resources/web/assets/js/rb-view.js
+++ b/src/main/resources/web/assets/js/rb-view.js
@ -20,7 +20,7 @@ class RbViewForm extends React.Component {

  render() {
    return (
-      <div className="rbview-form" ref={(c) => (this._viewForm = c)}>
+      <div className="rbview-form form-layout" ref={(c) => (this._viewForm = c)}>
        {this.state.formComponent}
      </div>
    )
@ -44,7 +44,7 @@ class RbViewForm extends React.Component {

      const viewData = {}
      const VFORM = (
-        <div>
+        <React.Fragment>
          {hadApproval && <ApprovalProcessor id={this.props.id} entity={this.props.entity} />}
          <div className="row">
            {res.data.elements.map((item) => {
@ -53,8 +53,9 @@ class RbViewForm extends React.Component {
              return detectViewElement(item)
            })}
          </div>
-        </div>
+        </React.Fragment>
      )
+
      this.setState({ formComponent: VFORM }, () => {
        this.hideLoading()
        if (window.FrontJS) {
@ -153,12 +154,8 @@ const detectViewElement = function (item) {
  if (!window.detectElement) throw 'detectElement undef'
  item.onView = true
  item.editMode = false
-  item.key = `col-${item.field === TYPE_DIVIDER ? $random() : item.field}`
-  return (
-    <div className={`col-12 col-sm-${item.isFull ? 12 : 6}`} key={item.key}>
-      {window.detectElement(item)}
-    </div>
-  )
+  // item.key = `col-${item.field === TYPE_DIVIDER ? $random() : item.field}`
+  return window.detectElement(item)
 }

 const _renderError = (message) => {
@ -328,7 +325,7 @@ class EntityRelatedList extends RelatedList {
            </span>
          </div>
        </div>
-        <div className="rbview-form inside">{this.state.viewComponents[item[0]] || <RbSpinner fully={true} />}</div>
+        <div className="rbview-form form-layout inside">{this.state.viewComponents[item[0]] || <RbSpinner fully={true} />}</div>
      </div>
    )
  }