File n select (#676)

* feat: details ahowAt2 * enh: file preview on form * be: readonlyw 自动值
getrebuild · Nov 3, 2023 · e9e5358 · e9e5358
1 parent e05f396
commit e9e5358
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 46 deletions.
diff --git a/src/main/java/com/rebuild/core/configuration/general/ViewAddonsManager.java b/src/main/java/com/rebuild/core/configuration/general/ViewAddonsManager.java
@@ -21,11 +21,14 @@
 import com.rebuild.core.metadata.EntityHelper;
 import com.rebuild.core.metadata.MetadataHelper;
 import com.rebuild.core.metadata.MetadataSorter;
+import com.rebuild.core.metadata.easymeta.EasyEntity;
 import com.rebuild.core.metadata.easymeta.EasyMetaFactory;
+import com.rebuild.core.metadata.impl.EasyEntityConfigProps;
 import com.rebuild.core.privileges.UserService;
 import com.rebuild.core.support.i18n.Language;
 import com.rebuild.utils.JSONUtils;
 import org.apache.commons.lang3.ArrayUtils;
+import org.apache.commons.lang3.BooleanUtils;
 import org.apache.commons.lang3.ObjectUtils;
 import org.apache.commons.lang3.StringUtils;
 
@@ -79,9 +82,11 @@ public JSONObject getViewTab(String entity, ID user) {
         if (ifMain.getDetailEntity() != null) {
             JSONArray tabsFluent = new JSONArray();
             for (Entity de : MetadataSorter.sortDetailEntities(ifMain)) {
-                JSONObject deJson = EasyMetaFactory.toJSON(de);
+                EasyEntity deEasy = EasyMetaFactory.valueOf(de);
+                JSONObject deJson = (JSONObject) deEasy.toJSON();
                 deJson.put("entity", de.getName() + "." + MetadataHelper.getDetailToMainField(de).getName());
-                deJson.put("_showAtBottom", false);
+                // 显示位置
+                deJson.put("showAt2", BooleanUtils.toBoolean(deEasy.getExtraAttr(EasyEntityConfigProps.DETAILS_SHOWAT2)) ? 2 : 1);
                 tabsFluent.add(deJson);
             }
 

diff --git a/src/main/java/com/rebuild/core/metadata/impl/EasyEntityConfigProps.java b/src/main/java/com/rebuild/core/metadata/impl/EasyEntityConfigProps.java
@@ -29,6 +29,10 @@ public class EasyEntityConfigProps {
      * 明细重复判断模式为全部数据（否则为主记录下的）
      */
     public static final String DETAILS_GLOBALREPEAT = "detailsGlobalRepeat";
+    /**
+     * 明细显示位置
+     */
+    public static final String DETAILS_SHOWAT2 = "detailsShowAt2";
 
     /**
      * 隐藏常用查询面板

diff --git a/src/main/resources/web/admin/metadata/entity-edit.html b/src/main/resources/web/admin/metadata/entity-edit.html
@@ -121,6 +121,12 @@
                             <span class="custom-control-label">[[${bundle.L('明细不允许为空')}]]</span>
                           </label>
                         </div>
+                        <div class="mt-2">
+                          <label class="custom-control custom-control-sm custom-checkbox custom-control-inline">
+                            <input class="custom-control-input" type="checkbox" id="detailsShowAt2" />
+                            <span class="custom-control-label">[[${bundle.L('明细显示在下方')}]]</span>
+                          </label>
+                        </div>
                       </th:block>
                     </div>
                   </div>

diff --git a/src/main/resources/web/assets/css/rb-page.css b/src/main/resources/web/assets/css/rb-page.css
@@ -1155,10 +1155,6 @@ a.link.link-icon::after {
   color: #aaa;
 }
 
-.img-field a.img-upload {
-  cursor: default;
-}
-
 .img-field a.img-upload b,
 .img-field label.img-upload b,
 .file-field .img-thumbnail b {
@@ -1169,7 +1165,7 @@ a.link.link-icon::after {
   right: 0;
   font-size: 1.2rem;
   color: #fff;
-  cursor: pointer;
+  cursor: default;
   background-color: rgba(0, 0, 0, 0.3);
   text-align: center;
   line-height: 18px;
@@ -1255,7 +1251,7 @@ a.link.link-icon::after {
   border-left: 2px solid #ccc;
   border-radius: 2px;
   max-height: 38px;
-  cursor: default;
+  cursor: pointer;
 }
 
 .file-field a.img-thumbnail {
@@ -3242,6 +3238,11 @@ form {
   padding: 3px 12px;
 }
 
+.select2-tag.select2-container--disabled .select2-search.select2-search--inline,
+.select2-container--disabled .select2-selection--multiple .select2-search.select2-search--inline {
+  display: inline-block;
+}
+
 .rb-color-header .rb-top-header .global-search,
 .rb-color-header .rb-top-header .global-search2,
 .rb-color-header .rb-top-header .global-create2,

diff --git a/src/main/resources/web/assets/js/admin/syscfg-g.js b/src/main/resources/web/assets/js/admin/syscfg-g.js
@@ -25,7 +25,7 @@ $(document).ready(() => {
     if (bindAccount) {
       $('.J_not-bind').addClass('hide')
       $('.J_has-bind a').text(bindAccount)
-    } else if (rb.commercial > 1) {
+    } else if (rb.commercial === 10 || rb.commercial === 20) {
       $('.J_has-bind').addClass('hide')
       $('.J_not-bind .btn').on('click', () => {
         if (res.canBind) UCenter.bind()

diff --git a/src/main/resources/web/assets/js/metadata/entity-edit.js b/src/main/resources/web/assets/js/metadata/entity-edit.js
@@ -47,6 +47,8 @@ $(document).ready(() => {
       extConfig.detailsNotEmpty = $val('#detailsNotEmpty')
       // v3.4
       extConfig.detailsGlobalRepeat = $val('#detailsGlobalRepeat')
+      // v3.5
+      extConfig.detailsShowAt2 = $val('#detailsShowAt2')
     }
     // v3.4
     if ($('#repeatFieldsCheckMode')[0]) {
@@ -168,4 +170,6 @@ $(document).ready(() => {
   if (wpc.extConfig.detailsGlobalRepeat) $('#detailsGlobalRepeat').attr('checked', true)
   if (wpc.extConfig.repeatFieldsCheckMode === 'and') $('#repeatFieldsCheckMode').attr('checked', true)
   if (wpc.extConfig.disabledViewEditable) $('#disabledViewEditable').attr('checked', true)
+  // v3.5
+  if (wpc.extConfig.detailsShowAt2) $('#detailsShowAt2').attr('checked', true)
 })
diff --git a/src/main/resources/web/assets/js/rb-forms.js b/src/main/resources/web/assets/js/rb-forms.js
@@ -900,7 +900,7 @@ class RbFormElement extends React.Component {
   checkValue() {
     const err = this.isValueError()
     this.setState({ hasError: err || null })
-    const errMsg = err ? this.props.label + err : null
+    const errMsg = err ? this.props.label + ' ' + err : null
 
     if (this.isValueUnchanged() && !this.props.$$$parent.isNew) {
       if (err) this.props.$$$parent.setFieldValue(this.props.field, this.state.value, errMsg)
@@ -1559,13 +1559,18 @@ class RbFormImage extends RbFormElement {
 
     return (
       <div className="img-field">
-        {value.map((item) => {
+        {value.map((item, idx) => {
           return (
             <span key={item}>
-              <a title={$fileCutName(item)} className="img-thumbnail img-upload">
+              <a title={$fileCutName(item)} className="img-thumbnail img-upload" onClick={() => this._filePreview(value, idx)}>
                 <img src={this._formatUrl(item)} alt="IMG" />
                 {!this.props.readonly && (
-                  <b title={$L('移除')} onClick={() => this.removeItem(item)}>
+                  <b
+                    title={$L('移除')}
+                    onClick={(e) => {
+                      $stopEvent(e)
+                      this.removeItem(item)
+                    }}>
                     <span className="zmdi zmdi-close" />
                   </b>
                 )}
@@ -1574,9 +1579,9 @@ class RbFormImage extends RbFormElement {
           )
         })}
         <span title={$L('上传图片。需要 %s 个', `${this.__minUpload}~${this.__maxUpload}`)} className={showUpload ? '' : 'hide'}>
-          <input ref={(c) => (this._fieldValue__input = c)} type="file" className="inputfile" id={this._htmlid} accept="image/*" />
+          <input ref={(c) => (this._fieldValue__input = c)} type="file" className="inputfile" id={this._htmlid} accept="image/*" multiple />
           <label htmlFor={this._htmlid} className="img-thumbnail img-upload">
-            <span className="zmdi zmdi-image-alt mt-1" />
+            <span className="zmdi zmdi-image-alt down-2" />
           </label>
         </span>
         <input ref={(c) => (this._fieldValue = c)} type="hidden" value={value} />
@@ -1593,7 +1598,7 @@ class RbFormImage extends RbFormElement {
         {value.map((item, idx) => {
           return (
             <span key={item}>
-              <a title={$fileCutName(item)} onClick={() => (parent || window).RbPreview.create(value, idx)} className="img-thumbnail img-upload zoom-in">
+              <a title={$fileCutName(item)} onClick={() => this._filePreview(value, idx)} className="img-thumbnail img-upload zoom-in">
                 <img src={this._formatUrl(item)} alt="IMG" />
               </a>
             </span>
@@ -1608,6 +1613,11 @@ class RbFormImage extends RbFormElement {
     else return `${rb.baseUrl}/filex/img/${urlKey}?imageView2/2/w/100/interlace/1/q/100`
   }
 
+  _filePreview(urlKey, idx) {
+    const p = parent || window
+    p.RbPreview.create(urlKey, idx)
+  }
+
   onEditModeChanged(destroy) {
     if (destroy) {
       // NOOP
@@ -1637,8 +1647,12 @@ class RbFormImage extends RbFormElement {
         (res) => {
           mp_end()
           const paths = this.state.value || []
-          paths.push(res.key)
-          this.handleChange({ target: { value: paths } }, true)
+          // 最多上传，多余忽略
+          // FIXME 多选时进度条有点不好看
+          if (paths.length < this.__maxUpload) {
+            paths.push(res.key)
+            this.handleChange({ target: { value: paths } }, true)
+          }
         },
         () => mp_end()
       )
@@ -1678,7 +1692,7 @@ class RbFormFile extends RbFormImage {
         {value.map((item) => {
           let fileName = $fileCutName(item)
           return (
-            <div key={item} className="img-thumbnail" title={fileName}>
+            <div key={item} className="img-thumbnail" title={fileName} onClick={() => this._filePreview(item)}>
               <i className="file-icon" data-type={$fileExtName(fileName)} />
               <span>{fileName}</span>
               {!this.props.readonly && (
@@ -1690,7 +1704,7 @@ class RbFormFile extends RbFormImage {
           )
         })}
         <div className={`file-select ${showUpload ? '' : 'hide'}`}>
-          <input type="file" className="inputfile" ref={(c) => (this._fieldValue__input = c)} id={this._htmlid} accept={this.props.fileSuffix || null} />
+          <input type="file" className="inputfile" ref={(c) => (this._fieldValue__input = c)} id={this._htmlid} accept={this.props.fileSuffix || null} multiple />
           <label htmlFor={this._htmlid} title={$L('上传文件。需要 %d 个', `${this.__minUpload}~${this.__maxUpload}`)} className="btn-secondary">
             <i className="zmdi zmdi-upload" />
             <span>{$L('上传文件')}</span>
@@ -1710,7 +1724,7 @@ class RbFormFile extends RbFormImage {
         {value.map((item) => {
           let fileName = $fileCutName(item)
           return (
-            <a key={item} title={fileName} onClick={() => (parent || window).RbPreview.create(item)} className="img-thumbnail">
+            <a key={item} title={fileName} onClick={() => this._filePreview(item)} className="img-thumbnail">
               <i className="file-icon" data-type={$fileExtName(fileName)} />
               <span>{fileName}</span>
             </a>
@@ -1870,6 +1884,7 @@ class RbFormReference extends RbFormElement {
           const cascadingValue = this._getCascadingFieldValue()
           return cascadingValue ? { cascadingValue, ...query } : query
         },
+        placeholder: this.props.readonlyw === 3 ? $L('自动值') : null,
       })
 
       const val = this.state.value
@@ -2689,7 +2704,7 @@ class RbFormTag extends RbFormElement {
       this._initOptions()
     } else {
       this.__select2 = $(this._fieldValue).select2({
-        placeholder: $L('输入%s', this.props.label),
+        placeholder: this.props.readonlyw === 3 ? $L('自动值') : $L('输入%s', this.props.label),
         maximumSelectionLength: this.__maxSelect,
         tags: true,
         language: {

diff --git a/src/main/resources/web/assets/js/rb-view.js b/src/main/resources/web/assets/js/rb-view.js
@@ -207,7 +207,7 @@ class RelatedList extends React.Component {
     this.state = { ...props }
 
     // 相关配置
-    this.__searchSort = null
+    this.__searchSort = props.isDetail ? 'autoId:asc' : null
     this.__searchKey = null
     this.__pageNo = 1
 
@@ -779,39 +779,28 @@ const RbViewPage = {
       that.__vtabEntities.push(entity)
       const tabId = `tab-${entity.replace('.', '--')}` // `.` is JS keyword
 
+      const listProps = {
+        entity: entity,
+        entity2: [configThat.entityLabel, configThat.icon],
+        mainid: that.__id,
+        autoExpand: $isTrue(wpc.viewTabsAutoExpand),
+        defaultList: $isTrue(wpc.viewTabsDefaultList),
+        isDetail: !!this.showAt2,
+      }
+
       // v3.4 明细显示在下方
-      if (this._showAtBottom) {
+      if (this.showAt2 === 2) {
         $(`<div class="tab-pane-bottom"><h5><i class="zmdi zmdi-${this.icon}"></i>${this.entityLabel}</h5><div id="${tabId}"></div></div>`).appendTo('.tab-content-bottom')
-        renderRbcomp(
-          <MixRelatedList
-            entity={entity}
-            entity2={[configThat.entityLabel, configThat.icon]}
-            mainid={that.__id}
-            autoExpand={$isTrue(wpc.viewTabsAutoExpand)}
-            defaultList={$isTrue(wpc.viewTabsDefaultList)}
-          />,
-          tabId
-        )
+        renderRbcomp(<MixRelatedList {...listProps} />, tabId)
         return
       }
 
       const $tabNav = $(
         `<li class="nav-item ${$isTrue(wpc.viewTabsAutoHide) && 'hide'}"><a class="nav-link" href="#${tabId}" data-toggle="tab" title="${this.entityLabel}">${this.entityLabel}</a></li>`
       ).appendTo('.nav-tabs')
       const $tabPane = $(`<div class="tab-pane" id="${tabId}"></div>`).appendTo('.tab-content')
-
       $tabNav.find('a').on('click', function () {
-        $tabPane.find('.related-list').length === 0 &&
-          renderRbcomp(
-            <MixRelatedList
-              entity={entity}
-              entity2={[configThat.entityLabel, configThat.icon]}
-              mainid={that.__id}
-              autoExpand={$isTrue(wpc.viewTabsAutoExpand)}
-              defaultList={$isTrue(wpc.viewTabsDefaultList)}
-            />,
-            $tabPane
-          )
+        $tabPane.find('.related-list').length === 0 && renderRbcomp(<MixRelatedList {...listProps} />, $tabPane)
       })
     })
     this.updateVTabs()