three-trees-ui 1.1.2 → 1.1.3

package/packages/DimensionSelector/src/main.vue

@@ -16,33 +16,23 @@
       @click="showDialog"
     >
       <div
-        ref="tagSpans"
-        style="width: calc(100% - 25px);"
-        :class="{
-          'el-select__tags_readonly': !inputWriteable,
-          'el-select__tags': inputWriteable,
-        }"
+        v-if="inputWriteable"
+        class="el-input el-input--suffix"
+        :class="{ 'custom-selector-mobile': isMobile }"
       >
-        <span class="tag-wrap">
-          <span
+        <div v-if="isMobile" class="custom-selector-mobile-box">
+          <div
             v-for="(item, index) in demensions"
             :key="index"
-            class="el-tag el-tag--info el-tag--small"
-            @click.stop
+            class="common-selector-tag"
           >
-            <span class="el-select__tags-text">{{ item.name }}</span>
-            <i
-              v-if="inputWriteable"
-              class="el-tag__close el-icon-close"
-              @click="handleRemove(item)"
-            ></i>
-          </span>
-        </span>
-      </div>
-      <div v-if="inputWriteable" class="el-input el-input--suffix">
+            <span>{{ item.name }}</span>
+            <i class="el-icon-error" @click.stop="handleRemove(item)"></i>
+          </div>
+        </div>
         <input
           ref="inputEl"
-          v-model="value"
+          v-model="calcInputValue"
           v-validate="inputValidate"
           type="text"
           readonly="readonly"
@@ -50,10 +40,6 @@
           autocomplete="off"
           class="el-input__inner"
           :placeholder="placeholder"
-          :style="{
-            height: inputSuffixHeight + 'px',
-            lineHeight: inputSuffixHeight + 'px',
-          }"
         />
         <span class="el-input__suffix">
           <span class="el-input__suffix-inner">
@@ -62,9 +48,13 @@
           </span>
         </span>
       </div>
+      <div v-else class="el-select__tags_readonly">
+        <span>{{ calcInputValue }}</span>
+      </div>
     </div>
     <ht-field-tail :field-name="inputName" :input-value="value" />
     <el-dialog
+      v-if="dialogVisible"
       title="选择维度"
       :visible.sync="dialogVisible"
       class="dialog-selector__wrapper"
@@ -216,6 +206,10 @@
       mode: {
         type: String,
       },
+      formInputsDisplay: {
+        type: String,
+        default: 'inline',
+      },
     },
     data() {
       return {
@@ -227,6 +221,17 @@
       }
     },
     computed: {
+      calcInputValue: function() {
+        let name = ''
+        if (this.demensions) {
+          name = this.demensions
+            .map((k) => {
+              return k.name
+            })
+            .join(',')
+        }
+        return name
+      },
       primaryField: function() {
         return this.config && this.config.hasOwnProperty('id')
           ? 'id'
@@ -285,14 +290,8 @@
         // 通过valueChange事件发布值变更消息
         this.$emit('valueChange', ary.join(','), newVal)
         setTimeout(() => {
-          if (newVal.length > 0) {
-            this.calacInputSuffixHeight()
-          } else {
-            this.inputSuffixHeight = 30
-          }
           if (this.$refs.inputEl) {
-            this.$refs.inputEl.focus()
-            this.$refs.inputEl.blur()
+            this.$validator.validate(this.inputName)
           }
         }, 10)
       },
@@ -371,14 +370,13 @@
           this.demensions = tmpAry
         }
       },
-      showDialog() {
+      async showDialog() {
         if (!this.inputWriteable) {
           return
         }
         this.dialogVisible = true
-        setTimeout(() => {
-          this.$refs.selector.onShow()
-        })
+        await this.$nextTick()
+        this.$refs.selector.onShow()
       },
       handleClose(done) {
         this.$refs.selector.onHide()
@@ -401,12 +399,12 @@
       },
       // 更新当前输入框的高度来适配已选数据的高度
       calacInputSuffixHeight() {
-        if (!this.$refs.tagSpans) return
-        if (this.$refs.tagSpans.offsetHeight) {
-          this.inputSuffixHeight = this.$refs.tagSpans.offsetHeight + 5
-        } else {
-          this.inputSuffixHeight = 30
-        }
+        // if (!this.$refs.tagSpans) return
+        // if (this.$refs.tagSpans.offsetHeight) {
+        //   this.inputSuffixHeight = this.$refs.tagSpans.offsetHeight + 5
+        // } else {
+        //   this.inputSuffixHeight = 30
+        // }
       },
     },
   }
@@ -427,7 +425,10 @@
     position: relative;
     top: 50%;
   }
-
+  .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+  }
   .el-input__inner[aria-invalid='true'] {
     border-color: #f56c6c;
   }

package/packages/JobSelector/src/main.vue

@@ -16,33 +16,23 @@
       @click="showDialog"
     >
       <div
-        ref="tagSpans"
-        style="width: calc(100% - 25px);"
-        :class="{
-          'el-select__tags_readonly': !inputWriteable,
-          'el-select__tags': inputWriteable,
-        }"
+        v-if="inputWriteable"
+        class="el-input el-input--suffix"
+        :class="{ 'custom-selector-mobile': isMobile }"
       >
-        <span class="tag-wrap">
-          <span
+        <div v-if="isMobile" class="custom-selector-mobile-box">
+          <div
             v-for="(item, index) in selectors"
             :key="index"
-            class="el-tag el-tag--info el-tag--small"
-            @click.stop
+            class="common-selector-tag"
           >
-            <span class="el-select__tags-text">{{ item.name }}</span>
-            <i
-              v-if="inputWriteable"
-              class="el-tag__close el-icon-close"
-              @click="handleRemove(item)"
-            ></i>
-          </span>
-        </span>
-      </div>
-      <div v-if="inputWriteable" class="el-input el-input--suffix">
+            <span>{{ item.name }}</span>
+            <i class="el-icon-error" @click.stop="handleRemove(item)"></i>
+          </div>
+        </div>
         <input
           ref="inputEl"
-          v-model="value"
+          v-model="calcInputValue"
           v-validate="inputValidate"
           type="text"
           readonly="readonly"
@@ -50,10 +40,6 @@
           autocomplete="off"
           class="el-input__inner"
           :placeholder="placeholder"
-          :style="{
-            height: inputSuffixHeight + 'px',
-            lineHeight: inputSuffixHeight + 'px',
-          }"
         />
         <span class="el-input__suffix">
           <span class="el-input__suffix-inner">
@@ -62,49 +48,54 @@
           </span>
         </span>
       </div>
+      <div v-else class="el-select__tags_readonly">
+        <span>{{ calcInputValue }}</span>
+      </div>
     </div>
     <ht-field-tail :field-name="inputName" :input-value="value" />
-    <job-selector-mobile-dialog
-      v-if="isMobile"
-      ref="jobSelectorMobileDialog"
-      v-model="selectors"
-      :search-placeholder="searchPlaceholder"
-      :single="single"
-      :data="data"
-      :pagination="pagination"
-      :select-label="selectLabel"
-      :quick-search-props="quickSearchProps"
-      :append-to-body="appendToBody"
-      :title="title"
-      :primary-field="primaryField"
-      @search="(word) => $emit('search', word)"
-      @reset="() => $emit('reset')"
-      @row-click="(row) => $emit('row-click', row)"
-      @select-data="(data) => $emit('select-data', data)"
-      @page-change="(page) => $emit('page-change', page)"
-    />
-    <job-selector-dialog
-      v-else
-      ref="jobSelectorDialog"
-      v-model="selectors"
-      :search-placeholder="searchPlaceholder"
-      :single="single"
-      :data="data"
-      :table-columns="tableColumns"
-      :pagination="pagination"
-      :select-label="selectLabel"
-      :quick-search-props="quickSearchProps"
-      :append-to-body="appendToBody"
-      :title="title"
-      :primary-field="primaryField"
-      :mode="mode"
-      @search="(word) => $emit('search', word)"
-      @reset="() => $emit('reset')"
-      @row-click="(row) => $emit('row-click', row)"
-      @select-data="(data) => $emit('select-data', data)"
-      @page-change="(page) => $emit('page-change', page)"
-      @size-change="(size) => $emit('size-change', size)"
-    />
+    <template v-if="isDialogShow">
+      <job-selector-mobile-dialog
+        v-if="isMobile"
+        ref="jobSelectorMobileDialog"
+        v-model="selectors"
+        :search-placeholder="searchPlaceholder"
+        :single="single"
+        :data="data"
+        :pagination="pagination"
+        :select-label="selectLabel"
+        :quick-search-props="quickSearchProps"
+        :append-to-body="appendToBody"
+        :title="title"
+        :primary-field="primaryField"
+        @search="(word) => $emit('search', word)"
+        @reset="() => $emit('reset')"
+        @row-click="(row) => $emit('row-click', row)"
+        @select-data="(data) => $emit('select-data', data)"
+        @page-change="(page) => $emit('page-change', page)"
+      />
+      <job-selector-dialog
+        v-else
+        ref="jobSelectorDialog"
+        v-model="selectors"
+        :search-placeholder="searchPlaceholder"
+        :single="single"
+        :data="data"
+        :table-columns="tableColumns"
+        :pagination="pagination"
+        :select-label="selectLabel"
+        :quick-search-props="quickSearchProps"
+        :append-to-body="appendToBody"
+        :title="title"
+        :primary-field="primaryField"
+        :mode="mode"
+        @search="(word) => $emit('search', word)"
+        @reset="() => $emit('reset')"
+        @row-click="(row) => $emit('row-click', row)"
+        @select-data="(data) => $emit('select-data', data)"
+        @page-change="(page) => $emit('page-change', page)"
+        @size-change="(size) => $emit('size-change', size)"
+      />
+    </template>
   </div>
 </template>
 <script>
@@ -181,11 +172,23 @@
     },
     data() {
       return {
+        isDialogShow: false,
         inputSuffixHeight: 30,
         selectors: [],
       }
     },
     computed: {
+      calcInputValue: function() {
+        let name = ''
+        if (this.selectors) {
+          name = this.selectors
+            .map((k) => {
+              return k.name
+            })
+            .join(',')
+        }
+        return name
+      },
       primaryField: function() {
         return this.config && this.config.hasOwnProperty('id')
           ? 'id'
@@ -235,14 +238,8 @@
         // 通过valueChange事件发布值变更消息
         this.$emit('valueChange', ary.join(','), newVal)
         setTimeout(() => {
-          if (newVal.length > 0) {
-            this.calacInputSuffixHeight()
-          } else {
-            this.inputSuffixHeight = 30
-          }
           if (this.$refs.inputEl) {
-            this.$refs.inputEl.focus()
-            this.$refs.inputEl.blur()
+            this.$validator.validate(this.inputName)
           }
         }, 10)
       },
@@ -296,10 +293,14 @@
           this.selectors = tmpAry
         }
       },
-      showDialog() {
+      async showDialog() {
         if (!this.inputWriteable) {
           return
         }
+        if (this.isDialogShow === false) {
+          this.isDialogShow = true
+          await this.$nextTick()
+        }
         if (this.isMobile) {
           this.$refs.jobSelectorMobileDialog.showDialog()
         } else {
@@ -315,12 +316,12 @@
       },
       // 更新当前输入框的高度来适配已选数据的高度
       calacInputSuffixHeight() {
-        if (!this.$refs.tagSpans) return
-        if (this.$refs.tagSpans.offsetHeight) {
-          this.inputSuffixHeight = this.$refs.tagSpans.offsetHeight + 5
-        } else {
-          this.inputSuffixHeight = 30
-        }
+        // if (!this.$refs.tagSpans) return
+        // if (this.$refs.tagSpans.offsetHeight) {
+        //   this.inputSuffixHeight = this.$refs.tagSpans.offsetHeight + 5
+        // } else {
+        //   this.inputSuffixHeight = 30
+        // }
       },
     },
   }
@@ -335,7 +336,10 @@
     position: relative;
     top: 50%;
   }
-
+  .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+  }
   .el-input__inner[aria-invalid='true'] {
     border-color: #f56c6c;
   }

package/packages/OnlineForm/src/Form.vue

@@ -1,9 +1,9 @@
 <template>
-  <div name="online-form">
+  <div name="online-form" :class="{ 'is-mobile-online-form': isMobile }">
     <el-skeleton v-if="loadStatus == 0" :rows="6" animated />
     <component
+      :is="currentComponent"
       v-else-if="loadStatus > 0"
-      v-bind:is="currentComponent"
       :name="formName"
       :data="data"
       :permission="permission"
@@ -31,12 +31,15 @@
   import onlineSubtable from '@/mixins/onlineSubtable.js'
   import regionValidator from '@/mixins/regionValidator.js'
   import emitter from '@/mixins/emitter.js'
+  import mobileMode from '@/mixins/mobileMode.js'
+  import { Notification } from 'element-ui'
+  import { Notify } from 'vant'
 
   import Vue from 'vue'
   export default {
     name: 'HtOnlineForm',
     componentName: 'HtOnlineForm',
-    mixins: [regionValidator, emitter],
+    mixins: [regionValidator, emitter, mobileMode],
     props: {
       html: String,
       data: Object,
@@ -79,6 +82,9 @@
         type: Boolean,
         default: false,
       },
+      formExpand: {
+        type: String,
+      },
     },
     data() {
       return {
@@ -128,10 +134,16 @@
           } else {
             // 执行校验逻辑
             this.validateRegion(`[name='${this.formName}']`).then(
-              (errorItems) => {
+              async (errorItems) => {
                 if (errorItems.length > 0) {
                   reject(errorItems)
                 } else {
+                  // 如果有子表，需要检验子表必填
+                  let result = await this.validateTable()
+                  if (result === false) {
+                    reject(8)
+                    return
+                  }
                   this.broadcast('HtGlobalValidate', 'global-validate')
                 }
               }
@@ -139,6 +151,93 @@
           }
         })
       },
+      // 校验子表必填
+      validateTable() {
+        return new Promise((resolve) => {
+          if (!this.formExpand) {
+            resolve(true)
+            return
+          }
+          const expandList = JSON.parse(this.formExpand)
+
+          if (!expandList.list) {
+            resolve(true)
+            return
+          }
+          const subTableList = expandList.list.filter((it) => {
+            return (
+              (this.isMobile && it.ctrlType == 'subDiv') ||
+              (!this.isMobile && it.ctrlType === 'subtable')
+            )
+          })
+          if (!this.isMobile) {
+            // pc端找到 分页的子表 校验
+            const havePageSub = subTableList.filter((k) => {
+              return k.subtablePagination
+            })
+            if (!havePageSub.length) {
+              resolve(true)
+              return
+            }
+          }
+          const mainAlias = Object.keys(this.data)[0]
+          const mainData = this.data[mainAlias]
+          const errorResult = []
+
+          Object.keys(mainData).forEach((key) => {
+            if (key.startsWith('sub_')) {
+              const curSubConfig = subTableList.find((sub) => {
+                return sub.name == key.replace('sub_', '')
+              })
+              const subAlias = key.replace('sub_', '')
+              const subPermission = this.permission.fields[subAlias]
+              mainData[key].forEach((item, index) => {
+                Object.keys(item).forEach((subKey) => {
+                  if (subPermission[subKey] == 'b' && !item[subKey]) {
+                    const subItem = curSubConfig.list.find((l) => {
+                      return l.name === subKey
+                    })
+                    let haveIndex = errorResult.findIndex((it) => {
+                      return (
+                        it.tableName === curSubConfig.desc &&
+                        it.fieldName === subItem.desc
+                      )
+                    })
+                    if (haveIndex === -1) {
+                      errorResult.push({
+                        tableName: curSubConfig.desc,
+                        index: index + 1,
+                        fieldName: subItem.desc,
+                      })
+                    }
+                  }
+                })
+              })
+            }
+          })
+          if (errorResult.length > 0) {
+            const messages = errorResult.map((k) => {
+              return `${k.tableName}，【${k.fieldName}】必填`
+            })
+            // 判断是移动端还是pc
+            if (utils.isMobile()) {
+              Notify({
+                message: messages.join('\n'),
+                background: '#f25130',
+              })
+            } else {
+              Notification.error({
+                title: this.$t('ht.common.warmTips'),
+                dangerouslyUseHTMLString: true,
+                message: messages.join('<br/>'),
+              })
+            }
+            resolve(false)
+          } else {
+            resolve(true)
+          }
+        })
+      },
       init() {
         this.currentComponent = 'runtimeTemplate_' + this.scopeName
         this.loadStatus = 1
@@ -182,6 +281,11 @@
               default: false,
             },
           },
+          data() {
+            return {
+              subDivCollapse: [],
+            }
+          },
           template: this.html,
         })
       },
@@ -189,6 +293,29 @@
   }
 </script>
 <style lang="scss">
+  .is-mobile-online-form {
+    .ht-form-item {
+      .el-form-item__label {
+        width: 76px !important;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: left;
+        > span {
+          display: inline-block;
+          max-width: 100%;
+          font-size: 14px;
+          color: #656a72;
+          margin-left: 0 !important;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+      .el-form-item__content {
+        margin-left: 76px !important;
+      }
+    }
+  }
   .transition {
     outline: 1px dotted #85a5ff;
     outline-width: 2px;
@@ -308,7 +435,7 @@
       width: 100%;
     }
     .el-input {
-      width: 100% !important;
+      width: 100%;
     }
     .amap-page-container {
       .amap-toolbar,
@@ -441,6 +568,7 @@
               }
 
               .el-icon-copy-document,
+              .el-icon-edit,
               .el-icon-delete {
                 display: inline-block;
                 border: 1px solid #409eff;
@@ -449,6 +577,9 @@
                 color: #409eff;
                 background: #fff;
               }
+              .el-button + .el-button {
+                margin-left: 4px;
+              }
             }
 
             .el-icon-arrow-right:before {
@@ -522,6 +653,7 @@
                 }
 
                 .el-icon-copy-document,
+                .el-icon-edit,
                 .el-icon-delete {
                   display: inline-block;
                   border: 1px solid #409eff;
@@ -555,6 +687,24 @@
         }
       }
     }
+    .sonDetail_lable_box,
+    .sonDetail_lable_value {
+      width: calc(100% - 70px);
+      .sonDetail_lable_item {
+        font-weight: 500;
+      }
+      > div {
+        flex: 1;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-all;
+        line-height: normal;
+        text-align: center;
+      }
+    }
   }
 
   ::v-deep .el-table__header {