three-trees-ui 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-trees-ui",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "publicPath": "/ui",
   "author": "hotent",
   "private": false,

package/packages/Collapse/src/HtCollapse.vue

@@ -1,8 +1,8 @@
 <template>
   <el-collapse
     ref="collapse"
+    v-model="openDefaultArr"
     :accordion="accordion"
-    :value="openDefaultArr"
     @change="handleChange"
   >
     <slot></slot>
@@ -15,6 +15,7 @@
     name: 'HtCollapse',
     mixins: [regionValidator],
     props: {
+      value: Array,
       accordion: {
         type: Boolean,
         default: false,
@@ -40,6 +41,8 @@
       openDefaultArr: {
         handler(val) {
           this.$root.$emit('collapse-active-names', val)
+          console.log('zlc val', val)
+          this.$emit('input', val)
         },
         deep: true,
       },

package/packages/CustomDialog/src/customDialog.vue

@@ -363,7 +363,7 @@
             </div>
             <el-scrollbar
               v-if="selectsCount > 0"
-              class="selector-selected__scroll"
+              class="selector-selected-height"
             >
               <draggable
                 v-model="selects"
@@ -2678,12 +2678,21 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    .el-dialog {
+      height: calc(100vh - 60px);
+    }
     .el-dialog__body {
       overflow: hidden;
     }
     .hotent-custom-scrollbar {
       height: 100%;
-      display: flex;
+      .el-scrollbar__view {
+        display: flex;
+        height: 100%;
+      }
+    }
+    .el-container {
+      flex-basis: min-content;
     }
 
     #container {
@@ -2707,13 +2716,21 @@
     }
     #right {
       order: 2;
-      width: 250px;
-      padding-left: 24px;
-    }
-    .el-card__body {
-      height: calc(var(--customHeight) - 130px - 48px - 25px - 24px);
-      overflow: auto;
-      @include base-scrollbar;
+      width: 310px;
+      padding: 24px;
+      height: auto;
+      box-sizing: border-box;
+      .el-card {
+        height: 100%;
+        margin: 0;
+      }
+      .el-card__body {
+        box-sizing: border-box;
+        height: calc(100% - 48px);
+      }
+      .selector-selected-height {
+        height: 100%;
+      }
     }
     .el-card__header {
       height: 48px;

package/packages/CustomDialog/src/main.vue

@@ -12,62 +12,51 @@
       <div
         v-if="inputWriteable"
         style="width: 100%"
-        class="el-select"
-        :class="{ 'has-value': value }"
+        :class="{ 'has-value': value, 'custom-selector-mobile': isMobile }"
+        @click="showEditInput"
       >
-        <div
-          ref="tagSpans"
-          class="el-select__tags"
-          :style="{ width: 'calc(100% - 10px - ' + inputSuffixWidth + 'px)' }"
-          @click="showEditInput"
-        >
-          <span class="tag-wrap">
-            <span
+        <div v-if="value && isSrcColor && !isMobile" class="custom-jump">
+          <span v-for="(item, index) in inputVal" :key="index">
+            <span class="src-color" @click.stop="jumpUrl(item)">
+              {{ item.value }}
+            </span>
+            <span v-if="index != inputVal.length - 1">,</span>
+          </span>
+        </div>
+        <div class="el-input el-input--suffix">
+          <div v-if="isMobile" class="custom-selector-mobile-box">
+            <div
               v-for="(item, index) in inputVal"
-              :key="item.value"
-              class="el-tag el-tag--info el-tag--small no-background"
-              @click.stop="jumpUrl(item)"
+              :key="index"
+              class="common-selector-tag"
             >
               <span
-                class="el-select__tags-text"
                 :class="{ 'src-color': isSrcColor }"
+                @click.stop="jumpUrl(item)"
               >
                 {{ item.value }}
               </span>
-              <i
-                class="el-tag__close el-icon-close"
-                @click.stop="removeSelectOrg(index)"
-              ></i>
-            </span>
-          </span>
-        </div>
-        <div class="el-input el-input--suffix">
+              <i class="el-icon-error" @click.stop="removeSelectOrg(index)"></i>
+            </div>
+          </div>
           <input
             ref="inputEl"
-            v-model="inputVal"
+            v-model="calcInputValue"
             v-validate="inputValidate"
             type="text"
-            readonly="readonly"
+            readonly
             :name="inputName"
             autocomplete="off"
             class="el-input__inner"
-            :placeholder="placeholder"
-            :style="{ height: inputSuffixHeight + 'px' }"
-            @click="showEditInput"
+            :placeholder="placeholder || '请选择'"
           />
           <!-- 允许手动输入时 -->
           <el-input
             v-if="isAllowCustom && isEditInputShow"
             ref="editInputRef"
             v-model="customValue"
-            clearable
             class="edit-input"
             size="mini"
-            :style="{
-              right: inputSuffixWidth - 1 + 'px',
-              width: 'auto!important',
-              height: inputSuffixHeight - 4 + 'px',
-            }"
             @blur="editInputBlur"
           ></el-input>
           <span ref="inputSuffix" class="el-input__suffix" @click="showDialog">
@@ -76,23 +65,11 @@
               :class="{ 'has-clear-all': value }"
             >
               <i
+                v-if="value"
                 class="el-icon-circle-close clear-icon"
                 @click.stop="clear"
               ></i>
-              <el-button slot="append" type="info" size="mini">
-                <i
-                  :class="
-                    custdialog.icon
-                      ? 'el-input__icon ' + custdialog.icon
-                      : 'el-input__icon icon-duihuakuang'
-                  "
-                  :style="{
-                    fontSize: '17px',
-                    lineHeight: inputSuffixHeight + 'px',
-                  }"
-                ></i>
-                {{ custdialog.name }}
-              </el-button>
+              <i class="el-icon-search"></i>
             </span>
           </span>
         </div>
@@ -106,49 +83,52 @@
         style="margin-right: 8px"
         @click.stop="jumpUrl(item)"
       >
-        <span class="el-select__tags-text" :class="{ 'src-color': isSrcColor }">
+        <span class="el-select__tags-text">
           {{ item.value }}
         </span>
       </span>
     </span>
-    <custom-mobile-dialog
-      v-if="isMobile"
-      ref="customMobileDialogRef"
-      :model-name="modelName"
-      :custdialog="custdialog"
-      :sub-index="subIndex"
-      :sun-index="sunIndex"
-      :sub-path="subPath"
-      :current-sub-data="currentSubData"
-      :dialog-config="dialogConfig"
-      :dialog-type="dialogType"
-      @calacInputSuffixHeight="calacInputSuffixHeight"
-      @updateInput="updateInput"
-    ></custom-mobile-dialog>
-    <custom-dialog
-      v-else
-      ref="customDialogRef"
-      v-model="value"
-      :model-name="modelName"
-      :custdialog="custdialog"
-      :sub-index="subIndex"
-      :sun-index="sunIndex"
-      :sub-path="subPath"
-      :current-sub-data="currentSubData"
-      :is-read-only="!inputWriteable"
-      :dialog-config="dialogConfig"
-      :dialog-type="dialogType"
-      @calacInputSuffixHeight="calacInputSuffixHeight"
-      @updateInput="updateInput"
-    ></custom-dialog>
+    <template v-if="isDialogShow">
+      <custom-mobile-dialog
+        v-if="isMobile"
+        ref="customMobileDialogRef"
+        :model-name="modelName"
+        :custdialog="custdialog"
+        :sub-index="subIndex"
+        :sun-index="sunIndex"
+        :sub-path="subPath"
+        :current-sub-data="currentSubData"
+        :dialog-config="dialogConfig"
+        :dialog-type="dialogType"
+        @calacInputSuffixHeight="calacInputSuffixHeight"
+        @updateInput="updateInput"
+      ></custom-mobile-dialog>
+      <custom-dialog
+        v-else
+        ref="customDialogRef"
+        v-model="value"
+        :model-name="modelName"
+        :custdialog="custdialog"
+        :sub-index="subIndex"
+        :sun-index="sunIndex"
+        :sub-path="subPath"
+        :current-sub-data="currentSubData"
+        :is-read-only="!inputWriteable"
+        :dialog-config="dialogConfig"
+        :dialog-type="dialogType"
+        @calacInputSuffixHeight="calacInputSuffixHeight"
+        @updateInput="updateInput"
+      ></custom-dialog>
+    </template>
+
     <span style="display: none">
       <slot name="labeldesc">{{ inputName }}</slot>
     </span>
     <ht-field-tail :field-name="inputName" :input-value="value" />
     <el-dialog
+      v-if="isDialogFormShow"
       title="表单详情"
       :visible.sync="isDialogFormShow"
-      v-if="isDialogFormShow"
       width="100%"
       custom-class="custom-dialog-form"
       fullscreen
@@ -206,6 +186,7 @@
     },
     data() {
       return {
+        isDialogShow: false,
         mobileSrc: '',
         isDialogFormShow: false,
         dialogConfig: null, // 对话框配置信息
@@ -238,6 +219,17 @@
       }
     },
     computed: {
+      calcInputValue: function() {
+        let name = ''
+        if (this.inputVal) {
+          name = this.inputVal
+            .map((k) => {
+              return k.value
+            })
+            .join(',')
+        }
+        return name
+      },
       inputVal: function() {
         if (!this.value || this.value == '||[]') {
           return null
@@ -310,10 +302,10 @@
           }
         }
         //获取对话框按钮名称宽度
-        this.calacInputSuffixWidth()
-        if (this.value && this.inputWriteable) {
-          this.calacInputSuffixHeight()
-        }
+        // this.calacInputSuffixWidth()
+        // if (this.value && this.inputWriteable) {
+        //   this.calacInputSuffixHeight()
+        // }
       }, 50)
     },
     methods: {
@@ -394,8 +386,9 @@
       editInputBlur() {
         this.$emit('input', this.customValue)
         this.isEditInputShow = false
+        this.validateInput()
       },
-      showEditInput() {
+      async showEditInput() {
         if (!this.isAllowCustom) {
           this.showDialog()
           return
@@ -406,10 +399,14 @@
           this.$refs.editInputRef.focus()
         })
       },
-      showDialog() {
+      async showDialog() {
         if (!this.inputWriteable) {
           return
         }
+        if (this.isDialogShow === false) {
+          this.isDialogShow = true
+          await this.$nextTick()
+        }
         if (this.isMobile) {
           this.$refs.customMobileDialogRef.showDialog()
         } else {
@@ -429,7 +426,7 @@
           this.clear()
         }
         this.$emit('input', value)
-        this.calacInputSuffixHeight()
+
         if (this.isMobile) {
           this.$refs.customMobileDialogRef.removeSelectOrg(item)
         } else {
@@ -439,30 +436,38 @@
       clear() {
         this.$emit('input', '')
         this.$refs.customDialogRef.clearAll()
-        this.calacInputSuffixHeight()
+        this.validateInput()
       },
       calacInputSuffixHeight() {
         setTimeout(() => {
-          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
+          // }
           // 触发验证
           if (this.$refs.inputEl) {
             this.$validator.validate(this.inputName)
           }
         }, 0)
-        this.calacInputSuffixWidth()
+        // this.calacInputSuffixWidth()
       },
       calacInputSuffixWidth() {
-        if (this.$refs.inputSuffix) {
-          this.inputSuffixWidth = this.$refs.inputSuffix.offsetWidth + 1
-        }
+        // if (this.$refs.inputSuffix) {
+        //   this.inputSuffixWidth = this.$refs.inputSuffix.offsetWidth + 1
+        // }
+      },
+      validateInput() {
+        setTimeout(() => {
+          if (this.$refs.inputEl) {
+            this.$validator.validate(this.inputName)
+          }
+        })
       },
       updateInput(data) {
         this.$emit('input', data)
+        this.validateInput()
       },
     },
   }
@@ -470,15 +475,17 @@
 <style lang="scss" scoped>
   .edit-input {
     position: absolute;
-    left: 1px;
-    border: none;
     top: 50%;
     transform: translateY(-50%);
-    z-index: 50;
+    height: 30px;
+    left: 1px;
+    right: 34px;
+    border: none;
+    z-index: 2;
     display: flex;
     align-items: center;
+    width: auto !important;
     ::v-deep .el-input__inner {
-      height: 100%;
       border: none;
     }
   }
@@ -497,20 +504,9 @@
       color: #c0c4cc;
     }
     .el-input__suffix {
-      position: absolute;
-      height: 100%;
-      right: 0px !important;
-      top: 0;
-      text-align: center;
-      color: #c0c4cc;
-      -webkit-transition: all 0.3s;
-      transition: all 0.3s;
-      pointer-events: none;
-      z-index: 100;
-      .has-clear-all {
-        display: flex;
-        align-items: center;
-      }
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
     }
     .el-dialog__body {
       padding: 0;
@@ -544,6 +540,11 @@
       height: 100%;
     }
   }
+  .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+  }
+
   .el-input__inner[aria-invalid='true'] {
     border-color: #f56c6c;
   }
@@ -644,6 +645,7 @@
     margin: 8px 0;
   }
   .src-color {
+    font-size: 12px;
     cursor: pointer;
     color: #409eff !important;
   }
@@ -685,4 +687,58 @@
       }
     }
   }
+  .el-select {
+    line-height: normal;
+  }
+  .custom-jump {
+    position: absolute;
+    height: 28px;
+    left: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 32px;
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    z-index: 1;
+  }
+  .custom-selector-mobile {
+    .custom-selector-mobile-box {
+      display: flex;
+      min-height: 32px;
+      align-items: center;
+      padding: 4px 14px;
+      flex-wrap: wrap;
+      gap: 4px;
+      line-height: 22px;
+      padding-right: 40px;
+      box-sizing: border-box;
+      .el-icon-error {
+        color: #909399;
+      }
+    }
+    .el-input__inner {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      user-select: none;
+      background: none;
+      color: transparent !important;
+      pointer-events: none;
+      height: 100%;
+    }
+    .el-input__suffix-inner {
+      display: flex;
+      align-items: center;
+    }
+    .el-icon-circle-close {
+      margin-right: 3px;
+    }
+    .user-icon,
+    .el-icon-circle-close {
+      display: inline-block !important;
+    }
+  }
 </style>